React hook useProvider() not compatible with web3.js provider

[paintoshi]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.10.15

Current Behavior

So the background is I have a complex dapp where we use web3.js to interact with all contracts and do transactions (over 200 different calls). Previously used web3modal v.1 to set the provider as such:

provider = await web3Modal.connect()
const web3 = new Web3(provider)

Now upgraded to web3modal 2.0 and the only way to get hands on the provider is via wagmi (I think). Hence I found the useProvider()
https://wagmi.sh/react/hooks/useProvider

So I'm trying this:

import { useProvider } from 'wagmi'
import Web3 from 'web3'
const provider = useProvider({ chainId })
const web3 = new Web3(provider)

But that provider is not typescript compatible with what Web3 expects.

And forcing it with (provider as any) will make the web3 calls to fail. Would looks like this for example:

Reference (the version used is 1.8.1):
https://web3js.readthedocs.io/en/v1.8.1/getting-started.html#adding-web3-js

Expected Behavior

I don't know if it's supposed to work like this, but the expected behaviour would be Web3 just accepting the provider as it is or with some middleware. I would be ok with anything to just get this to work.

Steps To Reproduce

import { useProvider } from 'wagmi'
import Web3 from 'web3'
const provider = useProvider({ chainId })
const web3 = new Web3(provider)

Make any web3 contract call or transaction

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

A workaround is to do

new Web3(Web3.givenProvider)

But that only works when using metamask on desktop. Connecting any mobile wallet via WalletConnect will fail since the provider is then still trying to using metamask. Or I'm doing this all wrong, please enlighten me. I understand that we can use wagmi hooks for all contract calls, but I want to avoid that if possible due to all changes and research required.

Edit:
It seems that what I'm looking for is a way to convert the ethers provider to a web3 provider. Not sure if it's possible or where to find clues.

[jxom]

Don't think this is an "issue" related to wagmi, so I am going to convert this one to a discussion thread for the community to answer!

Sorry, I don't think I have a solution to this as I am not a web3.js user.

[paintoshi]

Solved by using useSigner()

const { data } = useSigner()
const unspecifiedData: any = data
const web3 = new Web3(unspecifiedData?.provider?.provider)

Typecasting to any because provider does not exist in provider according to typescript, except it does! Can't use the top-level provider in web3.

[aaron-stanton]

Dude you have saved my bacon big time! Got a whole giant codebase that uses web3 and with no need to change, except for the ease of connecting. Thank you so much, been trying to hack a solution for a few hours now!

[junaama]

Are you still able to use useSigner, seems it's deprecated now?

[rackrall]

Yes, it is deprecated but you can write your own hook instead. https://wagmi.sh/react/ethers-adapters talks about writing an adapter for ethers.js. Just convert it to web3.js

[kyoudaiai]

any idea how to convert the ethers-adaptor to be using web3js instead

[rackrall]

any idea how to convert the ethers-adaptor to be using web3js instead

This is basically how I did it

//ethersHooks.js

import * as React from "react";
import { useWalletClient } from "wagmi";
import { providers } from "ethers";
import Web3 from "web3";

export function walletClientToSigner(walletClient) {
  const { account, chain, transport } = walletClient;
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  };
  const provider = new providers.Web3Provider(transport, network);
  const signer = provider.getSigner(account.address);
  return signer;
}

/** Hook to convert a viem Wallet Client to an ethers.js Signer. */
export function useEthersSigner({ chainId } = {}) {
  const { data: walletClient } = useWalletClient({ chainId });
  return React.useMemo(
    () => (walletClient ? walletClientToSigner(walletClient) : undefined),
    [walletClient]
  );
}

export function useWeb3Signer({ chainId } = {}) {
  const { data: walletClient } = useWalletClient({ chainId });

  return React.useMemo(
    () =>
      walletClient
        ? new Web3(walletClientToSigner(walletClient).provider.provider)
        : undefined,
    [walletClient]
  );
}

Then you can just use it doing this

// We get web3 signer (not provider) from this
const web3 = useWeb3Signer();

This is ethers v5. If you are using v6 you probably need to change it accordingly using https://wagmi.sh/react/ethers-adapters

[avkos]

I've created PR to this issue "How to use Web3js with Wagmi".
Here is official web3js documentation: "Wagmi Web3js Adapter"