How to connect a wallet to your React Dapp using web3

In this tutorial, we are going to build a "Connect Wallet" button on your React dApp using the Web3-react library.

If you don't know what the Web3-react library is, it is basically the library you use want you want your website to connect and interact with a blockchain or a wallet.

First, you need to install the dependencies by running:

npm install @web3-react/core web3 @web3-react/injected-connector

• The @web3-react dependencies provide wrappers to easily integrate web3 to our React app. We will use it to interact with a wallet
• Web3 is what we will use to interact with the blockchains

To be able to use the @web3-react hooks, we need to wrap our App with a Provider.

Here is the code to use that Provider:

// App.js
import { Web3ReactProvider } from '@web3-react/core'
import Web3 from 'web3'

function getLibrary(provider) {
  return new Web3(provider)
}

function App() {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="App">
        ...
      </div>
    </Web3ReactProvider>
  );
}

export default App;

Once you have this code, you can use all the features of the @web3-react dependency. We will use it to connect a wallet to our app.

Inside the component where you want to create the "Connect wallet" button, you will need to use an injector that will send information to the wallet about the supported blockchains in your app and other options.

Create a new file called Connector.js and paste this code:

import { InjectedConnector } from '@web3-react/injected-connector'

export const injected = new InjectedConnector({
  supportedChainIds: [1, 56],
})

This code will say that your app supports the blockchains with the chain ids 1 and 56. The chain with the chain id 1 is the Ethereum blockchain and the 56 is for the Binance Smart Chain.

Then, inside the component where you want to connect to a wallet, use this code:

import { useWeb3React } from "@web3-react/core"
import injected from './Connectors.js'

export default function MyComponent() {
  const { active, account, activate } = useWeb3React()
  
  async function connect() {
    try {
      await activate(injected)
    } catch (ex) {
      console.log(ex)
    }
  }
  
  return (
    <div>
      {active ? (
        <p>Connected with <b>{account}</b></p>
       ) : (
        <button onClick={connect} >Connect Wallet</button>
       )}
    </div>
  )
}

In this code, we use the useWeb3React hook to get the functions and properties we need.

This hook returns methods such as activate and deactivate that allow us to connect and disconnect a wallet to our app.

It also returns two other useful properties, active and account. The active property is simply a boolean that indicates wether or not a wallet is connected to our app and the account property contains the wallet's address.

From there, you can use the Web3 dependency to send transactions or sign contracts using the connected wallet or any other method that is available in the documentation of the wallet.

If you are using MetaMask, here is the link to the MetaMask documentation.

Thanks for reading this post!