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

A simple example of using web3-react, a library for connecting to Ethereum wallets.

ＭＹ ＹＯＵＴＵＢＥ ＣＨＡＮＮＥＬＳ:

🐱‍👤 Links to support:

Feel free to message me no matter what for :)

[lindor]

Awesome tutorial. Im interested in how to stay connected after a reload. I know that metamask is already connected, but how can I show that on every reload

[unclebigbay]

I am your 600th Subscriber...I found the article and video tutorial helpful 🤗

[sebastianse]

This was great man, just was I was looking for! Thank you for the straight forward content!

[HeorhiiHryhorian]

The best tutorial, that i even see in youtube. Thank's a lot!!!

[mihailomaksa]

Hi, can you make a tutorial on how to implement a network chooser dropdown on the frontend, e.g. to switch between Ethereum and Polygon or Binance Smart Chain?

[ShmojiCodes]

If connect button isn't working, make sure you are on Ethereum Mainnet! This tripped me up a few times. I'll make a video for creating a network switcher eventually

[jordanasghar]

ChainIds simply refer to a valid EVM chain. Examples would be ethereum mainnet, Rinkeby, Ropsten, Kovan, or L2s and sidechains like Arbitrum, Polygon, Optimism etc.

Each chain has a numerical ID, so mainnet is 1, Polygon is 137, for example

[TBOON-dpde]

Thank you very much! This's very helpful indeed.

[shrinathpadave]

Awesome tutorial please make video on that complicated way..

[تشيكيكرتونبالعربي]

How can I get this code?? I would like to add it to my website... Thank you for this amazing tutorial

[harisalkarni]

this is really helpful, Thank you great content

[zayaansiddiqui]

I'm learning blockchain dev from Technoblade. This is great.

[SingleWingAcademy]

Great video, keep up the awesome work!

[clamhammer]

ALL of this functionality can be achieved only using ethers without react and your code is a LOT more straightforward and maintainable. It's all in a single js file. Remember that sometimes, react is not the right decision. It's easy to fall in love with a library and that clouds the fact that you may not need that library to build something quite simple.

[eternalgaming]

what if i had my own website ? how do i connect metamask with mint button

[sneakywalrus_]

How does this know you are connecting with MetaMask? What if you have 2-3 wallet chrome extensions installed, which one would it select?

[adekolaopeyemi]

Hello bro using the tailwind css to style the metamask button seem to be a problem cause vscode identifies my code as error can you help

[ugurcanborihan]

Can you do a Video for the same case just with react native for iOS?

[tothebit]

hello, ive seen that with your approach it connects automatically to the site without prompting the metamask extension. Is there a way to achive this? I've only seen docs with typescript D:

[cephasdaniel]

Hello, I make use of webflow, and I'll like to connect my metamask wallet for payment.
do you have any idea how to go about this?