useContract can't call contract's functions.

[dnjooiopa]

Problem

I created a custom react hook and got a problem when using "useContract" to call contract's functions deployed in hardhat localhost node.

My contract

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.4;

contract Greeter {
  string greeting;

  constructor(string memory _greeting) {
    greeting = _greeting;
  }

  function greet() public view returns (string memory) {
    return greeting;
  }

  function setGreeting(string memory _greeting) public {
    greeting = _greeting;
  }
}

My code

import { useContract } from 'wagmi';

import Greeter from '../abi/Greeter.json';

const useGreeter = () => {
  const contract = useContract({
    addressOrName: String(process.env.NEXT_PUBLIC_GREETER_ADDRESS),
    contractInterface: Greeter.abi,
  });

  async function greet() {
    try {
      const result = await contract.functions.greet();
      console.log(result);
    } catch (error) {
      console.log(error);
    }
  }

  return { greet };
};

export default useGreeter;

The contract was already deployed and metamask account was connected.
When I call function 'greet' I got this error.

TypeError: Cannot read properties of null (reading 'call')
    at Object.eval (index.js?b70c:286:1)
    at Generator.next (<anonymous>)
    at fulfilled (index.js?b70c:5:43)

Can anyone tell me where I go wrong? or there is a problem with wagmi?.

[tmm]

You must pass a signerOrProvider if you want to read (or write data) with useContract's result. useContractRead sets up the signerOrProvider automatically if you want to use that instead.

[tmm]

Try this out:

- const result = await contract.functions.greet()
+ const result = await contract.greet()

Think you need to call the method on the contract directly, instead off of functions.

[dnjooiopa]

Still got the same error even using your code or using useContractRead.

Error: call revert exception (method="greet()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)
    at Logger.makeError (index.js?dd68:185:1)
    at Logger.throwError (index.js?dd68:194:1)
    at Interface.decodeFunctionResult (interface.js?1df7:341:1)
    at Contract.eval (index.js?b70c:288:1)
    at Generator.next (<anonymous>)
    at fulfilled (index.js?b70c:5:43)

I have deployed Greeter contract to rinkedby testnet. Can you test it?
Greeter address: 0xC5730ea3d12982187a11bC2Ffbfa8C6edCC6346a
Network: Rinkedby

[liho00]

@dnjooiopa I am facing the same error, did you able to solve it?

[dnjooiopa]

  const [{data: signerData}] = useSigner()
  const contract = useContract({
    addressOrName: String(process.env.NEXT_PUBLIC_GREETER_ADDRESS),
    contractInterface: Greeter.abi,
    signerOrProvider: signerData,
  });

@liho00 I solved it by replacing useProvider withuseSigner.
ref: #93 (reply in thread)

[liho00]

Thanks a lot mate! @dnjooiopa ❤️

[oveddan]

I'm having a similar issue.

I've noticed that when I try to debug what the provider is, by calling;

const provider = useProvider();
  useEffect(() => {
    console.log('network', provider.network)
  }, [provider.network])

The provider network is "homestead" even though I connected on Rinkeby.

My parent component looks like:

import { Provider } from "wagmi";
import App from './App';
import { chain } from "wagmi";
import { InjectedConnector } from "wagmi/connectors/injected";

const chains = [chain.rinkeby];

// Set up connectors
const connectors = ({ chainId }: { chainId?: number }) => {
  return [
    new InjectedConnector({ chains }),
  ];
};

const AppWithWeb3 = () => {
  return (
    <Provider connectors={connectors}>
      <App />
    </Provider>
  );
};

export default SpaceWithWeb3;

How can I make sure the provider is connected to the proper network?

[lsbyerley]

@oveddan I think you need to setup a provider with your alchemy or infuraId and pass it to the Provider component in App.js like..

import { providers } from 'ethers'
import { Provider } from 'wagmi'

// Set up connectors
const connectors = ({ chainId }: { chainId?: number }) => {
  return [
    new InjectedConnector({ chains }),
  ];
};

const provider = ({ chainId }) => {
    return new providers.AlchemyProvider(chainId, alchemyId);
  };

const AppWithWeb3 = () => {
  return (
    <Provider connectors={connectors} provider={provider}>
      <App />
    </Provider>
  );
};

[lsbyerley]

and also pass the signer instead of the provider to the useContract hook:

const [{ data: signerData, error, loading }, getSigner] = useSigner();
const contract = useContract({
  addressOrName: String(process.env.NEXT_PUBLIC_GREETER_ADDRESS),
  contractInterface: Greeter.abi,
  signerOrProvider: signerData,
});

[dnjooiopa]

@lsbyerley This works for me!! Thank you.

[oveddan]

Thanks for the tips! I got things working by making sure the provider uses the right chain

import { providers } from "ethers";

const provider = ({ chainId }: { chainId?: number }) => {
  return providers.getDefaultProvider(providers.getNetwork(chainId));
};

and passing that as the provider prop.

[dnjooiopa]

  const [{data: signerData}] = useSigner()
  const contract = useContract({
    addressOrName: String(process.env.NEXT_PUBLIC_GREETER_ADDRESS),
    contractInterface: Greeter.abi,
    signerOrProvider: signerData,
  });

I solved it by replacing useProvider withuseSigner.
ref: #93 (reply in thread)