feat: create story with examples for transaction status

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import TransactionStatus from './TransactionStatus'
+
+const meta = {
+  title: 'ValidatorOnboarding/TransactionStatus',
+  component: TransactionStatus,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TransactionStatus>
+
+export default meta
+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,5 +1,5 @@
 import { Text } from '@status-im/components'
-import { FullscreenMacOsIcon, CloseMacOsIcon, MinimizeMacOsIcon } from '@status-im/icons'
+import { FullscreenMacOsIcon, MinimizeMacOsIcon, CloseMacOsIcon } from '@status-im/icons'
 import { XStack } from 'tamagui'
 
 type VTransactionStatusProps = {
@@ -16,8 +16,8 @@ const TransactionStatus = ({
       {isTransactionConfirmation ? (
         <XStack space={'$2'} alignItems={'center'}>
           {transactionStatus === 'Complete' && <FullscreenMacOsIcon size={16} />}
-          {transactionStatus === 'Failed' && <CloseMacOsIcon size={16} />}
           {transactionStatus === 'Pending' && <MinimizeMacOsIcon size={16} />}
+          {transactionStatus === 'Fail' && <CloseMacOsIcon size={16} />}
           <Text size={13} color="#2F80ED" weight={'semibold'}>
             Transaction {transactionStatus}
           </Text>