Supported Connectors In web3-react

info

This page documents external web3-react connectors as frontend integration options. They are not part of the public Ring SDK package surface.

This guide covers how to connect a dApp to the different connectors that web3-react supports. It is based on the upstream web3-react example, which is still relevant when building a Ring frontend around the public SDK packages.

This example covers:

• Coinbase Wallet
• WalletConnect
• Network
• Gnosis Safe

For help setting up the provider and MetaMask flow first, see Connecting Wallets.

The guide covers:

1. Building a Coinbase Wallet connector
2. Building a WalletConnect connector
3. Building a Network connector
4. Building a Gnosis Safe connector

For this guide, the following external packages are used:

• @web3-react/core
• @web3-react/types
• @web3-react/coinbase-wallet
• @web3-react/walletconnect
• @web3-react/network
• @web3-react/gnosis-safe

Coinbase Wallet

The example connector list includes a Coinbase Wallet connector:

Creating the prioritized connectors list

loading...

View on GitHub

Install the Coinbase Wallet packages, then import CoinbaseWallet and initializeConnector:

Importing the Coinbase Wallet connector

loading...

View on GitHub

Initialize the connector with the required options:

Initializing the Coinbase Wallet connector

loading...

View on GitHub

Then build the Connection wrapper:

Building the Coinbase Wallet connection

loading...

View on GitHub

WalletConnect

To connect to WalletConnect, import the connector type and initialize it with the RPC map and QR-code options:

Importing the WalletConnect connector

loading...

View on GitHub

Initializing the WalletConnect connector

loading...

View on GitHub

The example uses a chain-to-RPC map from its constants file, then surfaces the connector through the UI:

Building the WalletConnect component

loading...

View on GitHub

Network Connector

The Network connector is usually connected programmatically instead of through a button-driven UI. The example eagerly attempts to connect to it from the provider layer:

Hook to connect eagerly

loading...

View on GitHub

Import and initialize it like this:

Importing the Network connector

loading...

View on GitHub

Initializing the Network connector

loading...

View on GitHub

Then wrap it as a Connection:

Creating a Network connection

loading...

View on GitHub

Gnosis Safe

The Gnosis Safe connector follows the same pattern, but requires less parameterization:

Importing the Gnosis Safe connector

loading...

View on GitHub

Initializing a Gnosis Safe connector

loading...

View on GitHub

Creating a Gnosis Safe connection

loading...

View on GitHub

Ring Integration Note

These connectors solve wallet connectivity. Ring-specific protocol behavior should still live in the public Ring SDK packages and your frontend integration code.

Next Steps

Continue to Switching Chains.