Use web3-react to connect to Coinbase Wallet and others

One of the most popular methods to integrate wallet providers into your dapp is using the Web3-react library, developed by Noah Zinnsmeister. Web3-react is a modular framework for building and interacting with Ethereum dapps using React, which abstracts away the complexities of working directly with various wallet providers by providing a single convenient API. It combines ethers.js, a web3 library that lets you use HTTP, IPC, or WebSocket to communicate with a local or remote Ethereum node, and React, a widely used JavaScript library for front-end development, to create blockchain applications.

This tutorial will show you how to integrate your dapp to Coinbase Wallet — or any Ethereum-compatible wallet supported by Web3-react — to your dapp, so that users of Coinbase Wallet or other wallet solutions can access your decentralized application. The expected time for this project is about 30 minutes or less.

Uniswap UI

• As always, please engage in this process at your own risk and do your own research. We recommend following this process using testnet funds to explore the steps with no value at stake. Do not use mainnet funds for learning. You can access testnet tokens from the Ropsten Ethereum testnet token faucet here.

• We will assume that you already have a React app up and running, and are familiar with React.

Step 1: Install web3-react

# required 

yarn add ethers # required dependency

yarn add @web3-react/core

Step 2: Import and Setup Web3ReactProvider

Here, we instantiate a provider and define a getLibrary function that returns it. Then, we wrap our app around a React context that returns this instantiated provider, which makes it globally available throughout our dapp.

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

import { Web3Provider } from "@ethersproject/providers";

function getLibrary(provider) {

return new Web3Provider(provider);

}

const Dapp => () {

return (

<Web3ReactProvider getLibrary={getLibrary}>

<App />

</Web3ReactProvider>

)

};

Step 3: Import and instantiate wallet connectors

We then instantiate various wallet connectors to integrate into our dapp.

import { InjectedConnector } from "@web3-react/walletlink-connector";

import { WalletLinkConnector } from "@web3-react/walletlink-connector";

import { WalletConnectConnector } from "@web3-react/walletlink-connector";

const Injected = new InjectedConnector({

 supportedChainIds: [1, 3, 4, 5, 42]

});

const CoinbaseWallet = new WalletLinkConnector({

 url: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,

 appName: "Web3-react Demo",

 supportedChainIds: [1, 3, 4, 5, 42],

});

const WalletConnect = new WalletConnectConnector({

 rpcUrl: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,

 bridge: "https://bridge.walletconnect.org",

 qrcode: true,

});

Note: If your dapp uses webpack5, a tool used to bundle JavaScript files for efficient usage in a browser, add the following code snippet to webpack.config.js:

…

resolve: {

 fallback: {

   fs: false,

   // eslint-disable-next-line node/no-extraneous-require

   'stream': require.resolve('stream-browserify'),

   // eslint-disable-next-line node/no-extraneous-require

   'buffer': require.resolve('buffer/'),

   // eslint-disable-next-line node/no-extraneous-require

   'util': require.resolve('util/'),

   'assert': require.resolve('assert/'),

 },

},

…

Finally, add the following dependencies to package.json:

…

"assert": "^2.0.0",

"buffer": "^6.0.3",

"stream-browserify": "^3.0.0",

"util": "^0.12.4"

…

Step 4: Import hooks and activate connections

Finally import the useWeb3React hook, which provides access to a set of methods to interact with the wallet connectors.

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

const { active, activate, deactivate library, chainId, account, } = context;

<Button onClick={() => { activate(Injected) } />

<Button onClick={() => { activate(CoinbaseWallet) } />

<Button onClick={() => { activate(WalletConnect) } />

Hook the methods onto your UI components and that’s it! You should now be able to connect to Coinbase Wallet and other wallets from your dapp.

You can learn more about Coinbase Wallet on our website. For a deeper dive, please see our web3react technical documents here.

Disclaimer: Coinbase Wallet is a self-custody wallet providing software services subject to Coinbase Wallet Terms of Service and Privacy Policy. Coinbase Wallet is distinct from Coinbase.com, and private keys for Coinbase Wallet are stored directly by the user and not by Coinbase. Fees may apply. You do not need a Coinbase.com account to use Coinbase Wallet.