From 147d8a6131565f12c0151aeea264b8968ec8e37f Mon Sep 17 00:00:00 2001
From: Nam Nguyen <hnamnguyencse@gmail.com>
Date: Mon, 25 Apr 2022 15:36:49 +0700
Subject: [PATCH] Remove token logo white background (#311)

* Remove token logo white background

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>

* fix error

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>

* put logo beside

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>

* fix crash

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>
---
 src/components/DoubleLogo/index.js |  6 +++---
 src/components/PairList/index.js   | 14 +++++++-------
 src/components/TokenList/index.js  | 12 +++++++-----
 src/components/TokenLogo/index.js  |  2 --
 src/contexts/Application.js        |  2 +-
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/DoubleLogo/index.js b/src/components/DoubleLogo/index.js
index 0ee0df641..fc6b27b26 100644
--- a/src/components/DoubleLogo/index.js
+++ b/src/components/DoubleLogo/index.js
@@ -6,7 +6,7 @@ const TokenWrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: row;
-  margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'};
+  ${'' /* margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'}; */}
 `
 
 const HigherLogo = styled(TokenLogo)`
@@ -15,8 +15,8 @@ const HigherLogo = styled(TokenLogo)`
 `
 
 const CoveredLogo = styled(TokenLogo)`
-  position: absolute;
-  left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'};
+  ${'' /* position: absolute; */}
+  ${'' /* left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'}; */}
   border-radius: 50%;
 `
 
diff --git a/src/components/PairList/index.js b/src/components/PairList/index.js
index f830be077..618cedab1 100644
--- a/src/components/PairList/index.js
+++ b/src/components/PairList/index.js
@@ -19,6 +19,7 @@ import useTheme from '../../hooks/useTheme'
 import { NETWORKS_INFO } from '../../constants/networks'
 import { aggregatePairs } from '../../utils/aggregateData'
 import { MouseoverTooltip } from '../Tooltip'
+import { NetworksInfoEnv } from '../../contexts/NetworkInfo'
 
 dayjs.extend(utc)
 
@@ -173,10 +174,9 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 5 }) {
 
   const ListItem = ({ pairAddress, index }) => {
     const pairData = aggregatedPairs[pairAddress]
-
     if (pairData && pairData.token0 && pairData.token1) {
       const showData = MAP_SHOW_DATA(pairData)
-
+      const pairNetworkInfo = NETWORKS_INFO[pairData.chainId] || NetworksInfoEnv[0]
       return (
         <DashGrid style={{ height: '56px' }} disbaleLinks={disbaleLinks} focus={true} isShowNetworkColumn={isShowNetworkColumn}>
           <DataText area='name' fontWeight='500'>
@@ -186,11 +186,11 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 5 }) {
               a0={pairData.token0.id}
               a1={pairData.token1.id}
               margin={!below740}
-              networkInfo={NETWORKS_INFO[pairData.chainId]}
+              networkInfo={pairNetworkInfo}
             />
             <CustomLink
               style={{ marginLeft: '20px', whiteSpace: 'nowrap' }}
-              to={'/' + NETWORKS_INFO[pairData.chainId].urlKey + '/pair/' + pairAddress}
+              to={'/' + pairNetworkInfo.urlKey + '/pair/' + pairAddress}
               color={color}
             >
               <FormattedName text={showData.name} maxCharacters={below600 ? 8 : 16} adjustSize={true} link={true} />
@@ -198,9 +198,9 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 5 }) {
           </DataText>
           {isShowNetworkColumn && (
             <DataText area='network'>
-              <Link to={'/' + NETWORKS_INFO[pairData.chainId].urlKey}>
-                <MouseoverTooltip text={NETWORKS_INFO[pairData.chainId].name} width='unset'>
-                  <img src={NETWORKS_INFO[pairData.chainId].icon} width={25} />
+              <Link to={'/' + pairNetworkInfo.urlKey}>
+                <MouseoverTooltip text={pairNetworkInfo.name} width='unset'>
+                  <img src={pairNetworkInfo.icon} width={25} />
                 </MouseoverTooltip>
               </Link>
             </DataText>
diff --git a/src/components/TokenList/index.js b/src/components/TokenList/index.js
index 9d3c09bdc..c89b9b5ba 100644
--- a/src/components/TokenList/index.js
+++ b/src/components/TokenList/index.js
@@ -20,6 +20,7 @@ import { useAllTokenData } from '../../contexts/TokenData'
 import { NETWORKS_INFO } from '../../constants/networks'
 import { aggregateTokens } from '../../utils/aggregateData'
 import { MouseoverTooltip } from '../Tooltip'
+import { NetworksInfoEnv } from '../../contexts/NetworkInfo'
 
 dayjs.extend(utc)
 
@@ -216,15 +217,16 @@ function TopTokenList({ itemMax = 5 }) {
   }, [below680, formattedTokens, itemMax, page, sortDirection, sortedColumn])
 
   const ListItem = ({ item, index }) => {
+    const tokenNetworkInfo = NETWORKS_INFO[item.chainId] || NetworksInfoEnv[0]
     return (
       <DashGrid style={{ height: '56px' }} focus={true} isShowNetworkColumn={isShowNetworkColumn}>
         <DataText area='name' fontWeight='500'>
           <Row>
             {!below680 && <div style={{ marginRight: '1rem', width: '10px' }}>{index}</div>}
-            <TokenLogo address={item.id} networkInfo={NETWORKS_INFO[item.chainId]} />
+            <TokenLogo address={item.id} networkInfo={tokenNetworkInfo} />
             <CustomLink
               style={{ marginLeft: '16px', whiteSpace: 'nowrap' }}
-              to={'/' + NETWORKS_INFO[item.chainId].urlKey + '/token/' + item.id}
+              to={'/' + tokenNetworkInfo.urlKey + '/token/' + item.id}
             >
               <FormattedName
                 text={below680 ? item.symbol : item.name}
@@ -237,9 +239,9 @@ function TopTokenList({ itemMax = 5 }) {
         </DataText>
         {isShowNetworkColumn && (
           <DataText area='network'>
-            <Link to={'/' + NETWORKS_INFO[item.chainId].urlKey}>
-              <MouseoverTooltip text={NETWORKS_INFO[item.chainId].name} width='unset'>
-                <img src={NETWORKS_INFO[item.chainId].icon} width={25} />
+            <Link to={'/' + tokenNetworkInfo.urlKey}>
+              <MouseoverTooltip text={tokenNetworkInfo.name} width='unset'>
+                <img src={tokenNetworkInfo.icon} width={25} />
               </MouseoverTooltip>
             </Link>
           </DataText>
diff --git a/src/components/TokenLogo/index.js b/src/components/TokenLogo/index.js
index 5d9e2c36a..17409b33e 100644
--- a/src/components/TokenLogo/index.js
+++ b/src/components/TokenLogo/index.js
@@ -25,7 +25,6 @@ const Inline = styled.div`
 const Image = styled.img`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
-  background-color: white;
   border-radius: 50%;
 `
 
@@ -85,7 +84,6 @@ export default function TokenLogo({ address, networkInfo, header = false, size =
           style={{
             boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.075)',
             borderRadius: '24px',
-            backgroundColor: 'white',
           }}
           alt=''
         />
diff --git a/src/contexts/Application.js b/src/contexts/Application.js
index cac83f83f..c0dc677d9 100644
--- a/src/contexts/Application.js
+++ b/src/contexts/Application.js
@@ -365,7 +365,7 @@ export function useListedTokens() {
       }, Promise.resolve([]))
       let formatted = allFetched?.map(t => t.address.toLowerCase())
       formatted.push((networkInfo.kncAddress || '0xdeFA4e8a7bcBA345F687a2f1456F5Edd9CE97202').toLowerCase())
-      formatted = formatted.concat(Object.keys(tokensList[networkInfo.chainId]).map(item => item.toLowerCase()))
+      formatted = formatted.concat(Object.keys(tokensList[networkInfo.chainId] ?? {}).map(item => item.toLowerCase()))
       updateSupportedTokens(formatted, networkInfo.chainId)
     }
     if (!supportedTokens) {