Connecting Wallets With web3-react

info

This guide is about using the external @web3-react/* packages in a frontend app. It is related to Ring integrations, but it is not documentation for a public Ring SDK package.

This guide covers how to connect wallets with web3-react. It is based on the upstream web3-react example, which remains useful when building a Ring Swap frontend that also uses the public Ring SDK packages.

In this example we walk through setting up web3-react and connecting the most common browser-injected connector, MetaMask, using @web3-react/metamask.

The input parameters to this guide are the chains that we want our app to be able to connect to and their RPC URLs.

The guide covers:

1. Creating a web3-react Web3ReactProvider
2. Building a web3-react injected connector
3. Connecting and disconnecting the application to the connector

At the end of the guide, the dApp should be able to connect and disconnect a MetaMask connector.

For this guide, the following external packages are used:

• @web3-react/core
• @web3-react/types
• @web3-react/metamask

Creating a Web3ReactProvider

To interact with the methods that web3-react exposes, first set up a Web3ReactProvider and wrap the application in it. web3-react uses a React context so the exposed hooks can be used without extra per-component configuration.

Start by creating a React component called Web3ContextProvider that wraps the Web3ReactProvider setup:

Defining the Web3React component

loading...

View on GitHub

Then render the imported Web3ReactProvider with the children within it:

Implementing the component

loading...

View on GitHub

The example maps a list of Connections to tuples of connector and hooks. The third element tracks the connection type, which is later used to determine the active wallet connection.

After creating Web3ContextProvider, wrap the whole application with it from the entry file:

Wrapping the app with the web3 context

loading...

View on GitHub

Building an Injected Connector

The Web3ReactProvider receives a list of prioritized connectors, usually declared as PRIORITIZED_CONNECTORS. The order controls which connector should be considered active when more than one is connected.

Creating the prioritized connectors list

loading...

View on GitHub

An injected connector supports wallets that inject an Ethereum provider into the browser window. MetaMask is the most common example.

Import initializeConnector from @web3-react/core and the MetaMask type from @web3-react/metamask:

Importing connector dependencies

loading...

View on GitHub

Then initialize the MetaMask connector:

Initializing the MetaMask connector

loading...

View on GitHub

The return type is a tuple of the initialized connector and the hooks that can be used with it. The example then wraps that tuple into a Connection object:

Creating a connection instance

loading...

View on GitHub

Connecting And Disconnecting

After building the injected connector, use it from the UI layer. The example Option component receives flags such as isEnabled and isConnected, along with callbacks for activate and deactivate:

Creating the Option component

loading...

View on GitHub

When the button is clicked, the example either activates or deactivates the connector:

The component user interface

loading...

View on GitHub

To connect the wallet, call tryActivateConnector with the injected connector:

The implementation of tryActivateConnector

loading...

View on GitHub

To disconnect, call tryDeactivateConnector:

The implementation of tryDeactivateConnector

loading...

View on GitHub

Ring Integration Note

Once a wallet connection is established, frontend code can then invoke the public Ring SDK packages for pricing, route construction, or pair interaction. Keep the boundary clear:

• use web3-react for wallet/session state
• use the Ring SDK packages for Ring Swap and FewToken logic

Next Steps

Continue to the supported connectors guide.