LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click v1.3
CSPR.click v1.3
  • Introduction
    • CSPR.click overview
    • Get your application Id
    • Changelog
  • UI SDK
    • Getting started with the template application
    • Integrating the UI SDK into your application
    • Integrating the UI SDK into a non-React application
    • Customizing the top bar
      • Account dropdown menu
      • Theme selector
      • Network selector
      • Language selector
      • Currency selector
      • Custom selector
    • useClickRef() hook
    • Handling events
    • Signing transactions
  • Core JS SDK
    • Getting started
    • Properties
    • Methods
    • Types
    • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  • Integrating the UI SDK into a non-React application
  • Get CSPR.click UI scripts from the CDN:
  • Add a container for the CSPR.click UI
  • Configure the initialization of the CSPR.click SDK
  • Try it!
  • Add options to the navigation bar
  • Hide the navigation bar
  1. UI SDK

Integrating the UI SDK into a non-React application

PreviousIntegrating the UI SDK into your applicationNextCustomizing the top bar

Last updated 11 months ago

Integrating the UI SDK into a non-React application

This page guides you through the steps required to integrate the UI SDK into an application without the React library.

Check also the HTML/Javascript demo in the repository to see the resulting application. In that repo you can find also examples or few other libraries/frameworks.

Get CSPR.click UI scripts from the CDN:

Before the closing head tag, add a script element to download the CSPR.click scripts:

  <!-- update to latest releaed version -->
  <script defer="defer" src="https://cdn.cspr.click/ui/v1.3.0/csprclick-client-1.3.0.js"></script>
</head>

Add a container for the CSPR.click UI

In your main layout file, add a <div> container where CSPR.click will inject some UI components like the navigation top bar or the 1-click sign in modal. Set an id, you'll need it later during CSPR.click initialization.

<body>
  <div id="app">
    <div id="csprclick-ui"></div>
    <div id="content">
     <!-- you rapplication goes here -->
    </div>
  </div>
</body>

Also, depending on the layout of your application and the grid system you're using, you'll need to add some CSS styles to the container to match the styles of the rest of the app.

Configure the initialization of the CSPR.click SDK

In a javascript file, add the initialization options for the CSPR.click SDK. Make sure this script loads before CSPR.click is downloaded.

The minimal configuration for the UI just defines the container for the navigation tob bar and the root container of your app. We'll see other options later in this document.

// Set up CSPR.click UI (Top Bar)
//
const clickUIOptions = {
  uiContainer: 'csprclick-ui', 
  rootAppElement: '#app',
  showTopBar: true,  
};

Next, define Client SDK options:

const clickSDKOptions = {
  appName: 'CSPR.click demo',
  appId: 'csprclick-template',
  providers: ['casper-wallet', 'casper-signer'],
};

You can read more about the [CsprClickInitOptions ](../core-js-sdk/types.md#csprclickinitoptions) object in the Core JS SDK reference.

Finally, in most of the cases your application will need to respond to respond to some events updating the state, initiating a user session, etc. For that purpose, add a listener for the csprclick:loaded message and register your callback functions for the different events triggered by the CSPR.click library:

window.addEventListener('csprclick:loaded', () => {
  window.csprclick.on('csprclick:signed_in', async (evt) => {
    console.log("csprclick:signed_in", evt);
  });
  window.csprclick.on('csprclick:switched_account', async (evt) => {
    console.log("csprclick:switched_account", evt);
  });
  window.csprclick.on('csprclick:signed_out', async (evt) => {
    console.log("csprclick:signed_out", evt);
  });
  window.csprclick.on('csprclick:disconnected', async (evt) => {
    console.log("csprclick:disconnected", evt);
  });
});

Try it!

At this point, your application should show the CSPR.click top navigation bar and you can click on Sign in button to process with the connection of your favorite wallet.

Note in the console that the application is receiving the events when you connect, disconnect, etc.

Add options to the navigation bar

// Set up CSPR.click UI (Top Bar)
//
const uiContainer = 'csprclick-ui';
const rootAppElement = '#app';
const defaultTheme = 'light';

const onThemeChanged =  (theme) => {
  const page = document.querySelector('body');
  if (theme === 'dark') page?.classList.add('dark');
  else page?.classList.remove('dark');
  console.log('Theme switched to', theme);
};

const csprClickDocsMenuItem = {
  label: 'CSPR.click docs',
  icon: './csprclick-icon.svg',
  badge: { title: 'New', variation: 'green' },
  onClick: () => { window.open('https://docs.cspr.click', '_blank'); },
};

const accountMenuItems = [
  'ViewAccountOnExplorerMenuItem',
  'CopyHashMenuItem',
  csprClickDocsMenuItem,
  'BuyCSPRMenuItem',
];

const NETWORKS = ['Mainnet', 'Testnet'];
const networkSettings = {
  networks: NETWORKS,
  currentNetwork: NETWORKS[0],
  onNetworkSwitch: (n) => {
    console.log('Network selected', n);
    window.csprclickUI.setNetwork(n);
  },
}

const clickUIOptions = {
  uiContainer,
  rootAppElement,
  defaultTheme,
  onThemeChanged,
  accountMenuItems,
  networkSettings,
};

Hide the navigation bar

if your application already has its own Sign in and session management controls you can opt-out and hide CSPR.click navigation bar. To do so, do not include any of the settings selector and set showTopBar to false:

const clickUIOptions = {
  uiContainer: 'csprclick-ui',
  rootAppElement: '#app',
  defaultTheme: 'light',
  showTopBar: false,
};

You can read more about events in the page.

To finish this guide, let's add some of the prebuilt components. You can to fit the needs of your application. In the code example below we're adding a theme selector and a network selector as well as a couple of menu items to the account dropdown menu.

csprclick-examples
Handling events
customize the navigation bar