feat: account historical transactions (#51)

* feat: add account historical transactions

* fix: circular dependency issue

* refactor: account info labels

* fix: filtering the flattened transactions

Author: negar-abbasi

src/features/accounts/components/account-activity-tabs.tsx

@@ -3,21 +3,22 @@ import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
 import { AccountAssetHeld } from './account-assets-held'
 import { Account } from '../models'
-
-const accountLiveTransactionsTabId = 'live-transactions'
-const accountHistoricalTransactionsTabId = 'historical-transactions'
-const accountHeldAssetsTabId = 'held-assets'
-const accountCreatedAssetsTabId = 'created-assets'
-const accountCreatedApplicationsTabId = 'created-applications'
-const accountOptedApplicationsTabId = 'opted-applications'
-
-export const accountDetailsLabel = 'View account Details'
-export const accountLiveTransactionsTabLabel = 'Live Transactions'
-export const accountHistoricalTransactionsTabLabel = 'Historical Transactions'
-export const accountHeldAssetsTabLabel = 'Held Assets'
-export const accountCreatedAssetsTabLabel = 'Created Assets'
-export const accountCreatedApplicationsTabLabel = 'Created Applications'
-export const accountOptedApplicationsTabLabel = 'Opted Applications'
+import { AccountTransactionHistory } from './account-transaction-history'
+import {
+  accountActivityLabel,
+  accountLiveTransactionsTabId,
+  accountCreatedApplicationsTabId,
+  accountCreatedAssetsTabId,
+  accountHeldAssetsTabId,
+  accountHistoricalTransactionsTabId,
+  accountOptedApplicationsTabId,
+  accountLiveTransactionsTabLabel,
+  accountHistoricalTransactionsTabLabel,
+  accountHeldAssetsTabLabel,
+  accountCreatedAssetsTabLabel,
+  accountCreatedApplicationsTabLabel,
+  accountOptedApplicationsTabLabel,
+} from './labels'
 
 type Props = {
   account: Account
@@ -34,7 +35,7 @@ export function AccountActivityTabs({ account }: Props) {
       {
         id: accountHistoricalTransactionsTabId,
         label: accountHistoricalTransactionsTabLabel,
-        children: '',
+        children: <AccountTransactionHistory address={account.address} />,
       },
       {
         id: accountHeldAssetsTabId,
@@ -61,7 +62,7 @@ export function AccountActivityTabs({ account }: Props) {
   )
   return (
     <Tabs defaultValue={accountLiveTransactionsTabId}>
-      <TabsList aria-label={accountDetailsLabel}>
+      <TabsList aria-label={accountActivityLabel}>
         {tabs.map((tab) => (
           <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-44')} value={tab.id}>
             {tab.label}

src/features/accounts/components/account-details.tsx

@@ -3,21 +3,19 @@ import { Account } from '../models'
 import { cn } from '@/features/common/utils'
 import { AccountActivityTabs } from './account-activity-tabs'
 import { AccountInfo } from './account-info'
+import { accountActivityLabel, accountJsonLabel } from './labels'
 
 type Props = {
   account: Account
 }
 
-export const activityLabel = 'Activity'
-export const accountJsonLabel = 'Acount JSON'
-
 export function AccountDetails({ account }: Props) {
   return (
     <div className={cn('space-y-6 pt-7')}>
       <AccountInfo account={account} />
-      <Card aria-label={activityLabel} className={cn('p-4')}>
+      <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
-          <h1 className={cn('text-2xl text-primary font-bold')}>{activityLabel}</h1>
+          <h1 className={cn('text-2xl text-primary font-bold')}>{accountActivityLabel}</h1>
           <div className={cn('border-solid border-2 border-border grid')}>
             <AccountActivityTabs account={account} />
           </div>

src/features/accounts/components/account-info.tsx

@@ -5,17 +5,18 @@ import { DescriptionList } from '@/features/common/components/description-list'
 import { cn } from '@/features/common/utils'
 import { DisplayAlgo } from '@/features/common/components/display-algo'
 import { AccountLink } from './account-link'
-
-export const accountInformationLabel = 'Account Information'
-export const accountAddressLabel = 'Address'
-export const accountBalanceLabel = 'Balance'
-export const accountMinBalanceLabel = 'Min Balance'
-export const accountAssetsHeldLabel = 'Holding assets'
-export const accountAssetsCreatedLabel = 'Created assets'
-export const accountAssetsOptedInLabel = 'Opted assets'
-export const accountApplicationsCreatedLabel = 'Created applications'
-export const accountApplicationsOptedInLabel = 'Opted applications'
-export const accountRekeyedToLabel = 'Rekeyed to'
+import {
+  accountAddressLabel,
+  accountApplicationsCreatedLabel,
+  accountApplicationsOptedInLabel,
+  accountAssetsCreatedLabel,
+  accountAssetsHeldLabel,
+  accountAssetsOptedInLabel,
+  accountBalanceLabel,
+  accountInformationLabel,
+  accountMinBalanceLabel,
+  accountRekeyedToLabel,
+} from './labels'
 
 export function AccountInfo({ account }: { account: Account }) {
   const accountInfoItems = useMemo(() => {

src/features/accounts/components/account-transaction-history.tsx

@@ -0,0 +1,14 @@
+import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
+import { Address } from '../data/types'
+import { useFetchNextAccountTransactionPage } from '../data/account-transaction-history'
+import { accountTransactionsTableColumns } from './account-transaction-table-columns'
+
+type Props = {
+  address: Address
+}
+
+export function AccountTransactionHistory({ address }: Props) {
+  const fetchNextPage = useFetchNextAccountTransactionPage(address)
+
+  return <LazyLoadDataTable columns={accountTransactionsTableColumns} fetchNextPage={fetchNextPage} />
+}

src/features/accounts/components/account-transaction-table-columns.tsx

@@ -0,0 +1,57 @@
+import { InnerTransaction, Transaction, TransactionType } from '@/features/transactions/models'
+import { cn } from '@/features/common/utils'
+import { ellipseAddress } from '@/utils/ellipse-address'
+import { ColumnDef } from '@tanstack/react-table'
+import { DisplayAlgo } from '@/features/common/components/display-algo'
+import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
+import { TransactionLink } from '@/features/transactions/components/transaction-link'
+import { ellipseId } from '@/utils/ellipse-id'
+import { asTo } from '@/features/common/mappers/to'
+
+export const accountTransactionsTableColumns: ColumnDef<Transaction | InnerTransaction>[] = [
+  {
+    header: 'Transaction Id',
+    accessorFn: (transaction) => transaction,
+    cell: (c) => {
+      const transaction = c.getValue<Transaction | InnerTransaction>()
+      return 'innerId' in transaction ? (
+        <TransactionLink
+          className={cn('text-primary underline cursor-pointer grid gap-2')}
+          transactionId={transaction.networkTransactionId}
+        >
+          <span>{ellipseId(transaction.id)}</span>
+          <span>(Inner)</span>
+        </TransactionLink>
+      ) : (
+        <TransactionLink transactionId={transaction.id} short={true} />
+      )
+    },
+  },
+  {
+    header: 'Round',
+    accessorKey: 'confirmedRound',
+  },
+  {
+    accessorKey: 'sender',
+    header: 'From',
+    cell: (c) => ellipseAddress(c.getValue<string>()),
+  },
+  {
+    header: 'To',
+    accessorFn: asTo,
+  },
+  {
+    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/accounts/components/labels.ts

@@ -0,0 +1,27 @@
+export const accountJsonLabel = 'Acount JSON'
+export const accountActivityLabel = 'Activity'
+
+export const accountLiveTransactionsTabLabel = 'Live Transactions'
+export const accountHistoricalTransactionsTabLabel = 'Historical Transactions'
+export const accountHeldAssetsTabLabel = 'Held Assets'
+export const accountCreatedAssetsTabLabel = 'Created Assets'
+export const accountCreatedApplicationsTabLabel = 'Created Applications'
+export const accountOptedApplicationsTabLabel = 'Opted Applications'
+
+export const accountLiveTransactionsTabId = 'live-transactions'
+export const accountHistoricalTransactionsTabId = 'historical-transactions'
+export const accountHeldAssetsTabId = 'held-assets'
+export const accountCreatedAssetsTabId = 'created-assets'
+export const accountCreatedApplicationsTabId = 'created-applications'
+export const accountOptedApplicationsTabId = 'opted-applications'
+
+export const accountInformationLabel = 'Account Information'
+export const accountAddressLabel = 'Address'
+export const accountBalanceLabel = 'Balance'
+export const accountMinBalanceLabel = 'Min Balance'
+export const accountAssetsHeldLabel = 'Held assets'
+export const accountAssetsCreatedLabel = 'Created assets'
+export const accountAssetsOptedInLabel = 'Opted assets'
+export const accountApplicationsCreatedLabel = 'Created applications'
+export const accountApplicationsOptedInLabel = 'Opted applications'
+export const accountRekeyedToLabel = 'Rekeyed to'

src/features/accounts/data/account-transaction-history.ts

@@ -0,0 +1,65 @@
+import { Address } 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 { createTransactionsAtom, transactionResultsAtom } from '@/features/transactions/data'
+import { atomEffect } from 'jotai-effect'
+import { atom, useStore } from 'jotai'
+import { extractTransactionsForAccount } from '../utils/extract-transaction-for-account'
+
+const fetchAccountTransactionResults = async (address: Address, pageSize: number, nextPageToken?: string) => {
+  const results = (await indexer
+    .searchForTransactions()
+    .address(address)
+    .nextToken(nextPageToken ?? '')
+    .limit(pageSize)
+    .do()) as TransactionSearchResults
+  return {
+    transactionResults: results.transactions,
+    nextPageToken: results['next-token'],
+  } as const
+}
+
+const createSyncEffect = (transactionResults: TransactionResult[]) => {
+  return atomEffect((_, set) => {
+    ;(async () => {
+      try {
+        set(transactionResultsAtom, (prev) => {
+          const next = new Map(prev)
+          transactionResults.forEach((transactionResult) => {
+            if (!next.has(transactionResult.id)) {
+              next.set(transactionResult.id, atom(transactionResult))
+            }
+          })
+          return next
+        })
+      } catch (e) {
+        // Ignore any errors as there is nothing to sync
+      }
+    })()
+  })
+}
+
+const creatAccountTransactionAtom = (store: JotaiStore, address: Address, pageSize: number, nextPageToken?: string) => {
+  return atom(async (get) => {
+    const { transactionResults, nextPageToken: newNextPageToken } = await fetchAccountTransactionResults(address, pageSize, nextPageToken)
+
+    get(createSyncEffect(transactionResults))
+
+    const transactions = await get(createTransactionsAtom(store, transactionResults))
+    const transactionsForAccount = transactions.flatMap((transaction) => extractTransactionsForAccount(transaction, address))
+    return {
+      rows: transactionsForAccount,
+      nextPageToken: newNextPageToken,
+    }
+  })
+}
+
+export const useFetchNextAccountTransactionPage = (address: Address) => {
+  const store = useStore()
+
+  return useMemo(() => {
+    return (pageSize: number, nextPageToken?: string) => creatAccountTransactionAtom(store, address, pageSize, nextPageToken)
+  }, [store, address])
+}

src/features/accounts/pages/account-page.test.tsx

@@ -6,6 +6,8 @@ import { AccountPage, accountFailedToLoadMessage } from './account-page'
 import { algod } from '@/features/common/data'
 import { accountResultMother } from '@/tests/object-mother/account-result'
 import { atom, createStore } from 'jotai'
+import { descriptionListAssertion } from '@/tests/assertions/description-list-assertion'
+import { accountResultsAtom } from '../data'
 import {
   accountAddressLabel,
   accountBalanceLabel,
@@ -16,10 +18,9 @@ import {
   accountMinBalanceLabel,
   accountApplicationsOptedInLabel,
   accountAssetsOptedInLabel,
-} from '../components/account-info'
-import { descriptionListAssertion } from '@/tests/assertions/description-list-assertion'
-import { accountResultsAtom } from '../data'
-import { accountJsonLabel } from '../components/account-details'
+  accountActivityLabel,
+  accountJsonLabel,
+} from '../components/labels'
 
 describe('account-page', () => {
   describe('when rendering an account using a invalid address', () => {
@@ -78,6 +79,9 @@ describe('account-page', () => {
                 { term: accountApplicationsOptedInLabel, description: '2' },
               ],
             })
+            const activityTabList = component.getByRole('tablist', { name: accountActivityLabel })
+            expect(activityTabList).toBeTruthy()
+            expect(activityTabList.children.length).toBe(6)
           })
         }
       )

src/features/accounts/utils/extract-transaction-for-account.ts

@@ -0,0 +1,36 @@
+import { Transaction, TransactionType } from '@/features/transactions/models'
+import { flattenInnerTransactions } from '@/utils/flatten-inner-transactions'
+import { Address } from '../data/types'
+
+export const extractTransactionsForAccount = (transaction: Transaction, address: Address) => {
+  const flattenedTransactions = flattenInnerTransactions(transaction)
+  const results = []
+
+  for (const { transaction } of flattenedTransactions) {
+    if (flattenedTransactions.length === 1) {
+      results.push(transaction)
+    } else {
+      if (transaction.sender === address) {
+        results.push(transaction)
+      } else if (
+        (transaction.type === TransactionType.Payment || transaction.type === TransactionType.AssetTransfer) &&
+        (transaction.receiver === address || transaction.closeRemainder?.to === address)
+      ) {
+        results.push(transaction)
+      } else if (
+        transaction.type === TransactionType.AssetConfig &&
+        (transaction.manager === address ||
+          transaction.clawback === address ||
+          transaction.reserve === address ||
+          transaction.freeze === address)
+      ) {
+        results.push(transaction)
+      } else if (transaction.type === TransactionType.AssetTransfer && transaction.clawbackFrom === address) {
+        results.push(transaction)
+      } else if (transaction.type === TransactionType.AssetFreeze && transaction.address === address) {
+        results.push(transaction)
+      }
+    }
+  }
+  return results
+}

src/features/transactions/models/index.ts

@@ -173,11 +173,11 @@ export type BaseAssetConfigTransaction = CommonTransactionProperties & {
   total?: number | bigint
   decimals?: number | bigint
   unitName?: string
-  clawback?: string
+  clawback?: Address
   subType: AssetConfigTransactionSubType
-  manager?: string
-  reserve?: string
-  freeze?: string
+  manager?: Address
+  reserve?: Address
+  freeze?: Address
   defaultFrozen?: boolean
 }