ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: catch invalid address token details (#4529)

Browse Source
This commit is contained in:
Jack Short 2022-08-30 17:25:59 -04:00 committed by GitHub
parent 3a1bff146c
commit 472a553d13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/hooks/useNetworkTokenBalances.ts
View File

@ -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<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)
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')
}
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 {

23
src/pages/TokenDetails/index.tsx
View File

@ -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}
/>