Remove token logo white background (#311)

* Remove token logo white background Signed-off-by: Nam Nguyen <[email protected]> * fix error Signed-off-by: Nam Nguyen <[email protected]> * put logo beside Signed-off-by: Nam Nguyen <[email protected]> * fix crash Signed-off-by: Nam Nguyen <[email protected]>
KyberNetwork · Apr 25, 2022 · 147d8a6 · 147d8a6
1 parent 1ae1225
commit 147d8a6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
diff --git 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
@@ -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,21 +186,21 @@ 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} />
             </CustomLink>
           </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
@@ -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
@@ -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
@@ -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) {