Integrating the UI SDK into your application
This page guides you through the steps required to integrate the UI SDK into your existing web application.
Install CSPR.click dependencies
Run the following command in a terminal window to install CSPR.click libraries:
If you're using Typescript, the command above also installs type definitions for CSPR.click.
ClickProvider context provider
First, define the initialization options for the CSPR.click library:
Next, wrap your main application component with the <ClickProvider>
context provider:
This component will download the Core JS SDK and initialize it with the options defined.
Add <ClickUI> component to your app
All the CSPR.click UI elements are managed from the <ClickUI>
component. This component must be added to the very beginning of your main UI component and it's responsible for displaying the top bar and all the modal windows and pop-ups needed for connecting with wallets, showing information to the user, etc.
Add CSPR.click styles
Option 1: your application uses styled-components
When your application already uses the <ThemeProvider> component from styled-components library, you need to add CSPR.click styles to your themes.
Considering as an example that your application has light
and dark
themes, you may merge our styles into your themes like this:
Option 2: your application doesn't use styled-components
Since CSPR.click depends on styled-components
library, add it to your dependencies by running the command:
Now, add the theme provider to your application. It must wrap at least the <ClickUI>
component you added in the previous step:
Note you can choose between two themes: light
and dark
.
Bind callbacks to respond to connection events
In your application, 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.
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.
Import required fonts
In your main CSS file, import the Inter and Jetbrains mono fonts:
Last updated