feat: use subtitle component

src/pages/ValidatorOnboarding/Deposit/Deposit.tsx

@@ -8,6 +8,7 @@ import Validators from './Validators'
 import ConnectWallet from './ConnectWallet'
 import ConnectedWallet from './ConnectedWallet'
 import DepositHeader from './DepositHeader'
+import DepositSubtitle from './DepositSubtitle'
 
 const Deposit = () => {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
@@ -34,11 +35,15 @@ const Deposit = () => {
   return (
     <YStack space={'$3'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
       <DepositHeader isTransactionConfirmation={isTransactionConfirmation} />
-      <Validators
-        validatorCount={validatorCount}
-        addValidatorHandler={addValidatorHandler}
-        changeValidatorCountHandler={changeValidatorCountHandler}
-      />
+      {isTransactionConfirmation ? (
+        <DepositSubtitle />
+      ) : (
+        <Validators
+          validatorCount={validatorCount}
+          addValidatorHandler={addValidatorHandler}
+          changeValidatorCountHandler={changeValidatorCountHandler}
+        />
+      )}
       <DividerLine />
       {validatorRequests.map((_, index) => (
         <ValidatorRequest key={index} />

src/pages/ValidatorOnboarding/Deposit/Validators.tsx

@@ -1,6 +1,7 @@
 import { Input, Text } from '@status-im/components'
 import { AddIcon, ChevronDownIcon } from '@status-im/icons'
 import { Stack, XStack, YStack } from 'tamagui'
+import DepositSubtitle from './DepositSubtitle'
 
 type ValidatorsProps = {
   validatorCount: number
@@ -16,9 +17,7 @@ const Validators = ({
   return (
     <XStack justifyContent={'space-between'} width={'80%'}>
       <Stack space={'$2'}>
-        <Text size={15} weight="regular" color={'#647084'}>
-          Connect you Wallet to stake required ETH for new validators
-        </Text>
+        <DepositSubtitle />
         <Input
           icon={<AddIcon size={16} style={{ cursor: 'pointer' }} onClick={addValidatorHandler} />}
           style={{ fontWeight: 'bold' }}