diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx index eb692c26..cb0cba0b 100644 --- a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx +++ b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx @@ -50,7 +50,11 @@ const Deposit = () => { {isTransactionConfirmation && } {Array.from({ length: validatorCount }).map((_, index) => ( - + ))} {isInfoBoxVisible && !isTransactionConfirmation && ( 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, }, } diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/TransactionStatus.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/TransactionStatus.tsx index 2037020b..6b789b3a 100644 --- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/TransactionStatus.tsx +++ b/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 { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit) - +const TransactionStatus = ({ + transactionStatus, + isTransactionConfirmation, +}: VTransactionStatusProps) => { const isTransactionCompleted = transactionStatus === 'Complete' return ( diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts index 530752ce..6960605a 100644 --- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts +++ b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.stories.ts @@ -17,17 +17,20 @@ type Story = StoryObj 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, }, } diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx index 4e0d8a01..a5eb6d4e 100644 --- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest/ValidatorRequest.tsx +++ b/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 { isTransactionConfirmation } = useSelector((state: RootState) => state.deposit) - +const ValidatorRequest = ({ number, isTransactionConfirmation }: ValidatorRequestProps) => { let transactionStatus = 'Complete' const isTransactionCompleted = transactionStatus === 'Complete' @@ -57,7 +54,10 @@ const ValidatorRequest = ({ number }: ValidatorRequestProps) => { {isTransactionCompleted ? 32 : 0} ETH )} - +