use history with jotai

apps/ledger-live-mobile/ios/Podfile.lock

@@ -2111,27 +2111,30 @@ SPEC CHECKSUMS:
   react-native-version-number: b415bbec6a13f2df62bf978e85bc0d699462f37f
   react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
   react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688
-  react-native-webview: d2116987f3a75ba677a9f49565bae6834d0e12c4
-  React-nativeconfig: b4d4e9901d4cabb57be63053fd2aa6086eb3c85f
-  React-NativeModulesApple: cd26e56d56350e123da0c1e3e4c76cb58a05e1ee
-  React-perflogger: 5f49905de275bac07ac7ea7f575a70611fa988f2
-  React-RCTActionSheet: 37edf35aeb8e4f30e76c82aab61f12d1b75c04ec
-  React-RCTAnimation: a69de7f3daa8462743094f4736c455e844ea63f7
-  React-RCTAppDelegate: 51fb96b554a6acd0cd7818acecd5aa5ca2f3ab9f
-  React-RCTBlob: d91771caebf2d015005d750cd1dc2b433ad07c99
-  React-RCTFabric: c5b9451d1f2b546119b7a0353226a8a26247d4a9
-  React-RCTImage: a0bfe87b6908c7b76bd7d74520f40660bd0ad881
-  React-RCTLinking: 5f10be1647952cceddfa1970fdb374087582fc34
-  React-RCTNetwork: a0bc3dd45a2dc7c879c80cebb6f9707b2c8bbed6
-  React-RCTSettings: 28c202b68afa59afb4067510f2c69c5a530fb9e3
-  React-RCTText: 4119d9e53ca5db9502b916e1b146e99798986d21
-  React-RCTVibration: 55bd7c48487eb9a2562f2bd3fdc833274f5b0636
-  React-rendererdebug: 5fa97ba664806cee4700e95aec42dff1b6f8ea36
-  React-rncore: fad8fda6453224fd1e9711f162a6a735cf5c57e1
-  React-runtimeexecutor: bb328dbe2865f3a550df0240df8e2d8c3aaa4c57
-  React-runtimescheduler: 9636eee762c699ca7c85751a359101797e4c8b3b
-  React-utils: d16c1d2251c088ad817996621947d0ac8167b46c
-  ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10
+  react-native-webview: 66c0e45a5aa931d7deada77e69042020a86f1aaa
+  React-nativeconfig: c36a079fa219a9911070cc0058b746407e1ef47d
+  React-NativeModulesApple: eab84dd7bda0650f3ce41c53f76ffd49d689763f
+  React-perflogger: 9f21c9e3d8d220833e649a141fed8e5ca08977d9
+  React-RCTActionSheet: 4c1f0dc56952f21a904e9f3bf74253eebee1d1d9
+  React-RCTAnimation: 2c0b963d4fd978ce35daa330986a8bc442c7517a
+  React-RCTAppDelegate: bfb8293aa467aae8a28050e4095b0ceff284cbd5
+  React-RCTBlob: a440574d805536c58c0c409cb5058334c8d2886c
+  React-RCTFabric: 6ea72ddf222ea1e373d0cbac88a1c62355701995
+  React-RCTImage: e63bc8abbad2c5a4eda53ff35282d83bc9df7559
+  React-RCTLinking: 12c6962253fd2f2494231eb8ae2fecae71e54e2f
+  React-RCTNetwork: 46df47440bd2bf63b0ca0a3c640471243ed2922a
+  React-RCTSettings: 5e1dfa02ae2d6cf54b3fdfebaa80837540c50847
+  React-RCTText: 1c045a74e4fda674523c932f53bdd15b2a3ba085
+  React-RCTVibration: 2ba9de92ae71526b3e02b8b8b2fce5cbf47c393f
+  React-rendererdebug: acb324f4975412bb14d55b29dd5ca6961b5fa06a
+  React-rncore: 63db76511a92db6cf9649c9d6567e014b7eeb6f5
+  React-RuntimeApple: 6ecb0a470d1ef989895a4e5d31980004378ebf71
+  React-RuntimeCore: 2794fdb42f7d37f3c877f614e12a0a240b594815
+  React-runtimeexecutor: bf091a7f5f5130daab6d8216aaa290374b214cb8
+  React-RuntimeHermes: 73249fcc108708a137119de18c3d40ac5ab90160
+  React-runtimescheduler: b63ebebd3e000e0ba4ac19ca69bdac071559ad57
+  React-utils: 2955bdc1b2ed495f14dc7d3bfbbb7e3624cfc0fc
+  ReactCommon: 5c504a77030c7ab89eee75b1725b80d8cee7f5d7
   ReactNativePerformance: ab7dee4c4862623d72c1530a9fc71b55458edf71
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c

apps/ledger-live-mobile/src/newArch/features/Web3Hub/__integrations__/web3hub.integration.test.tsx

@@ -5,6 +5,7 @@ import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
 import { Web3HubTest } from "./shared";
 import { Text } from "@ledgerhq/native-ui";
 import deviceStorage from "~/logic/storeWrapper";
+import { WEB3HUB_KEYS } from "../constants";
 
 // Need to fix some stuff if we want to test the player too
 jest.mock(
@@ -31,7 +32,7 @@ async function waitForLoader() {
 
 describe("Web3Hub integration test", () => {
   beforeEach(() => {
-    deviceStorage.delete("web3hub__TabHistory");
+    WEB3HUB_KEYS.forEach(key => deviceStorage.delete(key));
   });
 
   it("Should list manifests and navigate to app page", async () => {

apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx

@@ -3,9 +3,10 @@ import { useTheme, useFocusEffect } from "@react-navigation/native";
 import { View, StyleSheet } from "react-native";
 import { Text } from "@ledgerhq/native-ui";
 import { BorderlessButton } from "react-native-gesture-handler";
-import type { AppProps, MainProps, SearchProps, TabData } from "LLM/features/Web3Hub/types";
+import { useAtomValue } from "jotai";
+import type { AppProps, MainProps, SearchProps } from "LLM/features/Web3Hub/types";
 import { NavigatorName, ScreenName } from "~/const";
-import deviceStorage from "~/logic/storeWrapper";
+import { tabHistoryAtom } from "../../db";
 
 type Props = {
   onClick?: () => void;
@@ -15,16 +16,12 @@ type Props = {
 export default function TabButton({ navigation, onClick }: Props) {
   const { colors } = useTheme();
   const [count, setCount] = useState(0);
+  const tabs = useAtomValue(tabHistoryAtom);
 
   useFocusEffect(
     useCallback(() => {
-      const getTabCount = async () => {
-        const tabs = (await deviceStorage.get("web3hub__TabHistory")) as TabData[];
-        setCount(tabs?.length || 0);
-      };
-
-      getTabCount();
-    }, []),
+      setCount(tabs?.length || 0);
+    }, [tabs]),
   );
 
   const goToTabs = useCallback(() => {

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

@@ -2,3 +2,5 @@ export const URL_ORIGIN = "https://live-app-catalog.ledger.com";
 
 export const RECENTLY_USED_KEY = "WEB3HUB_RECENTLY_USED";
 export const DISSMISSED_MANIFETS_KEY = "WEB3HUB_DISSMISSED_MANIFETS";
+export const TAB_HISTORY_KEY = "WEB3HUB_TAB_HISTORY";
+export const WEB3HUB_KEYS = [RECENTLY_USED_KEY, DISSMISSED_MANIFETS_KEY, TAB_HISTORY_KEY];

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

@@ -1,14 +1,17 @@
 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";
+import { DISSMISSED_MANIFETS_KEY, RECENTLY_USED_KEY, TAB_HISTORY_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);
 
+const emptytabHistory: Web3HubDB["tabHistory"] = [];
+export const tabHistoryAtom = storedAtom(TAB_HISTORY_KEY, emptytabHistory);
+
 export function storedAtom<T = unknown>(key: string, defaultValue: T) {
   const storage = createJSONStorage<T>(() => AsyncStorage);
   return atomWithStorage<T>(key, defaultValue, storage);

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubApp/components/Header/index.tsx

@@ -7,7 +7,7 @@ import BackButton from "LLM/features/Web3Hub/components/BackButton";
 import TabButton from "LLM/features/Web3Hub/components/TabButton";
 import { AppProps } from "LLM/features/Web3Hub/types";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
-import { captureTab } from "~/newArch/features/Web3Hub/utils/captureTab";
+import { useCaptureTab } from "~/newArch/features/Web3Hub/utils/useCaptureTab";
 
 const BAR_HEIGHT = 60;
 export const TOTAL_HEADER_HEIGHT = BAR_HEIGHT;
@@ -31,6 +31,7 @@ export default function Web3HubAppHeader({
   manifest,
 }: Props) {
   const { colors } = useTheme();
+  const captureTab = useCaptureTab();
 
   return (
     <AnimatedBar

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/index.tsx

@@ -2,13 +2,14 @@ import { Flex, IconsLegacy, Text } from "@ledgerhq/native-ui";
 import { useTheme } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import type { TabData, TabsProps } from "LLM/features/Web3Hub/types";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useRef } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useAtom } from "jotai";
 import { NavigatorName, ScreenName } from "~/const";
 import Header from "./components/Header";
-import deviceStorage from "~/logic/storeWrapper";
 import TabItem from "./components/TabItem";
+import { tabHistoryAtom } from "../../db";
 
 const edges = ["top", "bottom", "left", "right"] as const;
 
@@ -36,13 +37,12 @@ const renderItem = ({ item, extraData }: PropRenderItem) => {
 };
 
 export default function Web3HubTabs({ navigation }: TabsProps) {
-  const [tabs, setTabs] = useState<TabData[]>([]);
   const listRef = useRef(null);
   const { colors } = useTheme();
+  const [tabs, setTabs] = useAtom(tabHistoryAtom);
 
   const handleItemClosePress = (itemId: string) => {
     const filteredTabs = tabs.filter(item => item.id !== itemId);
-    deviceStorage.save("web3hub__TabHistory", filteredTabs);
     setTabs(filteredTabs);
   };
 
@@ -52,23 +52,6 @@ export default function Web3HubTabs({ navigation }: TabsProps) {
     });
   }, [navigation]);
 
-  useEffect(() => {
-    const getTabs = async () => {
-      try {
-        const tabHistory = ((await deviceStorage.get("web3hub__TabHistory")) as TabData[]) || [];
-        setTabs(tabHistory);
-      } catch (error) {
-        console.error("Error fetching tabs from storage:", error);
-      }
-    };
-    getTabs();
-    const timer = setTimeout(() => {
-      getTabs();
-    }, 400);
-
-    return () => clearTimeout(timer);
-  }, []);
-
   return (
     <SafeAreaView edges={edges} style={{ flex: 1 }}>
       <Header

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

@@ -34,6 +34,7 @@ export type TabsProps = Web3HubScreenProps<ScreenName.Web3HubTabs>;
 export type Web3HubDB = {
   recentlyUsed: RecentlyUsed[];
   dismissedManifests: DismissedManifests;
+  tabHistory: TabData[];
   // localLiveApp: LiveAppManifest[];
 };
 

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

@@ -0,0 +1,38 @@
+import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
+import { captureScreen } from "react-native-view-shot";
+import { tabHistoryAtom } from "../db";
+import { useSetAtom } from "jotai";
+
+export const useCaptureTab = () => {
+  const setTabHistory = useSetAtom(tabHistoryAtom);
+
+  const captureTab = async (manifest?: AppManifest) => {
+    if (!manifest) throw new Error("Manifest Absent");
+
+    try {
+      const uri = await captureScreen({
+        format: "jpg",
+        quality: 0.6,
+        result: "data-uri",
+      });
+
+      const newTabEntry = {
+        id: `${manifest.id}-${Math.ceil(Math.random() * 1000)}`,
+        manifestId: manifest.id,
+        title: manifest.name,
+        icon: manifest.icon?.trim(),
+        previewUri: uri,
+        url: manifest.url,
+      };
+
+      setTabHistory(async state => {
+        const s = await state;
+        return [...s, newTabEntry];
+      });
+    } catch (error) {
+      console.error("Failed to capture screen or save tab preview", error);
+    }
+  };
+
+  return captureTab;
+};