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:

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',
        'casper-signer',
    ]
};

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.

Update the properties in the example above according to your needs. Read more about the CsprClickInitOptions type in the Core JS SDK reference.

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

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

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.

const topBarSettings: TopBarSettings = {
    onThemeSwitch: toggleTheme,
    accountMenuItems,
    languageSettings: languageSettings(lang, setLang),
    currencySettings: currencySettings(currency, setCurrency),
    networkSettings: networkSettings(network, setNetwork),
};

<ClickUI
    topBarSettings={topBarSettings}
    themeMode={themeMode}
/>

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 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:

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

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

Since CSPR.click depends on styled-components library, add it to your dependencies by running the command:

npm install --save styled-components

Now, add the theme provider to your application. It must wrap at least the <ClickUI> component you added in the previous step:

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

<ThemeProvider theme={CsprClickThemes['dark']}>
  <ClickUI
    ...
  />
</ThemeProvider>

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.

Refer to the Handling events page for information on how to listen to these events.

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.

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;
  }