fix: catch invalid address token details (#4529)

src/hooks/useNetworkTokenBalances.ts

@@ -12,7 +12,7 @@ interface useNetworkTokenBalancesResult {
 }
 
 interface useNetworkTokenBalancesArgs {
-  address: string
+  address: string | undefined
 }
 
 export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs): useNetworkTokenBalancesResult {
@@ -23,13 +23,20 @@ export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs
   const query = gql``
 
   useEffect(() => {
+    if (address) {
       const FAKE_TOKEN_NETWORK_BALANCES = {
         [SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount(
           new Token(SupportedChainId.ARBITRUM_ONE, address, 18),
           10e18
         ),
-      [SupportedChainId.MAINNET]: CurrencyAmount.fromRawAmount(new Token(SupportedChainId.MAINNET, address, 18), 1e18),
-      [SupportedChainId.RINKEBY]: CurrencyAmount.fromRawAmount(new Token(SupportedChainId.RINKEBY, address, 9), 10e18),
+        [SupportedChainId.MAINNET]: CurrencyAmount.fromRawAmount(
+          new Token(SupportedChainId.MAINNET, address, 18),
+          1e18
+        ),
+        [SupportedChainId.RINKEBY]: CurrencyAmount.fromRawAmount(
+          new Token(SupportedChainId.RINKEBY, address, 9),
+          10e18
+        ),
       }
 
       const fetchNetworkTokenBalances = async (address: string): Promise<NetworkTokenBalancesMap | void> => {
@@ -59,6 +66,9 @@ export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs
         })
         .catch((e) => setError(e))
         .finally(() => setLoading(false))
+    } else {
+      setData(null)
+    }
   }, [address, query])
 
   return {

src/pages/TokenDetails/index.tsx

@@ -18,7 +18,7 @@ import { checkWarning } from 'constants/tokenSafety'
 import { useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
 import { useMemo } from 'react'
-import { useParams } from 'react-router-dom'
+import { Navigate, useLocation, useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 const Footer = styled.div`
@@ -71,18 +71,19 @@ const RightPanel = styled.div`
   }
 `
 
-function NetworkBalances(tokenAddress: string) {
+function NetworkBalances(tokenAddress: string | undefined) {
   return useNetworkTokenBalances({ address: tokenAddress })
 }
 
 export default function TokenDetails() {
+  const location = useLocation()
   const { tokenAddress } = useParams<{ tokenAddress?: string }>()
   const token = useToken(tokenAddress)
 
-  const tokenWarning = tokenAddress ? checkWarning(tokenAddress) : null
+  const tokenWarning = token ? checkWarning(token.address) : null
   /* network balance handling */
 
-  const { data: networkData } = tokenAddress ? NetworkBalances(tokenAddress) : { data: null }
+  const { data: networkData } = NetworkBalances(token?.address)
   const { chainId: connectedChainId } = useWeb3React()
   const totalBalance = 4.3 // dummy data
 
@@ -117,19 +118,23 @@ export default function TokenDetails() {
       })
     : null
 
+  if (token === undefined) {
+    return <Navigate to={{ ...location, pathname: '/tokens' }} replace />
+  }
+
   return (
     <TokenDetailsLayout>
-      {tokenAddress && (
+      {token && (
         <>
-          <TokenDetail address={tokenAddress} />
+          <TokenDetail address={token.address} />
           <RightPanel>
             <Widget defaultToken={token ?? undefined} />
-            {tokenWarning && <TokenSafetyMessage tokenAddress={tokenAddress} warning={tokenWarning} />}
-            <BalanceSummary address={tokenAddress} totalBalance={totalBalance} networkBalances={balancesByNetwork} />
+            {tokenWarning && <TokenSafetyMessage tokenAddress={token.address} warning={tokenWarning} />}
+            <BalanceSummary address={token.address} totalBalance={totalBalance} networkBalances={balancesByNetwork} />
           </RightPanel>
           <Footer>
             <FooterBalanceSummary
-              address={tokenAddress}
+              address={token.address}
               totalBalance={totalBalance}
               networkBalances={balancesByNetwork}
             />