chore: refactoring our usage of jotai to make the patterns easier to use and evolve (#46)

* chore: refactoring the way we use jotai to make it simpler

---------

Co-authored-by: Hoang Dinh <[email protected]>

Author: neilcampbell

src/features/applications/data/application-result.ts

@@ -0,0 +1,19 @@
+import { indexer } from '@/features/common/data'
+import { atom } from 'jotai'
+import { ApplicationLookupResult, ApplicationResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { ApplicationId } from './types'
+import { atomsInAtom } from '@/features/common/data/atoms-in-atom'
+
+const createApplicationResultAtom = (applicationId: ApplicationId) => {
+  return atom<Promise<ApplicationResult> | ApplicationResult>(async (_get) => {
+    return await indexer
+      .lookupApplications(applicationId)
+      .includeAll(true)
+      .do()
+      .then((result) => {
+        return (result as ApplicationLookupResult).application
+      })
+  })
+}
+
+export const [applicationResultsAtom, getApplicationResultAtom] = atomsInAtom(createApplicationResultAtom, (applicationId) => applicationId)

src/features/applications/data/application.ts

@@ -1,54 +1,14 @@
-import { indexer } from '@/features/common/data'
 import { JotaiStore } from '@/features/common/data/types'
 import { atom, useAtomValue, useStore } from 'jotai'
-import { atomEffect } from 'jotai-effect'
-import { ApplicationLookupResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { asApplication } from '../mappers'
 import { useMemo } from 'react'
 import { loadable } from 'jotai/utils'
 import { ApplicationId } from './types'
-import { applicationResultsAtom } from './core'
-
-const fetchApplicationResultAtomBuilder = (applicationId: ApplicationId) => {
-  return atom(async (_get) => {
-    return await indexer
-      .lookupApplications(applicationId)
-      .includeAll(true)
-      .do()
-      .then((result) => {
-        return (result as ApplicationLookupResult).application
-      })
-  })
-}
-
-export const getApplicationAtomBuilder = (store: JotaiStore, applicationId: ApplicationId) => {
-  const fetchApplicationResultAtom = fetchApplicationResultAtomBuilder(applicationId)
-
-  const syncEffect = atomEffect((get, set) => {
-    ;(async () => {
-      try {
-        const applicationResult = await get(fetchApplicationResultAtom)
-        set(applicationResultsAtom, (prev) => {
-          const next = new Map(prev)
-          next.set(applicationResult.id, applicationResult)
-          return next
-        })
-      } catch (e) {
-        // Ignore any errors as there is nothing to sync
-      }
-    })()
-  })
+import { getApplicationResultAtom } from './application-result'
 
+export const createApplicationAtom = (store: JotaiStore, applicationId: ApplicationId) => {
   return atom(async (get) => {
-    const applicationResults = store.get(applicationResultsAtom)
-    const cachedApplicationResult = applicationResults.get(applicationId)
-    if (cachedApplicationResult) {
-      return asApplication(cachedApplicationResult)
-    }
-
-    get(syncEffect)
-
-    const applicationResult = await get(fetchApplicationResultAtom)
+    const applicationResult = await get(getApplicationResultAtom(store, applicationId))
     return asApplication(applicationResult)
   })
 }
@@ -57,7 +17,7 @@ const useApplicationAtom = (applicationId: ApplicationId) => {
   const store = useStore()
 
   return useMemo(() => {
-    return getApplicationAtomBuilder(store, applicationId)
+    return createApplicationAtom(store, applicationId)
   }, [store, applicationId])
 }
 

src/features/applications/data/core.ts

@@ -1 +1,2 @@
 export * from './application'
+export * from './application-result'

src/features/applications/data/index.ts

@@ -158,7 +158,7 @@ export function AssetDetails({ asset }: Props) {
             <CardContent className={cn('text-sm space-y-2')}>
               <h1 className={cn('text-2xl text-primary font-bold')}>{assetTransactionsLabel}</h1>
               <div className={cn('border-solid border-2 grid p-4')}>
-                <AssetTransactionHistory assetIndex={asset.id} />
+                <AssetTransactionHistory assetId={asset.id} />
               </div>
             </CardContent>
           </Card>

src/features/assets/components/asset-details.tsx

@@ -1,5 +1,5 @@
 import { LazyLoadDataTable } from '@/features/common/components/lazy-load-data-table'
-import { AssetIndex } from '../data/types'
+import { AssetId } from '../data/types'
 import { Transaction, TransactionType } from '@/features/transactions/models'
 import { DisplayAlgo } from '@/features/common/components/display-algo'
 import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
@@ -10,11 +10,11 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useFetchNextAssetTransactionsPage } from '../data/asset-transaction-history'
 
 type Props = {
-  assetIndex: AssetIndex
+  assetId: AssetId
 }
 
-export function AssetTransactionHistory({ assetIndex }: Props) {
-  const fetchNextPage = useFetchNextAssetTransactionsPage(assetIndex)
+export function AssetTransactionHistory({ assetId }: Props) {
+  const fetchNextPage = useFetchNextAssetTransactionsPage(assetId)
 
   return <LazyLoadDataTable columns={transactionsTableColumns} fetchNextPage={fetchNextPage} />
 }

src/features/assets/components/asset-transaction-history.tsx

@@ -1,7 +1,4 @@
 import { atom } from 'jotai'
-import { JotaiStore } from '@/features/common/data/types'
-import { atomEffect } from 'jotai-effect'
-import { assetMetadataAtom } from './core'
 import { AssetResult, TransactionResult, TransactionSearchResults } from '@algorandfoundation/algokit-utils/types/indexer'
 import { indexer } from '@/features/common/data'
 import { flattenTransactionResult } from '@/features/transactions/utils/flatten-transaction-result'
@@ -12,14 +9,15 @@ import { getArc3Url, isArc3Url } from '../utils/arc3'
 import { base64ToUtf8 } from '@/utils/base64-to-utf8'
 import { ZERO_ADDRESS } from '@/features/common/constants'
 import { executePaginatedRequest } from '@algorandfoundation/algokit-utils'
+import { atomsInAtom } from '@/features/common/data/atoms-in-atom'
 
 // Currently, we support ARC-3, 19 and 69. Their specs can be found here https://github.com/algorandfoundation/ARCs/tree/main/ARCs
 // ARCs are community standard, therefore, there are edge cases
 // For example:
 // - An asset can follow ARC-69 and ARC-19 at the same time: https://allo.info/asset/1559471783/nft
 // - An asset can follow ARC-3 and ARC-19 at the same time: https://allo.info/asset/1494117806/nft
 // - ARC-19 doesn't specify the metadata format but generally people use the ARC-3 format
-export const buildAssetMetadataResult = async (
+const createAssetMetadataResult = async (
   assetResult: AssetResult,
   latestAssetCreateOrReconfigureTransaction?: TransactionResult
 ): Promise<AssetMetadataResult> => {
@@ -71,7 +69,7 @@ const noteToArc69Metadata = (note: string | undefined) => {
   return undefined
 }
 
-export const fetchAssetMetadataAtomBuilder = (assetResult: AssetResult) =>
+export const createAssetMetadataResultAtom = (assetResult: AssetResult) =>
   atom(async (_get) => {
     if (assetResult.index === 0) {
       return null
@@ -111,37 +109,10 @@ export const fetchAssetMetadataAtomBuilder = (assetResult: AssetResult) =>
       return null
     }
 
-    return await buildAssetMetadataResult(assetResult, assetConfigTransactionResults[0])
+    return await createAssetMetadataResult(assetResult, assetConfigTransactionResults[0])
   })
 
-export const getAssetMetadataAtomBuilder = (store: JotaiStore, assetResult: AssetResult) => {
-  const fetchAssetMetadataAtom = fetchAssetMetadataAtomBuilder(assetResult)
-
-  const syncEffect = atomEffect((get, set) => {
-    ;(async () => {
-      try {
-        const assetMetadata = await get(fetchAssetMetadataAtom)
-        set(assetMetadataAtom, (prev) => {
-          const next = new Map(prev)
-          next.set(assetResult.index, assetMetadata)
-          return next
-        })
-      } catch (e) {
-        // Ignore any errors as there is nothing to sync
-      }
-    })()
-  })
-
-  return atom(async (get) => {
-    const assetMetadata = store.get(assetMetadataAtom)
-    const cachedAssetMetadata = assetMetadata.get(assetResult.index)
-    if (cachedAssetMetadata) {
-      return cachedAssetMetadata
-    }
-
-    get(syncEffect)
-
-    const assetMetadataResult = await get(fetchAssetMetadataAtom)
-    return assetMetadataResult
-  })
-}
+export const [assetMetadataResultsAtom, getAssetMetadataResultAtom] = atomsInAtom(
+  createAssetMetadataResultAtom,
+  (assetResult) => assetResult.index
+)

src/features/assets/data/asset-metadata.ts

@@ -1,24 +1,36 @@
 import { atom } from 'jotai'
-import { AssetIndex, AssetResult } from './types'
+import { AssetId, AssetResult } from './types'
 import { indexer, algod } from '@/features/common/data'
-import { atomEffect } from 'jotai-effect'
-import { assetResultsAtom } from './core'
-import { JotaiStore } from '@/features/common/data/types'
 import { asError, is404 } from '@/utils/error'
+import { atomsInAtom } from '@/features/common/data/atoms-in-atom'
+import { ZERO_ADDRESS } from '@/features/common/constants'
 
-export const fetchAssetResultAtomBuilder = (assetIndex: AssetIndex) =>
-  atom(async (_get) => {
+export const algoAssetResult = {
+  index: 0,
+  'created-at-round': 0,
+  params: {
+    creator: ZERO_ADDRESS,
+    decimals: 6,
+    total: 10_000_000_000_000_000n,
+    name: 'ALGO',
+    'unit-name': 'ALGO',
+    url: 'https://www.algorand.foundation',
+  },
+} as AssetResult
+
+const createAssetResultAtom = (assetId: AssetId) =>
+  atom<Promise<AssetResult> | AssetResult>(async (_get) => {
     try {
       // Check algod first, as there can be some syncing delays to indexer
       return await algod
-        .getAssetByID(assetIndex)
+        .getAssetByID(assetId)
         .do()
         .then((result) => result as AssetResult)
     } catch (e: unknown) {
       if (is404(asError(e))) {
         // Handle destroyed assets or assets that may not be available in algod potentially due to the node type
         return await indexer
-          .lookupAssetByID(assetIndex)
+          .lookupAssetByID(assetId)
           .includeAll(true) // Returns destroyed assets
           .do()
           .then((result) => result.asset as AssetResult)
@@ -27,33 +39,8 @@ export const fetchAssetResultAtomBuilder = (assetIndex: AssetIndex) =>
     }
   })
 
-export const getAssetResultAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex) => {
-  return atom(async (get) => {
-    // TODO: NC - If I don't use store here we get double fetching when an atom depends on this, due to depending on something that we directly set using an effect.
-    // I'll be coming back and re-evaluating the patterns here.
-    const assetResults = store.get(assetResultsAtom)
-    const cachedAssetResult = assetResults.get(assetIndex)
-    if (cachedAssetResult) {
-      return cachedAssetResult
-    }
-
-    const fetchAssetResultAtom = fetchAssetResultAtomBuilder(assetIndex)
-    const syncEffect = atomEffect((get, set) => {
-      ;(async () => {
-        try {
-          const assetResult = await get(fetchAssetResultAtom)
-
-          set(assetResultsAtom, (prev) => {
-            const next = new Map(prev)
-            next.set(assetResult.index, assetResult)
-            return next
-          })
-        } catch (e) {
-          // Ignore any errors as there is nothing to sync
-        }
-      })()
-    })
-    get(syncEffect)
-    return await get(fetchAssetResultAtom)
-  })
-}
+export const [assetResultsAtom, getAssetResultAtom] = atomsInAtom(
+  createAssetResultAtom,
+  (assetId) => assetId,
+  new Map([[algoAssetResult.index, atom(algoAssetResult)]])
+)

src/features/assets/data/asset-result.ts

@@ -1,31 +1,12 @@
-import { atom, useAtomValue, useStore } from 'jotai'
+import { atom } from 'jotai'
 import { JotaiStore } from '@/features/common/data/types'
-import { useMemo } from 'react'
-import { loadable } from 'jotai/utils'
 import { asAssetSummary } from '../mappers/asset-summary'
-import { AssetIndex } from './types'
-import { getAssetResultAtomBuilder } from './asset-result'
+import { AssetId } from './types'
+import { getAssetResultAtom } from './asset-result'
 
-export const getAssetSummaryAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex) => {
+export const createAssetSummaryAtom = (store: JotaiStore, assetId: AssetId) => {
   return atom(async (get) => {
-    const assetResult = await get(getAssetResultAtomBuilder(store, assetIndex))
+    const assetResult = await get(getAssetResultAtom(store, assetId))
     return asAssetSummary(assetResult)
   })
 }
-
-export const getAssetSummariesAtomBuilder = (store: JotaiStore, assetIndexes: AssetIndex[]) => {
-  return atom((get) => {
-    return Promise.all(assetIndexes.map((assetIndex) => get(getAssetSummaryAtomBuilder(store, assetIndex))))
-  })
-}
-
-export const useAssetSummaryAtom = (assetIndex: AssetIndex) => {
-  const store = useStore()
-  return useMemo(() => {
-    return getAssetSummaryAtomBuilder(store, assetIndex)
-  }, [store, assetIndex])
-}
-
-export const useLoadableAssetSummary = (assetIndex: AssetIndex) => {
-  return useAtomValue(loadable(useAssetSummaryAtom(assetIndex)))
-}

src/features/assets/data/asset-summary.ts

@@ -1,16 +1,16 @@
-import { AssetIndex } from '../data/types'
+import { AssetId } 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 { fetchTransactionsAtomBuilder, transactionResultsAtom } from '@/features/transactions/data'
+import { createTransactionsAtom, transactionResultsAtom } from '@/features/transactions/data'
 import { atomEffect } from 'jotai-effect'
 import { atom, useStore } from 'jotai'
 
-const fetchAssetTransactionResults = async (assetIndex: AssetIndex, pageSize: number, nextPageToken?: string) => {
+const fetchAssetTransactionResults = async (assetId: AssetId, pageSize: number, nextPageToken?: string) => {
   const results = (await indexer
     .searchForTransactions()
-    .assetID(assetIndex)
+    .assetID(assetId)
     .nextToken(nextPageToken ?? '')
     .limit(pageSize)
     .do()) as TransactionSearchResults
@@ -20,14 +20,16 @@ const fetchAssetTransactionResults = async (assetIndex: AssetIndex, pageSize: nu
   } as const
 }
 
-const syncEffectBuilder = (transactionResults: TransactionResult[]) => {
+const createSyncEffect = (transactionResults: TransactionResult[]) => {
   return atomEffect((_, set) => {
     ;(async () => {
       try {
         set(transactionResultsAtom, (prev) => {
           const next = new Map(prev)
           transactionResults.forEach((transactionResult) => {
-            next.set(transactionResult.id, transactionResult)
+            if (!next.has(transactionResult.id)) {
+              next.set(transactionResult.id, atom(transactionResult))
+            }
           })
           return next
         })
@@ -38,13 +40,13 @@ const syncEffectBuilder = (transactionResults: TransactionResult[]) => {
   })
 }
 
-const fetchAssetTransactionsAtomBuilder = (store: JotaiStore, assetIndex: AssetIndex, pageSize: number, nextPageToken?: string) => {
+const createAssetTransactionsAtom = (store: JotaiStore, assetId: AssetId, pageSize: number, nextPageToken?: string) => {
   return atom(async (get) => {
-    const { transactionResults, nextPageToken: newNextPageToken } = await fetchAssetTransactionResults(assetIndex, pageSize, nextPageToken)
+    const { transactionResults, nextPageToken: newNextPageToken } = await fetchAssetTransactionResults(assetId, pageSize, nextPageToken)
 
-    get(syncEffectBuilder(transactionResults))
+    get(createSyncEffect(transactionResults))
 
-    const transactions = await get(fetchTransactionsAtomBuilder(store, transactionResults))
+    const transactions = await get(createTransactionsAtom(store, transactionResults))
 
     return {
       rows: transactions,
@@ -53,10 +55,10 @@ const fetchAssetTransactionsAtomBuilder = (store: JotaiStore, assetIndex: AssetI
   })
 }
 
-export const useFetchNextAssetTransactionsPage = (assetIndex: AssetIndex) => {
+export const useFetchNextAssetTransactionsPage = (assetId: AssetId) => {
   const store = useStore()
 
   return useMemo(() => {
-    return (pageSize: number, nextPageToken?: string) => fetchAssetTransactionsAtomBuilder(store, assetIndex, pageSize, nextPageToken)
-  }, [store, assetIndex])
+    return (pageSize: number, nextPageToken?: string) => createAssetTransactionsAtom(store, assetId, pageSize, nextPageToken)
+  }, [store, assetId])
 }