feat: improve transaction rendering

packages/circle-demo-webapp/app/components/TransactionTableHead/TransactionTableHead.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TransactionTableHead } from './TransactionTableHead';
+
+const meta = {
+  title: 'TransactionTableHead',
+  component: TransactionTableHead,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TransactionTableHead>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

packages/circle-demo-webapp/app/components/TransactionTableHead/TransactionTableHead.tsx

@@ -0,0 +1,13 @@
+export function TransactionTableHead() {
+  return (
+    <thead>
+      <tr className="text-gray-900 text-left text-sm">
+        <th className="py-2">Event</th>
+        <th className="px-4 py-2">From</th>
+        <th className="px-4 py-2">To</th>
+        <th className="px-4 py-2 text-right">Amount</th>
+        <th className="py-2 text-right">Date</th>
+      </tr>
+    </thead>
+  );
+}

packages/circle-demo-webapp/app/components/TransactionTableHead/index.ts

@@ -0,0 +1 @@
+export * from './TransactionTableHead';

packages/circle-demo-webapp/app/components/TransactionTableRow/TransactionTableRow.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { BLOCKCHAIN, TRANSACTION_STATE } from 'web3-circle-sdk';
+
+import { TransactionTableRow } from './TransactionTableRow';
+
+const meta = {
+  title: 'TransactionTableRow',
+  component: TransactionTableRow,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TransactionTableRow>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    transaction: {
+      id: 'c0d471be-f36f-5e26-8962-9ebd38ec8a62',
+      blockchain: 'MATIC-AMOY' as BLOCKCHAIN,
+      tokenId: '36b6931a-873a-56a8-8a27-b706b17104ee',
+      walletId: '24d1ad14-cf0c-5d7d-96d1-aca6447d0fdc',
+      sourceAddress: '0x2da2bf0a07b015ffa80821df8b2203d473964d95',
+      destinationAddress: '0xf6c9efc84080217ccd13ef6d4a7f26a680f2c713',
+      transactionType: 'INBOUND',
+      custodyType: 'DEVELOPER',
+      state: 'COMPLETE' as TRANSACTION_STATE,
+      transactionScreeningEvaluation: { screeningDate: '2024-12-10T13:52:57Z' },
+      amounts: ['30'],
+      nfts: null,
+      txHash: '0x1aac3dd232d02797fb6c340cbda7d118fce0561aa7f78049f32ba167b0eaf225',
+      blockHash: '0x3bd9054deae68d0d5087da188f119eab2160c12c8a255668e6190c60ffed9ff6',
+      blockHeight: 15439404,
+      networkFee: '0.005164650002582325',
+      firstConfirmDate: '2024-12-10T13:52:57Z',
+      operation: 'TRANSFER',
+      abiParameters: null,
+      createDate: '2024-12-10T13:52:57Z',
+      updateDate: '2024-12-10T13:54:43Z',
+    },
+  },
+};

packages/circle-demo-webapp/app/components/TransactionTableRow/TransactionTableRow.tsx

@@ -0,0 +1,40 @@
+import type { Transaction } from 'web3-circle-sdk';
+
+import { Badge } from '~/components/ui/badge';
+import { formatDate, shortenAddress } from '~/lib/format';
+
+export interface TransactionTableRowProps {
+  transaction: Transaction;
+}
+
+export function TransactionTableRow({ transaction }: TransactionTableRowProps) {
+  const isInbound = transaction.transactionType === 'INBOUND';
+
+  return (
+    <tr className="text-sm text-gray-500">
+      <td className="py-2">
+        <Badge variant="outline">{transaction.operation}</Badge>
+      </td>
+
+      <td className="px-4 py-2" title={transaction.sourceAddress}>
+        {shortenAddress(transaction.sourceAddress)}
+      </td>
+
+      <td className="px-4 py-2" title={transaction.destinationAddress}>
+        {shortenAddress(transaction.destinationAddress)}
+      </td>
+
+      <td
+        className={`px-4 py-2 text-right font-medium ${
+          isInbound ? 'text-green-500' : 'text-red-500'
+        }`}
+      >
+        {isInbound ? '+' : '-'} {transaction.amounts?.[0] ?? '0.00'}
+      </td>
+
+      <td className="py-2 text-right">
+        {formatDate(transaction.firstConfirmDate ?? transaction.createDate)}
+      </td>
+    </tr>
+  );
+}

packages/circle-demo-webapp/app/components/TransactionTableRow/index.ts

@@ -0,0 +1 @@
+export * from './TransactionTableRow';

packages/circle-demo-webapp/app/routes/wallet.$id/route.tsx

@@ -2,7 +2,8 @@ import { LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData, useParams } from '@remix-run/react';
 import { ArrowUp } from 'lucide-react';
 
-import { TransactionDetails } from '~/components/TransactionDetails';
+import { TransactionTableHead } from '~/components/TransactionTableHead';
+import { TransactionTableRow } from '~/components/TransactionTableRow';
 import { Button } from '~/components/ui/button';
 import { Card } from '~/components/ui/card';
 import { WalletBalance } from '~/components/WalletBalance';
@@ -84,11 +85,19 @@ export default function WalletBalancePage() {
         <div className="space-y-4">
           {transactions.length === 0 && <p>No transactions</p>}
 
-          {transactions.map((tx) => (
-            <div key={tx.id}>
-              <TransactionDetails transaction={tx} />
+          {transactions.length > 0 && (
+            <div className="overflow-x-auto">
+              <table className="min-w-full table-auto">
+                <TransactionTableHead />
+
+                <tbody>
+                  {transactions.map((tx) => (
+                    <TransactionTableRow key={tx.id} transaction={tx} />
+                  ))}
+                </tbody>
+              </table>
             </div>
-          ))}
+          )}
         </div>
       </Card>
     </div>