-
Notifications
You must be signed in to change notification settings - Fork 339
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: update proposal metadata display [web-desmos] (#1326)
## Description Closes: #XXXX [BDU-1179](https://forbole.atlassian.net/browse/BDU-1179) Changes: - [desmos, osmosis, persistence ] Display metadata content on proposal details page - [persistence] Fix params page display <!-- Add a description of the changes that this PR introduces and the files that are the most critical to review. --> --- ### Author Checklist _All items are required. Please add a note to the item if the item is not applicable and please add links to any relevant follow up issues._ I have... - [x] ran linting via `yarn lint` - [x] wrote tests where necessary - [x] included the correct [type prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json) in the PR title - [x] targeted the correct branch - [x] provided a link to the relevant issue or specification - [x] reviewed "Files changed" and left comments if necessary - [x] confirmed all CI checks have passed - [x] added a changeset via [`yarn && yarn changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) [BDU-1179]: https://forbole.atlassian.net/browse/BDU-1179?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
- Loading branch information
Showing
22 changed files
with
2,072 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| 'web-persistence': minor | ||
| 'web-osmosis': minor | ||
| 'web-desmos': minor | ||
| --- | ||
|
|
||
| fix: update proposal metadata display |
90 changes: 90 additions & 0 deletions
90
...mos/src/screens/proposal_details/components/overview/components/metadata_loader/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import Loading from '@/components/loading'; | ||
|
|
||
| interface MetadataLoaderProps { | ||
| metadata: string; | ||
| } | ||
|
|
||
| // Checks if a string is a valid URL | ||
| const isValidUrl = (url: string) => { | ||
| const pattern = /^(ftp|http|https|ipfs):\/\/[^ "]+$/; | ||
| return pattern.test(url); | ||
| }; | ||
|
|
||
| // Checks if a string is a IPFS URL | ||
| const isIPFSUrl = (url: string) => { | ||
| const pattern = /^(ipfs):\/\/[^ "]+$/; | ||
| return pattern.test(url); | ||
| }; | ||
|
|
||
| // Removes ipfs prefix from metadata | ||
| const removeIPFSPrefix = (metadata: string): string => { | ||
| if (metadata.startsWith('ipfs://')) { | ||
| return metadata.substring('ipfs://'.length); | ||
| } | ||
| return metadata; | ||
| }; | ||
|
|
||
| const MetadataLoader: React.FC<MetadataLoaderProps> = ({ metadata }) => { | ||
| const [metadataContent, setMetadataContent] = useState<string | null>(null); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
|
|
||
| useEffect(() => { | ||
| let isMounted = true; | ||
|
|
||
| const fetchMetadata = async () => { | ||
| try { | ||
| if (!isValidUrl(metadata)) { | ||
| setMetadataContent(metadata); | ||
| return; | ||
| } | ||
| const controller = new AbortController(); | ||
| const timeoutId = setTimeout(() => controller.abort(), 10000); // Abort the fetch after 10 seconds | ||
|
|
||
| let response: Response; | ||
| if (!isIPFSUrl(metadata)) { | ||
| response = await fetch(metadata, { signal: controller.signal }); | ||
| } else { | ||
| const modifiedMetadata = removeIPFSPrefix(metadata); | ||
| response = await fetch(`https://ipfs.io/ipfs/${modifiedMetadata}`, { | ||
| signal: controller.signal, | ||
| }); | ||
| } | ||
| clearTimeout(timeoutId); // Clear the timeout | ||
| if (!isMounted) { | ||
| setMetadataContent(metadata); | ||
| return; | ||
| } | ||
| if (!response.ok) { | ||
| setMetadataContent(metadata); | ||
| return; | ||
| } | ||
| const text = await response.text(); | ||
| setMetadataContent(text); | ||
| } catch (err) { | ||
| if (!isMounted) return; // Exit if the component is unmounted | ||
| setMetadataContent(metadata); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchMetadata(); | ||
|
|
||
| return () => { | ||
| isMounted = false; // Set isMounted to false when unmounting | ||
| }; | ||
| }, [metadata]); | ||
|
|
||
| if (loading) { | ||
| return <Loading />; | ||
| } | ||
|
|
||
| if (metadataContent) { | ||
| return <code>{metadataContent}</code>; | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default MetadataLoader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
...sis/src/screens/proposal_details/components/overview/components/metadata_loader/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import Loading from '@/components/loading'; | ||
|
|
||
| interface MetadataLoaderProps { | ||
| metadata: string; | ||
| } | ||
|
|
||
| // Checks if a string is a valid URL | ||
| const isValidUrl = (url: string) => { | ||
| const pattern = /^(ftp|http|https|ipfs):\/\/[^ "]+$/; | ||
| return pattern.test(url); | ||
| }; | ||
|
|
||
| // Checks if a string is a IPFS URL | ||
| const isIPFSUrl = (url: string) => { | ||
| const pattern = /^(ipfs):\/\/[^ "]+$/; | ||
| return pattern.test(url); | ||
| }; | ||
|
|
||
| // Removes ipfs prefix from metadata | ||
| const removeIPFSPrefix = (metadata: string): string => { | ||
| if (metadata.startsWith('ipfs://')) { | ||
| return metadata.substring('ipfs://'.length); | ||
| } | ||
| return metadata; | ||
| }; | ||
|
|
||
| const MetadataLoader: React.FC<MetadataLoaderProps> = ({ metadata }) => { | ||
| const [metadataContent, setMetadataContent] = useState<string | null>(null); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
|
|
||
| useEffect(() => { | ||
| let isMounted = true; | ||
|
|
||
| const fetchMetadata = async () => { | ||
| try { | ||
| if (!isValidUrl(metadata)) { | ||
| setMetadataContent(metadata); | ||
| return; | ||
| } | ||
| const controller = new AbortController(); | ||
| const timeoutId = setTimeout(() => controller.abort(), 10000); // Abort the fetch after 10 seconds | ||
|
|
||
| let response: Response; | ||
| if (!isIPFSUrl(metadata)) { | ||
| response = await fetch(metadata, { signal: controller.signal }); | ||
| } else { | ||
| const modifiedMetadata = removeIPFSPrefix(metadata); | ||
| response = await fetch(`https://ipfs.io/ipfs/${modifiedMetadata}`, { | ||
| signal: controller.signal, | ||
| }); | ||
| } | ||
| clearTimeout(timeoutId); // Clear the timeout | ||
| if (!isMounted) { | ||
| setMetadataContent(metadata); | ||
| return; | ||
| } | ||
| if (!response.ok) { | ||
| setMetadataContent(metadata); | ||
| return; | ||
| } | ||
| const text = await response.text(); | ||
| setMetadataContent(text); | ||
| } catch (err) { | ||
| if (!isMounted) return; // Exit if the component is unmounted | ||
| setMetadataContent(metadata); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchMetadata(); | ||
|
|
||
| return () => { | ||
| isMounted = false; // Set isMounted to false when unmounting | ||
| }; | ||
| }, [metadata]); | ||
|
|
||
| if (loading) { | ||
| return <Loading />; | ||
| } | ||
|
|
||
| if (metadataContent) { | ||
| return <code>{metadataContent}</code>; | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default MetadataLoader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.