feat: asset historical transactions

Author: PatrickDinh

src/features/assets/components/asset-details.tsx

@@ -29,6 +29,7 @@ import { Badge } from '@/features/common/components/badge'
 import { AssetMedia } from './asset-media'
 import { AssetTraits } from './asset-traits'
 import { AssetMetadata } from './asset-metadata'
+import { AssetTransactionHistory } from './asset-transaction-history'
 
 type Props = {
   asset: Asset
@@ -156,7 +157,9 @@ export function AssetDetails({ asset }: Props) {
           <Card className={cn('p-4')}>
             <CardContent className={cn('text-sm space-y-2')}>
               <h1 className={cn('text-2xl text-primary font-bold')}>{assetTransactionsLabel}</h1>
-              <div className={cn('border-solid border-2 grid p-4')}>{/* <TransactionsTable transactions={asset.transactions} /> */}</div>
+              <div className={cn('border-solid border-2 grid p-4')}>
+                <AssetTransactionHistory assetIndex={asset.id} />
+              </div>
             </CardContent>
           </Card>
         </>

src/features/assets/components/asset-transaction-history.tsx

@@ -0,0 +1,60 @@
+import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
+import { AssetIndex } from '../data/types'
+import { Transaction, TransactionType } from '@/features/transactions/models'
+import { DisplayAlgo } from '@/features/common/components/display-algo'
+import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
+import { cn } from '@/features/common/utils'
+import { TransactionLink } from '@/features/transactions/components/transaction-link'
+import { ellipseAddress } from '@/utils/ellipse-address'
+import { ColumnDef } from '@tanstack/react-table'
+import { useFetchNextAssetTransactionsPage } from '../data/asset-transaction-history'
+
+type Props = {
+  assetIndex: AssetIndex
+}
+
+export function AssetTransactionHistory({ assetIndex }: Props) {
+  const fetchNextPage = useFetchNextAssetTransactionsPage(assetIndex)
+
+  return <LazyLoadDataTable columns={transactionsTableColumns} fetchNextPage={fetchNextPage} />
+}
+
+const transactionsTableColumns: ColumnDef<Transaction>[] = [
+  {
+    header: 'Transaction Id',
+    accessorKey: 'id',
+    cell: (c) => {
+      const value = c.getValue<string>()
+      return <TransactionLink transactionId={value} short={true} />
+    },
+  },
+  {
+    accessorKey: 'sender',
+    header: 'From',
+    cell: (c) => ellipseAddress(c.getValue<string>()),
+  },
+  {
+    header: 'To',
+    accessorFn: (transaction) => {
+      if (transaction.type === TransactionType.Payment || transaction.type === TransactionType.AssetTransfer)
+        return ellipseAddress(transaction.receiver)
+      if (transaction.type === TransactionType.ApplicationCall) return transaction.applicationId
+      if (transaction.type === TransactionType.AssetConfig) return transaction.assetId
+      if (transaction.type === TransactionType.AssetFreeze) return ellipseAddress(transaction.address)
+    },
+  },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+  },
+  {
+    header: 'Amount',
+    accessorFn: (transaction) => transaction,
+    cell: (c) => {
+      const transaction = c.getValue<Transaction>()
+      if (transaction.type === TransactionType.Payment) return <DisplayAlgo className={cn('justify-center')} amount={transaction.amount} />
+      if (transaction.type === TransactionType.AssetTransfer)
+        return <DisplayAssetAmount amount={transaction.amount} asset={transaction.asset} />
+    },
+  },
+]

src/features/assets/data/asset-transaction-history.ts

@@ -0,0 +1,62 @@
+import { AssetIndex } from '../data/types'
+import { indexer } from '@/features/common/data'
+import { TransactionResult, TransactionSearchResults } from '@algorandfoundation/algokit-utils/types/indexer'
+import { useMemo } from 'react'
+import { JotaiStore } from '@/features/common/data/types'
+import { fetchTransactionsAtomBuilder, transactionResultsAtom } from '@/features/transactions/data'
+import { atomEffect } from 'jotai-effect'
+import { atom, useStore } from 'jotai'
+
+const fetchAssetTransactionResults = async (assetIndex: AssetIndex, pageSize: number, nextPageToken?: string) => {
+  const results = (await indexer
+    .searchForTransactions()
+    .assetID(assetIndex)
+    .nextToken(nextPageToken ?? '')
+    .limit(pageSize)
+    .do()) as TransactionSearchResults
+  return {
+    transactionResults: results.transactions,
+    nextPageToken: results['next-token'],
+  } as const
+}
+
+const syncEffectBuilder = (transactionResults: TransactionResult[]) => {
+  return atomEffect((_, set) => {
+    ;(async () => {
+      try {
+        set(transactionResultsAtom, (prev) => {
+          const next = new Map(prev)
+          transactionResults.forEach((transactionResult) => {
+            next.set(transactionResult.id, transactionResult)
+          })
+          return next
+        })
+      } catch (e) {
+        // Ignore any errors as there is nothing to sync
+      }
+    })()
+  })
+}
+
+const fetchAssetTransactionsAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex, pageSize: number, nextPageToken?: string) => {
+  return atom(async (get) => {
+    const { transactionResults, nextPageToken: newNextPageToken } = await fetchAssetTransactionResults(assetIndex, pageSize, nextPageToken)
+
+    get(syncEffectBuilder(transactionResults))
+
+    const transactions = await get(fetchTransactionsAtomBuilder(store, transactionResults))
+
+    return {
+      rows: transactions,
+      nextPageToken: newNextPageToken,
+    }
+  })
+}
+
+export const useFetchNextAssetTransactionsPage = (assetIndex: AssetIndex) => {
+  const store = useStore()
+
+  return useMemo(() => {
+    return (pageSize: number, nextPageToken?: string) => fetchAssetTransactionsAtomBuilder(store, assetIndex, pageSize, nextPageToken)
+  }, [store, assetIndex])
+}

src/features/common/components/lazy-load-data-table/index.ts

@@ -0,0 +1 @@
+export * from './lazy-load-data-table'

src/features/common/components/lazy-load-data-table/lazy-load-data-table-pagination.tsx

@@ -0,0 +1,64 @@
+import SvgChevronLeft from '@/features/common/components/icons/chevron-left'
+import SvgChevronRight from '@/features/common/components/icons/chevron-right'
+import { Button } from '@/features/common/components/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/common/components/select'
+
+interface Props {
+  pageSize: number
+  setPageSize: (pageSize: number) => void
+  currentPage: number
+  nextPageEnabled: boolean
+  nextPage: () => void
+  previousPageEnabled: boolean
+  previousPage: () => void
+}
+
+const pageSizeOptions = [10, 20, 30, 40, 50]
+
+export function LazyLoadDataTablePagination({
+  pageSize,
+  setPageSize,
+  currentPage,
+  nextPageEnabled,
+  nextPage,
+  previousPageEnabled,
+  previousPage,
+}: Props) {
+  return (
+    <div className="mt-2 flex items-center justify-between">
+      <div className="flex w-full">
+        <div className="flex shrink grow basis-0 items-center justify-start space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex shrink grow basis-0 items-center justify-center text-sm font-medium">Page {currentPage}</div>
+        <div className="flex shrink grow basis-0 items-center justify-end space-x-2">
+          <Button variant="outline" className="size-8 p-0" onClick={() => previousPage()} disabled={!previousPageEnabled}>
+            <span className="sr-only">Go to previous page</span>
+            <SvgChevronLeft className="size-4" />
+          </Button>
+          <Button variant="outline" className="size-8 p-0" onClick={() => nextPage()} disabled={!nextPageEnabled}>
+            <span className="sr-only">Go to next page</span>
+            <SvgChevronRight className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,111 @@
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/features/common/components/table'
+import { useCallback, useMemo, useState } from 'react'
+import { Atom } from 'jotai'
+import { DataPage, loadablePaginationBuilder } from '../../data/loadable-pagination-builder'
+import { LazyLoadDataTablePagination } from './lazy-load-data-table-pagination'
+import { Loader2 as Loader } from 'lucide-react'
+
+interface Props<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  fetchNextPage: (pageSize: number, nextPageToken?: string) => Atom<Promise<DataPage<TData>>>
+}
+
+export function LazyLoadDataTable<TData, TValue>({ columns, fetchNextPage }: Props<TData, TValue>) {
+  const [pageSize, setPageSize] = useState(10)
+  const { useLoadablePage } = useMemo(
+    () =>
+      loadablePaginationBuilder({
+        pageSize,
+        fetchNextPage,
+      }),
+    [pageSize, fetchNextPage]
+  )
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const loadablePage = useLoadablePage(currentPage)
+
+  const nextPage = useCallback(() => {
+    setCurrentPage((prev) => prev + 1)
+  }, [])
+
+  const previousPage = useCallback(() => {
+    setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))
+  }, [])
+
+  const setPageSizeAndResetCurrentPage = useCallback((newPageSize: number) => {
+    setPageSize(newPageSize)
+    setCurrentPage(1)
+  }, [])
+
+  const page = useMemo(() => (loadablePage.state === 'hasData' ? loadablePage.data : undefined), [loadablePage])
+
+  const table = useReactTable({
+    data: page?.rows ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  return (
+    <div>
+      <div className="grid rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loadablePage.state === 'loading' && (
+              <TableRow>
+                <TableCell colSpan={columns.length}>
+                  <div className="flex flex-col items-center">
+                    <Loader className="size-10 animate-spin" />
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+            {loadablePage.state === 'hasError' && (
+              <TableRow>
+                <TableCell colSpan={columns.length}>Failed to load data.</TableCell>
+              </TableRow>
+            )}
+            {loadablePage.state === 'hasData' &&
+              table.getRowModel().rows?.length &&
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            {loadablePage.state === 'hasData' && table.getRowModel().rows?.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <LazyLoadDataTablePagination
+        pageSize={pageSize}
+        setPageSize={setPageSizeAndResetCurrentPage}
+        currentPage={currentPage}
+        nextPageEnabled={!!page?.nextPageToken && page.rows.length === pageSize}
+        nextPage={nextPage}
+        previousPageEnabled={currentPage > 1}
+        previousPage={previousPage}
+      />
+    </div>
+  )
+}

src/features/common/data/loadable-pagination-builder.ts

@@ -0,0 +1,68 @@
+import { Atom, atom, useAtomValue, useStore } from 'jotai'
+import { atomEffect } from 'jotai-effect'
+import { loadable } from 'jotai/utils'
+import { JotaiStore } from './types'
+import { useMemo } from 'react'
+
+export type DataPage<TData> = {
+  rows: TData[]
+  nextPageToken?: string
+}
+
+type LoadablePaginationBuilderInput<TData> = {
+  pageSize: number
+  fetchNextPage: (pageSize: number, nextPageToken?: string) => Atom<Promise<DataPage<TData>>>
+}
+
+export function loadablePaginationBuilder<TData>({ pageSize, fetchNextPage }: LoadablePaginationBuilderInput<TData>) {
+  const rawDataPagesAtom = atom<DataPage<TData>[]>([])
+
+  const syncEffectBuilder = ({ rows, nextPageToken }: { rows: TData[]; nextPageToken?: string }) => {
+    return atomEffect((_, set) => {
+      ;(async () => {
+        try {
+          set(rawDataPagesAtom, (prev) => {
+            return Array.from(prev).concat([{ rows, nextPageToken }])
+          })
+        } catch (e) {
+          // Ignore any errors as there is nothing to sync
+        }
+      })()
+    })
+  }
+
+  const getPageAtomBuilder = (store: JotaiStore, pageSize: number, pageNumber: number) => {
+    return atom(async (get) => {
+      const index = pageNumber - 1
+      const cache = store.get(rawDataPagesAtom)
+
+      if (index < cache.length) {
+        return cache[index] satisfies DataPage<TData>
+      }
+
+      const currentNextPageToken = cache[cache.length - 1]?.nextPageToken
+      const { rows, nextPageToken } = await get(fetchNextPage(pageSize, currentNextPageToken))
+
+      get(syncEffectBuilder({ rows, nextPageToken }))
+
+      return {
+        rows: rows,
+        nextPageToken,
+      } satisfies DataPage<TData>
+    })
+  }
+
+  const usePageAtom = (pageSize: number, pageNumber: number) => {
+    const store = useStore()
+
+    return useMemo(() => {
+      return getPageAtomBuilder(store, pageSize, pageNumber)
+    }, [store, pageSize, pageNumber])
+  }
+
+  const useLoadablePage = (pageNumber: number) => {
+    return useAtomValue(loadable(usePageAtom(pageSize, pageNumber)))
+  }
+
+  return { useLoadablePage } as const
+}