Add story for transaction details

src/stories/Transactions.stories.tsx

@@ -0,0 +1,129 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ConsensusTransactionDetails } from '../app/components/Transactions/ConsensusTransactionDetails'
+import { ConsensusTxMethod, Transaction } from '../oasis-nexus/api'
+import { COLORS } from '../styles/theme/colors'
+
+export default {
+  title: 'Example/Transactions',
+  decorators: [withRouter],
+} satisfies Meta<any>
+
+const Template: StoryFn = () => {
+  return (
+    <Box>
+      {Object.values(ConsensusTxMethod).map(method => (
+        <Box
+          key={method}
+          gap={4}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingBottom: 6,
+          }}
+        >
+          <Typography sx={{ color: COLORS.grayMedium, fontSize: '12px', width: '250px' }}>
+            {method}
+          </Typography>
+          <Box sx={{ flex: 1 }}>
+            <ConsensusTransactionDetails transaction={getMockedTransactionObject(method)} />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+export const ConsensusTransactionDetailsStory: StoryObj = {
+  render: Template,
+  args: {},
+}
+
+const getMockedTransactionObject = (method: ConsensusTxMethod): Transaction => {
+  switch (method) {
+    case ConsensusTxMethod.stakingAddEscrow:
+      return {
+        network: 'mainnet',
+        layer: 'consensus',
+        ticker: 'ROSE',
+        block: 19851448,
+        body: {
+          account: 'oasis1qp0xuvw2a93w4yp8jwthfz93gxy87u7hes9eu2ev',
+          amount: '100',
+        },
+        fee: '0',
+        hash: 'd46e9223c45bd52d885673dd574f008b5e377ad879adb08f52af53c292151984',
+        index: 26,
+        method: 'staking.AddEscrow',
+        nonce: 275,
+        sender: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk',
+        success: true,
+        timestamp: '2024-06-25T06:52:19Z',
+      }
+    case ConsensusTxMethod.stakingAllow:
+      return {
+        network: 'mainnet',
+        layer: 'consensus',
+        ticker: 'ROSE',
+        block: 18818862,
+        body: {
+          amount_change: '10',
+          beneficiary: 'oasis1qrd3mnzhhgst26hsp96uf45yhq6zlax0cuzdgcfc',
+        },
+        fee: '0',
+        hash: '2c849b3b9aaf63d73c35502af5b3bbf5881439288ebe3153966c6b78891d1978',
+        index: 26,
+        method: 'staking.Allow',
+        nonce: 266,
+        sender: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk',
+        success: true,
+        timestamp: '2024-04-15T07:09:52Z',
+      }
+    case ConsensusTxMethod.stakingReclaimEscrow:
+      return {
+        network: 'mainnet',
+        layer: 'consensus',
+        ticker: 'ROSE',
+        block: 19851464,
+        body: {
+          account: 'oasis1qq0xmq7r0z9sdv02t5j9zs7en3n6574gtg8v9fyt',
+          shares: '30027579719',
+        },
+        fee: '0',
+        hash: 'e8ca2ea8f664d668603178687bc335c6ebb79dce716ce4e54f33d14a57f9fa5e',
+        index: 25,
+        method: 'staking.ReclaimEscrow',
+        nonce: 277,
+        sender: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk',
+        success: true,
+        timestamp: '2024-06-25T06:53:53Z',
+      }
+    case ConsensusTxMethod.stakingTransfer:
+      return {
+        network: 'mainnet',
+        layer: 'consensus',
+        ticker: 'ROSE',
+        block: 19969302,
+        body: {
+          amount: '100',
+          to: 'oasis1qzca4c3gch3ymy3w7e5ffzf9l6alpazpf5ffyytn',
+        },
+        fee: '0',
+        hash: 'a06aa6c1535727a1f578638b3754e8feff34293f26449b76cf80d94f216d22ff',
+        index: 25,
+        method: 'staking.Transfer',
+        nonce: 322926,
+        sender: 'oasis1qzyw98s2qrvf3t78nf0guu98laykw6lzkga5zlzy',
+        success: true,
+        timestamp: '2024-07-03T09:23:32Z',
+      }
+
+    default:
+      return {
+        sender: 'oasis1qzyw98s2qrvf3t78nf0guu98laykw6lzkga5zlzy',
+      } as Transaction
+  }
+}