Network selector

Network selector widget

If your application supports more than one Casper network, you can display a network selector in the CSPR.click top bar. The selector shows the available network labels and calls your application when the user selects a different one.

Network selector setup

Configure the selector with the networkSettings property in window.clickUIOptions. The networks array defines the labels shown in the top bar, currentNetwork defines the initially selected value, and onNetworkSwitch handles user selection.

The following example displays a switch between Mainnet and Testnet:

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: '#app',
  defaultTheme,
  onThemeChanged,
  accountMenuItems,
  networkSettings,
};

Use onNetworkSwitch to update your application state, reload network-specific data, and reconfigure any services that depend on the selected network. Call window.csprclickUI.setNetwork(n) after handling the change so the CSPR.click top bar reflects the selected network.