Casper Casper Association dApp Developer Series, 3 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Casper Association dApp Developer Series | #6 | Interact with CEP-78 NFTs from the Browser

Description

In the sixth video of Casper's dApp Developer series, Casper Association Developer Advocate Dylan Ireland shows how you can build a dApp that interacts with CEP-78 NFTs using React and JavaScript.

GitHub repository: https://github.com/dylanireland/dApp-dev-series-6

Ask questions on our Discord: https://discord.com/invite/Q38s3Vh

Timestamps

0:10 - Introduction

0:30 - Update CEP-78 Contract

1:08 - Update CEP-78 Deployment Script

1:50 - Create React Application

2:15 - Create dApp Files

2:56 - Write App.js

3:51 - Write Connect.js

4:43 - Write Metadata.js

5:28 - Write NFTList.js

6:15 - Write Mint.js

8:35 - Write Register.js

9:24 - Write Node.js Backend

13:31 - Install npm packages

13:46 - Test the dApp

15:57 - Outro

A

Hi everyone and welcome back to Casper's dap developer Series in today's video I'll, be showing you how to interact with cep, 78 nfts from the browser using react and the Casper JS SDK we'll be altering and using the deployment script that we developed in the last video. So if you haven't seen, video number five go watch that first it'll be linked in the card above. Let's get started start by opening a new terminal window and heading to the project from the last video we'll need to delete and re-clone the cep.

A

78 contract as it's been updated since the last video.

A

Compile the contract by heading into the directory running, make prepare.

A

And then make build contract.

A

Now, head back open this folder in a file explorer and open index.js and an editor of your choice, I'll be using vs code, we'll be changing owner, reverse lookup mode to true, so that we can look up our nfts from the account hash. Once we've done so we can uncomment, install contract and run the program to do so, head back to your terminal and run node index.js when it's complete, you can head over to testnet.cspr.live or just cspr.live if you're on mainnet go to your account, go down to name, keys and you'll.

A

Note that the contract hash is available here, we won't be using this till later for now, we'll get started on our react: application so head back over and close your terminal window as well as your file explorer get started by opening a terminal window and heading to the directory. You'd, like your project to be stored, I'll start from the home directory now create a new react. App with npx, create react app and give your project a name: I'll name, mine, nft interaction,.

A

Now open up vs code or an editor of your choice, go to the side. Panel click open, folder and open the new folder you just created. First, let's create the files we'll need we'll need. Server.Js, then we'll create react components so open up. Src create connect.js.

A

Then metadata.js.

A

A

And nft list .js.

A

Lastly, we'll need one more component: register.js, as with reverse owner lookup mode, enabled mentors are required to register their accounts before they mint go ahead and close out all the files you just created and open up app.js. We can delete the import logo statement and remove everything from the return statement inside the app function.

A

We'll first want to import react and we'll also want to import all the components that we just created. We haven't written anything in the components yet, but we'll do that in a minute, we'll be using react state to set and store the public key, so go ahead and use react.use State and set the public key to null we'll want to display our components so list them out in the return statement. I have them in a div tag for styling reasons, but you can also have them in a fragment like this.

A

First, we have the connect component in which we pass set public key as a prop, and then we have metadata. Then we have nft list in which we just passed the public key. We do the same for register and mint as we'll need the public key available in these components.

A

The connect component will be responsible for connecting to the signer. So we'll start there we'll open up connect.js and import the sign or class from the Casper JS SDK, and now we can actually create our component, which we'll name, connect and it'll accept props within our component. We just want a return statement which will simply display a button that calls connect, signer, which we'll write in a second we've written. This connect signer function in video 4, and what it does is it calls sign or dot is connected.

A

If it is, then it will get the active public key if it is not it'll send a connection request in the event that there's an error we'll get an alert, and in this case we'll just set the public key if we're connected and we'll alert the user with the public key, keep in mind by passing props into connect, signer and then calling props.set public key we're actually setting the public key within the react state in app.js.

A

Now we can finish off this file by exporting our component using export default. Connect next on our list of components is metadata.js, so go ahead and open that file we'll be using axios to interface with the back end, so write import axios from axios. We haven't yet installed this npm package, but we'll do so before running our program.

A

Let's write the component metadata, which will accept props and within it we'll just have a return function that has a text input and a button that calls get metadata which we'll write next, the get metadata function will simply call our back end at the get endpoint metadata and we'll pass in the token ID, which will be selected by the user when they type it into the text input, then we will alert the user with the response or alert them with an error finish off the file by exporting the component using export default metadata.

A

Next up is our nft list component, so go ahead and open that file, we'll start off by importing axios like we did. Within metadata.js now write the component nft list with the props, which will just return a button that, when clicked calls get owned, nfts and passes along the public key that we defined in app.js we'll write the get earned, nfts function below accepting the public key.

A

If the public key is no or it hasn't been set, we'll alert the user saying that no public key has been found and to connect to the signer, then we'll exit out of the function if it has been set, then we'll call our back end at the get endpoint owned, nfts passing along our public key and then we'll alert the user with the response or alert them with an error.

A

Lastly, we'll export our component and move on to mint.js the mint component will be responsible for minting nfts from the browser, so we'll need a few things from the Casper JS SDK be sure to import all of these, as well as axios for connecting to the back end. The mint component itself is quite simple and only requires that we return a text input in which the user can place metadata and a button that, when clicked calls the MIT function, which we'll write in a moment and passes along the public key from app.js.

A

The mint function, however, will require a bit of work, we'll first make sure to pass in the public key from above and make sure to make this asynchronous. So we can use the await keyword then just like in nftlist.js we'll check if the public key is null if it is Will alert the user that no key is found and will return out of the function. Now we can create a new contract instance and set the contract hash to get the contract hash head back over to testnet.cspr.live or cspr.live.

A

If you're on the mainnet and go and grab the contract hash head back over and paste it in with some quotes, then we need to build the runtime arguments, so we can use runtime orgs.frommap. The token owner will be the connected public key and the signer and the token metadata will be text. That's inputted by the user up here and we will grab that using document.getelementbyid mint input and grabbing its value using CL value.

A

Builder on both of these objects is important here, so they can be cast as CL values and understood by the Casper JS SDK. Now we can create a deploy, object using contract.call entry point we'll be calling the mint entry point we pass in our arguments. We create a CL public key from our public key within the react state.

A

We note that we are using the Casper test net and we Define our Gas payment, which in this case is 40 cspr or 40 billion moats. Now we can prepare to sign or deploy we'll first do deployutil.deploy to Json to convert our deploy, object to Json, to be understood by the caspersigner. Next, we'll open up a try, catch block, we'll ask the user to sign the deploy if they decline it we'll get an error and will alert the user if they do sign it properly.

A

We can send our sign deployed to the back end at the post. Endpoint deploy make sure to set the headers to content type application Json with that our mint component is complete and we can export it using export default mint. Finally, we can write out our register component, which will look very similar to mint.js.

A

So we'll start by copying and pasting the component in we'll change the name of the component to register same thing with the export statement at the bottom, then we'll change the name of the functions to register with a lowercase r now remove the text input as we won't be needing it and change this mint to register.

A

The only changes we'll be making to the register function are the arguments. We won't need any token metadata, but the token owner will remain the same. We'll change the entry point to register underscore owner and we'll change our Gas payment to 5 cspr.

A

That's it for our components. Now we can move on to the back end in server.js, our backend application will be built using Express, in which we will also use the cores module to set course. Headers I'll be using Port 3001, but you can use any port you'd like as long as it's available and then we'll just bring in a few things that we'll need from the Casper JS SDK we'll tell our application to use express.json. So we can parse. Our Json deploys, we'll also use the cores module that we imported above next.

A

Let's create a new Casper client object using the URL of an online peer, then we'll create a new contract object and pass in our client. So we can connect to the network from the contract object here then we can set the contract hash. Just like we did in mint and register. Now we can create a new get endpoint metadata, which we call in our component metadata.js. This will be responsible for getting the metadata of an nft given its token ID.

A

Now we can open up a try, catch Block in which we'll call contract.query contract dictionary in our case we'll be querying metadata raw, but there's other dictionaries available for different metadata modalities like nft, 721, custom, validated and cep 78. And lastly, we will use rec.query.tokenid to gather the token ID that we defined here in metadata.js.

A

Our result will be made up of the data that comes out of this query and we can send that back to the client using res dot send. And then, if we incur an error, we can set the status to 400 and send the error message back to the user. Now we can open up another get endpoint owned nfts. This will be the most complicated based on the way that cep 78 records, nft ownership, but it will be used to determine all of the nfts owned by a certain account.

A

First, we'll Define a new constant account hash, which we can get from creating a CL public key of the public key that is sent along in nftlist.js, and then we will convert that to an account hash string and we will substring 13 characters off as each account hash will start with the text account hash, which is 13 characters long, and we need to remove this before we send this along to the network.

A

Now we'll create a new empty array in the variable owned, and this will record all of the nfts owned by the account as we iterate through them.

A

Now open up a new try catch block and, as you can see, we're going to send back owned back to the user and if there's an error, we'll just send the error message in cep. 78 nfts are recorded in Pages where each page contains a thousand nfts and there are a thousand total possible Pages for a maximum total token supply of 1 million nfts.

A

By querying the dictionary page table with an account hash, we can get a Boolean array of maximum length, 1000 that tells us which Pages this account owns. Nfts in if we iterate through this Boolean array and find the value to be true, we know the account has nfts in this page and since we know that we can then query the page itself to find out which nfts in the page, the account owns once we've gotten the page data, which itself is another Boolean array we can iterate through and if a value is true.

A

We know that the account owns that nft.

A

Now that we know this account owns the nft, we can add it to the owned array and calculate its token ID by Computing page table index, multiplied by Page size plus the page index then like mentioned before, we can just send the owned array back to the front end and we're done with the owned nfts endpoint.

A

Lastly, we need the deploy endpoint. This is a post endpoint that accepts the sign, deploys and sends them off to the network. This endpoint is quite simple. All it does is accepts the deploy and unwraps it from Json back into a deploy object. Then it uses client.put deploy to send it to the Casper Network. Then we get the deploy hash and send that back to the front end. If we get an error, we just set the status code to 400 and send the error message.

A

Finally, to finish off our Express app, we just call app.listen and tell the app to listen on the port we defined earlier before testing save all your files go over to a terminal in your working directory and run npm install course, axios Express and the Casper JS SDK.

A

Now open up another terminal in the same directory in one run: node server.js and in the other Run npm Run start.

A

The application should open automatically in a browser window, and yours will not look like this I've added styling. Yours will instead look like this, but for right now we will use this, and this will be available on the Repository first open up your signer and unlock your vault.

A

Now click connect, signer and you'll see we get the public key of our account. Now we can register our account for token ownership, which will pull up a signature request. We can sign this request, copy the deploy hash and if we open, testnet.cspr.live and paste in the deploy hash, we can await the execution of our deployment when it's complete. It should look like this and you'll see that our ownership registration was successful. Now we can head back to our app and mint and nft for the metadata, we'll just say, test metadata.

A

And click mint, this will open up another signature request. We can sign it copy the deploy hash head back over to cspr.live and paste the deploy hash.

A

Now that it's succeeded, we can head back to our app and check the nfts that we own, as you can see, we own the nft with the index 0. So we can put 0 in and get the metadata you can see. It says test metadata if we'd like to Mint another, we can, we can say another test, click mint sign it copy the deploy hash head to cspr.live and paste it.

A

In now, when we go back to our app and click get nfts owned, you can see we own the nfts, 0 and 1, and if we put one in here, click get metadata, we'll say another test: that's all for this video, as always, if you enjoyed it, be sure to hit the Subscribe button and hit the Bell icon if you'd like to be notified, when new videos are released thanks and I'll see you in the next video.