LAB: Deploy NFT Contract To Ethereum

Transcript

Toggle full transcript
00:00

Hello. In this series of labs, we're going to mint an NFT on the ImmutableX blockchain. In this first lab, we're going to take the first step, which is to deploy an NFT

00:10

contract to the Ethereum blockchain. The first step is to get the source code that we have developed to guide you through this lab.

00:20

You can do that by going to the GitHub link in the resources section for this lab and you'll find yourself here.

00:30

What we need to do is to clone this repository on our computer. So to do that, we can go to Code. We can copy the URL of the GitHub checkout.

00:40

And then you can use your favorite Git client to actually clone that repository. In this case, I'm going to use the command line and just issue the git clone command.

00:50

Once you've done that, you just need to open the folder that has been cloned and then

01:00

open your favorite IDE. In this case, I'm going to use VS Code. Now the instructions to follow this lab are in the

01:10

Readme.md file. If you're familiar with Markdown, you can look at the file by itself or if you are using VS Code or some other editor that supports it, you can actually

01:20

view the preview of that file and see it in a nicer format. Alternatively, you can actually view it in that

01:30

format by scrolling down on the Git repository in GitHub as well. So in this first lab we're going to deploy

01:40

the smart contract to Ethereum that is then going to be used by ImmutableX to mint our interface.

01:50

First and foremost, to get started, we just need to make sure that we have our dependencies. So if you pull open a command line terminal.

02:00

I'm just going to do it within VS Code and we just type in: node --version, that'll tell us if we're

02:10

running Node.js. And similarly, if we can go: npm --version, then that tells us that we're running NPM and that we have a path variable set up so that we can just execute those commands directly.

02:20

Once we've validated that we can actually run npm. We simply need to run the npm install command.

02:30

And what this is going to do is it's going to install all of the dependencies that this lab needs to run.

02:40

Once that's happened, then we're basically ready to get into it.

02:50

Now, one of the key ways that we're going to be configuring the parameters of this exercise, as we go, is

03:00

by using what's called a .env file. We've provided a example file, .env.example. In order to use that, we just need to copy that to .env, now

03:10

we've helpfully provided a cross-platform command that you can execute and this will simply copy our .env.example file to .env.

03:20

And you'll note here that it's greyed out. That's because it's in the .gitignore file so you don't accidentally

03:30

commit it. So we're going to be running through this file as we go through each of these labs and populating values in it.

03:40

The first set of values need to be these two here, which are essentially going to be the Ethereum account, including the private key

03:50

that we're then going to use to actually deploy the smart contract to a theory. Again, we've got a helpful command here that you can execute.

04:00

This is just running some code that we can say is here inside scripts slash generate random key ducts.

04:10

If you want, you can control + click on that to see what's going on. We're essentially just pulling out this wallet library from ethereumjs-wallet,

04:20

which is one of the dependencies that got installed by npm install and we're calling wallet.generate(). This is an offline operation and it produces

04:30

a random private key that represents an Ethereum account. And you can see here we've just output to the command line

04:40

the values that we need to paste into our .env file. So if you copied that value from your command line, you should be able to go

04:50

into .env and replace the corresponding lines there and then save that file. It's worth pointing out that if you want, you can add the address and private

05:00

key of your own Ethereum wallet, although it's worth pointing out that you want to be careful with how you handle your private key to make sure

05:10

that it doesn't get leaked. The next step then is to set our provider API keys.

05:20

There's two third party services that we're going to be using to do this. The first is Etherscan and the second one is Alchemy.get repot

05:30

with Etherscan, this is going to allow us to verify a contract and make the source code public. It just provides a better developer experience.

05:40

To do this, we're going to need to generate an API key. So you need to go to their website and log in. Now, in my case, I've already created an account and I'm already logged in.

05:50

But if you happen to create an account for the first time, you simply just need to go to the API Keys page, which you can see in the menu here.

06:00

Or alternatively, once you're logged in, if you click on that link, then that will take you to the right page. Once you're here, you simply need to create an API key.

06:10

So if I click add, we type in the name of the project. I'm just going to call this IMX Minting. I'm going to create the API key and then simply just need a copy of that API

06:20

key and put it inside our .env file against the ETHERSCAN_API_KEY line.

06:30

The next one we need is Alchemy. And what we do with Alchemy is we use it as an Ethereum

06:40

node that we can send transactions to. And this just means that we don't need to go through the hassle of standing up at Ethereum nodes on our local machine or elsewhere.

06:50

So to do this similarly, we'll need to create an account with Alchemy. So if we click on the link. That takes us to the Alchemy dashboard and it will make you

07:00

log in or sign up for an account. Now, as before, I'm actually already signed into my account here.

07:10

Now, what we need to do is we just need to go to Apps and then Create App. And we just need to give it a name. So again, I'm just going to call it IMX Minting.

07:20

If we want, we can give it a description. The chain that we're going to be connecting to is Ethereum and the network,

07:30

in this case, that we're going to be connecting to is Goerli, which is the Testnet. So if I click Create app, then that creates the app for me and we can see it down here.

07:40

And I simply just need to click on View key and the API key is at the top here so I can click copy.

07:50

If we go back to VS Code or your editor choice, we simply just need to paste that value that we just copied into the ALCHEMY_API_KEY

08:00

line in the .env file and then site our .env file. The next step is an optional one. If we want, we can update the contract details.

08:10

So here we've got a sample CONTRACT_NAME called My Contract, in this case, and a CONTRACT_SYMBOL, MC.

08:20

So in this case, maybe I'll change it to My IMX Contract and we'll call it MIC. We're going to save that.

08:30

The third value here is the CONTRACT_METADATA_URI. This needs to be a URL that points to an API that when you

08:40

append it with slash + the token ID, so like /1, /2, /3, etc. it returns an ERC-721 compatible metadata payload that describes the metadata of that NFT.

08:50

Now we've provided a sample metadata URI, that you're welcome to use, which will automatically return compliant payloads

09:00

for you so that you don't have to worry while doing this lab about trying to also generate an API.

09:10

The next step and, the last one before doing the actual deployment, is that we actually need to fund a randomly generated Ethereum wallet with some ETH

09:20

on the Goerli network. And this is so that we can actually pay for the gas fees to deploy that contract. Now we've included a URL to the Goerli faucet, which is run by Alchemy.

09:30

And in order to use this, you just need to log in with the same Alchemy account that you just used.

09:40

In this case, I'm already logged in. And then we pretty much just need to put our wallet address that has been generated. So in this case, if we go back to our .env file and we copy

09:50

the OWNER_ACCOUNT_ADDRESS value and we paste that in there and then hit Send Me ETH...

10:00

And, now we can say that we've been funded. So now that we've done all of that, we can actually do the last step, which is to deploy

10:10

the contract. Again, we've included a helpful command here that you can execute.

10:20

Now, in this case, what's happening is it's using HardHat to deploy our contract, using this deploy/asset.ts

10:30

file to the Goerli network. And you can see here that it's actually compiled the Solidity files

10:40

into the bytecode and then deploying the contract using the account that we configured in the .env file.

10:50

And once that's all done, then we can see we've got a success message. We've got a link to see the contract on Etherscan, and we've got a instruction here to update our .env file with the contract address that we just

11:00

deployed, which is actually step eight. So let's just start by doing that and get that out of the

11:10

way. If we scroll down here, we can see there's a contract address waiting to be filled in before we dive in and have a look on the scan.

11:20

Let's just have a quick look at this file here. Essentially, we're importing some commands from HardHat,

11:30

and what we're doing is we're getting some environment variables, the ones that we've been filling in in our .env file. We're getting a contract factory to deploy the asset contract,

11:40

which if we go in our contracts folder here, we can see there's an asset.sol file. So this is the Solidity contract that we are deploying.

11:50

We can see here that it extends ERC-721 and also the IMX Mintable interface.

12:00

Other than that, the contracts are pretty straightforward. It's just extending and calling some of those underlying functions. If we go back to our asset.ts, we can see

12:10

that we then just call asset.deploy() and we pass in all of the values that are expected in the constructor

12:20

of our smart contract. And then we essentially just run it. So it's a reasonably straightforward command.

12:30

The final thing then to look at is what does it look like on Etherscan? So if we click through, we can see here we've got our transaction.

12:40

Now if you click that link straight away, sometimes it might take a little while to appear, so just keep retrying. And we can click in and have a look at the high level transaction

12:50

details. We can see that it was issued from our account that we randomly generated.

13:00

We can see what the transaction fee and the gas price were. If we go back and we click on Contract, then we can see the byte code for that contract.

13:10

So there we have it. We've completed our first lab. We've set up our environment. We've created an account on Ethereum.

13:20

We've funded it with ETH from the Goerli Testnet and then we've deployed our ImmutableX compatible contract

13:30

to that Goerli Testnet and captured the contract address. I'll see you in the next lab where we can start interacting with ImmutableX.