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