LAB: Mint An NFT With Metadata

Transcript

Toggle full transcript
00:00

Hello and welcome to the lab on how to mint an NFT in ImmutableX with metadata. Now, this lab assumes that you've done the

00:10

previous labs using the source card attached to this course. To get started. We simply need to go to the NFT metadata

00:20

section within the README.MD file, and there's a series of steps here that we can follow to mint an NFT that has metadata.

00:30

The first step is to set up an nft.storage API key. The reason we need to do this is we're going to be using IPFS or the InterPlanetary

00:40

File System to store the metadata and media for our NFTs. There's many services out there that can be used to interact

00:50

with IPFS. If you're storing metadata for NFTs, then NFT storage is probably one of the better options because it is free.

01:00

So, if you can click on the link to go to the nft.storage website.

01:10

Then the first step is to create an account. In my case, I'm going to log in using my GitHub.

01:20

Now, once we've logged in, we can go to the API keys section and create a new key.

01:30

We can give this key a name. So in this case, we're going to call it Makerversity. And create.

01:40

And we can see we've got the key here. Under actions, one of the options here is to copy that key, which then puts it in a clipboard.

01:50

The next step then, is to add that key to the .env file in the NFT_STORAGE_TOKEN value. So if we go to our .env file and we scroll down until the

02:00

metadata section, we can see we've got NFT_STORAGE_TOKEN, we can paste that token in, save the file and then we're ready to go.

02:10

The next step then is to upload the metadata. We've created a metadata folder within the source folder of the repository,

02:20

and this contains all of the data and images that we've provided as an example. Now, you're welcome to go in there and to change

02:30

these values. We've created five sample NFTs. So if I click on number one here, we can see that we've got an ImmutableX

02:40

metadata payload for this Ignis Emberstone NFT and we've got some traits here.

02:50

It's a fire mage with an attack of five, a defense of two and a magic of ten. And if we go to the other examples, you can see there's some other

03:00

ones that we've generated here. So you're welcome to change these. Or you can simply use them as they are. And similarly, under images, we've got one, two, three, four, five

03:10

.PNG. And you can see the images that we've generated here.

03:20

Again, you can change these images if you want or you can use them as they are. What we're going to do is we're going to upload this metadata to IPFS

03:30

using the token that we just set in our .env file. And to do that, we're going to run upload-metadata.

03:40

So if we pull open the terminal and we execute that command.

03:50

You see that it runs the src/metadata/one-upload-metadata.ts file. So if we open that file, then we can see what's happening

04:00

here. Essentially, we're pulling out our environment variable, the NFT storage token. We're creating a new NFT storage object

04:10

with that token. Well, looping through the five NFTs that we're going to mint and getting the PNG file

04:20

for each of the images in that image directory and adding them to an images array. And then we're going to upload those files.

04:30

The upload files function simply calls the stored directory method on the NFT.storage client.

04:40

Similarly, we run through each of the five NFTs. And we grabbed the JSON metadata within the data directory.

04:50

We changed the image URL to be the IPFS Gateway link from NFT storage to that image

05:00

using the content ID of the images that were uploaded to IPFS. And then we pushed that payload to this metadata array.

05:10

And then again we call our upload files method with that metadata array. And we can see here the output.

05:20

It uploaded. one, two, three, four, five .PNG. Two. This content ID within IPFS.

05:30

And then we uploaded our one, two, three, four, five metadata payload to this content ID within our IPFS.

05:40

So now that we've done that, the metadata is hosted and ready for us to use in minting our NFTs. The last step is to set the gateway URL of our metadata

05:50

in our .env file so that it can be used as part of minting our NFTs in ImmutableX.

06:00

And so for that we simply need to grab our gateway URL that is output here at the end. Get that into the clipboard and then in our .env

06:10

file we just need to find this CONTENT_METADATA_URI parameter, which is one of the previous parameters that we had set before. So we can change that now to be this new URL

06:20

that we have generated. So the next step then is to deploy a new contract and set up a new

06:30

collection for our metadata NFTs. Now, if you want, you could change the contract name and symbol.

06:40

So I'm going to call this My Metadata IMX Contract, and I'm going to call it MMIC for the contract symbol.

06:50

And we're going to run the previous command that we had gotten in our previous lab to deploy the contract.

07:00

So, this is going to take our contract metadata URL that we just updated in our .env file.

07:10

Feel free to pause the video at this point while you wait for

07:20

this operation to complete.

07:30

Okay, So now that this is being done, we can update the contract, address property within our .env file with the new contract address that we have here.

07:40

And similarly, if we want, we can change the collection metadata

07:50

to reflect the different collection that we're minting. So I'm going to call this Makerversity Lab Metadata NFTs in this case.

08:00

The next step then, is to create the collection in ImmutableX that corresponds to the contract that we just saved.

08:10

So make sure you've saved your .env file before executing this. And then we can run that one.

08:20

And then once we've done that, the next step is a new step that we haven't done previously. And this step allows us to add a metadata schema

08:30

to the collection that we just created. That tells it about the different traits that we have in our collection. Now, if we want to change this schema, we can edit it in the

08:40

metadata/4-add-metadata-schema.ts file, which is here. And this script basically sets up our

08:50

ImmutableX client connection and wallet for the private key of our collection owner.

09:00

And then takes a metadata schema payload. As you can see here, where we've got name, collectible, class, element, attack, defense and magic along with the

09:10

types of each of those and whether or not the collection can be filtered by them. And then calls the user.metadataSchemaToCollection

09:20

SDK call to register that metadata schema with the collection that we just created.

09:30

And so to execute that, we do this command here. npm run add-metadata-schema.

09:40

And we can say that we've got an OK from that API. So that metadata schema is now registered.

09:50

So now we can actually mint the NFT. First things first, we need to go back to our .env and make sure that the token ID

10:00

is set to one. Or if you want to run this multiple times, whichever token number that you want to mint; between one and five in this case was the ones that we've set up.

10:10

So we can execute our npm run mint command with our -- and our -w along with the wallet address that we want

10:20

to use. Which in this case I'm going to use our owner account address that we've previously registered in our

10:30

.env file. So this will now create token ID number one in the

10:40

collection that we just registered with ImmutableX and.

10:50

Voila, We've minted our NFT! We can click on the link to go to the marketplace to view that NFT.

11:00

Now it's worth pointing out that ImmutableX does sometimes take a little while to cache the metadata. So when you first view it, you're very likely to see something like this, which

11:10

looks very empty. This is particularly the case when using IPFS because IPFS gateways are often a little bit slow to respond

11:20

when they don't actively have the value cached. So, if we keep refreshing this every few seconds until

11:30

the metadata is there. Then. Here we go. You can see we've got our Ignis Emberstone name there.

11:40

We've got our image. And if we expand the properties here, we can see we've got our class, magic, attack, defense, element and collectible traits.

11:50

So there you have it. We've gone through, we've created a collection for our metadata driven NFTs.

12:00

We've uploaded both the media and the metadata to IPFS. We've created a collection with a metadata URL pointing to

12:10

the IPFS gateway of that metadata that we uploaded. And then we went through the same process that we have previously to mint an NFT

12:20

from that collection. And we've seen it here in the marketplace. Thanks so much for joining me for this lab.