Merge remote-tracking branch 'origin/payment-transaction' into multisig

src/features/common/components/description-list.tsx

@@ -6,9 +6,9 @@ type Props = {
 
 export function DescriptionList({ items }: Props) {
   return items.map((item, index) => (
-    <dl className={cn('grid grid-cols-8')} key={index}>
-      <dt>{item.dt}</dt>
-      <dd className={cn('col-span-7')}>{item.dd}</dd>
+    <dl className={cn('grid grid-cols-10')} key={index}>
+      <dt className={cn('col-span-2')}>{item.dt}</dt>
+      <dd className={cn('col-span-8')}>{item.dd}</dd>
     </dl>
   ))
 }

src/features/common/components/display-algo.tsx

@@ -3,12 +3,13 @@ import { cn } from '../utils'
 import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
 
 export type Props = {
+  className?: string
   amount: AlgoAmount
 }
 
-export function DisplayAlgo({ amount }: Props) {
+export function DisplayAlgo({ className, amount }: Props) {
   return (
-    <div className={cn('flex items-center')}>
+    <div className={cn(className, 'flex items-center')}>
       {amount.algos}
       <SvgAlgorand />
     </div>

src/features/transactions/components/payment-transaction.tsx

@@ -9,7 +9,9 @@ import { useMemo } from 'react'
 import { PaymentTransactionModel } from '../models'
 import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { DescriptionList } from '@/features/common/components/description-list'
-import { TransactionVisualisation } from './transaction-visualisation'
+import { TransactionViewVisual } from './transaction-view-visual'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
+import { TransactionViewTable } from './transaction-view-table'
 import { MultiSig } from './multisig'
 
 export type Props = {
@@ -57,7 +59,25 @@ export function PaymentTransaction({ transaction, rawTransaction }: Props) {
             <DescriptionList items={paymentTransactionItems} />
           </div>
           <TransactionNote transaction={transaction} />
-          <TransactionVisualisation transaction={transaction} />
+          <div className={cn('space-y-2')}>
+            <h2 className={cn('text-xl font-bold')}>View</h2>
+            <Tabs defaultValue="visual">
+              <TabsList>
+                <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="visual">
+                  Visual
+                </TabsTrigger>
+                <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value="table">
+                  Table
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="visual" className={cn('border-solid border-2 border-border h-60 p-4')}>
+                <TransactionViewVisual transaction={transaction} />
+              </TabsContent>
+              <TabsContent value="table" className={cn('border-solid border-2 border-border h-60 p-4')}>
+                <TransactionViewTable transaction={transaction} />
+              </TabsContent>
+            </Tabs>
+          </div>
           <TransactionJson transaction={rawTransaction} />
           {transaction.multiSig && <MultiSig multiSig={transaction.multiSig} />}
         </CardContent>

src/features/transactions/components/transaction-view-table.tsx

@@ -0,0 +1,82 @@
+import { cn } from '@/features/common/utils'
+import { TransactionModel, TransactionType } from '../models'
+import { DisplayAlgo } from '@/features/common/components/display-algo'
+
+const graphConfig = {
+  indentationWidth: 20,
+}
+
+function unpackTransaction(transaction: TransactionModel, indentationLevel = 0) {
+  const transactionWithIndentationLevel: {
+    indentationLevel: number
+    transaction: TransactionModel
+  }[] = []
+
+  transactionWithIndentationLevel.push({
+    indentationLevel: indentationLevel,
+    transaction: transaction,
+  })
+
+  transaction.transactions?.forEach((transaction) => {
+    const childTransactionWithIndentationLevel = unpackTransaction(transaction, indentationLevel + 1)
+
+    transactionWithIndentationLevel.push(...childTransactionWithIndentationLevel)
+  })
+
+  return transactionWithIndentationLevel
+}
+
+function TruncatedId({ id }: { id: string }) {
+  return <div className={cn('m-auto truncate max-w-28')}>{id}</div>
+}
+
+type Props = {
+  transaction: TransactionModel
+}
+
+export function TransactionViewTable({ transaction }: Props) {
+  const transactionsWithIndentationLevel = unpackTransaction(transaction)
+
+  return (
+    <table className={cn('w-full')}>
+      <thead>
+        <tr>
+          <th className={cn('border-2')}>Transaction ID</th>
+          <th className={cn('p-2 border-2')}>From</th>
+          <th className={cn('p-2 border-2')}>To</th>
+          <th className={cn('p-2 border-2')}>Type</th>
+          <th className={cn('p-2 border-2')}>Amount</th>
+        </tr>
+      </thead>
+      <tbody>
+        {transactionsWithIndentationLevel.map(({ transaction, indentationLevel }) => (
+          <tr key={transaction.id}>
+            <td className={cn('p-2 border-2')}>
+              <div
+                style={{
+                  marginLeft: `${graphConfig.indentationWidth * indentationLevel}px`,
+                }}
+              >
+                <TruncatedId id={transaction.id} />
+              </div>
+            </td>
+            <td className={cn('p-2 border-2')}>
+              <TruncatedId id={transaction.sender} />
+            </td>
+            <td className={cn('p-2 border-2')}>
+              <TruncatedId id={transaction.receiver} />
+            </td>
+            <td className={cn('p-2 border-2 text-center')}>{transaction.type}</td>
+            <td className={cn('p-2 border-2')}>
+              {transaction.type === TransactionType.Payment ? (
+                <DisplayAlgo className={cn('justify-center')} amount={transaction.amount} />
+              ) : (
+                'N/A'
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}