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:

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

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.