Signing transactions

Your app will need to send transactions to Casper. Such operations must be approved by the user by signing what we call in Casper the deploy.

How to build a deploy object is out of the scope of this documentation. We recommend to refer to the official Casper docs on this topic. Note that your frontend web application does not necessarily always create the deploy. In some scenarios, that can be a responsibility of your backend application or even another party.

In any case, at some point you will have a deploy in the form of a json obect. Removing the payment and session details for the sake of simplicity, it will look like this:

{
    "hash": "5803e985c113a5d4d24bef4cd8cbb01dc546a1d138756c406880858eb44380e2",
    "header": {
      "account": "020339898123654b6290f1b36c794393514d355e006336d1bc2c1c4ca84596d68f02",
      "timestamp": "2023-08-30T21:50:48.627Z",
      "ttl": "30m",
      "gas_price": 1,
      "body_hash": "024f684ba6d35436296377aa428f7fc9dbe72412ba8eaec8130a86276a32d385",
      "dependencies": [],
      "chain_name": "casper"
    },
    "payment": {
      ...
    },
    "session": {
      ...
    },
    "approvals": []
  }

Typically, you'll handle a deploy without approvals. And such approval is what you want to get from the user. Then, the deploy will be ready to be processed by a Casper node.

To get the approval CSPR.click SDK offers two options:

• send() method. Use it to ask CSPR.click to request the user to approve the transaction and then send it to a Casper node, where it will be processed.
• sign() method. Use it to ask CSPR.click to request the user to approve the transaction and return to you the signature value.

In most cases, you can just use the send() method and process its result to communicate to the user whether the operation is being processed in the Casper network or it has been rejected for some reason.

But in some advanced scenarios you will require the sign() method and get the signature to continue the processing of the transaction.

Buy Alice a Coffee on testnet

In the React create-react-app template we've added an example that shows how to request the approval for a transaction that sends to Alice (an imaginary colleague in our team) 50 CSPR tokens on testnet.

Take a look into the <BuyMeACoffee> component. Here are the key parts:

function BuyMeACoffee() {
  const clickRef = useClickRef();
  const activeAccount = clickRef?.getActiveAccount();
	
  const handleSignTransaction = async () => {
    const sender = activeAccount?.public_key?.toLowerCase() || '';
    const deploy = makeTransferDeploy(sender, recipientPk, '50' + '000000000', 'casper-test');
    
    clickRef?.send(deploy, sender)
      .then((res: SendResult | undefined) => {
        if (res?.deployHash) {
          alert('Transaction sent successfully: ' + res.deployHash);
	} else if (res?.cancelled) {
	  alert('Sign cancelled');
 	} else {
	  alert('Error in send(): ' + res?.error + '\n' + res?.errorData);
	}
      })
      .catch((err: any) => {
	alert('Error: ' + err);
      });
  };
	
  return (
    ...
    <button onClick={() => handleSignTransaction()} />Sign transaction</button>
    ...
  )
}

makeTransferDeploy() is a method that uses Casper JS SDK to build a deploy object to transfer CSPR tokens from the signer to another recipient.

To request the user an approval for this deploy, we're calling the send() method indicating also the sender public address. CSPR.click then forwards the deploy to the corresponding active wallet. The user then must review the details of the transaction and approve the transaction. Then, the transaction is automatically sent to the network.

Finally, don't forget that your application must handle different responses. Sometimes your user will click the Cancel button in the wallet or the Casper node will reject it due to different reasons.