Casper Casper Association dApp Developer Series, 22 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Casper Association dApp Developer Series | #4 | Interface with Smart Contracts from the Browser

Description

In the fourth video Casper's dApp Developer series, you will learn how to call and query smart contracts on the Casper Network from the browser using React and the Casper Signer.

This video utilizes the smart contract that was developed in the previous video: https://www.youtube.com/watch?v=Bykv9OcLAgk&t=146s)

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

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

#Timestamps#

0:00 - Introduction

0:32 - Install the Casper Signer

0:38 - Create a new React App

1:50 - Create New Components

2:08 - Set up App.js

2:59 - Write the `Connect` Component

3:47 - Write the `Update` Component

6:09 - Write the `Query` Component

6:37 - Write the Server-Side API

8:44 - Test the Project

10:06 - Outro

A

Hi everyone and welcome back to casper's dapp developer series.

A

My name is dylan and today I'll be showig, you how to call and query smart contracts from the browser.

A

Using react and the casper signer.

A

we'll be interfacing with the same smart contract that we developed and deployed in the last video,.

A

And we'll be using a lot of the same backend code in the node.js environment.

A

That will act as an api from which we can send our deployments to the network.

A

If you watched the previous videos,, you should already have the casper signer installed.

A

If you don't,, install it using the link in the description.

A

Begin by opening up a terminal and navigating to the directory you'd like to store your project.

A

I'll start from the home directory.

A

now, to create a new project, run npx create-react-app.

A

And name your project. I'll name, mine, casper interface,, but you can name it whatever you'd like.

A

Now, navigate into the directory with cd.

A

And let's install our dependencies.

A

we'll need the casper-js-sdk.

A

We'll need express,, axios, and cors.

A

We'll be using express to create an api that will listen for requests from the frontend.

A

We'll be using the cors package to ensure that the responses to those requests are fulfilled with cors headers.

A

And we'll be using axios to connect to the backend from the frontend.

A

Go ahead and run "npm run start" to ensure the react is working properly.

A

And it looks like it: is. now, go ahead and open up vs code or your prefered editor.

A

And open a folder in the source, directory.

A

Begin by creating 3 new files.

A

call the first one query.js.

A

Next, we'll do update.js.

A

And lastly, connect.js.

A

Now, open up app.js.

A

go ahead and remove everything in here.

A

and replace it with a react fragment which is just an open, tag.

A

Now,, let's import the files we just created and import react as well.

A

We'll need the public key to be available to all of the components.

A

So, use the react state, hook., and,, we'll use publickey and setpublickey.

A

If you are not familiar with state in react,, publickey is initially set to null.

A

And we can use setpublickey to set the public key from any of the components.

A

When we do this, it'll trigger a re-render.

A

now,, our app is going to be very simple,, so we will just place all of our components within the "div" tag. Here.

A

Now, we'll want the connect component to be able to set the public key,.

A

So we will pass setpublickey in as a prop and for update,. We want it to be able to read the public key,, so we will pass in publickey as a prop.

A

Now, let's move on to connect.js.

A

first, we'll want to import the signer as we'll be using this class to interface with the casper signer in the browser.

A

Now, I'll set up our component, which will call connect and we'll bring in the props.

A

It'll just return a single button that, when clicked runs the connectsigner function.

A

And passes the props through., we'll write this connectsigner function in a moment.

A

now,. Let's write the connectsigner function.

A

so,, the connectsigner function, first checks. If the signer is connected.

A

If it's not,, it will send a connection request.

A

if it is, it'll, get the active public key and then set it.

A

Remember we passed in setpublickey from app.js.

A

If it fails, here, it'll alert the user with an error message,.

A

And if it fails, here, it'll alert the user with an error message.

A

This will often happen if the signer is locked, it'll, throw an error.

A

Now, we can just export our component and we're finished here.

A

Now, let's move on to the update, component.

A

first,, we'll want to import everything that we'll be using from the casper-js-sdk.

A

And we'll also want to import axios, so we can connect with the backend that'll. Be writing when we're finished. Writing the frontend.

A

Now we can write the update component, which is also pretty simple.

A

We start by defining a variable name: disabled., we'll set it to true.

A

This'll relate to the button as it'll be disabled by default..

A

If the public key is not equal to null,, we'll set disable equal to false so that the button is enabled.

A

When we click the button,, it will run sendupdate with the public key and we'll write this function in just a moment.

A

To begin the sendupdate function,, we can first set it as asynchronous and to accept the public key.

A

Then we can create a new contract object and we can set the contract hash.

A

The contract hash will be the same as the deployed contract from the last video,.

A

Which you can find by going to your account at testnet.cspr.live.

A

And going in the named keys and copying the contract hash.

A

Now we need to obtain a new message to send to the smart, contract.

A

And we will do this by using document.queryselector and we'll select the input that we set up earlier.

A

And then we'll get its value. normally, you'd want to make sure that it is not null or empty but,. In this case, we'll just assume it isn't.

A

now,. We need to build our transaction so that we can deploy it.

A

We'll do this by calling contract.callentrypoint.

A

We'll first pass in the entry point we'd like to call,, which is update_msg.

A

Now we need the runtime arguments which we can build from a map.

A

We'll say "message to clvaluebuilder.string(value)".

A

We actually need to build this into a cl value, even though this is already a string.

A

Then,, we'll use clpublickey.fromhex(publickey).

A

This is the public key, that's coming from the casper signer.. We need to built it into a clpublickey object.

A

Then, we select the network name. in this case. It's casper-test..

A

If you were using the mainnet, it would be just casper.

A

and then, the gas payment.. This is 1 billion, motes or 1 cspr.

A

As is,, this is a deploy object from the casper-js-sdk.

A

And we need to convert that into json, so we can send it to our backend.

A

So we can use deployutil.deploytojson and pass in the deploy.

A

Now that we have our jsondeploy,, we can go about signing it and sending it off to the backend.

A

So, first we'll initiate a signer request with the jsondeploy and the public key.

A

This will open up the casper signer and initiate a request for you to sign.

A

Then we can send this to the backend at the endpoint "update_msg".

A

We will send the signeddeploy and the header will just will be content-type: application/json.

A

Now just export your component. and we can move on to query.js.

A

Query.Js is probably the simplest of them all.

A

First,, we'll just import axios as we'll need to call the backend.

A

Then we can actually write our component in which we will pass in the props and just have a single button that calls querymessage.

A

Lastly,, we'll just need the querymessage function,, which calls the backend at the endpoint "query_msg" and then alerts the user with the response.

A

Export the component. and let's move on to the backed.

A

Create a new file "server.js".

A

And in this file,, we'll first import, our dependencies.

A

we'll need express,, we'll set up our express app., we'll require cors., we'll set up our port, which I'll use 3001,. You can use any port you'd like.

A

And we'll need all of these objects from the casper-js-sdk.

A

We'll tell our express app to use the json middleware and set up cors headers.

A

Now, we'll need to instantiate a new casperclient object with an rpc url.

A

Find online peers by going to testnet.cspr.live/tools/peers- or just cspr.live, if you are on the mainnet.

A

Look for any peer ending in 35000. copy, the ip address.

A

Head back, over, paste, it in., replace the port with "7777" and add "/rpc".

A

Just like in update.js,, we can set up a contract object.

A

And set the contract hash to the contract, hash of our smart contract.

A

The difference, in this case, you'll notice, is that the client is actually being passed into the contract. Object.

A

So,, as soon as we make queries with the contract, object, it'll send it through the casperclient.

A

Let's set up our first endpoint, which will be a post endpoint at update_msg.

A

This will also be an asynchronous callback function.

A

to handle sending the deployment to the network,. We'll first set up a try-catch block.

A

We'll use deployutil.deployfromjson. we'll pass in the post, body.

A

And we'll unwrap the deploy into an actual deploy object from the casper-js-sdk.

A

Then we will send that deploy to the network using the client.putdeploy method.

A

And we'll send the deploy hash back to the user on the frontend.

A

To handle querying the message,, we can set up a new endpoint that will label "query_msg".

A

This will be a get request instead of a post request,, but it is still asynchronous.

A

We'll send back to the frontend the result of this contract.querycontractdata function.

A

And we'll pass in the named key "message"., and this message argument refers to the message name key within the smart contract.

A

Finally,, all we need to do is tell our express app to listen on the port that we specified and we're finished!.

A

To test that everything is working, make sure all your files are saved.

A

Head over and open two terminals.

A

in the first one, run: "node src/server.js".

A

And in the other, run, "npm run start".

A

If everything worked correctly,, you should see this basic web app pop-up on your browser at port 3000.

A

If we click "connect signer", you'll notice, we get an error.. It says: "please unlock the signer to read key".

A

So,, if we open the signer and unlock our vault.

A

And then, click "connect signer", again. you'll notice that the "update message" button becomes enabled.

A

Now,, if we run query mesage, you'll see it says: "hello world!".

A

And that matches what we see if we go to the named key message and click on the uref.

A

We see the value "hello world!" now, let's try updating the message.

A

We'll write a new message. I'll, say: "hello again"., we'll click "update message". it'll initiate a signature request.

A

I'll sign the message. you'll see that we get a deploy, hash.

A

We can take this deploy hash. copy, it,.

A

Paste it here, and wait for it to complete.

A

once the execution succeeds, we can head back to our react. App, query the message and you'll see it says: "hello again".

A

We can verify this by going back to cspr.live, going back.

A

And we see it says: "hello again"., that's all for this video.. If you found it, useful, click the like button,, consider, subscribing, and turn on the notifications with the bell button.

A

If you'd like to be notified, when new videos are released.

A

in the description,, you'll find the link to the github repository for this project.

A

If you have any questions, be sure to reach out to us on discord.

A

thanks and I'll see you in the next video.