Return new provider in switchNetworkAsync

[holic]

When calling a contract's write function, I will first check what network you are connected to and, if on the wrong network, prompt you to switch network (via provider.send('wallet_switchEthereumChain')). When switching between development and production environments, or moving between L1 and L2 apps, this helps prevent you from accidentally throwing gas into the void.

As a UX measure, this happens ~synchronously alongside the transaction call so that one button click will ensure you're on the right network and fire off the transaction. The method tends to look something like this:

const mint = async () => {
  const network = await provider.getNetwork();
  if (network.chainId !== CHAIN_ID) {
      await initialProvider.send("wallet_switchEthereumChain", [
        { chainId: `0x${CHAIN_ID.toString(16)}` },
      ]);
    }
  }
  // myContract comes from TypeChain
  const tx = myContract.connect(provider.getSigner()).mint();
  const receipt = await tx.wait();
  return receipt;
}

(See also https://twitter.com/frolic/status/1509574713739149313)

I've recently started using wagmi on a project and noticed that there are nice async methods like connectAsync and switchNetworkAsync, but using them inline like above results in errors like:

Error: underlying network changed (event="changed", network={"name":"homestead","chainId":1,"ensAddress":"0x00000000000"}, detectedNetwork={"name":"rinkeby","chainId":4,"ensAddress":"0x00000000000"}, code=NETWORK_ERROR, version=providers/5.5.2)

Would it be possible for these async methods to return the latest provider instance post-connect or post-network-switch?

I also tried something like

const { activeConnector } = useConnect();

const mint = async () => {
  if (!activeConnector) {
    throw new Error("Wallet not connected");
  }
  ...
  if ((await activeConnector.getChainId()) !== 4) {
    if (activeConnector.switchChain) {
      await activeConnector.switchChain(4);
    } else {
      throw new Error("Wrong network");
    }
  }
  ...
  // I would have expected the following to give me a signer from the latest provider, but got the same error
  const signer = await activeConnector.getSigner();
  const tx = await myContract.connect(signer).mint();
  const receipt = await tx.wait();
  return receipt;
};

I should note that in an ideal world, wallets would handle this for us and let us pass a chain ID along with the contract address and ensure that these calls only get executed on the correct chain. I'd be open to a similar approach in wagmi, but would want it to be compatible with my generated TypeChain types.

Edit: This is probably a better approach and accomplishes the same goals: #396

Related:

• Discussion: Provider will fail if the backend network changes except for "any" ethers-io/ethers.js#866
• Switching network then executing transaction causes underlying network changed error #243
• Support multi-chain wallets in a nicer way #396

[holic]

I found this workaround for now:

import { providers } from "ethers";

...

const { activeConnector } = useConnect();

const mint = async () => {
  if (!activeConnector) {
    throw new Error("Wallet not connected");
  }
  ...
  if ((await activeConnector.getChainId()) !== 4) {
    if (activeConnector.switchChain) {
      await activeConnector.switchChain(4);
    } else {
      throw new Error("Wrong network");
    }
  }
  ...
  const tx = await myContract.connect(await activeConnector.getSigner()).mint();
  const receipt = await tx.wait();
  return receipt;
};

However, on Rainbow for iOS, this will switch to Rainbow to prompt for a network change but throws SwitchChainError instead. So the end user sees Rainbow pop up but nothing to confirm. And you don't see the "Error switching chains" error until you manually tab back to the app.