Network selector

Network selector widget

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 <ClickTopBar> component:

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

<ClickTopBar
   networkSettings={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 }
];