This is a simple, structured sample of using web3-react.
The app fetches the block number and some basic information about DAI token, demonstrating use of basic functions and contract interactions.
The app demonstrates the following use-cases:
- A MetaMask user who has previously authorized the app will be automatically signed in with their current account if their MetaMask is unlocked.
- Otherwise:
- the user will be connected to the Ethereum network using a NetworkConnector to retrieve the block number and basic information about DAI token;
- the user will be presented with a "Connect with MetaMask" button that allows them to unlock / connect their account.
- Should the user unlock their MetaMask while on the website, the app will not change state until the user clicks "Connect with MetaMask".
- Should the user lock their MetaMask while on the website, they will be logged out of the app automatically.
See features/web3 for the web3-react setup. Note that Web3Provider wraps App in index.tsx, and a Web3ConnectionManager wraps the rest of the app in App.tsx.
- The app is written in TypeScript.
- The app uses
ethers@5.0.0-beta.175, which is recommended for use with new projects, but has limited documentation. - This project was bootstrapped with Create React App. Learn more in Create React App documentation.
- This app should provide a good starter point, but check out uniswap-frontend for a more sophisticated setup.
- https://github.com/aragon/use-wallet: All-in-one solution to connect a dapp to an Ethereum provider.
Feel like you can improve this example? PRs are welcome! Just remember that this is intended as starter code. :)
Contributors:
- Arseniy Ivanov, 2020
Wouldn't be possible without:
- Noah Zinsmeister, who built web3-react
See UNLICENSE for details.