feat: fix stories which needs prop instead of redux

src/pages/ValidatorOnboarding/Deposit/Deposit.tsx

@@ -50,7 +50,11 @@ const Deposit = () => {
       {isTransactionConfirmation && <ConnectedWallet />}
       <DividerLine style={{ marginTop: isTransactionConfirmation ? '0px' : '15px' }} />
       {Array.from({ length: validatorCount }).map((_, index) => (
-        <ValidatorRequest key={index} number={index + 1} />
+        <ValidatorRequest
+          key={index}
+          number={index + 1}
+          isTransactionConfirmation={isTransactionConfirmation}
+        />
       ))}
       {isInfoBoxVisible && !isTransactionConfirmation && (
         <InformationBox

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

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

src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/TransactionStatus.tsx

@@ -1,17 +1,16 @@
 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 = {
   transactionStatus: string
+  isTransactionConfirmation?: boolean
 }
 
-const TransactionStatus = ({ transactionStatus }: VTransactionStatusProps) => {
+const TransactionStatus = ({
-  const { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit)
+  transactionStatus,
-
+  isTransactionConfirmation,
+}: VTransactionStatusProps) => {
   const isTransactionCompleted = transactionStatus === 'Complete'
 
   return (

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

@@ -17,17 +17,20 @@ 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/ValidatorRequest.tsx

@@ -1,18 +1,15 @@
 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 }: ValidatorRequestProps) => {
+const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorRequestProps) => {
-  const { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit)
-
   let transactionStatus = 'Complete'
   const isTransactionCompleted = transactionStatus === 'Complete'
 
@@ -57,7 +54,10 @@ const ValidatorRequest = ({ number }: ValidatorRequestProps) => {
               {isTransactionCompleted ? 32 : 0} ETH
             </Text>
           )}
-          <TransactionStatus transactionStatus={transactionStatus} />
+          <TransactionStatus
+            transactionStatus={transactionStatus}
+            isTransactionConfirmation={isTransactionConfirmation}
+          />
         </XStack>
       </XStack>
       <DividerLine />