Casper Casper Association dApp Developer Series, 17 Jul 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Casper Association Developer Series | #8 | Casper Wallet Integration & Deploying Code from Browser

Description

This episode of the Casper Association's dApp Developer Series demonstrates how to integrate the new Casper Wallet into a full-stack dApp, and how to use it to sign and deploy transactions that rely on pre-compiled session code.

Please note that this project has **NOT** been audited.

Casper Wallet: https://www.casperwallet.io/

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

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

## Timestamps

0:10 - Introduction

0:31 - Create a new React App

0:54 - Copy Session Code

1:23 - Write App Component

2:33 - Write Wallet Component

3:55 - Write Interact Component

8:15 - Add Wallet and Interact to App Component

8:43 - Write Express Backend Server

10:10 - Test

11:42 - Outro

A

Hi everyone and welcome back to Casper's app developer Series in today's video you'll, learn how to implement the new Casper wallet and use what you learned to interact with smart contracts from the browser for this video we'll be using the smart contract that we developed in the last video. So if you haven't seen, video number seven go watch that first we're going to be building our project with react, so get started by opening a terminal window navigate to the directory.

A

You'd like your project stored and run npx, create react app and then the name of your application. I'll name mine, video 8., now CD into your new projects, folder and install the Casper JS SDK Express, and the cores module with npm since we'll be using the session code that we wrote for the smart contract in the last video open up that project in a file explorer and locate the withdraw and deposit wasm.

A

Copy these files and paste them in a new folder within your projects, directory named wasm.

A

Foreign, your project, in an editor of your choice, I'll use vs code.

A

Open app.js in SRC and delete everything in the return statement.

A

Ignore the error and leave it blank for now go ahead and import. The Casper, client and contracts objects from the Casper, JS, SDK and import react begin. The app component by defining a new react, State variable public key and setting it to null. Now we need to connect to the Casper wallet soon in the future, there will be a Casper wallet, SDK npm package, but for now it is injected into the user's browser window by the Casper wallet you can access this provider with window.kasper wallet provider.

A

We can check to see if the user has the Casper wallet installed by checking if Casper wallet provider is equal to null, if it's not null instantiate a provider instance with Casper wallet provider then create a new Casper, client and Casper contract client object to interact with the Casper Network, create a variable to store the contract hash of the smart contract from the last video.

A

That's it for app.js. For now, let's create a component to handle the Casper wallet. Integration create a new file wallet.js and create a new functional component wallet notice that, while it accepts props with which we will make available the react, State variable public, key and Etc set public key, as well as the Casper wallet provider.

A

For this example, if props.publickey is equal to null, then we assume the Casper wallet is disconnected and we show the user a button that allows them to request a connection if, on the other hand, a public key is set, then we show the user a disconnect button.

A

Now we need to write the request, connection and disconnect functions. We'll start with request connection which just calls on the Casper wallet to request a connection. If it connects properly, then we forward execution to get active public key, which we'll write in a moment disconnect looks similar, but when it succeeds, it sets the public key to null.

A

Finally, we need to write the get active public key function, which calls the get active public key method on the Casper wallet provider, and if it gets it successfully, it sets the public key within the react. State, any errors that occur can be caught using catch according to the Casper wallet's error standard. If error equals one, the wallet is locked. If error equals two, then the user did not approve the connection. The Casper wallet should now be functional within our dap export. The component using export default wallet, create a new file interact.js.

A

This component will handle all of the interaction with the bank. Smart contract, including deposits and withdrawals, start off the file by importing these classes and functions from the Casper JS SDK. To find your interact component.

A

We only want this component to be shown to the user. If there's a public key in the state so wrap the return statement in if props.publickey.

A

For this example, there will be two buttons deposit and withdraw and one text input for the amount structure. Your jsx like so now create the deposit and withdraw functions. They're both the same and just call interact with the is deposit Boolean flag.

A

Before we write this interact function, we need a way to load in our wasm session code, so open a new asynchronous function get wasm in this function. We will call our backend server to load in the wasm which we will set up once we're finished. With the front end, we can use the fetch JavaScript API to make a get request to our backend at the get wasm endpoint and we can set the is deposit Boolean flag to tell our back end, which session code binary.

A

We want with fetch you can check to make sure a request didn't fail with result.okay use this to handle errors that may occur. The response will come back as an array buffer, so acquire it as so and cast it to a uint 8 array and return it to the caller.

A

Now we can write the interact function, make sure this function is asynchronous, so we can use the await keyword. The first thing that needs done is to query the wasm session code called get wasm like so now we need to build a runtime arguments object. Both the deposit and withdrawal session code expects two arguments: contract hash and amount. We defined our contract hash in app.js and it is available as a prop as you'll see when we implement the interact component into app.js.

A

The contract hash we defined is a hexadecimal string, though, and we need to convert it to a CL value, so the Casper JS SDK can make sense of it. Let's start by creating a variable contract, hash, u8 array and for the value rap props.contract hash in the decode base. 16 function from the conversions module in the Casper JS SDK now convert this uint 8 array into a CL value with new CL byte array. The other argument amount will come from the text.

A

Input that's shown to the user, get this value with document.queryselector and convert it to Motes using the Casper JS SDK function, cspr to Motes package, the runtime arguments into a runtime args object. You'll also notice that I've converted these values to a clu-512 and cl key respectively, as these are the object types that the session code expects.

A

Given that we have all of our session logic prepared, it can now be crafted into a deploy object, called the install method on the contract, client prop and provide the wasm binary, runtime arguments, Gas payment, public, key and Network.

A

This deploy remains unsigned so prepare it for the Casper wallet by converting it to a Json representation, open up a try, catch block and call sign on the Casper wallet provider, with the Json, deploy and public key as arguments. The result variable will contain information about the signature request. For example, we can check to see if the user canceled the request by checking result.cansled sign the deploy by applying the user's signature using deployutil.set signature.

A

Convert this new sign, deploy, object to a Json representation, now send this deploy to the back end with a post request using fetch again. If an error occurs, we can catch it with response.okay response.txt will either give us our error message or our HTTP response, and since there's no error message, if we make it past this point, we should be able to log our response.

A

This will log out the deploy hash in the browser's console, and this should finish our interact component. Let's just export it with export default interact. All of the components are now complete. All that's left to do on the front end is to import our components into app.js, open app.js and import wallet and interact at the top.

A

Now, in the return statement, put the wallet component passing in public key set public key and provider as props then do the same with interact except this time, ignoring set public key and adding contract, hash, Casper, client and contract client. We're now finished with the front end.

A

All that's left is to write a small Express app to handle backend requests in your Project's root directory, create a new file server.js start by importing Express cores, fs and Casper client and deploy util from the Casper JS SDK create a new Express app and make it support, Json, request bodies, and course headers instantiate.

A

A Casper client object for submitting, deploys open the endpoint get wasm which will serve the wasm binaries to the front end create a variable path, which is deposit when is deposit, is true and withdraw when is deposit, is false, narrowing in the appropriate wasm file.

A

Given the path above note that this is referencing, the wasan that we created a folder for earlier and, lastly, send this to the front end as a buffer, now open the deploy endpoint, which will accept, deploys from the front end and forward them to a Casper node note that the Callback function is asynchronous in this case, unlike get wasm as we intend to use the await keyword, open, a try, catch block with some basic error, handling, reconstruct the deploy using deploy from Json on the request body, finally send the deploy to the network and return the deploy hash to the front end.

A

All that's left to do is bind our app to a port. I'll choose 3001, because our react app is on Port 3000. Note that if you change this from 3001 you'll have to go into interact.js and change it as well.

A

Our app is done so, let's test it open up two terminal windows in your projects, directory in one run nodeserver.js and in the other Run npm Run start a browser window should open. For you automatically be sure you have the Casper wallet installed before you test. There's a link to the extension in the description.

A

Your app will not look like this I've added custom CSS for simplicity's sake. Your app will instead look like this, but will function. The exact same click connect to wallet put in your password.

A

And select the account you'd like to use.

A

Now, before we make a deposit, let's check the balance of our account, which should be zero.

A

Now, let's deposit 20cspr sign the transaction now copy the deploy, hash and paste it in cspr.live and you'll see it succeeded and we sent 20 cspr to the contract.

A

Now we can go back and check our balance and see that it is 20 billion modes or 20 cspr head back to your app specify an amount lower than 20 and click withdraw sign. It copy the deploy, hash and paste it in cspr.live, and you can see that our withdrawal succeeded. We can once again check our balance and we'll see that we have 5 billion modes or five cspr remaining.

A

That's all for this video If you enjoyed it, leave a like and be sure to subscribe. If you'd like to see more thanks and I'll, see you in the next video.