WalletBalance.tsx Token Balance Returns : undefined

Question

I've been completing the full-stack-defi course and when I use the useTokenBalance function from usedapp/core I get returned nothing, I don't know where I've went wrong because I've when I console.log the address and the account variables it returns with the correct account address and the correct token address.

Here's the typescript here:

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()
    console.log(account)
    console.log(address)
    const tokenBalance = useTokenBalance(address, account)
    const formattedTokenBalance: number = tokenBalance ? parseFloat(formatUnits(tokenBalance, 18)) : 0
    console.log(tokenBalance?.toString())
    return (<div>{formattedTokenBalance}</div>)
}

I thought this could be an error with @usedapp/core but I reinstalled @usedapp/core and I'm still getting the same error returned. Any help would be useful :)

score 5 · Accepted Answer · answered Apr 08 '22 at 12:05

You should try to change the config settings in App.tsx

import { DAppProvider, Config, Kovan } from "@usedapp/core"
import { Header } from "./components/Header";
import Container from "@mui/material/Container"
import { Main } from "./components/Main";
import { getDefaultProvider } from 'ethers'


const config: Config = {
  readOnlyChainId: Kovan.chainId,
  readOnlyUrls: {
    [Kovan.chainId]: getDefaultProvider('kovan'),
  },
}

function App() {
  return (
    <DAppProvider config={config} >
      <Header></Header>
      <Container maxWidth="md">
        <div className="App">
          <Main />
        </div>
      </Container>
    </DAppProvider>
  );
}

export default App;

I had to do `networks: [Kovan]` instead of `readOnlyChainId: Kovan.chainId` as i was getting **supportedChain is deprecated** error. Everything else worked perfectly :) — abdulqgg, Aug 03 '22 at 10:24

score 0 · Answer 2 · answered Apr 06 '22 at 14:52

0

i have exactly the same problem. console.log returns correct token and account addresses, useTokenBalance() returns undefined.

answered Apr 06 '22 at 14:52

kblairt2

1

This answer doesn't seem helpful to the question at hand. If you have comment, you can leave a comment underneath the question or relevant answer. – CelineDion Apr 06 '22 at 20:06
Apologies, i don't have enough reputation to leave comment. requires 50 and i'm new here. thought it would be valueable to let folks know others have this issue, not just him. Also, answer number 2 solved the issue but i can't upvote it. (requires 15 rep and i'm too new). – kblairt2 Apr 08 '22 at 14:08
1

I see. Welcome! Apologies if I came off as a bit curt. – CelineDion Apr 08 '22 at 14:27

WalletBalance.tsx Token Balance Returns : undefined

2 Answers2