web3-react icon indicating copy to clipboard operation
web3-react copied to clipboard

Issues with having ethers 6 and web3-react side by side

Open casertap opened this issue 2 years ago • 1 comments

The main issue is that web3-react/core and others are using "@ethersproject/providers": "^5",

This creates issues with BigNumber vs the native BigInt used in ethers v6

Take this code for instance

function useBalances(provider?: ReturnType<Web3ReactHooks["useProvider"]>, accounts?: string[]): bigint[] | undefined {
  const [balances, setBalances] = useState<bigint[] | undefined>();

  useEffect(() => {
    if (provider && accounts?.length) {
      let stale = false;

      void Promise.all(accounts.map((account) => provider.getBalance(account))).then((balances: Array<bigint>) => {
        if (stale) return;
        setBalances(balances);
      });

      return () => {
        stale = true;
        setBalances(undefined);
      };
    }
  }, [provider, accounts]);

  return balances;
}

It complains at accounts.map((account) => provider.getBalance(account))).then((balances: Array<bigint>) because provider used is the one from web3-react that is coming from @ethersproject/providers which has this signature

    async getBalance(addressOrName: string | Promise<string>, blockTag?: BlockTag | Promise<BlockTag>): Promise<BigNumber> {

While I am trying to avoid the old @ethersproject/providers BigNumber and use ethers v6 instead.

Another side effect is that I can not use formatEther from ether v6 because it expect a BigInt Instead I have to import the old @ethersproject/units

import { formatEther } from "@ethersproject/units";

so then I can display those balances from earlier

                {balances?.[i] ? ` (Ξ${formatEther(balances[i])})` : null}

casertap avatar Oct 28 '23 08:10 casertap

@casertap Hi! Same problems, how you pass signer to contract? I'm getting error for types JsonRpcSigner, cause use @ethersproject/providers 5 version

kaptn3 avatar Mar 26 '24 15:03 kaptn3