JavaScript

This page guides you through the steps required to integrate the UI SDK into a non-React application.

Check also the HTML/Javascript demo in the csprclick-examples repository to see the resulting application. In that repo you can find also examples or few other libraries/frameworks.

Download the CSPR.click UI runtime library from the CDN:

Before the closing head tag, add a script element to download the CSPR.click scripts:

  <!-- update to latest released version -->
  <script defer="defer" src="https://cdn.cspr.click/ui/v1.5.0/csprclick-client-1.5.0.js"></script>
</head>

Add a container for the CSPR.click UI

In your main layout file, add a <div> container where CSPR.click will inject some UI components like the navigation top bar or the 1-click sign in modal. Set an id, you'll need it later during CSPR.click initialization.

<body>
  <div id="app">
    <div id="csprclick-ui"></div>
    <div id="content">
     <!-- you rapplication goes here -->
    </div>
  </div>
</body>

Also, depending on the layout of your application and the grid system you're using, you'll need to add some CSS styles to this container to match the styles of the rest of the app (width, background color, etc).

Configure the initialization of the CSPR.click SDK

In a javascript file, add the initialization options for the CSPR.click SDK. Make sure this script loads before CSPR.click is downloaded.

The minimal configuration for the UI just defines the container for the navigation top bar and the root container of your app. We'll see other options later in this document.

const clickUIOptions = {
  uiContainer: 'csprclick-ui', 
  rootAppElement: '#app',
  showTopBar: true,  
};

Next, define Client SDK options:

const clickSDKOptions = {
  appName: 'CSPR.click demo',
  appId: 'csprclick-template',
  providers: ['casper-wallet', 'casper-signer'],
};

You can read more about the CsprClickInitOptions object in the reference section.

What's next

At this point, your application should show the CSPR.click top navigation bar and you can click on Sign in button to connect your favorite wallet.

Listen to CSPR.click events

You'll need to listen and respond to some events triggered when the user connects an account, switches to a different one, or closes the session.

Refer to the Handling events page for information on how to add your listener functions.

Ask the user to connect a wallet

If you don't display the CSPR.click top navigation bar, you must have your own Sign in or Connect buttons and respond calling the CSPR.click library .

Refer to the Connecting a wallet page for information on how to trigger the wallet connection process.

Request transaction approvals

At some point, your application will need to interact with the Casper network by sending a transaction (aka deploy). 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.

Refer to the Signing transactions page for information on how to request the user a transaction approval.

You can add any of our predefined settings selectors or account menu items. And you can define your own.

Refer to the Customizing the top bar section for complete reference on how to work with each of the setting elements in the top bar.

Last updated 4 months ago