feat(web3Hub): fix state management with jotai

apps/ledger-live-mobile/package.json

@@ -85,10 +85,11 @@
  "@ledgerhq/domain-service": "workspace:^",
  "@ledgerhq/errors": "workspace:^",
  "@ledgerhq/ethereum-provider": "workspace:^",
+ "@ledgerhq/hw-ledger-key-ring-protocol": "workspace:^",
  "@ledgerhq/hw-transport": "workspace:^",
  "@ledgerhq/hw-transport-http": "workspace:^",
- "@ledgerhq/hw-ledger-key-ring-protocol": "workspace:^",
  "@ledgerhq/icons-ui": "workspace:^",
+ "@ledgerhq/ledger-key-ring-protocol": "workspace:^",
  "@ledgerhq/live-common": "workspace:^",
  "@ledgerhq/live-config": "workspace:^",
  "@ledgerhq/live-countervalues": "workspace:^",
@@ -102,7 +103,6 @@
  "@ledgerhq/native-ui": "workspace:^",
  "@ledgerhq/react-native-hid": "workspace:^",
  "@ledgerhq/react-native-hw-transport-ble": "workspace:^",
- "@ledgerhq/ledger-key-ring-protocol": "workspace:^",
  "@ledgerhq/types-cryptoassets": "workspace:^",
  "@ledgerhq/types-devices": "workspace:^",
  "@ledgerhq/types-live": "workspace:^",
@@ -154,6 +154,7 @@
  "hoist-non-react-statics": "3.3.2",
  "i18next": "20.6.1",
  "invariant": "2.2.4",
+ "jotai": "^2.7.0",
  "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,17 +1,12 @@
 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";
+import { useWeb3HubDB } from "LLM/features/Web3Hub/db";
 
 const dismissedManifestsSelector = (state: Web3HubDB) => state.dismissedManifests;
 
 export function useDismissedManifests() {
- return useDB<Web3HubDB, Web3HubDB["dismissedManifests"]>(
- WEB3HUB_STORE_KEY,
- INITIAL_WEB3HUB_STATE,
- dismissedManifestsSelector,
- );
+ return useWeb3HubDB<Web3HubDB["dismissedManifests"]>(dismissedManifestsSelector);
 }
 
 export default function useDisclaimerViewModel(goToApp: (manifestId: string) => void) {
@@ -28,11 +23,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") {

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

@@ -0,0 +1,36 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useAtom } from "jotai";
+import { createJSONStorage } from "jotai/utils";
+import { useCallback, useMemo } from "react";
+import { Web3HubDB } from "LLM/features/Web3Hub/types";
+import { atomWithStorage } from "jotai/utils";
+import { INITIAL_WEB3HUB_STATE, WEB3HUB_STORE_KEY } from "./constants";
+
+export const storage = createJSONStorage<Web3HubDB>(() => AsyncStorage);
+
+export const web3hubAtom = atomWithStorage<Web3HubDB>(
+ WEB3HUB_STORE_KEY,
+ INITIAL_WEB3HUB_STATE,
+ storage,
+);
+
+type NewState = Web3HubDB | ((s: Web3HubDB) => Web3HubDB);
+
+export function useWeb3HubDB<Selected>(
+ selector: (state: Web3HubDB) => Selected,
+): [Selected, (v: NewState) => void] {
+ const [state, setState] = useAtom(web3hubAtom);
+
+ const setter = useCallback(
+ (newState: NewState) => {
+ const val = typeof newState === "function" ? newState(state) : newState;
+
+ setState(val);
+ },
+ // eslint-disable-next-line
+ [state],
+ );
+
+ const result = useMemo(() => selector(state), [state, selector]);
+ return [result, setter];
+}