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.2.1/csprclick-client-1.2.1.js"></script>
</head>

In your main layout file, add a <div> container for the CSPR.click navigation top bar. Set an id, you'll need it later during CSPR.click initialization.

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div id="csprclick-top-bar"></div>
    <div id="content">
     <!-- you rapplication goes here -->
    </div>
  </div>
</body>

In the current version, it's important that your application is wrapped within a <div id="root"> element. This tells the modal components where is your main content. In a future version, you'll be able to change the id of this container.

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. We'll see other options later in this document.

// Set up CSPR.click UI (Top Bar)
//
const clickUIOptions = {
  topBarContainer: 'csprclick-top-bar',
};

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 topBarContainer = 'csprclick-top-bar';

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 = {
  topBarContainer,
  defaultTheme,
  onThemeChanged,
  accountMenuItems,
  networkSettings,
};

PreviousIntegrating the UI SDK into your application NextCustomizing the top bar

Last updated 8 months ago

Integrating the UI SDK into a non-React application