diff --git a/src/hooks/useNetworkTokenBalances.ts b/src/hooks/useNetworkTokenBalances.ts index 3f291517fa..3925e646e8 100644 --- a/src/hooks/useNetworkTokenBalances.ts +++ b/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), - } - - const fetchNetworkTokenBalances = async (address: string): Promise => { - const waitRandom = (min: number, max: number): Promise => - 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) + 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 => { + const waitRandom = (min: number, max: number): Promise => + 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) + } + } + 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 { diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx index 8ca5b249e7..85a8ef4210 100644 --- a/src/pages/TokenDetails/index.tsx +++ b/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 + } + return ( - {tokenAddress && ( + {token && ( <> - + - {tokenWarning && } - + {tokenWarning && } +