How to use Web3-react to develop DApp
Tags: blockchain, web3, web3react, tutorial
Published: 2022-01-30 01:32:12

Web3-react is a popular library used in blockchain, DApp and web3 development. It has more than 2800 stars and has been used by more than 10000 repo's on Github. 

Note: If you have known `web3-react`, you can go directly to section 1 for how-to guide.

Last Updated: 2022/01/30

---

## 0. What is `web3-react`? 

Before starting the journey, I will give an overview of the stack and technology we use here:

- Front-end: React, Next.js, TypeScript

- Blockchain API: Ethers.js

- Development Environment: Hardat, MetaMask, Ethereum testnet

`web3-react` is a React/Ethers.js framework for building modern Ethereum DApp developed by Uniswap Engineering Lead Noah Zinsmeister. It works between Front-end and blockchain API.

> At a high level, web3-react is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date. 
>
> To this end, web3-react uses Context to efficiently store this data, and inject it wherever you need it in your application. (via [web3-react v6 docs](https://github.com/NoahZinsmeister/web3-react/tree/v6/docs#overview))

It is a react library and the underlying blockchain API is `Ethers.js`. The stable version is v6, and currently v8 is in beta. You can find `web3-react` repo at: https://github.com/NoahZinsmeister/web3-react

As it is widely used, I am surprised to find that there are very few documents. So far, I can only refer to 4 documents:

- source code of web3-react (v6 and v8 beta)
- example in the package (v6 and v8 beta)
- documents for web3-react v6 
- a tutorial on Consensys blog by Lorenzo Sicilia

There are some main changes from v6 to v8 beta. Widely used hooks `useWeb3React` is tagged with a comment "for backwards compatibility only".(Gerhard Steenkamp and William Schwab in community wrote a good [docs for web3-react](https://hackmd.io/Ykpp1MWLTjixIZG2ZJEShA))

I can foresee that v8 of `web3-react` will be widely used as it can meet the increasing demand of web3. I wrote down this tutorial to help developers to use it, both for v6 and v8(beta). 

Useful links: Source code and documents for web3-react v6:

- source code  https://github.com/NoahZinsmeister/web3-react/tree/v6
- documents https://github.com/NoahZinsmeister/web3-react/tree/v6/docs

[Lorenzo's Web3-React Tutorial](https://consensys.net/blog/developers/how-to-fetch-and-update-data-from-ethereum-with-react-and-swr/) is a great help for this how-to guide, and I copied the sample code from it. Great thanks. The tutorial is great as it illustrates the strategy to sync data between blockchain and DApp: 

> "SWR and Ether.js are two nice libraries to work with if you want to streamline your data fetching strategy with Ethereum dapp." 

There are several libraries, and comparisons of some of them can be found at [WAGMI docs](https://wagmi-xyz.vercel.app/comparison).

- Web3-react
- WAGMI
- useDApp
- web3modal
- Web3-UI
- Web3UI
- Scaffold-eth / eth-components / eth-hooks

---

## 1. Set up playground: create a Next.js project

First, we start a Next.js project to write DAPP using `web3-react`. Then, we add dependencies. Follow these 6 steps: 

### 1.1 Create a project:

```bash
yarn create next-app playeth --typescript
cd playeth
```

### 1.2 Use `src` as our source code directory:

```bash
mkdir src
mv pages src/pages
mv styles src/styles
```

Edit `tsconfig.json`, add: 
```json
    "baseUrl": "./src",
```

### 1.3 Clear `index.tsx`:

Make `index.tsx` simple. 

```js
import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div>
      <main className={styles.main}>
        <h2>
          Welcome to playground
        </h2>
      </main>
    </div>
  )
}
export default Home
```

### 1.4 Run project and view it at: http://localhost:3000/

```bash
yarn dev
```

### 1.5 Add dependencies

We will use `Ethers.js`, `web3-react` and etc here.
```bash
yarn add ethers
yarn add  @web3-react/core  @web3-react/injected-connector
```

`web3-react` installed is stable version 6.x.x.

If you would like to add only `Ethers.js` component used, you can replace the first command to: `yarn add @ethersproject/providers
`

---

## 2. Connect to blockchain using Web3-react, ethers and MetaMask

The main difference between DApp (web3 app) and traditional web app is that DApp connects to blockchain instead of a centralized server for 1) user login and authorization, 2)  data about data and 3) functionality such as DeFi, NFT, Game, DAO governance.

When DApps are used in desktop browsers, they are made possible with three things: 

- MaskMask wallet on the user side

- Ethers.js between browser/server and blockchain endpoint

- React and Web3-react on the server/browser

Let's start to make a DApp with `web3-react`. We will use its two parts:

- Web3ReactProvider, context
- useWeb3React, hooks

Please note that there is a big upgrade from v6 to v8. `useWeb3React` is tagged with comment "for backwards compatibility only".

### 2.1 Add Provider in `_app.tsx`

Add context provider `<Web3ReactProvider>` in `_app.tsx`:

```js
import '../styles/globals.css'
import type { AppProps } from 'next/app'

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

function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Component {...pageProps} />
    </Web3ReactProvider>
  )
}

export default MyApp

```

### 2.2 Edit `index.tsx`

Use `useWeb3React` to connect to blockchain using an injected provider by MetaMask. You can call it directly through `windows.ethereum`. MetaMask Ethereum Provider API docs is [here](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents).

You need to have MetaMask extension installed in your Chrome browser. 

Edit `index.tsx` to provide a button to connect blockchain using MetaMask wallet and its blockchain provider injected to browser.

```js
import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import { useEffect } from 'react'

import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { InjectedConnector } from '@web3-react/injected-connector'

const ConnectWallet = () => {
  const injectedConnector = new InjectedConnector({supportedChainIds: [1,3, 4, 5, 42, ],})
  const { chainId, account, activate, active,library } = useWeb3React<Web3Provider>()
  const onClick = () => {
    activate(injectedConnector)
  }

  useEffect(() => {
    console.log(chainId, account, active)
    },);

  return (
    <div>
      <div>ChainId: {chainId}</div>
      <div>Account: {account}</div>
      {active ? (
        <div>✅ </div>
      ) : (
        <button type="button" onClick={onClick}>
          Connect Connect
        </button>
      )}
    </div>
  )
}

const Home: NextPage = () => {
  return (
    <div >
      <main className={styles.main}>
        <h2 >Welcome to playground</h2>
        <ConnectWallet />
      </main>
    </div>
  )
}

export default Home
```

What do we do? We add a `ConnectWallet` Component for display account and connect to wallet.

- Click connect Wallet button, `activate(injectedConnector)` of `useWeb3React` hook is called.

- When connected, display `chainId` and `account`. 

Run `yarn dev`, we can play with this simple DApp at: http://localhost:3000/ 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgg38olv5j9kom5uo6fr.png)
 

Note: If you want to truly disconnect your wallet from this page, disconnect from MetaMask.

---

## 3. Get data from Ethereum Mainnet: Read Blockchain

In Section 2, we have established an environment to interact with blockchain. In this section, we will try to get data from Ethereum Mainnet.

### 3.1 Query data and display using useState and useEffect

Make some changes in `index.tsx`, please note this is a quick and dirty code snippet just for illustration.

```js
  const [balance,setBalance]= useState("")
...
  useEffect(() => {
    library?.getBalance(account).then((result)=>{
      setBalance(result/1e18)
    })
    },);
...
      <div>Balance: {balance}</div>
```

### 3.2 Query data using SWR

SWR (https://swr.now.sh/) means Stale-While-Revalidate. [Lorenzo's Web3-React Tutorial](https://consensys.net/blog/developers/how-to-fetch-and-update-data-from-ethereum-with-react-and-swr/) suggests using this strategy. A quote about SWR: 

> SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

After install `swr`, edit `index.tsx`

```js
import useSWR from 'swr'
...
    const fetcher = (library) => (...args) => {
      const [method, ...params] = args
      console.log("fetcher",method, params)
      const result = library[method](...params)
     return library[method](...params)
    }

    const BalanceSWR  = () => {
      const { account, library } = useWeb3React<Web3Provider>()
      const { data: balance } = useSWR(['getBalance', account, 'latest'], {
        fetcher: fetcher(library),
      })
      console.log(balance)
      if(!balance) {
        return <div>...</div>
      }
      return <div>Balance: Ξ {balance/1e18}</div>
    }  
...
      {active && <BalanceSWR />}
```

Lorenzo's Web3-React Tutorial explains: 

> As you can see, it is a partially applied function. In that way, I can inject the library (my Web3Provider) when I configure the fetcher. Later, every time a key changes, the function can be resolved by returning the required promise.

### 3.3 Update data in real-time

The pro of using SWR is that it can update data in real-time.

We will follow Lorenzo's Web3-React tutorial to do this.

The feature used is SWR's `mutate` function.

- Listen to Ethereum block number change: ethers.provider.on()
- Use SWR mutate to trigger refresh

Edit `BalanceSWR` component in `index.tsx`:

```js
      const { account, library } = useWeb3React<Web3Provider>()
      const { data: balance,mutate } = useSWR(['getBalance', account, 'latest'], {
        fetcher: fetcher(library),
      })

      useEffect(() => {
        // listen for changes on an Ethereum address
        console.log(`listening for blocks...`)
        library.on('block', () => {
          console.log('update balance...')
          mutate(undefined, true)
        })
        // remove listener when the component is unmounted
        return () => {
          library.removeAllListeners('block')
        }
        // trigger the effect only on component mount
      }, [])
```

Lorenzo's tutorial has more on interacting with smart contract and listening to smart contract events. You can continue to read it and do experiments: https://consensys.net/blog/developers/how-to-fetch-and-update-data-from-ethereum-with-react-and-swr/

We will go to Web3-react version 8 to see what has been changed.

---

## 4. Dive into Web3-react Version 8

There is an example to demostrate how to use it. We will take some code snippets from it directly. You can find the example at packages/example/

### STEP 1 Create an example project

Create a next.js project just like we did in section 1. 

Edit package.json to add dependencies:

```json
    "@ethersproject/bignumber": "^5.4.2",
    "@ethersproject/experimental": "^5.5.0",
    "@ethersproject/providers": "^5.5.1",
    "@ethersproject/units": "^5.4.0",
    "@walletconnect/ethereum-provider": "^1.7.1",
    "@web3-react/core": "8.0.6-beta.0",
    "@web3-react/eip1193": "8.0.2-beta.0",
    "@web3-react/empty": "8.0.2-beta.0",
    "@web3-react/metamask": "8.0.3-beta.0",
    "@web3-react/network": "8.0.2-beta.0",
    "@web3-react/types": "8.0.2-beta.0",
    "@web3-react/url": "8.0.2-beta.0",
    "@web3-react/walletconnect": "8.0.4-beta.0",
    "@web3-react/walletlink": "8.0.4-beta.0",
```

Run command to install dependencies:

```bash
yarn install
```

### STEP 2: AccountsComponent 

Create `components/AccountsComponent.tsx` based on: https://github.com/NoahZinsmeister/web3-react/blob/main/packages/example/components/Accounts.tsx

```js
import type { BigNumber } from '@ethersproject/bignumber'
import { formatEther } from '@ethersproject/units'
import type { Web3ReactHooks } from '@web3-react/core'
import { useEffect, useState } from 'react'

function useBalances(
  provider?: ReturnType<Web3ReactHooks['useProvider']>,
  accounts?: string[]
): BigNumber[] | undefined {
  const [balances, setBalances] = useState<BigNumber[] | undefined>()

  useEffect(() => {
    if (provider && accounts?.length) {
      let stale = false

      void Promise.all(accounts.map((account) => provider.getBalance(account))).then((balances) => {
        if (!stale) {
          setBalances(balances)
        }
      })

      return () => {
        stale = true
        setBalances(undefined)
      }
    }
  }, [provider, accounts])

  return balances
}

export function AccountsComponent({
  accounts,
  provider,
  ENSNames,
}: {
  accounts: ReturnType<Web3ReactHooks['useAccounts']>
  provider: ReturnType<Web3ReactHooks['useProvider']>
  ENSNames: ReturnType<Web3ReactHooks['useENSNames']>
}) {
  const balances = useBalances(provider, accounts)

  if (accounts === undefined) return null

  return (
    <div>
      Accounts:{' '}
      <b>
        {accounts.length === 0
          ? 'None'
          : accounts?.map((account, i) => (
              <ul key={account} style={{ margin: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                <li>{ENSNames?.[i] ?? account}</li>
                <li>{balances?.[i] ? ` (Ξ${formatEther(balances[i])})` : null}</li>
              </ul>
            ))}
      </b>
    </div>
  )
}

```

Some explanations:

- A component to display ENS/Address and ether balance of the account

- Using `getBalance` function of web3 provider to query ether balance 

### STEP 3: MetaMaskCard

Create `components/MetaMaskCard.tsx`. MetaMaskCard is based on: MetaMaskCard, Connect, Status component in   https://github.com/NoahZinsmeister/web3-react/tree/main/packages/example/components

```js
import type { Web3ReactHooks } from '@web3-react/core'
import { AccountsComponent } from './AccountsComponent'
import { initializeConnector } from '@web3-react/core'
import { MetaMask } from '@web3-react/metamask'

const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
const {  useChainId, useAccounts, useError, useIsActivating, useIsActive, useProvider, useENSNames } = hooks

function Connect({
  isActivating,
  error,
  isActive,
}: {
  chainId: ReturnType<Web3ReactHooks['useChainId']>
  isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
  error: ReturnType<Web3ReactHooks['useError']>
  isActive: ReturnType<Web3ReactHooks['useIsActive']>
}) {

  if (error) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button
          onClick={() => metaMask.activate()}
        >
          Try Again?
        </button>
      </div>
    )
  } else if (isActive) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button onClick={() => metaMask.deactivate()}>Disconnect</button>
      </div>
    )
  } else {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button
          onClick={
            isActivating
              ? undefined
              : () => metaMask.activate()
          }
          disabled={isActivating}
        >
          Connect
        </button>
      </div>
    )
  }
}

function Status({
  isActivating,
  error,
  isActive,
}: {
  isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
  error: ReturnType<Web3ReactHooks['useError']>
  isActive: ReturnType<Web3ReactHooks['useIsActive']>
}) {
  return (
    <div>
      {error ? (
        <>
          🔴 {error.name ?? 'Error'}
          {error.message ? `: ${error.message}` : null}
        </>
      ) : isActivating ? (
        <>🟡 Connecting</>
      ) : isActive ? (
        <>🟢 Connected</>
      ) : (
        <>⚪️ Disconnected</>
      )}
    </div>
  )
}

export default function MetaMaskCard() {
  const chainId = useChainId()
  const accounts = useAccounts()
  const error = useError()
  const isActivating = useIsActivating()

  const isActive = useIsActive()

  const provider = useProvider()
  const ENSNames = useENSNames(provider)

  return (
      <div style={{border: '1px solid'}}>
        <b>MetaMask</b>
        <Status isActivating={isActivating} error={error} isActive={isActive} />
        <AccountsComponent accounts={accounts} provider={provider} ENSNames={ENSNames} />
        <Connect chainId={chainId} isActivating={isActivating} error={error} isActive={isActive} />
      </div>

  )
}

```

Some explanations:

- Three components: MetaMaskCard, Connect, Status
- Connect component provide a button user can click to connect MetaMask wallet by calling `metaMask.activate()`
- Status Component display status according to `isActivating` and `isActive`

We get all the needed hooks here:

```js
const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
const {  useChainId, useAccounts, useError, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
```

### STEP 4: `index.tsx`

Using Next.js dynamic import to import MetaMaskCard. 

```js
import type { NextPage } from 'next'
import styles from 'styles/Home.module.css'

import dynamic from 'next/dynamic'

const MetaMaskCard = dynamic(() => import('../components/MetaMaskCard'), { ssr: false })

const Home: NextPage = () => {
  return (
    <div>
      <main  className={styles.main}>
        <h2>
          Welcome to playground
        </h2>
        <MetaMaskCard />
      </main>
    </div>
  )
}
export default Home
```

Run command `yarn dev` and visit the sample app at: localhost:3000

---

In sum, web3-react provides a handy tool with context and hooks between react and ethers. Enjoy it.