web3-react-simple-app

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.

Use-cases

The app demonstrates the following use-cases:

1. A MetaMask user who has previously authorized the app will be automatically signed in with their current account if their MetaMask is unlocked.
2. 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.
3. Should the user unlock their MetaMask while on the website, the app will not change state until the user clicks "Connect with MetaMask".
4. Should the user lock their MetaMask while on the website, they will be logged out of the app automatically.

Show me the code

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.

Notes

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

Other web3-react Projects

• https://github.com/aragon/use-wallet: All-in-one solution to connect a dapp to an Ethereum provider.

Contributing

Feel like you can improve this example? PRs are welcome! Just remember that this is intended as starter code. :)

Contributors & Acknowledgements

Contributors:

• Arseniy Ivanov, 2020

Wouldn't be possible without:

• Noah Zinsmeister, who built web3-react

License

See UNLICENSE for details.