From 3106ac2cd3eed9801f985c1093e6dd9cccf2f65f Mon Sep 17 00:00:00 2001
From: Mor Sela <morsela@gmail.com>
Date: Wed, 19 Jan 2022 22:40:52 -0800
Subject: [PATCH 1/4] Added support for displayed chains icons based on
 ethereum-lists/chains

---
 components/chain/chain.js                |  9 +++++++--
 components/chain/icon.js                 | 17 +++++++++++++++++
 components/chain/useEthereumListsIcon.js |  8 ++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 components/chain/icon.js
 create mode 100644 components/chain/useEthereumListsIcon.js

diff --git a/components/chain/chain.js b/components/chain/chain.js
index 71fdbe40e..ec6442dc8 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,9 @@ 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'}
+          alt="…"
           onError={e => {
             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..5e64e6fc7
--- /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 (
+      <img src={parseUrl(src)} {...props} />
+    )
+  }
\ No newline at end of file
diff --git a/components/chain/useEthereumListsIcon.js b/components/chain/useEthereumListsIcon.js
new file mode 100644
index 000000000..f43da88d2
--- /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 }
+}
\ No newline at end of file

From eced1891ce9e01e77f2b15d57fd76e22ae17d82a Mon Sep 17 00:00:00 2001
From: Mor Sela <morsela@gmail.com>
Date: Wed, 19 Jan 2022 22:43:41 -0800
Subject: [PATCH 2/4] cleanup

---
 components/chain/chain.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/chain/chain.js b/components/chain/chain.js
index ec6442dc8..7db6c4155 100644
--- a/components/chain/chain.js
+++ b/components/chain/chain.js
@@ -102,7 +102,6 @@ export default function Chain({ chain }) {
       <div className={ classes.chainNameContainer }>
         <Icon
           src={iconUrl ? iconUrl : '/connectors/icn-asd.svg'}
-          alt="…"
           onError={e => {
             e.target.onerror = null;
             e.target.src = "/chains/unknown-logo.png";

From 9d0160b04b6f909dafde23bef6967d6f0b336399 Mon Sep 17 00:00:00 2001
From: Mor Sela <morsela@gmail.com>
Date: Wed, 19 Jan 2022 22:44:34 -0800
Subject: [PATCH 3/4] added missing new lines

---
 components/chain/icon.js                 | 3 ++-
 components/chain/useEthereumListsIcon.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/chain/icon.js b/components/chain/icon.js
index 5e64e6fc7..104fcc005 100644
--- a/components/chain/icon.js
+++ b/components/chain/icon.js
@@ -14,4 +14,5 @@ export default function Icon( { src , ...props }) {
     return (
       <img src={parseUrl(src)} {...props} />
     )
-  }
\ No newline at end of file
+  }
+  
\ No newline at end of file
diff --git a/components/chain/useEthereumListsIcon.js b/components/chain/useEthereumListsIcon.js
index f43da88d2..7dca80a6b 100644
--- a/components/chain/useEthereumListsIcon.js
+++ b/components/chain/useEthereumListsIcon.js
@@ -5,4 +5,4 @@ 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 }
-}
\ No newline at end of file
+}

From 56377825918baaae89bcb58bea3a59f9c1c2d4a1 Mon Sep 17 00:00:00 2001
From: Mor Sela <morsela@gmail.com>
Date: Wed, 19 Jan 2022 22:52:09 -0800
Subject: [PATCH 4/4] removed bad identations

---
 components/chain/icon.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/chain/icon.js b/components/chain/icon.js
index 104fcc005..2f94246de 100644
--- a/components/chain/icon.js
+++ b/components/chain/icon.js
@@ -1,7 +1,7 @@
 
 export default function Icon( { src , ...props }) {
     const IPFS_SCHEMA = "ipfs://"
-    
+
     const parseUrl = (url) => {
       if (url?.startsWith(IPFS_SCHEMA)) {
         const cid = src.replace(IPFS_SCHEMA, "")
@@ -10,9 +10,8 @@ export default function Icon( { src , ...props }) {
         return url
       }
     }
-  
+
     return (
       <img src={parseUrl(src)} {...props} />
     )
-  }
-  
\ No newline at end of file
+}