DEV Community

fangjun
fangjun

Posted on • Edited on

How to use Web3-react to develop DApp

#blockchain #web3 #web3react #tutorial

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)

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)

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:

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."

There are several libraries, and comparisons of some of them can be found at WAGMI docs.

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



yarn create next-app playeth --typescript
cd playeth
Enter fullscreen mode Exit fullscreen mode

1.2 Use src as our source code directory: 



mkdir src
mv pages src/pages
mv styles src/styles
Enter fullscreen mode Exit fullscreen mode

Edit tsconfig.json, add: 



    "baseUrl": "./src",
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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



yarn dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:



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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

3.2 Query data using SWR

SWR (https://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 install 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 />}
Enter fullscreen mode Exit fullscreen mode

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:



      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
      }, [])
Enter fullscreen mode Exit fullscreen mode

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:



    "@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",
Enter fullscreen mode Exit fullscreen mode

Run command to install dependencies:



yarn install
Enter fullscreen mode Exit fullscreen mode

STEP 2: AccountsComponent

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



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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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



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>

  )
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (6)

Collapse
 
brlojam4932 profile image
brlojam4932 • • Edited

having trouble with this tutorial - I've been at it for hours - sorry - I am kind of new...what is result?
useEffect(() => {

  library?.getBalance(account).then((result)=>{
    setBalance(result/1e18)
  })
  },);
Enter fullscreen mode Exit fullscreen mode

...not sure how all of these fit together
const fetcher = (library) => (...args) => {
const [method, ...params] = args
console.log("fetcher",method, params)
const result = librarymethod
return librarymethod
}

Collapse
 
cryptodevelops profile image
Crypto Master •

If you are a Web 3 Developer, make sure you list your product for sale on the first fully decentralized Web 3 Marketplace - Pinky Finance.

Receive crypto instantly whenever someone buys your product;

Collapse
 
thisisruddy profile image
Dan Ruddy Watts •

Thanks for the tutorial

You do not seem to show how to make contract calls with the v8 pattern and I've been struggling for hours

Also, I need Web3.js provider instance, not the ethers.js that gets instantiated by useProvider in v8 by default

Any thoughts? Or just switch back to v6? 😅

Collapse
 
yakult profile image
fangjun •

you can refer to the v8 example in the web3-react repo: github.com/NoahZinsmeister/web3-re...

Collapse
 
fhrrydeveloper profile image
Full-Stack Dev •

Is it working on android and ios browser too?

Collapse
 
cryptodjs profile image
cryptodjs •

Awesome research!
thank you

c.

Read next

jagroop2001 profile image

Learn TypeScript from A to Z 🚀

Jagroop Singh -

msnmongare profile image

A Beginner's Guide to Starting with Laravel Livewire

Sospeter Mong'are -

shieldstring profile image

Adapter and Composite Design Patterns

Agbo, Daniel Onuoha -

code42cate profile image

Day 10: Docker Networking

Jonas Scholz -