Switching Chains With web3-react

info

This guide describes chain switching with the external web3-react package family. It supports frontend integration around Ring Swap, but it is not a Ring SDK package guide.

This guide covers how to prompt a connected wallet to switch chains using web3-react. It is based on the upstream web3-react example.

For help on provider setup and connector wiring first, see:

• Connecting Wallets
• Supported Connectors

The input parameters to this guide are the chains that the dApp should support and their RPC URLs.

For this guide, the primary external package is:

• @web3-react/core

Switching Chains

After the frontend is set up to use web3-react, switching chains requires the target chainId and the current connectionType:

Defining the function

loading...

View on GitHub

The connector is then retrieved from the current connection type:

Retrieving the connector

loading...

View on GitHub

For Network and WalletConnect, the example switches chains by calling activate with the supplied chainId:

Switching chains for Network and WalletConnect

loading...

View on GitHub

Other connectors build an AddEthereumChainParameter object and pass that into activate:

Switching chains for the other connectors

loading...

View on GitHub

The chain metadata for those parameters is defined in the example constants file:

Defining the chain parameters

loading...

View on GitHub

Ring Integration Note

Chain switching usually happens before Ring-specific calls are made. A common frontend split is:

• web3-react manages wallet connection and chain selection
• the public Ring SDK packages handle Ring Swap pricing, pairs, routes, and FewToken-aware logic

Next Steps

Once the wallet is on the correct chain, the app can continue into Ring-specific flows powered by the public Ring SDK packages.