fix: eth logo and symbol

KyberNetwork · Jan 21, 2025 · 06fc291 · 06fc291
1 parent 0f7b2fa
commit 06fc291
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/pages/Earns/PositionDetail/ClaimFeeModal/index.tsx b/src/pages/Earns/PositionDetail/ClaimFeeModal/index.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
 
+import ethereumIcon from 'assets/networks/ethereum.svg'
 import { ButtonOutlined, ButtonPrimary } from 'components/Button'
 import Loader from 'components/Loader'
 import Modal from 'components/Modal'
@@ -24,7 +25,7 @@ import { NFT_MANAGER_CONTRACT } from '../../constants'
 import { FeeInfo } from '../LeftSection'
 import { ClaimInfo, ClaimInfoRow, ClaimInfoWrapper, ModalHeader, Wrapper, X } from './styles'
 
-const isNativeToken = (tokenAddress: string, chainId: keyof typeof WETH) =>
+export const isNativeToken = (tokenAddress: string, chainId: keyof typeof WETH) =>
   tokenAddress.toLowerCase() === ETHER_ADDRESS.toLowerCase() ||
   (WETH[chainId] && tokenAddress.toLowerCase() === WETH[chainId].address)
 
@@ -186,17 +187,17 @@ export default function ClaimFeeModal({
               </Text>
             </Flex>
             <ClaimInfoRow
-              tokenImage={position.token0Logo}
+              tokenImage={isToken0Native ? ethereumIcon : position.token0Logo}
               dexImage={position.chainLogo}
               tokenAmount={feeInfo.amount0}
-              tokenSymbol={position.token0Symbol}
+              tokenSymbol={isToken0Native ? 'ETH' : position.token0Symbol}
               tokenUsdValue={feeInfo.value0}
             />
             <ClaimInfoRow
-              tokenImage={position.token1Logo}
+              tokenImage={isToken1Native ? ethereumIcon : position.token1Logo}
               dexImage={position.chainLogo}
               tokenAmount={feeInfo.amount1}
-              tokenSymbol={position.token1Symbol}
+              tokenSymbol={isToken1Native ? 'ETH' : position.token1Symbol}
               tokenUsdValue={feeInfo.value1}
             />
           </ClaimInfo>

diff --git a/src/pages/Earns/PositionDetail/LeftSection.tsx b/src/pages/Earns/PositionDetail/LeftSection.tsx
@@ -1,4 +1,4 @@
-import { CurrencyAmount, Token } from '@kyberswap/ks-sdk-core'
+import { CurrencyAmount, Token, WETH } from '@kyberswap/ks-sdk-core'
 import { t } from '@lingui/macro'
 import { useCallback, useEffect, useState } from 'react'
 import { Flex, Text } from 'rebass'
@@ -17,7 +17,7 @@ import { ParsedPosition } from '.'
 import { DexImage } from '../UserPositions/styles'
 import { NFT_MANAGER_CONTRACT } from '../constants'
 import { formatAprNumber } from '../utils'
-import ClaimFeeModal from './ClaimFeeModal'
+import ClaimFeeModal, { isNativeToken } from './ClaimFeeModal'
 import {
   InfoLeftColumn,
   InfoRight,
@@ -57,6 +57,9 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
       : nftManagerContractOfDex[position.chainId as keyof typeof nftManagerContractOfDex]
   const contract = useReadingContract(nftManagerContract, NonfungiblePositionManagerABI, position.chainId)
 
+  const isToken0Native = isNativeToken(position.token0Address, position.chainId as keyof typeof WETH)
+  const isToken1Native = isNativeToken(position.token1Address, position.chainId as keyof typeof WETH)
+
   const handleFetchUnclaimedFee = useCallback(async () => {
     if (!contract) return
     const maxUnit = '0x' + (2n ** 128n - 1n).toString(16)
@@ -237,7 +240,7 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
           <div>
             <Flex alignItems={'center'} sx={{ gap: '6px' }} marginBottom={1}>
               <Text>{formatDisplayNumber(feeInfo?.amount0, { significantDigits: 4 })}</Text>
-              <Text>{position.token0Symbol}</Text>
+              <Text>{isToken0Native ? 'ETH' : position.token0Symbol}</Text>
               <Text fontSize={14} color={theme.subText}>
                 {formatDisplayNumber(feeInfo?.value0, {
                   style: 'currency',
@@ -247,7 +250,7 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
             </Flex>
             <Flex alignItems={'center'} sx={{ gap: '6px' }}>
               <Text>{formatDisplayNumber(feeInfo?.amount1, { significantDigits: 4 })}</Text>
-              <Text>{position.token1Symbol}</Text>
+              <Text>{isToken1Native ? 'ETH' : position.token1Symbol}</Text>
               <Text fontSize={14} color={theme.subText}>
                 {formatDisplayNumber(feeInfo?.value1, {
                   style: 'currency',