Currency selector

Currency selector widget

If your application supports multiple currencies, you can add to the CSPR.click toolbar a currency selector widget adding a CurrencySettings object to the <ClickTopBar> component:

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

<ClickTopBar
   currencySettings={currencySettings}
/>

The settings object must have a currencies property with an array containing the currencies your application can handle. Set them in the order you want to appear in the selector:

const CURRENCIES = [
    {
        code: "USD",
        title: "US Dollar",
        type_id: CurrencyType.FIAT,
        icon: '',
    },
    {
        code: "EUR",
        title: "Euro",
        type_id: CurrencyType.FIAT,
        icon: '',
    },
    {
        code: "BTC", 
        title: "Bitcoin",
        type_id: CurrencyType.CRYPTO,
        icon: '',
    }
];

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.