web3-react: Connect Users to MetaMask (or any wallet) From Your Frontend

Hello, in this post I’ll be showing how to use a library called web3-react in order to connect users to MetaMask or any wallet from your frontend.

My plan is to show you the most simple implementation possible. It will look like this:

A more complicated implementation would look like the image below, it would have persistence, and the dapp itself would most likely interact with smart contracts:

For this tutorial, you need to be connected to a MetaMask wallet of course.

Resources

• GitHub repo
• Video version of this tutorial

To start, I’ll just create a simple NextJS application.

Note: you can use yarn or npm, either is fine.

yarn create next-app web3-react-example

First thing that I’d like to do is get the visuals prepared.