How to make NFT Art with On-Chain Metadata | FULL HARDHART / JS TUTORIAL! (w/ Polygon & Opensea)

oh we're going to learn some cutting edge nft building techniques today hi all this is going to be an end to end nft creation tutorial and we're going to use an especially special technique introduced to me by the onei chain nft project they have this insanely cool way to use chain link vrf to generate programmatically random truly random images on chain 100 on chain and we're going to give to you this superpower so in this video we're going to do a quick rundown of what an nft is and tell you the differences between this video and my last long video on nfts do a quick start of the repo and the code that i've already built for this tutorial then we're going to build this entire nft project from scratch explaining you along the way of course how we're doing everything then we're going to deploy this to a test that blockchain and see what these images and these nfts would look like on openc and then we will deploy to a real live blockchain because so many people have been asking how to do that and then of course if we wanted to we could start selling it on openc and for those of you who have been like patrick where you been man like we've been missing you stick around to the end i got an update for you so let's do the quick nft refresher here if you're new to nfts and these acronyms are kind of giving you nightmares in this cryptocurrency blockchain space definitely go check out my glorious guide to nft's video there's a link in the description it'll give you everything you need to know to watch this video and it's a lot of fun and i think my jokes are pretty good now i also have another tutorial that goes over how to deploy create and sell nfts and it's got so many views i'm so proud of it but this one is gonna be a lot different in a number of ways first off we're gonna be hosting our metadata right on the blockchain instead of on ipfs we're also going to be using hardhat in javascript instead of browning in python and we're going to randomize our nft art 100 with on-chain interaction now a few notes on these points if you're looking at this first point saying metadata ipfs what is he talking about don't worry we'll explain metadata as we go along but like watch my glorious guide video explain it in there god for number two yes i know i did the unthinkable i coded in javascript i think i'm gonna be sick and as much as i hate javascript i think the hard hat tool is pretty phenomenal and the team has done an amazing job to make this tool really usable even in the disgusting swamp javascript is and number three well you'll see those of you who like python and want to see a little bit more of the traditional way that these entities are hosted and generated definitely go watch my other tutorial that other tutorial uses brownie it uses ipfs it is an absolutely fantastic tutorial we are going to go into the pros and cons of using the method we're going to use here and the method we used over there in this video but in any case i think both of these techniques are fantastic for creating your nfts per usual first we're going to go into the quick start showing you how to use the repo that i've already created and showing you exactly what we're looking to build and then we're going to jump in to building the code and everything a hundred percent from scratch explaining along the way everything that we're doing so are you feeling froggy let's jump in you can find everything that we're looking to work with on my github there will be a link in the description for how to work with and how to build everything on here there's a readme you can follow along with now to get this repo into our vs code again i'm working with visual studio code but you can use whatever text editor that you want we're first going to need to have git installed so we can check that with git dash version i do indeed get installed we'll then want to come to my github here again the link for this is in the description and in here we'll do get clone paste that in we'll see the all on chain generated nft and all of our code will be in here now we'll also need yarn we can check to see if we have that installed with yarn version we also need node.js version or node dash version again in the readme it'll teach you how to install all these we'll also need hardhat installed again readme to do that as well and we'll just download everything in here with yarn and then i also have this hard hat shorthand autocomplete you can install with npmi-g hardhat shorthand or you can do yarn add global hard hat shorthand i already have it installed so i'm not going to run that you'll know you've done it right if you can do hh dash dash the shorthand is literally the exact same thing as just doing mpx hard hat dash dash help so we have two contracts that we're going to be working with random svg.soul and svgnft.sol randomsvg.sol gives us a randomized image that's built within svg and svg nft is the more simple one that we're going to start with first that creates an ft based off of the svg that we go ahead and give it so what is this svg thing that we're talking about here svg stands for scalar vector graphics and it's just the type of image that we're going to be working with as we dig deeper into the code you'll see why we're using an svg here svg code is a way to programmatically command something to draw what an image looks like so for example all this code over here defines what this frog on the right should look like and to get started we're going to go ahead and deploy them onto a local blockchain of our own but to deploy this to a local chain we'll do we'll do hard hat deploy or mpx hardhead deploy and it'll spit out all this stuff so this is simulating as if we ran this on a real blockchain the first thing that we do is we deploy an nft an svg nft this is kind of the simpler one to a blockchain and it gives us this token uri and if we paste this first token uri into our browser here we'll get the metadata for this object and again all this metadata is being stored directly on chain a quick refresher here metadata has a name a description some attributes and then it has the image uri which defines what this image looks like you'll see this is very different from like an https url right we have this data image svg plus xml base64 and then a whole bunch of random stuff so this url defines what this image looks like and if i paste that in the browser i get a blue circle right this is a really simple nft generated with this svg so that's the first bit the second bit that we can see is our randomized svg so what this will do is it actually will deploy an nft that was generated programmatically on chain and with randomness so again we have this little output here this is the the token uri for this nft we can paste it in and we get this massive metadata piece here and i'll grab this image uri copy paste it in and we can see this is the image that was randomly generated obviously it's just a bunch of lines and doesn't really look like anything but that's because we said hey randomness go have fun go be random and that's what we get now we can go ahead deploy this to something like rinpy by doing hard hat deploy dash dash network ranking b and of course to deploy this to rink b there are a couple requirements yeah npm yarn we also need a couple environment variables a wrinkly rpc url basically a way to connect to ring p excuse me a private key that has both chain link and eth in it eth and link you can always find the most up-to-date faucets by going to link token contracts just search that come to here and look at rink b you can always find the most up-to-date faucets on this page to get it into your your metamask here and then we'll just go ahead and hit enter and deploy this to rinkby i should spell network right and what this will do it will deploy both of these contracts to the ringp testnet and then it will also mint an nft so right so these nft contracts are factory contracts that create our collections right the main contract defines the collection and every time we hit mint we mint an nft of that collection uh we also get this nice little verify width so while this transaction is going through which of course we're going to wait a little bit i'm going to create a new terminal i'm going to paste this verify script i'm going to go ahead and hit enter and we're going to go ahead and verify this now i've already verified this code a couple of times and etherscan is smart enough to recognize that this code's already been verified so it'll already automatically be verified but in order for you to verify make sure you have your your ether scan api key and there's a little link in the readme if you're learning how to get that so let's go back to this well we've made our first nft so if we go to this contract address and rink b now make the ether scan paste it in you can indeed see there's a contract here called svg nft we go check out the token uri that's zero with one and we see that exact same thing now what we can do is we can grab this address go to rank the openc and depending on how fast openc is here we can paste that address in here and we do indeed see that there's an item in here called svg nft2 and one of these nfts is minted and boom we can see exactly what this nft looks like um and it's that blue circle that we uh we minted right the reason that it's this blue circle is because in our code here we have we're minting this small enough dot svg and if you look in here it's exactly it's exactly that a really simple svg code saying hey we're going to have height and width of 500. it's going to be a circle here are kind of the parameters to define a circle and that's it and that's exactly what got minted so so that one went through now the random svg is being minted uh the random svg probably already also got verified but let's grab this verify function we'll paste it and we'll see if we can verify this as well cool we're going to go ahead and start verifying this contract which we can go back to rigby ether scan we'll paste it in and we'll see it'll get verified once that verification completes but we're going to run a couple of different functions here so first we deployed it of course then we just verified it now we're going to create an nft calling the create function after we sent this contract some chain link token and we will have to wait a little bit of time probably a few minutes actually because we're doing a number of transactions here so this is your time to maybe go grab a cup of coffee or something and so after a few minutes i know there's there's definitely a few minutes there that we had to wait we'll get an output that looks like this so we created our nft contract and we created an nft and whoops this should just be zero i should fix that later we waited for the chain link vrf to respond to randomly mint our nft then we called a finish mint function to finish minting the function now again we get an output like this you take this pop it in to a browser and then we'll grab this image uri to see what this random thing looks like and boom this is what we got we just got a couple random green lines perfect that's random it doesn't look very creative here but it'll show you the power of all the different things that you can do and again if we grab this address here contract address right here we pop back on to open c we paste that in scroll down we can see there is a result here we'll hit refresh metadata and we'll refresh and we can see that the metadata and the image actually is here now just remember sometimes open c is a little slow sometimes ring v is a little slow so so just be a little bit patient if they don't happen right away but this is exactly what we're going to do this is what we're going to be building this way to both upload our own svgs and upload our own random svgs i know i've shielded this protocol enough but i was just so blown away by this application they do kind of a mix of the two where they have some images they have some svgs already on chain and the random number actually just mixes and matches the svgs to create all these different images which is really cool you can check these out on openc all these different attributes like this eye patch the hair color their eyes these are all svgs on chain that are randomly selected by a chain link vrf so this is the type of thing that you could build which i think is absolutely stellar so now that we know what we're looking to build and how we're looking to build it let's get started building this entire thing from scratch so i'm going to go to my demos folder i'm going to make dr all on chain generated nft repo cd all on chain generator repo i'm going to open this up in my vs code now if you don't have vs code that's totally fine this is just text editor that i'm going to be working with here remember the first bits that we need to actually have installed are going to be node.js so we can check if we have that with node dash version and we also need we're going to be using yarn so we'll do yarn dashes version we're going to need hard hat so we'll do make sure we have hardhat with hardhat help oh and i'm just going to go ahead and quit definitely have hard installed there's some links in the readme of this github repository again in the description on how to download all these requirements so great so let's go ahead and get started by building a sample hard hat repository so i'm just going to do mpx mpx hard hat and we're going to go ahead and say create a sample project we want the root to be right here yes let's add a git ignore we'll hit enter let's install some of those dependencies for us here and great we have our simple hard hat repository here i'm actually going to go ahead and remove deletepackagelock.json because i'm going to use yarn instead of npm so in here we have a couple simple contracts some scripts we're going to be deleting a lot of this stuff but there's some great videos on kind of the layout of hardhat that you can learn in some other videos so since we're making some contracts we might as well start with the contracts so we're going to start with that svg nft this is kind of the the simplest starter bit and then we'll go to that more advanced randomized svg that we'll work with in a bit so i'm just going to go ahead and delete this contract here move to trash all right so let's go ahead and create our first contract this is going to be our svgnft.sol and let's talk a little bit about what we want this contract to be able to do so we want to be able to give the contract some svg code which we're going to go into how to actually generate this svg code and working with this mvg svg code we're going to talk a little bit more about that and it should output an nft uri with this svg code storing all the nft metadata on chain right and this is going to be this simple example of how we can do this svg code and then after we go through this simple example then we'll do our random svg which will take this and level it up and make it explosively dynamic and way way more unique and powerful and just just way more fun so let's go ahead let's jump in let's start building this salinity smart contract so we'll start with of course spx spdex license identifier mit and i just did a little tab complete there i will try to do as few tab completes as possible we'll do pragma solidity so abd 0.8.0 uh we're going to be working with one of these newer versions of solidity we could really do any version but let's just do we'll just do 8.0 and we'll make our contract which will be svg nft and boom that's it now we have our contract yay now i do have a solidity now i do have a solidity extension in here so the extension installed here to make it kind of format nicely and look like this and we're going to close these because we're going to be focusing on the contracts now for a little bit we're going to be building this as an erc 721 or an nfp and of course we don't want to have to reinvent the wheel right this erc721 this nft standard it's it's been done right it's been done 100 times so we can actually just borrow open zeppelin's erc 721 contracts to get started here so we're going to go to their latest their version 4.x and we're going to add it we're going to add these contracts in it's actually yarn instead of npm it's the same thing though yarn add add opens up on slash contracts and this is going to enable us to kind of work with these pre-built smart contracts that already have this nft standard for us so we're not going to have to rewrite every single function needed in an nft this already has everything for us so and once we install it as this thing kind of installs here this is all we're going to need to do to make a really simple nft obviously we're going to do more than just this but this is kind of the main piece so we're going to go ahead and import this open zeppelin code this erc721 however even though i just said that we're actually going to use one of open zeppelin's extensions on this and if we go to github open zeppelin github i just did opensupply github twice uh you can actually see all the different contracts that they have in here all the different things that they offer we're gonna go down to token erc721 because again this is the nft we're going to use one of their extensions we're going to use erc721 uri storage just because it's a little bit easier for us to set and unset the token uri you can use kind of this their base model their base model erc 721 and this actually has some really nice gas improvements but for the simplicity of the toriel we're going to use this extension uh that just makes it easier from a developer's perspective this erc721 uri storage it's the exact same thing as an erc721 it just has a couple of added nice little functions for us to use so back in our code let's get rid of this now we're going to import at open zeppelin contracts slash token slash erc 721 extensions because we're going to use this this extension that we're using erc 721 [Music] storage.sol we can even go to that contract and here we're literally grabbing all this code and we're plopping out the top of our contract here right so it's got this token uri uh it's got set token uri it's got burn it has all the functionality of erc721 and what we're gonna do is we're gonna have our contract import that contract so we're gonna say contract svg nft is erc721 uri storage so just by doing this this is solidity's inheritance we're saying rsvg nft is importing everything that this contract has to offer which again it already has all the niceties of making an nft perfect so now our linter here is giving us an issue because it's saying hey you need to you need to define some functions here buddy what are you doing so we're going to go ahead and do that right so first we need to make our constructor which again the constructor is the method that's called the instant we deploy the smart contract and if we look into the um the docs for open zeppelin we can see exactly what this constructor is going to look like and all we need to do is give it a name and a symbol this syntax here is saying hey we're using the constructor of the erc721 as part of our constructor so it's a little bit weird in that regard i know but that's what we're doing we're giving it a name and a symbol so we're going to say erc 721 we're going to name it svg nft and we're going to give it a symbol of svg nft boom this is going to be basically our contract uh collectible or collection right so all the entities that we're going to mint are going to be of type svg nft so a lot of people say hey like how do i how do i mint a collection this is a collection like so this would be contract board apes or contract crypto punks and then every time we mint one we're gonna mint a type of crypto punk a type of board ape or in this regard a type of svg nft so let's go ahead and create that mint function that users can call to actually create themselves an nft so we're going to call function function and we'll give this and we'll have and we'll have this take a string memory svg and we'll make this public so we're going to pass this a public variable called svg and actually i'm going to turn i'm going to turn this off for now we're going to pass this in svg so let's let's talk about svgs real quick so here is an svg tutorial and i got a link to it in the description from w3schools it's fantastic it teaches you pretty much everything you need to know so if we were to try this out we could see like what this svg code looks like in html and this is it right it's basically these tags it's very html similar right so in here we have a circle of width 100 height 100 that gets created like this right and so there's all these different commands in these different paths that we can do to make these uh these f svgs now one of the simplest ones uh is this path thing where it just defines where a line is being drawn and it has all these commands like move to line two and it's literally just like telling where to draw lines uh and so here's an example of an svg triangle which we can you know click try ourselves uh we can even play with it a little bit right so we have this move to 150 zero these are coordinates we have line 75 200 line 35 200 and then close here right so we can even mess with this a little bit we do like 200 run we see it it shifts over a little bit we get rid of the z right we'll see what happens uh looks like actually nothing happens we can get rid of this part we'll see what happens it looks like the whole thing disappears changing the shape of this right because these commands are are being slightly different now we can add all these other parameters in here but for the purpose of our demo we're actually going to just use move two and line two because both of these take two parameters right so move two it takes two coordinates line two it takes two coordinates and some of the rest of these take a lot more coordinates uh so we just wanted to keep it really simple each one of these has two commands right it's going to be an x and a y for each one of these boom really simple and we can generate uh different images with this lines but this is where your creativity really comes in you can go absolutely crazy with the rest of this you can use an svg generator to do all this but again link is in the description so we're gonna give this some svg code right and let's even just take this this triangle example here actually i can just copy right here let's just take this triangle example and we'll create a new folder new folder called image new file and we'll try triangle.svg and we'll just paste this this this triangle code in here now the one thing the web3 school doesn't actually have is it does need this thing called this xmlns parameter in here which kind of just defines where this is going to be hosted from i'm just going to put in basically one of the defaults for this which is going to be www excuse me http www.w3.org 2000 svg now i also have an extension called svg viewer this one right here installed in my vs code and what i can do then if i do control p or for those of you on windows you can do view command palette that will work as well or control p and then do this little care thing and now we can do svg viewer view svg and we can see exactly what this triangle looks like in this little viewer here right and same thing we can go ahead and edit this we can make this like 200 right in the triangle is going to shift over this is what we're going to use to deploy in the github repository we use a circle but it doesn't really matter you can use really whatever you want here so we're going to pass this svg this that code to our function here and with just by passing this svg we're going to be able to store our nft image our nft metadata directly on chain remember in order to show one of these tokens we're going to need its token uri right the token uri is going to be the most important thing so we're going to have to turn this svg into one of these token uris again if you don't know what that is definitely go check out that glorious guide nft video it will teach you everything you need to know so we need to turn this into a token uri a unique resource identifier and we're going to go ahead and do that right now now so the first thing that we're going to do in this create function is we're going to want to mint one of these nfts to whoever calls this create function so our erc 721 uri storage has a built-in function called safe mint and it takes an address owner and a token id so we're just going to say message.sender and some id is going to be the token id so whenever we create an nft again if this is a board ape it's this safe mint function that's called that's going to mint a specific one of those or if this is a crypto punch this is minting one of those crypto pungs we're going to assign it to whoever calls this crate function and it needs a unique id so to keep track of all these different tokens we're going to create a global variable un256 public token counter we'll initialize it in our constructor to zero we'll say token counter equals zero and we'll just set the token id of this safe mint to this token counter and every time we mint one we'll do token counter equals token counter plus one so we'll just increment this token counter so that every time we min one we're going to get a new token id great so we've minted our token here but what's the token uri what's the image uri right now it's totally blank which doesn't really help us at all so we're going to need to create a function that's going to turn this svg code that's going to turn this triangle code right here into one of those token uris and okay i'll show you what this looks like again this token uri is what is going to return some metadata on what these nfts actually look like okay it's this function that will return that will return something that looks like this that will have the name the description the attributes and then this this image uri right which in in this example that i'm showing is going to be something like this blue circle right but for us it's going to be a triangle because that's what we're doing in this demo here let's create a function that will turn this svg into an image uri right because we're going to actually have to stick the image urine to the token uri so this is actually a little backwards we're going to do the image ui first because the token uri includes the image uri so let's create a function called svg to image uri and ideally we should probably turn this into a library so anybody can use this but for now we're just gonna we're just gonna code it ourselves here so what this is gonna do right is it's gonna turn like we said this code and let's even just put this all to one line here and we'll do save without formatting so it actually does that what we're going to want this to do is we're going to want to turn this this big old thing uh into that example image uri right and it looks like this so we can actually um look at kind of the format of what this image uri is going to look like so it's always going to start like this so it's going to start with data image svg plus xml base64 and all we need to do is we're just going to take our code this svg code and we need to base64 encoded and then just add that base64 encoding here so this would be like base 64 encoding and that's going to be our entire image uri right so if you look at this image right here you can see data image svg blah blah comma and this big huge string right all this is this big string is a base 64 encoded version of that svg code okay so that's all we need to do so let's go ahead and do exactly that right we're going to start we're going to say string memory base url it's going to be equal to this data image svg plus xml base64 and that's going to be our starting point right here now all we have to do is is concat our base64 encoded version of this on top of our base url right so we'll do string memory svg base 64 encoded is going to be equal to and this is where we're going to base64 encode this bit here so we're going to get a little bit fancy here but in order for us to do this we're actually going to use this base64 sold github repository base64 seoul github so definitely be sure to star this this repo oh i'm not signed in but definitely be sure to start this repo because it's it's what we're using and it is very helpful it's got some really helpful functions in here it's got this base64 library for us to use so we're going to import this just by doing import base64 hyphen soul slash base64.sol and of course we're going to add this with yarn add base64 hyphen soul so we can actually have this in our project here boom okay perfect and then we're going to do using this this base64 library we're going to say base64 dot encode because this this wonderful library already does this base64 encoding function for us and we're just going to encode this string here now we have to actually do a little bit of weird conversion here we have to first we can't just do it like this we have to first do abi dot encode pact svg so we're encoding it with an abi then we have to convert it to a string and we have to then convert it to a bytes so i know this looks like a whole lot of stuff here and this should be a semicolon oops and this should actually take a string memory svg sorry and we'll pass that svg in here right so this is the base64 encoded version of our svg in this base64 dot encode it returns a string so i know this looks kind of crazy but this is all we need to do to get turn this into a base64 encoding and what this is going to look like it's going to basically look like and if we go to our pull up an example here this base64 encoded string is gonna look something like this right it's gonna be this super long seemingly random chunk of letters but our data image svg plus xml base64 uri understands this to be ah okay this is base64 encoded svg and i understand how these random numbers and letters actually work so once we have these two all we need to do is concat them together so in order to do that we can just do string image uri equals and the way to concat strings in solidity is doing this this clever little string abi dot encode pact base url comma svg base64 encoded and then we cast it as a string sorry this should be string memory boom lovely so write like this this is how we concat these two strings together now this is going to look like you know it's going to look like this comma comma this big string right so now this is what this should look like here and we want our svg to image uri to return this so we're going to actually do a make this function a public pure because it's actually not a view function because it's not going to be reading anything off chain so public pure it's going to return string memory and so then we can just say return image uri so now we have this svg to image uri and this is something that it approximately should be returning okay so in our create function then what we can do is we can just call this right so we can say string memory image uri equals svg to image uri svg now we have our image uri right so that's going to be something that looks like this this isn't our token uri oh now this one in particular actually won't work because i these these are just actually random numbers of lenders but something like this this would work right this however isn't our token uri this is just the image uri right the token uri looks like this and has that image uri inside of it so we actually need to wrap this image uri that we just created on chain inside of this bigger thing here so what we want to do then is we're going to create another function called format token uri and this is going to take in this image uri that we just created as a parameter and create that that json object that we just saw so let's do it so it's going to take a string memory image uri and this is also going to be a public pure because it's not going to read any state and it's just going to return a string memory right now we're going to do a little bit of fancy stuff here as well so since we know that this whole thing again needs to be this this base64 encoded right so we have this wonderful json object but it's got to look like this right this is what the url looks like to return this json object we're going to do some fancy stuff but let's make the json object first and no worry about converting it to this this base64 encoded here since we're just going to be making a string here we can just start it off right so if we look at here we're going to need okay we're going to need a bracket and a name so let's go ahead we'll do brackets name we'll uh we'll put it in single quotes because it looks like we want to use a lot of double quotes in here so we want a name for this right we'll do we'll call it svg nft great then we can do a comma description comma description [Music] what will this description be an nft based on an fvg great we'll just literally copy paste that or you can type this out so we just need this name uh description what else do we need attributes uh that could be blanks we'll do attributes or you could put stuff in here you know whatever you want to do but then this image is the important thing right and let me even just oops let me toggle where we wrap on just so that it's uh so we can see everything here so this image image and this is where we're going to put that image uri right so again since we're concatenating thing here we're going to do some concatenation in just a second we'll do that comma we'll put the image uri here do another comma and then we'll start up that string again so that's equivalent of kind of having that quote here this is equivalent to that image uri variable and then we have another quote and then we can just end it with a closing bracket great and to concatenate this again we'll just do abi and code packed and this will be a string uh json string memory json equals this guy right here oop sorry we gotta cast this to a string boom okay cool so this is will return an object that looks exactly like this which is great but we got to go one step further we of course need to then convert this into its base 64 encoded version so how do we actually do that well we're going to not have this be a string we're actually going to convert this to a bytes object here and then let me even just uh make this look a little nicer so we'll do and we got to do we're going to put these little single quotes in here so celebrity knows to concatenate everything which is what we want boom okay cool that looks that looks good so remember those single quotes in here so we're going to have to make this a byte and what we're going to do is with this bytes object we're going to once again base64 dot encode and we're just encode this whole thing here based 64 basis for it on code and then this is again going to turn return one of these giant long strings here and all we then have to do is concatenate this with kind of the beginning this base url the base url for this for this json object is going to be a little bit different though so we can do we'll say string memory memory base url this one instead of being data image svg blah blah right we even just copy paste it this is going to be data application json okay so this is different data application json so this is saying hey this stuff here is a json object it's not an image this time and so what we're going to do then is we're going to do abi once again we're going to concatenate this base url with this big thing here that we just made we're going to concatenate them together and then we're going to cast it as a string afterwards so we're going to do that same thing abi dot and code pack oops pact a little bracket here opening brackets a little closing bracket down here uh whoops we're going to do the base url combined oops this is where i have a good formatting comes in comes in really nicely um this base url and the rest of this so we're combining this base url which is this guy right here with the base64 encoded version of our json object perfect and then we want to cast this whole thing as a string boom and that's what we can return so this is going to return literally something that looks like this right so it's going to return something like this which is the uri for that json object for the token uri so now we have a way to get our token uri this is really cool so what we can do now back up in our create function we're going to take this function and we're going to do we'll do something like string memory token uri equals format token uri image uri right because again we're just passing um our format token uri function the image uri so it can return this wonderful json object here and this is showing us how we can actually update our token uri to be really whatever we want to be right we have this attribute section where we can add some really cool attributes definitely go check out my nft mix if you want to see some other cool stuff with attributes or the truffle dungeons and dragons repository links in the description for both of those any case now that we've we've created this token uri we have this wonderful function because we're using the erc uri storage called set token uri that we can call set token uri and we can just say okay set this token uri to our token id right this token counter oops these are backwards token counter token uri we're saying hey for this specific id right so board ape zero or crypto punk 0 or svg nft 0 give it this token uri it's going to look like whatever this object returns and then once we're done there we're going to increase the token counter amount by one and then i'm just going to do this underscore svg make these underscore svgs just because kind of i like having my parameters uh start with like an underscore it's just gonna bother me if i don't put it in here now so just added those underscores you don't have to but it'll bother me so so great um that's all we really need we do want to do one more thing to make our lives a lot easier when we're working with this is we do want to omit an event every time we create one of these nfts this will make our lives a lot better for migrating later on for testing for doing a whole lot of stuff so we're just going to do create an event if you're unsure what events are there's a link in the description to learn some more but we're going to do an event created svg nft we're going to do a un256 indexed token id and a string token uri index token id and then when we create this we're going to omit we're going to omit this event omit credit svg nft and we'll give it a token counter and token uri so yeah events are really helpful um i'm not going to go too deep into them now okay cool so now we have this part done so typically what i like to do is i like to build my deploy script because our deploy scripts will help us run our tests and often you know you want to test your deployments as well so to do this i use a plugin called hardhat deploy that's really helpful this guy is a is an absolute beast builds really really cool stuff we can go to the hard hat documentation to check this out documentation let's look up hard hat deploy right it's in their plugins down here it's really really helpful and we'll just add it here with yarn add hardhead deploy or yarn add dash dash dev hardhead deploy because we're only gonna need this for dev work great or you could just do you know npm install dash d that works as well and cool so now what we can do is we create a deploy folder and any time we do mpx hard hat deploy it'll run through everything in our deploy folder here right so if you're familiar with truffle this is similar to the truffle migrations here let's go ahead and build our deploy script so we'll do zero one deploy svg nft.javascript and this is gonna have everything that we need to actually deploy this now we when we run this hard hat deploy script hard hat's going to give us some really helpful things to help us understand how to deploy this so i'm going to type some stuff might be a little confusing don't worry just stick with it it'll make sense shortly so we're going to do module module dot exports equals an async function here this is where some javascript knowledge comes into play and we're going to add get named accounts this is a hard hit deploy function that allows us to work with the deployer we're going to do deployments this will get us some really helpful things like logging markets there and then also get chain id which is really helpful for testing versus test nets and then doing a lot of really fancy stuff there so this is an async function that we're going to describe down here so for now just think of this is how we're going to start this deploy function here from this deployments we're going to get two variables we're going to deploy and log from our deployments bit from get named accounts we're going to grab deployer deployer which we're going to use to deploy and this is going to be equal to await get named accounts and i do have a an auto save auto format for my javascript hence every time i hit save it kind of reformats a little bit and then we'll do const chain id equals await get chain id so i know there's a lot of stuff here don't worry it'll make sense so i really like this log thing because i can just type stuff like log and this is basically console.log right so i like to kind of start my stuff with like a bunch of lines here in hard hat saying hey we're getting started we're about to shit's about to get real all right we're popping off now and the first thing we're going to do is we're going to deploy that svg code so we're going to say const svg nft equals await deploy and this is all we need to deploy it svg nft and then we can add some parameters in here for how we wanted to play we're going to say from deployer and we're going to do logging is true so okay what's going on here this deploy bit knows that all of our contracts are in this contract folder and it's going to look for this svg nft which it'll know it'll grab from this contract name right and it's going to return it from deployer which is await get named accounts what get named accounts does is it looks in our hard hat config for one of these named accounts right now we don't have one so we're going to add one in here so in this module.exports thing we're actually going to change the solidity to 8.0 we're going to add this named accounts bit so we're going to do named accounts like this and we're going to say this deployer we're going to give it a default of 0. whenever we deploy from one of our mnemonics it's always going to take the zero with one right remember how in our metamasks we can have a whole bunch of different accounts here right and these are all with the same mnemonic device well by saying the deployer default is zero we're saying account zero is going to be our default this deployer here now of course the question then is oh okay well how does it know what our mnemonic is absolutely great question we're going to define that in our networks so we're going to do networks our default network is going to be hard hat this is kind of our our local test fake network here and in hard hat we're just going to have a little a little blank nothing here and we automatically assigned a mnemonic here but for something like rinkeby which we're going to work with later we are going to need some accounts to find and we'll get into this in a little bit for now we'll just we'll just leave it blank get named accounts deployer is defaulting to zero when we work with our hard hat network it's going to give us a mnemonic and it's going to say work with account zero so that's what we're doing here we're saying from deployer which is our zerowith account in metamask and actually i didn't even compile i should have compiled way earlier i guess i'll compile now make sure everything's good okay cool compilation finished successfully so if something if you run mpx hard hats compile and it doesn't compile you have an issue uh go back into the code you know rewatch from this video and be sure to figure that out also i did this thing called shorthand and autocomplete you can use mpmi g hard hat shorthand or yarn add global um hardhead shorthand like this and what you'll be able to do is stuff like hh compile and this is the exact same thing as running mpx hard hat compile but obviously it's much faster because i can just do hard compile anyways with that all being said so we're deploying this svg nft and then i usually do like to do a little log saying you have deployed an nft contract two we'll add this little variable thing in here svg nft dot address cool so we've gone ahead and deployed it we can even test this in here by just running hard hat deploy or mpx hardhead deploy oops i forgot to add this require hard hat deploy in our config here so let's go back to our config we'll scroll the top require hard hat deploy great and let's try hardhat deploy again and this should run this deploy script on kind of our fake network and perfect right so if you're getting this that means things are compiling your script is working so far up to this point however we want to just add everything in this in this little script here right we could break out you know creating and svg image uri to kind of their own deploy scripts or their own tasks or whatever but we're just going to add everything right in here so the next thing that we're going to need to do then is we're going to need to call this create function with some svg code so we're going to save our svg code again this image triangle.svg feel free to add really whatever you want here just remember to add this xml ml and s bit here because this is going to be an important piece um for our code to actually really understand what's going on here once we have it in here we can just read from this file to get our svg so we'll do let svg equals fs.read file sync and then we're going to go ahead and add this fs in here so we'll do const fs equals require fs and then we'll do yarn at fs in our terminal so we can work with ms great that's in there now so we'll do svg it goes fs.read file sync and we'll say we'll let the file path equal dot slash image slash you know whatever you have here do try ang gold.svg so we're going to read that file path with encoding of utf-8 and for this i found it's it's best to just kind of have it at one line don't use a new line or else it'll get confused here so just just make sure it kind of looks like that now we'll have our svg read in and we're going to call svg.create right we're going to call this this create function by passing in this svg thing here so this is what we're going to pass to our created svg contract so now that we have this deployed we're going to actually need to go ahead and work with it so we're going to do a couple things here we're going to do const svg nft contract equals await ethers dot get contract factory svg nft let's get rid of this svg nft so we're going to need to work with ethers here what this is going to do it's going to get us kind of all the contract information about this svg nft contract now to grab that we're going to need to go back to our hard hat config and at the top we have to do require at nomic labs slash hard hat ethers and we're going to go ahead and grab this pop on a new a new terminal again and yarn ad at nomiclabs hardhat ethers here another one of these wonderful plugins and then we're also going to want to do yarn at ethers so we can work with this ethers package and we'll just test to see if everything's working with our hardhead deploy great things are working spectacularly once we have the contract here we're going to add a signer so an account to sign our transactions so we'll say const signer equals accounts of zero and let's get our accounts actually from const accounts equals weight cherry dot ethers dot get signers hre stands for the hard path runtime environment built in whenever we run one of these hardhat scripts that ethers.getsigners this again just grabs one of these these accounts kind of similar to deployer the reason that we got to do all this extra stuff is because this technically isn't part of the deployment process this is like extra stuff that we're doing we could do all this in a script but we're kind of lazy we're engineers you know we want to automate everything now we're going to do const svgn of t right we're not quite done there is going to be a new ethers.contract and this is going to have this svg contracts interface and api and all the functions it's going to have this this signer here and it's going to have the address so this is the line that actually gets us like an svg nft that makes it easy to make transactions so we're going to say it's the svg nft.address svg nftcontract.interface and then we're going to do one more thing we're going to get a network name and this is actually going to come from a network config that we're going to go ahead and define so typically what what i like to do and this is something i actually pulled from ave is along with our heart head config we'll make a helper hardhatconfig.js and in here we'll have a lot of wonderful little uh helpful tips and we'll have something in here called network config which will just have some helpful variables for each different network for example network three one three three seven this is the hard hat network i'm gonna give it a name a name here of localhost and then for something like uh wrinkby which we're going to work with later as a chain id of four we're gonna give that a name of wrinkby but we'll get to that later so at the bottom we're just going to export this network config so that our deploy script can work with it so we'll do module that exports equals network config and then in here oh sorry keeps auto importing stuff i don't want to auto import sorry um back in here we're gonna do we're gonna grab that network config that we just made so we'll say let network config equals require dot dot helper heart head config now that we have this network config we can get the network name by doing network config of that chain id right and again hardhat network is 31137 chain id and then we'll just grab the name now the reason we're grabbing this network name here is because typically when we deploy to an actual network we're going to want to verify our contract so this has a little green check mark having this green check mark on each scan means that we can scroll down and we can see all the code in here so we're going to want to make it so that ether scan can get that little check mark so i usually do a little logging here saying verify verify with a little new line and we'll say mpx hard hat verify dash network that network name and then this will be svgnft.address then after this typically um this is a plug-in we'll show i'll show you how to do this in a second typically we also add the constructor arguments go to our svgn of t this has no constructor arguments so for this one we can just do exactly what we're doing here verify with this thing right here so for example if we did like hard hat deploy again we're going to get this command that says mpx verify with npx hardhead verify dash network localhost since we're on hard hat and the address of that svg nft contract that we just made this obviously won't work on localhost but it'll work on rink b coven you know mainnet etc we've deployed our svg nft nice we have some svg code we've done all this work to like get our contract we've done some like verification stuff let's actually go ahead and call this create function right because we just deploying this contract will mint this factory contract but we don't have any nfts this is basically our collectable but this create function will create an instance of this collectible right so let's go ahead and do this go ahead now and we'll create a transaction so we'll say let transaction response oftentimes you'll see transaction response as tx sometimes you'll also see transaction receipt as tx but this is going to be a type transaction response equals await svg nft.create and we're going to pass that svg code so svg.create is going to take this new ethers contract that we made right that's at this svg address it has the the api interface of our svg contract and the signer is that deployer that zero excuse me that zeroth account in here we're gonna call we're gonna make this transaction now what we're gonna wanna do is we're gonna wanna wait for that transaction to complete so we're going to say let a receipt or transaction receipt equals await transactions response dot weight 1. we're going to wait for one block for this transaction to go through then we'll do a quick log saying log you've made an nft and then this create function like we showed before is going to create us an nft bring it through this svg to uri thing and then format it to a token uri so we're going to be able to read that from the chain we'll say log you can view the token uri here and we'll do await svg nft dot token uri of zero right or that first one that we create so if we run this now our head deploy we should see something that looks like this hey you can view your token uri here because we're passing it our svg code of triangle.svg right so everything's pre-populated and this is exactly what it'll look like if we were to do this on a real blockchain so if we put this in here we get nothing ah okay i forgot a comma here right base64 it's going to need a comma so back in our function here we just have to add this comma in here my mistake let's try that again hard hat deploy and okay so now we can grab this copy this now that we we have this comma here we'll paste it in and we can see we do indeed get this json object right name svg nft a description looks like we actually forgot a couple commas here all right we have name svg nft this there should be a comma here before description um so this actually wouldn't render on open c but let's see if the the triangle is at least correct correct great the triangle is at least correct uh but let's go ahead and fix this we need a comma here we need to come here let's look back where do we forget our commas ah forgot to come here description comma here and we need to come here so we've got a couple commas try this one more time hardhead deploy all right here we go one more time we'll grab this paste it in there we go much better name srgft comma description right here comma attributes comma image boom now this will render correctly on something like open c we do indeed see our little triangle here so what do we do now well we can now go ahead and deploy this to a real blockchain or a testnet blockchain we are not going to deploy this one to polygon we're gonna we're gonna deploy our next example to polygon but how do we deploy this one to a testnet just to make sure that it actually would work on openc well we're going to go back to our hardhat config and we're going to add some stuff right right now our only network that we have any defined stuff in it is hard hat right but we're saying hey we're going to need to work with rank b so let's add some stuff in here so let's at first we'll add this rink b network i'm just going to delete this for now this again ring p is a an ethereum test net for us to test for free what this would look like on a real chain so we're going to say hey we're going to deploy to this rink b chain in here and we need to do two things here we need to give it a url to connect to the ring b chain and then we also need to do like i said before this accounts thing so the url we're going to grab by getting uh some environment variables this url is the way that we can connect to the rinkby blockchain so i'm a big fan of using alchemy excuse me uh alchemy.com is it.com yep alchemy.com what you can do is you can log in create a new account you'll get a dashboard that looks like this we can hit create app i'm going to call this svg i'm just going to call this nfts description is going to be nfts development environment ethereum and we're going to be on the rink b chain when i hit create app here it's going to give us this new network below again i have a couple others up we can click into it and we can hit view key and this will give us an http endpoint and and this is going what we're going to want to use now here's the naive way of doing this is copying this and just putting some double quotes and pasting it in here that is not what we're going to do that's really bad you never want to hard code these into your into your code instead we're going to set it as an environment variable which is a lot better i for for any serious project i don't put it in a dot env file but a dot emv file is an easy way to set environment variables we have a link in the description to learn more about environment variables and setting them safely we're going to go ahead and use this dot env method for the time being and in here we're going to add rinka b rbc url equals single quote and then we'll paste this in here and i'm going to delete this i'm going to delete this key right after this video so nobody can steal it now we have this environment variable back in our heart head config what we can do is we can grab this environment variable by doing const or consistent const rinkaby rpc url equals process process.emv dot rank b rpc url and then we're going to do this other thing called required.env so we're going to require dot env dot config we're going to this line will load all the environment variables from our dot env and we'll be able to use this rpc url and now we can copy paste this here now we're able to connect to the wrinkly blockchain to deploy smart contracts to it so cool we do have to add this dot env bit here so we'll do yarn add dot env and perfect now we are able to work with our dot env file and we're able to grab this ringby rpc url so that's not hard coded in our our code here now what do we need to do well the other thing we need to do is we need an account we need something that is able to that has ring b ethereum and eventually rink b link so we're gonna do accounts and we're gonna be pulling our accounts from our mnemonic phrase we're going to call it new monik again we're going to create this environment variable called mnemonic that's going to have our mnemonic and then we'll grab with const mnemonic equals process dot emv dot mnemonic so again in our dot env we'll do mnemonic equals and this is where we're going to put our mnemonic like frog cat dog you know whatever where can we find our harmonic well great question young person who's asking me this question um go to your meta mask right you're going to want to need a metamask and you're going to need some test net wrink be eth and some not for this part but eventually we'll need some testnet ring b link whenever i'm looking for test net faucets i always go to this i always just do link token contracts in google it's linked token contracts and the chain link doc shows up and it always has the latest faucets and their locations for each testnet so i'm going to look for rinkaby and we have great test and eth is available here we'll click this we'll send a tweet and we'll get some ether with a tweet we send so we we create like a tweet we post the link to the tweet in here we hit gimme ether and it will give us some ether which is a lot of fun and then we'll get some some ring to eat here again the reason we're using ring p is because open c has a test net that works with ring beat to test everything that we're doing again i've already got a whole bunch of ethan here so we're good to go then you'll want to grab your mnemonic by clicking this settings security and privacy and then hit reveal secret recovery phrase something that i never ever do is when i'm testing i never work with a real wallet okay so for testing here work create a new wallet a brand new wallet um so you can have a brand new mnemonic phrase if you just create a new account it's still gonna have the same mnemonic if you're in metamask you're like oh okay i'll just hit create account it will still have the same mnemonic here right so you're going to want to create a new profile get you know import a new meta mask whatever right just i highly recommend using a different metamask and a different mnemonic from your production one and from any uh metamask that has real money in it so we're gonna need a meta mask there's a link in the description to download metamask if you don't have it and remember we're gonna need to be on this rink be test network right we can't be on main we're gonna be working with ring b so we need the ring to eat and later on the ring b link so once we have that and we put our mnemonic in here i'm just gonna delete it for now because i already have this test mnemonic set as an environment variable but you're gonna wanna put it in here once we have that in our config we need to do mnemonic we'll pull in from our environment variable like so the last thing i like to do here is i like to save deployments to be true so that we save all of our deployments one more thing in our env uh remember how in here we do this little verify thing well in order to do this verify thing we're gonna need to add this hardhead etherscan yes there's a whole lot of these plugins that we that we do so to do it we can do npm install dashes save devs atnomic labs right here or we can just do what i'm going to do which is yarn add dash dash dev atonomic labs slash hardhead etherscan paste it in while that's downloading we're going to grab this require statement and add it to our hardhat config.js so back in our hardhead config i'm going to do bop op require at nomiklabs slash hardhead etherscan put that into the top and then we have to add this little ether scan bit so um i'm actually just going to do it raw in our hardhat.config we're going to do ether scan and then api key oops api key and this is where we add our ether scan api key if you're if your brain's going a million miles per hour and you're already getting ahead of me you might already be thinking ah okay well i'm probably gonna set that in my anv you're absolutely right so we can go to ether scan ether scan we can sign in we can go to this developers this is optional but it's something nice to do we can sign in and you can create an api key so they have some pretty good docs and create an api key but once you have that you'll just put that api key in right here and then we can do the same thing with either scan we'll say we'll scroll up to the top we'll do const etherscan api key equals process dot env dot ether scan api key and then we'll grab this and the api key will be this etherscan api key and we'll need to come here and now with this piece and the api key which again mine's already set so i'm just going to i'm going to delete it for now all right got a whole lot of stuff going on so now that we've added all this in here we can now deploy this contract to the rink b chain how do we do that well my friend we just do hard hat or if you didn't install the short hand mpx hard hat deploy dash dash network rink b that's it we just add dash network rank b uh whoops i have accounts here twice let's uh let's undo that let's grab the save deployments bit put outside of accounts now let's try that command again and you can just hit up you should be able to do everything fine now let's hit enter perfect now we're actually deploying this to the rink blockchain if we grab this little transaction hash here we go to rank b ether scan paste that transaction hash in we can see this is a transaction that's happening on rigby right now and it came directly from our wallet and we can actually see that our mount went down right because it came right from here now this might take a few minutes to actually update it looks like we already went through so back in our code here we see everything that just happened you've deployed an nfc contract to here we have our verify with bitpoint posted out and if we did our ether scan api key and adding it to our config write we can just copy this line paste it here looks like i did something here wrong as well ah this should be uppercase try this again and okay now it's actually going through so we're actually going to so verify this contract that we just created and right now if we look at our contract it says hey are you the creator it's this is what your code looks like it's just a bunch of random letters and numbers which isn't helpful to us at all our verification went through correctly so now if we reopen this page we'll see aha we did it it's verified and it has all of that code in here that we just created right this is exactly our contract so it's split up into the different files right all these different imports and stuff but this is exactly what we just deployed which is great because that means we can read some values on here we can write some values on here we can look at the code you know we can see transactions and everything additionally what we did is in our deploy in our deploy we called create with an svg and then it outputted a token uri of xero so we can actually see that exactly what it outputted we can go to contract read contract we can go to token uri we'll pop that zero in here and we'll see aha here is that exact token uri that we just created on chain we'll grab this uh we'll paste it into another window which it's not gonna work oh well uh quite yet we'll add the comma we'll grab the rest we'll paste that in there and boom this is the token uri that's on chain now we'll grab this image uri again copy that paste into the browser and this is what we should see on openc with this contract so what we can do is we can grab this address we'll go to testnets.openc.io we'll paste this address into the search bar and open c will go hey there's there's something there and it sees indeed that we have an nft that we just deployed and it has a triangle here if you don't see it here you can hit refresh you might want to go to my profile sometimes openc is a little bit slow but boom we can see everything here right we can even see you know an nft based on an svg we can see the name everything we just deployed is here so if you've made it this far you've just done something insane you've created an nft on chain using javascript that it just uses svgs and is 100 on chain this is incredibly incredibly powerful and incredibly awesome however uh this isn't the only reason why we're here now if you've reached this point in this coding journey you should be incredibly incredibly excited and proud of yourself because you've just done something amazing you've created svg nfts on the blockchain you've showed how to get them onto rinkby onto a real test net now that method of deploying these nfts to a chain is going to be exactly the same as deploying to a polygon or any other real chain which we're going to go into now now what we're going to do though is we're going to crank the dial up we're going to answer some more interesting questions so these svg nfts are cool but how do we know that they have any real value well if we could just mint unlimited amounts of these and we get to pick the svgs then that's not really that cool right anybody could just mint a copy of really any nft so to create a true amount of scarcity and a true amount of rarity to these nfts we can add some randomization to what these svgs actually look like this is one of the issues that is currently there for trading cards for example the company behind those trading cards could meant as many of those super rare cards as they want and you would never know the wiser we're going to introduce a method that will guarantee the randomness of the svgs that we're going to make and we're going to randomize these svgs with this method we'll also learn how we can layer these images on top of each other by using this svg method we can layer different paths combine them into one svg and pop it onto the blockchain so that's what we're going to do now number one we're going to randomize our svgs now number two we're going to learn how to be a little bit more creative and layering with these nfts and number three we're going to deploy this to a real blockchain we're going to deploy this to the polygon blockchain a real mainnet and this is going to be incredibly cheap and then number four a lot of people say how do i do 10 000 nft drop we're gonna learn how to do that as well so stay tuned let's get into part two oh and then ideally we write some tests for this as well we have this sample test in here i'm just going to delete this for now we're not going to go over the testing in here however if you go into the readme we will have some tests for both this svg and our randomized svg that we're going to do now let's jump into this more advanced nft method of creating true scarcity true randomness adding this layering component randomizing our svgs and then deploying to a real chain deploying to the polygon blockchain polygon is a blockchain that is currently supported by openc so we should be able to see it immediately on openc as well are you ready because i am let's jump in so we're going to start by creating a new contract we're going to call it random svg.sol and we're going to get started really similarly to how we did our last piece so i'm going to skip over um talking about the same functions we talked about last time so let's just get started spdx license i then to fire mit pragma solidity 0.8.0 we're going to call this contract random svg oops and boom now this is going to be using that same erc721 storage.soul so we can even just copy this paste it in here and we're going to say this contract is erc721 uri storage let's go ahead and create our constructor here instructor and same as the svg nft we're going to give it a name and a token symbol so we can literally just copy paste that add the little brackets here our name is going to be different we're going to call it random svg and the symbol is going to be r s nft so random svg nft that's our little name for it cool now we are going to have to add a whole bunch of these other functions in here but let's do this step by step right let's do this one at a time so instead of us having our create function add svg here we are going to generate a randomized svg right so if we go back to our web3 tutorials here right for svg we're going to scroll down to path right because this is going to be this is going to be the way that we're going to do our randomness you can use your randomness with really any of the things in here but you'll see why in a second why we're going to use path because path is really easy so again with our triangle we'll try this ourselves we're really just going to be working with this move and this these line two commands right we're not going to work with z at all and this is going to look exactly the same so we could do some more lines do 100 you know 100 run it it would look like this we do another line maybe we'll do line 25 25 24 and it'll just be keep doing lines like that right so we're going to set this up so that this path command is going to be randomized between um these these move to and these draw line commands right so we're going to flip between between the two of those and so this is how we're going to randomize this we could also add multiple paths and we can change this we'll do like move 0 to 500 you know line 2 25 123 or 200. and then we'll do another line maybe 100 100. cool we'll get something that looks like this right so we're going to do some different paths right the more these paths the more that they're going to stack on top of each other we can also give them a fill or a color for example like we could color this blue and now it shows up as blue or we could do red and it shows up as red so we'll have these be different colors we're also going to do for our fills we're just going to do transparent and then stroke equals blue so we're going to have the fill be transparent however the lines are going to be colored right and so that's what we're going to do we're going to have them all be transparent but we're going to have some lines but you can see we have all these different commands that we can use to kind of make this more and more random as we go along but this is basically what we're going to do so how do we get this started well let's go ahead and get this started with a create function so we'll do function function create and this time it's going to take no parameters because we want this svg to be randomly created we don't want to have to pass it anything we want this these these to come up naturally so we're going to say have this create function and how are we going to do this what's this create function actually going to do this will be a public function so anybody can do this well we're going to want this to get a random number use that random number to generate some random svg code then we're going to want a base64 to code the svg code and then get the token uri token uri and mint the nft boom that's what we want to do here now there is an issue with randomness on the blockchain so a lot of people when they work with randomness or when they work with or they think about randomness on chain you know in in javascript or python or whatever you'll do something like math.random right now you actually can't do this on a blockchain and get true randomness you can only get what's called pseudorandomness doing something like this or you might see a lot of people do like you know block dot difficulty or something like that this will get you a pseudo random number and i've seen it time and time again people using a randomness method like this them getting hacked and losing you know any and all money that they put into their projects so we want a way to get true randomness however blockchains are deterministic that's definitely not how you spell it but they're deterministic which means that by definition they themselves can't actually get random numbers so we need to look outside the blockchain to get a random number this is where oracles come into play and in particular chain link vrf or chain link verifiably or verifiable randomness function which is a way for us to get a truly random number so we can head over to docs.chain.link we'll scroll down to using randomness get a random number and we'll see some code here this is what we'll use to actually get one of these random numbers here since we're actually looking off chain to get a random number it's actually going to happen in two transactions this chain-link vrf so i'll have a link in the description to these documentations for you to take a look at it a little bit more to learn some more how this actually works but in any case how it works is in one function we make a request to an off chain node right so in one transaction the chain link node is going to take this request generate a random number there's an on-chain contract called the vrf coordinator that's going to verifiably prove that the number is random i know absolutely wild that you can do that there's a little bit of cryptographic magic that goes on if you want to check out the contracts you absolutely should but in a second transaction we're going to call this fulfill randomness function and that's going to return our randomness function here so this is a two transaction process so our create function is actually just going to request a randomness and then once we've returned that function then we can actually you know do everything that we need to do with our randomness so let's go back to our contract and the first thing that we need to do is get this random number here so let's learn how to do this from the chain link documentation so the first thing that we need to do here is we need to import some chain link contract code and i know this you know this version is 0.6.6 we're going to use this for the 0.8.8 version so we're literally going to copy this line scroll up to here oops paste it in this is import at chain link slash contracts src version 0.8 vrf consumerbase.sol and of course we have to add these at chain link slash contracts so we'll do yarn add at chainlink contracts bada bing bada boom so now we have that and then we have to inherit all the functionality with this is vr consumer base right the exact same way we're inheriting this erc721 we're going to inherit this viewer of consumer base code as well so we're going to do comma vrf consumer base now this random svg is both in erc 721 and it is chain-link vrf consumable or workable in order to get a random number we need to tell our contract where this vrf coordinator or this random number checker contract is the chain-link token because these chain-link oracles are paid an oracle gas in the form of a chain-link token to perform their service and then a and then a key hash which uniquely identifies which chain link node we're going to work with and then the fee which varies by network um we're going to be paying 0.1 link in oracle gas to this chain-link node to get this random number again all these numbers are different per chain we're going to be working with polygon which is like .001 link so it's infinitesilly small similar to the erc721 our vrf consumer base has this little constructor here so we got to go ahead and grab this this vrf consumer base and add this constructor to our constructor like so now each chain that we work with is going to have a different vrf coordinator contract a different link token contract a different key hash and a different fee so we want to parameterize all these variables and we can do that by passing them to our main constructor and then pass it from our constructor to the vrf consumer-based constructor sounds like a mouthful but don't worry it'll make sense as we go along here so let's let's even just kind of make this look a little bit nicer here so first thing we need to do is we need a vref coordinator which we're going to pass to our constructor we're going to say address underscore vrf coordinator what else do we need we need a link token so we'll do an address underscore link token token we need a key hash and this is a bytes32 so we'll say bytes32 key key hash and then we need this fee which is a u and 256. so we'll do u and 256 underscore fee fee and now we can pass this vrf coordinator and this linked token to our vrf consumer base so we're say brf coordinator boom like that link token boom like that and what we're going to do is we're going to save this key hash we're going to save this key hash and this fee as global variables here so we're going to say white 32 key hash right 32 public key hash we'll do a un256 public fee and then in our constructor here we'll do fee equals that fee and we'll do key hash equals key hash right similar to how they're doing it here key hash fee random result we're not going to save the random result yet but we'll get there so perfect in the example here it gives us it gives us a vrf coordinator link token key hash for the coven network but we're parameterizing it so we can work with any network that we want now in our create function this is going to call function ha i should spell things correctly this is going to call the chain link vrf and in a second function we're going to return that random number and do some stuff with it so we're going to call that function by doing exactly what it says right here function get random number public returns blah blah blah we're going to do something really similar to this we're going to say function create it's going to be public it's going to return bytes32 request quest id returns by 32 request id to get this random number by saying byte32 request id this is actually the same as initializing this request id variable so now we can just go ahead and say request id equals request randomness and we're going to pass it that key hash and the fee that we got from our constructor right so with this our contract needs to be funded with link to call this function so you'll see how we do that when we get to the scripting section but this is the main piece to get that random number once we get a random number once it gets returned it's going to get returned to a different function called function fulfill randomness the chain link vrf code is smart enough to know okay if somebody calls request randomness i'm going to return in a second transaction to the fulfill randomness function and this takes a byte 32 request id when we request randomness we create this little request id saying hey i am request number one and when we return it we say hey here's request number one if somebody says hey i'm request number two this will return with hey here's the answer for request number two and it also returns a u and 256 random number right so it returns the request number and then that random number now this is going to be an internal function it's called an internal override because the vrf coordinator is actually going to be the one to call this right so we're not going to let other people call this function only the vrf coordinator is going to be the one to call this function and it's overriding an implementation of fulfill randomness we're saying hey this is going to be the real fulfill randomness function that you're going to want to call call r fulfill randomness and cool once we return this random number to here then we can go about our svg business right we can take that random number generate a random svg with it and then do some stuff so this is going to be that random number that we get and what we're going to want to do is we're going to want to do something really similar to here we're going to want to take this random number turn it into a random svg and then do all this other stuff now there is an issue with this there is an issue the chain link vrf has a max gas of 200 000 gas or 200 000 computation units what does this mean this means that if what we do with this random number is sufficiently complex the chain link node is going to go ah that's that's really hard for me that's going to be a lot of work so what we're going to want to do instead is just say hey no problem chain link node just return the random number we will deal with the heavy lifting we will make the transaction we will spend the gas to um to do this for context we're probably going to do something like 2 million gas which is a lot of gas but that's because we're doing a lot of heavy lifting on chain again this method is great because we have all of our metadata on chain but it's not so great because it's definitely more expensive gas-wise so we're going to fulfill randomness this and we're going to use this to just get a random number and then we're going to create an additional function called function function finish mint and this will be the function that actually does the rest of the work with a random number so we'll call create we'll request a random number we'll get a random number back with fifa randomness and then later on we'll call an additional function called finish mint because the chain link vrf is going to have a hard time spending all this gas so when a user creates requests randomness we're going to want to map whoever called this function with their request id that way later on when we when they get a random number we can say ah okay you were um patrick you were requested e7 okay cool this was uh this was the random number that you got returned and here's your token id right so we're going to say we're going to create a mapping called request id to sender we're going to create this at the top here we're going to do mapping bytes 32 2 oops to address and for the demos i just make everything public but you could probably make this internal public request id to sender and we're going to say okay so the request id a request id is going to be equal to message.sender so we're saying this request was initialized by whoever called this function and now we can keep track of them and then assign them to the nft later on then we're going to need to create a token id for this new token that we're created so we'll do unit 256 token id equals some token counter similar to last time which we go need to go ahead and initialize we'll do token counter equals zero and at the top you went to 256 public token counter start with zero boom token id token counter awesome once we get a token id we're gonna do another mapping we're gonna map this token id also with the request id why because again down here we're gonna need to say okay sender here's your token id so we're going to need to also map that to our request id so we're going to create a new mapping called request id to token id we're going to create this at the top we'll do mapping bytes 32 to you and 256 public request id to token id and we'll do request id the token id of that request id it's now going to be mapped to this new token id that we just created we're then going to increment the token counter right so we're going to say token counter equals token counter plus one so that we never have duplicate token counters this is pretty much our whole function we are going to do one additional thing so that we can track this better we can test this better as well so we are going to do one of these events again and we're going to create an event called we're going to omit an event called requested random svg and we'll give it a request id and a token id token id and that means at the top we're going to do an event requested random svg and we'll give this a bytes32 indexed request id and then a uint 256 indexed token id remember indexing an event indexing a parameter an event just means it's going to be a topic and for the testing here i'm not really too worried about gas so we're just going to index everything great this function is done believe it or not this function is done however this function was one of the easier parts so we can make sure that we're doing things right we can try harder hat compile and see if we're great we are on the path to glory things are compiling this makes us very happy these don't do anything but it still compiles at least which is good we've requested a random number great now that we've requested one chain-link node's gonna go ah i got you i'm gonna make a random number for you i'm gonna return it to fulfill randomness so what happens when we fulfill this randomness here well we're gonna have to store this random number somewhere so that we can generate our random svg and then we'll call a function later on to generate that random svg so first in this fulfill randomness we're going to grab the address of the nft owner which is going to be equal to this request id to sender of this request id right because we have this request id to sender up here when we create the request we say okay take tick you know patrick you take ticket number zero and then down here when it says hey who's ticket number zero i go oh that's me and it goes ah here's your random number ticket number zero we also do the same thing for you in 256 token id same thing right we have this requested token id requested token id request id perfect so that's how we can keep track of the token id and the user who called this crate function across these two uh this asynchronous function if you will now that we have the owner and the token id and the random number we can go and call safemint nft owner tokenid so when our svg.sol we did the same thing safe mint message.sender tokencounter uh we just waited to mint the nft until the random number was had right because once we have the random number there's it's we can't actually hack it if we minted this nft back in the create it could be hacked a little bit easier but now that we have the random number exactly what the nft looks like technically has already been done we just haven't spent the gas to to do that and if that doesn't make sense don't worry about it just keep following along now we have a token id we have a random number but we can't do this we can't call this you know generate random svg we can't call this because this is going to cost a lot of gas chain link node at the moment depending on the network i won't be able to handle that load so we're just going to save we're going to store this random number with the token id so that we can do that computation later ourselves so we're going to create another mapping token id to random number of token id it's going to equal to that random number that we just got so of course at the top i'm going to do a mapping of ui 256 2 you went 256 public token id to random number that way we have this mapping now i'm also going to omit another event it's really good practice actually whenever you do a mapping to omit an event we might want to do one for these as well but we're not going to we're just going to a mint created unfinished random svg we're going to pass it the token id and the random number this takes a token id and a random number we're going to scroll up to the top make another one of these event paste we'll do a uint 256 indexed token id and we don't really need to index the random number so we'll just do a uni-256 random number and then congrats this is all we need to do here that's our whole function so let's see if this compiles with hh compile perfect compiles fantastically so now we can move on to finish mint where this is going to be the bulk of what we do right so in our create function call and i'm going to remove these comments here just because to make our code look a little bit nicer we create by calling our requested randomness right we go ahead we request a random number we're going to reserve a token id we get it fulfilled and we go ahead and mint and assign that token id we have this random number all we have to do is finish using this random number to generate some random svg stuff right we have this finishment function and it's going to take a unit 256 token id so we're going to say hey we're going to finish minting a specific token id because the rent it's got the random number it's already been minted all we got to do is add the token uri to it really so we've got to do a couple things we have to check to see if it's been minted and a random number is returned right we gotta check that then we're gonna have to generate some random svg code then we're going to turn that into an image uri and then we're going to use that image uri to format into a token uri and then we're all set here so these are the main things that we have to do now we could do something like import you know dot slash what is it svg nft dot sol and you know borrow those functions but we're just going to go ahead and rewrite some of those functions again just just in case you know you skip to this section and you want to be able to follow along here let's go ahead and we'll do some checks here so first thing we're going to do we're going to require the bytes bytes of the token uri of the token id dot length is excuse me is less than or equal to 0. we're going to check first this is going to check to say hey is this token uri already set if it is we're going to say uh uh token uri is already all set can't do that what are you doing being crazy so if it's already set we're going to not let them call this finishment function then we're going to require the token counter is greater than the token id because if this is less than the token id then we know that we're minting some crazy token that hasn't actually omitted yet we're going to say hey you need to be greater than tokenid otherwise token id has not been minted yet and finally we're going to require token id to random number of the token id we're looking to finish is greater than zero if it's not greater than zero this means that the chain link oops the chain link vrf probably hasn't responded so we'll say need to wait for chain link vrf cool so we're checking to see if this has already been done we're checking to see if this token id even exists and we're checking to see if a random number for that token id exists perfect let's move on so first thing we're going to need to do we've done this checking bit this is like check we did this first part right how do we we'll go like this check we did we did this first part let's even we'll blank these ones right check do the first part awesome now we're going to generate some random svg code so first we're going to need that random number so we'll do unit 256 random number and this probably should have an underscore actually yeah okay we'll do an underscore underscore underscore underscore boom we should probably do that for these two but yeah whatever it's not a big deal you know you can use kind of whatever code conventions that you want but yeah ideally you do underscores for those but anyways finishment we're going to need to get this random number from token id to random number right that mapping that we used up here we're going to use that again to just grab this random number back and now we have this random number and we can use this as our seed to generate some svg code so let's do that we'll do string memory svg equals generate svg we of course don't have a generate svg function so we're probably going to have to build one once we do generate this svg again we're going to do string memory image uri equals svg to image uri svg and then once we have that image uri we can go ahead and do string memory token uri equals format token uri the image uri right so i know none of these functions are built yet don't worry i'm just saying here's what we're gonna do we're gonna get the svg turn it into an image uri add that image uri to our token uri and we're going to go ahead and set token uri of the token id to this token uri and then we'll go ahead omit created random svg we're gonna give it a token id and an svg so we're gonna emit this event that we haven't created yet we'll go up here event created random svg we'll give this a uh 256 indexed token id and a string token uri okay so i know none of these functions are built and it's going what are you talking about oh and this is like this this is like this it's going this doesn't exist this doesn't exist this doesn't exist but this is essentially what we're doing right so this is going to generate some random svg code then we're going to turn that into an image uri with this line right here then with this line we're going to go ahead and use that imagery to format into a token uri right so these are the functions that are going to do all of that so let's build these functions one at a time the main one that we're going to focus on is generate svg right because svg to image uri and format token uri are what do you know svg to image uri and format token uri right these are going to be exactly the same so we can copy paste them or again we could do the import thing but we're not going to for this one but if you're going to do this in production you know that's a much better method but anyways i digress so let's create this function generate svg and then as far as the code goes we're going to be home free so it's going to take a u and 256 random number uh of course this is going to be a public view function and it's going to return a string memory uh we'll call it final svg so we've initialized this final svg and that's what we're going to save to so how do we create this random svg well this is the million dollar question here right so this is kind of the sample of of how we're doing this stuff let's look back here and think how we want to do this well let me even move this over we're probably going to want a random number of paths right so because each one of these paths could be a different thing right we could make a red path here we could do this like 0 50 right run get some different lines each one of these we want these different paths to make different lines so we're going to give it some a random number of paths this hypothetically could be an infinite number of paths here right to save on some gas we're going to cut down on the number of paths we're going to create a max number of paths here so at the top this is something that we're going to do right because we don't want this to be like a billion paths here a billion of these different types of lines we're just going to say we're going to create a unit 256 public we're going to call it max number of paths in our constructor we'll set this to something like 10. we'll say at maximum we'll do 10 paths right the bigger this number the more gas we're gonna have to spend because if we have you know a ton of paths here right if this is if this ends up being our code this is gonna be very expensive to put on chain versus this is gonna be a lot cheaper so we'll just keep it maximized to 10. then inside of here we're going to have all these these d commands right telling us what to do same thing we could get something like you know like this which the more commands the more expensive this is going to get as well so we're going to want to create some maximum number of commands as well maximum number of path commands so additionally with max number of paths we're gonna do you at 256 public max number of half commands and for now we're just going to hard code it to five max number of path commands equals five we're also going to want to pick the height and the width so they have it to these we're just going to do 500 we're going to create another variable here and then we can even label this we'll say these are the svg per am meters right like so we'll do a u into 256 public size we'll say size equals 500 right so we'll default to 500 500. we'll choose the path command that we want to use right because remember we have all of these but we're just going to keep it simple we're just going to use just these two move to inline two because they both take only two parameters so we're going to create a little string array called path commands so we'll do string [Music] array public path commands and you'll notice this isn't storage excuse me this isn't memory because this actually is in storage here so we'll have this path commands up here and ideally we probably would want to make this immutable to save on gas but again you do gas optimizations another time and down in our constructor we'll do path commands equals m comma l because we only want to do the move two in line two and let's also primarily some of these different stroke colors like blue red etc so we'll create one more string array public colors i will do colors equals we'll do red blue green yellow black and white so these are going to be the max number of colors the max paths the size max commands and all this stuff we could hypothetically go insane with this right and make this you know way bigger we could make more paths more commands more path commands more colors whatever we want um and it would just increase the number of variations that we can get with this right here we already have a ton of variations that we can get because we're gonna be choosing some random number of paths uh with some random parameters with some random colors uh we already have we're already like millions and millions and millions of different combinations here so i'm happy with how random this is going to be although we've identified the types of commands that we're going to use for this svg let's go ahead and generate some of this svg stuff so first let's get the number of paths that we're going to use right let's use this random number to pick want to pick a you know a number of paths a u into 256 number of paths and the way we're going to get this number is by taking our random number and doing this mod function so we're going to random number mod max number of paths a plus one so that it always has at least one path what this mod function is gonna do is it's gonna do what's called you know modulo arithmetic so let's say you know you had a hundred divided by ten well a hundred divided by ten is going to be 10. this divides evenly there's no remainder so 100 mod 10 excuse me 10 would be equal to zero however if we were to do like 100 divided by 11 or excuse me 101 divided by 10 we would get like 10 points something and the remainder would be one right these divide evenly but there's going to be one that doesn't divide evenly so 101 mod 10 is gonna be equal to one there's one remainder there's one left over right similarly you know 102 mod 10 was going to be 2 however 110 mod 10 is going to be back to zero because these divide evenly so that's how the module function works and that's how we can pick a random number out of our max paths to get kind of what we're going to get right so our max paths is what it's 10 so we're going to get between 1 and 10 here 1 in 10 paths and that's how we're going to get our random paths so now that we have the paths right let me let me just undo all this now that we have the number of paths that we're going to get let's go ahead and start you know building this svg so we're going to do final svg again it's already been initialized with our little returns function here final svg is going to be equal to a string that's going to start with again what do we what do we do for this one it's going to need to start with this svg tag xml ns and this oops xmlns this this thing right here so i'm literally going to copy that go back over here paste it in and we're going to want to take these double quotes and turn them into single quotes for the solidity here so yeah so anything inside of these double quotes is going to be single quotes right so these are all going to be single quotes instead of double quotes and then we're going to say inside this little svg bracket we're going to do height and width so height is going to be equal to we'll do another another single quote here and we're going to do a little comma because we're going to do some string concatenation here comma size right we want this to be 500 however size is a uint 256 and not a string so we're going to actually have to create a function called uint256 to string and i'm just going to copy and paste that i'm not actually going to show you guys how to do that i copy pasted this from stackoverflow so i'm i'm literally just i'm not i'm not going to walk you through this this is the function i'm using from uint to string and we're going to wrap this size into u into string link in the description on how to get this this function here there's a stack overflow question you know if you literally just google you know convert uint to string and solidity you'll come across this it has this this function here which is what we're using and uh yeah you use this so copy paste it into your code uh i think ideally this will eventually turn into a library but for now just copy paste it you went to string of the size we're going to go back to some string stuff here and then i'm going to turn on oops and turn toggle word wrap on just so that it wraps around and it's a little easier to see but these are all still on the same line as you can see kind of with vs code here so we'll do a comma here so we'll just do a width equals we'll do a single quote close that off comma again you went to string size comma we'll start back the string up and then we'll close this bracket like this so of course since we're doing this string concatenation we're going to do avi.n code pact open and close bring it like this little semicolon there this is just going to be basically this this first line right with that xmlns equals you know whatever blah blah blah blah so cool we have this first line here we're going to need to add the paths we're going to need to add the closing tag but for now we have the first line great now what are we going to do well we're going to loop through this number of paths and we're going to generate a random path from again this random number so to loop through this we're going to do a for loop we'll say 4 uint i we're going to start with zero i is going to be less than number of paths i plus plus this is how you do like what's called a for loop in computer science um you can just google like what is a for loop if you're unfamiliar with this but now we're going to generate a random path for each path however i want a slightly different random number for each one of these paths otherwise it might generate the same path for every single one so what we're going to do is we're going to use this expand concept which you can actually learn about again in the best practices here how to get basically multiple random numbers from a single random number so we'll do something like u and 256 new r and g equals we're gonna do some crazy stuff you went 256 256 abi dot encode not encode packed random number i so i know there's you might be saying what the heck is going on here um basically we're we're hashing this cactus 56 is the hash function we're hashing this random number mixed with the the path number that we're on into a new number casting it as a u and 256 and saying hey this is our new random number this is fine because nobody can snoop this right nobody can say oh i know what this this randomness is going to be you know once we return the random number it's already decided it's already deterministic what that's going to be and no but nobody can snoop this so this is a case where doing something like this is okay you wouldn't want to do this a method like this on just the create function because then some people could brute force and cheat and do some do some very nasty things so once we have this new rng what we can do is we can generate the path with this new rng right because we're using one random number to get the number of paths we use another random number to generate the path itself so we're going to do string memory path svg equals generate path yes we're going to create a new function and we're going to pass it this this new rng here and once we get the path generated we're again going to do final svg equals and we're going to concat this new path with our svg so we're going to say string you know abi dot encode pact because this is how we can cat in solidity final svg with the path svg so once we generate the path which again we're going to define this in a second we concat them together and we do that for all the different paths once we're done we're going to do one we're going to add a closing tag right so once we've uh once we've made all these paths and added them we're just going to add this closing tag and then we're done right so then we can do final svg equals string again we're do gonna do some concatenation abi dot encode pact final svg comma and we're just gonna do a closing svg tag and this is what's gonna get returned right because in our function declaration we said we're going to return some variable of type string memory called final svg and boom this is it's going to be right here all right so now we just have to create this generatepath command and i got a hint for you we've got to do one more function after this but we're so close we're right there so we're going to function let's find this this generate path this is going to take a un256 random number and what's this going to do it's going to be a public view that returns a string memory path svg beautiful and we're going to do something really similar to this generate svg code so this but we're going to focus just on generating the path piece here so first thing we're going to do is we're going to pick how many commands that we want right so we pick the number of paths now we're going to pick the number of path commands inside of our path here so we're going to do unit 256 number of path commands equals random number mod max number of path commands plus one we're going to use the exact same methodology here we're going to start our path svg with this bit right here boom so i'm even just going to copy this equals this and of course we're going to turn this into a single quote and then once again we're going to do a for loop through this number of commands number of path commands so we're going to do four you into i equals zero i is less than number of path commands i plus plus and let's get into it so we'll do string memory path command equals generate path command and yup you guessed it we got another function this is the function that we're going to have to make but before that once again we're going to create a a new random number so we're going to do unit 256 new rng again which is going to be equal to this you and 256 catch 256 abi dot encode random number comma and we'll do we'll do size plus i plus i right so this random number uh this random number will be different than this one because we're going to hash that random number with the size plus i right so it's something totally different than what we're hashing with up there great and then we're going to take this new rng pass it to a function we have yet to build called generate path command all right do i spell this wrong i could check to check excuse me generate path command once we have this path command once we have this random path command we'll do path svg equals string abi dot encode pact path svg comma path command okay so once we have all the commands put together we're going to add fill transparent and then a color we'll do string memory color equals colors underscore ram [Music] dum number random number mod colors.length to get that random number which could be to get that random color and then we're going to put it all together so we'll say this path svg right this whole path is going to be start with this add those path commands and then we're going to add this the fill and the stroke color so pass svg is going to be a string we're going to concatenate some string stuff and code packed path svg comma we'll do the single quotes inside of some double quotes fill equals transparent parent stroke equals and here's where we'll do comma we'll do that color that we just created and then we'll do the double quotes single quote we'll close this off okay and this path svg will get returned because again in our function declaration we're saying hey a variable named path svg is what you're going to return so we have one more command we got to do this generate path command so we'll do function generate path command you might start to suspect what this one's going to look like this is going to take a u and 256. random number this again will be a public view and this is going to return a string memory path command this one's going to be a little bit easier all right so we're going to grab our path command by doing once again our mod function right we're going to look at all these path commands which we only have two we're going to do exactly what we did with colors and we're just going to randomly pick one of the two using the mod function right so this is index 0 this is in x1 sorry i didn't explain what we did with the colors but we modded it to get a number between zero one two three four five between zero and five and if it's zero it's red one's blue you know green yellow black et cetera so we're gonna do the exact same thing down here path command equals path commands random number mod path commands dot length once we have a path command which again it's just going to be m or l what are we going to do well we're going to have to get some random parameters to add to it right like how in here this says the m has 150 and 0 ls 75 200 some x and y coordinates for these so we're going to un-256 parameter one is going to be once again we're going to use this random number to create another random number so we'll do u and 2p6 check 256 abi dot encode random number and we'll do size times two or something like that right and we'll mod this by the size because we don't want this these parameters to be bigger than the size right so our max size right now is 500 if this went to like 5000 um our svg code would be like what are you talking about this is this is only 500 by 500. so we're going to do the same thing i'm just going to copy this line for parameter 2 but i'm going to do size times 2. you know our size times 3 just so that these are different so this will be times 2 times 3 and we'll call this parameter 2. and now we'll get the path command and now we'll set the rest of this path command we'll say path command it's going to be string abi dot encode pact of itself path command comma a space right because we're going to do a little space in between these parameters again we have parameter one parameter two but they're uiints we need to make them strings so we're going to do you went to string for a meter one comma another space you went to string parameter two and that's going to be all of our path commands here right and our generate path is going to go ahead and close off you know the path add the field transparent stroke and all that stuff and oh my goodness that is a lot of code that we just wrote has a lot of code so awesome though generate svg is going to generate some paths generate some random path commands and oh my goodness we have a way to generate some svgs this is going to be some svg that looks just like this triangle thing right or just like this right here once we have this we can do svd to image uri and format token uri and guess what i'm just gonna copy paste so svg to token uri if you didn't watch the original part of the video just check out the github that we're working with and copy this because i'm not going to go over it again so we're going to paste this this function as we did the image uri and i'm even just going to delete these giant comments because it's making our code a little bit less readable we are doing this base64 stuff so similar uh to this first contract we are going to copy this this import bit import base 64 soul right so we can do that stuff and then this is completed now we just got to copy this format to token uri function which boom is right here add it in we're gonna delete this guy we're gonna format this a little bit nicer move this back here and oh my goodness we have everything holy mackerel does this even compile though let's hope so i'm praying it compiles it doesn't compile where did i mess up compliation failed wrong argument count for function called three arguments given but expected one ah i missed a closing parenthesis here and i think we're good all right compile and i had an extra one here so this should just have three over here let's try this now oh my goodness we have compiled we have done it now we just got to write some deploy scripts let's do this so we have our deploy svg nft we're going to do a lot of similar stuff that we did in here luckily we've already got our hard hat config set up we've got some envs set up we're good to go so let's go ahead new file say o2 deploy random svg.soul okay and let's get to work on deploying this all right so we're going to start exactly the same way module.exports equals async like this get named accounts this is how we're going to get those accounts deployments that's how we're going to do all of our deployments and get chain id which is important for getting a chain id and this is not a solidity file this is a javascript file see i didn't want to do javascript so bad i just you know would rather do solidity anyways um we're going to start this off the same way so we'll do const deploy we're going to add this new thing called get we'll talk about that in a minute log equals deployments we'll do const deployer equals await get named accounts const chain id equals await get chain id rate really similar similar start here now we have to do a couple of different things here though so in here we said okay cool now let's deploy right however in in this new contract in this new s-v or random svg when we deploy we're passing some arguments right in our constructor we're passing a vrf coordinator a link token a key hash and a fee and these change to change chain so we're going to need a way for us to when we deploy for us to know which of these that we're working with now i'm going to kind of quickly go over mocking i'm not going to go too deep into it but if we are on a local chain like hard hat what is the link token address what's the link token address well the answer is answer there is none so what we're going to do so what we do is deploy a fake one so we deploy a fake one for our local chain so we can test and work with it but but for real chains we use the real ones so that's what we have to do when we're working on our local hard hat we're going to deploy a fake link token this is called mocking and if we're going to work on a real chain we're gonna use the real token okay so let's do that so first we're gonna say if chain id is equal to three one three three seven then this means means we are on a local chain this means we're on a local chain and we want to go ahead and deploy and work with some mock tokens right a mock vrf and a mock uh link token right because right because this contract vr coordinator won't have been deployed this link token also won't have been deployed so we're going to deploy mock versions of that typically i put all my mocs in a different deploy script called zero zero deploy mox.javascript uh and i have some stuff in here that says okay are you in a local chain if yes this is the script that will deploy those those fake contracts so before we get into deploying our random svg we're going to deploy some mocks so we are going to start this the exact same way module.exports equals async boom get named accounts deployments get chain id and let's do it so we'll do const deploy comma log grab those from deployments we'll do const deployer from await get named accounts and then we'll do const chain id equals await get chain id so now same thing we're going to say if chain id is equal to three one three three seven if we're on that hard hat local hardhat network we'll do a quick log local network detected deploying mox and we'll go ahead and deploy that fake link token and that fake vrf coordinator mark so these are contracts that we're going to have to deploy a link token contract and a vrf coordinator contract right now we don't have those in our contracts folder right right now if we look in contracts there's nothing in here normally what people will do is they'll create a new folder called test or tests and that's where they'll go ahead and add these um these these bits in i know that i uh can just pull a link token contract right from a chain link token package so i'm just gonna do this link token.sol you can grab this this test folder from there's a hard hat starter kit on github right here that has in its deploy folder excuse me in its contracts folder it has a test folder you can literally copy paste these that'll work perfectly or you can just you know follow along do it like this but literally all that's going to be in here is you know spdx license identifier mit we're going to use the original link deployment so we'll do pragma solidity carrot 0.4.24 and we're just going to import at chain link slash token slash contracts slash v0 contracts slash v 0.4 link token dot sol and that's all we need this is going to import this link token this link token contract that has all the link token stuff in it we do of course need to add this then yarn add at chain link token so that this will work and since we're using this 0.4 version of solidity in here we'll go to our hardhead config we'll scroll to the bottom right now we only have one version of solidity we're going to go ahead and change that return this into a little bracket here and we'll say compilers and we'll give it a list of compilers in here so first version is gonna be version you know 0.8.0 comma version 0.4.24 i know that we're actually going to use a couple different versions so i'm just going to put them in here now version 0.6.6 comma version 0.7.0 we're going to save and this is how you can have compilers you know across different versions in your hard hat stuff so boom lovely so we've imported the link token perfect now we're going to do the same thing for the vrf coordinator or the vrf coordinator mock so we'll do new file vrf core de nator mach dot soul and we're going to do the same thing you know spdx lie sense identifier mit pragma solidity this one's going to be carrot 0.6.0 or 6 or whatever you want to do or 0 whatever it doesn't matter um and then we're going to import this one's actually going to be at chain link contracts src v 0.6 slash tests slash vrf core tormach and that's all we need and don't worry about if your linter freaks out here it's don't worry about them but that's all we need since we're going to import these contracts this is the same as just plopping this entire contract into this file so now we have both a link token and a vrf coordinator mock but they're also separate from kind of our main contracts and we know ah okay these are really just for testing so in our deploymox now that we have those contracts we can go ahead and deploy them so we'll do const link token equals await deploy link token and we'll say from deployer comma log true great and then we're going to deploy the vrf coordinator mark we'll say const vrf or vrf core denator mach await deploy vrf coordinator mock comma from deployer logs true and this one actually does take arguments let's see if we go to github chain link contracts contracts src v 0.6 tess vrf coordinator mock you'll see in its constructor it takes the link token address as its parameter so we'll do that by doing args and we'll just say link token dot address that's how we pass the address in and that's really all we have to do log mox deployed deployed and then we're going to want to do this one last thing at the bottom module.exports.tags and we're going to do we're going to add all s rsvg and svg what these tags will allow us to do is when we actually deploy any deploy script that's tagged with you know whatever tag we give it to do that right so if we did hard hat deploy dash dash tags svg right now all this would do would be deploy mocs and actually this is a good way to test and see if it's working it looks like it's not working looks like i spelt link token wrong token try that again tags svg and perfect this is this is exactly what we've done and that's all we did because uh this only ran the deploymox script because right now deploymox is the only one with this svg tag i don't believe we added that in here we'll add that to our um deploy svg in a minute but this is kind of a really nice feature uh for working with this deploy thing anyways so now we have some mocks deployed in our deploymox now we can go back to our main uh you know o2 of deploying this this randomness thing so if we're on the local chain we're going to want to use those marks that we deployed earlier and this is where this this get thing is going to come in so we're just going to say let link token equals await get that link token that we already deployed right isn't that convenient we're just saying hey just just grab it we already deployed it just just go get it same thing with vrf core cool and that's it so that's all we have to do now if we're not on a local chain we're going to need to get the link token address and the vrf coordinator address so outside of this we're going to initialize those variables we'll say let link token address comma vrf core nator address and in here we're going to say link token address equals link token.address vrf coordinator address equals vrf coordinator coordinator you're according to mock dot address if we're not on a local chain if we're on any other local chain we're going to need these values stored somewhere where do you think we could find those ah oh my goodness patrick i remember we have a helper config that does exactly this so what does this look like well if we're on a local host we don't need the link token and the vrf coordinator if we're on rink b we are going to need those so we'll go to contract addresses of using randomness we'll go down to rink b we have a link token and a link coordinator so we'll grab this we'll copy this link token address and for network four we'll say link token equals excuse me link token it's going to be boom that right there brf coordinator and we have the link token and vrf coordinator for ring b as we'll say we'll grab this that this network config object right by at the top of this we'll say let network config equals require slash helper hardhead config now we'll have this network config in here and we'll say else link token address is going to equal to this network config at this chain ids index of link token and we're gonna do the same thing for the vrf coordinator address so we'll copy this paste it here and this will be the rf now we got to add of course the key hash and the fee now if we're on a local network these don't really matter so we don't have to do this kind of if stuff here right we can just do const key hash equals network config chain id key hash const fee equals network config chain id fee in our helper config we're going to do key hash which again we're going to grab from right here chain the documentation we'll grab that key hash pop it in here so i need a comma right here and then we'll do fee which we're gonna do 0.1 link which is going to be one one two three four five six seven eight one two three four five six seven eight nine which again this is in you know this is the joules slash way you know whatever you want to call it and one two three four five six seven eight nine ten one two three four five six seven eight that means the decimal place is right here right so this is equivalent to 0.1 link for this perfect now i usually just copy paste these two for the localhost because again for localhost or hard hat it doesn't matter now we have the fee now we've got all this stuff here because this constructor takes all these arguments i'm just going to combine them together into a variable called args and i'm going to say args let args equal this list vrf coordinator oops link token address key hash and fee and we're going to deploy these the exact same way we deployed everything else so i like to do a little log here saying hey let's get it started let's get it started we'll do const random svg equals await deploy and i know i'm oscillating between single and double quotes here random svg comma do the args here so we'll say again from deployer args is going to be this argus list we just made the arguments and we're going to say log true so this if we just do hardhat deploy now it's going to deploy everything it's going to deploy our mox svg nft and a random nft if we just want to deploy this random nft and all the random nft stuff including the mox we can just add this tag here to to this deploy script so we do module.exports exports.tags equals we'll say all and rsvg and then while we're here in our o1 we'll do module.exports.tags equals we'll say all and just svg so zero one will be svg zero two will be rsvg so we do hardhead deploy dash dash tags rsvg and this will deploy the mocks because these have the rsvg tags and it'll deploy our rsvg so let's go ahead and run this on the hardhat network we'll see if this works we're running into an issue deploy script.func is not a function because this is module.xsports not export cs let's try that again how to deploy tags rsvg chained id is not a thing so let's make this chain id let's try that again got another error in here what's it saying can i read property two hex string of undefined i must have oh yep here it is that should be key hash i'm clearly over tired here and boom okay cool so this is where it's being deployed on a local hard hat network awesome are we done though absolutely not we're just getting started so we'll do log you have deployed your nft contract yay and we'll once again we'll do that verification process so we'll do const network name equals network config chain id name and then we'll do log verify with m mpx hardhead verify dash network network name network name ran svg dot address and we're going to do some fancy stuff because then we have to add all the arguments but we're going to do args.2string so it's going to take this this list up here turn this into a string but we're going to then replace this with a little regex here replace all the commas in that string with spaces so that'll say hey this is how you're going to verify it we'll even run this again to make sure it works yep verify with npx hardhat this is the contract address and here are all the arguments for the constructor ok now we're going to want to interact with this contract right we're going to want to call the create function we're going to want to fund it with link so we're going to want to interact with this random svg the first thing we need to do though is we're going to need to fund this contract with some chain link token in order to use the chain link vrf so we'll go ahead and do fund with link so we'll say let network id we're going to do await so we're going to fund it with this this fee amount right that's how much we're going to fund it with maybe maybe double it maybe that times two or something uh we'll just go with with the fee for now so in order to do this we're gonna have to do const link token contract equals await ethers.contract there's going to be ethers.getcontract factory of the link token token and then it's probably going to yep it's going to do that don't don't let it do that don't let it import ethers for us here accounts equals await hardhat runtime environment at runtime environments don't don't do headers please okay you're going to do headers heart runtime environment dot ethers dot get signers called signer equal signer equals accounts of zero then we'll do const link token equals new ethers dot contract of the link token address link token address link token contract dot interface and the signers excuse me and the signer and what we're going to do is we're going to do let funding transaction equal await link token dot transfer we're going to send rsvg.address that fee amount we're going to do fund await fund transaction.wait we're gonna wait for one block to happen great and now our contract will be funded with link and that's all we have to do all right next now we're going to create an nft by calling a random number we're getting so close so let's get our contract here we'll do const random svg contract equals await ethers.get contract factory random svg we can just do const random svg equals new ethers dot contract random svg dot address random svg contract dot interface and then signer and now we can just do let creation transaction equals to random svg dot create uh i'm also going to pass a gas limit i know we haven't done that in the past but we're going to want to pass a gas limit here of 3 100 000 and we'll do creation tx dot weight for one and we'll say let receipt equals creation tx.weight so waiting for this transaction to go through now we are going to do something special this with this receipt here with this receipt we're going to grab the token id and you're going to see why we're going to need that in a minute so in our random svg remember how we omitted some events right on our create we emitted an event that had the request id and the token id of both of them being both of them being indexed so i know that in this receipt's logging or in its events from its topics aka its indexed events i can get that token id from this transaction receipt so i can do let tokenid equals receipt.events and i know that this is the fourth event because i know the chain link code also emits a whole bunch of events so if you're working with other imported contracts you just need to keep track of if and when they admitted events but i know and excuse me um topic zero is always going to be kind of the hash of this whole thing topic one is this one and then topic two is this token id so i can do dot topics two we're also getting it use now that we have this token id what we can do is we can say we can do a quick log and say you've made your nft this is token number and we'll do token id dot to string and then we'll say log let's wait for the chain link node to respond because remember we do have to wait for that second transaction to happen now if we're on a local chain there is no chain link node right so if we're on a local chain we're just going to pretend we're going to mock that there's a response so we'll say if chain id equals yeah actually we'll do it does not equal 3 1 3 which again is we're saying if it's not a local host we're going to do some stuff otherwise we'll do some other stuff so i'm actually going to start with the local host stuff even though it says you know even though this looks kind of backwards so else this is saying if we are on a local chain right what do we want to do we're going to say const vrf core de nator mach equals await deployments dot get vrf coordinator coordinator mock vrf core dinator equals await get ethers.get at vrf comma vrf coordinator mock dot address comma signer using that same center we're always using and what we're going to do is we're going to pretend to be the vrf node ourselves so if we're on a local chain where there is no chain link node we're going to say we're going to be the chain link node we're going to be this dummy chain-link node so we're going to say let vrf tx equals await vrf core denator and now we're going to pretend to be the chain link vrf node and return this response back to our smart contract so we can actually go check out this contract on github this vrf coordinator mock again contracts chain link contracts source v6 test vf coordinator mach and the function that it actually uses to return through that vrf coordinator and return the random number is this function call back with randomness so we're going to pretend to be the chain like node and call back with randomness here so we're going to give it a request id a random number and the address of our consumer contract which in our case is our random svg so we're going to do it that by dot call back with ran dumbness and we're gonna have to pass the request id randomness and consumer contract so the same way we got the token id right in here in our random svg we also are indexing the request id right here so we can grab this from the topics as well so we'll do callback with randomness i'm going to turn toggle word wrap back on receipt.logs the fourth event or the fourth log which again which i know up here we did events but i just kind of want to show you that you can do events or logs they're the exact same thing like i said we know that this is the fourth log aka the third index log or third index event dot topics and one right because the first of the first index topic is always going to be the event itself so the zero with index is the event itself and then the first topic is going to be this request id great so that's the request city we'll give it a random number in this case we'll do seven seven seven seven right or whatever we want and then we're gonna pass it back to the random svg.address then we'll do await vrf tx dot weight 1 and then our random number will have been returned right so at this point this function fulfill randomness will have been done that token id will now have a random number associated with it so we can go ahead then and call this finish mint function so we'll do a quick log saying now let's finish the mint and we'll do let finish tx equals random svg dot finish mint and we need to pass it we need to pass the token id that we just created which again we're getting from up here so we're going to pass the token id and this one we're also going to need to add a manual gas limit otherwise it might break and yep we're going to do a big number we're going to do 2 million so 2 1 2 3 1 2 3. 2 million for the gas limit then we'll do a weight finish tx dot weight for it to be included oh and this this should also be an await excuse me uh wait and then our token uri should be complete right because this finish mint once this function goes through should return us a token uri for that token so then we can do log you can view the token uri here and await random svg.token uri of token id right or zero and that's it for us kind of mocking or pretending to be the chain link node so this is gonna be everything that we're gonna need to do now is hardhead deploy dash dash tags rsvg and we'll see if we did this little script right it looks like we didn't get contract factor is not a function factor re that should be a function let's try again this should also be factor re let's try this again and whoops we should not be doing this require my vs code was a little aggressive and just kept pulling that in so let's try this one more time creation tx.weight is not a function we probably just yep we need to await this here and then we also need to await creation tx.weight i'm going to add all these these fun little weights in here and we have another issue the rf coordinator mark is not defined coordinate tormach how about that that one defined yep that one looks like that's defined a couple typos and bada bing so we have we're gifted this output here so we're saying verify with this verify again i you know needed to to make this a little bit nicer but it's fine let's wait for the chain node to respond now let's finish the mint and here is our token uri so if we grab this paste into our browser we do indeed see the metadata pop up and we'll pop our image urine here it looks like we had an issue error on line one at column 614 opening and ending tag mismatch path line 1 and svg so if you get something like that it means that we did something wrong ah right here this actually needs to be a backslash instead of just a closing point here so let's go ahead and fix that we'll go ahead and rerun this harnett deploy dash tags all right let's try this again we'll grab this token uri we'll paste it in here we'll see if this image uri looks good we'll copy that and boom we have a random svg created obviously this is pseudorandom because right now we're just always using 777 but it's a good way to test locally you know what this is going to be now that we've tested this locally we know that this is going to work we'll add our code to do this on a real chain and it's going to be pretty much the exact same as this except we're not going to have to do any of this mocking stuff so all the first thing that we need to do is we need to actually await for the chain link node to respond right we could add like a subscriber that listens for events we're just going to take the dumb approach here and just wait some number of seconds so the last time i tested this ringpie was being really slow so we're just going to wait an obnoxious number of seconds to make sure we give it plenty of time so we're going to do await new promise r set timeout r comma 18 one two three eighteen zero one two three this is basically time.sleep in python and we're gonna wait for 180 seconds uh we're just going to give the chain link node plenty of time to respond if we're working on a real chain then once we do that we'll say log now let's finish the mint 2 3 similar to what we did down here and then we'll do let finish tx equals await random svg that finish mint token id comma again let's add this gas limit in here up to million and then we'll do await finish tx dot weight of one block and then this should be all done right this is a lot easier obviously because we're not mocking on our local blockchain right this is just like hey we're just interacting with the with the chain straight up so now we just do log you can view the token uri here random svg dot token uri of zero or excuse me token id and that's it so now we have all of our code in here to actually deploy this to a test set and to a main net so let's go ahead and do that right so in our hard hat config we already have all of our ether scan stuff all of our ring be scanned our excuse me etherscan stuff and all of our ringbeat stuff our metamask does indeed have eth but remember we will need some testnet ring b link as well to work with the chainlink vrf so again just google link token contracts and this we can always find the latest faucets on this page we'll just look for rank b here great test that link is available here boom all i got to do is grab my address pop it in here i'm not a robot send me a hundred test link or whatever it is and we'll be able to see it in our meta mask if you don't see it in your metamask it's because you probably didn't add the token what you'll want to do is you'll want to take this address here copy it in here you want to hit add token paste it in here and link will show up and i've already added it so it says token already has been added it but once you do that link will pop up here with all your link once we have our link and our ethereum in our rink b we can just go ahead and deploy this the exact same way so we'll do a hard hat deploy dash dash network rinkeby tags rsvg now since we're doing tags rsvg it won't deploy our deploy svg nft our other project right because the tags aren't an rsv rsvg it's just svg the other thing it won't do is it won't deploy mux and this is really good because we don't want to have to waste the gas deploying the mox here this is because again in this our deploy mock script we're just saying if it's on a local chain that's the only time we're deploying the mocks so let's go ahead we'll deploy this to ring b so we are going to have to wait a little bit so uh now's a good time to go to the bathroom grab a cup of coffee or or something like that you're doing a number of things right we're first going to deploy our random svg contract then we're going to fund it with some link token to work with the chainlink vrf then we're going to request uh that random number by calling the create function we're going to have to wait a few minutes for the chain link note to respond and once it does respond we're going to call the finish mint function and once it's done we'll have you can view the token uri here and we should be able to pop that that address of the token into openc and c it on chain which is incredibly exciting and after some time we do indeed see this massive uri here and we're saying hey it's been responded so we know that this is the token uri that's actually on chain so we can grab this let's copy this paste it into our browser okay we do indeed see some stuff here we'll grab that image uri we'll paste it in and we see this and we know this is somewhere on chain so i can go back to my output script here i can i can verify the contract if i want to i'm not going to bother for now deploying random r svg to here deployed at here with this much gas now we can go to testnets that openc.io paste that address in here click here we can see there's one result looks like there's nothing here right now let's go ahead and refresh the metadata and after we refresh the page we do indeed see our random completely randomized image here this is so exciting now if you want to take a break now's a great time to take a break however i am going to show you how to actually deploy this to a real blockchain because we are going to deploy this excuse me to the polygon chain now to deploy this to the polygon chain all we have to do is add some network information for polygon that's it everything else stays the same we do also have to do it in our helper config so these are the two files that we have to change to add this but before i do this i want to talk about two other important things and two questions that i get asked a lot the first question is how to sell the nfts and set the price so this is the first question that we're going to answer how do we set the price of these nfts before we actually launch this on a real chain well if we go back to a random svg.sol is right now anybody can call this great function we can change this though so that there's a fee associated with this create function so what we can do is we can add a little require here we could say require message.value and message.value is how much people actually send is greater than or equal to some price right some price that we set and i'm going to just say price and then if they don't send enough money we're going to say need to send more eth so we need to define this price variable so we're going to make this a global we'll do you in 256 public price and right in our constructor we could say price equals you know if we wanted this to cost one each it'd be one one two three four five six seven eight nine ten one two three four five six seven eight right we do something like this or maybe we'll get rid of a zero and this will be zero point one eth slash matic slash ava x whatever this is gonna be 1.1 of that let me just double check let me just jump let me just double check here one two three four five six seven eight nine ten one two three four five six seven eight perfect you could even add like a set price function or something uh whatever you want right and that means in our o2 deploy randomness we're going to have to change our create function we do creation transaction equals random rcg.create we have to do a comma value of this much right so we're going to send this amount with it and then we also have to make this a public payable function additionally you're probably going to want to be able to withdraw this eth so we'll say function withdraw or withdraw public withdraw now we only want the owner of this function to be able to do this right so we're going to add in a little only odor modifier so we do mod fire only owner require message.sender equals owner not owner if they're not the owner and then add the rest of the code here we need to define an owner somewhere so right in our constructor actually right up at the top we're going to say address payable public owner and we'll define owner equals message.sender so whoever created this transaction oh and then we need to do address payable excuse me owner equals message.sender this is going to be a payable message.sender and down back in our withdraw function we're going to make this an only owner and we'll say owner that transfer address this dot balance and this should be public payable so i know we just added this this function in here so that we can pay if you wanted you could add like a function set price that is an only owner function that changes the price uh you can kind of do whatever you want but for right now we're just going to say okay price is always going to be 0 1 eth now in our deployment we're just going to have to yep add this bit here and we should be good to go let's just let's just double check that this works deploy looks like we ran into an issue ah that's right uh javascript hates numbers so we'll put quotes around it let's try again and boom looks like we're successful here yes this is absolutely 100 something you should test and write tests for like i said we're going to skip it for now but something like this withdraw thing is really important to getting right so definitely want to write some tests so okay cool how to sell the entities and set the price boom we just did that now another question we get is how to mint 10 000 how do we min a ton of these right well what we can do is what you could do is instead of having every single person have to create call this create function right right now when users call this create function they are the ones fronting the cost of creating the nft but what you could do is you could call this create function and then you could have this crate function mint all 10 000 nfts using the random number from chain link right so remember how we did this kcac 256 api to encode random number i using this method we could use this method you know ten thousand times and get ten thousand round numbers just do a for loop behind all those random numbers and boom we'd be good to go so how do we mint ten thousand well all you have to do is call this mint function this safe bin function ten thousand times right so in our fulfill randomness we get a random number and in our finish mint we would do like four you went a uh a is less than you know 10 000 a plus plus and you loop through that list and you loop through that list and you'd follow this through all 10 000 of those so i know this is a little bit pseudo cody but this is essentially how you would do it so that's the next question final question i always get how to deploy to a main network well i'm going to show you how to deploy automatic and it's going to be the exact same way for deploying to mainnet exact same process we're going to have to add a new network add a new network to our helper config and then when we deploy just change the network flag so we're going to use manicare so we can find our details or for polygons excuse me we can do polygon metamask and we can find the details right here so we're going to first grab this url here copy this go into here networks we're going to create a new network call this one polygon polygon url there's going to be this url right here accounts are going to be accounts mnemonic mnemonic oh i did this i did the double accounts again mnemonic mnemonic and we'll do save deployments that's true boom that's all we need to do for our hardhead config then we need to add some stuff in our helper hardhead config so if we go to the polygon documentation or matic documentation we can see the url the chain id is 137. so we'll do 137 here name will be polygon we need the link token vrf coordinator key hash and fee we can go back to the link token contracts we'll scroll up to polygon or matic oh excuse me we'll scroll to our random place contract addresses ah polygon matic is the first one which is great we'll grab this link token address we'll do link token is this here vrf coordinator is this one so we'll say vrf core di nator is this right here key hash is here so we'll say key hash is that right there and then we'll do fee it's going to be 0.0001 so this is going to be 1 one one two three four five six seven eight nine ten one two three four five six seven eight and then what is it one one two three four so we're gonna do one two three four so one two three four five six seven eight nine ten one two three four five six seven eight three zeros three zeros perfect so this is going to be 0.1231 link and that's all we have to do so of course i'm testing with a mnemonic that doesn't have any link or any any actual stuff in it right because when i set this up in our hardhead config i said hey don't do this with a mnemonic with any real money in it right don't put in your.dmv file a real mnemonic i'm going to go ahead i'm going to add a real mnemonic as an environment variable just so i can deploy this script and then i'm going to remove it right away so i am going to pause recording as i do this now actually before i do that i do want to point something out on working with polygon and working with link on polygon so polygon has this thing called the matic bridge which allows you to bridge your tokens from one chain to another right we can log with metamask and log in with metamask and it'll allow us to swap tokens over the thing is though the polygon matic bridge isn't erc 677 compatible so the token that we get we can't actually use with matting once we get the link token bridged over we actually have to swap it using this peg swap application to swap it from to swap it from the manic version of the link token to the real version of the link token you might be a little confused be like hey why are there two two chain link tokens in here this address here is going to be the correct one and the one that you get you're going to want to use this swapper to to swap it over there's also a video on this in link token contracts polygon if this is confusing you can watch this video it has the whole thing as well oh oh what do you know that's me i'm going to go off screen for a second add my mnemonic in here so i can deploy this thematic and then we'll get it done all right i've gone ahead and added as an environment variable let's go ahead and deploy this to a real chain with real money so we'll do hard hat deploy dash dash network polygon dash dash tags rsvg and let's see if this works and we actually got an error here i cannot read two string of undefined it looks like this took a little too long to actually make and it looks like it actually got mad at me because my gas price wasn't set great so these are some of the things that you will sometimes have to finagle with so our create actually went through fine which is good but our finish transaction did not so we added a gas limit we'd have to add like a gas price we're just going to add 20 gray as a gas price so i know we're creating a whole bunch of random svgs here i'm fine to create a whole bunch i don't really care i think this would cost me a solid three dollars so i'm not too mad about this so if we see we'll go down to token counter we have five in here so i minted a whole bunch but i just didn't finish finish minting them right because we ran into some weird javascript errors and what we can do on polygon scan with our verified contract is we can just go down to this finishment area we'll go try to finish mint token id 0. i'm going to edit the gas fee this could be i'm going to edit the gas price to being 20 gray just to be crazy expensive just so that we guarantee it's going to go through we'll view our transaction now and it looks like that increased gas cost did allow this to go through and perfect that means we were able to finish minting our zero with token so it should have a token id now now if we go back i'm gonna go back to my regular browser now now if we go to openc we should be able to pop this address in here and we do indeed see we have this random svg in openc and you can see we're now no longer on a test net we have some results in here we'll go to tokenid 0 because this is the one that we just finished minting we'll refresh it refresh the metadata then we'll refresh the page and we can see aha perfect we have the svg this one's pretty lackluster it's just a yellow line um we've deployed this to a real network for real money now i know this was a longer video and we went through a ton in this video and i hope everybody here learned a lot about deploying nfts working with hardhat working with polygon and everything like that so definitely be sure to leave your questions in the comments definitely be sure to make issues on that github repository if you have any other questions fork it start share on twitter at me at patrick alpha c and say hi we went through a ton of stuff here now to close off this video and just want to give everybody an update with what's been going on i've i've missed videos for about a month now and we're getting very close to 10 000 subscribers so be sure to subscribe because at 10 000 subs we're doing a tattoo reveal which is going to be incredibly fun so for those of you who've been missing i've been working on a couple of really big projects and hopefully very soon you'll see the fruits of that labor be sure to follow me on twitter so you can stay up to date with the latest and greatest smart contract coding tools resources and everything to make you an insanely powerful smart contract engineer so don't worry i didn't go anywhere but there is a fantastic video coming out very soon and that video will be back in our favorite python hope everybody learned a lot be sure to like and subscribe let me know in the comments what you want to see next and we'll talk to you then you

Channel: Patrick Collins

Views: 13,400

Rating: 4.9631677 out of 5

Keywords:

Id: 9oERTH9Bkw0

Length: 190min 50sec (11450 seconds)

Published: Fri Sep 03 2021

Reddit Comments

[u/I_Amuse_Me_123]

These videos you make are amazing. Thank you!

[u/xavierelon]

Hey great content. Just a suggestion, maybe try breaking these long videos up into shorter segment videos. Should help retain more viewers