LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click (latest)
CSPR.click (latest)
  • Documentation
    • Introduction
    • Overview
    • Getting started
    • Changelog
  • CSPR.click SDK
    • React
      • Handling events
      • Connecting a wallet
      • Signing transactions
      • Customizing the top bar
        • Account dropdown menu
        • Theme selector
        • Network selector
        • Language selector
        • Currency selector
        • Custom selector
      • Hooks and Components
    • JavaScript
      • Handling events
      • Connecting a wallet
      • Signing transactions
      • Customizing the top bar
        • Account dropdown menu
        • Theme selector
        • Network selector
      • Examples
    • Reference
      • Properties
      • Methods
      • Types
      • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  1. CSPR.click SDK
  2. React
  3. Customizing the top bar

Currency selector

Last updated 1 year ago

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:

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.

	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:

const currencySettings= {
  currencies: CURRENCIES,
  currentCurrency: currency,
  onChangeCurrency: (c: any) => { setCurrency(c); },
}
<ClickUI
    topBarSettings={{
        currencySettings
    }}
/>
Currency selector widget