Building a Full Web3 Mint Website for Beginners | React, Hardhat, Ethers, and Chakra

hey guys this is ed rowe today we're going to be building this mint website from scratch where you can fully mint through a working smart contract and we'll do all the styling to get your website looking like this we're going to be using react ethers and hardhat along with some other useful plugins that will help us guide us to build this fully made website right let's get started so here i am i'm in a new directory and i am in a code editor called visual studio code but you can use whichever code editor you want and the first thing we're going to type is npx create react app full mint website create react app is a package that allows you to build all the necessary boilerplate to create react apps and it's very convenient very easy to use all right and then from here we're going to go into the folder we just created and we're going to open that up into a new window and as you can see we already have a lot of these files created but before that we're going to be installing a few things and we're going to start that with npm i dash d hard hat by the way you're going to have to have node installed if you haven't you can go to the node link in the description below to install node if you haven't already and here we're installing hard hat which is a very convenient package that allows you to do a lot of the blockchain stuff like deploy your contract compile your contract and it sets up a lot of that boilerplate for you and with that installed we're going to run a command called npx hard hat and we are going to create a basic sample project by hitting enter enter enter and enter and this will install a lot of the boilerplate that will help us create a web3 application a lot of these packages allow us to develop a lot of the things that we are going to need for our minting website and once that's installed we're going to install just a few more things we're going to first install something called open zeppelin contracts so this helps us import a lot of open zeppelin standard contracts which are very useful for our minting smart contract okay and the final thing that we're gonna install is actually kind of optional but it will help us do a lot of the styling that we'll need for our website and we're going to be using something called chakra as you can see here this is a component library that allows us to use pre-built components that makes our lives easier when it comes to styling and some of the functionality there are some trade-offs but i will get to that when we get there and first what i'm going to do is i'm going to copy this line this website you can see in the description below as well and then you can just copy whatever this is and then just paste it into our terminal and we'll just wait for that to finish and with all that everything is fully installed and we can finally get started with our coding so the first thing we're going to do is we're going to go to our source directory this folder is going to be holding a lot of the files that is necessary for the website but first we're going to just go and click some of these files as i as you can see here and we're going to be deleting them because we do not need them and then we can go to index.js we're going to delete report web vitals as well as this comment below save that we're going to go to app.js and we're going to delete the header over here because we don't need that as well as the logo that we're not going to be using right after we clean that up we're going to go to contracts and we have a greeter.sol file this we can actually just delete and we're going to create a new file and the nft name that we're going to call just for this demo app is going to be called robopunxnft.soul so in this file this is our solidity smart contract so this is what's going to actually appear and be saved into the blockchain and the first thing we're going to do is write spdx dash license dash identifier and you can just say unlicensed now these license identifier is basically a lot of legal stuff depending on what you're trying to build then the first thing we're going to do we're going to do pragma solidity and we're going to choose 0.8.4 so this will choose the version of solidity that we want we're going to use 0.8.4 in this case but you can choose any version that you want with this and then we're going to import some open zeppelin contracts so we're going to import at open zeppelin contracts slash token erc 721 erc 721 and this will import our contract that we can use for minting and this is a very convenient contract and it's a standard because it's a very secure contract that can you can reuse and we can inherit and i'll show you that in a few seconds but we're also going to import a few other things which you're going to import opens up in contracts and this one is going to actually be from the axis folder and this one's gonna called ownable.soul so this will allow us to define functions that only the owner can use all right after we import it we're gonna create our contract and we're gonna call it robo punx nft is erc 721 and ownable so these two things are what we imported over here and this is this contract is going to be inheriting from these two contracts giving us a lot of base functionality that we can base our contract from and then from here we're going to create a bunch of variables so these are storage variables so the first one we're going to create is a mint price storage variable just note when you're using these storage variables they are what can cost your contract a lot of ethereum so if you use these willy-nilly you're going to have issues with a lot of high cost so you have to be very careful when you create these storage variables you really want to minimize the amount of variable creation as well as variable changing as you need to because this is where a lot of the costs come from but anyways we have to define some of these storage variables because we are going to need them so we're going to have a total supply over here we're going to create another uint 256 public max supply so these variables by the way are uint256 so these are basically numbers there are different versions of uint but for now we're just going to use 256 which is 32 bytes but that's the main storage you want to use for the u wins to be safe so mid price is going to be the price of the mint total supply is going to be the current number of nfts while you're minting if there was 10 nfts that were minted the total supply would be 10. whereas max supply is the maximum number of nfts that will be in the collection so we're going to specify that to be a thousand but we'll come to where we specify that initially and then we're going to have max per wallet so this will determine the number the max number of nfts a specific wallet can mint and this helps distribute the number of nfts to more people as opposed to one person minting maybe all a thousand of them and that's usually not good for a collection all right and the next thing we're gonna create is a bool which is a boolean which is basically true or false and this is going to be is public mint enabled this will determine when users can mint so the owner which is going to come from the ownable contract is going to be able to toggle this to be true or false and this will allow mentors to be able to mint and then we're going to create another string called base token uri so this is very critical if you're using something like open c this will determine the url of which openc can use to determine where the images are located and then we're going to create an address and we're going to create it called public withdraw wallet we're not gonna code um the ability to withdraw from this wallet but this is how you would uh withdraw the money that goes into the contract using this particular wallet and this is how you retrieve the funds and then finally we're going to create a mapping and this is going to be address and we're going to set it to uint 256 and this is going to call a public variable with wallet mints as the variable name so basically this will determine and keep track of all the mints that will be done so this is very important i've mentioned in previous videos where if you track by the balance of the number of mints in the wallet is very bad you can watch those videos but this is so we can actually keep track of how many each wallet has minted so they cannot mint more than the maximum specified and from here we're going to create a constructor function with this constructor function is the function that gets run at the beginning of the contract creation so this will always run when you first initialize the contract or deploy it and then we're gonna pass in erc 721 over here and we're going to pass in robopunks and rp so basically erc 721 this contract takes in two arguments one of them is the name the other is the symbol and then from here we're going to initialize our variables so 0.02 ether like this the reason why we don't initialize over here is because this is very very slightly cheaper but it's not a big deal either way so total supply is going to be zero because that's where we start and then we're also going to set this to be max supply equals a thousand and then from here we're gonna set max per wallet equals three and now i'm gonna leave a comment you can set a withdrawal wallet address so you're going to have to specify what this withdrawal wallet should be and then the next thing we're going to do is we're going to create a function and we're going to call it set is public mint enabled i spelled that wrong make sure you have that capitalized and we're going to pass in the boolean is public mint enabled and we're going to put an underscore so the reason why we do this is to specify that this is actually an argument and we don't want to get confused with this versus this so you don't have uh naming clashes but this is a convention that i use so you can use whatever convention you want and we're going to make this an external function and we're going to pass in an only owner modifier so this is actually coming from the ownable contract and this allows only the owner of the contract to be able to call this function and in this case the owner is going to be the same as the deployer so that's what the owner of the contract is going to be set to by default it's going to be the deployer you can always change it ownable has some functionality where you can change from the deployer from the deployer being the owner to some other wallet if you wanted but we're going to keep it like that for now and we're going to get is public mint enabled and we're going to set it to is public mint enabled with the underscore so basically this allows us to change whenever this happens so we're going to set that to true or false so if it's false no one can mint but if it's true we're going to allow someone to be able to set that to true and then someone can mint for sure and then from there we're going to create a function called set base token token uri and we're going to pass in a string and we're going to use something called a call data this is similar to the memory variable if you are familiar with that but basically this call data allows us to know that this is just going to be red and we're going to pass an external and this is also going to be only owner we only want the owner to be able to call this function and we're going to pass in the base token uri and we're going to set that to the base token uri being passed in so by the way this is again like i mentioned before this is a url of where the images are going to be located and from here we're going to set focus function token uri and we're going to set uint256 token id underscore and you're going to public view override and we're going to return string string memory um get rid of that semicolon so this function actually exists in erc 721 so yeah so the base token uri consists of the url that has the images but the token ui is actually the function that openc for example calls to grab the images and by default token uri is a function that exists in the erc721 and it's already defined but if you're defining your base token ui over here we have to override this function and be making sure that we're calling the correct variable so that openc has a correct url to call so for example we're going to require exists token id to make sure token id like that make sure that token does exist so we're going to have an error check if it doesn't and then from here we're going to actually return a string abi dot encode pact and we're going to pass in base token u r i strings two string token let's get rid of all these and we're gonna pass in token id and then comma dot json because we're gonna use using a json file for this scenario and that's pretty much it this should be strings so basically if you take a look a lot a lot is going on over here but basically what's happening is we're taking the url that we identified we're grabbing the id and placing it behind the url and attaching.json to the end of it so this allows openc to grab every single url of the images it's going to call token uri for each token and that's how your images gets displayed on openc and finally we're going to have one more function this is the last function we're going to create and it's going to be the withdraw function and this is gonna of course we have to make sure only the owner is able to do this so no one else can withdraw and what we're gonna do is gonna look a little funky and we're gonna first identify bull success and put this in parentheses and we're going to say withdraw wallet.call and we're going to pass in brackets value address this and then after this we're going to put dot balance and from here we are going to pass parens with quotations like that and we're going to say require success withdraw oops withdraw failed like so so it's a little funky of what's happening but basically we're grabbing the wallet we're calling it which is a low level function but this is essentially how you want to grab funds and we're going to pass the value of the address which is this contract and we're going to pass in the balance and we're passing in empty so there's no data so basically this is what allows us to withdraw the funds to the address we specified with withdraw wallet and from here we're grabbing the success value that returns from this and if it's a success we're going to keep going but if it's not a success it's going to pass in the error withdraw failed and this is going to revert so just this is just a fail check just to make sure that this correctly worked and that's pretty much it for our smart contract it's a little this is bare bones for sure but this is the basic functionality that you would have and the last thing we're going to create aside from the only owner one is actually going to be the real mint function so to start off we're going to create function mint uint 256 quantity and we're going to pass in an underscore to identify as an argument and we're going to say this is a public payable function so payable by the way is any ones that require a value transfer of ether so you always have to specify that for any type of function that does that all right so the mint function is probably the most important part of the nft contract and this needs to be very well audited and make sure that you have all the right checks in place so people don't abuse this because this is the most valuable part of your contract so the first thing we're going to do is we're going to add a require statement and we're going to say is public mint enabled and we're going to make sure that it needs to be set to true before people are able to mint and that's the purpose of this require and then from here we're going to have another require and we're going to say message.value and it's going to equal the quantity times mint price this is another check but this one is to make sure that the user is inputting the correct value or else if they don't put the correct value they're going to be able to mint at the wrong at different prices that you did not specify so this is just multiplying the quantity by the mint price and making sure the value is equal to that and if that's true we're going to go to the next required statement and this is going to be total supply plus quantity underscore and we're going to make sure that that is less than the max supply because if it's not we're going to error out and say it's sold out to make sure that the max supply is not exceeded and then finally we're going to have a require statement and we're going to say wallet mints and we're going to put pass in message dot sender let's spell that correctly and then we go quantity underscore and it's going to be less than max per wallet and we're going to say exceeded max wallet if that area so this like before it determines the number of mints that a wallet can do so this will make sure and keep track of the count and the quantity of the wallet and you need this you cannot go by balance up because if you do balance up they're going to mint they're going to transfer a cell and then they're going to mint again that's a very abusive way and this renders max per wallet useless if you do the balance of so this is a way to make sure that doesn't happen and finally from there now we can actually perform the mint and we're going to say u n 256 u i equals zero i is less than quantity underscore i plus plus so we're going to loop through this is where we're going to actually do the minting so the first thing we're going to specify is unit 256 new token id equals total supply plus one so this will keep track of our token id we're basically grabbing the total supply and adding one to the to specify the latest the token id that we're going to mint and then we're also going to specify total supply we're going to increment that and finally we're going to run safe mint function message and we're going to pass in message.sender and the new token id all right so there's a lot going on let me explain so safe mint is a function that exists within the erc721 since we inherited we can actually call it and we just need to pass in the address that's going to receive the nft and that's going to be message.sender so basically the person that calls this function and we're going to pass in the latest token id because that's what this function requires and then there's also we have to make sure we increment the total supply to keep track of it correctly and just to note that you should definitely do a lot of this changes before you call the interactions so this is called the check effects interaction pattern which right here is an effect and you always want the effect to happen before an interaction so effect is any time you're changing any kind of variable in the storage so you want that to happen before you interact which is something like this function so that you're preventing something called a reentrancy attack this is very important in this case they probably wouldn't abuse this if this was afterwards chances are they probably wouldn't do that because it's not very useful or it's not very profitable for them but just to be safe you want people to 100 percent not be able to abuse it and this will do just that and just a side note this is erc 721 um there's a azuki nft they created something called erc721a which is a little more gas efficient when they're when someone's minting multiple nfts if it's if they're only minting one it doesn't really matter but basically azuki nft just does this in one go they specify the quantity so they're not having a loop and that's how it saves some gas costs so you can take a look it's pretty much the same idea and there you go that's pretty much it for this uh smart contract there's a lot to it and there's a lot of like subtle things it's not as much code as you would write for front end but every code needs to be solid and make sure that you do not make any mistakes because if you make any mistakes this is going to go very sour from here what we want to do we're going to save this and we're going to go to scripts and go to this file and what we're going to do we're not going to erase everything but we're going to erase all the comments and from here we're going to go and we're going to select this option so that we only select the ones that are capitalized and we're going to call this robo punx or has to be capitalized robo punch nft and then from there we're going to select all the lower case ones and we're going to write robo punks nft but lower case a starting lower case and we're going to save that we're going to remove this string because we are actually this is relevant to the constructor variables we are not passing anything in here so that's why we don't need to pass in anything there and we're going to save this but we're also going to rename this to deploy robo punks and ft just to be consistent with the naming now we finished all the coding for our smart contracts but there's going to be some setup for us to deploy our smart contract and we're going to deploy it on something called a test network for ethereum so we are doing this because if you deploy your contract on the real mainnet ethereum network it costs actual money or basically a theory real ethereum that you need so we're going to deploy it to the test network and the one we're going to be using is called rinkeby so we're going to go to any browser and make sure you have metamask installed and from there we are going to choose the rinkeby test network if you don't have this network you can add it over here or you can go and check in metamask and you can click this button go to settings advanced and you can hit this this should hopefully open up rinkeby into your network but you can search if you can't find that and here as you can see i have some ethereum loaded so this is a fake account that i've created and you can create any account as many accounts as you want and use fake ethereum in these test networks to do so and the way you get fake ethereum you can't it doesn't automatically come loaded with fake ethereum you have to go to something called a faucet and in this particular link we have the rinkeby authenticated faucet and you can grab some ethers from there you've got your test net into your wallet the next thing we're going to do is we're going to set up an inferior account so this is a blockchain node provider and it's equivalent to alchemy as well which is another alternative but i have registered an account on if you're already and that's why i'm seeing this dashboard so once you have that set up what you're going to do is we're going to create a new project we're going to select ethereum we're going to call this test and we're going to create this so over here what you can do or what you see is a lot of values the main thing that you're going to be choosing is rinkaby over here and we're going to have this particular endpoint that we can copy don't use the one that i'm using because i'm going to be deleting this project after this video is up but you want to be able to create your own and copy this value as well and what you're going to do is we're going to go back to our project and we're going to create a new file and we're going to call it dot env this dot env is already ignored by the get ignore file so when you push this up to a repo this is not pushed up because this is how this will have all the sensitive information to your project and you do not want anybody else to be able to see a lot of these values because they're very important and we're going to call this react app ring can be rpc url and we're going to call this what we just copied from the website and then the next thing we're going to do is we're going to go to etherscan they have an api key that we're going to be using to verify our contract for later use what you want to do is going to be you're going to be signing in and you're going to go to a section called api key and then the api key you're going to copy the value that's given to you and i've already copied mine and i'm going to write it over here react app after scan key and we're going to pass that value in now you should do this on your own again this is something i copied and i'm going to be deleting this before this video goes up so you want to be able to copy your own value all right and then the last thing that you want to do is we're going to go and go to an any account and we're going to go account details and we're going to export private key so this is very very important i mean if you're just creating an account and you're doing this for development purposes and you're not going to use the wallet for anything else it's not a big deal but definitely you don't want to show your private key as much as you can so this is going to be used so that we can actually deploy the contract so this is the wallet that's so that's going to be handled as the account that will deploy the wallet and we're going to create one last thing private key and we're going to add over here i'm not going to write it right now even though it's a test account for my own safety i'm just going to keep it secret so i'm gonna i'm gonna change this all to single quotes i don't know if that really matters but that's how i've done it and you want to copy your private key over here and you definitely don't want to show that to anyone now that everything is set up for the env file what we're going to do is we're going to open up the terminal and there's something i forgot to install and this is going to be the dot env package and we're going to do npi d which is dev dependency and we're going to put dot env there and we're gonna install that once that's installed we're gonna add a few things into this file and we're gonna pass in const.env equals require dot env and we're gonna initialize it with env.config parentheses so this allows us to actually use the emv configuration and then from here we're going to go down to the module exports and we're going to pass in a networks property and we're going to go and create an object we're going to call this rinkeby pass in that url and we're going to be using our env file that we've created and so we are going to use react app rinkaby rpc url to be safe you can copy the values but i'll keep it like this for now and then accounts and we're going to pass in process dot env dot react app ring could be rpcrl but we're going to replace this with private key underscore private key and then from here you're going to make sure for this next one we're going to put it outside of the networks property i keep doing that but you want to put ether scan outside of this network's property and we're going to copy this section to make it easier and we're going to pass an api key and we're going to pass in what we've copied after scan underscore key so all of these configurations allow us to deploy the contract onto afterscan and the rinkeby test network and verify it afterwards now that we have everything set up we can run a few commands to actually deploy our contract we're going to run npx hard hat clean and then mpx hard hat compile so this compiles our contracts and then we're going to run npx hard hat run scripts and we're going to run the scripts that we actually wrote robopunksnft.js which is this file right here and we're going to choose our network and it's going to be rinkaby like so and this is this line right here is actually going to be the con the line that's actually deploying the contract into the test network and so we're just going to wait a few seconds for this to run and here we have the contract address so now if i go to ether scan and i don't think it's already up yet but it takes a few seconds yeah it's going to take a few seconds so i'm going to wait until that happened okay and now that we see it i made a mistake before i was actually on the regular mainnet ether scan you need to go to the rinkbytes network after scan you can search that up on google and that's where your contract address will be deployed now that we have the contract address deployed on the etherscan test network we can look at the contract over here we can see that this is byte code and this is not human readable code so we want to be able to verify this so the way to do verify i mean we need to install another package npm i slash d and we're going to pass in nomic labs slash hard hat dash ether scan so this allows us and gives us the verify command for the hard hat package and what we're going to do is we're going to add a require statement while we wait for that and we're going to pass in at nomic labs slash hard hat other scan last thing we want to do is run the command to verify our contract so we're going to run npx hard hat verify slash slash network rinkaby and we want to pass in the contract address so we can go back here copy this address that we have already deployed and paste it in here and give it a few seconds oh sorry this was not saved so make sure you have the hard hat config file saved and then we can rerun it alright cool and then after that we have successfully verified our contract then if we go here and then we're going to refresh it now we can actually see the contract we've created and we can also read and write on the contract so read is just a way to see what values that you already have so max supply for example is a thousand you'll have to connect your wallet but this is how you can call your functions that exist on this contract all right and then from there what we're going to do is we're going to go into our source folder and we're gonna do a little bit of setup and what we're gonna do is if you take a look here in the artifacts folder we have this json file and what we need is this abi basically we won't be able to reference this because it's outside of the source directory it's just how hard hat is configured so what we're going to do is we're going to create a new file in here we're going to call this robo sorry new file robo punks nft.json and what we're going to do is we're going to go over here select all and we're going to go into robopunxnft.json and we're going to place everything that was in there with all that setup out of the way now you can see that i have an assets folder this assets folder is in the link in the description below so go down there download it and put it into your source directory so this has some images that you're going to be using for this project and then before we dive deep into writing our code i want to show you how react kind of works and how we're going to split our website so if you take a look on our website or the final finished product we don't have this yet we can see that we can segment our application into several parts so one is going to be separated into the nav bar and then this main section right here in the middle we're going to call this main mint section and then everything that has both of these is going to called app so if you know about a little about react you generally want to separate your ui or what you're seeing on the website into several distinct components that you can organize so it helps with both organization and reusability and that's the purpose of react it's been a long time coming but we can finally start coding our website so the first thing we're going to do is we're going to import use state from react so this allows us to use different elements of state in our components and i'll show you in a little bit what that can do and we're going to import main mint from a main mint file we're going to be creating this shortly we haven't created this yet so we're creating these components and we're importing them a little bit and from here we're going to go and we're going to const accounts set accounts like so and we're going to use use state so if you're new to react there's something called hooks in react and this is use state is a type of hook what this allows you to do is that any visual elements that change anything that updates in the ui due to some kind of button click or some kind of update of information in this case it's going to be like the accounts like their wallet address gets updated you use state to update the address and you can configure it so that anytime this value changes react will know to render the right elements and components all right and then from here we're going to encase this with parentheses and what we're going to do is we're going to add a few components and we're going to add in nav bar and we're going to pass in accounts like so and we're going to set accounts like so so what this is actually doing if you're new to react again is that this is prop drilling we're passing accounts and set accounts into this component so that these components can use the same state that you've created and we're going to do the same thing for main mint we're going to copy this and pass all those values in so that we can use these accounts through both of these components for that we're going to create our navbar component there's a new file into our source directory called nav nav bar and then we're going to put ts or actually js so this will be the component for the nav bar and we're going to import react from react like so and we're going to create const nav bar equals accounts set accounts so like i said this is prop drilling this is how you pass in state from the top component note that this is in parentheses and there's a bracket within all right and then from here we're going to create a variable called is connected so this will forcibly turn account 0 into a boolean so account zero is going to be the address of the wallet that's gonna come back in and then we're gonna set that to a boolean so this will detect when we're connected versus when we're not connected and we will use that to render specific components and then from here we're going to create an asynchronous function and we're going to call this connect account like so and what we're going to do is going to pass in if window dot ethereum so basically when you're using metamask metamask injects the application with window.ethereum so when that exists we can check and grab the accounts that come from the metamask so we await window.ethereum.request and we're going to pass in method f request accounts like so so this will give us all the accounts that exist in the metamask wallet and what we're going to do is we're going to set the accounts to accounts so basically back in app js we're going to update the state so whenever this particular function happens and when we call this function we are going to update the accounts all right and then from there we're going to return and we're going to create some elements over here and we're going to pass in a div and we're going to be splitting this into several components we're going to have the left side of the navbar and this will be the social media icons this is just a comment so we can organize our code properly facebook div twitter we're gonna actually put the images later on but for now we're just gonna have a placeholder and we'll do all the styling at a later part and then right side we're gonna have sections and connect and then we're gonna have about div mint div team and then finally we have the connect button and the connect button requires a little bit more logic and so what we're going to do is we're going to check if we're connected so basically what this is going to do is you're going to check if you have the accounts connected we're going to show something different depending on this boolean so basically if we're connected to the website we're going to show just a basic element that shows connected otherwise if we don't have that we're going to be showing a button and the button will if you click it we're going to run the connect account function that we've created so basically if we're not connected we're going to run this button we're going to run connect account that will give us the account and then the accounts will be updated to actually have a value so it is connected will turn true and once it turns true we are going it's going to say it's the website is connected and then if we take a look what we're going to do is we're going to run the server now that we have the nav bar out of the way we're going to create a new file and we're going to call it main mint so new file main mint.js so now we are creating this particular component that we've specified earlier so from here we're going to import a few things and we're going to import use state again from react and then we're going to import ethers and big number from ethers so we haven't talked about ether's library but this is a very important part of building dap this is a package that allows you to connect to the blockchain very easily and this has a lot of utility functions a lot of functions that help you connect to it make your life easier i'm sure you've heard of web3js so ethers is just an alternative of that ethers is more of the industry standard now and people are trending towards ether's js so i recommend using ethers if you have not already used web 3. all right and then from here we're going to import robopunk's nft from the json file we created earlier so this will allow us to grab the abi which is something that allows us to connect to our contract using the json file that we've created all right and then from there we're going to grab the robopunk's nft address and this is going to be the address that we've originally specified or sorry not this one but this particular contract address so we need to specify the contract address somewhere so we can use it all right and then from there we're going to create the main mint component and we're going to pass in accounts and set accounts like we've done before with prop chilling and we're going to pass this in const mint amount set mint amount so we're creating more state use date and in this one this is going to determine the number of quantity that the user is selecting to mint so it's going to be that value that you saw in the final build with the number of mints that the user is going to mint so this can be updated via set mint amount and we'll cover it and it starts with one that's how this value and that's why you specify this to be one and we're also going to get is connected again we're going to pass in boolean accounts 0 like so and we're going to use it for similar reasons and we're going to create another async function and this one's going to be called handle mint so this one we're gonna do window.ethereum and if the user is connected or has the metamask logged in we're gonna create something called const provider equals new ethers providers dot web 3 provider and we're going to pass in window.ethereum so it's kind of a mouthful but basically this provides a way for ethers to connect to the blockchain and it's just a initial setup so we can actually use it and then we're going to create a constant signer variable and we grab provider get signer so anytime we want to make an actual transaction like handle mint you need a signer something that signs the transaction because that those are the ones that actually you know involve actual money or ethereum to run and then finally we're going to create a new contract our new ethers contract and this will actually be where you have to specify your actual address so robux and the address and then we're going to pass in robux nft.api so we pass in the address at first and then we're going to pass in the abi of the json that we are using and then finally we're going to pass in signer so all of this is necessary so we can actually use contract functions and then we're going to create a try catch block these are just ways if any asynchronous options or if we try to run this function or anything all the logic inside of this fails then we're going to have a catch just in case and it'll tell us that we've encountered an error like so and we can pass in whatever logic we want here and then in our try block though we're going to have const response and we're going to await the contract.mint and we're going to pass in mint amount so and then we're going to console log the response like so pass in the response like that so essentially what this is actually doing is we're going to call the contract actually so now with all this passed in we can run this particular function over here mint and we're going to pass in the quantity as if we're just running a regular function so we're going to go back here we're going to look at this and then the response is whatever is returned from it the response doesn't really matter but we're just checking if we just got the response and the main thing to know is that we want to pass in a big number instead of a regular number from javascript because solidity requires us to have this as a big number for us to use all right and then from there we're going to create a few more functions spare with me we're going to have handle decrement and this is the function that will be run when we click the minus button for the mint amount and we're going to have a if check right here so that if the mint amount is set less to negative one or sorry less than one then we're gonna return we're not gonna do anything but if it's within one or if it's above one or equal to one we're gonna set the mint amount like so mint amount minus 1. so this will just handle the button that decreases the value so it'll decrease this value as long as it's minimum of one and we're going to do the same thing we're going to copy this but we're going to handle increment and we're going to set this to be a max of 3 and what we're going to do is we're going to increment it instead like so and we're going to return and from here we're going to do our usual javascript or jsx which is just html in a specif specific format for react and we're going to pass in h1 robopunks and then we're going to pass in the paragraph tag and we're going to write some text it's 2070 this can be whatever you want but can the robo punks nft save humans from destructive rampant nft speculation mint robopunks to find out right and then from there we're going to check if we're connected again and if we're connected we're going to show something different if they're not connected as well so we're going to start with the div like so and close that div tag and we're going to have another div close that div tag and we're going to do a few things we're going to actually add the button and this one will be handling the decrement like the function that we've created before and we're going to pass in a minus value and then we're also going to create an input of type number and we're going to give it the value of the mint amount like so and then we're also going to create the increment so we're going to do that by copying handle increments and we're going to have a plus button instead and then below all this we're going to have another button and this one will be handling the mint so we're going to mint now like so so that will take care of running this particular mint function and then finally if we're not connected we're gonna have a simple paragraph tag that says you are not connected yet actually you must be connected to mint all right so once we have that set up oh and i've forgotten one thing so we want to export default main mint like so so we can actually retrieve that and import so this part is necessary so that you can import as well and we need the same thing for the navbar right so now we have basically the setup of the website so we're gonna do npm run start in our terminal and we're gonna be running our website just to see what we have give it a few seconds as you can see we have everything that is set up for the final layout but this is as you can see doesn't look that pretty doesn't really have any styling whatsoever and that will be what we'll do next but this provides all the functionality everything that we kind of need so if we connect we can see that we've connected and that's because i've already connected to the website but if you're not connected it'll show a login page for yours so if you do this login refresh the page we connect you're going to see this pop-up happen and log in and once we wait now you can see we're connected we can go up and we can go down with a maximum of three and minimum of one all right now that we have all the setup and the structure laid out for our website now we can go about styling our website to make it look nice so we can go and we can go to our app.js and we're going to add a few elements here div class name equals overlay and a lot of this will be necessary so you can add some classes for css to style our website and then we're also going to give another div i'm going to give it another class name moving background like so and this will be used for the background image so we're going to go into our app.css and most of what we have is going to be some stuff that we're going to be deleting so we're going to go app header app link we're going to just delete everything below this same with the media and the app logo so we don't need most of that and the first thing we're going to do is we're going to import some google fonts so we're going to do at import url https fonts google apis.com css so we can actually create a few font families here you can pick a lot of this up from the google website and these are all free to use as long as you import them you're pretty much good to go and i'm just going to copy this last one same exact thing v2323 these are all like pixel type fonts these are the two free pixel fonts that you can use from google but you can always of course create your own or find another one whatever you want and once in our app we want to specify font family to be using these two like so comma v2323 like so and we are going to set the color to be white so our fonts are going to be white um and we're gonna once we have a background it'll be better and then we're gonna set this as star we're gonna make everything box sizing of border box if you're unfamiliar with it this is essentially a way so that all the css is defined in the specific way where the padding is defined in the width um you can probably look it up and if you're unfamiliar with it but it's not a big deal so then we have a body and we're going to set overflow to be hidden so we don't have any thing left over and then we're also going to have overflow or overlay and we're going to set a bunch of settings over here so we're going to have opacity and we're going to set that to 0.85 with 100 and we're going to set height of 100 and z index of 10 top is going to be zero left is going to be zero position is going to be fixed the reason for this overlay is because the original image in art is a little bit dark and it's also kind of not fitting together but this overlay provides a little bit of a gray overlay and it makes it look way better and then we're going to have a moving background and this is where we're going to input the moving image background that you have so this will basically be a gif that you want to use but the recommended approach with this is not to use a gif but to use multiple layers of images that move and there are specific articles you can search online to do it this way to do it that way because that will be way more performant but if you use a gif the file size is pretty big so it can kind of slow your website down but because the images i got which is from like a free pixel vector website that you can just grab for and this is just since this is just for demonstration purposes i just put a gif instead and plus this video is getting really long so i'll keep it simple in this situation and we're going to pass in assets background parallax like so background gif like that and we're going to say background size of cover background repeat no repeat like so background attachment fixed and background position 40 40 the reason i've already done the css and that's why i'm just writing it down um i'm just copying it from what i had but a lot of this was trial and error and then you just kind of kind of see as you can see we already have a lot of what we want to be set up we still have to worry about maintenance and navbar which we'll get to in a sec but we already have the moving background it looks pretty good already from here we're going to close these two tabs we're going to go to navbar and we're going to be importing stuff from chakra so we install this all the way at the beginning of this tutorial but these are component libraries that make everything very convenient to style and it's up to you if you want to use something like this to make your life easier but there's so many options in terms of styling and some things make it easier but you might get into a point where you have decision fatigue because there's so many options of how you want to go about different component libraries or you can go just do plain css or you can use different css packages like bootstrap a lot of different options but anyways we're going to import all of these things from chakra ui so these are all pre-made components that we can use and we're going to import facebook so that's basically this image in this social media icon so we're importing these assets social media icons facebook 32x32x.png so this will provide an image for the facebook icon so instead of having this facebook text we're going to be having an image for it and we're going to do the same thing for the other two so we're going to copy and then paste this is going to be twitter and then this will be twitter and this will be email technically this would be discord but there was no free discord social media icon so i'm using email instead all right and so once we have that we can change this one to flex so flex is a way to align things properly and as a convenient way as opposed to just using regular flexbox where you have to create components and then you have to create the classes as well but using chakra you can directly add all these in the jsx code instead of going to like a separate file like we've done and added adding these classes so it's nice convenient way to write three picks 30 pixel actually this should be 30 pixel like this so with chakra ui a nice thing is that you can specify the css classes directly inside while you're writing jsx so you don't have to jump from file over here and specify the classes we're going to have the flex just realize with this the only problem with this right now in this type of situation it doesn't it's not too big of a deal but note that if you have a lot of these classes or a lot of these css styling you might run into an issue where you're dealing with really messy code from here i'm going to start just pasting a lot of the code that i have justify space around with 40 and then padding and what i'm going to do is i'm going to pass in inside here instead of instead of what i had before i'm going to pass in a link like so so if you take a look we have a reference to just facebook but this could be whatever url that you want and we are going to wrap it around an image of the facebook icon that we just imported and a lot of these extra flex provides the opportunity to move your icons around in the proper location if we go here i'm going to remove this as well and i'm going to copy and paste it's exactly the same thing as facebook with just different reference as well as the source image so if we save this let me go over here we can see we've already have it laid out horizontally because of this flex box and this flex creates another flex separate for this versus this one this one's very different as well and that's over here and so with that we're gonna do the same thing for them and we're gonna have a flex box around that as well so i copied a lot of this this is space around and then align center with 40 padding um we can just have that as 30 pixel and then below we're going to have we're going to replace this with several things called box so box is just a way it's just a div element but we can write the styling right there here so margin of 15 pixels on the left and right side is what this is saying so it provides a way so that there's spacing between as well as the spacer stuff provides a convenient way to do so and then once we do that we're gonna cut that out we're to cut the connected part out and we're going to move it inside this flex because that's part of this guy over here so as you can see it kind of aligned correctly now we have the connect button as well and right here we're going to change this to a box so we can add a margin as well here to give it a little bit of more margin if we're not if we're connected but this button we're going to do some extra stuff because we want this to style and look good so what we're going to do is we're going to start writing some of these styling like background color actually i'll just copy this and paste it here now if you take a look i'm setting a background color to this is like an orangey red color that fits nice and then we have a border radius of 5 pixel making the edges of the border round and we have a little bit of a box shadow so we can pop up a little more we set the text to color white we're going to get the cursor to pointer when you hover it and then we inherit the font family because the font family doesn't get inherited in the buttons correctly and then the padding and margin as well so now if you take a look it looks like this looks very nice and it matches with the colors of the background so a lot of trial and error in regards to that we finished styling our navbar let's go to the app or main mint in our main mint we're going to import of import a few uh what was it component library or components from chakra ui as before we're going to copy and paste this instead what we don't need is image we're going to change that to input because we need that one and we're going to remove these two and we're going to put text like so and with that we can now go to our components and we can start modifying the styling that we have so again i don't want this to be just me writing code for styling because it's always going to be different depending on your application so i don't want to spend too much time we're going to use the flex again so this properly formats and aligns our thing just realize flexbox is very important to css if you're new to it it has a bit of a learning curve but it is very critical to know and then from here we're going to create a box like so and we're going to wrap everything around it so that everything has a width of 520 pixel and then from here we're going to create a div around this and we're going to surround it with this section so this section has a div around it and then we're gonna pass in text for h1 for robopunks like that and this will allow us to customize the text so we have a font size of 48 pixels and we're adding some shadow behind it so it pops out a little better and then we're also going to add another text around this guy but we're going to add a few more we're going to change the font family we're changing the letter spacing we change the size and has it has its own text shadow as well and we're going to make sure to replace the p tag now if you take a look we have some of the text that we want in the right format now if we go down we're going to go is connected and we're gonna go into this section with the div i'm gonna replace that with the flex over here and for the button we're gonna we're gonna have quite a bit of styling but a lot of this styling is going to be copied to the other buttons as well so if you take a look here we have quite a bit of styling again we change the color the shadow the radius cursor a lot very similar to the other button we created with the connect and we're going to copy and paste this essentially except it's going to have the handle decrement like so so we're going to copy and paste this background color with all these values and they're essentially the yeah they're exactly the same except this handle increment versus decrement and then finally we're going to have some of the same stuff for input but it's a little bit different this is going to be read only so we don't want to be able to type we're going to inherit the family with 100 pixel height text line and all this other good stuff and then finally we're going to change the button to be of the same styling now i'm going through this fast i know i'm copying pasting but this is essentially a lot of trial and error and it depends on your design you're gonna have to modify it depending on that so if you take a look now if we connect you can see that we have the buttons all working it looks really good and the last thing i want to do is have the text for this particular section and then if you refresh you can see you must connect to mint and you connect it now you can see that okay that was a handful we have buttons these are buttons that go here we are not going to do about mint team because this is a very long video already so this would you would have longer page you would be able to scroll down as well and you can connect that to the bottom or the other parts of the page as well so now we have all the styling done we can go connect and if we try to mint nothing happens and that's for a reason so what we needed to do is go back to our contract on etherscan we go to our contract and if you notice remember we have a is public mint enabled right now it's set to false by default because that's how we configured it so now we need to connect the wallet that deployed this contract so you have to make sure the account that deployed this contract is the one that's connected and that can go over here and we can set that to true once we have set that to true you're going to get a transaction estimated gas fee we're going to set hit and we're going to view our transaction and we're going to be waiting for this to finish now once that function is finished we can try connecting and try to mint and we realize this this actually doesn't work and that's because i did forget one last thing and that is if you go back to your handle mint function we under contract mint you need to pass in a value and this is going to be ethers dot utils parse ether and we need to pass in the mint price and we're going to pass in 0.02 times mint amount so the number of mints that you want to use and we're going to convert it to a string so whenever you make a function call to something that requires a value or requires an ether amount you need to make sure to pass it that in as a value so now i'm going to save it now if i go here now i'm going to try minting2 and we can go and it works and now we can confirm it and confirm it and there you go that's pretty much it so once that transaction is finished you'll be able to see your nft and it's fully successfully minted to your account and there you have it that's a full minting website with a full mint contract everything's there we've done the styling that was quite a bit and hopefully you picked up something that was helpful for you um despite all the packages and steps that you have to go through you have fully built a decentralized application ready for use and ready to mint like comment and subscribe if you like this comment and i'll see you next time

Channel: EdRoh

Views: 152,293

Keywords: EdRoh, mintcontract, nftwebsite, nft mint contract, Web3 website, Web3 mint, Web3 beginners, nft beginners

Id: ynFNLBP2TPs

Length: 70min 41sec (4241 seconds)

Published: Wed Feb 23 2022