Code a 10000 NFT Minting Dapp part 2

hey how's it going guys daniel here ak hashtabs and welcome to the second part in creating the dap to get all your nfts on openc [Music] in the first video i've showed you everything you can do to kind of have your whole collection stored on a space somewhere in the cloud getting the base url and then setting up the smart contract that will actually mentor nfts in this part we're going to set up the dap what you can do is head over to the front end based app that we've created before so you can go and copy it go to your favorite ide and go and type in git clone and paste it like that if you haven't seen these videos before where we deal with the front end dap i highly encourage you to do so because this i'm not going to go over anything in this dap um it's already set up and we've already discussed this in the canvas api dap that i created where you can upload your signatures or drawing to the blockchain that's where i go through this so we are going to literally just run this as is and then assume that you already have watched that video so that we can just do the hookup build the dap and then do the build so we can maybe publish it we have already published our smart contract on the blockchain and we already have a collection with 20 nfts or 21 nfts minted we now want to do the rest and we actually want to see if we can increment these 20 nfts to 21 or 20 22 25 whatever it might be but we want to see transactions coming in and doing that through our app and that's what we're going to be doing so let's go back to the code the next thing that we want to do is actually install everything so run yarn well first of all cd into your repository the base one or reopen it and then go yawn add all this will install all the dependencies such as truffle and also you'll need ganache cli installed which will also have to run just now just to get our local blockchain up and so that we can also deploy our smart contract on this on this platform as well so let's wait for this to all run and install and let me pause this video while this is doing its thing cool now that everything is running we can actually go and see if what we need to replace to make this work the first thing that you'll need to do is start up a terminal and run ganache dash cli this will start up a local blockchain just so that we can actually test our smart contract as well just by running it and migrating it to get the actual abi on our machine next what we can then do is go back to our browser go to the remix part where we actually have written the smart contract once we're in there then you can go and copy the whole smart contract as it is remember to include these import statements then go back to the code go to your contracts and we've got the normal migrations and then we also have the smart contract dot sold the smart contract.sol is just a generic smart contract that i've placed in here but what you want to do is you actually want to replace it all with our smart contract it might moan about the open zipline imports but don't worry about that because this actually is just a kind of how can i say an ide bug because once we move away from this or close these files it's gone um and as soon as we open them again they come back until you close the ide and open it again but it it would find these modules because open zeppelin does exist in our node modules so there it is perfect let's go and do that the next thing that we want to do is actually interact with our blockchain that's running here on the terminal so what we can do is just hit save so save this file and next we can say truffle migrate reset and once we've done that we should kind of reset over the base contract that we have here and in our source file in our contracts we should get the new smart contracts abis and so on that looks perfect the next thing that we want to do is just make sure that everything ran perfectly and it looked like it just deployed the smart contract without any bugs which is always a good sign so that is now running on our local blockchain and the next thing we can do is say yarn start this will start a development server for us and then we will see how the base dapp looks and what do we need to fix and change in order for us to create our dap so our dap is started when we ran yarn start and then it looks like this it opens up the browser with the localhost link and if we click connect let's see it says change to polygon all right so remember what we did the last time you have to set up your test network in order for this to run uh when you set it when you go to the test network remember to set up your custom rpc to point to the local development server that's running here so you'll be able to see that it's listening on these ports which we've set up before so just go and check the previous video like i said but we still need to import at least one account so i am going to go to my meta mask on the test network and i'm going to go and say import account paste the private key over there and then hit connect and we inside our smart contract and that's it we are ready to start the actual coding of our contract so let's just go back to our dab for now and let's go and build out some ui interface in order for us to to really make this look like a minta app what you can do is go into source go into the app.js and let's go and look at what we have so far currently we just have the screen with the name inside of it and this name it gets actually from the blockchain data we're going to go ahead and update that now and then we're also going to add some functionality to click on a button to buy let's go and do that seeing that this is not a front end tutorial even though i am a front-end developer and i can probably make this thing look a bit better than just the black screen with this white text we're going to keep it simple and you can run with that your imagination and go ahead and go wild for now i'm just going to basically duplicate this button and maybe put it below this title what we also want to do is just change the buttons text what it says and we're going to say maybe claim or what can we call this get nft let's say claim all right so claim nft um next because we're saying claim nft over there we can probably center this content over there right in the middle of the screen as well maybe this will just look a bit better so let's go ahead and do that just the side note here before i do that um you notice that i'm using these s dot text styles and spaces this is just my way of coding and i've set up this in a global styles file using styled components so this can just be normal divs and and css styling as well so just i wanted to point that out as well okay here i'm gonna say hey um hey grab this is so original all right okay cool grab one of the nfts okay that's pretty cool we can at least make nfts or caps um okay that's fine grab one of their nfts that's cool and let me go and space this out usually a rule of thumb and this is just that fyi when i do styling i like putting background colors on everything and the reason for that is because then i get to see exactly what i'm working with so i can see that this does cover the whole space so i can go back to my thingamajig over here my component and i can actually add the rest of the styling that i want for this to happen so for instance now i know everything will be in the center over here hey grab one of the nfts and then claim nft that seems fine to me so let's leave it at that let's take let's get rid of the pink background color for now and let's go and do something else so what i want us to do is i want to check out the styled button so that's fine let's go up here and let's go and add a bit of a bit of logic we have to add a use state effect in here and how we're going to do that is say const loading and the reason why we want to add this is we want to tell the user that something is claiming or load or loading so they can't do anything else right so maybe we can call this set or claiming right claiming nft that's fine set claiming in ft like so that's perfect we're going to use the use state and we're going to set this initial value to false perfect um that's going to be switching upon based upon what we what we do what we um when we claim it's going to switch out and then maybe we should just give the user some feedback so what i also want to then do is just duplicate this maybe put it at the top and let's say feed feedback and then here we can say set feedback like so and this feedback will just be maybe [Music] maybe it's your lucky day okay perfect all right so now let's go ahead and then do the rest of the coding the next thing that we need to do is actually set up the function that will mint these nfts now the function we've done before in a in the gaming tutorial but i'm going to go over this again a bit more in detail this part is crucial for this tutorial because this is the heart and soul of how we're going to mint these nfts okay so in our contract right if we look at our contract just for a brief second over there we know that our cost for an nft is 0.02 ethereum now we need to illustrate that because when dealing with smart contracts and sending transactions you're dealing with the way value not ethereum and whey is like the value with like 18 decimals um but we want to keep it to ether and i'll show you how to do that just in a second the second thing that we need to look at is when we are minting where is our minting function here it is so when we are minting we allow the user to mint more than one for this example i'm only going to enter one but what you can do is actually add a text field or something to ask the user to buy more than one maybe a few buttons to say by one two or three or five well we can maybe add that anyway so let's go and do that anyway um now that i think of it we can add that but let's go back to our app.js and code the rest of it so what i said is we need a function and this function is going to be called claim right claibnft's and then the claiming of t is what is it going to take we need to think about this so it's going to be equal to an anonymous function first of all and i think we can pass it in a integer so i think in here let's assume that the person is always going to buy for themselves but technically we can also pass in any address right but we're going to say this person is going to claim for the address that they land on the page with so the only variable that i want to accept is the amount of nfts over here okay perfect so once we have the amount there what we can first of all do it do is set the claim nft to true and the reason why we do this is so that after they've clicked on the function we can set our buttons to loading so that no one does anything else on the page so maybe we can disable them or something so we'll see about that just now after that we want to reach out to our blockchain now our blockchain over here has has the accounts on it and it also has the contract on it so remember our blockchain has the smart contract on it and we're going to be using the smart contract and say we want the smart contract.methods and then we want to say what is the method called mint let's just verify it's adjustment okay and min takes in two parameters so let's just copy that and paste it in just so we don't forget we need a two and then we need a an amount so the amount is going to be in easy that's going to be predefined for us from this function the two is also easy uh all we all we need to do is say the blockchain.account which is the current account that we are working with and then we have to do something interesting we have to say dot send now dot send can take in an extra object which is very important in this case we need to specify from who is this coming from so we can also say blockchain.account it's coming from us and the value because remember this is a payable function and we need to specify how much this is going to be now we can't just put 0 comma 0 2 i mean that would be lovely to put in and we don't have to worry about anything but technically what we would have to put in is we have to put some kind of value that looks like this and that's not ideal so what we can do is we can say let's use the blockchain dot web3 so our blockchain just to pause and show you this our blockchain reducer has a web 3 instance in it and web3 comes with a lot of utilities that you're able to use that makes life easier when working with the blockchain so you can say utools and then one of the utils is dot 2 way and it just makes it very difficult if the ide doesn't pick up everything but we need to now give it a value and then two way right so we want to say we want to take 0.02 and then we just specify ether and that's it so that's what we can specify and this is now going to be based on the amount so we technically have to say that times the amount i'm not sure if this should be string i can't see as well here but we'll find that out just in a second next what you can do is after you have say after you've said send this is a asynchronous call so what you can say is once there's an error let's catch the error first so if there's an error you can give it a anonymous function and then in this function we want to actually catch the error you can do something with this arrow if you really want to but the first thing that you want to do is actually set claiming nft to false something went wrong so we just need to set that to false and then here we can console.log maybe the the error just for debugging purposes you can also let the user know maybe we can let them know so let's say set feedback as well we'll set the feedback to erif just for now we'll come up with something nice in there in just a second and then what you want to do is say then so this is now going to be the receipt okay and then the receipt is going to do what so the receipt only comes once the blockchain has mined that block i believe so the first thing that you want to then do is also set this claiming to false because we're done with claiming okay and then the next thing we want to do is give the user some feedback um which we'll put in here for now we can just say success and then that's about it that's that's all we really need to do i mean we can now go and fetch the data from the blockchain uh we can do a bunch of cool things with this remember the blockchains at our disposal so we can probably show how many nfts are left how many have been minted all these cool things but for now i'm just going to leave it for this we might update this so let's just go down to our button and say that we actually want to call this so we are going to say claim nfts and i'm going to say claim one nft okay so let's say claim one we're going to pass one in there and then maybe yeah let's let's copy and paste this so i'm gonna put copy and paste this and say you can either claim one or claim five like so all right but one thing that we need to do is we need to disable this button and how do we determine this um this should be disabled if something is true so if the claiming nft so claiming nft i believe if it's claiming nft it's what it's one or it's zero i think that's how we can determine that but yeah we also wanted we also wanted over here if claiming nfc is one then disable or not so and also what we can say is in here we might be duplicating code here which is not nice you can probably make this into another component but we're just going to say claim nft if this if this is claim nft then we want to say brizzy claiming all right and if it's not so over there we're just going to do that and like so and that's what we that's the only thing we need is really to to communicate to the user what's busy happening i don't want to copy over that so i'm just going to cut this out and put this on the other button too that's beautiful these buttons are going to be right below each other so that's also fine i'll just put a space in between them and then i also want to put a smaller space so let's do that and then in here we're going to say give our feedback so there we go while i'm busy with this tutorial i mean if you guys want to see react tutorials just let me know because i love react and i can definitely teach you guys how to be very good at this framework um but anyway so let's go and and see if everything is hooked up everything looks fine we're gonna go back and obviously that looks ugly uh so we're gonna go back just for a second and change the feedback where's our feedback there's our feedback let's make a text title let's make it maybe text description i think i think i made the description a bit smaller there we go perfect hey grab one of the nfts maybe it's your lucky day claim one or claim five nfts let's go and claim one so this goes and pops up and it says okay cool blockchain smart contract is the method is not a function so this is where the debugging starts but that's cool right because it means it tried to do something so we're now going to see why is it not picking up because it should be picking up before we start debugging this and not finding any issues i just want to make sure that our migrations are correct remember that we do have all of these constructors that we also need to fill in otherwise nothing is going to work so let's go to our migration file and in here and this is where i think the problem lies is we need to kind of give a few variables in here in order for it to to work so you specify the smart contract and then we give it a name i'm just going to call it name just like you so it's easier for you guys to understand we're going to say this is the symbol and then we need the http okay this is just for me to do an example i'm going to go and close the program and run truffle migrate again just to verify that these things do go successfully on the blockchain so i'm gonna see there's a transaction and saving to block it looks fine it looks like it did migrate so um this time i'm pretty sure it should be there i'm going to now just start off the application again run yarn start and let's go and have a look um we can go back to the app js right now if this doesn't work but let's let's hope let's fingers crossed that this works so connect to the blockchain cool grab one of the nfts let's claim one and yes blockchain.smartcontractedmethod dot mint is not a function all right it's time for us to do the the dance all right let's go back um first of all let's go and see what do we call this we do call it the smart contract and that is what it's called over there the payload is being we get the payload over there we also make sure that these things go smoothly and technically it's deploying um what i'm going to do is an extra measure i'm going to remove uh delete all i'm going to remove all the contract data in there that way there's no possible way for us to to migrate not over those things so i'm going to migrate again and then hopefully this goes successfully through but then we need to kind of see yes you see there is a thing haha okay um let's read what this is it says could not find artifacts for smart contracts from any sources very interesting so oh there we go it's because our smart contract is called nft underscore token now what we need to do is maybe call this the smart contract if you have a different name on your nft contract you'll need to append it everywhere in this file in this repo but that's fine i just needed to get down to what was happening because i couldn't understand why nothing was working and i think it is that so i'm going to update that and let's see that looks much better there's our json and that also looks better so i think we're good i'm going to restart the application again and let's hope for some success perfect let it just load i think this is just the loading and the end result would be hopefully that we get to mint another one of these now just keep in mind that our image won't pop up because as you remember we only have 10 we only have 10 json files and we haven't uploaded any more so we need to do that um but let's just go back for a second to our app before we get carried away let's go and say claim and now it says please pass numbers as strings to avoid okay i think this is the error right and like i mentioned i did not think um that this would work so all we need to do is we need to say that times the amount dot to string so that should fix that error and we're going to run it again gonna say claim and there we go guys there's our there's our pop-up okay one thing over here it says insufficient fund that's fine because it's trying to come from our main account which is not a good thing i definitely don't want to pay for this so let's just make sure that metamask is connected to this account make sure that this account this test account that's running on your local blockchain is connected not your real account now i'm going to go and say mint nft perfect and i'm going to say confirm and there boom it's confirmed and it's successful and it's minted right it won't show up on this on this smart contract because remember that um the code that we are writing here is sitting on the local blockchain but now we can actually close this local blockchain um let's terminate that we don't need that anymore we just used it to test our functionality we're also not going to use these smart contracts up there anymore but you do keep them in your app so that if you want to debug or add to your functionality you can do so what we're going to do next is we're going to set up in our not public folder [Music] in our source folder underneath the redux where we connect to the blockchain over here we're going to just replace a few things to make it point to our real um you know our real smart contract now you can leave the smart contract.abi as is because that is fine all right that is perfectly fine because we already ran it in our migrations if you don't have if you haven't run it you need to paste your api in here from the smart contract that you find on the ether scan but here's our smart contract address i'm just going to go ahead and copy that i'm going to come back here where it says network and i'm going to paste this in here but instead of just doing that i'm going to make a space and do that and then comment out this line because i noticed that sometimes i want to go back and then i've pushed up this code and then you guys are using it and there's no way for me to tell you this is what was there so that's basically what i'm doing there the next thing is that we not we really don't need this network id um to be pulled from the smart contract because we just need to make sure that the network id is equal to the right id so this should be equal to the correct id now i just need to go and find out what the rinkerby testnate id is so let me go and do that and then we can fill this in okay after a quick google search i saw that the ring could be test network id should be four we could have probably locked this out now that i think about it but anyway um rinkeby should be full so let's go and test this out you can now just save this and let's go and run our program again so this is nothing to do with the smart contracts that's sitting on here i just wanted to let you know that we need to actually connect to the outside ethereum network right this might still say polygon network so that's something we're going to quickly change i want to switch to a random network i want to go back and just say um to let me just see okay let's add that and let's click connect okay change network to ethereum so if we go now and select the correct network which is the rinkabi one and we go to one that kind of has ethereum whatever we can log in perfect and i now want to test what happens if i mint so just remember when you meant and you are um when you are the owner which this is you don't really have to pay because remember we're skipping that payment but because i coded it in the smart contract or in this um dap that anyone is going to pay the owner is also going to pay so i just want to let you know anyway check this out once you're on the live network it takes about a few seconds before this is minted so it will say hey grab one of your nfts maybe it's your lucky day success and now you can pop up some messages to say cool go and check it out on openc so now we can go on to open c we can see we have one owner right um and by the way these things have now populated so we have got 20 items one owner and it's zero tradable yet i want to refresh this just to see if this updates so let's go and refresh that might not update yet but if we go into the contract and refresh the contract there we go there's 21 nfts which is pretty cool and it is 44 seconds ago someone minted this nft how cool is that um what we're going to do is just quickly go back to our tap go and switch accounts to maybe another account uh let's go and choose this account let's meet five i'll see how much i will need to pay so this says i'm going to have to pay this much which doesn't seem right is it no let's see why i think i know why so in our app.js if we go down to the buttons i don't think we've passed in five so we need to remember to pass in five nfts over there just to make sure everything is working fine all right so now let me just save it let me click on five and then this should pop up how much i'm gonna pay and that is exactly it right we're gonna pay zero comma one ethereum four or five i don't mind i like nfts let's go do it and then let's go and check in the smart contract what's happening over here we are going to refresh it's still busy so we just wait for feedback it says there's an error which is interesting oh no it says success that's interesting let's just let's just verify um i think i came back and yeah it did meant it did meant so there wasn't an error i think i i refreshed or something the page it wasn't an error at all it went through perfectly because there's now 26 we minted 31 seconds ago there was five minted and it should be on my name so if i go to my collection now my profile there we go 26 25 24 they are all my nfts now um that's pretty cool guys i really and also when you when you've now uploaded the json files remember then they all start showing up um but anyway guys i hope you enjoyed this tutorial i really hope this makes sense and that that this is cool um yeah just remember to have fun with these things and play around with it make sure that you guys are also having fun and send me the stuff that you guys create i really appreciate it remember now i'm not going to respond to each and every comment i will be doing it at night but mostly i'm just going to be observing what you guys do and please help each other out in this channel as well we are a collaborative team working on on blockchain technology together kind of and i'm looking forward to do and explore more blockchain technologies with you guys i hope this covered more than anyone else has covered in this blockchain space and i hope that you guys take this and explore with it what i'll be doing next is just saving this project and uploading it to the github repo to the actual github repo that we have here at hashlips and i'll probably call it something like openc minter or something you'll find it here and you'll see it will be the latest repo out as a added bonus i've decided to create an example that for you guys which you guys can go and connect to download it off the repo it would most probably be saying example dap something and you can go there i'll leave it in the description you can connect to it once you start it up it has cool features such as pulling the amount that has already been minted of your nft contract and then also the amount of how much an entity cost and it will update the corresponding values to whatever you buy down here if we say buy five you can see it says busy minting your nft and you can go and confirm and everything works as expected again before you use any of this code make sure that you've thoroughly audited it yourself and made sure that you're happy with it but for now thank you again and have a lovely day

Channel: HashLips NFT

Views: 13,480

Rating: 4.9905882 out of 5

Keywords:

Id: tcSe-QckM3M

Length: 39min 3sec (2343 seconds)

Published: Thu Sep 02 2021