I'm going to show you how to create an NFT collection and mint them for free. Even if you have zero coding knowledge in this lecture, we will dive headfirst into cryptocurrencies NFTs minting and coding. I don't expect you to have any prior knowledge of this. If you already know web two, then this should be a breeze, but if not, no worries, we will go step by step through the entire process. I will explain what blockchains and NFTs are and give you some context and background first. If you're already familiar with that, you just want to skip ahead to the good stuff. I have chapter markers set up for you, so skip ahead to whatever section you want. The repo for the finished code will be in the description. You get stuck at any point reference that, and thanks to sponsor of this lecture, NFT port, for making all of this possible, so what is an NFT?
Well, it's simple a non-fungible token that makes sense, right. I know this entire crypto-verse is confusing. Non-fungible means that an item is unique and cannot be modified or replaced. If you have a dollar bill, you can exchange that dollar bill for another one, and you still have one dollar. Both bills are equal and can be exchanged, But if you have an original Picasso painting, you can't exchange that for anything else. There's nothing else in the world that can equal that original painting. You could buy it for money, but it's not the same thing. That's what an nft is. It's a token that is original unique. It can't be altered or ever replaced equally. Most nuts are on the Ethereum blockchain, but what even is a blockchain?
A blockchain is a database, but instead of all of the data being stored by one centralized computer or server, the data is distributed or decentralized into blocks of data onto many computers. These blocks are chained together; hence blockchain is what makes blockchain technology so great. The data is owned by the citizens instead of corporations and data monopolies. The data can be anything but is generally used for transactions and ledgers. Everything on a blockchain is transparent. Anyone can see anything. But it's because of this transparency that it's super-secure no one computer or corporation can manipulate or modify the data. Others must verify each computer or node. This makes blockchain the most secure way to make transactions today.
Most people think of artwork. When you mention NFTs, an nft can be just about anything, and nft is proof of ownership. You own it, and Cant take it from you. You can use them for unique items in games, videos, music event tickets, real estate deeds, or any type of contract. There are so many use cases the sky's the limit tweets have even been sold as nfts. You can create a single nft and that's fine for some use cases but you're going to find a lot of examples of collections of nfts these are like trading cards each is unique with its own attributes some common and some super rare and there are many communities that are built around these collections the two great examples are crypto punks and the board ape yacht club these have become super popular the cheapest crypto punk available to purchase at this time is over four hundred thousand dollars. the floor price for a board ape yacht club nft is fifty thousand dollars. What we're going to do now is create an nft collection. we're going to create 10 000 unique images you might think this is going to take forever. let's not we're going to do this by using layers. we start with our base image and then we add more layers to alter the resulting image this is how most nft collections are created
there are many applications that you can
use to accomplish this such as photoshop
procreate on the iPad but i use Figma i like Figma because it's vector-based when you resize a vector-based image it doesn't pixelate but this is just my preference you can use whatever you're familiar with and you have access to this is not going to be a Figma tutorial but i have set up several layers and drawn different features for each layer you should start with the furthest layer which is the background i have several solid colors and some other custom backgrounds as options now the idea here is to have several options and then later we're going to use a program to randomly choose an option from each layer which will generate for us all of our unique images
next, I have my base layer which is the
cat outline this layer will be the same
for every image then i have two color layers one is the fur color and the other is an accent color these have several options to change the color of the cat then i have hats eyes eyewear mouth whiskers tails neck and the most important tech stickers for the laptop all of these layers have options which we're going to use to make unique images some options will be more common and others super rare after i created all of the layers i exported each layer as a png image now png is important because it's going to retain the transparency in the layer this is going to allow us to overlay the images onto each other now here's the fun part creating the unique images manually creating 10 000 images from all of these layers would take forever so we're going to use a great open source application it's called hash lips art engine and thank you to daniel at hash lips for this great project this is where we're going to do a little bit of coding but i'm going to walk you through it first we'll go to github where the project is stored now there's a link to this repo in the description below now at the time of this recording the current version is 1.1.1 to be sure everything works the same for you go ahead and download that same version download the zip file under assets now. After you've downloaded the file unzip it now if you've never coded before you're going to need two other applications nodejs so go to nodejs.org to download and install the version appropriate for your operating system and the other thing you'll need is vs code or any other code editor i prefer vs code for that go to code.visualstudio.com to download and install the version appropriate for your operating system all right so let's open the folder that we just unzipped in vs. code now your vs. code might look a little different than mine I just have a theme installed but it works the same so let's go up to file and open a folder and then let's navigate to that folder that we unzipped so it's hash lips art engine 1.1.1
date when you get to this folder select
the folder now this project is set up with image layers to give us an example, so if we look under here there are a bunch of layers background bottom lid eye color eyeball and so on so to show you quickly how this works we need to install the dependencies for this application so we're going to open up our terminal so go to the top here terminal new terminal
and in here we're going to type npm i
and that is going to install all of our
dependencies now we can run the program by typing npm run generate this is going to generate five unique images based on the layers that we have here if you have any issues here be sure that you installed node.js properly on your system these images are created in a folder called build
we can see our images here and we can
preview them let me close the terminal
we can preview these images each one is unique and then notice along with the images we also have JSON files these are the data files that define what options are contained in the related image these will be used during the nft minting process to define each attribute on each image
we can see in here we have a name
description a link to the image dna edition date attributes trait type value and the compiler the platform that we're going to use to upload and mint these nfts uses what's called an
erc721 contract this is an industry
standard way of formatting the metadata
there's a link in the description for
more information on the erc721 specs because of this we're going to slightly modify the way that our metadata is created so let's go over here and we're going to open up in the source directory the main.js file now this might look intimidating but don't worry I'll walk you through this so we're going to scroll down here and it's somewhere around 130 133 so we have this image here in our metadata
we're gonna change image to file URL URL just like that then we're gonna move DNA edition date and compiler into their object we're going to call that custom fields so curly braces and then on the inside of that let's cut this out and we'll paste it here and also on the compiler we'll paste that there then we need a comma after this object and we can delete this line here and then we'll need to scroll down to line 306
and here it's referencing the meta
oh we'll just need to add the custom
field here so meta dot custom fields dot edition so that is all we're going to do in this file let's save this and we can close it next we're going to change out these example layers with our own layers so to do this easily, we're going to go inside of our file explorer so I'm going to right-click reveal in file explorer and now we can see all of these existing layers we're just going to delete everything there and then I'm going to paste in all of my layers that I exported from sigma you can see I have a bunch of layers here accent color background ear eyes eyewear fur head laptop and a bunch of logos mouth neck nose ton of layers
we can close this and go back in vs code
and we should see our new folders and
files here now each one of these is a folder and then within the folder we have our options all right so next let's go-to source and then config.js in here we're going to update the name prefix and description with our own so let's go down here name prefix so your collection you'll want to change this to whatever you're going to name your collection mine is code cats and then a description so add description
here now the base URI we're going to update later because we don't know it quite yet we're not going to worry about this Solana metadata because we're not using Solana and i'll scroll down here under layer configurations first how many images or additions do we want to create so we're going to change the growth size from 5 to 10 000. initially we're going to want to just test this to make sure it's working once we get five good images out of it then we'll change it to one thousand ten thousand however many you want to create i'm gonna go ahead and change mine to ten thousand
now under layer order we're gonna change
these out for our layer folders that we
just copied over and be sure to order
these correctly the first layer needs to
be the furthest background layer and the
last layer needs to be the closest
foreground layer also the names of the folders are important these are going to be used in the metadata as the attributes so let's open up my folder structure here so under layers we're going to add all of these into layers so background that is the background that's what i needed i'm going to speed this up for time because there's a bunch of layers for me to type in here
all right so I finished adding all of my
layers there's a ton of them and then i
want to show you one other thing so
under my layers and then in certain ones
of these like uh i wear i've got
sunglasses cool glasses glasses heart
glasses but then I have a blank this
blank is just a blank transparent image this was the easiest way for me to have some images not have eye where they'll just be blank and so I added that into all of my logos as well so not every logo is going to show up just certain ones and then like on the hats we have a blank in there as well so the cat won't always have a hat and so I hope that makes sense now scroll down in the config.js file past all of that I'm going to change my format to
1500 by 1500 but you can add whatever you want here this is just my preference then scroll down a little bit further under extra metadata we're going to enter a field here and again this is just personal preference i'm going to add an external URL and that is going to be the website of my collection
and this is going to show up on openc
for each nft and we're also going to define a rarity for each layer option and to do this we'll edit each layer option file name you might have noticed my file names might look a little strange so if we go under a background, you'll see that I have at the end of the file hash 100 hash 100 1 100. this is a weight that we can give each option if we want something to be very rare and we could say hash one and then for something very common hash 100 and these are just arbitrary numbers it could be uh 1000 it could be anything that you want it's just a weighted number
if we made all of them one then they
would all be equally used in this
instance purple is going to be very rare
so i went through and added that to
certain options so under pupils we have
a normal pupil there's one 100 and then
crossed and paranoid and rolling eyes
these are more rare, and you'll want to play around with these numbers to get a good mix, so I did the same thing under logos I have a blank which is going to show up 10 times more than the logo itself if you just want everything to be equal you don't have to add a hash at all you can just leave it and they'll all be equally weighted now there are a ton of other advanced configurations that you can do with this engine like create gifs use blending modes pixelate images. now this is all that I need to change all right so now let's run this and get 10 000 unique images so let's open up our terminal remember we can go to terminal new terminal or just press control backtick that's the key next to the one let's type npm run generate now depending on your system this could take a while to generate for me it took just a little bit over an hour again these images get saved in a folder called build and this folder structure that you see here is the same folder structure that's in your computer's file explorer
i'll give you a sneak peek at a few of
these all right and then if we go over into one of our JSON files you're going to notice here that in our attributes let me close the sidebar in our attributes we have our background ear color for color we want all of these if you scroll down a bit you're going to see blank
so if the neck doesn't have a necklace or whatever it might be then it's going to say blank and then it gets even more apparent when you go down to the logos there are a ton of blank logos so we don't want to upload these blank attributes to openc so we'll need to go ahead and modify that as well okay so let's just go over to under source main js and then line 170 let's close the sidebar here all right 174 we're going to add a new line here we're going to say if selected element dot name we're going to trim it so just in case it has any white space before or after it we want to trim that off so we'll say trim then we're also going to say we're going to want this to go to lower case to lower case so this is going to give us the name without any white space before or after it and lowercase to makes it easier for us to match we're going to say if it does not equal this so to do does not equal is exclamation equal equal so if it does not equal blank and we're going to put blank in lowercase so that it matches so if any of our selected items does not equal blank then we're going to run this code after it after this we need a curly brace and then below this part here another closing curly brace and so if it does not equal blank then we're going to push the attribute if it does equal blank then it will not get added to the json metadata so now we have our images and we're ready to create our nfts this is where most tutorials stop and most people get confused and give up you see usually you're going to need to know programming technologies like solidity web3js ipfs and others to create an nft collection you have to first deploy a contract upload your files and metadata and then mint your nft and this process could take weeks to learn but there's an easier way we're going to use a great platform called nft port which is the sponsor of this lecture with nft port we can do this entire process in minutes rather than days on top of that it's completely free just go to nftport.xyz they have a generous free plan that includes up to 1000 nfts five contracts access to nft data and enhanced apis you can also apply to the community program to get bumped up to 50 000 nfts 15 contracts two times higher rate limits for nft data 50 megabytes ipfs file upload limits and more to get started all you have to do is get your free api key it'll be emailed to you right away the documentation for nft port is great we can easily mint a single nft with just a single terminal command but because we want to create our own collection we'll need to first create a contract to do anything on the blockchain we're going to need a wallet now i recommend the meta mask wallet if you don't already have it just install it as a browser extension and sign up go to metamask.io to download it again everything in this lecture is completely free this is just going to allow us to assign ownership of our collection and nfts to our personal wallet address this is just how things are tracked on the blockchain
alright so now back on nft port let's go
to the documentation now if we scroll down under minting contracts and storage you'll see contracts here and deploy an nft contract a contract is required in order to mint NFTs nft port uses the ERC 721 standard that we talked about earlier or its smart contracts a smart contract is like a manager for your nfts the contract keeps track of them all it can verify ownership handle transfers allow you to update existing nfts and much more so the first step to creating an nft collection or even just a single nft is to create a contract and we can actually create our contract right here from the documentation
you'll just need to add your API key
here under authorization and then update the name of your collection i'm going to call mine code cats and then you'll want to enter your owner address which you can get from metamask so just go up to your extensions and open up meta mask and then right here you have your account number just click that to copy it and paste it here for the symbol we'll leave that at c and for the chain i'm going to recommend initially to use the rinkeby chain which is a test chain it allows you to play around and test before deploying it to the actual polygon chain so i'm going to change this from polygon to rink b and in the documentation again it's very good we scroll down here you'll see all of the options so for chain allowed values are polygon or rinkeby the name symbol owner address and then we have this meta updatable i'm going to actually add this to my contract and i'm going to set this to true some advanced planning is needed my plan is to mint all of the nfts but reveal them only after purchase so initially all of the nfts will have a generic image indicating that they will be revealed after purchase i'm going to update the nft's metadata to point to the actual image and its attributes if metadata updatable was not set to true i wouldn't be able to do this the metadata pointing to the image will already be frozen and not editable that's why i'm adding this option so we'll add that in the code here we need to surround this with quotation marks metadata updatable colon true now we can send our request and we get a response 200 okay that means that it worked so this was on the rinkeby chain and we have our transaction hash transaction external url owner address the name the symbol all of that got returned to us so you could go to this url and check the status of it we're gonna need this information especially this transaction hash in a little bit so let's go ahead and click this little button here to copy all of this code and just save it somewhere on your computer so next we're going to upload ten thousand files to ipfs ipfs is an industry standard for decentralized storage you could just use google drive or any other online file storage and that would work but that is centralized storage and defeats the purpose of decentralization fortunately nft port has all this worked out for us it's really easy to upload these files so back in the documentation let's go to storage and then upload file to ipfs now here we could pick a file and send the request and upload each file one by one but that would take forever so let me show you an easier way the code that we used to generate our images is called javascript and it uses node js to run as you can see here in this code snippet there are many different language options that nft port has provided so we're going to select node and then fetch this is going to give us some starter code to work with let's copy this code all right back in vs code we're going to create a folder structure for some new files let's go to our file explorer and then under utils we're going to create a new folder we're going to call it nft port and then inside this we're going to create a file
let's call it upload files.js now let's paste that code that we copied into here
now we're going to need to install a
couple of packages to help us out so
let's open up our terminal remember
control back tick let's type npm i which is going to install node fetch node fetch and then form dash data should just take a few seconds and we have those installed see we are using form data and we're using node batch so we needed those to be installed for this application to work next we're going to copy a few lines from the main js file so let's open that up go to source and then main js we'll need this base path and fs we'll just copy that and let's paste it here and we can just get rid of this network line delete that one all right base path fs the first thing that we'll need to do is get our images and loop through them one at a time we're going to create a file stream and add each file into our form data this is where we're going to get our form data so let's move that up here so form data equals new form data and then we need to read that file so we'll say const file stream is going to equal fs dot create read stream
and it's going to be the same base path
and then build images and then our file
and then after that we can append to our
form data so we're going to append file
and then this is going to take our file
stream so what this is doing is it's
looping through our images taking each
file and then it's reading each file and
then adding it to our form data which
we're going to then submit to ipfs so
now we can use the rest of this down
here we have our URL and our options
and our fetch so let's just move that
right up here let me close the sidebar so we have more room so we have our url which is our api link for nft port and our options we're going to be posting and for the headers we really don't need the content types here so let's delete that we just need our authorization i don't think that i said this before but your api key is super secret don't let anyone else use your api key that's why mine is blurred out here instead of appending our form data here i'm going to move that here into our options so we can just say body and then form data just like that and then we can get rid of this line here it just makes it look a little cleaner now in our fetch we're going to receive our response here in the second dot then so this json is going to be the response to our request right now we're just console logging the json in this response we're going to receive back the link to our uploaded file on ipfs so we need to update the images corresponding metadata file with this newly created ipfs link right and so if we go over here right so remember each build each image has a corresponding json file and it contains a file url which right now is just a generic url that doesn't actually exist so we need to update this after we upload our file with the new link so if we go back into the documentation we can scroll down and see what we should expect to receive back so here's our response so in our response we're going to get an ipfs url file name content type file size and if we have an error so ipfsurl is the item that we want to add into our metadata so how are we going to know which json file to update the json files are numbered the same as the images so we're going to get back the file name in our response and we can use that and add json that way we'll know which one corresponds to which image so here instead of console logging the json let's add curly braces and then we can add some more code in here so first we're going to say const file name that's going to equal path.parse
and we can pass in here json.file
name and then we need the name all right now we will need to uh bring in path as well so let's go back up here and let's also say const path equals require and then
path is a core node.js package so no
need to install it so back down here we're getting our file name and then we're going to get our raw data so we'll say let raw equal we'll say fs dot read file sync
and we're going to use our base path
again so dollar sign curly braces base path and that's in build this time we're going to look in the JSON folder
we're going to look for the file name and then add on to that dot json right so it's returning to us the file name without the png and then we're reading that file we're getting the raw data so now we need to parse it so we'll say let metadata
equal json.parse and we're going to parse that raw data now we have a JSON object here in our metadata so now within this metadata we can say
metadata.file URL it's currently the wrong URL is just a fake URL we need to update it with the right one so we're going to say that equals json.ipfs URL all right so we're updating the metadata basically in memory right now and now we need to write it back to the file, so we're going to say fs dot write file sync and then in here again start with our base path and then build json and then again our file name dot json so that is the directory we're going to write to and now we need to tell it what to write so we're going to say json.stringify so we need to turn this object now into a string of text that we can write to a file we're going to stringify our metadata
and then we're going to pass some
options we're going to say null and two
so this is going to write this string of
data instead of one long string it's
gonna write it in a readable way all right and then after that let's console.log and we're gonna say json dot
file name uploaded and file name dot JSON updated
then after that we have a catch which if
we have any errors it's just going to
console error the error so this should work this should loop through
all of our files upload them and then update the corresponding metadata
so let's save that now to run it open up
our terminal and let's type node so we're going to use node to run this node and then it's in the utils directory so utils slash nft port flash upload files dot js that's the file we have open right now so we're gonna use node to run this file and it's gonna loop through upload all of them and update the metadata so I only have five in my working directory right now just so that I can demonstrate this all right they've all been uploaded let's go over and check out
our JSON should be updated as well all
right so now we have a in this codecast
number one there is a URL here so let's open this up and there it is it is on ipfs
all right so now we have our images
uploaded to ipfs and we've updated the
associated JSON metafiles so now we
need to also upload these JSON files to
ipfs so we're going to start with the same code that we have here in our upload files let's just copy that and let's create a new file hereunder nft port and we're going to call it upload metas
dot js all right let's paste in that
code to give us something to start with
so we're going to loop through just like we did our images but this time we're going to loop through our JSON files and then in our URL here for our API, we're going to change it from files to metadata, and we're not going to be adding these files to uh to a form data so we don't need any of that so let's delete the form data require and this form data and this as well now when we upload these files we're also going to receive some data back that will have the metadata URI that we need in order to mint our nfts we're going to save all of this data to another file which we can reference later so we're going to start out by writing a file called underscore ipfs metas.json and we're going to make it empty and if the file doesn't exist then it's going to be created if it does exist it's going to be cleared so it's going to be in our base path build JSON ips metas dot JSON
and then initially the value is going to
be blank and then we're going to create our write stream so create write stream this is going to allow us to open a file and write to it over several operations and then close it instead of opening it writing closing it over and over 10 000 times we're going to add the flag a to the right stream which allows us to append
we need to add this to a variable so
we'll say const writer equals all right so now we can call writer every time we want to add something into the file so initially we're going to say writer.right
since we're writing several objects into
our file we're going to make this array
by starting it with a square bracket now
we're going to create a variable called read directory reader that's going to equal our base path build json and then we need to keep track of our total file count so it will say let file count
equal fs read der sync pass in our read directory and then get the link from this we're going to subtract two there are two files that we want to skip the metadata.json and the ipfs meta json next we're going to look at our for each here where we're looping through each file we also don't need this file stream but first we're going to say if file equals
underscore metadata.json and then the two pipe characters means or so or if file equals this is triple equals equal equal equal three times so if it triple equals underscore ipfs metas dot JSON
then we're just going to return so when looping through these files if we come across one of these two files that we want to skip we're just going to return which will just move us on to the next file the code after the return will not be executed
so let's read the file next so we'll say
const JSON file and that's going to equal fs read file sync and then we'll pass in here our read directory and then our file all right so now we have our file and we can pass it into our options so in the headers I'm also going to add a content type application json so that the server knows that we're passing it a JSON file and then instead of form data we're going to use JSON file so in the body we're passing the JSON file this time when we receive our response we're going to write the data to our right stream and then deduct one from our file counter so let's delete all of this from the previous version and we're going to say
writer.write JSON.springify the JSON that we receive back and print it so that we can read it and then we're going to deduct one from our file count so file count and if we just do a minus minus that will deduct one from the file count so now we're going to check to see if we're at the end of our files so i'm going to say if file count
triple equals 0 that means we're done looping through and we'll say writer dot right and we need to add our closing square bracket and then after that we can say writer dot end
and that will close our file if we're not finished we'll say else writer dot write
and we're just going to write a comma and then a newline character as backslash in it's like a carriage return and adds a new line to the document all right so then let's console.log we're going to say console.json dot name and then metadata uploaded
and added to ipfs metas dot json all right we can save that now remember that i said that i'm going to reveal my nft's after purchase this means that initially they're all going to have a generic image and no attributes so that way you have no idea what you're going to get until you purchase it
you could get a common nft or maybe a
super rare one it's like buying a pack
of trading cards so i'm going to create a second set of JSON files from my nfts in these i'll redact the DNA and attributes from the JSON files and then update the file URL to a generic image that all of the nuts will have initially now you don't have to do this you can skip this step and just upload these as is if you wanted to so if you don't want to go through this reveal process you can skip to the next timestamp all right so i'm going to create another file i'm over here nft port new file and i'm going to call it generic
metas dot js we're going to use a lot of the same code as we did before so over here let's just copy this and paste it in here this time let's get our build directory as well so we'll say const build directory is going to equal path dot
join our base path and then we're going to add on to that slash build first we're going to create a new folder called generic JSON if it doesn't already exist
then we'll get rid of the right file
sync that we don't need anymore, then we're going to loop over the JSON files giving the two extra files like we did before then we'll read the current JSON file we'll change the name description, update the file URL and delete the attributes and DNA items then we can delete the entire fetch request that we don't need lastly we're going to write the new file into the new directory and then we'll console.log the file was copied and updated for the file URL I'm just using a generic image that I uploaded to ipfs you can use the nft port docs to upload a single image easily under storage upload a file to ipfs which we looked at earlier
now to run this we can open up our
terminal and if you hit the up arrow it's going to bring you your last command so we need something very similar this time it's going to be slash nft port generic
metas dot js let's run that and it has copied five of them so if we go up here to build generic JSON we should now see some generic JSON so now we only have the name which is now unknown description unknown this generic image
and then our custom fields no longer has
DNA we still have our external URL we still want that and the addition everything else is fine so now back in the upload metas now I'm ready to upload my metas because I wanted generic ones you may have wanted to upload the real metas and that's fine so now we're going to run this
if we go up here to our read directory
this was important from before everything below line 11 is referencing our read directory actually I just noticed one thing that's not we need this
to say read directory so since everything is referencing this one variable we can easily change this to whichever directory we want right so json is our real metadata json files but i want to change this to generic json and upload these files because we're reading from the generic json this time we don't have these two files to account for so we don't want to subtract two from our link otherwise we'll be short two responses so if you're using the regular json be sure you subtract two so i'm going to save that and then to run this we'll open up our terminal and hit up arrow to get our last command and we'll change this to flash upload metas dot js so now we ran that they've been uploaded and also written to our underscore ipfs metas json so if we go over here and we go into our json directory we should now see ipfs metas.json and we can see what was returned from uploading these we have our metadata uri for each one of our nfts this is what we're going to need whenever we mint them which we're about to do right now that we have our files uploaded we can actually mint our nfts there are two items that we need the contract address and metadata uri we can get our contract address using the transaction hash that we got from deploying our contract remember i told you to copy that and save it earlier if you forgot it's not a problem we can use another great feature of nfp port here under user we can go to list all your deployed contracts and then just put your api key in here send the request
and there's a few tests that I had in
here but at the bottom we should see
code cats and the address here that is
the contract address alternatively we
could have gone under contracts retrieve
a deployed contract and then under transaction hash paste that hash that you got back and then change this to either polygon or rink beat whichever chain you deployed it to send the request and again we're going to get our contract address here so let's copy that remember things on the blockchain are permanent there are lots of ways to track things down let's go back into vs code and we're going to create another file so let's go to our files here
under nft port and we'll create one called mint.js let's copy from the upload metas a lot of it will be the same, but we can close that and paste that here so we have our contract address the other thing we needed was our metadata URI and all of those are in our ipfs meta JSON file that we saved after we uploaded our metadata right so we're going to first get that file so we'll say const ipfs metas is gonna equal json.parse
and it's gonna be fs dot read file sync
and then we'll use our base path that's in build JSON and then underscore ipfs metas.json we're going to create a new file to save our response data for each nft now this is not totally necessary because they are just going to show up in your wallet but I like to keep track of things so this time we'll create a file in the build directory called minted.json and this time instead of looping through files we're going to be reading one file the underscore ipfs metas.json file and then loop through its content so we'll keep track of the count again too we'll update the URL and create a mint info object this will contain the chain contract address metadata URI token id and address that we're going to be minting each nft to which should be your address from metamask for the token id we'll just use the edition number now for the metadata uri we're going to get that from our meta-object in the ipfs metas JSON file that we're looping through
each time we're going to get a new URI
to mint when we get our response we'll write the response to our right stream deduct from our counter and then close out our file like we did in the update metas file and lastly we'll console log the transaction external URL of the minted nft so let's save it open up the terminal and we can run it press the up arrow to get your recent command and then we can just backspace that and then run mint.js and there we go we have five that have minted here
we can check the progress of each one on
etherscan and it should take a few
seconds so we can click on one of these
and open them up and you can see it's still running alright so that succeeded we can also check on openc for the item it's probably going to take a few more minutes to show up on openc and since i used rinkaby i'm going to go to testnets.openc.io and if you deployed them to the polygon chain then you should just go to the normal openc.io now the first time that you go to openc you'll be prompted to sign in using metamask after that just go to your profile and you should see them show up now if some of them don't have images or metadata just give it a few minutes and if they still don't show up then you may have missed a step you can use the lookup features on nfd port to verify the items that you've minted and then try to track down the issue using the data files that we saved also whenever you go to one you can see that mine still haven't showed up yet if i go in here there's a refresh meta button so after some time if it still doesn't show up click the refresh give it a few more minutes and then check back in the near future i'm going to update the site for this collection to add purchase functionality you'll be able to purchase nnft and the site will update the nft's metadata to the actual data so go check out the site and sign up for updates it could already be functional by the time you watch this lectureand i'll have another entire lectureon how to integrate all of that into your site but for now i'll show you how to use the nft port docs to update an nft now if you just wanted to mint 10 000 nfts and you're not going to do a reveal then you're done you can skip to the next time stamp we'll need three things the contract address token id and the new metadata uri now note that the contract must have been created with the metadata underscore updatable field set to true for the associated nfts to be editable and we only have two options that we can update we can update the metadata uri which will update the nft's image url attributes etc and we can update the freeze status if we pass freeze underscore metadata equals true this will freeze the nft and will no longer be updatable and that is what we would want in our situation after the purchase of the nft so first we need to upload the actual metadata for the ipfs now remember before we uploaded generic data with generic images so let's use the nft port docs so we can just go over here to upload metadata to ipfs you could use the code that we wrote earlier to upload a bunch of them but we're just i'm just going to show you one example of updating one nft so back in vs code i'm going to look at one of the actual json files here and i'm going to copy the contents here we have name description file url custom fields
i'm going to copy all of the contents of
this and then back in here I'm going to delete what was here before and paste over it i don't it doesn't matter that it looks like garbage there but as long as we have our API key and we have all of this here we should be able to send the request and we get a 200 okay that's good and now what we need is the metadata uri so let's copy this all right so now let's go over here under minting update a minted nft so in here let's change polygon to rinkeby
if you uploaded yours to polygon that's fine leave it at polygon i have the metadata URI in my clipboard so let me just go ahead and paste that first the token id that we're gonna update is one now you can get your token id back under uh open c if you go down and you find it was this one and I know it's number one because that's number one and then under details we have a token id of one so i know it's this is the one that i want to update so back
over here we have our token id our
metadata uri we need the contract
address now i had that over here in the
let's see mint should be in here here is the contract address i'll copy that and paste that here all right so rinky b contract token it's going to update the nft with a token of one to this new metadata uri so let's send that and we got a 200. that's good now one thing that I forgot to add on to here was
freeze metadata and set that to true close the quotation marks there so if i would have added this it would have froze the nft so that i can't update it again so right now in our response we have freeze metadata is false so let me go ahead and just send this one more time and now it is frozen i can't change it ever again
again we can go back to open c and refresh, and we'll need to wait refresh update the metadata wait some more refresh again eventually the changes will appear now this has nothing to do with nft port it's just the way that blockchain works it takes time for everything to update all right so I actually had to wait about four hours for these to finally update on openc and again this has nothing to do with nft port this is just the way things work on the blockchain it takes a while for things to propagate and update all right so this is what one of my nfts looks like before it's revealed it's just a cat carrier and you're not sure what's going to be in there if we go down we can see that there are no properties
there's just the normal details and then
if we scroll back up here there is a
link to go to the website so this is what it looks like after it's revealed we have the actual nfp and we still have our link up here that goes to our website and then in the sidebar here we also have properties and so here are all of our properties for this particular nft okay so we went through all of that in order to test out our nft uploading and minting scripts now it's time to upload the actual 10 000 nfts to the polygon chain this time i have all 10 000 images and JSON files in my build directory I've created a new polygon contract the same as we did with the rinkby contract and I've changed the chain in our code to polygon instead of rink b this is a time-lapse of the images being uploaded to ipfs the metadata being uploaded to ipfs and then the actual minting of the 10 000 nfts the entire process took about 12 hours total it just takes time to upload and mint that many nfts here's the final collection on openc again these are generic images of cats in carriers
when they get purchased i'll update the
metadata to point to the real nfd which
will be random now i'll be creating a lecture on how to automate the metadata update on purchase so be sure to subscribe so you don't miss it
i'm going to be giving away a bunch of
these nfts and i'll be doing routine
drops letting you purchase random nfps
as well so join my discord for more
information if you want to check out
this nft collection that i created go to
codecats.XYZ there's a link in the
description as well now nft port is a
great gateway or bridge from web2 to
web3 and it's not only limited to
minting nfts they have other features as
well that can be used in all kinds of
apps such as searching for multi-chain
data recommendations ai and a duplication detection
0 Comments