feat: remove symbol and add better structure and types

src/components/General/CurrencyDropdown.tsx

@@ -2,9 +2,10 @@ import { Button, DropdownMenu } from '@status-im/components'
 import { ChevronDownIcon } from '@status-im/icons'
 
 import { CURRENCIES } from '../../constants'
+import { CurrencyType } from './ValidatorsMenuWithPrice'
 
 type CurrencyDropdownProps = {
-  changeCurrency: (currency: (typeof CURRENCIES)[0]) => void
+  changeCurrency: (currency: CurrencyType) => void
 }
 
 const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => {
@@ -12,11 +13,11 @@ const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => {
     <DropdownMenu>
       <Button variant="ghost" size={24} icon={<ChevronDownIcon size={16} color={'#919191'} />} />
       <DropdownMenu.Content sideOffset={10} position="absolute" zIndex={999}>
-        {CURRENCIES.map(currency => (
+        {Object.keys(CURRENCIES).map(currency => (
           <DropdownMenu.Item
-            key={currency.name}
-            label={currency.name}
-            onSelect={() => changeCurrency(currency)}
+            key={currency}
+            label={currency}
+            onSelect={() => changeCurrency(currency as CurrencyType)}
           />
         ))}
       </DropdownMenu.Content>

src/components/General/ValidatorsMenuWithPrice.tsx

@@ -12,18 +12,22 @@ type ValidatorsMenuWithPriceProps = {
   label: string
 }
 
+export type CurrencyType = keyof typeof CURRENCIES
+
 const ValidatorsMenuWithPrice = ({
   validatorCount,
   changeValidatorCountHandler,
   label,
 }: ValidatorsMenuWithPriceProps) => {
-  const [currency, setCurrency] = useState(CURRENCIES[0])
+  const [currency, setCurrency] = useState(Object.keys(CURRENCIES)[0] as CurrencyType)
 
-  const changeCurrency = (currency: (typeof CURRENCIES)[0]) => {
-    setCurrency(currency)
+  const changeCurrency = (currency: CurrencyType) => {
+    if (CURRENCIES[currency]) {
+      setCurrency(currency)
+    }
   }
 
-  const totalPrice = validatorCount * currency.price
+  const totalPrice = validatorCount * CURRENCIES[currency as keyof typeof CURRENCIES]
 
   return (
     <XStack justifyContent={'space-between'} width={'80%'}>
@@ -55,13 +59,12 @@ const ValidatorsMenuWithPrice = ({
       <YStack space={'$2'}>
         <XStack style={{ justifyContent: 'space-between' }}>
           <Text size={15} weight={'semibold'}>
-            {currency.name}
+            {currency}
           </Text>
           <CurrencyDropdown changeCurrency={changeCurrency} />
         </XStack>
         <Text size={27} weight={'semibold'}>
-          {currency.symbol}
-          {totalPrice.toFixed(2)} {currency.name}
+          {totalPrice.toFixed(2)} {currency}
         </Text>
       </YStack>
     </XStack>

src/constants.ts

@@ -19,17 +19,9 @@ export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'
 export const ETH_PER_VALIDATOR = 32
 
 // for now, this will be constant values
-export const CURRENCIES = [
-  {
-    name: 'USD',
-    symbol: '$',
-    price: 1583.42,
-  },
-  {
-    name: 'EUR',
-    symbol: '€',
-    price: 1323.61,
-  },
-]
+export const CURRENCIES = {
+  USD: 1583.42,
+  EUR: 1323.61,
+}
 export const DEPOSIT_SUBTITLE = 'Connect you Wallet to stake required ETH for new validators'
 export const CLIENT_SETUP_SUBTITLE = 'How many Validators would you like to run?'