Skip to main content

Web3-react

This tutorial is a step-by-step guide on how to integrate multiple wallets such as 3S Wallet, Metamask, and Wallet Connect into your dapp using the web3-react library.

To test a running version click here.

web3-react-modal

Image 1: Example of a custom modal built with the web3-react library

info

A working React application, set up using npx create-react-app app-name or similar

Setup Web3-react and Wallet Connectors

Step 1: Install Ethers and web3-react

Install ethers.js as a required dependency for web3-react. If you are building your dapp with web3.js, you can additionally install the library.

npm install ethers
npm install web3 # optional
npm install @web3-react/core

Step 2: Import and Setup Web3ReactProvider

In your index.js file, import the Web3ReactProvider from web3-react and a Web3Provider from ethers.js or web3.js. Define a getLibrary function that returns an instance of the Web3Provider. Wrap the Web3ReactProvider around your app root component to make the provider globally accessible throughout your dapp.

import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from "@ethersproject/providers";

function getLibrary(provider) {
return new Web3Provider(provider);
}

ReactDOM.render(
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>,
document.getElementById('root')
);

Step 3: Import and Instantiate Wallet Connectors

Install the wallet connectors of your choice. Here we install 3S Wallet, Wallet Connect, and an Injected connector (used to connect with Metamask).

npm install @3swallet.js/web3-react-connector # 3S Wallet Connect
npm install @web3-react/walletconnect-connector # Wallet Connect
npm install @web3-react/injected-connector # Injected (e.g. Metamask)

In your App.js file, instantiate the connectors to integrate into your dapp. Each connector has its own set of required parameters to pass in, such as a fallback JSON RPC URL or default chain ID.

import Web3SConnector from "@3swallet.js/web3-react-connector";
import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
import { InjectedConnector } from "@web3-react/injected-connector";

const Wallet3S = new Web3SConnector({
rpc: {
1: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,
56: `https://bscrpc.com`
},
supportedChainIds: [1, 56],
});

const WalletConnect = new WalletConnectConnector({
rpc: {
1: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,
56: `https://bscrpc.com`
},
bridge: "https://bridge.walletconnect.org",
qrcode: true,
supportedChainIds: [1, 56]
});

const Injected = new InjectedConnector({
supportedChainIds: [1, 56]
});

Connect and Disconnect from Wallet

In your App.js file add an import for the useWeb3React hook, which provides a set of methods to activate and deactivate the connection to the wallet of your choice.

import { useWeb3React } from '@web3-react/core'

Inside your App function, add your activate and deactivate methods:

function App() {

const { activate, deactivate } = useWeb3React();
...
}

Then, in your App's HTML template, add a button for each wallet and bind the methods onto your UI components.

<button onClick={() => { activate(Wallet3S) }}>3S Wallet</button>
<button onClick={() => { activate(WalletConnect) }}>Wallet Connect</button>
<button onClick={() => { activate(Injected) }}>Metamask</button>

<button onClick={deactivate}>Disconnect</button>

That's it! You should now be able to seamlessly connect to 3S Wallet and other wallets from your dapp.

For more details, read the example source code