Code a 10000 NFT Minting Dapp part 1

ladies and gents this is the moment you've waited for [Music] hey how's it going guys my name is daniel aka hashtabs and welcome back to this exciting video i hope you guys love my ensemble in the beginning of this video because that's what everyone has been doing everyone has been waiting for the ultimate video to show you how to create the dap link everything up put 10 000 images on a server somewhere and link it on a smart smart contract so you can mint them and then show up on openc well that's exactly what we're going to be doing in this video so stick around and i'll show you just fyi this is a test lander contract that i've created so it's not the real luna landers one we are going to be creating the real lunar landis one soon so very excited for that but this is just to show you that what we're going to be creating and the metadata that we've created before will be able to show up on openc like this with percentages even which is pretty cool anyway um just want to make a side note here everything i'm going to show you today will work but you have to take precaution and make sure on your own right that you're comfortable with uploading stuff to the blockchain i can't be reliable for things that you do on the blockchain so just want to say that and obviously i'm not a financial advisor because i don't give a financial advice but i hear people say that so i'm going to add that too let's start off with creating what we need to set out let's quickly have a look at the get up forward slash hash lips get up repository now i've started this not a while ago not even i think two to three weeks ago and this one repository almost have 99 forks and over 300 stars now guys thank you so so much for this i can't explain enough how much you guys mean to me and all the good feedback every nice comment i read and it's so far just been beautiful comments and i really appreciate that it means that you guys value the content that i put out there unfortunately i can't always reply to each and individual each and every one individually because it takes up a lot of my time i do have a full-time day job and i only have nights and evenings to do my videos and have fun with you guys but that being said i want to put a mission out there for everyone if you see a comment in the comment section on all the videos and you do know the answer to it please go ahead and help that person it would really help me out and you will be helping people out as well so i would really appreciate that then lastly put on the bell notification on youtube and go and follow me on twitter i would really appreciate that too because um that's kind of the channels that i use to communicate with everyone that being said and out of the way i think we can have a look at some of the changes before we get starting with uh started with this too big tutorial okay so going into the generative art node program we will be able to see that a few people have contributed and i really like that unfortunately it means that all the videos that you watch might not have the same code but it will have better code so that's pretty cool you can see that the readme files have been updated with clear instructions on how to run the program which i absolutely love so that's just a side note that i wanted to make before we start off with this tutorial just to keep everyone up to date and so that you don't get lost while following the videos the same thing happened with the generative art open source main program that was also updated with the readme which we'll get into and then we'll also be using the front end base dap just to set everything up in this tutorial let's quickly go into the generative art open source repository and just have a brief brief look through the readme file you can see that it has now nice and clear instructions on how to run this and yeah that's basically it i just wanted to update you guys with it before we start off take a side note here we are going to be starting off with the v3 branch so we are going to be pulling the v3 branch then working on that just because it has the latest updates and it also has the traits which we implemented and we do have to make a little bit of a change and that change is going to be to add metadata now metadata has been added already in this big file but when i say adding metadata i really mean extracting that big metadata file into small individual metadata files that coincide with your nfts so on the server we will have a little bit of metadata image metadata image metadata image and that's how we're going to structure our folder and the output folder and the reason for that is because i want to do this in a code friendly way code beginner friendly way if i can put it like that if you are an advanced coder already and you know how to set up rest apis then feel free to skip the first part of this and just take all the images and metadata and create a rest api that will return to you the metadata for those of you who not tech savvy stick with me and we will show you a way where you can accomplish the same kind of thing but using a normal shared hosting server you can even use dropbox or google drive i think i know in their best practices everyone says use ipfs make it decentralized well the fact of the matter stays that if this is your project and your company that you are running and you have a hosting service that you can host it on there and you have access to the metadata that you can distribute why not i understand that people say it has to be decentralized but that's not the use case for all these projects out there right so we're going to be looking at that but that being said uploading your content to ipfs is a good idea but that everyone can read through on the ipfs documentation and do the same step so i'm going to be choosing the server way of doing this and we're going to also be building a smart contract let's stop talking and let's just get going with the video so the first thing that you want to do is go to the generative art open source repo click on copy then open your favorite ide and in the terminal run get clone and paste the url now that the repo is on your machine we can go and go into that directory so you can say cd generative art open source for those of you who haven't seen the open source code and how it looks and how we build it go and watch the actual previous tutorial it's called art generator for code generative art playlist and you can see everything up until here it will give you a great insight and also you will know exactly what we are talking about especially when we get to the front in that part as well anyway so cd into that file we can just run ls on a mac to see what the files are and there they are then what you want to do is say yawn add all after running yarn at all everything will be installed i do that from scratch every time and the reason for that is so that you guys are comfortable doing it from scratch but also if you have questions then people in the community will be able to help us answer them as i asked in the beginning of this video would really help me out tremendously anyway what you can see is once we've installed these dependencies we actually need to be on the version 3 branch so you can go ahead and switch to v3 um the branch v3 instead of just staying on main because this was the last update that we've made so go ahead and open the input folder and now you will be able to see the latest you know background suits everything from luna lands luna landers collection which is pretty cool next all you have to do is after you've installed all the dependencies you can just run node index dot js run that and then it would start creating images in the output folder there's already one and there's two perfect and there's three i actually had a question just before i started this video and the question was why does it look so weird and different from the actual videos content the previous update the reason why that is and why you're also getting a lot of dna exists is because i reduced the layers of this repo very much i reduced it to only maybe have two layers of each two elements in each layer basically the reason for that is because this is lunar lands content and i don't want to put it on the repo and then everyone creates the same collection so i just opted to leave a little bit of layers so that you guys can still play around with it even though we have so little elements in the layers we still manage to mint or create 10 artworks which is fine for this example for today but you ideally want a lot more elements and a lot more layers when you're doing your final collections you can see that i got a lot of dna exists meaning that it picked up more and more how can i say fewer possibilities for new nfts and that was a question that most of you also had is why is it doing that and the reason is you do not have enough layers with elements in them for the amount of nfts you want to create but that being said we're going to go further and like i mentioned before go and check the previous tutorials if you want to learn how to create this nft creator well just the artwork creator next we also generated this metadata json everyone who has followed this tutorial knows about this especially the last update where we now have attributes as well as the data the edition the image description and name and the dna so what we actually want to do is go and split these up into different separate files so that they can live next to each other on a server that we can go and query let's go and do that and make an adaptation on the index.js file so that we actually get back those separate files stored with this big metadata.json file as well so i went ahead and cleared the terminal cleared out our output file and now i'm going to open the index.js go to the section where it says add metadata and right below this function what we can do is we can create a new function that will save a new metadata json file next to the image so what we can do is we can say save a meta data single file this is a big name for a function but at least it's descriptive so i'm gonna copy and paste the edit count in there well the edition count not the edit count but we need the addition count because we need it to keep track of which json files we need to actually render so next what we want to do is let's go up a little bit to this right metadata function we can make a copy of this because we're going to write metadata to a specific file this time so let's go and say save metadata single file and we are going to pass in the edition count like we've done below we need to update this the output location where we're going to save it so wrap it in single or what do you call these little quotes so that you can manipulate the string and then go and add the addition count just by doing this we would get a file such as 1.json2.json3.json which we really need to be like that because it needs to match a png file in our output folder okay so next uh go ahead and let's just json.stringify whatever we're going to return because we need that open your brackets and let's think about this for a second when we go down and we see that we adding metadata if we jump to this function add metadata added to the metadata list which is a global variable sitting here at the top we can now go and find a metadata piece that matches the edition that we currently want so let's go down and let's go and do that how can we do and how can we find elements in an array we can say metadatalist dot find dot find will return either undefined or it will return the object next let's just call it meta and the meta is going to be in our each individual piece right and all we need to say is if the meta dot addition is equal to the edition count perfect that will automatically create for us a a file now and if we run this again this should actually start executing and spitting out in the output file a json file and a png a json and a png and that's exactly what we want and they need to match exactly so if we open the json json1.json there and i save it remember i've got prettier installed so it automatically formats my code but anyway if we open it we can see from the json traits and the attributes that the background should be orange it should be a regular suit it should have the usa flag on the shoulder patch and it should have the lunar blue pin and the skull and no facial hair and and so on all right um at this point of your project please make sure that you're happy with all these attributes because it's very difficult to change something once it's on the blockchain obviously there's metadata will sit outside of the blockchain so it will be changeable but it's just a hassle okay um i say that because i noticed the lunar blue pin is all one word because that was how we imported the folder name but anyway i'm going to leave it like that for now this is just an example but seeing that let's just see if this image does have a usa shoulder patch and indeed it does and that it has all the attributes because that's what our program executes right you can see that it's only the object itself and we are ready to rock we also have this extra metadata json the big file and i like to keep that like this just for in case you lose the data you need to upload it to a server again because um when this data is not available anymore then people won't be able to see the nfts i know openc does cache them in a way so that's fine but we do want to always have a copy somewhere just as a backup plan but now that we have 10 nfts or 10 artworks with their respective json files that's all we really need to for for the next steps right to upload it to us some kind of server so that we can access it now up until this point if you have um gotten to this point whether it's using the creative art program like we've done or you've created photos on photoshop or whatever you've created right as long as there's a lot of images and you have a lot of json and you have it in this format then you can follow along still right each a little part of this tutorial like i said is interchangeable with whatever you feel better and comfortable with doing let's move on to the next part where i'm going to first take now this json and its respective image and upload it on a normal shared hosted service before we go on there is something that we need to update if you look in the index.js file you can see that the image that we're exporting is going to be exporting the base uri and the edition we definitely want to append this with dot png so that our images can point to the png file wherever we're going to save it now that we have that information and we are ready to go we now need to know just for our final render where we going to point our base uri to now like i mentioned at this point you can switch it out for anything ipfs a local server google drive dropbox but um obviously other methods are more preferred such as a hosted server is probably the best when you have a company and you want to update the metadata you want to make sure you have good control over it and that you are planning on keeping it up there forever especially if you are planning on starting a big brand ipfs is then the best choice for single kind of artists who wants to host the data but it's a bit more complex seeing that we already generate the artworks here we would need to find a way to kind of upload these images to ipfs as we mint them which is totally possible and maybe we'll do in an updated video but for this video we want to see the whole process from start to finish so we're going to opt for uploading these images and metadata on a shared local on a shared host that is run on a server in the cloud that we can basically have a folder that everyone can have access to and that people can go and get those images from so let's go and see how we can do that a place where we're going to put all the amazing content we have created all the little json files and all the images and i've opted to go for a general server a shared host that i'm going to put these folders on and then people will be able to access them and we'll make that our base url so we first need to get the base url before we go and create all the nfts and then we can go to the next stages let's go into the hosting and let me go to a host that i've bought that i'm just going to upload all the images to usually when you have a hosted service you get something like a cpanel a place where you can kind of manipulate the files that's being hosted this is what you're seeing kind of here and i'm going to click on file manager and we're going to go to the root directory which is here in the public underscore html everywhere and for everyone this is very different that's why for instance in here you can see that this is already hosting a wordpress site i hope i will be able to change this and maybe add a file that i can access but let's see how it goes let me see if i can create the folder between all these old wordpress files just so that i have a space that i can put up all the images and the metadata you can click on new folder and let's call this meta data just like so we're going to leave it like that and then i'm also going to see if i have the right permissions on that folder so the permissions looks quite fine i wonder if we can change it so let me right click and see manage change permissions that's fine and we need these to be executable and it's fine it's it seems like groups and the world and the user can read from it and also execute on it now this is no not so much important for you in your case well it might be if you choose to go the same route that i'm going here maybe you've decided to go with ipfs like everyone wants to go with or you might decide to go for a dedicated host where you run your own things or you even create your own rest api whatever the case might be this is there's so many ways of doing this part you there's an abundance of videos out there that you can google and find on solutions on how to host the data but seeing that we have already batch minted all of our nfts or artworks something like this or a hosted service where there's a rest api behind is sometimes the better option seeing that we don't have the cid's of the ipfs linked to the images but let's carry on and let me show you how to upload these so now that we know that we've created a folder let's actually go and find the base url and replace it in our code to render the final images at this point when you call your server forward slash the folder that we've just created metadata you should see something like this it's just going to list the index of the files that's in there we don't really have any files in there which we're going to upload now but that's not important the important thing is i wanted to get this base url so i can actually replace it in here and then once we mint the final ones we should get the correct metadata so i'm just going to do that and run it and let's see what happens now that it's complete we can actually see if we click on one of the json files and save it to have protea reformat the text for us we can see that on the image key we actually have the fully qualified url whereas the first part is our base and this gets concatenated once we save the metadata in the index.js file right over here where we've appended the dot png now that we have this we kind of set up to kind of upload our json file and our png files all onto the server let's go and do that and let's see if we can actually reach it through the browser we are back at the server and for now we already in the meta data file so we can hit upload and then just go and upload our archive file over here we've now zipped all the json files and all the image files and when we go back and go back in here we can see that nothing is uploaded so let's go back to upload drag it and drop it in there make sure that it uploads successfully we are a bit too hasty but once this is done we should be able to see all of our files so let's wait till it's properly done and then go back then we have the archives up here we can right click and say extract it will extract it in the metadata file and let's see the permissions that these files have so i'm just going to hit reload to see everything and this is the permissions of each one of these files now these permissions should be good enough it does have only the world and the group and it i feel like we kind of need to add the execute on here but i wonder if we can batch do that so i'm going to try and select all of these elements and i don't know how i'm going to do that in a batch oh there you select all perfect and once we've selected all change permission oh there we go and we can do it for all of them so let's change the permission to that this looks good i think we'll be able to read them once we hit it on the site now that we go into the site's metadata folder if we hit refresh you can see all the files are there and we can individually click and read the metadata of the file and we can also see the png that's associated with that metadata this is all that we want but what we actually want to see is if we add an append 1 if it's going to get the metadata for us and this is a problem it doesn't do that automatically and that's why you would probably need a back-end service that kind of returns this metadata for you with an api we can bypass this however by appending the dot json by the end and then we should get this but this means that when we return our token uri we most probably going to have to add the dot json at the end which we probably don't want to always do and that's why an api is better but it doesn't mean that it won't work so we're going to leave it like this for now and just append the dot json in our smart contract and maybe we can turn it into a variable so that we can adapt it later on as well but that being said if we still do dot png we should get our image and what's nice about this is and to test if it works is if you say.1.json json and you click on this link it should take you to the image now because it's sitting right next to it perfect and this is kind of going to work with all the 10 nfts that we've created so let's see three and there we go so i'm happy with this and now you've seen how to upload all the content onto a server which is perfectly fine and it's living here like i said remember we are going to have to update this at some point and maybe make use of ipfs or maybe make use of a rest api that the metadata can be pulled from but this is good enough for now and you can sure rest assured to host a nft collection like this as long as you have access to change the data and keep it updated and keep it online forever all right so let's get to the next part the next part is going to be us creating the nft contract the actual contract that we can have and host in order for us to to mentor nfts and also also connect the metadata and charge a fee to the person who wants to buy one of your nfts all right so we have everything set up ready to rock let's get to the smart contract just a side note up until this point and i cannot stress this enough and that's probably why i've mentioned this before is that you could have done this numerous different ways a few ways is to maybe create a restful api service with node.js and express and set up the service in a way where you don't need to actually create all these individual json files but just keep the main metadata file then inside your node.js server you just run a loop and go and extract the metadata object that you need and then return that to the front end and then obviously have your images still saved somewhere on a hosted service alternatively you could have also opted for the ipfs way where you can go and upload your content to an ipfs server and then get that base url back but that requires a more in-depth way of thinking it through because you need the cid in specific you need the identifier to come back and be associated with each of these nft files and especially inside each one of these json objects over there it needs to be this image the approach we took was this approach and the reason is it's very simple this approach might not be the best but this approach definitely explains the process the best and as you guys know i'm all about explaining the process the best way that i can so you physically see the stuff laid out and split up in different files and it's now up to you to decide what is the best way for you anyway let's carry on so we know that we have this base url now and let's go and check out the smart contract that we will be uh using so this is remix for those of you who haven't seen it it's a browser ide for the solidity programming language it also allows features such as compiling the code and actually deploying the code on different blockchains so it's pretty cool and pretty neat and i really urge you guys to check it out if you haven't yet for those of you who have followed these tutorials you'll know exactly what this is and today we'll be focusing on this lunar landers dot sol i just called it luna landers because i was busy doing some lunar lander experimentation but i actually called the to the contract nft underscore token because we are just going to be testing with this now and i'm going to explain it line by line so i hope by the end of this that you get a clear understanding of the simple smart contract that we are going to be using looking at the smart contract i've changed the lunarlanders.sol into nfttoken.sol and nac token as the contract name and i just wanted to do it generic enough so that you can reuse this if you want to just make always sure that you are 100 sure about what you are putting on the blockchain and don't take my word for it even though we do go through it thoroughly let's go from the top so you have your license statement over there here at the top telling us what license this is and then we have the pragma line telling us what solidity compiler will be used and we can say it's any anything above 0.8 which if we check here on the compiler section it's currently using 0.8.4 which is still fine then we have got our open zeppelin contract imports especially the erc innumerable.sol and the ownable so innumerable is a wrapper that kind of wraps the erc contract but makes it enumerable countable you know it can increment well not increment but we can see the values and the total supply and those things and because we have these two import statements in remix remix is nice enough to put in our dependency folder in our mpm open zeppelin contract it will actually place these dependencies over there for us that we need and that those files then also need so that's what's nice about remix as well if you haven't like i said worked with it before just check our previous tutorials you'll perfectly understand what we are doing here as well next we have our contract which we call nft token and that is now inheriting from our erc innumerable as well as the ownable contract then on this line we're saying strings for un-256 this is just basically so that you can manipulate uh un's into strings so for example if you want to say if it's a if it's a number like 5 but then you say 5.2 string it just makes it easier to work with it instead of decoding and encoding it and all those jazz so it makes it a bit more easier to work with then we get then we get our main variables that's running the smart contract the first variable is our base uri the base uri will actually be this uri for me and for you it might look different but we're going to see how we're going to implement that in just a second next we've got a base extension which i have just implemented because of the fact that i can't directly call the json like so i have to do a dot json and that's the only time that this picks up and it also needs to be lower case needs to be kind of specific um that's the only time it picks up so i'm i'm putting in this in there in this smart contract for safe measure and i also have a function that can change this to be empty so that if we don't have that it's also fine perfect then we have the cost of how much it will cost to mint an nft this is pretty self-explanatory but most of you probably don't know the ether keyword well usually what people do is they take the value and then they times it by the 10 to the power of 16 you'll see some weird stuff like that well no we don't need that we can just put ethers because ethers is a key word um as well as whey in solidity that helps us to define more specific values like this all right perfect next uh what we want to do is we want to have a max apply and that's what this variable is all about 10 000 and then we have the max mint amount maximum amount is there for reason we want to at least be able to mint 20 nfts at a time if a user chooses to buy 20 up to 20 nfts we can't really do more we can't push it um obviously but you want to keep your smart contract safe and not have it run out of gas and so forth this is a variable that's also adaptable and also changeable but we'll keep it at 20 for now and next we've got a public boolean called paused and this is set to false but if anything went wrong on the smart contract or something is happening we at least have the control to pause the smart contract so that there's no more um there's no more things going on like people trying to buy too many too low or whatever can can happen you know so it's just as safe as safety net kind of put in place all right next we have a constructor which we pass in the name as a variable remember strings get the memory appended to it as well if you're using them then we have a symbol and we also have a init base uri which stands for initial base initialize or initial i i'm just taking it as initial now um but basically the the initial base uri that we're going to use and then we call the super constructor on the erc721 we pass it the name the symbol and then this is where we actually call functions in our smart contract so i'm just going to open that up a little bit in our constructor in our smart contract so this is called in the constructor which sets the base your uri and it basically goes and sets this variable the very first time we start this contract and next we then meant 20 nfts to the message.sender message.sender is the contract address that you are calling this or deploying this contract from so your wallet address that you are calling this contract from or deploying it from that address will actually receive the first 20 nfts and that usually is for the team for developers for the owner to say you know what pat on the back you did a lot of work and there you go you can reward yourself with a bit of nfts this also sometimes is done so if the team wants to do drop drops and so on later on a later stage they at least have some in the inventory for them to do so next we have an internal function which i've split up um by commenting so that you know which ones are internal and public and only owners basically this just reads the base uri and it all it does literally is return this top variable the reason why it's sitting on top here this is a function that actually sits in the erc 721 contract but it's we overwrite it here because we want to return our base uri because we want to be able to change it that's why that's there next we get our public function and this is our mint function this is where all the magic happens event function takes in two parameters a address which is a two and a u n 256 which is mint amount and we make the function payable because we need to be able to accept a fee in here so let's see what it does right in the beginning we extracted the supply from the total supply then we make sure that the contract is not paused at all then after we make sure that the contract's not paused there's another requirement statement to say that the mint amount this amount needs to be greater that than 0 at least we also want to clamp it and say that the mint amount should be less or equal to the max er mint amount which we know the maximum amount is 20. and then what we get is we need to the required statement to say if the supply plus the mint amount meaning that this supply let's say for instance we have five nfts and the mint amount is another five if this amount five plus five is ten is less than the max supply less or equal than max supply then we're good right it means that they will not be they will they won't be any nfts minted over the max amount and we're going to test that theory out as well in this video series but that's basically what it says on the next line here is the only only case statement which we have to check if this is an owner or not so if this is not the owner and this function comes from the ownable smart contract that we're inheriting from if this address wallet is not the owner then we're going to charge the person a fee for all the nfts that they are going to mint and you can see it's a very simple calculation we make sure that the value being sent along with the transaction is actually greater or equal to the cost times the mint amount we have the cost up here and then the mint amounts what's being passed through so if this was a mint amount of 1 it would be just the cost of 0 0 2 ethereum but if this was two then it would be zero comma zero two well zero comma zero four wow all right i need i need to get uh more hectic maths on the brain anyway um but apart from that for loops so this is now where we loop through our minimum amount and it's a normal for loop the only thing that's different here is we initialize the un-256 variable to one and the reason why we do that is because we want our nfts to start from one if you want your nft ids to start from zero you can leave that out but i'm placing it in because we wanted to start from one and then we do savement we say savement which is the underlying minting function we pass it the address to who we going to mint and then we take the supply plus the the i over here so think about it we need to pass in savement an address and a token id so obviously the supply plus i over here would be for the first run let's say our token supply over here was five initially okay when we started this off and i'm going to use the same example that we want to mint another five the loop is going to run and it's going to say well 5 5 plus i which is the first loop so 5 plus 1 is 6 so it's going to say mint to this address id 6. the next time it's going to mint and it's going to increment right here for the for loop and it's going to say mint for this address supply which is now 6 plus well sorry not it's going to stay 5 but plus two because this will increment so then it's seven and so on and it's it just loops through until it's reached um until it reached the end and then um you'll have your five extra nfts to that address you will of course have to pay for all those five nfts if you're not the owner perfect next we have this wallet of balance basically what this function does is you can read through this in detail but it takes in an address it's basically a public view it returns an array and over here on this line on line 57 currently it says token owner token count and basically it calls the underlying function which is balance of owner which will give you back an integer then what we do is we set up a token ids which is going to be an array and we initialize the array's length to whatever we've returned here this is to make sure that the array is no no bigger or no shorter than what we need so that all the values can fit in there we run another for loop this time starting from zero and we make sure that i is less than all these token owner token counts and we increment and then what we do is for each i meaning that for each index we set it to the token of owner by index now this is very interesting we actually take in token by owner token of owner by index basically returns the index of the token i i think and i think i can show you guys how it works when we deploy the contract um but it's sometimes confusing because it looks like your token is always one behind meaning um especially if you've set it to start from one otherwise it would always be the same but anyway that is what this does it returns an array of the wallets of the owner and then we have this function now this function i had to explicitly put inside here and overwrite it again from the erc721 contract because this is the function that all your c721 contracts have that includes the metadata and the reason for that is because we want to return the metadata string which is going to be at the end of the day this all right we want this to be returned in full and how do we do that because we only give it the base which is this first part we don't supply it the rest right so we need to kind of build that on the fly that's exactly what this function does it has a bunch of scope variables and of course our overrides and then a return statement next we check if this token id exists and this is also an underlying function to check if the token exists and then once it does for this current base uri it basically is going to take the base uri from the function that we created up here now we technically can just return the base uri directly but it is kind of convention to put it in a function seeing that we didn't actually in the beginning of this video i didn't return or create or overwrite this function at all i had to do that just purely because i wanted to add that base extension the dot json and i'll show you now how it's going to work but once we have the base uri we're going to return based on a ternary operator based if something is true or false basically what we're going to be checking is if the bytes of this variable right which is now going to be our current base uri and if those bytes are a bigger well the length of it or bigger than zero which means that we do have a base uri then it will choose this first option if not it would just stay empty and it won't return to us anything so obviously we want this to be returned so we're going to provide it with the base uri but what will it return well it will return a string to us because we're casting everything to a string we're going to use the abi in code packet to actually encode and concatenate a bunch of strings the first string that we want to concatenate is going to be our base uri now i see that there is a problem with this base uri because we should actually be using this so i'm going to paste that in there next we want to take this base your eye and take it from the token id so token id came in from the top and we want to say token id to string now this is why we said using strings for you ends here at the top especially for us to be able to do to do that to string and then lastly i also want to concatenate the base extension which if you can recall at the top was dot json now sometimes we're going to have to be able to change that and update that so we'll need to properly test the smart contract before we deploy it but that being said this should be enough to kind of concatenate our base json that we have and let's say on a later stage we decide to transfer all these things to a nice api we can update our current base uri and then maybe remove the base extension and that's basically what we're going to do there next let's have a look at all the functions that the owner can call all right perfect we're almost at the end of our smart contract and we have a few owner functions left to discuss these are pretty straightforward you can see that we have a set cost set max mint amount set base uri set base extension pause and withdraw they're also pretty explanatory so set cost just sets up the new cost for an nft if we want to change it for whatever reason only the owner will be able to call any of these contract calls the same with setting up the max mint amount per loop session if we want setting the new base uri and this is for if we want to move like i said all of our metadata to a different api have the data read differently so it is changeable after you've deployed the contract also then setting the base extension maybe making it even into an empty string so that we just get the clear end point if we do decide to change our base your uri then what we also have is a function to pause and withdraw the withdrawal is probably the most important because all the money that's been that's going to go into this contract will be able to be withdrawn withdrawn from the contract by the owner all right and that's basically it that's the whole contract in a nutshell it's very small it's about 100 lines of of code and this is enough to get your nft project out there so let's go and run it and see what happens and test out the smart contract and then we're going to deploy it on the test net on the rinkeby test net on ethereum all right fantastic so we can actually now go and deploy our smart contract and be confident about it and then let's see it run and work the thing that you want to do is go to the solidity compiler section make sure that the compiler is greater than your compile version here on the smart contract also make sure that you have enable optimization on it just helps to make smaller small smart contracts and it just works a bit better then what you can do is go to the deploy and run section make sure you've got one of the javascript vm selected doesn't matter which one really and we're just going to test the smart contract out then what you need to do is on this drop down you need to select the smart contract in ft underscore token or if you've changed the name create select your name that you've selected you'll see that this deploys section the arguments change that it needs to the parameters change and the arguments that it needs it needs the name the symbol and the base so for the name i think let's call it nft test like so for the sim symbol we'll call it nftt and then for the base this is where we now going to grab our base and you guys are going to grab your base if you have a base we want to kind of grab the base up until the forward slash over here because the thing is we as we are smart contract if we look at our smart contract where it's concatenated it basically just concatenates it it doesn't put in anything in between there so we're going to place that in there with the forward slash at the end now once everything is set up and we hit transact we should see our smart contract deploy and there it went successfully and this actually means that our first 20 nfts were minted because remember in our constructor we mint the first 20 to the owner's address so my address that i'm using here should technically contain 20 nfts let's go and verify that i'm going to copy this address i'm going to go down here and expand the area where the smart contract was released now and you can see all the functions that we can call we have a bunch of things that will change things in the smart contract our mint and our withdrawal function which is payable indicating the red color then we also have our call functions let's start off by our call functions and let's make sure that a few things work clicking on the total supply down here will return to us 20 and we can verify that and it does if we go and say well we need the wallet of the owner it accepts an owner's address i'm going to paste the address that i deployed the smart contract with and we'll be able to see that it actually does return the array of the nfts then what we can also do is we can check the symbol of the bat which is um nf tt we can see if it's paused or not it's not paused at the moment at the moment the owner is this address the name of the smart contract and the max supplies ten thousand and the maximum amount is 20. let's go and verify if our smart contract works in a few ways to try and go and mint more than 20. in our mint function over here we can expand this and we can say we're going to mint it to this address and this is now the owner's address but we can choose any address let's actually go and choose any address let's expand let's select maybe that address let's put that there and let's switch back to the owner's address then let's mint an amount of 22. if we transact this this breaks automatically and you'll be able to see it break and that is perfect that's what we want now what we can do is if we lower this amount to maybe five nfts we will be able to to transact and do that and there you can see that it went through successfully and if we just copy this guy's address now and we go all the way down and paste his address in here we can see that let's just do this there's the owner um this owner actually has more than that and why is that let's just make sure let's see the total supply is 25 um token your eye i actually want to see the balance of this address balance of oh token sorry owner of my eyes are all over the place okay that's fine uh where is the balance off there we go balance off is 25 okay so this guy has all 25. um i guess i minted it all to myself then uh which is fine uh let's go and transfer it then to this guy and so i'm going to copy and make sure this time i copy it and then switch back to the owner then let's go and transfer so save transfer we're going to transfer to that address we're going to copy the onus address we're going to put that in there and let's transfer the token id 3 to this person and that went through fine so let's now go and check what the owner now has 24 and if we paste the other guy's address we have one so our whole smart contract works as intended what we need to check and what's most important here is actually the token uri so there we go if we just call token uri it will just break because we haven't passed anything the same it will do when we pass zero because there's no a token that exists on zero tokens x tokens start from id one so if we do that and exactly we got what we wanted we got our base uri forward slash one dot json and that's perfect i want us to go and paste this inside our inside our browser and we do indeed get that back that is great news it means that our token your i works we can change it to four and we should get four and that's perfect and let's see if it also works if we change our our extension because that's the new code that we've added so if we go a bit up let's quickly close this set base extension i want to set the base extension to an empty string and there we've done it it's just went through and let's go and test it out so if we now call this we just get four and that is perfect um that is very very good we can put it back if we want to but i am actually happy with this and now we're going to deploy it on the rinkeby test network so in order to do that you'll need to go and actually say injected web 3 and then once you do that you need to make sure that your metamask is set on the rinkeby test network over there once you do that you need some test ethereum so you can get test ethereum on faucets and all these nice places there's a lot of videos on how to do that so just make sure you have some test ethereum these are free ethereum so we can spend them but once we do this we will actually be able to test our smart contract now on the taste open c network and let's go and see how that would work so we're going to do the exact same thing we've switched out but this time we're going to keep everything the same and that's perfect so let's go and say transact let's wait for it this time metamask will pop up and it will say this is our total gas fees and we're going to say accept we're going to have to wait a little bit because this is actually deploying on the test network the rinkeby test network as we speak so while this is being deployed i'm going to wait for the contract to come alive and then we're going to go and check out the openc and see if it's there and there we can see transaction was successful it minted successfully and there's the smart contract i want to say congratulations to everyone who's made it this far even though i haven't even made a solidity course yet which will come up in the next few weeks but um that being said i just wanted to say thank you so far and drop a nice comment in the comment section if you're really enjoying this video and put on that bell icon and then lastly go and share this video with all your friends i really appreciate that that really helps me out after that let me carry on and let me just say that this is actually now on open c and we can go and verify that not on the full open c on ethereum on the test network but if we go to openc you'll see that this is the normal openc [Music] url and it's a very cool artwork by the way but we don't want to be here right because this is on the live main network so we want to actually go to test testnets.openc.io and this is the test network which is pretty cool because it works exactly the same but this is where you can explore and test out your smart contracts that's just been deployed and you can see how good it works on openc so let's go there and let's go to my profile we can see that on my profile it says something very cool so it has this it has nft underscore test and then it has this weird cool i don't know what that is why why it's like that um but anyway it has this uh this on yeah so um these are the actual nfts now you might ask okay that's very cool but where is this stuff like there's the nft contract i can see the name but i can't see the name of this nft really this this doesn't name doesn't exist um and so does the description that doesn't exist in all these different things so let me see and let me explain why it doesn't show up for this nft yet so let's go and see if we scroll a bit more down so here we can see here some more of the test the test ones and we actually have to find one that's lower than 10 and the reason for that is because we only added 10 to our metadata remember so if we go back here to the metadata we only literally have the json and the images up to 10. so we need to go and find those 10 and then once we have them we'll be able to see it so let's go to this collection let's go into the nft collection smart contract let's go and there you can see it right how cool is that so here we get um one two and they are showing up right and if we scroll a bit more down there we have eight we've got nine four six um seven and ten being rendered over there so i think this is pretty cool uh we don't have the like i said the metadata for the rest if for any reason your nft image didn't show up at all you can always click on this and then once you're in here you can say refresh metadata this will go and refresh the metadata for an nft you'll be able to see it but our name gets populated i don't know why our name comes out like that for test contract it might be because previous contracts were also called nft underscore test which is quite understandable seeing that this is the test network but anyway that is only half of the fun what is really cool now is if we go down to the properties we can see that we actually have new properties in here and each one has a different property so we have here we have got a bunch of cool things you know um a race is skull and it is a skull it has pink hair so this is where your traits will show up and um if you go back so to your main thing you can always go and add if you click on edit the collection you can add your royalties you can add these images over there and at the back and after a while you'll see that the image counts starts accumulating it takes a bit of a while to kick in and i also was concerned about it when i tested this out previously so i gave it a little bit of time and it looked like it then worked after a while what i did do though is if we can go back and just verify and show you guys that it did work before if i can go to my profile [Music] so going to my profile over here and i scroll down and i go and actually find the test landers these are the test lander ones that i tested it out with if you go to test standards we will actually see that there's 26 items two owners and the volume trade right and that was that wasn't there it only showed up after a little bit of a while so if i click on one also with the properties it started picking up percentages of which which ones have what properties which makes it super cool and lastly the coolest thing is if you click now on your smart contract and you go down to to where your filters are you can see there's accessories so you can see that there's a veda accessory for the backgrounds we can filter through the blue ones and it tells you which ones um have the blue which ones have which pins um the race censored particle it's very cool and that's basically uh what the uh what openc actually in the back does for us if we supply it with this nice metadata that we have supplied it with with these attributes and traits i really hope that this made your day because i know that you guys have been waiting for this for a very long time and if it did like i said give this video a super thumbs up i don't know what else you can do and if you want to if you create your own collections maybe send me one of your nfts after you you created them um but anyway regardless thank you so much though guys um this is not the end of this tutorial there's still much to do the next part what we'll do in the next video actually will be we are going to be creating the dap the actual mentor where we can just connect this simply to our smart contract because everything is set up on our smart contract we now just need to start minting our nfts and that will do through through the dap where people can actually pay a fee for that but um also that being said people can anyway go to the smart contract if they wanted to so let's go and check that out quickly if we just quickly go to what we just created now which is these ones so if someone were to go down to the details of there and click on the smart contract address you can see that there's our smart contract address that we just created and there was our one transaction and we can go to the to the contract and then here's the contract um data right so you'll you might need to uh kind of submit your contract to verify it so that you can mint directly off the contract but um we anyway going to call it behind the scenes so that's not necessary the last thing that i just want to show is what to do if your api or your metadata or anything like that does not work before we end this video off guys i just want to quickly show you what to do if your nft smart contract doesn't pick up your json or your metadata properly what you can do is you can actually go and make sure that this works for for your smart contract is there's a endpoint from openc called this testnates api openc assets and then what you need to replace in here is your token address so let's go to the token address let's click on on the token address to make sure we on it there's 20 nfts and one owner how cool is this and it works perfectly fine as you can see i'm going to copy this address we're going to go back to this validator and i'm going to paste this in here so this is the new address okay and then all you need to specify is the nft that you want to validate so let's specify one like 50 which we know is not going to be there so we're going to search for it and it says cool 4 4 not found if you specify then one that it can find like 10 it should find it so let's see um there it goes it says okay status is is valid it's true because it has the token uri which is there and you can click on it and it should open the exact token uri there's no errors but i found that sometimes or not sometimes the time that i missed something i saw that i had an error in the image files and i couldn't find the image files and then it also didn't render my properties properly so that's just a way to debug anyway guys that is all from me for now thank you so much for sticking with me for for this video i'll see you in the next video where we are going to be completing this dab

Channel: HashLips NFT

Views: 43,224

Rating: 4.9826651 out of 5

Keywords:

Id: SD1DTrlJeKM

Length: 71min 43sec (4303 seconds)

Published: Thu Sep 02 2021