Downloading and initializing the SDK

This page explains how to download the CSPR.click runtime library and provide the initialization options it needs to start. These steps are the same for any browser application, whether it is built with React, another framework, or plain JavaScript.

React applications can use the React Context Provider to wrap this setup in a provider component. Use the lower-level setup below when you want to control the runtime loading yourself.

Add a container for CSPR.click UI

Add a container element where CSPR.click can render the top bar and modal windows. The id must match the uiContainer value used during initialization.

<body>
  <div id="csprclick-ui-wrapper"> <!-- CSPR.click UI container -->
    <div id="csprclick-ui"></div>
  </div>
  <div id="root">
    <!-- your application goes here -->
  </div>

The rootAppElement option should point to the root element of your application. CSPR.click uses it when displaying modal windows and pop-ups.

A csprclick-ui-wrapper div is normally used with fixed-with layouts to center the top bar and display an homogeneous background color.

Define the initialization options

Define the UI and SDK options before downloading the runtime script. The CDN library reads window.clickUIOptions and window.clickSDKOptions when it starts.

import type { ClickUIOptions } from '@make-software/csprclick-core-types/clickui';
import type { CsprClickInitOptions } from '@make-software/csprclick-core-types';
import { CONTENT_MODE, WALLET_KEYS } from '@make-software/csprclick-core-types';

declare global {
  interface Window {
    clickUIOptions: ClickUIOptions;
    clickSDKOptions: CsprClickInitOptions;
  }
}

const clickUIOptions: ClickUIOptions = {
  uiContainer: 'csprclick-ui',
  rootAppElement: '#root',
  defaultTheme: 'light',
  accountMenuItems: [
    'AccountCardMenuItem',
    'CopyHashMenuItem',
    'BuyCSPRMenuItem',
  ],
};

window.clickUIOptions = clickUIOptions;

const clickSDKOptions: CsprClickInitOptions = {
  appName: 'CSPR.click demo',
  appId: 'csprclick-template',
  contentMode: CONTENT_MODE.IFRAME,
  providers: [
    WALLET_KEYS.CASPER_WALLET,
    WALLET_KEYS.LEDGER,
    WALLET_KEYS.METAMASK_SNAP,
  ],
};

window.clickSDKOptions = clickSDKOptions;

You can use the default csprclick-template application identifier while working locally. Before publishing your application, create and configure your own application id.

Read more about the available options in the Types and Properties reference pages.

Download the runtime library

After the initialization options are available on window, add the CSPR.click CDN script to the page.

if (!document.querySelector('script#csprclick-client')) {
  const script = document.createElement('script');
  script.src = 'https://cdn.cspr.click/ui/v2.1.0/csprclick-client-2.1.0.js';
  script.id = 'csprclick-client';
  script.async = true;
  document.head.appendChild(script);
}

CSPR.click emits the csprclick:loaded browser event after the runtime has loaded and initialized. Use that event when your application needs to run code only after the SDK is ready.

window.addEventListener('csprclick:loaded', () => {
  console.log('CSPR.click SDK loaded');
});

What's next

Once the SDK is loaded, your application can listen to CSPR.click events, connect wallets, request transaction approvals, and customize the top bar.

PreviousIntegration NextReact Context Provider

Last updated 22 days ago