Web3 Tutorial Project | Build a web3js dApp for a smart contract
Вставка
- Опубліковано 12 вер 2024
- In this project-based web3 tutorial we build a completed dApp with a focus on how to build a UI for a smart contract, using the web3js library.
Topics covered include: the web3.js library, application binary interface (abi), NextJS, Truffle, deploying a Solidity smart contract to Ethereum and more.
Vending Machine smart contract tutorial:
• Smart Contract Tutoria...
This video is a rare gem hidden in the depths of the yt algorithm.. I wish I had found it sooner. Great video, very helpful. Way more helpful than a lot of stuff hidden behind a paywall. Thank you for your time!
Just started it and this comment is lit hope it's good as it seems it will be shall report back lol
what do u mean ?
Same thinking here! Great in dept video
It really helps me alot, i have lot of confusion regarding the integration but this video solved all my doubts. Thanks man and great work. Keep doing 👏👏
Fantastic video, thank you. To get the fund as the owner, I would have a withdrawal function. I would set it to have an optional _amount to allow the owner to take a portion of the fund (as passed via the _amount parameter) or all the funds by default.
fantastic am new to blockchain and have seen lots of videos that was so confusing but this my friend killed it for me awesome stuff and it's so clear, thanks so much for your time and may God bless you👍
Really, this is Best tutorial i ever seen on UA-cam.
Great tutorial, Thank you.
And the reason the purchase count was not increasing is because you were doing post increment(++). It can be solved by doing setPurchases(purchases+1) instead of setPurchases(purchases++).
Anyway thanks a lot for the tutorial, learnt a lot.😀
No bro, if you do in your way it will end up with assign value the to a constant error. This is the workaround `
useEffect(() => {
if (vmContract) getInventoryHandler();
if (vmContract && address) getMyDonutCountHndler();
}, [vmContract, address, purchases])
const buyDonutsHandler = async () => {
try {
await vmContract.methods.purchase(buyCount).send({
from: address,
value: web3.utils.toWei('2', 'ether') * buyCount
});
let _purchases = purchases + 1;
setPurchases(_purchases);
setSuccessMessage(`${buyCount} donuts purchased!`);
} catch (error) {
setError(error.message);
}
}`
So in my contract I keep getting stack too deep. Im not sure where its too deep at.
awesome, thanks, it worked here on my side too, yeee! The only thing I changed I cleared the dependency array for useEffect and values updated after purchasing.
Hello boss, I finally fixed the error. I love your channel so much. It is filled with so much knowledge and I look forward to following all the tutorials here to become a blockchain expert like you. Please I will need tips on how to send the ethers to my metamask account as the owner of the vending machine. Your reply will be greatly appreciated, thanks in advance
what a video!!...thanks for the information!!!waiting for much more tutorials....and pls don't stop!
thanks Sukirat!
@@BlockExplorerMedia when is the new video coming out…gassed up for it..lacking patience!!😁😁
hey Sukirat, I am doing a bit of traveling and taking a little time off so it might be another week or so. thanks for the support my friend!
@@BlockExplorerMedia ohk no worries!!
loved this video! Kudos for the old school alert btw! :D kudos
Thanks! Lol I still dust it off every now and then ; )
Super duper helpful dude!!! 🔥💯🙏🌹
What a great video, helps A LOT in the beginning.
Amazing video bro! Great job! On explaining everything!
great tutorial.
solid tech stack. feels good to have my powers back
Thanks man loved it!!
Very nice tutorial.... Need more tutorial.....
Great vid fam!
Really well done! Thank you.
Awesome tutorial !! Thank you!
Is there a github repo ??
Bruh... Amazing. Loved it
Thanks Syed...glad you liked it : )
ITS REALLY WORKED LOL THANK YOU DUDE
Great video, this helped me a lot. When I try to do a write to the blockchain, I get estimated gas can't be determined. I think because I need to do a APPROVE first? How were you able to write without approving the dapp to use your funds first?
Thank you very much. It's great job!
great job!
thank you for this!
This video is great! However Rinkeby is deprecated... I have used instead of rinkeby the goerli network and changed the chain id also but when i use truffle migrate i get like 5 errors including some npm_modules not working ... any fix for that?
same to me... got any solution?
Excellent
I'm having trouble with the truffle install if I copy your files for vending-machine file direct into my folder would that work or is there another solution ty very much I'd be lost without your video
you sir, are adorable.
hi mentor appreciate your way of simplfying the huge complex stuff to an easy way. i had a tiny problem when we creating the getinventoryhandler and the setting the value inside the state i am not getting my vlaue on the page while in the console its showing 100n any possible soultion ?
Love it!!
new sub
Thanks, glad you liked it!!
Amazing stuff. But i have an issue im trying to code along with you but when i create a next app i dont ger the pages folder
How did you resolve this - "
Property 'ethereum' does not exist on type 'Window & typeof globalThis'."?
so sweet of you
I would be grateful for a video explaining INFURA and why export METAMASK private key
can u share github link if u have uploaded it there?
I was following along until i realized rinkeby is not available anymore and truffle is basically deprecated and not maintained anymore. this was a bummer
good info anyway
Great, thank you！
Hello, I have followed your video tutorial smoothly. But at 39:30 minutes I can't find the ENDPOINTS : Rinkeby option.
Is there any other solution?
Thank you.
From where did you restocked the wallet to get more ethers?
I would love to follow the vid but I keep getting errors at "npx create-next-app vending-machine-app". Node JS is installed (and rebooted). Created a PROJECTS\vending-machine-dapp folder and ran OPEN GIT BASH HERE from inside the folder just like the vid shows. 7 npm errors stating various things like "no such file or directory". I don't know what else to do besides just try to code everything in VS Code but then I wouldn't have the other dependencies installed. Anyone?
new update, when you deploy the contract on rinkeby the HDWalletprovider format is not the same anymore as shown on the video that is why it may not deploy, follow the commented part in the file exactly to deploy the contract
Hello, thank you for your video ! Great inspiration !
I've got an issue to call the get method. In my javascript page I have created the {inventory} variable but nothing is displayed on the front page. ABI / ADDRESS and URL Infenora are well created and configured.
Even If I download your github project (by changing address and url) , I've got nothing ... :/
same here did u got any solution for this inventory variable issue ?
@@codewithxohii4987 No really sorry, I abandoned the project ahaha
@@codewithxohii4987 @lequent1682 any solution guys?
hey buddy did you got how to fix this issue?
In 46:30 how can we add a central database to this architecture? For example, to send email to the wallet owners when their favorite donut is restocked?
I am unable to run the rinkeby command
I am using the rospten test network via infura and get this error whenever I try to send a transaction using the contract.
Error: Returned error: The method eth_sendTransaction does not exist/is not available
Is it only rinkby that allows the eth_sendTransaction method on infura or do I need to do something else. I note that this video was made in Jan 2022 so I am unsure if there has been a change at infura since?
can u pls share the github code url
thank you so much but please help, I can't install truffle on my computer.
When I tried "truffle migrate --network rinkeby" I get the following error:
"Error: PollingBlockTracker - encountered an error while attempting to update latest block:"
I did some searching and even after changing https to wss, I get a different error:
"Error: Unexpected server response: 404"
The donuts are really pricey🤣
Awesome content, mate! Subscribed! Pleasee add timestamps, to make the video even easier to track...I can help you with stamps if you want. Let me know. Kudos to you!
Thanks and welcome! You're right I should start adding timestamps. I'll figure out how to do it and implement going fwd. Sure, any help on the existing videos would be awesome!
ethers.js didn't work for me, but now I know the basics so Im watching this as 2x speed xD
thanks for the video but can you please zoom more ? I couldnt code because that
Any github link？
Bro, really important question...Who's Zhenya? :D
Hey! anyone knows when we purchase a donut where is the spend amount going?
Great video! but how do you do a restock button?
Thanks! The smart contract has a 'restock' method that is callable by the owner, so you could create a button with a click handler that calls it. Something like this:
const restockHandler = async () => {
const amount = 100;
try {
await vmContract.methods.restock(amount).send({
from: address,
})
} catch(err) {
setError(err.message)
}
}
Or make the amount dynamic and pass in from a user input. Hope this helps.
@@BlockExplorerMedia Thanks so much for the response! I added the restock button and made it able to have user input. this is an amazing tutorial Thank You!
If you provide the source code, it would be great for us.
could I create this without nextjs and just use vanilla javascript?
Yes, you could even just use a single HTML file. The frontend framework (or lack of) is not important. I just usually use React or Next because it helps me quickly stand a simple site up.
for whatever reason I wasn't able to get the .env variables working for me, but I was able to proceed by just putting them in there directly (this is only for testing and private use)
Seems like I'm having the same issue, I'll have to try that
I think I may have had the same issue, did you omit the quotation marks around the strings in your .env variables?
@@cody_code I did not try that lol thank you
Hello, I have an error with deploying the contract : "Message: insufficient funds for gas * price + value " ; I am connected with an Ganash account with 100ETH. Please help, I am blocked
remove the gas property
@@krokadilly not worked
How you resolve it?
Great video, thank you so much for the content. I am having issues deploying my smart contract please can I get your assistance
sure - please let me know what specific errors or problems you're facing.
@@BlockExplorerMedia I am using windows and I cant install truffle on my computer. it is giving me errors
@@BlockExplorerMedia I have fixed the error. Will really appreciate it if you can give me a guide to receive the ethers as the owner in the smart contract. Thank you so much for this precious knowledge you have shared
You lost me at... 2:36 Git Bash Here . How is this achieved ?
greate job, pls share with me github repo
Can we talk, would love to collaborate on you helping us build a web3 dapp :) ?
Thanks BikeChainApp. I'm struggling to find time for side projects these days but if you wanna shoot me an email I'd be glad to take a look!
@@BlockExplorerMedia Will do! Where can I find your email?
@@BlockExplorerMedia email has been sent :)
Thank you very much, but still dont get why no one have created a visual smart contract interface creator
Excellent content, too bad I'm Brazilian and I don't speak English and UA-cam subtitles don't translate your speech, I learned a lot, but without the audio or translation, some steps are hard to understand
i install it but my directory does not get pages