JavaScript
Last updated
CSPR.click (latest)
Last updated
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 repository to see the resulting application. In that repo you can find also examples or few other libraries/frameworks.
Before the closing head tag, add a script element to download the CSPR.click scripts:
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.
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).
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.
Next, define Client SDK options:
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.
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.
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 .
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.
You can add any of our predefined settings selectors or account menu items. And you can define your own.
You can read more about the object in the reference section.
Refer to the page for information on how to add your listener functions.
Refer to the page for information on how to trigger the wallet connection process.
Refer to the page for information on how to request the user a transaction approval.
Refer to the section for complete reference on how to work with each of the setting elements in the top bar.
