chore: refactor transaction mappers + tests

Author: PatrickDinh

src/features/transactions/components/__snapshots__/application-transaction-view-visual.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html

@@ -1,33 +1,33 @@
 import { cn } from '@/features/common/utils'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs'
 import { useMemo } from 'react'
-import { Buffer } from 'buffer'
+import { base64ToUtf8 } from '@/utils/base64-to-utf8'
 
 type Props = {
   logs: string[]
 }
 
-const logLabel = 'View Logs'
+export const logsLabel = 'View Logs'
 const base64LogTabId = 'base64'
-const base64LogTabLabel = 'Base64'
+export const base64LogsTabLabel = 'Base64'
 const textLogTabId = 'text'
-const textLogTabLabel = 'UTF-8'
+export const textLogsTabLabel = 'UTF-8'
 
 export function AppCallTransactionLogs({ logs }: Props) {
   const texts = useMemo(() => {
-    return logs.map((log) => Buffer.from(log, 'base64').toString('utf-8'))
+    return logs.map((log) => base64ToUtf8(log))
   }, [logs])
 
   return (
     <div className={cn('space-y-2')}>
       <h2 className={cn('text-xl font-bold')}>Logs</h2>
       <Tabs defaultValue={base64LogTabId}>
-        <TabsList aria-label={logLabel}>
+        <TabsList aria-label={logsLabel}>
           <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={base64LogTabId}>
-            {base64LogTabLabel}
+            {base64LogsTabLabel}
           </TabsTrigger>
           <TabsTrigger className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-32')} value={textLogTabId}>
-            {textLogTabLabel}
+            {textLogsTabLabel}
           </TabsTrigger>
         </TabsList>
         <TabsContent value={base64LogTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>

src/features/transactions/components/app-call-transaction-log.tsx renamed to src/features/transactions/components/app-call-transaction-logs.tsx

@@ -8,7 +8,7 @@ import { TransactionNote } from './transaction-note'
 import { AppCallTransactionModel, InnerAppCallTransactionModel, SignatureType } from '../models'
 import { TransactionViewTabs } from './transaction-view-tabs'
 import { AppCallTransactionInfo } from './app-call-transaction-info'
-import { AppCallTransactionLogs } from './app-call-transaction-log'
+import { AppCallTransactionLogs } from './app-call-transaction-logs'
 
 type Props = {
   transaction: AppCallTransactionModel | InnerAppCallTransactionModel

src/features/transactions/components/app-call-transaction.tsx

@@ -2,8 +2,8 @@ import { cn } from '@/features/common/utils'
 import { Arc2TransactionNote } from '@algorandfoundation/algokit-utils/types/transaction'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs'
 import { useMemo } from 'react'
-import { Buffer } from 'buffer'
 import { DescriptionList } from '@/features/common/components/description-list'
+import { base64ToUtf8 } from '@/utils/base64-to-utf8'
 
 type TransactionNoteProps = {
   note: string
@@ -52,7 +52,7 @@ const arc2FormatLabels = {
 
 export function TransactionNote({ note }: TransactionNoteProps) {
   const [text, json, arc2, activeTabId] = useMemo(() => {
-    const text = Buffer.from(note, 'base64').toString('utf-8')
+    const text = base64ToUtf8(note)
     const maybeJson = parseJson(text)
     const maybeArc2 = parseArc2(text)
     const activeTabId = maybeArc2 ? arc2NoteTabId : maybeJson ? jsonNoteTabId : base64NoteTabId

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

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { TransactionViewVisual } from './transaction-view-visual'
 import { executeComponentTest } from '@/tests/test-component'
 import { render, prettyDOM } from '@/tests/testing-library'
-import { asAppCallTransaction, asAssetTransferTransaction, asPaymentTransaction } from '../mappers/transaction-mappers'
+import { asAppCallTransaction, asAssetTransferTransaction, asPaymentTransaction } from '../mappers'
 import { AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { assetResultMother } from '@/tests/object-mother/asset-result'
 import { useParams } from 'react-router-dom'
@@ -70,19 +70,32 @@ describe('asset-transfer-transaction-view-visual', () => {
 })
 
 describe('application-call-view-visual', () => {
-  describe.each([{ transactionResult: transactionResultMother['mainnet-KMNBSQ4ZFX252G7S4VYR4ZDZ3RXIET5CNYQVJUO5OXXPMHAMJCCQ']().build() }])(
+  describe.each([
+    {
+      transactionResult: transactionResultMother['mainnet-KMNBSQ4ZFX252G7S4VYR4ZDZ3RXIET5CNYQVJUO5OXXPMHAMJCCQ']().build(),
+      assetResults: [],
+    },
+    {
+      transactionResult: transactionResultMother['mainnet-INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA']().build(),
+      assetResults: [
+        assetResultMother['mainnet-31566704']().build(),
+        assetResultMother['mainnet-386195940']().build(),
+        assetResultMother['mainnet-408898501']().build(),
+      ],
+    },
+  ])(
     'when rendering transaction $transactionResult.id',
-    ({ transactionResult: transaction }: { transactionResult: TransactionResult }) => {
+    ({ transactionResult, assetResults }: { transactionResult: TransactionResult; assetResults: AssetResult[] }) => {
       it('should match snapshot', () => {
-        vi.mocked(useParams).mockImplementation(() => ({ transactionId: transaction.id }))
+        vi.mocked(useParams).mockImplementation(() => ({ transactionId: transactionResult.id }))
 
-        const model = asAppCallTransaction(transaction, [])
+        const model = asAppCallTransaction(transactionResult, assetResults)
 
         return executeComponentTest(
           () => render(<TransactionViewVisual transaction={model} />),
           async (component) => {
             expect(prettyDOM(component.container, prettyDomMaxLength, { highlight: false })).toMatchFileSnapshot(
-              `__snapshots__/application-transaction-view-visual.${transaction.id}.html`
+              `__snapshots__/application-transaction-view-visual.${transactionResult.id}.html`
             )
           }
         )

src/features/transactions/components/transaction-view-visual.test.tsx

@@ -0,0 +1,106 @@
+import { ApplicationOnComplete, AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import {
+  AppCallOnComplete,
+  AppCallTransactionModel,
+  BaseAppCallTransactionModel,
+  InnerAppCallTransactionModel,
+  TransactionType,
+} from '../models'
+import { invariant } from '@/utils/invariant'
+import { IndexerGlobalStateDelta, IndexerLocalStateDelta, asGlobalStateDelta, asLocalStateDelta } from './state-delta-mappers'
+import { mapCommonTransactionProperties, asInnerTransactionId } from './transaction-common-properties-mappers'
+import { TransactionType as AlgoSdkTransactionType } from 'algosdk'
+import { asInnerPaymentTransaction } from './payment-transaction-mappers'
+import { asInnerAssetTransferTransactionModel } from './asset-transfer-transaction-mappers'
+
+const mapCommonAppCallTransactionProperties = (
+  networkTransactionId: string,
+  transaction: TransactionResult,
+  assetResults: AssetResult[],
+  indexPrefix?: string
+) => {
+  invariant(transaction['application-transaction'], 'application-transaction is not set')
+
+  return {
+    ...mapCommonTransactionProperties(transaction),
+    type: TransactionType.ApplicationCall,
+    applicationId: transaction['application-transaction']['application-id'],
+    applicationArgs: transaction['application-transaction']['application-args'] ?? [],
+    applicationAccounts: transaction['application-transaction'].accounts ?? [],
+    foreignApps: transaction['application-transaction']['foreign-apps'] ?? [],
+    foreignAssets: transaction['application-transaction']['foreign-assets'] ?? [],
+    globalStateDeltas: asGlobalStateDelta(transaction['global-state-delta'] as unknown as IndexerGlobalStateDelta[]),
+    localStateDeltas: asLocalStateDelta(transaction['local-state-delta'] as unknown as IndexerLocalStateDelta[]),
+    innerTransactions:
+      transaction['inner-txns']?.map((innerTransaction, index) => {
+        // Generate a unique id for the inner transaction
+        const innerId = indexPrefix ? `${indexPrefix}-${index + 1}` : `${index + 1}`
+        return asInnerTransactionMode(networkTransactionId, innerId, innerTransaction, assetResults)
+      }) ?? [],
+    onCompletion: asAppCallOnComplete(transaction['application-transaction']['on-completion']),
+    action: transaction['application-transaction']['application-id'] ? 'Call' : 'Create',
+    logs: transaction['logs'] ?? [],
+  } satisfies BaseAppCallTransactionModel
+}
+
+export const asAppCallTransaction = (transaction: TransactionResult, assetResults: AssetResult[]): AppCallTransactionModel => {
+  const commonProperties = mapCommonAppCallTransactionProperties(transaction.id, transaction, assetResults)
+
+  return {
+    id: transaction.id,
+    ...commonProperties,
+  }
+}
+
+export const asInnerAppCallTransaction = (
+  networkTransactionId: string,
+  index: string,
+  transaction: TransactionResult,
+  assetResults: AssetResult[]
+): InnerAppCallTransactionModel => {
+  return {
+    ...asInnerTransactionId(networkTransactionId, index),
+    ...mapCommonAppCallTransactionProperties(networkTransactionId, transaction, assetResults, `${index}`),
+  }
+}
+
+const asAppCallOnComplete = (indexerEnum: ApplicationOnComplete): AppCallOnComplete => {
+  switch (indexerEnum) {
+    case ApplicationOnComplete.noop:
+      return AppCallOnComplete.NoOp
+    case ApplicationOnComplete.optin:
+      return AppCallOnComplete.OptIn
+    case ApplicationOnComplete.closeout:
+      return AppCallOnComplete.CloseOut
+    case ApplicationOnComplete.clear:
+      return AppCallOnComplete.ClearState
+    case ApplicationOnComplete.update:
+      return AppCallOnComplete.Update
+    case ApplicationOnComplete.delete:
+      return AppCallOnComplete.Delete
+  }
+}
+
+const asInnerTransactionMode = (
+  networkTransactionId: string,
+  index: string,
+  transaction: TransactionResult,
+  assetResults: AssetResult[]
+) => {
+  if (transaction['tx-type'] === AlgoSdkTransactionType.pay) {
+    return asInnerPaymentTransaction(networkTransactionId, index, transaction)
+  }
+  if (transaction['tx-type'] === AlgoSdkTransactionType.axfer) {
+    invariant(transaction['asset-transfer-transaction'], 'asset-transfer-transaction is not set')
+    const assetResult = assetResults.find((asset) => asset.index === transaction['asset-transfer-transaction']!['asset-id'])
+    invariant(assetResult, `Asset index ${transaction['asset-transfer-transaction']!['asset-id']} not found in cache`)
+
+    return asInnerAssetTransferTransactionModel(networkTransactionId, index, transaction, assetResult)
+  }
+  if (transaction['tx-type'] === AlgoSdkTransactionType.appl) {
+    return asInnerAppCallTransaction(networkTransactionId, index, transaction, assetResults)
+  }
+
+  // This could be dangerous as we haven't implemented all the transaction types
+  throw new Error(`Unsupported inner transaction type: ${transaction['tx-type']}`)
+}

src/features/transactions/mappers/app-call-transaction-mappers.ts

@@ -0,0 +1,74 @@
+import { AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import {
+  AssetTransferTransactionModel,
+  AssetTransferTransactionSubType,
+  BaseAssetTransferTransactionModel,
+  InnerAssetTransferTransactionModel,
+  TransactionType,
+} from '../models'
+import { invariant } from '@/utils/invariant'
+import { asAsset } from '@/features/assets/mappers/asset-mappers'
+import { ZERO_ADDRESS } from '@/features/common/constants'
+import { asInnerTransactionId, mapCommonTransactionProperties } from './transaction-common-properties-mappers'
+
+const mapCommonAssetTransferTransactionProperties = (transaction: TransactionResult, asset: AssetResult) => {
+  invariant(transaction['asset-transfer-transaction'], 'asset-transfer-transaction is not set')
+
+  const subType = () => {
+    invariant(transaction['asset-transfer-transaction'], 'asset-transfer-transaction is not set')
+
+    if (transaction['asset-transfer-transaction']['close-to']) {
+      return AssetTransferTransactionSubType.OptOut
+    }
+    if (
+      transaction.sender === transaction['asset-transfer-transaction'].receiver &&
+      transaction['asset-transfer-transaction'].amount === 0
+    ) {
+      return AssetTransferTransactionSubType.OptIn
+    }
+    if (
+      transaction.sender === asset.params.clawback &&
+      transaction['asset-transfer-transaction'].sender &&
+      transaction['asset-transfer-transaction'].sender !== ZERO_ADDRESS
+    ) {
+      return AssetTransferTransactionSubType.Clawback
+    }
+
+    undefined
+  }
+
+  return {
+    ...mapCommonTransactionProperties(transaction),
+    type: TransactionType.AssetTransfer,
+    subType: subType(),
+    asset: asAsset(asset),
+    receiver: transaction['asset-transfer-transaction'].receiver,
+    amount: transaction['asset-transfer-transaction'].amount,
+    closeRemainder: transaction['asset-transfer-transaction']['close-to']
+      ? {
+          to: transaction['asset-transfer-transaction']['close-to'],
+          amount: transaction['asset-transfer-transaction']['close-amount'] ?? 0,
+        }
+      : undefined,
+    clawbackFrom: transaction['asset-transfer-transaction'].sender,
+  } satisfies BaseAssetTransferTransactionModel
+}
+
+export const asAssetTransferTransaction = (transaction: TransactionResult, asset: AssetResult): AssetTransferTransactionModel => {
+  return {
+    id: transaction.id,
+    ...mapCommonAssetTransferTransactionProperties(transaction, asset),
+  }
+}
+
+export const asInnerAssetTransferTransactionModel = (
+  networkTransactionId: string,
+  index: string,
+  transaction: TransactionResult,
+  asset: AssetResult
+): InnerAssetTransferTransactionModel => {
+  return {
+    ...asInnerTransactionId(networkTransactionId, index),
+    ...mapCommonAssetTransferTransactionProperties(transaction, asset),
+  }
+}

src/features/transactions/mappers/asset-transfer-transaction-mappers.ts

@@ -0,0 +1,5 @@
+export * from './payment-transaction-mappers'
+export * from './placeholder-transaction-mappers'
+export * from './asset-transfer-transaction-mappers'
+export * from './app-call-transaction-mappers'
+export * from './transaction-mappers'

src/features/transactions/mappers/index.ts

@@ -0,0 +1,40 @@
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { BasePaymentTransactionModel, InnerPaymentTransactionModel, PaymentTransactionModel, TransactionType } from '../models'
+import { invariant } from '@/utils/invariant'
+import * as algokit from '@algorandfoundation/algokit-utils'
+import { asInnerTransactionId, mapCommonTransactionProperties } from './transaction-common-properties-mappers'
+
+const mapCommonPaymentTransactionProperties = (transaction: TransactionResult) => {
+  invariant(transaction['payment-transaction'], 'payment-transaction is not set')
+
+  return {
+    ...mapCommonTransactionProperties(transaction),
+    type: TransactionType.Payment,
+    receiver: transaction['payment-transaction']['receiver'],
+    amount: algokit.microAlgos(transaction['payment-transaction']['amount']),
+    closeRemainder: transaction['payment-transaction']['close-remainder-to']
+      ? {
+          to: transaction['payment-transaction']['close-remainder-to'],
+          amount: algokit.microAlgos(transaction['payment-transaction']['close-amount'] ?? 0),
+        }
+      : undefined,
+  } satisfies BasePaymentTransactionModel
+}
+
+export const asPaymentTransaction = (transaction: TransactionResult): PaymentTransactionModel => {
+  return {
+    id: transaction.id,
+    ...mapCommonPaymentTransactionProperties(transaction),
+  }
+}
+
+export const asInnerPaymentTransaction = (
+  networkTransactionId: string,
+  index: string,
+  transaction: TransactionResult
+): InnerPaymentTransactionModel => {
+  return {
+    ...asInnerTransactionId(networkTransactionId, index),
+    ...mapCommonPaymentTransactionProperties(transaction),
+  }
+}

src/features/transactions/mappers/payment-transaction-mappers.ts

@@ -0,0 +1,24 @@
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { PaymentTransactionModel, TransactionType } from '../models'
+import * as algokit from '@algorandfoundation/algokit-utils'
+import { ZERO_ADDRESS } from '@/features/common/constants'
+import { transformSignature } from './transaction-common-properties-mappers'
+
+// This creates a placeholder transaction for transactions that we don't support yet
+// TODO: Remove this code, once we support all transaction types
+export const asPlaceholderTransaction = (transaction: TransactionResult): PaymentTransactionModel => {
+  return {
+    id: transaction.id,
+    type: TransactionType.Payment,
+    confirmedRound: transaction['confirmed-round']!,
+    roundTime: transaction['round-time']! * 1000,
+    group: transaction['group'],
+    fee: algokit.microAlgos(transaction.fee),
+    sender: transaction.sender,
+    receiver: ZERO_ADDRESS,
+    amount: algokit.microAlgos(3141592),
+    signature: transformSignature(transaction.signature),
+    note: transaction.note,
+    json: '{ "placeholder": true }',
+  }
+}