Into Web3
How to use Web3-react to develop DApp

Photo by davisuko on Unsplash

How to use Web3-react to develop DApp

fangjun's photo
fangjun
·

10 min read

Table of contents

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:

  • Front-end: React, Next.js, Chakra UI, 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)

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: 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 8. Widely used hooks useWeb3React is tagged with comment "for backwards compatibility only".

I can forsee that Version 8 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:

Lorenzo's Web3-React Tutorial 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."

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:

yarn create next-app playeth --typescript
cd playeth

1.2 Use src as our source code directory:

mkdir src
mv pages src/pages
mv styles src/styles

Edit tsconfig.json, add: 

    "baseUrl": "./src",

1.3 Clear index.tsx:

Make index.tsx simple. 

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: localhost:3000

yarn dev

1.5 Add dependencies

We will use ethers.js, web3-react and etc here.

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 Provider in _app.tsx

Add context provider <Web3ReactProvider> in _app.tsx:

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.

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.

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: localhost:3000

Image description

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.

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

3.2 Query data using SWR

SWR (swr.now.sh) means Stale-While-Revalidate. Lorenzo's Web3-React Tutorial 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 insatll swr, edit index.tsx

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 Etheruem block number change: ethers.provider.on()
  • Use SWR mutate to trigger refresh

Edit BalanceSWR component in index.tsx:

      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: consensys.net/blog/developers/how-to-fetch-..

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 demostate 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:

    "@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:

yarn install

STEP 2: AccountsComponent

Create components/AccountsComponent.tsx based on: github.com/NoahZinsmeister/web3-react/blob/..

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 github.com/NoahZinsmeister/web3-react/tree/..

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:

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. 

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.

BlockchainWeb DevelopmentWeb3Reactcrypto