feat: use isTransactionConfirmation from redux

src/pages/ValidatorOnboarding/Deposit/Deposit.tsx

@@ -15,8 +15,9 @@ import { DEPOSIT_SUBTITLE } from '../../../constants'
 const Deposit = () => {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
   const [validatorCount, setValidatorCount] = useState(2)
-  const { isWalletConnected } = useSelector((state: RootState) => state.deposit)
+  const { isWalletConnected, isTransactionConfirmation } = useSelector(
-  let isTransactionConfirmation = true
+    (state: RootState) => state.deposit,
+  )
 
   const changeValidatorCountHandler = (value: string) => {
     const numberValue = Number(value)
@@ -34,7 +35,7 @@ const Deposit = () => {
       space={'$3'}
       style={{ width: '100%', padding: '16px 32px', alignItems: 'start', paddingBottom: '30px' }}
     >
-      <DepositTitle isTransactionConfirmation={isTransactionConfirmation} />
+      <DepositTitle />
       {isTransactionConfirmation ? (
         <Text size={15} weight="regular" color={'#647084'}>
           {DEPOSIT_SUBTITLE}
@@ -49,11 +50,7 @@ const Deposit = () => {
       {isTransactionConfirmation && <ConnectedWallet />}
       <DividerLine style={{ marginTop: isTransactionConfirmation ? '0px' : '15px' }} />
       {Array.from({ length: validatorCount }).map((_, index) => (
-        <ValidatorRequest
+        <ValidatorRequest key={index} number={index + 1} />
-          key={index}
-          number={index + 1}
-          isTransactionConfirmation={isTransactionConfirmation}
-        />
       ))}
       {isInfoBoxVisible && !isTransactionConfirmation && (
         <InformationBox

src/pages/ValidatorOnboarding/Deposit/DepositTitle.stories.ts

@@ -15,13 +15,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
+  args: {},
-    isTransactionConfirmation: false,
-  },
-}
-
-export const TransactionConfirmation: Story = {
-  args: {
-    isTransactionConfirmation: true,
-  },
 }

src/pages/ValidatorOnboarding/Deposit/DepositTitle.tsx

@@ -1,10 +1,11 @@
 import { Text } from '@status-im/components'
+import { useSelector } from 'react-redux'
 
-type DepositTitleProps = {
+import { RootState } from '../../../redux/store'
-  isTransactionConfirmation: boolean
+
-}
+const DepositTitle = () => {
+  const { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit)
 
-const DepositTitle = ({ isTransactionConfirmation }: DepositTitleProps) => {
   return (
     <Text size={19} weight={'semibold'}>
       {isTransactionConfirmation ? 'Transaction Confirmation' : 'Deposit Funds'}

src/pages/ValidatorOnboarding/Deposit/TransactionStatus.stories.ts

@@ -16,28 +16,24 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    isTransactionConfirmation: false,
     transactionStatus: '',
   },
 }
 
 export const Complete: Story = {
   args: {
-    isTransactionConfirmation: true,
     transactionStatus: 'Complete',
   },
 }
 
 export const Pending: Story = {
   args: {
-    isTransactionConfirmation: true,
     transactionStatus: 'Pending',
   },
 }
 
 export const Fail: Story = {
   args: {
-    isTransactionConfirmation: true,
     transactionStatus: 'Fail',
   },
 }

src/pages/ValidatorOnboarding/Deposit/TransactionStatus.tsx

@@ -1,16 +1,17 @@
 import { Text } from '@status-im/components'
 import { FullscreenMacOsIcon, MinimizeMacOsIcon, CloseMacOsIcon } from '@status-im/icons'
 import { XStack } from 'tamagui'
+import { useSelector } from 'react-redux'
+
+import { RootState } from '../../../redux/store'
 
 type VTransactionStatusProps = {
-  isTransactionConfirmation: boolean
   transactionStatus: string
 }
 
-const TransactionStatus = ({
+const TransactionStatus = ({ transactionStatus }: VTransactionStatusProps) => {
-  isTransactionConfirmation,
+  const { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit)
-  transactionStatus,
+
-}: VTransactionStatusProps) => {
   const isTransactionCompleted = transactionStatus === 'Complete'
 
   return (

src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.stories.ts

@@ -17,20 +17,17 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     number: 1,
-    isTransactionConfirmation: false,
   },
 }
 
 export const TransactionConfirmation: Story = {
   args: {
     number: 1,
-    isTransactionConfirmation: true,
   },
 }
 
 export const BigNumber: Story = {
   args: {
     number: 123456789,
-    isTransactionConfirmation: false,
   },
 }

src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx

@@ -1,15 +1,18 @@
 import { Avatar, DividerLine, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
+import { useSelector } from 'react-redux'
 
 import { getFormattedValidatorAddress } from '../../../utilities'
 import TransactionStatus from './TransactionStatus'
+import { RootState } from '../../../redux/store'
 
 type ValidatorRequestProps = {
   number: number
-  isTransactionConfirmation: boolean
 }
 
-const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorRequestProps) => {
+const ValidatorRequest = ({ number }: ValidatorRequestProps) => {
+  const { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit)
+
   let transactionStatus = 'Complete'
   const isTransactionCompleted = transactionStatus === 'Complete'
 
@@ -54,10 +57,7 @@ const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorReques
               {isTransactionCompleted ? 32 : 0} ETH
             </Text>
           )}
-          <TransactionStatus
+          <TransactionStatus transactionStatus={transactionStatus} />
-            isTransactionConfirmation={isTransactionConfirmation}
-            transactionStatus={transactionStatus}
-          />
         </XStack>
       </XStack>
       <DividerLine />