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
  1. UI SDK
  2. Customizing the top bar

Network selector

PreviousTheme selectorNextLanguage selector

Last updated 11 months ago

If your application can switch between Mainnet and Testnet networks you may want to add the network selector widget to the CSPR.click toolbar. For that, add a NetworkSettings object to the <ClickUI> component:

const networkSettings = {
  networks: NETWORKS,
  currentNetwork: network,
  onNetworkSwitch: (n: string) => { setNetwork(n); },
}
<ClickUI 
    topBarSettings={{
        networkSettings
    }}
/>

The settings object must have a networks property with an array containing the networks your application can interact with, typically Mainnet and Testnet. Set them in the order you want to appear in the selector:

const NETWORKS = ['Mainnet', 'Testnet'];

You must also indicate the current network, as it will be highlighted in the menu, and a callback function to handle a request from the user to change to another network.

Customize the network icons

You can also specify your custom icons for each of the networks:

import mainnetIcon from './assets/ico-mainnet.svg'
import testnetIcon from './assets/ico-testnet.svg'

const NETWORKS = [
  { title: 'Mainnet', icon: mainnetIcon },
  { title: 'Testnet', icon: testnetIcon }
];
Network selector widget