# Network selector

<figure><img src="https://2616377044-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FowSwP8pl5nkqK9D2vHOZ%2Fuploads%2Fgit-blob-3a32e786fabf9896fe51797242c9fd424af02159%2Fnetwork-selector.png?alt=media" alt=""><figcaption><p>Network selector widget</p></figcaption></figure>

If your application can switch between Mainnet and Testnet networks you may want to add the network selector widget to the CSPR.click navigation bar.

## Network selector set up

Define an array with the list of networks your application supports:

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

const networkSettings = {
    networks: NETWORKS,
    currentNetwork: NETWORKS[0],
    onNetworkSwitch: (n) => {
        console.log('Network selected', n);
        window.csprclickUI.setNetwork(n);
    },
}
```

Then, add this settings object to the UI initialization defined before:

```javascript
const clickUIOptions = {
  uiContainer: 'csprclick-ui', 
  rootAppElement: '#app',
  showTopBar: true,
  networkSettings,
};
```

### Customize the network icons

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

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

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