diff --git a/components/chain/chain.js b/components/chain/chain.js index 71fdbe40e..7db6c4155 100644 --- a/components/chain/chain.js +++ b/components/chain/chain.js @@ -9,6 +9,9 @@ import classes from './chain.module.css' import stores from '../../stores/index.js' import { getProvider } from '../../utils' +import Icon from './icon' +import useEthereumListsIcon from './useEthereumListsIcon'; + import { ERROR, CONNECT_WALLET, @@ -20,6 +23,7 @@ export default function Chain({ chain }) { const router = useRouter() const [ account, setAccount ] = useState(null) + const { url: iconUrl } = useEthereumListsIcon(chain.icon) useEffect(() => { const accountConfigure = () => { @@ -96,8 +100,8 @@ export default function Chain({ chain }) { return (
- { e.target.onerror = null; e.target.src = "/chains/unknown-logo.png"; diff --git a/components/chain/icon.js b/components/chain/icon.js new file mode 100644 index 000000000..2f94246de --- /dev/null +++ b/components/chain/icon.js @@ -0,0 +1,17 @@ + +export default function Icon( { src , ...props }) { + const IPFS_SCHEMA = "ipfs://" + + const parseUrl = (url) => { + if (url?.startsWith(IPFS_SCHEMA)) { + const cid = src.replace(IPFS_SCHEMA, "") + return `https://ipfs.io/ipfs/${cid}` + } else { + return url + } + } + + return ( + + ) +} diff --git a/components/chain/useEthereumListsIcon.js b/components/chain/useEthereumListsIcon.js new file mode 100644 index 000000000..7dca80a6b --- /dev/null +++ b/components/chain/useEthereumListsIcon.js @@ -0,0 +1,8 @@ +import useSWR from 'swr' + +const fetcher = (...args) => fetch(...args).then(res => res.json()) + +export default function useEthereumListsIcon(iconName) { + const { data: iconData, error: iconError } = useSWR(iconName ? `https://raw.githubusercontent.com/ethereum-lists/chains/master/_data/icons/${iconName}.json` : null, fetcher) + return { url: iconData?.shift()?.url, error: iconError } +}