[bug] useProvider isn't returning the correct provider when using Hardhat locally

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.3.2

Current Behavior

When you connect your Metamask wallet to a local hardhat node (running on localhost:8545), and then connect this wallet to a React app using wagmi, the output of the useProvider() hook returns a provider connected to homestead, instead of the local hardhat node.

Furthermore, useContractRead & useToken also use the default homestead-connected provider (instead of a provider connected to the local hardhat node), whereas useContractWrite correctly uses a provider/signer connected to the local hardhat node.

Expected Behavior

When you connect a Metamask wallet (connected to a localhost hardhat node) with wagmi:

1. The useProvider hook should return a provider connected to this local hardhat node, and not a provider connected to homestead.

2. Hooks like useToken & useContractRead should use a provider connected to the local hardhat node, and not one connected to homestead.

Steps To Reproduce

I’ve created a mini repro example showing this behavior at: https://codesandbox.io/s/cool-platform-0u6n2z?file=/src/index.tsx

Basically, once you connect a Metamask wallet (that’s connected to a local hardhat node), you’ll see that the useProvider() hook returns a provider that’s connected to homestead instead.

If Codesandbox shows an error with importing import { InjectedConnector } from "wagmi/connectors/injected";, simply comment out this import line (line 3 @ App.tsx), save file (cmd/ctrl+s), uncomment this import line, save file (cmd/ctrl+s), and everything should work again.

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

https://codesandbox.io/s/cool-platform-0u6n2z?file=/src/index.tsx

Anything else?

No response

[thecooltechguy]

After some debugging, it appears that the root cause for this bug is that inside the useChainId hook (https://github.com/tmm/wagmi/blob/8a5f6c209049c35f16f9c6a86cd4ea71106e84a6/packages/react/src/hooks/utils/useChainId.ts#L7), it returns provider.network.chainId – however, provider.network is undefined. As a quick test, I edited the useChainId hook to simply return the input chainId without querying the provider via useProvider, and my code began to work again (ie., read-based smart contract calls worked, etc.).

From looking at the ethers docs & code, it appears that the network for a provider can be obtained via provider.getNetwork() (instead of provider.network), which returns a promise: https://github.com/ethers-io/ethers.js/blob/01aea705ce60b1c42d2f465b162cb339a0e94392/packages/providers/src.ts/base-provider.ts#L1135

@tmm So perhaps, should the useChainId hook be updated to fetch the network via the provider’s getNetwork() function? Or, am I maybe misunderstanding something here?

[thecooltechguy]

@jamiew Thanks for sharing this! Using the new API you mentioned + Rainbowkit has solved the issue for me.

@jxom I’m no longer running into these issues so I’ll close this issue. Thanks!