How to Connect your Smart Contracts to Metamask | Full Stack Web3
HTML-код
- Опубликовано: 1 июн 2024
- We learn exactly how web3 / blockchain / smart contract applications work in the front end using HTML and Javascript. We then go through 6 different ways you can connect your Metamask, Phantom, or other blockchain wallet address to your front end. We’ll look at popular Nextjs / React packages to make your development lifecycle 100 times easier.
💻 Code: github.com/PatrickAlphaC/full...
✍️ Article: betterprogramming.pub/everyth...
NextJS: nextjs.org/
⏰TimeStamps
0:00 | Introduction
0:59 | Disclaimer
1:29 | What's going on in the front end with wallets
6:57 | Coding Setup / Intro
9:01 | "Raw" HTML & Javascript
30:38 | NextJS & Ethers
44:48 | NextJS & Web3-React
55:10 | NextJS & Moralis
1:02:20 | NextJS & Web3Modal
1:07:45 | NextJS & useDapp
1:09:45 | 100k subs update...
1:10:13 | Outro
Check out these articles to learn about some of these tools and start your journey as a smart contract engineer!
👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
📕How to Become a Blockchain Engineer: betterprogramming.pub/how-to-...
✍️Top 10 Resources, Tutorials, and Follows: dev.to/patrickalphac/top-10-s...
👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆
✅✅ Donate ✅✅
I use donated funds to spend money on making fun & informational videos.
ETH/Polygon/Avalanche/EVM Chains Wallet address: 0x9680201d9c93d65a3603d2088d125e955c73BD65
😸😸Join the community!😸😸
Chainlink developers discord: / discord
Twitter: / patrickalphac
Medium: / patrick.collins_58673
TikTok: / patrickalphac
Twitch Stream Uploads & Shorts: / @patrickalphac-alt
Twitch: / patrickalphac
All thoughts and opinions are my own. 
Развлечения
The way you make things easier to understand is amazing Patrick. Thanks Man🔥Loving your tutorials❤
Thank you. Thank you. Thank you. You gave simple answer, and clear explanation. Save us from researching and testing
Your teaching is very clear and straight to the point, i love this video thanks
Glad it is helpful!
You're doing God's work with these tutorials, love them! Thank you for all the great content!
Man this stuff is amazing
I am really amazed by this guy's way of teaching, certainly the best example for how development educational content should be
Thanks a ton!
Glad it's helpful!!
I learn so many things from your video every day and I found you are one of the best developers of blockchain right now
Happy to see more video from you
Those fast-forward sound effects brought me back to my childhood haha. Thanks for the great (free!) content Patrick. You're awesome.
You are awesome Patrick ! Have been going through your Foundry based course & came here for the Front end lesson. I must say I feel more confident about Front-end development after going through this video.
awesome!!!
Great tutorial, I was looking for one like this.
WWoowww Loved it!!! Thank you Patrick!
Thank you Patrick for making us smarter 🤩
Thanks Patrick! Great tutorial. Very helpful!
Thanks for watching send me a direct massage for something profitable 👆📩❤️
I am not even halfway through and i had to pause just to compliment your teaching style! Love how i am able to understand everything
Thank so much!! Glad it’s been helpful!
Thank You sir for providing Knowledge 🔥❤️
Thanks for watching send me a direct massage for something profitable 👆📩❤️💯
Thank you for making this video tutorial love you bro
Really needed this. Thank you !
Thanks for watching send me a direct massage for something profitable 👆📩❤️
Hey Patrick, I am eagerly waiting for your JS tutorial in web3. Gonna be lit!!!!
You know it
Patrick! You da maaaan!
Thanks for yet another awesome vid 🚀
Another 16 hrs tutorial 🤩🤩 let me guess I think next tutorial will focus on javascript, hardhat and ethers.js.
Thank you Patrick sir because of you i can able to make some good web3 projects.🙏
Thanks again for giving this tutorials for free.
It is :)
Glad it's helping!
You are awesome Patrick! Thanks a lot for what you're doing!
It would be great to know what's your favorite way to connect?
@@betzabesp94 typically you can follow me on Twitter @patrickalphac or on LinkedIn!
@@PatrickAlphaC I mean, What metamask connector do you prefer? hahaha (if any). -But I'm already following you on twitter-
@@betzabesp94 oh…. Ahahahahha. My bad.
I like moralis hooks or web3-modal myself
thanks from China, your video is gonna change my life!!
Have fun!
love from China, great thanks
How 😮...Is youtube not banned in china? 😅
@@galibkiyaadein4627 haha, I guess over 100 million people in China know how to ignore the ban and search for anything we want
Very nice. Thank you.
wow this is perfect timing 👌
Thanks for watching send me a direct massage for something profitable 👆📩❤️💯
I made my first actual dApp using your metamask connection codebase, thanks!
Yes yes yes!!! Congrats!!!
I really wanna be like Great Patrick Collins in teaching. Please do add Great to his name😀
PATRICK THE GOAT!!!!!!
men we need your js 11h tutorial ! amazing content.
Soon fren…
Your free contents are changing our lives patrick!,But yeah i will still ask for another 16 hour video when you reach 1M subs :D
Woah! You have a lot of confidence in me to hit 1M subs!
Glad the content is helpful
great video dude
Awesome vid. Thx!!
Saw you at the hackathon!
Patrick you the best outthere
damn, u sure are a blessing sir, thanks!
Thanks for watching send me a direct massage for something profitable 👆📩❤️
Nice content.
Any preference between moralis / modal / web3-react?
Awesome video Patrick!
I think I'm starting to like moralis more and more, but whatever you like works. They are starting to create more and more hooks and even UI components.
Legend!
Amazing tutorial! just a question: you mentioned that without wrapping app.js with "Web3ReactProvider" we should re-connect in every page, but in my idea it's not totally true, we should just send back a prop with the state of the connection... Not so polished for sure, but feasible, isn't it? Or maybe I'm missing something?
You could do that! But context providers make it a little easier.
coding tutorials: you come from part way through a 32 hour tutorial where good ol Patrick says "if you haven't seen this, go watch this". then inside THAT 1 hour video you get sent to another video xD
oh Patrick. have mercy!
Oh just you wait till you get into web3 as a dev
Thank you Patrick for this course!!!
I am wondering what is the difference between using browserify for ethers+"raw" javascript and the method you use for the fund-me-app in your 32hr solidity-js tutorial?
Which one is more conventionnal? Thanks again
Browserify is my "hack" for making front end code more "node.js-like". A lot of front end people got mad at me for that, so I made it more front-end-like for the 32 hour course.
In any case, you'll likely be using a framework like react for production code tho!
@@PatrickAlphaC Thank you! Everything is great so far, I love it
awesome
Ah yes, the final piece to the puzzle before I can finally complete my project and start applying for jobs. Patrick, I owe you a drink.
Just remember me when you make your millions ;)
@@PatrickAlphaC Rest assured, a Lannister always pays his debts.
How has it been? Got a job?
Had opportunities, got cold feet and shot myself in the foot. Even in front of the man himself last year @@lightyear3429. Now I am aware of what imposter syndrome is. Still grinding. Thanks for asking.
Nice! Wish I had this tutorial one year ago! What's your advice for someone stuck with Drizzle, which has been quietly discontinued? My dapps are working fine, but I have a constant feel that I should migrate out of it asap.
I got something for you coming out soon ;)
@@PatrickAlphaC that's great, but if it's going to take a while, can't I just have the Name of the Thing I need?
@@StudioAvante you could look at ethereum-boilerplate by the moralis team or scaffold-ETH from Austin Griffith
is there a way to do all this without nextjs or react?
can someone build a frontend in JUST html & js or is this impossible?
thanks.
by only using web3.js?
@@deepwebtv I show you how to do that at the start of the video!
@@PatrickAlphaC Thank you. I'm just stuck on something. I will retry again. Sorry for the dumb question.
🏋🏋♂💪👊. Thank you
YES
hi Patrick! im stuck currently on yarn hardhat node, my pc doesnt seem to like the yarn command, is there a npm command that will do the same thing?
you could use "npm install" to install and then "npx hardhat node"
Can I deploy my nft marketplace contract when deploying the hardhat-simple-storage contract because i dont know how to deploy that contract in visual studio code.
Hi @Patrick Collins is there a way to use window.ethereum functionality from a mobile browser since u cant install metamask ext on phone ?
Good question… I’d have to double check. Could you ask this on stack exchange ETH or check the metamask docs.
🐐
Thanks for watching send me a direct massage for something profitable 👆📩❤️💯
I am speechless, an amazing video as always. Do you have an idea how can I build a staking dapp for erc721, using one the providers, I would like to show the metadata picture, and a drag and drop
Glad its helpful! And I do...but that might be a larger convo ahah.
I'm releasing a massive tutorial in the coming months that will show you how to do everything. Stay tuned!
@@PatrickAlphaC hello frogs!! :)
At 35:48 line 9 that is setIsConnected instead of setIsConnect.
Sir please reply why we can't move ahead with html file ? Is it necessary to use library like react or framework like next js ??... confused 😕.....one more confusion you used ether.js and I know web3.js should I go towards web3 or ether ?
You can use pure html, but a lot of projects want more tooling and so a framework gives easier flexibility to do "more"
If you are getting error in hardhat you need to add this to the solidity contract and restart hardhat node :
receive() external payable {}
fallback() external payable {}
weird metamask bug that it defaults to sometimes.
listen .5 speed he sounds drunk and makes the tutorial even more fun
could you do a video on the + and minuses in your opinion of each option? I am a good react programmer, spend most of my time in html/js/css professionally and looking for the easiest route.
I think nextjs + moralis hooks are the easiest - they have a great button you can press that auto connects you. I’ve got some more vids coming out soon.
Then, hosting on IPFS is dope
@@PatrickAlphaC i built a dapp for nfts but i now have a lottery type dapp in the work and am working thru the full course of yours. But if i can do it without react then it would i think be easier.. I also need to better understand smart contract security. Seems like easy mistakes will get it hacked. Thx for the reply.
@@stevendavies98 you can use raw html / cas, but I feel there are just so many good react tools right now.
I’m working on more security content!
@@PatrickAlphaC thank you for all the content.
Amazing video!! can you teach how to build a Dapp website how to lock a token for a period of time aka Timelock.
Soon fren soon
How do i connect the dapp in my domain ? And how i connect metamask in a mainnet? Thanks I'm learning a lot 🤓
You’d need to host your site to something like vercel, moralis, or fleek, or do it yourself with IPFS (or if your a hardo - your own server).
Look into vercel, that’ll be the right direction. To connect to mainnet, just change your metamask to mainnet
Whenever you use the terminal to do some stuff (yarn add ethers, etc), I'm completly lost and it doesn't work
But the video is still nice :)
Feel free to make issues or watch my debugging video to learn how to get past the errors!
Hi Patrick,
First of all thank you for your great tutorials. I was wondering if you can help me with a gas optimization question. Is there a way to contact you?
Usually it’s best to ask in public my friend! I get too many DMs
Hey Patrick with the web3 react provider, do files in the pages/api folder have access to the same context
They should… I’d have to dig back out my examples to verify
@@PatrickAlphaC usual I execute from the components but for this project I’m basically trying to access the window.ethereum from the pages/api/execute.js file which executed most of my smart contract functions.
@@PatrickAlphaC but I’m not sure if that will work since the window object is not exposed outside web browser and next components
@@thisisnotfinancialadvice3803 yep! we look at a work around to fix that
When trying to use the terminal and yarn to add ethers it says “command not found”. What am I doing wrong?
You probably haven’t installed yarn and/or nodejs. Be sure to check my GitHub repo
all hail.....{the little aliens from MIB } Patrick Patrick
10/10 comment
how do i run a second function im trying to copy another button and adding another function but it keeps running the first one only on both buttons?
Sorry for so many comments but I am getting an error for “Command hardhat not found”. Do you know what could be the problem?
yarn add hardhat
Hey very good tutorial ! But i have a bug . When the user don't have a provider like metamask, i got a blank page with the error : Error: missing provider (argument="provider", value=undefined, code=INVALID_ARGUMENT. It is possile to make a condition somewhere to prevent this error ?
Could you ask this on stack exchange ETH? Thanks!
Watch my how to debug video for context
Hi, would you help me pls,
I run in the command prompt: yarn hardhad node
in your folder: hardhat-simple-storage-fcc
as i was following your video tutorial, i got fake accounts and everything, but i didn't got SimpleStorage deployed at ... and the string. That is important and i can't move forward...
Could you follow this guide?
betterprogramming.pub/top-6-tips-to-solve-any-software-engineering-error-a794a162fcaf?sk=6a64ac6b056e6bc158ebe9eea72ea523
Patrick, I am trying to make the wallet still connected when refreshing. Because when you refresh it disconnects. Any help?
I have a video coming out on this soonish!
What about brownie? Can we build react/next with it?
You can!!!
So you'd use brownie to make your smart contracts, and then just use nextjs/react on top of it. I have an example here. github.com/PatrickAlphaC/defi-stake-yield-brownie
ahhahaha @0:12 hahahah haha
Thanks for watching send me a direct massage for something profitable 👆📩❤️💯
hey man i basically followed everything to a T, but i hit an error Error: contract runner does not support sending transactions (operation="sendTransaction", code=UNSUPPORTED_OPERATION, version=6.7.0) any idea how to get around it? love all the videos!
hmm... could you make an issue on the repo?
hi man how are you.this is a nice video.is it a way you can modify the script to delete or remove any contact calls you give permission to your wallet/
what do you mean?
@@PatrickAlphaC thanks for replying , but iihave already resolved my issue.my wallet was hacked and I was wondering if through python you can revoke a smart contract call by code
Hi Patrick, how are you able to acquire this much test ETH please?
This was a long time ago, I can’t anymore
For some reason I can't connect. I get the button, everything is correct in my code and I can't connect on the raw html/js
even when I download the code from your repository it doesn't work. I'm on chrome, dunno if it makes a difference
Can you make an issue on the repo? Thanks
Hi do you have a video on how to mine BTC and ETH with python code from A-Z
Thanks for watching send me a direct massage for something profitable 👆📩❤️
How to get metmask demo account with some ethereums for development?
Go to the chainlink faucet for link and ETH faucets.chain.link/
i have metamask installed in my browser but when i try to window.ethereum it shows undefined????can anyone help me
Check out my how to debug anything video!
Sir pls teach us lottery DApp with frontend
Thanks for watching send me a direct massage for something profitable 👆📩❤️
Is there a way to connect to wallets using Python? 🥺
Omg I love this comment.
Front ends basically run in javascript though... Im sorry. You can do some python stuff... but you'll have a really hard time if you do that
@@PatrickAlphaC What did I not do to see if I can get it working with Python, all options lead to an impasse. Thank you though 🙌🏾
my drilla
drilla my drilla
how do i set the amount to execute?
You'd want to do a form and pull the form into your executive function.
@@PatrickAlphaC thanks bro!
Very good explanation. Keep it up. I just send you linkdin connection req hope u accept it
Patrick! Please tell me how can you have 9999.9 ETH in your Metamask?
I’m running a local fake hardhat chain!
@@PatrickAlphaC Understand Patrick! Can you put here an Link to it?
@@eupasswood1402 It’s in the description!
27:02 Please stop using require in the frontend. Use import instead and get rid of browserify.
Thanks for this! Some of the module stuff can be a bit confusing… I’m always looking for the least friction way to do this. If I use imports, users will run into issues with understanding modules.
What do you think?
@@PatrickAlphaC I think, that it is strange to use a browser incompatible api, than 'fixing' it with something horrible like browserify. I don't see any way why it is a good idea to do so.
import is the browser api to load modules. There are no reasons not to use it.
I know you don't like Javascript (impossible to miss). But maybe you'd hate it a little less when you'd be using today's Javascript and not that from many years ago.
@@mv-experiments for the front end, I hate it less 😉
But thanks for the feedback! I'll see if it's easier for others to understand going right from node -> front end if import or require makes more sense to them.
@@PatrickAlphaC It's technically wrong to use require, or any other nodejs specific API, for the browser. Plain and simple. You do people a huge disservice to tell them to use it. Especially when they learn how much browserify prevents a modern, productive development experience.
@@mv-experiments hmmm. Thanks for the thorough feedback. Appreciate it!
Mackr dog,cat,bocin
hi Partrick! can you teach me about ethers.js?
Yes! FreeCodeCamp video coming soon…
@@PatrickAlphaC Thank you so much Patrick I made a portfolio after watching your videos. And I got to work for a blockchain company as an apprentice developer for two months.
@@woojin7009 OMG!!
Are you on Twitter?? I’d love to share you story.
@@PatrickAlphaC @simujin11
I have to upload images to ipfs using a hard hat and write JavaScript test codes, but I am struggling because I am not familiar with the JavaScript language.
Hi, when I run 'yarn browserify index.js --standalone bundle -o ./dist/bundle.js' after I installed browserify, there is an error ' Command failed with exit code 1'. I cannot transplie index.js into browserified next,js. Do you have some suggestions? Thank you.
hmm... I have a version of this in "raw" html/js instead of nodejs stuff. Perhaps try that? It should be in the github