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.
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 networkname
: the name of the selected networknativeCurrency
: an object containing information about the native currency of the chain. It contains 3 properties,name
,decimals
andsymbol
.
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 thechain
object returned byuseNetwork
that is described above.data
: an object containing information about the chain that the user switched to. It has the same properties as thechain
object returned byuseNetwork
that is described above.error
: if switching the selected network failed, it will contain the error that was thrown, otherwise it'snull
. 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 callingswitchNetwork
.
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