fix: a bunch of fixes and refactoring the data fetching code (#19)

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

Author: neilcampbell

package-lock.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"
     ]
   }
-}
+}

package.json

@@ -0,0 +1,60 @@
+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 { AssetIndex } from './types'
+
+// 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
+      })
+  })
+  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)))
+}

src/features/assets/data.ts

@@ -0,0 +1 @@
+export type AssetIndex = number