fix: transaction table (#71)

* chore: fix inner transaction rendering in non lazy table
* fix: support viewing an inner transaction group
* chore: fix build

Author: neilcampbell

src/features/accounts/components/labels.ts

@@ -1,4 +1,4 @@
-export const accountJsonLabel = 'Acount JSON'
+export const accountJsonLabel = 'Account JSON'
 export const accountActivityLabel = 'Activity'
 
 export const accountLiveTransactionsTabLabel = 'Live Transactions'

src/features/blocks/components/block-details.tsx

@@ -4,10 +4,11 @@ import { useMemo } from 'react'
 import { cn } from '@/features/common/utils'
 import { dateFormatter } from '@/utils/format'
 import { BlockLink } from './block-link'
-import { TransactionsTable } from './transactions'
 import { Block } from '../models'
 import { Badge } from '@/features/common/components/badge'
 import { RenderInlineAsyncAtom } from '@/features/common/components/render-inline-async-atom'
+import { TransactionsTable } from '@/features/transactions/components/transactions-table'
+import { transactionsTableColumnsWithoutRound } from '@/features/transactions/components/transactions-table-columns'
 
 type Props = {
   block: Block
@@ -72,7 +73,7 @@ export function BlockDetails({ block }: Props) {
       <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{transactionsLabel}</h1>
-          <TransactionsTable transactions={block.transactions} />
+          <TransactionsTable transactions={block.transactions} columns={transactionsTableColumnsWithoutRound} />
         </CardContent>
       </Card>
     </div>

src/features/blocks/components/transactions.tsx

@@ -6,6 +6,7 @@ import { BlockResult, Round } from './types'
 import { groupResultsAtom } from '@/features/groups/data'
 import { GroupId, GroupResult } from '@/features/groups/data/types'
 import { atomsInAtom } from '@/features/common/data'
+import { flattenTransactionResult } from '@/features/transactions/utils/flatten-transaction-result'
 
 export const getBlockAndExtractData = async (round: Round) => {
   // We  use indexer instead of algod, as algod might not have the full history of blocks
@@ -15,17 +16,12 @@ export const getBlockAndExtractData = async (round: Round) => {
     .then((result) => {
       const [transactionIds, groupResults] = ((result.transactions ?? []) as TransactionResult[]).reduce(
         (acc, t) => {
+          // Accumulate transactions
           acc[0].push(t.id)
-          if (t.group) {
-            const group: GroupResult = acc[1].get(t.group) ?? {
-              id: t.group,
-              round: result.round as number,
-              timestamp: new Date(result.timestamp * 1000).toISOString(),
-              transactionIds: [],
-            }
-            group.transactionIds.push(t.id)
-            acc[1].set(t.group, group)
-          }
+
+          // Accumulate group results
+          accumulateGroupsFromTransaction(acc[1], t, result.round, result.timestamp)
+
           return acc
         },
         [[], new Map()] as [string[], Map<GroupId, GroupResult>]
@@ -45,6 +41,30 @@ export const getBlockAndExtractData = async (round: Round) => {
   return result
 }
 
+export const accumulateGroupsFromTransaction = (
+  acc: Map<GroupId, GroupResult>,
+  transaction: TransactionResult,
+  round: number,
+  roundTime: number
+) => {
+  // Inner transactions can be part of a group, just like regular transactions.
+  // In this scenario we add the root transaction id to the group, as inner transactions don't have ids on the network.
+  flattenTransactionResult(transaction).forEach((txn) => {
+    if (txn.group) {
+      const group: GroupResult = acc.get(txn.group) ?? {
+        id: txn.group,
+        round,
+        timestamp: new Date(roundTime * 1000).toISOString(),
+        transactionIds: [],
+      }
+      if (!group.transactionIds.find((id) => id === transaction.id)) {
+        group.transactionIds.push(transaction.id)
+      }
+      acc.set(txn.group, group)
+    }
+  })
+}
+
 export const addStateExtractedFromBlocksAtom = atom(
   null,
   (get, set, blockResults: BlockResult[], transactionResults: TransactionResult[], groupResults: GroupResult[]) => {

src/features/blocks/data/block-result.ts

@@ -14,7 +14,7 @@ import { flattenTransactionResult } from '@/features/transactions/utils/flatten-
 import { distinct } from '@/utils/distinct'
 import { assetResultsAtom } from '@/features/assets/data'
 import { BlockSummary } from '../models'
-import { blockResultsAtom, addStateExtractedFromBlocksAtom } from './block-result'
+import { blockResultsAtom, addStateExtractedFromBlocksAtom, accumulateGroupsFromTransaction } from './block-result'
 import { GroupId, GroupResult } from '@/features/groups/data/types'
 import { AssetId } from '@/features/assets/data/types'
 import { BalanceChangeRole } from '@algorandfoundation/algokit-subscriber/types/subscription'
@@ -121,17 +121,7 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
             acc[1].push(transaction)
 
             // Accumulate group results
-            if (t.group) {
-              const roundTime = transaction['round-time']
-              const group: GroupResult = acc[2].get(t.group) ?? {
-                id: t.group,
-                round: round,
-                timestamp: (roundTime ? new Date(roundTime * 1000) : new Date()).toISOString(),
-                transactionIds: [],
-              }
-              group.transactionIds.push(t.id)
-              acc[2].set(t.group, group)
-            }
+            accumulateGroupsFromTransaction(acc[2], transaction, round, transaction['round-time'] ?? new Date().getTime() / 1000)
 
             // Accumulate stale asset ids
             const staleAssetIds = flattenTransactionResult(t)

src/features/blocks/data/latest-blocks.ts

@@ -1,17 +1,24 @@
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable, getPaginationRowModel } from '@tanstack/react-table'
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable, getPaginationRowModel, getExpandedRowModel } from '@tanstack/react-table'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/features/common/components/table'
 import { DataTablePagination } from './data-table-pagination'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
+  getSubRows?: (row: TData) => TData[]
 }
 
-export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({ columns, data, getSubRows }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
     data,
+    paginateExpandedRows: false,
+    state: {
+      expanded: true,
+    },
+    getSubRows: getSubRows,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
   })
 

src/features/common/components/data-table.tsx

@@ -6,7 +6,7 @@ import { useMemo } from 'react'
 import { Badge } from '@/features/common/components/badge'
 import { dateFormatter } from '@/utils/format'
 import { BlockLink } from '@/features/blocks/components/block-link'
-import { GroupVisualTabs } from './group-visual-tabs'
+import { GroupTransactionsViewTabs } from './group-transactions-view-tabs'
 
 type Props = {
   group: Group
@@ -60,7 +60,7 @@ export function GroupDetails({ group }: Props) {
         <CardContent className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{transactionsLabel}</h1>
         </CardContent>
-        <GroupVisualTabs group={group} />
+        <GroupTransactionsViewTabs group={group} />
       </Card>
     </div>
   )

src/features/groups/components/group-details.tsx

@@ -3,6 +3,7 @@ import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features
 import { Group } from '../models'
 import { TransactionsGraph } from '@/features/transactions/components/transactions-graph'
 import { TransactionsTable } from '@/features/transactions/components/transactions-table'
+import { transactionsTableColumnsWithoutRound } from '@/features/transactions/components/transactions-table-columns'
 
 type Props = {
   group: Group
@@ -14,7 +15,7 @@ export const groupVisual = 'View Group'
 export const groupVisualGraphLabel = 'Graph'
 export const groupVisualTableLabel = 'Table'
 
-export function GroupVisualTabs({ group }: Props) {
+export function GroupTransactionsViewTabs({ group }: Props) {
   return (
     <Tabs defaultValue={graphTabId}>
       <TabsList aria-label={groupVisual}>
@@ -29,7 +30,7 @@ export function GroupVisualTabs({ group }: Props) {
         <TransactionsGraph transactions={group.transactions} />
       </OverflowAutoTabsContent>
       <OverflowAutoTabsContent value={tableTabId}>
-        <TransactionsTable transactions={group.transactions} />
+        <TransactionsTable transactions={group.transactions} columns={transactionsTableColumnsWithoutRound} />
       </OverflowAutoTabsContent>
     </Tabs>
   )

src/features/groups/components/group-visual-tabs.tsx renamed to src/features/groups/components/group-transactions-view-tabs.tsx

@@ -1,14 +1,35 @@
 import { Group } from '../models'
 import { GroupResult } from '../data/types'
-import { Transaction } from '@/features/transactions/models'
+import { InnerTransaction, Transaction, TransactionType } from '@/features/transactions/models'
 import { asTransactionsSummary } from '@/features/transactions/mappers'
+import { flattenInnerTransactions } from '@/utils/flatten-inner-transactions'
 
 export const asGroup = (groupResult: GroupResult, transactions: Transaction[]): Group => {
+  // The transactions passed in are always parent transactions.
+  // The group can be an inner transaction group, so we want to filter any transactions that aren't related to the group.
+  const transactionsInGroup = transactions.reduce(
+    (acc, txn) => {
+      if (txn.group === groupResult.id) {
+        // transaction in the group is at the root level, no need to search further
+        acc.push(txn)
+      } else if (txn.type === TransactionType.ApplicationCall && txn.innerTransactions.length > 0) {
+        const txns = flattenInnerTransactions(txn)
+        txns.forEach((flat) => {
+          if (flat.transaction.group === groupResult.id) {
+            acc.push(flat.transaction)
+          }
+        })
+      }
+      return acc
+    },
+    [] as (Transaction | InnerTransaction)[]
+  )
+
   return {
     id: groupResult.id,
     round: groupResult.round,
-    transactions,
+    transactions: transactionsInGroup,
     timestamp: groupResult.timestamp,
-    transactionsSummary: asTransactionsSummary(transactions),
+    transactionsSummary: asTransactionsSummary(transactionsInGroup),
   }
 }

src/features/groups/mappers/index.ts

@@ -2,7 +2,7 @@ import { executeComponentTest } from '@/tests/test-component'
 import { getByRole, render, waitFor } from '@/tests/testing-library'
 import { useParams } from 'react-router-dom'
 import { describe, expect, it, vi } from 'vitest'
-import { GroupPage, blockInvalidRoundMessage, blockNotFoundMessage, groupFailedToLoadMessage } from './group-page'
+import { GroupPage, blockInvalidRoundMessage, groupNotFoundMessage, groupFailedToLoadMessage } from './group-page'
 import { indexer } from '@/features/common/data'
 import { HttpError } from '@/tests/errors'
 import { groupResultMother } from '@/tests/object-mother/group-result'
@@ -14,7 +14,7 @@ import { transactionResultMother } from '@/tests/object-mother/transaction-resul
 import { assetResultMother } from '@/tests/object-mother/asset-result'
 import { algoAssetResult } from '@/features/assets/data'
 import { transactionResultsAtom } from '@/features/transactions/data'
-import { groupVisual, groupVisualGraphLabel, groupVisualTableLabel } from '../components/group-visual-tabs'
+import { groupVisual, groupVisualGraphLabel, groupVisualTableLabel } from '../components/group-transactions-view-tabs'
 import { tableAssertion } from '@/tests/assertions/table-assertion'
 import { assetResultsAtom } from '@/features/assets/data'
 
@@ -40,7 +40,7 @@ describe('block-page', () => {
       return executeComponentTest(
         () => render(<GroupPage />),
         async (component) => {
-          await waitFor(() => expect(component.getByText(blockNotFoundMessage)).toBeTruthy())
+          await waitFor(() => expect(component.getByText(groupNotFoundMessage)).toBeTruthy())
         }
       )
     })
@@ -117,10 +117,10 @@ describe('block-page', () => {
             // This table has 10+ row, we only test the first 2 rows
             rows: [
               {
-                cells: ['INDQXWQ...', 'AACC...EN4A', '1201559522', 'Application Call'],
+                cells: ['INDQXWQ...', '/oRSr2u...', 'AACC...EN4A', '1201559522', 'Application Call', ''],
               },
               {
-                cells: ['Inner 1', 'AACC...EN4A', '2PIF...RNMM', 'Payment', '2.770045'],
+                cells: ['Inner 1', 'aWpPwlo...', 'AACC...EN4A', '2PIF...RNMM', 'Payment', '2.770045'],
               },
             ],
           })