# How to use Web3-react to develop DApp **Published by:** [fangjun.eth](https://paragraph.com/@fangjun/) **Published on:** 2022-01-30 **URL:** https://paragraph.com/@fangjun/how-to-use-web3-react-to-develop-dapp ## Content 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/300. 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, TypeScriptBlockchain API: Ethers.jsDevelopment Environment: Hardat, MetaMask, Ethereum testnetweb3-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 v6a tutorial on Consensys blog by Lorenzo SiciliaThere are some main changes from v6 to 8. Widely used hooks useWeb3React is tagged with comment "for backwards compatibility only". I can foresee 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:source code https://github.com/NoahZinsmeister/web3-react/tree/v6documents https://github.com/NoahZinsmeister/web3-react/tree/v6/docsLorenzo'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 projectFirst, 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: http://localhost:3000/1.5 Add dependenciesWe 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/providers2. Connect to blockchain using Web3-react, ethers and MetaMaskThe 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 sideEthers.js between browser/server and blockchain endpointReact and Web3-react on the server/browserLet's start to make a DApp with web3-react. We will use its two parts:Web3ReactProvider, contextuseWeb3React, hooksPlease 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.tsxAdd context provider 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.tsxUse 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: http://localhost:3000/Image descriptionNote: If you want to truly disconnect your wallet from this page, disconnect from MetaMask.3. Get data from Ethereum Mainnet: Read BlockchainIn 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 useEffectMake 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 SWRSWR (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 insatll swr, edit index.tsximport useSWR from 'swr' ... const fetcher = (library) => (...args) => { const [method, ...params] = args console.log("fetcher",method, params) const result = librarymethod return librarymethod } 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-timeThe 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 refreshEdit 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: 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 8There 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 projectCreate 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:STEP 2: AccountsComponentCreate components/AccountsComponent.tsx based on: https://github.com/NoahZinsmeister/web3-react/blob/main/packages/example/components/Accounts.tsximport 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 accountUsing getBalance function of web3 provider to query ether balanceSTEP 3: MetaMaskCardCreate components/MetaMaskCard.tsx. MetaMaskCard is based on: MetaMaskCard, Connect, Status component in https://github.com/NoahZinsmeister/web3-react/tree/main/packages/example/componentsimport 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, StatusConnect component provide a button user can click to connect MetaMask wallet by calling metaMask.activate()Status Component display status according to isActivating and isActiveWe 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.tsxUsing 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. ## Publication Information - [fangjun.eth](https://paragraph.com/@fangjun/): Publication homepage - [All Posts](https://paragraph.com/@fangjun/): More posts from this publication - [RSS Feed](https://api.paragraph.com/blogs/rss/@fangjun): Subscribe to updates