How to easily create a Web3 Mint Website from scratch | React, Hardhat, Ethers
Vložit
- čas přidán 30. 07. 2024
- In this video we will be creating a simple Web3 mint website.
openzeppelin contracts:
import '@openzeppelin/contracts/access/Ownable.sol';
import '@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol';
import '@openzeppelin/contracts/utils/math/SafeMath.sol';
Description:
React: reactjs.org/
Hardhat: github.com/nomiclabs/hardhat
Ethers: docs.ethers.io/v5/
-----------
Chapters:
0:00 Mint Button Web3 Application
1:37 React, Ethers, Hardhat, and Web3 Setup
3:56 Writing a Basic Smart Contract that can Mint
11:41 Creating the Mint Button
19:40 Writing our Visible Elements
22:43 Testing our Mint Button Site
26:03 Web3 Front End Apps are Simple
-----------
Subscribe to my channel: / @edrohdev
for more algorithm explanations, tech discussions, and programming tutorials!
-----------
Hey there, my name’s EdRoh. On my channel, you will find common coding algorithms and/or interview questions (with explanations of course). I also provide tutorials and courses on other programming topics in Web Development including Javascript, React, HTML, CSS, TypeScript, Redux, Node, Progressive Web Apps, React Native, Flutter, etc.
No matter what level you are, whether you are already in the software engineering field, or are just beginning coding in bootcamp or being self taught, my first and foremost desire is to help you provide with the best teaching content and learning resource I possibly can. As someone who understands the struggles of switching careers, I hope I can help guide you into this difficult but rewarding journey into engineering. - Věda a technologie
Simple, short and sweet. Easily understandable.
omg please post more I've been trying to look for a tutorial like this.
very nice - short but loaded with useful content!
This was the best tutorial that makes it simple af. Thank you
I like your content very much. I usually watch videos at 1.75 speed to save time (programming vids) and I must say you sound real smooth at 1.75.
This is very good. Well paced as well.
Thanks! Love your tutorials!
Awesome tutorial!! Now I have plans for tomorrow! 🖖🏼👩🏼🎤
love it, very helpful!
Thank you so much! I learnt a lot from this tutorial.
Just finished coding along, thanks for the content
Thanks, this was really helpful!
This is very helpful. thank you!
Great tutorial 👍
u are a GOD
thx so much
Just wondering, why youtube ban smart contract making tutorials hahah, anyway amazing tutorial waiting for the next tutorial 🔥🔥
how do you claim the ETH, as the owner of the contract, from the transactions that people have made?
Can you tell me where the "setMintFunction" is defined which we are using in onClick?
After enabling the hard hat at 2:57 I try to install the dependencies but the option of yes or no doesn’t come up for me. What should I do
hi when i run npx create-react-app web3 it says success but it doesnt create any file can someone help ?
Estimate gas error ? Any solution
hey so i just got a quick quastion ,after i run hard hat and try to install the sample project, I run into a error saying it cannot install gitimore , gives me error hh16 saying it cannot run it on the file that i have (full-mint-site). what do you suggest i should try
add this to fix some errors in jsx scope for new react version
import React from 'react';
import ReactDom from 'react-dom';
at the end i got Compiled with problems: module ethers not found error how can i solve that even though i have installes the ethers module
Saw that in some of your videos you were going to type .tsx, did you try playing around with hardhat & typescript?
Maybe a dumb question. How can i create a real website instead of localhost? If i got my website project and create a pege with mint button, how to link the minting button to my website? Thanks.
How to pass costs??? T_T I got insufficient funds when trying to mint using none owners account
Would you please provide your source code, thanks?
Will this work for Cronos Blockchain? Cronos is apparently "EVM-compatible"...
You showed how to create a test button on localhost - can you explain how to connect to a personal website? maybe some files need to be uploaded to the hosting? or something else? I haven't seen any examples of how to connect to a live website, only localhost
how i can contact you?
Can you share the code here? it will be really helpeful!
Is it normal to get all those warnings when installing hardhat?
Please How can I add NFT prices
what is theme vscode?
How to use IPFS in it?
Excuse me Sir, i wanted to know wether i have to deploy a new smart contract only for the website or could i take the deployed smart contract for my NFT collection?
yes i have the same question
Everything worked but my window just shows „this is how you create a mint button“. Did someone solved this issue?
im getting an HH8 error :(
hi once we created mint button like end of the video how are we gonna design our whole website page?
You're gonna have to watch some tutorials on html, css and javascript. Or find a template somehwere.
So I absolutely loved the tutorial, just one question: after receiving the tokens from the mint, how do you associate those minted tokens with a jpeg? For example, when I have done other mints, it isn't displayed as a token in my wallet, but a label saying skull #113 or something like that. Do you know how to implement this?
would love an answer to this as well
hey matt, in this video i have not done so for the sake of video brevity. Depending on the platform, you want to use (ie Opensea vs rarible) the implementation might be different. but let's take Opensea for example, go to google and type "opensea metadata standards", click the opensea link and under the section "implementing token uri", should be some guidelines. Essentially you will have to create a baseTokenUri variable and create a function that sets this variable to the url to which your file is hosted. As with all things blockchain, it is a bit more confusing than it looks.
check out moralis nft tutorials - here Filip goes a bit more depth: czcams.com/video/tBMk1iZa85Y/video.html
Did anybody manage to complete this, because my React just leaves me with "This is how you create a mint button0", everything seems to be working, I have created and running the node, contracts is created, but website does not work :(
Same Problem, did u solved it?
just wanted to ask what is that symbol at 20:09
&& ?
anyone knows ?
yo man you should join our DAO( no just kidding
where is your Twitter account?
9999.9998 eth 😩🤯
its a testnet you clown king
Upload the code to a gist
What code editor is this? Looks slick
Visual studio code
holy s* dis roh from lbac?
Line 52:34: 'setMintAmmount' is not defined no-undef
Line 54:34: 'setMintAmmount' is not defined no-undef
I'm getting this and like 170 other errors
You spelled amount wrong
its supposed to be setMintAmount not setMintAmmount
for me only this is how you create a mint button zero nothing else pops up like the metamask wallet
Did you ever find a solution
@@thebepis712 i have not sorry
Did u found the solution?
Tutorial looks good , but pls teach us hardhat other basics first
thanks! for sure I can make some more basic videos of the tech here. it can be a bit messy with all the packages with Web3 but i can do more focused videos
If u have a second, i sent you an email
hey man great tutorial really loved it !! I came across this error that i cant seem to find the answer of :
THIS LINE : const response = await contract.mint(BigNumber.from(mintAmount));
Error: cannot override "_hex","_isBigNumber" (operation="overrides", overrides=["_hex","_isBigNumber"], code=UNSUPPORTED_OPERATION, version=contracts/5.6.0)
Do you have any idea of how i could fix this ??
same, cant figure this out
Just don’t use it, ethers said it is already inside