Lesson 13: tokenBalance undefined

[EWCunha]

Hello!

The tokenBalance variable keeps resulting undefined. I am connected to the kovan network and the wallet connection with the dApp is working fine. The token address and my accounts are correctly inputed to the function useTokenBalance().

Below is my WalletBalance.tsx script so far:

import { Token } from "../Main"
import { useEthers, useTokenBalance } from "@usedapp/core"
import { formatUnits } from "@ethersproject/units"


export interface WalletBalanceProps {
    token: Token
}

export const WalletBalance = ({ token }: WalletBalanceProps) => {
    const { image, address, name } = token
    const { account } = useEthers()
    const tokenBalance = useTokenBalance(address, account)
    console.log(tokenBalance)
    const formattedTokenBalance: number = tokenBalance ? parseFloat(formatUnits(tokenBalance, 18)) : 0

    return (<div>{formattedTokenBalance}</div>)
}

Here is screenshot:

Can someone help, please?
Thank you!

[cromewar]

Hello @EWCunha
Are you sending over the correct address of the token on the useTokenBalance?
Check out the example on the docs.
https://usedapp-docs.netlify.app/docs/#token-balance

[NarithChesda]

I'm having the same problem,
I'm working on 2 different pages, one is staking and the other is advertising, in staking page, the hook is working just fine. but on advertising page, the hook doesn't work. I even test it out using exact same code. I tried useTokenBalance on both page with the same address and account show up, but one page return value and the other return undefined. Please help !

[cromewar]

Have you tried to use relative paths on react so you will use the hook on both?
Also you can separate that function into another js file and use it on both pages.