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 csprclick-examples 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);
  });
});

You can read more about events in the Handling events page.

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.

To finish this guide, let's add some of the prebuilt components. You can customize the navigation bar 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.

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

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

PreviousIntegrating the UI SDK into your application NextCustomizing the top bar

Last updated 3 months ago

Integrating the UI SDK into a non-React application