feat(currency-dropdown): Use formatted labels for currencies

src/components/General/CurrencyDropdown.tsx

@@ -4,9 +4,9 @@ import { useDispatch, useSelector } from 'react-redux'
 import { XStack, YStack } from 'tamagui'
 
 import { RootState } from '../../redux/store'
-import { formatNumbersWithComa } from '../../utilities'
+import { formatNumbersWithComa, getCurrencyLabel } from '../../utilities'
 import ChevronIcon from './ChevronIcon'
-import { COIN_GECKO_API_KEY, LOADING } from '../../constants'
+import { COIN_GECKO_API_KEY, LOADING, currencySymbols } from '../../constants'
 
 type CurrencyDropdownProps = {
   depositAmount: number
@@ -86,7 +86,7 @@ const CurrencyDropdown = ({ depositAmount }: CurrencyDropdownProps) => {
     <YStack space={'$2'}>
       <XStack style={{ justifyContent: 'space-between' }}>
         <Text size={15} weight={'semibold'}>
-          {isCurrencyLoading ? '' : currency}
+          {isCurrencyLoading ? '' : getCurrencyLabel(currency)}
         </Text>
         <DropdownMenu onOpenChange={changeIsOpenHandler}>
           <Button
@@ -108,7 +108,7 @@ const CurrencyDropdown = ({ depositAmount }: CurrencyDropdownProps) => {
               supportedCurrencies.map(currency => (
                 <DropdownMenu.Item
                   key={currency}
-                  label={currency}
+                  label={getCurrencyLabel(currency)}
                   onSelect={() => changeCurrencyHandler(currency)}
                 />
               ))
@@ -119,7 +119,7 @@ const CurrencyDropdown = ({ depositAmount }: CurrencyDropdownProps) => {
       <Text size={27} weight={'semibold'}>
         {isCurrencyLoading
           ? LOADING
-          : `${formatNumbersWithComa(totalPrice)} ${currency}`}
+          : `${formatNumbersWithComa(totalPrice)} ${getCurrencyLabel(currency)} ${currencySymbols[currency]}`}
       </Text>
       {/* Attribution required for Demo (Beta)*/}
       <Text size={11}>Data provided by CoinGecko</Text>

src/constants.ts

@@ -622,3 +622,68 @@ export const LogsTypes = {
   ERR: 'ERROR',
   FAT: 'FATAL',
 }
+
+export const currencySymbols: Record<string, string> = {
+  btc: '₿',
+  eth: 'Ξ',
+  ltc: 'Ł',
+  bch: '₿',
+  bnb: '₿',
+  eos: 'Ξ',
+  xrp: 'Ξ',
+  xlm: 'Ξ',
+  link: '₿',
+  dot: '₿',
+  yfi: 'Ξ',
+  usd: '$',
+  aed: 'د.إ',
+  ars: '$',
+  aud: '$',
+  bdt: '৳',
+  bhd: 'ب.د',
+  bmd: '$',
+  brl: 'R$',
+  cad: '$',
+  chf: '₣',
+  clp: '$',
+  cny: '¥',
+  czk: 'Kč',
+  dkk: 'kr',
+  eur: '€',
+  gbp: '£',
+  gel: '₾',
+  hkd: '$',
+  huf: 'Ft',
+  idr: 'Rp',
+  ils: '₪',
+  inr: '₹',
+  jpy: '¥',
+  krw: '₩',
+  kwd: 'د.ك',
+  lkr: 'රු',
+  mmk: 'K',
+  mxn: '$',
+  myr: 'RM',
+  ngn: '₦',
+  nok: 'kr',
+  nzd: '$',
+  php: '₱',
+  pkr: '₨',
+  pln: 'zł',
+  rub: '₽',
+  sar: 'ر.س',
+  sek: 'kr',
+  sgd: '$',
+  thb: '฿',
+  try: '₺',
+  twd: '$',
+  uah: '₴',
+  vef: 'Bs.',
+  vnd: '₫',
+  zar: 'R',
+  xdr: 'SDR',
+  xag: 'XAG',
+  xau: 'XAU',
+  bits: 'ƀ',
+  sats: '',
+}

src/utilities.ts

@@ -105,6 +105,10 @@ export const getDepositTitle = ({
   }
 }
 
+export const getCurrencyLabel = (currency: string) => {
+  return currency.toUpperCase()
+}
+
 /**
  * Asserts that a value is not null or undefined.
  *