chore: refactor assets based on latest discussions (#26)

Author: neilcampbell

src/features/assets/data/asset.ts

@@ -0,0 +1,67 @@
+import { indexer } from '@/features/common/data'
+import { AssetLookupResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { atom, useAtomValue, useStore } from 'jotai'
+import { JotaiStore } from '@/features/common/data/types'
+import { atomEffect } from 'jotai-effect'
+import { AssetIndex, assetsAtom } from '.'
+import { useMemo } from 'react'
+import { loadable } from 'jotai/utils'
+import { asAsset } from '../mappers'
+
+const fetchAssetResultAtomBuilder = (assetIndex: AssetIndex) =>
+  atom(async (_get) => {
+    return await indexer
+      .lookupAssetByID(assetIndex)
+      .includeAll(true)
+      .do()
+      .then((result) => {
+        return (result as AssetLookupResult).asset
+      })
+  })
+
+export const getAssetAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex) => {
+  const fetchAssetResultAtom = fetchAssetResultAtomBuilder(assetIndex)
+
+  const syncEffect = atomEffect((get, set) => {
+    ;(async () => {
+      try {
+        const assetResult = await get(fetchAssetResultAtom)
+        set(assetsAtom, (prev) => {
+          return prev.set(assetResult.index, assetResult)
+        })
+      } catch (e) {
+        // Ignore any errors as there is nothing to sync
+      }
+    })()
+  })
+
+  return atom(async (get) => {
+    const assets = store.get(assetsAtom)
+    const asset = assets.get(assetIndex)
+    if (asset) {
+      return asAsset(asset)
+    }
+
+    get(syncEffect)
+
+    const assetResult = await get(fetchAssetResultAtom)
+    return asAsset(assetResult)
+  })
+}
+
+export const getAssetsAtomBuilder = (store: JotaiStore, assetIndexes: AssetIndex[]) => {
+  return atom((get) => {
+    return Promise.all(assetIndexes.map((assetIndex) => get(getAssetAtomBuilder(store, assetIndex))))
+  })
+}
+
+export const useAssetAtom = (assetIndex: AssetIndex) => {
+  const store = useStore()
+  return useMemo(() => {
+    return getAssetAtomBuilder(store, assetIndex)
+  }, [store, assetIndex])
+}
+
+export const useLoadableAsset = (assetIndex: AssetIndex) => {
+  return useAtomValue(loadable(useAssetAtom(assetIndex)))
+}

src/features/assets/data/index.ts

@@ -1,82 +1,23 @@
-import { atom, useAtomValue, useStore } from 'jotai'
-import { useMemo } from 'react'
-import { AssetLookupResult, AssetResult } from '@algorandfoundation/algokit-utils/types/indexer'
-import { atomEffect } from 'jotai-effect'
-import { loadable } from 'jotai/utils'
-import { JotaiStore } from '@/features/common/data/types'
-import { indexer } from '@/features/common/data'
+import { atom } from 'jotai'
+import { AssetResult } from '@algorandfoundation/algokit-utils/types/indexer'
 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
-}
+export * from './types'
+export * from './asset'
 
 // TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
-export const assetsAtom = atom<Map<AssetIndex, AssetResult>>(new Map())
-
-export const fetchAssetAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex) => {
-  const syncEffect = atomEffect((get, set) => {
-    ;(async () => {
-      try {
-        const asset = await get(assetAtom)
-        set(assetsAtom, (prev) => {
-          return new Map([...prev, [asset.index, asset]])
-        })
-      } catch (e) {
-        // Ignore any errors as there is nothing to sync
-      }
-    })()
-  })
-  const assetAtom = atom((get) => {
-    const assets = store.get(assetsAtom)
-    const cachedAsset = assets.get(assetIndex)
-    if (cachedAsset) {
-      return cachedAsset
-    }
-
-    get(syncEffect)
-
-    return indexer
-      .lookupAssetByID(assetIndex)
-      .do()
-      .then((result) => {
-        return (result as AssetLookupResult).asset
-      })
-      .catch((e: unknown) => {
-        if (is404(asError(e))) {
-          return deletedAssetBuilder(assetIndex)
-        }
-        throw e
-      })
-  })
-  return assetAtom
-}
-
-export const fetchAssetsAtomBuilder = (store: JotaiStore, assetIndexes: AssetIndex[]) => {
-  return atom(async (get) => {
-    return await Promise.all(assetIndexes.map((assetIndex) => get(fetchAssetAtomBuilder(store, assetIndex))))
-  })
-}
-
-export const useAssetAtom = (assetIndex: AssetIndex) => {
-  const store = useStore()
-  return useMemo(() => {
-    return fetchAssetAtomBuilder(store, assetIndex)
-  }, [store, assetIndex])
-}
 
-export const useLoadableAsset = (assetIndex: AssetIndex) => {
-  return useAtomValue(loadable(useAssetAtom(assetIndex)))
-}
+export const algoAssetResult = {
+  index: 0,
+  'created-at-round': 0,
+  params: {
+    creator: ZERO_ADDRESS,
+    decimals: 6,
+    total: 10_000_000_000,
+    name: 'ALGO',
+    'unit-name': 'ALGO',
+    url: 'https://www.algorand.foundation',
+  },
+} as AssetResult
+
+export const assetsAtom = atom<Map<AssetIndex, AssetResult>>(new Map([[algoAssetResult.index, algoAssetResult]]))

src/features/assets/mappers/asset-mappers.ts renamed to src/features/assets/mappers/index.ts

@@ -1,12 +1,13 @@
 import { AssetResult } from '@algorandfoundation/algokit-utils/types/indexer'
-import { AssetModel } from '../models'
+import { Asset } from '../models'
 
-export const asAsset = (assetResult: AssetResult): AssetModel => {
+export const asAsset = (assetResult: AssetResult): Asset => {
   return {
     id: assetResult.index,
     name: assetResult.params.name,
     total: assetResult.params.total,
     decimals: assetResult.params.decimals,
     unitName: assetResult.params['unit-name'],
+    clawback: assetResult.params.clawback,
   }
 }

src/features/assets/models/index.ts

@@ -1,7 +1,8 @@
-export type AssetModel = {
+export type Asset = {
   id: number
   name?: string
   total: number | bigint
   decimals: number | bigint
   unitName?: string
+  clawback?: string
 }

src/features/common/components/display-asset-amount.tsx

@@ -1,10 +1,10 @@
-import { AssetModel } from '@/features/assets/models'
+import { Asset } from '@/features/assets/models'
 import { cn } from '../utils'
 import Decimal from 'decimal.js'
 
 type Props = {
   amount: number | bigint
-  asset: AssetModel
+  asset: Asset
   className?: string
 }
 

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

@@ -7,6 +7,7 @@ import { asAppCallTransaction, asAssetTransferTransaction, asPaymentTransaction
 import { AssetResult, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { assetResultMother } from '@/tests/object-mother/asset-result'
 import { useParams } from 'react-router-dom'
+import { asAsset } from '@/features/assets/mappers'
 
 // This file maintain the snapshot test for the TransactionViewVisual component
 // To add new test case:
@@ -24,15 +25,15 @@ describe('payment-transaction-view-visual', () => {
   describe.each([
     transactionResultMother['mainnet-FBORGSDC4ULLWHWZUMUFIYQLSDC26HGLTFD7EATQDY37FHCIYBBQ']().build(),
     transactionResultMother['mainnet-ILDCD5Z64CYSLEZIHBG5DVME2ITJI2DIVZAPDPEWPCYMTRA5SVGA']().build(),
-  ])('when rendering transaction $id', (transaction: TransactionResult) => {
+  ])('when rendering transaction $id', (transactionResult: TransactionResult) => {
     it('should match snapshot', () => {
-      const model = asPaymentTransaction(transaction)
+      const model = asPaymentTransaction(transactionResult)
 
       return executeComponentTest(
         () => render(<TransactionViewVisual transaction={model} />),
         async (component) => {
           expect(prettyDOM(component.container, prettyDomMaxLength, { highlight: false })).toMatchFileSnapshot(
-            `__snapshots__/payment-transaction-view-visual.${transaction.id}.html`
+            `__snapshots__/payment-transaction-view-visual.${transactionResult.id}.html`
           )
         }
       )
@@ -54,7 +55,7 @@ describe('asset-transfer-transaction-view-visual', () => {
     'when rendering transaction $transactionResult.id',
     ({ transactionResult, assetResult }: { transactionResult: TransactionResult; assetResult: AssetResult }) => {
       it('should match snapshot', () => {
-        const transaction = asAssetTransferTransaction(transactionResult, assetResult)
+        const transaction = asAssetTransferTransaction(transactionResult, asAsset(assetResult))
 
         return executeComponentTest(
           () => render(<TransactionViewVisual transaction={transaction} />),
@@ -89,7 +90,7 @@ describe('application-call-view-visual', () => {
       it('should match snapshot', () => {
         vi.mocked(useParams).mockImplementation(() => ({ transactionId: transactionResult.id }))
 
-        const model = asAppCallTransaction(transactionResult, assetResults)
+        const model = asAppCallTransaction(transactionResult, assetResults.map(asAsset))
 
         return executeComponentTest(
           () => render(<TransactionViewVisual transaction={model} />),

src/features/transactions/data/index.ts

@@ -11,7 +11,7 @@ import { TransactionId } from './types'
 import { indexer, algod } from '@/features/common/data'
 import { JotaiStore } from '@/features/common/data/types'
 import { asTransactionModel } from '../mappers/transaction-mappers'
-import { fetchAssetAtomBuilder, fetchAssetsAtomBuilder } from '@/features/assets/data'
+import { getAssetAtomBuilder, getAssetsAtomBuilder } from '@/features/assets/data'
 import { InnerTransactionModel, TransactionModel, TransactionType as TransactionTypeModel } from '../models'
 
 // TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
@@ -79,8 +79,8 @@ export const fetchTransactionsModelAtomBuilder = (
     )
 
     const assets = new Map(
-      (await get(fetchAssetsAtomBuilder(store, assetIds))).map((a) => {
-        return [a.index, a] as const
+      (await get(getAssetsAtomBuilder(store, assetIds))).map((a) => {
+        return [a.id, a] as const
       })
     )
 
@@ -98,22 +98,22 @@ export const fetchTransactionsModelAtomBuilder = (
 
 export const fetchTransactionModelAtomBuilder = (
   store: JotaiStore,
-  transaction: TransactionResult | Atom<TransactionResult | Promise<TransactionResult>>
+  transactionResult: TransactionResult | Atom<TransactionResult | Promise<TransactionResult>>
 ) => {
   return atom(async (get) => {
-    const txn = 'id' in transaction ? transaction : await get(transaction)
-    return await asTransactionModel(txn, (assetId: number) => get(fetchAssetAtomBuilder(store, assetId)))
+    const txn = 'id' in transactionResult ? transactionResult : await get(transactionResult)
+    return await asTransactionModel(txn, (assetId: number) => get(getAssetAtomBuilder(store, assetId)))
   })
 }
 
 export const fetchInnerTransactionModelAtomBuilder = (
   store: JotaiStore,
-  transaction: TransactionResult | Atom<TransactionResult | Promise<TransactionResult>>,
+  transactionResult: TransactionResult | Atom<TransactionResult | Promise<TransactionResult>>,
   innerId: string
 ) => {
   return atom(async (get) => {
-    const txn = 'id' in transaction ? transaction : await get(transaction)
-    const transactionModel = await asTransactionModel(txn, (assetId: number) => get(fetchAssetAtomBuilder(store, assetId)))
+    const txn = 'id' in transactionResult ? transactionResult : await get(transactionResult)
+    const transactionModel = await asTransactionModel(txn, (assetId: number) => get(getAssetAtomBuilder(store, assetId)))
     if (transactionModel.type !== TransactionTypeModel.ApplicationCall) {
       throw new Error('Only application call transactions have inner transactions')
     }