# Currency selector

<figure><img src="https://595455488-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuweqIvQXaJrOwx2LPs49%2Fuploads%2Fgit-blob-54294af4a117e8c0d34af591d8a540ca91a62437%2Fcurrency-selector.png?alt=media" alt=""><figcaption><p>Currency selector widget</p></figcaption></figure>

If your application supports multiple currencies, you can add to the CSPR.click navigation bar a currency selector.

## Language selector set up

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

```tsx
export const CURRENCIES: Currency[] = [
    {
        code: 'USD',
        title: 'US Dollar',
        type_id: CurrencyType.FIAT,
    },
    {
        code: 'EUR',
        title: 'Euro',
        type_id: CurrencyType.FIAT,
    },
    //...,
    {
        code: 'BTC',
        title: 'Bitcoin',
        type_id: CurrencyType.CRYPTO,
    },
    {
        code: 'ETH',
        title: 'Ethereum',
        type_id: CurrencyType.CRYPTO,
    },
];
```

Note in the image above how currencies are grouped in cryptocurrencies and fiat currencies. In your list of currencies, classify them using the `type_id` property in one of the groups.

Create a state value to store the current currency. For example, with `useState()` hook, but you can use any other method.

```tsx
	const [currency, setCurrency] = useState(CURRENCIES[0]);
```

Define a `currencySettings` object with the list of currencies, the selected currency, and a callback method to handle currency selection by the user. Add this object to the `topBarSettings` prop in the `<ClickUI>` component:

```typescript
const currencySettings= {
  currencies: CURRENCIES,
  currentCurrency: currency,
  onChangeCurrency: (c: any) => { setCurrency(c); },
}
```

```tsx
<ClickUI
    topBarSettings={{
        currencySettings
    }}
/>
```
