Added support for displayed chains icons based on ethereum-lists/chains

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 (
     <Paper elevation={ 1 } className={ classes.chainContainer } key={ chain.chainId }>
       <div className={ classes.chainNameContainer }>
-        <img
-          src='/connectors/icn-asd.svg'
+        <Icon
+          src={iconUrl ? iconUrl : '/connectors/icn-asd.svg'}
           onError={e => {
             e.target.onerror = null;
             e.target.src = "/chains/unknown-logo.png";

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 (
+      <img src={parseUrl(src)} {...props} />
+    )
+}

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 }
+}