Merge pull request #8069 from LedgerHQ/feat/LIVE-14442

feat(web3Hub): fix state management with jotai

apps/ledger-live-mobile/package.json

@@ -154,6 +154,7 @@
     "hoist-non-react-statics": "3.3.2",
     "i18next": "20.6.1",
     "invariant": "2.2.4",
+    "jotai": "^2.10.1",
     "json-rpc-2.0": "^0.2.19",
     "lodash": "4.17.21",
     "lottie-react-native": "^6.7.0",

apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/Disclaimer/useDisclaimerViewModel.ts

@@ -1,24 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
-import { INITIAL_WEB3HUB_STATE, WEB3HUB_STORE_KEY } from "LLM/features/Web3Hub/constants";
-import { Web3HubDB } from "LLM/features/Web3Hub/types";
-import { useDB } from "~/db";
-
-const dismissedManifestsSelector = (state: Web3HubDB) => state.dismissedManifests;
-
-export function useDismissedManifests() {
-  return useDB<Web3HubDB, Web3HubDB["dismissedManifests"]>(
-    WEB3HUB_STORE_KEY,
-    INITIAL_WEB3HUB_STATE,
-    dismissedManifestsSelector,
-  );
-}
+import { dismissedManifestsAtom } from "LLM/features/Web3Hub/db";
+import { useAtom } from "jotai";
 
 export default function useDisclaimerViewModel(goToApp: (manifestId: string) => void) {
   const [isChecked, setIsChecked] = useState(false);
   const [disclaimerOpened, setDisclaimerOpened] = useState(false);
   const [disclaimerManifest, setDisclaimerManifest] = useState<AppManifest>();
-  const [dismissedManifests, setWeb3HubDB] = useDismissedManifests();
+  const [dismissedManifests, setDismissedManifests] = useAtom(dismissedManifestsAtom);
 
   useEffect(() => {
     if (disclaimerManifest && !!dismissedManifests[disclaimerManifest.id]) {
@@ -28,11 +17,6 @@ export default function useDisclaimerViewModel(goToApp: (manifestId: string) =>
     }
   }, [disclaimerManifest, dismissedManifests]);
 
-  useEffect(() => {
-    setWeb3HubDB(INITIAL_WEB3HUB_STATE);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const onPressItem = useCallback(
     (manifest: AppManifest) => {
       if (manifest.branch === "soon") {
@@ -57,18 +41,18 @@ export default function useDisclaimerViewModel(goToApp: (manifestId: string) =>
   const onConfirm = useCallback(() => {
     if (disclaimerManifest) {
       if (isChecked) {
-        setWeb3HubDB(state => ({
-          ...state,
-          dismissedManifests: {
-            ...state.dismissedManifests,
-            [disclaimerManifest.id]: !state.dismissedManifests[disclaimerManifest.id],
-          },
-        }));
+        setDismissedManifests(async state => {
+          const s = await state;
+          return {
+            ...s,
+            [disclaimerManifest.id]: !s[disclaimerManifest.id],
+          };
+        });
       }
 
       goToApp(disclaimerManifest.id);
     }
-  }, [disclaimerManifest, goToApp, isChecked, setWeb3HubDB]);
+  }, [disclaimerManifest, goToApp, isChecked, setDismissedManifests]);
 
   const onClose = useCallback(() => {
     setDisclaimerOpened(false);

apps/ledger-live-mobile/src/newArch/features/Web3Hub/constants.ts

@@ -1,11 +1,4 @@
-import type { Web3HubDB } from "./types";
-
 export const URL_ORIGIN = "https://live-app-catalog.ledger.com";
 
-export const WEB3HUB_STORE_KEY = "web3hub";
-
-export const INITIAL_WEB3HUB_STATE: Web3HubDB = {
-  recentlyUsed: [],
-  dismissedManifests: {},
-  // localLiveApp: [],
-};
+export const RECENTLY_USED_KEY = "WEB3HUB_RECENTLY_USED";
+export const DISSMISSED_MANIFETS_KEY = "WEB3HUB_DISSMISSED_MANIFETS";

apps/ledger-live-mobile/src/newArch/features/Web3Hub/db.ts

@@ -0,0 +1,15 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Web3HubDB } from "LLM/features/Web3Hub/types";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import { DISSMISSED_MANIFETS_KEY, RECENTLY_USED_KEY } from "./constants";
+
+const emptyRecentlyUsed: Web3HubDB["recentlyUsed"] = [];
+export const recentlyUseAtom = storedAtom(RECENTLY_USED_KEY, emptyRecentlyUsed);
+
+const emptyDismissedManifests: Web3HubDB["dismissedManifests"] = {};
+export const dismissedManifestsAtom = storedAtom(DISSMISSED_MANIFETS_KEY, emptyDismissedManifests);
+
+export function storedAtom<T = unknown>(key: string, defaultValue: T) {
+  const storage = createJSONStorage<T>(() => AsyncStorage);
+  return atomWithStorage<T>(key, defaultValue, storage);
+}

libs/ledger-live-common/package.json

@@ -224,7 +224,7 @@
     "invariant": "^2.2.2",
     "iso-filecoin": "^4.1.0",
     "isomorphic-ws": "^4.0.1",
-    "jotai": "^2.7.0",
+    "jotai": "^2.10.1",
     "json-rpc-2.0": "^0.2.19",
     "lodash": "^4.17.21",
     "minimatch": "^5.1.0",