fix(deposit): return main component and move info box

src/components/General/Deposit.tsx

@@ -12,7 +12,7 @@ import { RootState } from '../../redux/store'
 import { DEPOSIT_SUBTITLE } from '../../constants'
 import { getDepositTitle } from '../../utilities'
 import styles from './deposit.module.css'
-import ValidatorBalanceInfoBox from '../../pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox'
+import ValidatorBalanceInfoBox from './ValidatorBalanceInfoBox'
 
 const Deposit = () => {
   const [validatorCount, setValidatorCount] = useState(2)

src/components/General/ValidatorBalanceInfoBox.tsx

@@ -3,7 +3,7 @@ import { PlaceholderIcon } from '@status-im/icons'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../redux/store'
 
 const ValidatorBalanceInfoBox = () => {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)

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

@@ -10,7 +10,7 @@ import ChainParity from '../../../../../components/General/ChainParity'
 import ValidatorRequest from '../../../../../components/General/ValidatorRequest/ValidatorRequest'
 import { getDepositTitle } from '../../../../../utilities'
 import DepositValidator from './DepositValidator'
-import ValidatorBalanceInfoBox from '../../../../ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox'
+import ValidatorBalanceInfoBox from '../../../../../components/General/ValidatorBalanceInfoBox'
 
 const DepositPanel = () => {
   const { isWalletConnected, isTransactionConfirmation, isChainParity } =

src/pages/ValidatorOnboarding/Deposit/Deposit.tsx

@@ -0,0 +1,76 @@
+import { DividerLine, Text } from '@status-im/components'
+import { YStack } from 'tamagui'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import ValidatorRequest from './ValidatorRequest/ValidatorRequest'
+import ConnectWallet from './ConnectWallet'
+import ConnectedWallet from './ConnectedWallet'
+import ChainParity from './ChainParity'
+import ValidatorsMenuWithPrice from './ValidatorsMenuWithPrice'
+import { RootState } from '../../redux/store'
+import { DEPOSIT_SUBTITLE } from '../../constants'
+import { getDepositTitle } from '../../utilities'
+import styles from './deposit.module.css'
+import ValidatorBalanceInfoBox from '../../pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox'
+
+const Deposit = () => {
+  const [validatorCount, setValidatorCount] = useState(2)
+  const { isWalletConnected, isTransactionConfirmation, isChainParity } =
+    useSelector((state: RootState) => state.deposit)
+
+  const changeValidatorCountHandler = (value: string) => {
+    const numberValue = Number(value)
+    if (!isNaN(numberValue)) {
+      setValidatorCount(numberValue)
+    }
+  }
+
+  return (
+    <YStack space={'$3'} className={styles['deposit-container']}>
+      <Text size={19} weight={'semibold'}>
+        {getDepositTitle({ isChainParity, isTransactionConfirmation })}
+      </Text>
+      {isChainParity ? (
+        <ChainParity />
+      ) : (
+        <YStack space={'$3'} style={{ width: '100%' }}>
+          {isTransactionConfirmation ? (
+            <Text size={15} weight="regular" color={'#647084'}>
+              {DEPOSIT_SUBTITLE}
+            </Text>
+          ) : (
+            <ValidatorsMenuWithPrice
+              validatorCount={validatorCount}
+              changeValidatorCountHandler={changeValidatorCountHandler}
+              label={DEPOSIT_SUBTITLE}
+            />
+          )}
+          {isTransactionConfirmation && <ConnectedWallet />}
+          <DividerLine
+            style={{ marginTop: isTransactionConfirmation ? '0px' : '15px' }}
+          />
+          {Array.from({ length: validatorCount }).map((_, index) => (
+            <ValidatorRequest
+              key={index}
+              name={(index + 1).toString()}
+              isTransactionConfirmation={isTransactionConfirmation}
+              isWithDivider={true}
+            />
+          ))}
+          <ValidatorBalanceInfoBox />
+          {!isTransactionConfirmation && (
+            <YStack space={'$3'} style={{ width: '100%' }}>
+              <Text size={19} weight={'semibold'}>
+                Connect Wallet
+              </Text>
+              {isWalletConnected ? <ConnectedWallet /> : <ConnectWallet />}
+            </YStack>
+          )}
+        </YStack>
+      )}
+    </YStack>
+  )
+}
+
+export default Deposit