feat(currency): reuse new slice and remove old states

src/components/General/CurrencyDropdown.stories.tsx

@@ -15,7 +15,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    changeCurrency: () => {},
-  },
+  args: {},
 }

src/components/General/CurrencyDropdown.tsx

@@ -1,21 +1,22 @@
 import { useState } from 'react'
 import { Button, DropdownMenu } from '@status-im/components'
+import { useDispatch } from 'react-redux'
 
 import { CURRENCIES } from '../../constants'
-import { CurrencyType } from './ValidatorsMenuWithPrice'
 import ChevronIcon from './ChevronIcon'
 
-type CurrencyDropdownProps = {
-  changeCurrency: (currency: CurrencyType) => void
-}
-
-const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => {
+const CurrencyDropdown = () => {
   const [isOpen, setIsOpen] = useState(false)
+  const dispatch = useDispatch()
 
   const changeIsOpenHandler = (isOpen: boolean) => {
     setIsOpen(isOpen)
   }
 
+  const changeCurrencyHandler = (currency: string) => {
+    dispatch({ type: 'currency/setCurrency', payload: currency })
+  }
+
   return (
     <DropdownMenu onOpenChange={changeIsOpenHandler}>
       <Button
@@ -28,7 +29,7 @@ const CurrencyDropdown = ({ changeCurrency }: CurrencyDropdownProps) => {
           <DropdownMenu.Item
             key={currency}
             label={currency}
-            onSelect={() => changeCurrency(currency as CurrencyType)}
+            onSelect={() => changeCurrencyHandler(currency)}
           />
         ))}
       </DropdownMenu.Content>

src/components/General/ValidatorsMenuWithPrice.tsx

@@ -1,11 +1,12 @@
-import { useState } from 'react'
 import { Input, Text } from '@status-im/components'
 import { AddIcon } from '@status-im/icons'
 import { Stack, XStack, YStack, useMedia } from 'tamagui'
+import { useSelector } from 'react-redux'
 
 import { CURRENCIES, ETH_PER_VALIDATOR } from '../../constants'
 import CurrencyDropdown from './CurrencyDropdown'
 import ResponsiveStack from './ResponsiveStack'
+import { RootState } from '../../redux/store'
 
 type ValidatorsMenuWithPriceProps = {
   validatorCount: number
@@ -13,24 +14,14 @@ type ValidatorsMenuWithPriceProps = {
   label: string
 }
 
-export type CurrencyType = keyof typeof CURRENCIES
-
 const ValidatorsMenuWithPrice = ({
   validatorCount,
   changeValidatorCountHandler,
   label,
 }: ValidatorsMenuWithPriceProps) => {
-  const [currency, setCurrency] = useState(
-    Object.keys(CURRENCIES)[0] as CurrencyType,
-  )
+  const currency = useSelector((state: RootState) => state.currency)
   const media = useMedia()
 
-  const changeCurrency = (currency: CurrencyType) => {
-    if (CURRENCIES[currency]) {
-      setCurrency(currency)
-    }
-  }
-
   const totalETH = validatorCount * ETH_PER_VALIDATOR
   const totalPrice = totalETH * CURRENCIES[currency as keyof typeof CURRENCIES]
 
@@ -78,7 +69,7 @@ const ValidatorsMenuWithPrice = ({
             <Text size={15} weight={'semibold'}>
               {currency}
             </Text>
-            <CurrencyDropdown changeCurrency={changeCurrency} />
+            <CurrencyDropdown />
           </XStack>
           <Text size={27} weight={'semibold'}>
             {totalPrice.toFixed(2)} {currency}

src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositValidator.tsx

@@ -2,25 +2,17 @@ import { Input, Text } from '@status-im/components'
 import { ClearIcon } from '@status-im/icons'
 import { XStack, YStack } from 'tamagui'
 import { useState } from 'react'
+import { useSelector } from 'react-redux'
 
 import CurrencyDropdown from '../../../../../components/General/CurrencyDropdown'
-import { CurrencyType } from '../../../../../components/General/ValidatorsMenuWithPrice'
-import { CURRENCIES } from '../../../../../constants'
 import { formatNumbersWithComa } from '../../../../../utilities'
+import { RootState } from '../../../../../redux/store'
 
 const DepositValidator = () => {
   const [depositAmount, setDepositAmount] = useState('')
-  const [currency, setCurrency] = useState(
-    Object.keys(CURRENCIES)[0] as CurrencyType,
-  )
+  const currency = useSelector((state: RootState) => state.currency)
   const totalPrice = 1594
 
-  const changeCurrency = (currency: CurrencyType) => {
-    if (CURRENCIES[currency]) {
-      setCurrency(currency)
-    }
-  }
-
   const changeDepositAmountHandler = (value: string) => {
     const numberValue = Number(value)
     if (isNaN(numberValue) === false) {
@@ -61,7 +53,7 @@ const DepositValidator = () => {
           <Text size={15} weight={'semibold'}>
             {currency}
           </Text>
-          <CurrencyDropdown changeCurrency={changeCurrency} />
+          <CurrencyDropdown />
         </XStack>
         <Text size={27} weight={'semibold'}>
           {formatNumbersWithComa(totalPrice)} {currency}