fix: handle a deleted asset (#21)

* fix: handle a deleted asset

Author: neilcampbell

src/features/assets/data/index.ts

@@ -6,6 +6,22 @@ import { loadable } from 'jotai/utils'
 import { JotaiStore } from '@/features/common/data/types'
 import { indexer } from '@/features/common/data'
 import { AssetIndex } from './types'
+import { ZERO_ADDRESS } from '@/features/common/constants'
+import { asError, is404 } from '@/utils/error'
+
+const deletedAssetBuilder = (assetIndex: AssetIndex) => {
+  return {
+    index: assetIndex,
+    deleted: true,
+    params: {
+      creator: ZERO_ADDRESS,
+      decimals: 0,
+      total: 0,
+      name: 'DELETED',
+      'unit-name': 'DELETED',
+    },
+  } as AssetResult
+}
 
 // TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
 export const assetsAtom = atom<Map<AssetIndex, AssetResult>>(new Map())
@@ -38,6 +54,12 @@ export const fetchAssetAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex)
       .then((result) => {
         return (result as AssetLookupResult).asset
       })
+      .catch((e: unknown) => {
+        if (is404(asError(e))) {
+          return deletedAssetBuilder(assetIndex)
+        }
+        throw e
+      })
   })
   return assetAtom
 }

src/features/blocks/pages/block-page.tsx

@@ -5,12 +5,13 @@ import { useLoadableBlockModel } from '../data'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
 import { cn } from '@/features/common/utils'
 import { Block } from '../components/block'
+import { is404 } from '@/utils/error'
 
 const validRoundRegex = /^\d+$/
 const isValidRound = (round: string) => round.match(validRoundRegex)
 
 const transformError = (e: Error) => {
-  if ('status' in e && e.status === 404) {
+  if (is404(e)) {
     return new Error(blockNotFoundMessage)
   }
 

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

@@ -15,7 +15,7 @@ import { transactionsAtom } from '../data'
 import { lookupTransactionById } from '@algorandfoundation/algokit-utils'
 import { HttpError } from '@/tests/errors'
 import { base64LogicsigTabLabel, tealLogicsigTabLabel, logicsigLabel } from '../components/logicsig'
-import { algod } from '@/features/common/data'
+import { algod, indexer } from '@/features/common/data'
 import {
   tableTransactionDetailsTabLabel,
   transactionDetailsLabel,
@@ -427,7 +427,7 @@ describe('transaction-page', () => {
     })
   })
 
-  describe('when rendering a asset transfer transaction', () => {
+  describe('when rendering an asset transfer transaction', () => {
     const transaction = transactionResultMother['mainnet-V7GQPE5TDMB4BIW2GCTPCBMXYMCF3HQGLYOYHGWP256GQHN5QAXQ']().build()
     const asset = assetResultMother['mainnet-140479105']().build()
 
@@ -490,7 +490,7 @@ describe('transaction-page', () => {
     })
   })
 
-  describe('when rendering a asset opt-in transaction', () => {
+  describe('when rendering an asset opt-in transaction', () => {
     const transaction = transactionResultMother['mainnet-563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA']().build()
     const asset = assetResultMother['mainnet-312769']().build()
 
@@ -515,7 +515,7 @@ describe('transaction-page', () => {
     })
   })
 
-  describe('when rendering a asset clawback transaction', () => {
+  describe('when rendering an asset clawback transaction', () => {
     const transaction = transactionResultMother['testnet-VIXTUMAPT7NR4RB2WVOGMETW4QY43KIDA3HWDWWXS3UEDKGTEECQ']().build()
     const asset = assetResultMother['testnet-642327435']().build()
 
@@ -549,4 +549,64 @@ describe('transaction-page', () => {
       )
     })
   })
+
+  describe('when rendering an asset transfer transaction for a deleted asset', () => {
+    const transaction = transactionResultMother['mainnet-UFYPQDLWCVK3L5XVVHE7WBQWTW4YMHHKZSDIWXXV2AGCS646HTQA']().build()
+    // const asset = assetResultMother['mainnet-140479105']().build()
+
+    it('should be rendered with the correct data', () => {
+      vi.mocked(useParams).mockImplementation(() => ({ transactionId: transaction.id }))
+      vi.mocked(indexer.lookupAssetByID(0).do).mockImplementation(() => Promise.reject(new HttpError('boom', 404)))
+      const myStore = createStore()
+      myStore.set(transactionsAtom, new Map([[transaction.id, transaction]]))
+
+      return executeComponentTest(
+        () => {
+          return render(<TransactionPage />, undefined, myStore)
+        },
+        async (component, user) => {
+          // waitFor the loading state to be finished
+          await waitFor(() => expect(getByDescriptionTerm(component.container, transactionIdLabel).textContent).toBe(transaction.id))
+          const transactionTypeDescription = getByDescriptionTerm(component.container, transactionTypeLabel).textContent
+          expect(transactionTypeDescription).toContain('Asset Transfer')
+          expect(getByDescriptionTerm(component.container, transactionTimestampLabel).textContent).toBe('Wed, 17 April 2024 05:39:26')
+          expect(getByDescriptionTerm(component.container, transactionBlockLabel).textContent).toBe('38008738')
+          expect(getByDescriptionTerm(component.container, transactionGroupLabel).textContent).toBe(
+            'XeNQmhxvtoWpue/7SAk6RNfuu/8Fp8tw8Nfn+HnIz00='
+          )
+
+          expect(getByDescriptionTerm(component.container, transactionFeeLabel).textContent).toBe('0.001')
+
+          expect(getByDescriptionTerm(component.container, transactionSenderLabel).textContent).toBe(
+            'QUESTA6XV2JZ2XAV3EK3GKBHYCJO57JWUX6L6ENHGNLR6UE3OPCUCT2WLI'
+          )
+          expect(getByDescriptionTerm(component.container, transactionReceiverLabel).textContent).toBe(
+            'JQ76KXBOL3Z2EKRW43OPHOHKBZJQUULDAH33IIWDX2UWEYEMTKSX2PRS54'
+          )
+          expect(getByDescriptionTerm(component.container, assetLabel).textContent).toBe('1753701469 (DELETED)')
+          expect(getByDescriptionTerm(component.container, transactionAmountLabel).textContent).toBe('1 DELETED')
+
+          const viewTransactionTabList = component.getByRole('tablist', { name: transactionDetailsLabel })
+          expect(viewTransactionTabList).toBeTruthy()
+          expect(
+            component.getByRole('tabpanel', { name: visualTransactionDetailsTabLabel }).getAttribute('data-state'),
+            'Visual tab should be active'
+          ).toBe('active')
+
+          // After click on the Table tab
+          await user.click(getByRole(viewTransactionTabList, 'tab', { name: tableTransactionDetailsTabLabel }))
+          const tableViewTab = component.getByRole('tabpanel', { name: tableTransactionDetailsTabLabel })
+          await waitFor(() => expect(tableViewTab.getAttribute('data-state'), 'Table tab should be active').toBe('active'))
+
+          // Test the table data
+          const dataRow = getAllByRole(tableViewTab, 'row')[1]
+          expect(getAllByRole(dataRow, 'cell')[0].textContent).toBe('UFYPQDL...')
+          expect(getAllByRole(dataRow, 'cell')[1].textContent).toBe('QUES...2WLI')
+          expect(getAllByRole(dataRow, 'cell')[2].textContent).toBe('JQ76...RS54')
+          expect(getAllByRole(dataRow, 'cell')[3].textContent).toBe('Asset Transfer')
+          expect(getAllByRole(dataRow, 'cell')[4].textContent).toBe('1 DELETED')
+        }
+      )
+    })
+  })
 })

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

@@ -5,11 +5,12 @@ import { Transaction } from '../components/transaction'
 import { useLoadableTransactionModelAtom } from '../data'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
 import { cn } from '@/features/common/utils'
+import { is404 } from '@/utils/error'
 
 const isValidTransactionId = (transactionId: string) => transactionId.length === 52
 
 const transformError = (e: Error) => {
-  if ('status' in e && e.status === 404) {
+  if (is404(e)) {
     return new Error(transactionNotFoundMessage)
   }
 

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

@@ -1,4 +1,4 @@
-import { AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { AssetResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { TransactionResultBuilder, transactionResultBuilder } from '../builders/transaction-result-builder'
 import { TransactionType } from 'algosdk'
 
@@ -66,7 +66,7 @@ export const transactionResultMother = {
         sig: '4cwwpWiOnldnkW+M8Epwg2iaJvxdIvnUa9jM+uZxRcBTESRCD/BcsvbPVYrqEf6YwGCtsupNbNo6SwdUQRa2CQ==',
       },
       'tx-type': TransactionType.pay,
-    } satisfies TransactionResult)
+    })
   },
   ['mainnet-ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA']: () => {
     // Payment transaction:
@@ -101,7 +101,7 @@ export const transactionResultMother = {
         },
       },
       'tx-type': TransactionType.pay,
-    } satisfies TransactionResult)
+    })
   },
   ['mainnet-JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA']: () => {
     // Asset transfer transaction
@@ -132,7 +132,7 @@ export const transactionResultMother = {
         sig: 'hk4FtHwulzfGDFq13MFsJfVS4UVdQAGhqFvsp9CjF9F6dD3V/P0XtW4V3cv2l8u0M1TDQoUsNbueW+SaQbD7DA==',
       },
       'tx-type': TransactionType.axfer,
-    } satisfies TransactionResult)
+    })
   },
   ['mainnet-V7GQPE5TDMB4BIW2GCTPCBMXYMCF3HQGLYOYHGWP256GQHN5QAXQ']: () => {
     // Asset transfer transaction with close remainder. It is an asset opt-out transaction.
@@ -161,7 +161,7 @@ export const transactionResultMother = {
         sig: 'fK9vks0Sk2Sfa0PN+9wHSYYh2OKCFxSGBN2B4agVmVNoui17XcwXj4DbLJZWoknbVH/0gaKweKEYMIz4Oe8tDw==',
       },
       'tx-type': TransactionType.axfer,
-    } satisfies TransactionResult)
+    })
   },
   ['mainnet-563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA']: () => {
     // Asset opt-in
@@ -189,9 +189,38 @@ export const transactionResultMother = {
       'sender-rewards': 0,
       signature: { sig: 'eXs6In2s6DdoRIBHLesRRS9BX+UWykWX4YGPuTdOLJTn33NXM5paD7kZiB+4FQ27a+F7W2QEWJYU8QEzDHTVAQ==' },
       'tx-type': TransactionType.axfer,
-    } satisfies TransactionResult)
+    })
+  },
+  ['mainnet-UFYPQDLWCVK3L5XVVHE7WBQWTW4YMHHKZSDIWXXV2AGCS646HTQA']: () => {
+    return new TransactionResultBuilder({
+      'asset-transfer-transaction': {
+        amount: 1,
+        'asset-id': 1753701469,
+        'close-amount': 0,
+        receiver: 'JQ76KXBOL3Z2EKRW43OPHOHKBZJQUULDAH33IIWDX2UWEYEMTKSX2PRS54',
+      },
+      'auth-addr': '7R7I3FN4ACXN2CEU5WPDZJZR475OYQP43QESNXA3NDC4SUQZZSI5OGCVME',
+      'close-rewards': 0,
+      'closing-amount': 0,
+      'confirmed-round': 38008738,
+      fee: 1000,
+      'first-valid': 38008732,
+      'genesis-hash': 'wGHE2Pwdvd7S12BL5FaOP20EGYesN73ktiC1qzkkit8=',
+      'genesis-id': 'mainnet-v1.0',
+      group: 'XeNQmhxvtoWpue/7SAk6RNfuu/8Fp8tw8Nfn+HnIz00=',
+      id: 'UFYPQDLWCVK3L5XVVHE7WBQWTW4YMHHKZSDIWXXV2AGCS646HTQA',
+      'intra-round-offset': 16,
+      'last-valid': 38009732,
+      'receiver-rewards': 0,
+      'round-time': 1713332366,
+      sender: 'QUESTA6XV2JZ2XAV3EK3GKBHYCJO57JWUX6L6ENHGNLR6UE3OPCUCT2WLI',
+      'sender-rewards': 0,
+      signature: {
+        sig: '2+WUUuw7ZHKjBFx3/ct+rdGQK/sv0u5ZSCN3+cnEE2KtvSbAMN3HYJaId9+tCWTlThGwHU0po4aCn1zFSh8hBg==',
+      },
+      'tx-type': TransactionType.axfer,
+    })
   },
-
   ['testnet-VIXTUMAPT7NR4RB2WVOGMETW4QY43KIDA3HWDWWXS3UEDKGTEECQ']: () => {
     // Asset clawback
     return new TransactionResultBuilder({
@@ -219,6 +248,6 @@ export const transactionResultMother = {
       'sender-rewards': 0,
       signature: { sig: 'LYTng1fmA+JQ8AocqDfp/OBvrds/WXa936muT3b4Ym98qIzouEnbMf7cOj099GV+ABecBzmw6+JrzOH/WU7TDQ==' },
       'tx-type': TransactionType.axfer,
-    } satisfies TransactionResult)
+    })
   },
 }

src/tests/setup/mocks.ts

@@ -28,6 +28,9 @@ vi.mock('@/features/common/data', async () => {
       lookupBlock: vi.fn().mockReturnValue({
         do: vi.fn(),
       }),
+      lookupAssetByID: vi.fn().mockReturnValue({
+        do: vi.fn(),
+      }),
     },
   }
 })

src/utils/error.ts

@@ -1,3 +1,5 @@
 export const asError = (error: unknown) => {
   return error instanceof Error ? error : new Error(String(error))
 }
+
+export const is404 = (error: Error) => 'status' in error && error.status === 404