Commit 472a553d authored by Jack Short's avatar Jack Short Committed by GitHub

fix: catch invalid address token details (#4529)

parent 3a1bff14
...@@ -12,7 +12,7 @@ interface useNetworkTokenBalancesResult { ...@@ -12,7 +12,7 @@ interface useNetworkTokenBalancesResult {
} }
interface useNetworkTokenBalancesArgs { interface useNetworkTokenBalancesArgs {
address: string address: string | undefined
} }
export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs): useNetworkTokenBalancesResult { export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs): useNetworkTokenBalancesResult {
...@@ -23,42 +23,52 @@ export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs ...@@ -23,42 +23,52 @@ export function useNetworkTokenBalances({ address }: useNetworkTokenBalancesArgs
const query = gql`` const query = gql``
useEffect(() => { useEffect(() => {
const FAKE_TOKEN_NETWORK_BALANCES = { if (address) {
[SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount( const FAKE_TOKEN_NETWORK_BALANCES = {
new Token(SupportedChainId.ARBITRUM_ONE, address, 18), [SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount(
10e18 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> => { const fetchNetworkTokenBalances = async (address: string): Promise<NetworkTokenBalancesMap | void> => {
const waitRandom = (min: number, max: number): Promise<void> => const waitRandom = (min: number, max: number): Promise<void> =>
new Promise((resolve) => setTimeout(resolve, min + Math.round(Math.random() * Math.max(0, max - min)))) new Promise((resolve) => setTimeout(resolve, min + Math.round(Math.random() * Math.max(0, max - min))))
try { try {
console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', query) console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', query)
setLoading(true) setLoading(true)
setError(null) setError(null)
console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', address) console.log('useNetworkTokenBalances.fetchNetworkTokenBalances', address)
await waitRandom(250, 2000) await waitRandom(250, 2000)
if (Math.random() < 0.05) { if (Math.random() < 0.05) {
throw new Error('fake error') 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]) }, [address, query])
return { return {
......
...@@ -18,7 +18,7 @@ import { checkWarning } from 'constants/tokenSafety' ...@@ -18,7 +18,7 @@ import { checkWarning } from 'constants/tokenSafety'
import { useToken } from 'hooks/Tokens' import { useToken } from 'hooks/Tokens'
import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances' import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
import { useMemo } from 'react' import { useMemo } from 'react'
import { useParams } from 'react-router-dom' import { Navigate, useLocation, useParams } from 'react-router-dom'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
const Footer = styled.div` const Footer = styled.div`
...@@ -71,18 +71,19 @@ const RightPanel = styled.div` ...@@ -71,18 +71,19 @@ const RightPanel = styled.div`
} }
` `
function NetworkBalances(tokenAddress: string) { function NetworkBalances(tokenAddress: string | undefined) {
return useNetworkTokenBalances({ address: tokenAddress }) return useNetworkTokenBalances({ address: tokenAddress })
} }
export default function TokenDetails() { export default function TokenDetails() {
const location = useLocation()
const { tokenAddress } = useParams<{ tokenAddress?: string }>() const { tokenAddress } = useParams<{ tokenAddress?: string }>()
const token = useToken(tokenAddress) const token = useToken(tokenAddress)
const tokenWarning = tokenAddress ? checkWarning(tokenAddress) : null const tokenWarning = token ? checkWarning(token.address) : null
/* network balance handling */ /* network balance handling */
const { data: networkData } = tokenAddress ? NetworkBalances(tokenAddress) : { data: null } const { data: networkData } = NetworkBalances(token?.address)
const { chainId: connectedChainId } = useWeb3React() const { chainId: connectedChainId } = useWeb3React()
const totalBalance = 4.3 // dummy data const totalBalance = 4.3 // dummy data
...@@ -117,19 +118,23 @@ export default function TokenDetails() { ...@@ -117,19 +118,23 @@ export default function TokenDetails() {
}) })
: null : null
if (token === undefined) {
return <Navigate to={{ ...location, pathname: '/tokens' }} replace />
}
return ( return (
<TokenDetailsLayout> <TokenDetailsLayout>
{tokenAddress && ( {token && (
<> <>
<TokenDetail address={tokenAddress} /> <TokenDetail address={token.address} />
<RightPanel> <RightPanel>
<Widget defaultToken={token ?? undefined} /> <Widget defaultToken={token ?? undefined} />
{tokenWarning && <TokenSafetyMessage tokenAddress={tokenAddress} warning={tokenWarning} />} {tokenWarning && <TokenSafetyMessage tokenAddress={token.address} warning={tokenWarning} />}
<BalanceSummary address={tokenAddress} totalBalance={totalBalance} networkBalances={balancesByNetwork} /> <BalanceSummary address={token.address} totalBalance={totalBalance} networkBalances={balancesByNetwork} />
</RightPanel> </RightPanel>
<Footer> <Footer>
<FooterBalanceSummary <FooterBalanceSummary
address={tokenAddress} address={token.address}
totalBalance={totalBalance} totalBalance={totalBalance}
networkBalances={balancesByNetwork} networkBalances={balancesByNetwork}
/> />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment