fix: actually fetch token object on page (#4875)

* fix: actually fetch token object on page

* syntax
This commit is contained in:
Connor McEwen 2022-10-11 20:46:59 -04:00 committed by GitHub
parent 4b71a8d5f4
commit 21e0faeb1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 18 deletions

@ -29,8 +29,12 @@ function parseStringOrBytes32(str: string | undefined, bytes32: string | undefin
* Returns null if token is loading or null was passed. * Returns null if token is loading or null was passed.
* Returns undefined if tokenAddress is invalid or token does not exist. * Returns undefined if tokenAddress is invalid or token does not exist.
*/ */
export function useTokenFromNetwork(tokenAddress: string | null | undefined): Token | null | undefined { export function useTokenFromNetwork(
const { chainId } = useWeb3React() tokenAddress: string | null | undefined,
chainId?: number
): Token | null | undefined {
const web3ReactChainId = useWeb3React().chainId
if (!chainId) chainId = web3ReactChainId
const supportedChain = isSupportedChain(chainId) const supportedChain = isSupportedChain(chainId)
const formattedAddress = isAddress(tokenAddress) const formattedAddress = isAddress(tokenAddress)
@ -46,7 +50,7 @@ export function useTokenFromNetwork(tokenAddress: string | null | undefined): To
return useMemo(() => { return useMemo(() => {
if (typeof tokenAddress !== 'string' || !supportedChain || !formattedAddress) return undefined if (typeof tokenAddress !== 'string' || !supportedChain || !formattedAddress) return undefined
if (decimals.loading || symbol.loading || tokenName.loading) return null if (decimals.loading || symbol.loading || tokenName.loading || !chainId) return null
if (decimals.result) { if (decimals.result) {
return new Token( return new Token(
chainId, chainId,

@ -1,4 +1,3 @@
import { Token } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { filterTimeAtom } from 'components/Tokens/state' import { filterTimeAtom } from 'components/Tokens/state'
import { AboutSection } from 'components/Tokens/TokenDetails/About' import { AboutSection } from 'components/Tokens/TokenDetails/About'
@ -19,6 +18,7 @@ import { CHAIN_NAME_TO_CHAIN_ID, validateUrlChainParam } from 'graphql/data/util
import { useIsUserAddedTokenOnChain } from 'hooks/Tokens' import { useIsUserAddedTokenOnChain } from 'hooks/Tokens'
import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch' import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
import { useAtomValue } from 'jotai/utils' import { useAtomValue } from 'jotai/utils'
import { useTokenFromNetwork } from 'lib/hooks/useCurrency'
import useCurrencyBalance, { useTokenBalance } from 'lib/hooks/useCurrencyBalance' import useCurrencyBalance, { useTokenBalance } from 'lib/hooks/useCurrencyBalance'
import { useCallback, useMemo, useState } from 'react' import { useCallback, useMemo, useState } from 'react'
import { ArrowLeft } from 'react-feather' import { ArrowLeft } from 'react-feather'
@ -76,23 +76,11 @@ export default function TokenDetails() {
const tokenQueryAddress = isNative ? nativeCurrency.wrapped.address : tokenAddressParam const tokenQueryAddress = isNative ? nativeCurrency.wrapped.address : tokenAddressParam
const [tokenQueryData, prices] = useTokenQuery(tokenQueryAddress ?? '', currentChainName, timePeriod) const [tokenQueryData, prices] = useTokenQuery(tokenQueryAddress ?? '', currentChainName, timePeriod)
const pageToken = useMemo( const pageToken = useTokenFromNetwork(tokenAddressParam, CHAIN_NAME_TO_CHAIN_ID[currentChainName])
() =>
tokenQueryData && !isNative
? new Token(
CHAIN_NAME_TO_CHAIN_ID[currentChainName],
tokenAddressParam ?? '',
18,
tokenQueryData?.symbol ?? '',
tokenQueryData?.name ?? ''
)
: undefined,
[currentChainName, isNative, tokenAddressParam, tokenQueryData]
)
const nativeCurrencyBalance = useCurrencyBalance(account, nativeCurrency) const nativeCurrencyBalance = useCurrencyBalance(account, nativeCurrency)
const tokenBalance = useTokenBalance(account, isNative ? nativeCurrency.wrapped : pageToken) const tokenBalance = useTokenBalance(account, isNative ? nativeCurrency.wrapped : pageToken ?? undefined)
const tokenWarning = tokenAddressParam ? checkWarning(tokenAddressParam) : null const tokenWarning = tokenAddressParam ? checkWarning(tokenAddressParam) : null
const isBlockedToken = tokenWarning?.canProceed === false const isBlockedToken = tokenWarning?.canProceed === false