React
Last updated
Last updated
This page guides you through the steps required to integrate the CSPR.click SDK into your existing React web application.
Run the following command in a terminal window to install CSPR.click packages:
If you're using Typescript, the command above also installs type definitions for CSPR.click.
First, define the initialization options for the CSPR.click library:
Next, wrap your main application component with the <ClickProvider>
context provider:
This component will manage the download and initialization of the CSPR.click runtime library.
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.
When your application already uses the <ThemeProvider> component from styled-components library, you just need to add CSPR.click styles to your themes.
Considering as an example that your application has light
and dark
themes, you may merge the styles into your theme settings like this:
CSPR.click requires the styled-components
library to work. Add it to your dependencies by running the command:
Next, add the theme provider to your application:
Currently, you can choose between two themes: light
and dark
.
In your main CSS file, import the Inter and Jetbrains mono fonts:
At this point, your application is prepared to display the CSPR.click UI to interact with the user and connect with wallets, switch to other accounts and approve transactions. Build and run your application, and take a look.
From here, your application needs to interact with CSPR.click library to, for example, respond to wallet connection and request transaction approvals. Go through the following sections as required to complete the integration:
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.
Read more about the type in the SDK reference section.
You can use the default csprclick-template
application identifier while you're working locally on your application. But to upload your new project to a server, you'll need to .
Refer to the section in this guide for complete reference on how to work with each of the setting elements in the top bar.
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.