fix: actually fetch token object on page (#4875)

* fix: actually fetch token object on page

* syntax

src/lib/hooks/useCurrency.ts

@@ -29,8 +29,12 @@ function parseStringOrBytes32(str: string | undefined, bytes32: string | undefin
  * Returns null if token is loading or null was passed.
  * Returns undefined if tokenAddress is invalid or token does not exist.
  */
-export function useTokenFromNetwork(tokenAddress: string | null | undefined): Token | null | undefined {
-  const { chainId } = useWeb3React()
+export function useTokenFromNetwork(
+  tokenAddress: string | null | undefined,
+  chainId?: number
+): Token | null | undefined {
+  const web3ReactChainId = useWeb3React().chainId
+  if (!chainId) chainId = web3ReactChainId
   const supportedChain = isSupportedChain(chainId)
 
   const formattedAddress = isAddress(tokenAddress)
@@ -46,7 +50,7 @@ export function useTokenFromNetwork(tokenAddress: string | null | undefined): To
 
   return useMemo(() => {
     if (typeof tokenAddress !== 'string' || !supportedChain || !formattedAddress) return undefined
-    if (decimals.loading || symbol.loading || tokenName.loading) return null
+    if (decimals.loading || symbol.loading || tokenName.loading || !chainId) return null
     if (decimals.result) {
       return new Token(
         chainId,

src/pages/TokenDetails/index.tsx

-import { Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { filterTimeAtom } from 'components/Tokens/state'
 import { AboutSection } from 'components/Tokens/TokenDetails/About'
@@ -19,6 +18,7 @@ import { CHAIN_NAME_TO_CHAIN_ID, validateUrlChainParam } from 'graphql/data/util
 import { useIsUserAddedTokenOnChain } from 'hooks/Tokens'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
 import { useAtomValue } from 'jotai/utils'
+import { useTokenFromNetwork } from 'lib/hooks/useCurrency'
 import useCurrencyBalance, { useTokenBalance } from 'lib/hooks/useCurrencyBalance'
 import { useCallback, useMemo, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
@@ -76,23 +76,11 @@ export default function TokenDetails() {
   const tokenQueryAddress = isNative ? nativeCurrency.wrapped.address : tokenAddressParam
   const [tokenQueryData, prices] = useTokenQuery(tokenQueryAddress ?? '', currentChainName, timePeriod)
 
-  const pageToken = useMemo(
-    () =>
-      tokenQueryData && !isNative
-        ? new Token(
-            CHAIN_NAME_TO_CHAIN_ID[currentChainName],
-            tokenAddressParam ?? '',
-            18,
-            tokenQueryData?.symbol ?? '',
-            tokenQueryData?.name ?? ''
-          )
-        : undefined,
-    [currentChainName, isNative, tokenAddressParam, tokenQueryData]
-  )
+  const pageToken = useTokenFromNetwork(tokenAddressParam, CHAIN_NAME_TO_CHAIN_ID[currentChainName])
 
   const nativeCurrencyBalance = useCurrencyBalance(account, nativeCurrency)
 
-  const tokenBalance = useTokenBalance(account, isNative ? nativeCurrency.wrapped : pageToken)
+  const tokenBalance = useTokenBalance(account, isNative ? nativeCurrency.wrapped : pageToken ?? undefined)
 
   const tokenWarning = tokenAddressParam ? checkWarning(tokenAddressParam) : null
   const isBlockedToken = tokenWarning?.canProceed === false