feat(deposit-validator): separate from panel main component

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

@@ -1,6 +1,6 @@
-import { DividerLine, InformationBox, Input, Text } from '@status-im/components'
+import { DividerLine, InformationBox, Text } from '@status-im/components'
-import { ClearIcon, PlaceholderIcon } from '@status-im/icons'
+import { PlaceholderIcon } from '@status-im/icons'
-import { XStack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
@@ -10,45 +10,18 @@ import ConnectedWallet from '../../../../../components/General/ConnectedWallet'
 import ConnectWallet from '../../../../../components/General/ConnectWallet'
 import ChainParity from '../../../../ValidatorOnboarding/Deposit/ChainParity'
 import ValidatorRequest from '../../../../ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest'
-import CurrencyDropdown from '../../../../../components/General/CurrencyDropdown'
+import { getDepositTitle } from '../../../../../utilities'
-import { CurrencyType } from '../../../../../components/General/ValidatorsMenuWithPrice'
+import DepositValidator from './DepositValidator'
-import { CURRENCIES } from '../../../../../constants'
-import {
-  formatNumbersWithComa,
-  getDepositTitle,
-} from '../../../../../utilities'
 
 const DepositPanel = () => {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
-  const [depositAmount, setDepositAmount] = useState('')
-  const [currency, setCurrency] = useState(
-    Object.keys(CURRENCIES)[0] as CurrencyType,
-  )
   const { isWalletConnected, isTransactionConfirmation, isChainParity } =
     useSelector((state: RootState) => state.deposit)
-  const totalPrice = 1594
 
   const onCloseInfoBox = () => {
     setIsInfoBoxVisible(false)
   }
 
-  const changeCurrency = (currency: CurrencyType) => {
-    if (CURRENCIES[currency]) {
-      setCurrency(currency)
-    }
-  }
-
-  const changeDepositAmountHandler = (value: string) => {
-    const numberValue = Number(value)
-    if (isNaN(numberValue) === false) {
-      setDepositAmount(value)
-    }
-  }
-
-  const removeDepositAmountHandler = () => {
-    setDepositAmount('')
-  }
-
   return (
     <PanelWrapper
       title={getDepositTitle({ isChainParity, isTransactionConfirmation })}
@@ -62,41 +35,7 @@ const DepositPanel = () => {
             width: '100%',
           }}
         >
-          <XStack
+          <DepositValidator />
-            space={'$3'}
-            style={{
-              width: '100%',
-            }}
-          >
-            <YStack space={'$2'}>
-              <Text size={15} weight="regular" color={'#647084'}>
-                Deposit validator
-              </Text>
-              <Input
-                icon={
-                  <ClearIcon
-                    size={20}
-                    style={{ cursor: 'pointer' }}
-                    onClick={removeDepositAmountHandler}
-                  />
-                }
-                placeholder="Deposit Amount"
-                value={depositAmount}
-                onChangeText={changeDepositAmountHandler}
-              />
-            </YStack>
-            <YStack space={'$2'}>
-              <XStack style={{ justifyContent: 'space-between' }}>
-                <Text size={15} weight={'semibold'}>
-                  {currency}
-                </Text>
-                <CurrencyDropdown changeCurrency={changeCurrency} />
-              </XStack>
-              <Text size={27} weight={'semibold'}>
-                {formatNumbersWithComa(totalPrice)} {currency}
-              </Text>
-            </YStack>
-          </XStack>
           <DividerLine />
           <ValidatorRequest
             key={2}

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

@@ -0,0 +1,74 @@
+import { Input, Text } from '@status-im/components'
+import { ClearIcon } from '@status-im/icons'
+import { XStack, YStack } from 'tamagui'
+import { useState } from 'react'
+
+import CurrencyDropdown from '../../../../../components/General/CurrencyDropdown'
+import { CurrencyType } from '../../../../../components/General/ValidatorsMenuWithPrice'
+import { CURRENCIES } from '../../../../../constants'
+import { formatNumbersWithComa } from '../../../../../utilities'
+
+const DepositValidator = () => {
+  const [depositAmount, setDepositAmount] = useState('')
+  const [currency, setCurrency] = useState(
+    Object.keys(CURRENCIES)[0] as CurrencyType,
+  )
+  const totalPrice = 1594
+
+  const changeCurrency = (currency: CurrencyType) => {
+    if (CURRENCIES[currency]) {
+      setCurrency(currency)
+    }
+  }
+
+  const changeDepositAmountHandler = (value: string) => {
+    const numberValue = Number(value)
+    if (isNaN(numberValue) === false) {
+      setDepositAmount(value)
+    }
+  }
+
+  const removeDepositAmountHandler = () => {
+    setDepositAmount('')
+  }
+
+  return (
+    <XStack
+      space={'$3'}
+      style={{
+        width: '100%',
+      }}
+    >
+      <YStack space={'$2'}>
+        <Text size={15} weight="regular" color={'#647084'}>
+          Deposit validator
+        </Text>
+        <Input
+          icon={
+            <ClearIcon
+              size={20}
+              style={{ cursor: 'pointer' }}
+              onClick={removeDepositAmountHandler}
+            />
+          }
+          placeholder="Deposit Amount"
+          value={depositAmount}
+          onChangeText={changeDepositAmountHandler}
+        />
+      </YStack>
+      <YStack space={'$2'}>
+        <XStack style={{ justifyContent: 'space-between' }}>
+          <Text size={15} weight={'semibold'}>
+            {currency}
+          </Text>
+          <CurrencyDropdown changeCurrency={changeCurrency} />
+        </XStack>
+        <Text size={27} weight={'semibold'}>
+          {formatNumbersWithComa(totalPrice)} {currency}
+        </Text>
+      </YStack>
+    </XStack>
+  )
+}
+
+export default DepositValidator