Signer Developer Guide

Signer Developer Guide

Introduction

This guide aims to describe the essential functionality you need to create a deploy on the Casper Network with the Casper JavaScript SDK and sign it with the Casper Signer.

New sites integrated with the Signer need to go through an approval process. You need to submit a request to connect to the Casper Mainnet.

Installing the Demo Application

To learn how to send a simple deploy signed with the Signer, look at the Signer Demo. Next, we will discuss the key parts of this demo that you might reuse when integrating your website with the Signer.

Note: Always check GitHub for the latest and full code implementation. This tutorial is a general guide and uses code samples, which may not work if copied.

Connecting to the Signer

When the Signer Demo loads, it generates a casperService object of type CasperServiceByJsonRPC, which accepts a URL. We use a mock URL in the demo because we are not tying the app to the blockchain. But, in your case, you would specify the URL of your application.

When connecting your application with the Signer, you can expect the Signer window to open and behave as described in the Signer Guide.

this.casperService = new CasperServiceByJsonRPC('Signer-Demo-url')

To connect, call the sendConnectionRequest method to attempt the connection.

async connectToSigner() {
    return Signer.sendConnectionRequest();
  }

Creating a Deploy

The Casper JavaScript SDK provides utility functions in the DeployUtil library.

You can now create a simple transfer deploy using the Casper JavaScript SDK.

let sessionCode = DeployUtil.ExecutableDeployItem.newTransfer(
      200,
      publicKey,
      null,
      this.state.transferTag
    )

The demo creates a deploy using the makeDeploy function in DeployUtil. The code specifies the chain name as Signer-Demo-Chain; this is where you need to update it for your purpose.

return DeployUtil.makeDeploy(
      new DeployUtil.DeployParams(
        publicKey,
        "Signer-Demo-Chain"
      ),
      sessionCode,
      DeployUtil.standardPayment(100000000000)
    );

To demonstrate how you could work with user input, look at the code adding a transferTag to the deploy. Below is a sample, but you can see the full implementation here.

value={this.state.deployType === 'transfer' ? this.state.transferTag : this.state.message}
              

Signing Deploys

Once you create your deploy object, you will need to sign it by accomplishing these steps:

1. Retrieve the account information by specifying its public key.
2. Make sure that the account signing matches the signing key.
3. Create the deploy using the key that we get from the Signer.
4. Sign the deploy using the Signer.sign method, which takes a deploy and the key with which you want to sign the deploy.
5. Validate the deploy, then sign it using the DeployUtil.setSignature method based on the return value from Signer.sign.
6. Finally, use the casperservice from the JS SDK to deploy the signed deploy.

Your active key can sign deploys with the Casper Signer. Once you trigger the signing functionality, you can expect the Signer to behave as described here.

Viewing Deploy Details

The JavaScript SDK also allows you to view a deploy's full details in JSON format.

Under session, you will the deploy details:

1. amount - The number of motes to be transferred
2. target - The recipient purse
3. id - The tag we have added as user input

Bellow the session object, you will notice the approvals section, in which you will see the signature added by the Signer.

Summary

We hope that now you have all the ingredients to create your deploys and sign them, thus integrating your application with the Casper Signer and the Casper Network.