feat: display locally loaded app on mobile

apps/ledger-live-mobile/src/locales/en/common.json

@@ -6140,6 +6140,7 @@
       "subtitle": "Explore Web3 fully integrated with Ledger",
       "section": {
         "recentlyUsed": "Recently Used",
+        "locallyLoaded": "Locally Loaded",
         "categories": "Categories",
         "clearAll": "Clear All"
       },

apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/LocalLiveApp.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity } from "react-native";
+import { Flex, ScrollContainer, Text } from "@ledgerhq/native-ui";
+import { AppIcon } from "../AppIcon";
+import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
+import { ScreenName } from "~/const";
+import { useNavigation } from "@react-navigation/core";
+import { NavigationProps } from "../types";
+
+export function LocalLiveApp({ localLiveApps }: { localLiveApps: LiveAppManifest[] }) {
+  const { t } = useTranslation();
+  const navigation = useNavigation<NavigationProps["navigation"]>();
+
+  return (
+    <>
+      <Flex flexDirection="row" alignItems="center" paddingX={4}>
+        <Flex flex={1} justifyContent="center">
+          <Text variant={"h4"} fontWeight={"semiBold"}>
+            {t("browseWeb3.catalog.section.locallyLoaded")}
+          </Text>
+        </Flex>
+      </Flex>
+
+      <ScrollContainer paddingLeft={6} horizontal showsHorizontalScrollIndicator={false}>
+        {localLiveApps.map(manifest => (
+          <TouchableOpacity
+            key={`${manifest.id}.${manifest.branch}`}
+            style={{
+              width: 70,
+              marginBottom: 16,
+              marginRight: 16,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+            onPress={() => {
+              navigation.navigate(ScreenName.PlatformApp, {
+                platform: manifest.id,
+                name: manifest.name,
+              });
+            }}
+          >
+            <Flex marginBottom={4}>
+              <AppIcon size={52} name={manifest.name} icon={manifest.icon} />
+            </Flex>
+            <Text numberOfLines={1}>{manifest.name}</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollContainer>
+    </>
+  );
+}

apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/index.tsx

@@ -11,14 +11,14 @@ import { ManifestList } from "./ManifestList";
 import { RecentlyUsed } from "./RecentlyUsed";
 import { CatalogSection } from "./CatalogSection";
 import { DAppDisclaimer } from "./DAppDisclaimer";
+import { LocalLiveApp } from "./LocalLiveApp";
 
 const AnimatedView = Animatable.View;
 
 export function Catalog() {
   const { t } = useTranslation();
   const title = t("browseWeb3.catalog.title");
-  const { categories, recentlyUsed, search, disclaimer } = useCatalog();
-
+  const { categories, recentlyUsed, search, disclaimer, localLiveApps } = useCatalog();
   return (
     <TabBarSafeAreaView edges={["top", "bottom", "left", "right"]}>
       {/* TODO: put under the animation header and style  */}
@@ -43,7 +43,10 @@ export function Catalog() {
             }
             disableStyleBottomHeader
             bottomHeaderContent={
-              <RecentlyUsed recentlyUsed={recentlyUsed} disclaimer={disclaimer} />
+              <>
+                {localLiveApps.length !== 0 && <LocalLiveApp localLiveApps={localLiveApps} />}
+                <RecentlyUsed recentlyUsed={recentlyUsed} disclaimer={disclaimer} />
+              </>
             }
             disableStyleSubBottomHeader
             subBottomHeaderContent={<CatalogSection categories={categories} />}

apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts

@@ -5,6 +5,7 @@ import {
   useDisclaimerRaw,
   useRecentlyUsed,
   DisclaimerRaw,
+  useLocalLiveApp,
 } from "@ledgerhq/live-common/wallet-api/react";
 import {
   INITIAL_PLATFORM_STATE,
@@ -24,12 +25,18 @@ import { NavigationProps } from "./types";
 import { useManifests } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 
 export function useCatalog() {
-  const db = useDiscoverDB();
+  const recentlyUsedDB = useRecentlyUsedDB();
+  const localLiveAppDB = useLocalLiveAppDB();
   const allManifests = useManifests();
   const completeManifests = useManifests({ visibility: ["complete"] });
   const combinedManifests = useManifests({ visibility: ["searchable", "complete"] });
   const categories = useCategories(completeManifests);
-  const recentlyUsed = useRecentlyUsed(combinedManifests, db);
+  const recentlyUsed = useRecentlyUsed(combinedManifests, recentlyUsedDB);
+  const { state: localLiveApps, addLocalManifest } = useLocalLiveApp(localLiveAppDB);
+
+  useEffect(() => {
+    addLocalManifest({ id: "test", name: "Test", url: "localhost" });
+  }, []);
 
   const search = useSearch<AppManifest, TextInput>({
     list: combinedManifests,
@@ -62,8 +69,9 @@ export function useCatalog() {
       recentlyUsed,
       search,
       disclaimer,
+      localLiveApps,
     }),
-    [categories, recentlyUsed, search, disclaimer],
+    [categories, recentlyUsed, search, disclaimer, localLiveApps],
   );
 }
 
@@ -167,14 +175,22 @@ function useDisclaimer(appendRecentlyUsed: (manifest: AppManifest) => void): Dis
   };
 }
 
-function useDiscoverDB() {
+function useRecentlyUsedDB() {
   return useDB<DiscoverDB, DiscoverDB["recentlyUsed"]>(
     DISCOVER_STORE_KEY,
     INITIAL_PLATFORM_STATE,
     state => state.recentlyUsed,
   );
 }
 
+function useLocalLiveAppDB() {
+  return useDB<DiscoverDB, DiscoverDB["localLiveApp"]>(
+    DISCOVER_STORE_KEY,
+    INITIAL_PLATFORM_STATE,
+    state => state.localLiveApp,
+  );
+}
+
 export function useCurrentAccountHistDB() {
   return useDB<DiscoverDB, DiscoverDB["currentAccountHist"]>(
     DISCOVER_STORE_KEY,