Тёмный

Ethereum Dapp: Connect React app to MetaMask Tutorial 

Michael Couch
Подписаться 1 тыс.
Просмотров 37 тыс.
50% 1

Step by step how to connect a react app to MetaMask browser wallet. Tools utilized: React, MetaMask, and Ethers.js
code: github.com/mik...

Опубликовано:

 

2 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 83   
@hnsa3203
@hnsa3203 2 года назад
Funny how you just spent 17 minutes of your time and in turn saved hours for hundreds of people. This was a great help, thanks a bunch.
@josephangelodelosreyes4206
@josephangelodelosreyes4206 2 года назад
Thanks for this simple tutorial! Gives devs a quick overview on how to use metamask API.
@romulogonzalez739
@romulogonzalez739 2 года назад
you literally uploaded the most completed and up to date tutorial about react dapps.
@darwinprayoga
@darwinprayoga 2 года назад
yup i mean he the most catchy tutorial
@ride.withzero
@ride.withzero 2 года назад
Hi! Thanks a lot for thisa video, helped me so much i achieve to set up everything, but the balance won't show up!! Everything works good and fine but the only thing i miss is the balance.. Nothing different from your code :( Need some help
@rpWeb3
@rpWeb3 3 года назад
when do you have to start filming The Expanse again?? really looking forward to a new season!!!
@michael_couch
@michael_couch 3 года назад
Haha. I wish.
@kashifnawaz5830
@kashifnawaz5830 2 года назад
Can you please let me know how to make a minting website for NFTs?
@michael_couch
@michael_couch 2 года назад
Stay tuned! I'll probably do an ERC-20 first, then an NFT minter.
@investingthelike111
@investingthelike111 2 года назад
Hello say I am wanting to set up a website and people pay for shirts using meta mask , how can we link the metamask payment to the shirts purschased etc, so when someone buy a shirts can they send their payment with a note saying for this shirt is for bob fox from 123 Ford St New York, or do how would we know that they have paid and what for being the owner of the website, or would they have to enter their waller number when making the purchase , and we then just check our meta mask transactions that the wallet number has paid us the correct $'s
@thlfranklin
@thlfranklin 2 года назад
"show all the single steps" -- Thank you for that!!
@naumanshigri
@naumanshigri 2 года назад
thank you very much. very helpful
@princesinghchouhan5250
@princesinghchouhan5250 5 месяцев назад
exactly what i was looking for from past 2 days.. thank you so much for this tutorial.. this helped a LOT.. great and very easy to understand tutorial.. keep it up. you really helped me.
@Uncleee2222
@Uncleee2222 2 года назад
how to get other balance from different contract than eth ?
@vartotojas
@vartotojas 2 года назад
Could you make another part of explaining how to make transactions and get balance of custom token. Although this is the best video I've found so far, keep it up.
@michael_couch
@michael_couch 2 года назад
Yep, next upload will be basic contract interaction, then most likely a coin or NFT after that.
@sakshambisen3580
@sakshambisen3580 3 года назад
I need an advice on which ReactJs framework to use(I previously used NextJs) for Dapps(problem with NextJs is Dynamic routing(when user type URL directly on address bar))?
@michael_couch
@michael_couch 3 года назад
I can't really say which React framework would be best. This example utilizes the simple create-react-app boilerplate.
@carlossilva-ub4pv
@carlossilva-ub4pv 2 года назад
simple and to the point, I really liked the tutorial!
@parapadirapa
@parapadirapa 2 года назад
so... good tutorial BUT.... what about the ethers.js connection that you dais you'd do?......
@blankslate6393
@blankslate6393 2 года назад
Great tutorial. Please make more of react/solidity/metamask stuff. Love to see a betting dapp tut for example.
@thaer1367
@thaer1367 Год назад
very Nice , wating for an ICO website for presell ? BNB or Matic ?
@ferielbenali7823
@ferielbenali7823 6 месяцев назад
When i transfer the amount to an adresse the console show me rpc error :internal json rpc error what should i do ??
@RossPfeiffer
@RossPfeiffer 2 года назад
what happened to good ol' web3? I'm confused
@MsAtifMehmood
@MsAtifMehmood 2 года назад
Hi I want my users profiles login with meta mask wallet connect on website but they can see their profile like traditional signup login . How can I desgin the profile and login with meta mask . Like do I need to do traditional way to design user profile. But login with meta mask can you explain some .
@jonathanleon3126
@jonathanleon3126 2 года назад
Hey Michael, great tuto!!! How would you get information about the address owned NFTs from there?
@timothyhansen991
@timothyhansen991 2 года назад
i second this question
@timothyhansen991
@timothyhansen991 2 года назад
please let me know if you find an answer
@papacolor
@papacolor 2 года назад
Great vid, very informative. Thanks!
@michael_couch
@michael_couch 2 года назад
Glad it was helpful!
@vezga
@vezga 3 года назад
Can I say "I love you" because this is exactly what I have been looking for, just a way to build a button that connects to metamask.
@michael_couch
@michael_couch 3 года назад
Any other things you're looking for examples of?
@vezga
@vezga 3 года назад
@@michael_couch the entire front end process and interacting with contracts feels like an abstract to me. There aren't many videos on it it's as if everyone just gets it.
@zelenytypek
@zelenytypek 2 года назад
nice video but theres an issue with browsers on phones. just white screen with nothing on it
@olafnub-e2n
@olafnub-e2n Год назад
how does window.ethereum run without importing ethers.js?
@MysticxYl
@MysticxYl Год назад
Thanks a ton mate. Your videos are really helpful and interesting.(psst: You are a funny guy)
@QiuqiuVG
@QiuqiuVG 2 года назад
Great tutorial. Where is the part of ethers.js part?
@reflectreflex7612
@reflectreflex7612 2 года назад
Me and my friend are working on using crypto to fundraiser and we have a dapp tenplate that already was coded we got from a good friend. It is already set up but it already had a wallet adress to receive. If I change that to our sdress and release the fundraiser will it work? After i downloaded the site and everything was pre-installed do I need to edit anything else?
@TheNodeKillProtocol
@TheNodeKillProtocol 2 года назад
Great tutorial, thank you so much for uploading this 👍
@mayursamrutwar560
@mayursamrutwar560 2 года назад
Hello Michael, thanks for the video. Can you please make a video about how to log in using metamask?
@shishirtiwari4112
@shishirtiwari4112 2 года назад
Just a quick tip i figured out after implementing this on app ,put that etherium listener inside useEffect and run it on mount so you dont have multiple listeners on rerender
@mehdibehzad9821
@mehdibehzad9821 Год назад
Great, i have question, How do i ask ?
@CryptoPapsOfficial
@CryptoPapsOfficial 2 года назад
Thanks for this tutorial.
@suyashshakya7167
@suyashshakya7167 Год назад
any method to disconnect from metamask?
@Notpenguin4649
@Notpenguin4649 2 года назад
Thanks for the tutorial ! It's very easy and helpful.
@michael_couch
@michael_couch 2 года назад
Glad it was helpful!
@bernapolat1881
@bernapolat1881 2 года назад
Great tutorial, thanks! But how can I keep wallet connected after the page refreshed
@kirill632
@kirill632 2 года назад
you don't need to use --save when installing packages, only --save-dev when installing for dev
@ramichehab4797
@ramichehab4797 2 года назад
Thank you for your video but I think there is an error with time 9:37 I got `onClick` listener to be a function, instead got a value of `string` type.
@RoyceDuong
@RoyceDuong 2 года назад
awesome tutorial, thank you for putting this together!
@notavi78
@notavi78 2 года назад
Why was ethers js installed?
@Banksy_said_hi
@Banksy_said_hi 2 года назад
Thanks for your video!
@silver2132
@silver2132 2 года назад
New to Reactjs, following your steps and it works perfectly. Waiting to see the next tutorial regarding doing transcations. Thanks Michael.
@michael_couch
@michael_couch 2 года назад
Thanks for the feedback! In this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-swZRo6LFrCw.html , I talk about contract interaction with ethers.js. I'll put out an ERC-20 video though that will specifically handle an ERC-20 transaction through a react front end.
@silver2132
@silver2132 2 года назад
@@michael_couch Thanks Michael!
@mayursamrutwar560
@mayursamrutwar560 2 года назад
How to disconnect the metamask wallet from the website?
@akiratoriyama1320
@akiratoriyama1320 2 года назад
Great video!! Thank you very much!!!
@metinilkbahar2801
@metinilkbahar2801 2 года назад
Very informative!! Much appreciated.
@okpain8324
@okpain8324 2 года назад
the best tutto i saw in youtube Good teaching
@ismoilshokirov
@ismoilshokirov 2 года назад
It is a really cool tutorial, thank you I've got just 1 question, should I move window.ethereum.on('accountsChanged', accountChangedHandler); window.ethereum.on('chainChanged', chainChangedHandler); to uesEffect hook? or it is okay to use it inside function body
@chefc3023
@chefc3023 Год назад
yea so it doesnt run over and over again
@jayzhou9637
@jayzhou9637 2 года назад
Amazing tutorial sir thanks for sharing
@Supercool7042
@Supercool7042 2 года назад
thank you for this tutorial !!! i learnt a lot..........
@ngocthachho4525
@ngocthachho4525 2 года назад
does it work well on the mobile browser?
@jeffreyxu2029
@jeffreyxu2029 2 года назад
great tutorial
@Vineet0k
@Vineet0k 2 года назад
Thank you so much for this. Can you do one with Angular?
@GurpreetSingh-yw3hb
@GurpreetSingh-yw3hb 3 года назад
Good Job
@michael_couch
@michael_couch 3 года назад
Thanks for the feedback!
@CavanMitchell
@CavanMitchell 2 года назад
Thanks, straight to the point :)
@heronlancellot
@heronlancellot 2 года назад
Top!
@massinskendoul9640
@massinskendoul9640 Год назад
dfdf
@ninjagaskin
@ninjagaskin 2 года назад
cool! thanks for the tutorial
@sakshambisen3580
@sakshambisen3580 3 года назад
Great video bud!!
@michael_couch
@michael_couch 3 года назад
Appreciate the encouragement
@FTWkangaroo
@FTWkangaroo 2 года назад
Great Tutorial, thank you sir
@goodtimesbradtimes3625
@goodtimesbradtimes3625 2 года назад
Thank you. Very helpful
@KaranSingh-ly4dv
@KaranSingh-ly4dv 2 года назад
how can i disconnect the wallet ?
@david-dong
@david-dong 2 года назад
keep going bro ! love it
@GavinBlog
@GavinBlog 2 года назад
how to disconnect ? Thank you
@samjam7546
@samjam7546 2 года назад
Brilliant! Thanks!
@benjaminantalfia9067
@benjaminantalfia9067 2 года назад
Extremely helpful, thank you so much
@michael_couch
@michael_couch 2 года назад
Thanks for the feedback!
Далее
Stop Using Create React App
10:22
Просмотров 337 тыс.
Connection MetaMask to a ReactJS Web App
30:20
Просмотров 7 тыс.
How To Increase Performance in React Apps
14:19
Просмотров 26 тыс.
Web3 Authentication with Python & Moralis
18:04
Просмотров 6 тыс.