How to request the connected wallet to switch the selected network using Wagmi

In this tutorial, we are going to learn how to request the connected wallet to switch the selected network and use another network using Wagmi in React.

Here is an example of how to do it:

import { useNetwork, useSwitchNetwork } from 'wagmi';

export const SwitchNetwork = () => {
  // get the selected network
  const { chain } = useNetwork();
  
  // get a function to request switching the selected network
  const { chains, error, isLoading, pendingChainId, switchNetwork } = useSwitchNetwork();

  if (!chain) return;

  return (
    <div>
      <p>The currently selected chain is {chain.name}</p>
      <button disabled={!switchNetwork} onClick={() => switchNetwork(1)}>
        Switch to Ethereum mainnet
      </button>
    </div>
  );
};

Before going further, you need to know that every EVM network has an ID that we use to identify the networks in the code.

You can see the full list of EVM chains and their IDs here: https://chainlist.org/

Now let's dive into the code.

First we get the currently selected network on the user's wallet using the useNetwork hook. It returns an object that contains a chain property which is an object containing data about the selected network.

It also returns a chains property containing information about all the chains that your application supports. It depends on how you configured your Wagmi client.

The 3 properties that you'll likely need from that object are:

• id: the ID of the selected network
• name: the name of the selected network
• nativeCurrency: an object containing information about the native currency of the chain. It contains 3 properties, name, decimals and symbol.

If there is no wallet connected to your app, chain will be undefined.

Next, we use the useSwitchNetwork hook to get a function we can call to request switching the currently selected network on the user's wallet.

The useSwitchNetwork hook returns an object containing a switchNetwork function that we can call to request switching the selected network. It takes in parameter the chain ID of the network that you want the user to switch to.

If the connected wallet doesn't allow the users to select the network they want to interact with, or if they allow it but don't allow an app to request it, the switchNetwork function will be undefined.

But it's important to note that if the user manually changes the selected network on their wallet, it will update your app. The useNetwork hook will be called again and update the chain it returns.

So if switchNetwork is undefined, you can still ask the user to do it manually and it will update your app.

The useSwitchNetwork hook also returns the following properties:

• chains: an array containing the chains that your app supports. Every object in that array is like the chain object returned by useNetwork that is described above.
• data: an object containing information about the chain that the user switched to. It has the same properties as the chain object returned by useNetwork that is described above.
• error: if switching the selected network failed, it will contain the error that was thrown, otherwise it's null. For instance, if the user rejects switching the network on their wallet, it will contain an error.
• isLoading: true while waiting for the user to accept or reject switching the network, false otherwise.
• pendingChainId: the ID of the network that you requested the user to switch to. It is null before calling switchNetwork.

Check out the documentation to see the full list of values returned by the useSwitchNetwork hook.

You can also check out this part of the documentation to configure the hook to work a bit differently.

And that's it 🎉

Thank you for reading this article