🔧 Master MetaMask Events! React & Web3 Integration Guide
Вставка
- Опубліковано 1 гру 2024
- Enhance Your DApp with Real-Time Feedback! 🎯
Join us in this essential tutorial where we explore how to handle MetaMask events effectively using React and Web3. Learn to keep your users informed and your UI responsive! Whether a user disconnects from MetaMask, switches accounts, or changes networks, your application will react flawlessly in real-time.
This video will guide you through:
Listening to critical MetaMask events
Updating the UI dynamically in React
Displaying alerts and notifications based on user actions
Perfect for developers looking to refine their DApp user experience, this tutorial is packed with practical tips and best practices.
🔗 Watch our related tutorial on connecting MetaMask with React and Web3: • 🔗 Quick Connect to Met...
👨💻 Access the full source code to follow along: github.com/dav...
Subscribe for more insights on React, Web3, and blockchain development. Don’t forget to hit that notification bell to stay updated with our latest content!
Check out the source code here!
This is a great video dotsol , helped a lot
Thank you for your comment :)
I really love this code. it is so clean and so so usefull. never seen like that. thank you for showing it. wating new videos!
Great tutorial, thanks!
Hey Dav, great tutorial! Do you know of a way to handle a user simply "disconnecting" from the site, as in not logging out of Metamask, but just cancelling the connection? And reflecting that instantly with useEffect? Been trying to wrap my head around this...
Hello and thank you for your interest in my video. You could check that the account array returned by the accountsChanged (from ethereum.on('accountsChanged', callback)) event is empty.
@@DavidBlockchainDev Interesting approach, I'll give this a shot. Thanks a lot for your reply!
Good Job, but what is the event for when a transaction is complete and an account balance has been updated. Would very much appreciate an answer to this.
Hello, you can get the account changed events as shown in the doc docs.metamask.io/guide/ethereum-provider.html#events
Hi Dav, thanks for the great videos - i need help / i want to create a connect button and once you click it will verify if you own a certain NFT in your wallet and only if you do it will reveal another function for example if you own a BAYC you can see a buy button after. is that something u can help with ?
Thanks a lot, this video will help to improve my code using Typescript, NextJS, Redux Toolkit.
Do you have a github repository when I could check the code during the video please ?
Hello and thank you for your comment, here it is github.com/davdotsol/react-and-web3-demo-app/
@@DavidBlockchainDev thank you, see you soon on the blockchain 🙌
This helps me lot, thank you so much. Also how to set some network default and force to change when log in
Hello and thank you for your comment. I'll show how to set default network in next videos coming soon.
Do you know if its possible to get event when I receive some amount in my wallet ?
Hello and thank you for your interest ), you could set up event listener for 'pendingTransactions' and filter these to identify transactions that are sent to your wallet. Check it out here for the event listener web3js.readthedocs.io/en/v1.2.7/web3-eth-subscribe.html#subscribe-pendingtransactions
Hello, How do you disconnect from web 3 ( not from metamak)
Hello Dav and thanks for this clear and clean video.
I just have a comment, regarding the handleAccountsChanged and handleChainChanged methods, just to make sure I understood correctly.
In handleAccountsChanged, you retrieve the account information in the web3Accounts variable, but you never use it, you use the accounts variable that you pass as parameters. If I understand your logic correctly, we should remove the parameters, and only use the web3Accounts variable which contains the new information ?
And, in handleChainChanged, you pass chainId as parameters, but never use it, so I think we can remove this parameter.
The purpose of my comment is to be sure to understand correctly, not to point out an error ;) Thank you again for the tutorials !
Hello and thank you for you comment, you should use the account variable parameter.
@@DavidBlockchainDev so, what is the use of the web3Accounts variable ? I tried the two solutions (using accounts and web3Accounts) and they seems to both work...
It is an unused variable that I should clean from the code.
@@DavidBlockchainDev thanks a lot for your video, it has been helpful for me :)
What video would like to see next ?
How can I get in contact with you ?
can you teach us how to do a website as pre sale ?
Hello and thank you for your comment. Next coming videos might interest you for that.
@@DavidBlockchainDev thank you so much and waiting you
ghost code.