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,42 +23,52 @@ export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs
   const query = gql``
 
   useEffect(() => {
-    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),
-    }
+    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
+        ),
+      }
 
-    const fetchNetworkTokenBalances = async (address: string): Promise<NetworkTokenBalancesMap | void> => {
-      const waitRandom = (min: number, max: number): Promise<void> =>
-        new Promise((resolve) => setTimeout(resolve, min + Math.round(Math.random() * Math.max(0, max - min))))
-      try {
-        console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', query)
-        setLoading(true)
-        setError(null)
-        console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', address)
-        await waitRandom(250, 2000)
-        if (Math.random() < 0.05) {
-          throw new Error('fake error')
+      const fetchNetworkTokenBalances = async (address: string): Promise<NetworkTokenBalancesMap | void> => {
+        const waitRandom = (min: number, max: number): Promise<void> =>
+          new Promise((resolve) => setTimeout(resolve, min + Math.round(Math.random() * Math.max(0, max - min))))
+        try {
+          console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', query)
+          setLoading(true)
+          setError(null)
+          console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', address)
+          await waitRandom(250, 2000)
+          if (Math.random() < 0.05) {
+            throw new Error('fake error')
+          }
+          return FAKE_TOKEN_NETWORK_BALANCES
+        } catch (e) {
+          setError('something went wrong')
+        } finally {
+          setLoading(false)
         }
-        return FAKE_TOKEN_NETWORK_BALANCES
-      } catch (e) {
-        setError('something went wrong')
-      } finally {
-        setLoading(false)
       }
+      setLoading(true)
+      setError(null)
+      fetchNetworkTokenBalances(address)
+        .then((data) => {
+          if (data) setData(data)
+        })
+        .catch((e) => setError(e))
+        .finally(() => setLoading(false))
+    } else {
+      setData(null)
     }
-    setLoading(true)
-    setError(null)
-    fetchNetworkTokenBalances(address)
-      .then((data) => {
-        if (data) setData(data)
-      })
-      .catch((e) => setError(e))
-      .finally(() => setLoading(false))
   }, [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}
             />