Sure there's an easy answer to this - but can't get useContractRead to get the balance of an access token...

[simonindelicate]

Hi, I'm trying to useContractRead to call the balanceOf function from a contract that is deployed on Goerli like this:

  const { data: accessTokenBalance, error, warning } = useContractRead({
    address: accessTokenAddress,
    accessTokenABI,
    functionName: 'balanceOf',
    args: [address],
  });

console.log("accessTokenBalance: ", accessTokenBalance);
console.log("address: ", address);
console.log("accessAddress: ", accessTokenAddress);
console.log("accessTokenABI: ", accessTokenABI);

The console correctly logs the address, accessTokenAddress and ABI - but the accessTokenBalance just comes back as undefined.

I am able to call the function successfully with the right value returned on both remix and etherscan.

I had a similar problem with usePrepareContractWrite that ended up being down to using language from the wrong version of wagmi - but I don't think this is the problem here as I think this should match the syntax in the up to date documentation. I believe I have the latest wagmi version in my project.

Any help hugely appreciated. Thanks...

[tmm]

Not sure if this will do it, but noticed that it's wrong:

const { data: accessTokenBalance, error, warning } = useContractRead({
  address: accessTokenAddress,
- accessTokenABI,
+ abi: accessTokenABI,
  functionName: 'balanceOf',
  args: [address],
});

[simonindelicate]

Oh - so it is, thank you.

Hasn't made a difference to the problem I'm having, unfortunately - still returning undefined - but that would have stopped me from ever fixing it so thank you very much :)

[simonindelicate]

not sure if this is even related but I'm getting this error back onload
Error: missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (transaction={"to":"0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2","data":"0x70a08231000000000000000000000000de78830f452685fa02244051e90cf5bd6a4db637","accessList":null}, code=CALL_EXCEPTION, version=providers/5.7.2)

the to 0x here is the accessToken address and the second is the test wallet address with loads of extra zeroes in it.

Feel like I'm running up against the limits of my understanding here tbh - but I think this is related to the issue I'm having as I don't think the access token address is passed anywhere else in my code.

I'm looking at the ethers documentation for Call exceptions but not getting anywhere.

[SaadNiaziDev]

Can u add "isSuccess" state in useContractRead and console it ?
2nd issue, how you are obtaining address?

[simonindelicate]

OK - I think I've done that and isSuccess seems to be coming back as false

I've also added an onSettled bit like so:

const accessTokenAddress = "0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2"; 

const { data: accessTokenBalance, isSuccess: succ, error, warning } = useContractRead({
    address: accessTokenAddress,
    abi: accessTokenABI,
    functionName: 'balanceOf',
    args: [address],
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  });

  console.log ('success: ',succ);

and that is giving me some info I think, ie.

Settled Object { data: undefined, error: Error }
​>
data: undefined
​
error: Error: invalid address or ENS name (argument="name", value=null, code=INVALID_ARGUMENT, version=contracts/5.7.0)

I'm obtaining address like this:

  const { address } = useAccount();
  console.log("Address: ", address);

and I'm setting accessTokenAddress like this:

const accessTokenAddress = "0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2";

Is that wrong?

thanks for any help you can give me.

[SaadNiaziDev]

try by hardcoding your address.
const address= "0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2";

If it works then there is case that hook run before obtaining address

[simonindelicate]

Sorry, no, tried this and just get the same result :( thanks for the suggestion though.

[simonindelicate]

Tried setting up a new project with rainbowkit and having my index.tsx do nothing else -with every value hardcoded into useContractRead - except make this call and it gives the same result.

import { ConnectButton } from '@rainbow-me/rainbowkit';
import type { NextPage } from 'next';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { ethers } from "ethers";
import { NextPage } from "next";

import { useContractRead, useContract } from 'wagmi';

const Home: NextPage = () => {

  const { data: accessTokenBalance, isSuccess: succ, error, warning } = useContractRead({
    address: "0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2",
    abi: [
  // my whole abi pasted in here  
          ],
    functionName: 'balanceOf',
    args: ["0xdE78830f452685FA02244051e90cf5bd6a4db637"],
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  });
 
};

export default Home;

Is the problem with the way that rainbowkit has setup the default app.tsx? Or have I failed to alter something here that needs altering?

import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app';
import { RainbowKitProvider, getDefaultWallets } from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, goerli } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider, webSocketProvider } = configureChains(
  [
    mainnet,
    polygon,
    optimism,
    arbitrum,
    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [goerli] : []),
  ],
  [
    alchemyProvider({
      apiKey: '...MY API KEY IS HERE...',
    }),
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'RainbowKit App',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
  webSocketProvider,
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default MyApp;

Going slightly mad with this.

[simonindelicate]

"@rainbow-me/rainbowkit": "^0.8.1",
"ethers": "^5.0.0",
"next": "^12.1.6",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"wagmi": "^0.9.0"

[salieflewis]

I don't think this will solve your issue, but I'd definitely update ethers. I'm pretty sure wagmi's peerDep is +5.5 or something like that.

[simonindelicate]

huh, these are what installing rainbowkit via npm set up for me today - I'll look into it.

[salieflewis]

https://www.npmjs.com/package/wagmi/v/0.9.0?activeTab=explore

Line 90

[simonindelicate]

No hang on - I think it is the latest version - was checking the wrong json - it's 5.7.0

[simonindelicate]

Error: missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (transaction={"to":"0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2","data":"0x70a08231000000000000000000000000de78830f452685fa02244051e90cf5bd6a4db637","accessList":null}, code=CALL_EXCEPTION, version=providers/5.7.2)

Back to this error - I don't know what is being referred to when it says "accessList":null?

[mds1]

I think you may have the wrong token address or ABI:

• Looking at the to address there on mainnet, 0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2, I see no balanceOf method
• The method you are calling is balanceOf with an address of 0xdE78830f452685FA02244051e90cf5bd6a4db637
• Since the ABI you provided has a balanceOf method, that tells ethers.js when you call balanceOf the contract should return a uint256
• But the contract has no balanceOf method, so ethers throws a CALL_EXCEPTION to tell you that it expected a number to be returned but instead no data was returned
• In general, when you see a CALL_EXCEPTION, it typically means the address doesn't match the ABI you are using for some reason (wrong ABI, no code at the address, etc) and so it didn't get back the data it was expecting (no data, too little data, too much data, etc). I believe it can also mean the call reverted

The access list part isn't too relevant here, you can read more about that here:

• https://blog.mycrypto.com/new-transaction-types-on-ethereum
• https://ethereum.org/en/developers/docs/transactions/#typed-transaction-envelope

[simonindelicate]

Hi - thanks for looking at this,

the contract on mainnet is a different contract - this one is deployed on Goerli ( https://goerli.etherscan.io/address/0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2 ) and I'm able to call the balanceOf function from etherscan and remix - the abi is copied directly from remix.

I did deploy the contract that's on mainnet though, a year ago. So I'm learning new things about where 0x addresses come from today...

[simonindelicate]

Have also tried to use the exact same method to call balanceOf on a deployed contract that I didn't write and get the same result - so I'm pretty sure the issue is not with the contract.

[DangyWing]

I couldn't get rainbowkit to install because of of a dependency issue but this worked locally:

_app.tsx

import type { AppType } from "next/app";
import { WagmiConfig, createClient, configureChains } from "wagmi";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { goerli } from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";

const alchemyApiKey = "PUT_THIS_IN_A_DOTENV_FILE";

const { chains, provider } = configureChains([goerli], [alchemyProvider({ apiKey: alchemyApiKey })]);

const wagmiClient = createClient({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({
      chains: chains,
    }),
  ],
  provider,
});

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <WagmiConfig client={wagmiClient}>
      <Component {...pageProps} />
    </WagmiConfig>
  );
};

export default MyApp;

index.tsx

import { type NextPage } from "next";import { type NextPage } from "next";
import { useContractRead } from "wagmi";
import { useState, useEffect } from "react";

export function useIsMounted(): boolean {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  return isMounted;
}

const Home: NextPage = () => {
  const isMounted = useIsMounted();

  const { data: accessTokenBalance } = useContractRead({
    address: "0x03D3d03F559cB0c17ea0A9fc92c9be3779C50fb2",
    abi: [
      {
        inputs: [{ internalType: "address", name: "owner", type: "address" }],
        name: "balanceOf",
        outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
        stateMutability: "view",
        type: "function",
      },
    ],
    functionName: "balanceOf",
    args: ["0xdE78830f452685FA02244051e90cf5bd6a4db637"],
  });

  if (!isMounted) return null;

  return <h1>{accessTokenBalance?.toString()}</h1>;
};

export default Home;

[simonindelicate]

Incredible - THIS WORKS. I've never been so happy to see a number in a web browser.

I'll have to spend some time trying to work out why and what you did differently, but this is so helpful, thank you.

[ummartoor]

what was the mistake you were making in your code, I have the same problem

[Bimajadivaaa]

thank you very muchhh 😇