Getting started

This page guides you through the steps to add CSPR.click to your application without using the UI SDK.

Typescript

If you're using Typescript, add the following packages to your project to install type definitions for CSPR.click:

npm install --save-dev @make-software/csprclick-core-client @make-software/csprclick-core-types

Download and initialize the CSPR.click library

You only need to follow the steps in this section when you're not using the UI SDK.

In your index.html file, add a <script> element before closing your body tag and attach a method called csprClickSDKAsyncInit to the browser’s global context. This method will initialize the CSPR.click library once the SDK downloads.

<script>
  window.csprClickSDKAsyncInit = function () {
    // optionally, handle the loaded event to perform extra actions when
    // CSPR.click is fully loaded and initialized
    window.csprclick.once('csprclick:loaded', () => {
      //do something here
    });
    const clickOptions = {
      appName: 'CSPR.app',
      contentMode: 'iframe',
      providers: [
        'casper-wallet',
        'ledger',
        'casperdash',
      ],
      appId: 'csprclick-template',  
    };
    window.csprclick.init(clickOptions);
  };
</script>

For more information about the initialization options, refer to here.

Below the previous script, add another <script> element to download the script asynchronously from the CDN:

<script async src="https://cdn.cspr.click/latest/csprclick-sdk-1.2.js" charset="utf-8"></script>

Bind a callback method for csprclick:loaded event

You shouldn't try to make calls to the CSPR.click library until it has finished its initialization. The library triggers the event csprclick:loaded when this happens. You can bind your callback using the csprclick.once() method like this:

window.csprclick.once('csprclick:loaded', () => {
      //do something here
});

Normally, you'll add this code to the csprClickSDKAsyncInit function, as in the example above.

Bind callbacks to respond to connection events

In your application, you'll need to listen and respond to some events triggered upon wallet connection changes. Bind your callbacks calling csprclick.on() for each of the events you need to handle:

window.csprclick.on('csprclick:signedIn', () => {
      //do something here
});

Check the full list of events for more information.

Request the user to connect

When you want your user to connect an account, use the connect() method indicating the provider. Typically, you'll have asked your user which wallet he wants to use with your application.

await window.csprclick.connect('casper-wallet');

Check the list of supported wallet keys.

This will trigger the process to show the wallet and request a connection. This method doesn't return with an account. Instead, listen to the csprclick:signedIn to start a session when your user has completed the connection.

Signing transactions

Before your application sends a transaction to the Casper network, you need to get an approval (aka signature) from your user. CSPR.click manages this process communicating with the active wallet to request the user to approve or reject the transaction. The UI depends on the wallet.

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 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 that transaction.