Switching Chains
Introduction
This guide will cover how to prompt a wallet that has connected to our dApp to switch chains using web3-react. It is based on the web3-react example, found in the Uniswap code examples repository. To run this example, check out the examples's README and follow the setup instructions.
For help on setting up web3-react and interacting with a MetaMask wallet, please visit our connecting to wallets page!
The input parameters to this guide are the chains that we want our dApp to be able to connect to and their RPC URLs.
At the end of the guide, we should be able to switch chains on the connected wallet.
For this guide, the following web3-react packages are used:
This guide uses web3-react version 8, which is a beta version.
The core code of this guide can be found in connections.
Switching Chains
Having setup our application to use web3-react and having built out the ability to connect and disconnect wallets, we can now move on to switching chains.
Switching chains requires two parameters, the chainId we want to switch to, and the current connectionType:
loading...
Given the ConnectionType, we can retrieve the actual connector:
loading...
Then, depending on the ConnectionType, we determine how to switch chains. For the Network or WalletConnect cases, we call web3-react's activate function with the supplied chainId:
loading...
The rest of the connectors require us to build an AddEthereumChainParameter object and pass it to the web3-react's activate function:
loading...
The metadata required to build AddEthereumChainParameter are defined in our constants file:
loading...
Next steps
Know you know how to support web3-react's most common use cases! Stay tuned for follow up guides.