LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click (latest)
CSPR.click (latest)
  • Documentation
    • Introduction
    • Overview
    • Getting started
    • Changelog
  • CSPR.click SDK
    • React
      • Handling events
      • Connecting a wallet
      • Signing transactions
      • Customizing the top bar
        • Account dropdown menu
        • Theme selector
        • Network selector
        • Language selector
        • Currency selector
        • Custom selector
      • Hooks and Components
    • JavaScript
      • Handling events
      • Connecting a wallet
      • Signing transactions
      • Customizing the top bar
        • Account dropdown menu
        • Theme selector
        • Network selector
      • Examples
    • Reference
      • Properties
      • Methods
      • Types
      • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  • Install CSPR.click packages
  • ClickProvider context provider
  • Add <ClickUI> component to your app
  • Add CSPR.click styles
  • Option 1: your application uses styled-components
  • Option 2: your application doesn't use styled-components
  • Import required fonts
  • What's next
  1. CSPR.click SDK

React

Last updated 1 year ago

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

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.

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}/>
        <!-- ... -->
    )
}

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 styled-components@5.3.9

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.

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 .

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.

Customize the top navigation bar

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.

Getting started
get your own application id
Customizing the top bar
Handling events
Connecting a wallet
Signing transactions
Customizing the top bar
CsprClickInitOptions