update: use native token logo from api (#2140)

KyberNetwork · Aug 3, 2023 · 4808e75 · 4808e75
1 parent 7c0a8f7
commit 4808e75
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 40 deletions.
diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx
@@ -1,9 +1,11 @@
-import { Currency } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
 import React, { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 import Logo from 'components/Logo'
+import { ETHER_ADDRESS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
+import { useAllTokens } from 'hooks/Tokens'
 import useHttpLocations from 'hooks/useHttpLocations'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { getTokenLogoURL } from 'utils'
@@ -24,6 +26,11 @@ const StyledLogo = styled(Logo)<{ size: string }>`
   object-fit: contain;
 `
 
+export const useGetNativeTokenLogo = (chainId: ChainId | undefined) => {
+  const whitelistTokens = useAllTokens(false, chainId)
+  return whitelistTokens[ETHER_ADDRESS]?.logoURI || (chainId ? NETWORKS_INFO[chainId].nativeToken.logo : '')
+}
+
 function CurrencyLogo({
   currency,
   size = '24px',
@@ -48,6 +55,7 @@ function CurrencyLogo({
 
   const logoURI = currency instanceof WrappedTokenInfo ? currency?.logoURI : undefined
   const uriLocations = useHttpLocations(wrapWithProxy(logoURI))
+  const nativeLogo = useGetNativeTokenLogo(currency?.chainId)
 
   const srcs: string[] = useMemo(() => {
     if (currency?.isNative) return []
@@ -63,14 +71,7 @@ function CurrencyLogo({
   }, [currency, logoURI, uriLocations, wrapWithProxy])
 
   if (currency?.isNative) {
-    return (
-      <StyledNativeCurrencyLogo
-        src={NETWORKS_INFO[currency.chainId].nativeToken.logo}
-        size={size}
-        style={style}
-        alt={`${currency.symbol}Logo`}
-      />
-    )
+    return <StyledNativeCurrencyLogo src={nativeLogo} size={size} style={style} alt={`${currency.symbol}Logo`} />
   }
 
   return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} />

diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx
@@ -3,6 +3,7 @@ import { CSSProperties, useState } from 'react'
 import { HelpCircle } from 'react-feather'
 import { ImageProps } from 'rebass'
 
+import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import { NETWORKS_INFO } from 'constants/networks'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { useIsDarkMode } from 'state/user/hooks'
@@ -52,7 +53,8 @@ export function TokenLogoWithChain(data: any) {
   const { tokenLogo: tokenLogoParam, chainId: chainParam, size, currency } = data
 
   const chainId: ChainId = currency?.chainId || chainParam
-  const tokenLogo = (currency?.isNative ? NETWORKS_INFO[chainId].nativeToken.logo : currency?.logoURI) || tokenLogoParam
+  const nativeLogo = useGetNativeTokenLogo(chainId)
+  const tokenLogo = (currency?.isNative ? nativeLogo : currency?.logoURI) || tokenLogoParam
   const ratio = 0.7
   const networkSize = ratio * parseInt(size + '')
 

diff --git a/src/components/Menu/FaucetModal.tsx b/src/components/Menu/FaucetModal.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 
 import { NotificationType } from 'components/Announcement/type'
 import { ButtonPrimary } from 'components/Button'
+import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import Logo from 'components/Logo'
 import Modal from 'components/Modal'
 import { RowBetween } from 'components/Row'
@@ -47,7 +48,7 @@ const getFullDisplayBalance = (balance: BigNumber, decimals = 18, significant =
 }
 
 function FaucetModal() {
-  const { chainId, account, networkInfo } = useActiveWeb3React()
+  const { chainId, account } = useActiveWeb3React()
   const open = useModalOpen(ApplicationModal.FAUCET_POPUP)
   const toggle = useToggleModal(ApplicationModal.FAUCET_POPUP)
   const theme = useTheme()
@@ -66,11 +67,13 @@ function FaucetModal() {
     }
     return nativeToken
   }, [rewardData, chainId, account, allTokens])
+
+  const nativeLogo = useGetNativeTokenLogo(chainId)
   const tokenLogo = useMemo(() => {
     if (!token) return
-    if (token.isNative) return networkInfo.nativeToken.logo
+    if (token.isNative) return nativeLogo
     return getTokenLogoURL(token.address, chainId)
-  }, [chainId, token, networkInfo])
+  }, [chainId, token, nativeLogo])
   const tokenSymbol = useMemo(() => {
     if (token?.isNative && chainId) return WETH[chainId].name
     return token?.symbol
@@ -147,20 +150,14 @@ function FaucetModal() {
             wallet can only request for the tokens once. You can claim:
           </Trans>
         </Text>
-        <Text fontSize={32} lineHeight="38px" fontWeight={500}>
-          {token && (
-            <>
-              {tokenLogo && (
-                <Logo
-                  srcs={[tokenLogo]}
-                  alt={`${tokenSymbol ?? 'token'} logo`}
-                  style={{ width: '28px', paddingRight: '8px' }}
-                />
-              )}{' '}
-              {rewardData?.amount ? getFullDisplayBalance(rewardData?.amount, token?.decimals) : 0} {tokenSymbol}
-            </>
-          )}
-        </Text>
+
+        {token && (
+          <Flex alignItems={'center'} sx={{ gap: '6px' }} fontSize={28} lineHeight="38px" fontWeight={500}>
+            {tokenLogo && <Logo srcs={[tokenLogo]} alt={`${tokenSymbol ?? 'token'} logo`} style={{ width: '28px' }} />}{' '}
+            {rewardData?.amount ? getFullDisplayBalance(rewardData?.amount, token?.decimals) : 0} {tokenSymbol}
+          </Flex>
+        )}
+
         {account ? (
           <ButtonPrimary
             disabled={!rewardData?.amount || rewardData?.amount.eq(0)}

diff --git a/src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx b/src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx
@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
+import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import { formatUSDValue } from 'components/EarningAreaChart/utils'
 import Logo from 'components/Logo'
 import { MouseoverTooltip } from 'components/Tooltip'
@@ -24,11 +25,12 @@ const MyEarningsOverTimePanel = styled(OriginalMyEarningsOverTimePanel)`
 const EarningView: React.FC<CommonProps> = props => {
   const { positionEarning, chainId } = props
   const tokensByChainId = useAppSelector(state => state.lists.mapWhitelistTokens)
+  const nativeLogo = useGetNativeTokenLogo(chainId)
 
   // format pool value
   const ticks: EarningStatsTick[] | undefined = useMemo(() => {
-    return calculateEarningStatsTick(positionEarning.historicalEarning, chainId, tokensByChainId)
-  }, [chainId, positionEarning.historicalEarning, tokensByChainId])
+    return calculateEarningStatsTick({ data: positionEarning.historicalEarning, chainId, tokensByChainId, nativeLogo })
+  }, [chainId, positionEarning.historicalEarning, tokensByChainId, nativeLogo])
 
   const earningToday = ticks?.[0]
 

diff --git a/src/pages/MyEarnings/PoolEarningsSection.tsx b/src/pages/MyEarnings/PoolEarningsSection.tsx
@@ -6,7 +6,7 @@ import { Box, Flex } from 'rebass'
 import { HistoricalSingleData } from 'services/earning/types'
 import styled from 'styled-components'
 
-import { NETWORKS_INFO } from 'constants/networks'
+import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import { NativeCurrencies } from 'constants/tokens'
 import useTheme from 'hooks/useTheme'
 import { calculateEarningStatsTick, getToday } from 'pages/MyEarnings/utils'
@@ -86,6 +86,7 @@ const PoolEarningsSection: React.FC<Props> = ({ historicalEarning, chainId }) =>
   const theme = useTheme()
   const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
   const tokensByChainId = useAppSelector(state => state.lists.mapWhitelistTokens)
+  const nativeLogo = useGetNativeTokenLogo(chainId)
 
   const earningBreakdown: EarningsBreakdown | undefined = useMemo(() => {
     const data = historicalEarning
@@ -108,7 +109,7 @@ const PoolEarningsSection: React.FC<Props> = ({ historicalEarning, chainId }) =>
               const currency = tokensByChainId[chainId][String(tokenAddress)]
               const isNative = currency.isNative || tokenAddress === WETH[chainId].address
               const symbol = (isNative ? NativeCurrencies[chainId].symbol : currency.symbol) || 'NO SYMBOL'
-              const logoUrl = (isNative ? NETWORKS_INFO[chainId].nativeToken.logo : currency.logoURI) || ''
+              const logoUrl = (isNative ? nativeLogo : currency.logoURI) || ''
 
               return {
                 address: tokenAddress,
@@ -157,12 +158,12 @@ const PoolEarningsSection: React.FC<Props> = ({ historicalEarning, chainId }) =>
       totalValue,
       breakdowns,
     }
-  }, [chainId, historicalEarning, tokensByChainId])
+  }, [chainId, historicalEarning, tokensByChainId, nativeLogo])
 
   // format pool value
   const ticks: EarningStatsTick[] | undefined = useMemo(() => {
-    return calculateEarningStatsTick(historicalEarning, chainId, tokensByChainId)
-  }, [chainId, historicalEarning, tokensByChainId])
+    return calculateEarningStatsTick({ data: historicalEarning, chainId, tokensByChainId, nativeLogo })
+  }, [chainId, historicalEarning, tokensByChainId, nativeLogo])
 
   if (upToExtraSmall) {
     return (

diff --git a/src/pages/MyEarnings/utils.ts b/src/pages/MyEarnings/utils.ts
@@ -126,11 +126,17 @@ export const sumTokenEarnings = (earnings: TokenEarning[]) => {
   return earnings.reduce((sum, tokenEarning) => sum + Number(tokenEarning.amountUSD), 0)
 }
 
-export const calculateEarningStatsTick = (
-  data: HistoricalEarning['historicalEarning'],
-  chainId: ChainId,
-  tokensByChainId: TokenAddressMap,
-): EarningStatsTick[] | undefined => {
+export const calculateEarningStatsTick = ({
+  data,
+  chainId,
+  tokensByChainId,
+  nativeLogo,
+}: {
+  data: HistoricalEarning['historicalEarning']
+  chainId: ChainId
+  tokensByChainId: TokenAddressMap
+  nativeLogo: string
+}): EarningStatsTick[] | undefined => {
   if (!data?.length) {
     return undefined
   }
@@ -161,7 +167,7 @@ export const calculateEarningStatsTick = (
           const currency = tokensByChainId[chainId][String(tokenAddress)]
           const isNative = currency.isNative || tokenAddress === WETH[chainId].address
           const symbol = (isNative ? NativeCurrencies[chainId].symbol : currency.symbol) || 'NO SYMBOL'
-          const logoUrl = (isNative ? NETWORKS_INFO[chainId].nativeToken.logo : currency.logoURI) || ''
+          const logoUrl = (isNative ? nativeLogo : currency.logoURI) || ''
 
           const tokenInfo: EarningStatsTick['tokens'][number] = {
             logoUrl,