React

To create a new application with CSPR.click already integrated, we recommend you to use the create-react-app template as described in Getting started.

This page guides you through the steps required to integrate the CSPR.click SDK into your existing React web application.

Install CSPR.click packages

Run the following command in a terminal window to install CSPR.click packages:

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

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:

import { CONTENT_MODE } from '@make-software/csprclick-core-types';

const clickOptions: CsprClickInitOptions = {
    appName: 'Casper dApp',
    appId: 'csprclick-template',
    contentMode: CONTENT_MODE.IFRAME,
    providers: ['casper-wallet', 'ledger', 'metamask-snap', 'casperdash'],
};

Next, wrap your main application component with the <ClickProvider> context provider:

<ClickProvider options={clickOptions}>
  <App />
</ClickProvider>

This component will manage the download and initialization of the CSPR.click runtime library.

Read more about the CsprClickInitOptions 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 get your own application id.

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.

const topBarSettings = {
    accountMenuItems: [<ViewAccountOnExplorerMenuItem key='0' />],
}

const App = () => {
    return (
        <!-- ... -->
        <ClickUI topBarSettings={topBarSettings}/>
        <!-- ... -->
    )
}

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

While we recommend to include the CSPR.click top bar in your application, if you have your own Sign in and session management controls you can opt-out. To do so, do not include the topBarSettings prop to ClickUI and CSPR.click won't render the top bar.

Add CSPR.click styles

Option 1: your application uses styled-components

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:

import { CsprClickThemes } from '@make-software/csprclick-ui';

const YourAppThemes = {
	dark: {
		...CsprClickThemes.dark,
		// your styles for dark theme here
	},
	light: {
		...CsprClickThemes.light,
		// your styles for light theme here
	},
};

Option 2: your application doesn't use styled-components

CSPR.click requires the styled-components library to work. Add it to your dependencies by running the command:

npm install --save [email protected]

Next, add the theme provider to your application:

import { CsprClickThemes } from '@make-software/csprclick-ui';

<ThemeProvider theme={CsprClickThemes.light}>
  <ClickProvider options={clickOptions}>
    <App />
  </ClickProvider>
</ThemeProvider>

Currently, you can choose between two themes: light and dark.

Import required fonts

In your main CSS file, import the Inter and Jetbrains mono fonts:

@import url('https://fonts.cdnfonts.com/css/inter');

@font-face {
    font-family: 'JetBrains Mono';
    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
        format('woff2'),
      url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff')
        format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

What's next

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:

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. Also, look at Processing status updates for information on how to listen for real-time status updates.

Customize the top navigation bar

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.