fix: bug with foreign assets and some layout fixes

Author: PatrickDinh

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

@@ -98,7 +98,7 @@ export function AppCallTransactionInfo({ transaction }: Props) {
   )
 
   return (
-    <>
+    <div className={cn('space-y-2')}>
       <DescriptionList items={items} />
 
       <Tabs defaultValue={applicationArgsTabId}>
@@ -114,52 +114,54 @@ export function AppCallTransactionInfo({ transaction }: Props) {
           ))}
         </TabsList>
         {tabs.map((tab) => (
-          <TabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border p-4')}>
-            {tab.children}
+          <TabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border')}>
+            <div className="grid">
+              <div className="overflow-auto p-4">{tab.children}</div>
+            </div>
           </TabsContent>
         ))}
       </Tabs>
-    </>
+    </div>
   )
 }
 
 function ApplicationArgs({ transaction }: Props) {
   return (
-    <div>
+    <>
       {transaction.applicationArgs.map((data, index) => (
         <div key={index}>{data}</div>
       ))}
-    </div>
+    </>
   )
 }
 
 function ForeignAccounts({ transaction }: Props) {
   return (
-    <div>
+    <>
       {transaction.applicationAccounts.map((data, index) => (
         <div key={index}>{data}</div>
       ))}
-    </div>
+    </>
   )
 }
 
 function ForeignApplications({ transaction }: Props) {
   return (
-    <div>
+    <>
       {transaction.foreignApps.map((data, index) => (
         <div key={index}>{data}</div>
       ))}
-    </div>
+    </>
   )
 }
 
 function ForeignAssets({ transaction }: Props) {
   return (
-    <div>
+    <>
       {transaction.foreignAssets.map((data, index) => (
         <div key={index}>{data}</div>
       ))}
-    </div>
+    </>
   )
 }
 

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

@@ -30,12 +30,12 @@ export function AppCallTransactionLogs({ logs }: Props) {
             {textLogsTabLabel}
           </TabsTrigger>
         </TabsList>
-        <TabsContent value={base64LogTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>
+        <TabsContent value={base64LogTabId} className={cn('border-solid border-2 p-4')}>
           {logs.map((log, index) => (
             <div key={index}>{log}</div>
           ))}
         </TabsContent>
-        <TabsContent value={textLogTabId} className={cn('border-solid border-2 border-border h-60 p-4')}>
+        <TabsContent value={textLogTabId} className={cn('border-solid border-2 p-4')}>
           {texts.map((text, index) => (
             <div key={index}>{text}</div>
           ))}

src/features/transactions/data/index.ts

@@ -13,6 +13,7 @@ import { JotaiStore } from '@/features/common/data/types'
 import { asTransactionModel } from '../mappers/transaction-mappers'
 import { getAssetAtomBuilder, getAssetsAtomBuilder } from '@/features/assets/data'
 import { InnerTransactionModel, TransactionModel, TransactionType as TransactionTypeModel } from '../models'
+import { getAssetIdsForTransaction } from '../utils/get-asset-ids-for-app-call-transaction'
 
 // TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
 export const transactionsAtom = atom<Map<TransactionId, TransactionResult>>(new Map())
@@ -67,7 +68,7 @@ export const fetchTransactionsModelAtomBuilder = (
           }
         }
         if (txn['tx-type'] === TransactionType.appl && txn['application-transaction']) {
-          const assetIds = txn['application-transaction']['foreign-assets'] ?? []
+          const assetIds = getAssetIdsForTransaction(txn)
           assetIds.forEach((assetId) => {
             if (!acc.has(assetId)) {
               acc.add(assetId)

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

@@ -36,7 +36,7 @@ const mapCommonAppCallTransactionProperties = (
       transactionResult['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, assets)
+        return asInnerTransactionModel(networkTransactionId, innerId, innerTransaction, assets)
       }) ?? [],
     onCompletion: asAppCallOnComplete(transactionResult['application-transaction']['on-completion']),
     action: transactionResult['application-transaction']['application-id'] ? 'Call' : 'Create',
@@ -82,7 +82,7 @@ const asAppCallOnComplete = (indexerEnum: ApplicationOnComplete): AppCallOnCompl
   }
 }
 
-const asInnerTransactionMode = (networkTransactionId: string, index: string, transactionResult: TransactionResult, assets: Asset[]) => {
+const asInnerTransactionModel = (networkTransactionId: string, index: string, transactionResult: TransactionResult, assets: Asset[]) => {
   if (transactionResult['tx-type'] === AlgoSdkTransactionType.pay) {
     return asInnerPaymentTransaction(networkTransactionId, index, transactionResult)
   }

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

@@ -8,6 +8,7 @@ import { asAssetTransferTransaction } from './asset-transfer-transaction-mappers
 import { asPaymentTransaction } from './payment-transaction-mappers'
 import { asPlaceholderTransaction } from './placeholder-transaction-mappers'
 import { Asset } from '@/features/assets/models'
+import { getAssetIdsForTransaction } from '../utils/get-asset-ids-for-app-call-transaction'
 
 export const asTransactionModel = async (
   transactionResult: TransactionResult,
@@ -24,9 +25,8 @@ export const asTransactionModel = async (
     }
     case algosdk.TransactionType.appl: {
       invariant(transactionResult['application-transaction'], 'application-transaction is not set')
-      const assetIds = transactionResult['application-transaction']['foreign-assets'] ?? []
-      const uniqueAssetIds = Array.from(new Set(assetIds))
-      const assets = await Promise.all(uniqueAssetIds.map((assetId) => assetResolver(assetId)))
+      const assetIds = Array.from(new Set(getAssetIdsForTransaction(transactionResult)))
+      const assets = await Promise.all(assetIds.map((assetId) => assetResolver(assetId)))
       return asAppCallTransaction(transactionResult, assets)
     }
     default:

src/features/transactions/pages/transaction-page.test.tsx

@@ -59,6 +59,7 @@ import { base64LogsTabLabel, logsLabel, textLogsTabLabel } from '../components/a
 import { InnerTransactionPage } from './inner-transaction-page'
 import { base64ToUtf8 } from '@/utils/base64-to-utf8'
 import { textListAssertion } from '@/tests/assertions/text-list-assertion'
+import { AssetResult } from '@algorandfoundation/algokit-utils/types/indexer'
 
 describe('transaction-page', () => {
   describe('when rendering a transaction with an invalid id', () => {
@@ -688,7 +689,10 @@ describe('transaction-page', () => {
       vi.mocked(useParams).mockImplementation(() => ({ transactionId: transaction.id, innerTransactionId: '2' }))
       const myStore = createStore()
       myStore.set(transactionsAtom, new Map([[transaction.id, transaction]]))
-      myStore.set(assetsAtom, new Map(assets.map((a) => [a.index, a])))
+      myStore.set(
+        assetsAtom,
+        new Map([[algoAssetResult.index, algoAssetResult], ...assets.map<[number, AssetResult]>((a) => [a.index, a])])
+      )
 
       return executeComponentTest(
         () => {
@@ -797,4 +801,37 @@ describe('transaction-page', () => {
       )
     })
   })
+
+  describe('when rendering an app call transaction that has no foreign assets but has an inner asset transfer transaction', () => {
+    const asset = assetResultMother['mainnet-312769']().build()
+    const innerAssetTransferTransaction = transactionResultMother.transfer(asset).build()
+    const transaction = transactionResultMother.appCall()['withInner-txns']([innerAssetTransferTransaction]).build()
+
+    it('should be rendered without error', () => {
+      vi.mocked(useParams).mockImplementation(() => ({ transactionId: transaction.id }))
+      const myStore = createStore()
+      myStore.set(transactionsAtom, new Map([[transaction.id, transaction]]))
+      myStore.set(
+        assetsAtom,
+        new Map([
+          [algoAssetResult.index, algoAssetResult],
+          [asset.index, asset],
+        ])
+      )
+
+      return executeComponentTest(
+        () => {
+          return render(<TransactionPage />, undefined, myStore)
+        },
+        async (component) => {
+          await waitFor(() => {
+            descriptionListAssertion({
+              container: component.container,
+              items: [{ term: transactionIdLabel, description: transaction.id }],
+            })
+          })
+        }
+      )
+    })
+  })
 })

src/features/transactions/utils/get-asset-ids-for-app-call-transaction.ts

@@ -0,0 +1,26 @@
+import algosdk from 'algosdk'
+import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { invariant } from '@/utils/invariant'
+
+export const getAssetIdsForTransaction = (transaction: TransactionResult): number[] => {
+  // TODO: as we add more transaction types, we have to add more cases here
+  if (transaction['tx-type'] === algosdk.TransactionType.axfer) {
+    invariant(transaction['asset-transfer-transaction'], 'asset-transfer-transaction is not set')
+
+    return [transaction['asset-transfer-transaction']['asset-id']]
+  }
+  if (transaction['tx-type'] === algosdk.TransactionType.appl) {
+    invariant(transaction['application-transaction'], 'application-transaction is not set')
+
+    const innerTransactions = transaction['inner-txns'] ?? []
+    return innerTransactions.reduce(
+      (acc, innerTxn) => {
+        const innerResult = getAssetIdsForTransaction(innerTxn)
+        return acc.concat(innerResult)
+      },
+      transaction['application-transaction']['foreign-assets'] ?? ([] as number[])
+    )
+  }
+
+  return []
+}

src/tests/builders/transaction-result-builder.ts

@@ -7,7 +7,7 @@ import {
   randomDateBetween,
   randomNumberBetween,
 } from '@makerx/ts-dossier'
-import { AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { ApplicationTransactionResult, AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import algosdk from 'algosdk'
 
 export class TransactionResultBuilder extends DataBuilder<TransactionResult> {
@@ -51,6 +51,14 @@ export class TransactionResultBuilder extends DataBuilder<TransactionResult> {
     }
     return this
   }
+
+  public appCallTransaction() {
+    this.thing['tx-type'] = algosdk.TransactionType.appl
+    this.thing['application-transaction'] = {
+      'application-id': randomNumber(),
+    } as ApplicationTransactionResult
+    return this
+  }
 }
 
 export const transactionResultBuilder = dossierProxy<TransactionResultBuilder, TransactionResult>(TransactionResultBuilder)

src/tests/object-mother/transaction-result.ts

@@ -9,6 +9,9 @@ export const transactionResultMother = {
   transfer: (asset: AssetResult) => {
     return transactionResultBuilder().transferTransaction(asset)
   },
+  appCall: () => {
+    return transactionResultBuilder().appCallTransaction()
+  },
   multisig: () => {
     return transactionResultBuilder()
       .paymentTransaction()