feat(deposit-panel): add input amount with state

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

@@ -1,6 +1,6 @@
-import { InformationBox, Text } from '@status-im/components'
-import { PlaceholderIcon } from '@status-im/icons'
-import { YStack } from 'tamagui'
+import { InformationBox, Input, Text } from '@status-im/components'
+import { ClearIcon, PlaceholderIcon } from '@status-im/icons'
+import { Stack, YStack } from 'tamagui'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
@@ -13,6 +13,7 @@ import ValidatorRequest from '../../../../ValidatorOnboarding/Deposit/ValidatorR
 
 const DepositPanel = () => {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
+  const [depositAmount, setDepositAmount] = useState('')
   const { isWalletConnected, isTransactionConfirmation, isChainParity } =
     useSelector((state: RootState) => state.deposit)
 
@@ -20,6 +21,17 @@ const DepositPanel = () => {
     setIsInfoBoxVisible(false)
   }
 
+  const changeDepositAmountHandler = (value: string) => {
+    const numberValue = Number(value)
+    if (isNaN(numberValue) === false) {
+      setDepositAmount(value)
+    }
+  }
+
+  const removeDepositAmountHandler = () => {
+    setDepositAmount('')
+  }
+
   return (
     <PanelWrapper title={'Deposit Funds'}>
       {isChainParity ? (
@@ -31,6 +43,23 @@ const DepositPanel = () => {
             width: '100%',
           }}
         >
+          <Stack space={'$2'}>
+            <Text size={15} weight="regular" color={'#647084'}>
+              Deposit validator
+            </Text>
+            <Input
+              icon={
+                <ClearIcon
+                  size={16}
+                  style={{ cursor: 'pointer' }}
+                  onClick={removeDepositAmountHandler}
+                />
+              }
+              placeholder="Deposit Amount"
+              value={depositAmount}
+              onChangeText={changeDepositAmountHandler}
+            />
+          </Stack>
           <ValidatorRequest
             key={2}
             name={'2'}

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

@@ -4,8 +4,8 @@ import MigratePanel from './Panels/MigratePanel'
 
 const RightManageSettings = () => {
   const isDefault = false
-  const isMigrate = true
-  const isDeposit = false
+  const isMigrate = false
+  const isDeposit = true
 
   return (
     <div style={{ flexGrow: 1 }}>