fix: a bunch of fixes and refactoring the data fetching code

package.json

@@ -22,7 +22,7 @@
     "pre-commit": "run-s check-types lint:fix audit test"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-subscriber": "^1.2.0",
+    "@algorandfoundation/algokit-subscriber": "^1.3.0-beta.2",
     "@algorandfoundation/algokit-utils": "^6.0.0-beta.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -61,7 +61,7 @@
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.18",
     "better-npm-audit": "^3.7.3",
     "conventional-changelog-conventionalcommits": "^7.0.2",
@@ -79,8 +79,8 @@
     "semantic-release-export-data": "^1.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.1.7",
-    "vitest": "^1.3.1"
+    "vite": "^5.2.9",
+    "vitest": "^1.5.0"
   },
   "release": {
     "branches": [
@@ -142,4 +142,4 @@
       "semantic-release-export-data"
     ]
   }
-}
+}

src/features/assets/data.ts

@@ -4,51 +4,56 @@ import { AssetLookupResult, AssetResult } from '@algorandfoundation/algokit-util
 import { atomEffect } from 'jotai-effect'
 import { loadable } from 'jotai/utils'
 import { indexer } from '../common/data'
+import { JotaiStore } from '../common/data/types'
 
 // TODO: Size should be capped at some limit, so memory usage doesn't grow indefinitely
-export const assetsAtom = atom<AssetResult[]>([])
+export const assetsAtom = atom<Map<number, AssetResult>>(new Map())
 
-export const useAssetAtom = (assetIndex: number) => {
-  const store = useStore()
-
-  return useMemo(() => {
-    const syncEffect = atomEffect((get, set) => {
-      ;(async () => {
-        try {
-          const asset = await get(assetAtom)
-          set(assetsAtom, (prev) => {
-            return prev.concat(asset)
-          })
-        } catch (e) {
-          // Ignore any errors as there is nothing to sync
-        }
-      })()
-    })
-    const assetAtom = atom((get) => {
-      // store.get prevents the atom from being subscribed to changes in assetsAtom
-      const assets = store.get(assetsAtom)
-      const asset = assets.find((a) => a.index === assetIndex)
-      if (asset) {
-        return asset
+export const fetchAssetAtomBuilder = (store: JotaiStore, assetIndex: number) => {
+  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)
+    get(syncEffect)
 
-      return indexer
-        .lookupAssetByID(assetIndex)
-        .do()
-        .then((result) => {
-          return (result as AssetLookupResult).asset
-        })
-    })
-    return assetAtom
+    return indexer
+      .lookupAssetByID(assetIndex)
+      .do()
+      .then((result) => {
+        return (result as AssetLookupResult).asset
+      })
+  })
+  return assetAtom
+}
+
+export const fetchAssetsAtomBuilder = (store: JotaiStore, assetIndexes: number[]) => {
+  return atom(async (get) => {
+    return await Promise.all(assetIndexes.map((assetIndex) => get(fetchAssetAtomBuilder(store, assetIndex))))
+  })
+}
+
+export const useAssetAtom = (assetIndex: number) => {
+  const store = useStore()
+  return useMemo(() => {
+    return fetchAssetAtomBuilder(store, assetIndex)
   }, [store, assetIndex])
 }
 
 export const useLoadableAsset = (assetId: number) => {
-  return useAtomValue(
-    // Unfortunately we can't leverage Suspense here, as react doesn't support async useMemo inside the Suspense component
-    // https://github.com/facebook/react/issues/20877
-    loadable(useAssetAtom(assetId))
-  )
+  return useAtomValue(loadable(useAssetAtom(assetId)))
 }