From ca4274009ae050b30695b7b505241e4530ecbd55 Mon Sep 17 00:00:00 2001
From: Ramy EL BEHEDY <32883529+RamyEB@users.noreply.github.com>
Date: Fri, 10 May 2024 14:49:38 +0200
Subject: [PATCH] feat: Save locally added manifest into the storage on both
 Mobile and Desktop client (#6719)

feat: Save locally added manifest into the storage on both Mobile and Desktop client
---
 .changeset/hot-zebras-ring.md                 |   7 +
 .../components/PlatformAppProviderWrapper.tsx |  19 +-
 .../StakeFlowModal/component/ProviderItem.tsx |   2 +-
 .../modals/CreateLocalManifest/index.tsx      |   2 +-
 .../src/renderer/screens/earn/index.tsx       |   2 +-
 .../screens/exchange/Swap2/Form/index.tsx     |   2 +-
 .../src/renderer/screens/exchange/index.tsx   |   2 +-
 .../src/renderer/screens/platform/LiveApp.tsx |   2 +-
 .../platform/v2/Catalog/Card/Minimum.tsx      |  13 +-
 .../v2/Catalog/LocalLiveAppSection.tsx        |  37 +++
 .../screens/platform/v2/Catalog/index.tsx     |  10 +-
 .../src/renderer/screens/platform/v2/hooks.ts |  10 +-
 .../src/renderer/screens/recover/Player.tsx   |   2 +-
 .../sections/Developer/RunLocalAppButton.tsx  |  10 +-
 .../src/renderer/screens/swapWeb/index.tsx    |   2 +-
 .../static/i18n/en/app.json                   |   1 +
 .../src/PlatformAppProviderWrapper.tsx        |  19 +-
 .../EvmStakingDrawerProvider.tsx              |   8 +-
 .../src/families/tron/Votes/index.tsx         |   8 +-
 .../src/locales/en/common.json                |   1 +
 .../src/screens/PTX/BuyAndSell/index.tsx      |   2 +-
 .../src/screens/PTX/Earn/index.tsx            |   2 +-
 .../src/screens/Platform/Catalog/AppCard.tsx  |   2 +
 .../src/screens/Platform/LiveApp.tsx          |   2 +-
 .../Platform/v2/Catalog/LocalLiveApp.tsx      |  52 +++++
 .../src/screens/Platform/v2/Catalog/index.tsx |   9 +-
 .../src/screens/Platform/v2/hooks.ts          |  12 +-
 .../src/screens/Protect/Player.tsx            |   2 +-
 .../Settings/Developer/CustomManifest.tsx     | 212 ++++++++++--------
 libs/ledger-live-common/.unimportedrc.json    |   4 +-
 .../src/platform/hooks/useManifest.test.ts    |  70 ------
 .../src/platform/hooks/useManifest.ts         |  15 --
 .../providers/LocalLiveAppProvider/index.tsx  |  83 -------
 .../providers/LocalLiveAppProvider/types.ts   |  10 -
 .../providers/RemoteLiveAppProvider/types.ts  |   4 -
 .../wallet-api/LocalLiveAppProvider/index.tsx |  40 ++++
 .../wallet-api/LocalLiveAppProvider/types.ts  |  14 ++
 .../src/wallet-api/constants.ts               |   6 +-
 .../src/wallet-api/react.ts                   |  52 +++++
 .../src/wallet-api/types.ts                   |   1 +
 40 files changed, 425 insertions(+), 328 deletions(-)
 create mode 100644 .changeset/hot-zebras-ring.md
 create mode 100644 apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/LocalLiveAppSection.tsx
 create mode 100644 apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/LocalLiveApp.tsx
 delete mode 100644 libs/ledger-live-common/src/platform/hooks/useManifest.test.ts
 delete mode 100644 libs/ledger-live-common/src/platform/hooks/useManifest.ts
 delete mode 100644 libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/index.tsx
 delete mode 100644 libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/types.ts
 create mode 100644 libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/index.tsx
 create mode 100644 libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/types.ts

diff --git a/.changeset/hot-zebras-ring.md b/.changeset/hot-zebras-ring.md
new file mode 100644
index 000000000000..ab6a0d6c7479
--- /dev/null
+++ b/.changeset/hot-zebras-ring.md
@@ -0,0 +1,7 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+"@ledgerhq/live-common": patch
+---
+
+Save locally added manifest into the storage on both Mobile and Desktop client
diff --git a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx
index 6bf9f3f63648..589e295657fa 100644
--- a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx
+++ b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx
@@ -7,8 +7,13 @@ import {
 } from "~/renderer/reducers/settings";
 import { useSelector } from "react-redux";
 import { RemoteLiveAppProvider } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
-import { LocalLiveAppProvider } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { LocalLiveAppProvider } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { RampCatalogProvider } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/index";
+import { useDB } from "../storage";
+import {
+  DISCOVER_STORE_KEY,
+  INITIAL_PLATFORM_STATE,
+} from "@ledgerhq/live-common/wallet-api/constants";
 
 type PlatformAppProviderWrapperProps = {
   children: ReactNode;
@@ -21,6 +26,7 @@ export function PlatformAppProviderWrapper({ children }: PlatformAppProviderWrap
   const allowExperimentalApps = useSelector(allowExperimentalAppsSelector);
   const provider = useSelector(catalogProviderSelector);
   const locale = useSelector(languageSelector);
+  const localLiveAppDB = useLocalLiveAppDB();
 
   return (
     <RemoteLiveAppProvider
@@ -33,7 +39,7 @@ export function PlatformAppProviderWrapper({ children }: PlatformAppProviderWrap
       }}
       updateFrequency={AUTO_UPDATE_DEFAULT_DELAY}
     >
-      <LocalLiveAppProvider>
+      <LocalLiveAppProvider db={localLiveAppDB}>
         <RampCatalogProvider provider={provider} updateFrequency={AUTO_UPDATE_DEFAULT_DELAY}>
           {children}
         </RampCatalogProvider>
@@ -41,3 +47,12 @@ export function PlatformAppProviderWrapper({ children }: PlatformAppProviderWrap
     </RemoteLiveAppProvider>
   );
 }
+
+function useLocalLiveAppDB() {
+  return useDB(
+    "app",
+    DISCOVER_STORE_KEY,
+    INITIAL_PLATFORM_STATE,
+    state => state.localLiveApp || INITIAL_PLATFORM_STATE.localLiveApp,
+  );
+}
diff --git a/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/component/ProviderItem.tsx b/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/component/ProviderItem.tsx
index c3e80d1a2173..edc723a8548f 100644
--- a/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/component/ProviderItem.tsx
+++ b/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/component/ProviderItem.tsx
@@ -1,4 +1,3 @@
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import { Flex, Icon, Tag as TagCore, Text } from "@ledgerhq/react-ui";
 import React, { useCallback, useEffect, useMemo } from "react";
@@ -7,6 +6,7 @@ import styled, { DefaultTheme, StyledComponent } from "styled-components";
 import { StakeOnClickProps } from "../EthStakingModalBody";
 import { StakingIcon } from "../StakingIcon";
 import { ListProvider } from "../types";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
 export const Container: StyledComponent<
   "div",
diff --git a/apps/ledger-live-desktop/src/renderer/modals/CreateLocalManifest/index.tsx b/apps/ledger-live-desktop/src/renderer/modals/CreateLocalManifest/index.tsx
index bf34f37bfb4f..ce7881299040 100644
--- a/apps/ledger-live-desktop/src/renderer/modals/CreateLocalManifest/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/modals/CreateLocalManifest/index.tsx
@@ -15,7 +15,6 @@ import {
   LiveAppManifestSchemaType,
 } from "@ledgerhq/live-common/platform/types";
 import Text from "~/renderer/components/Text";
-import { useLocalLiveAppContext } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import Switch from "~/renderer/components/Switch";
 import FormLiveAppInput from "./FormLiveAppInput";
 import NestedFormCategory from "./NestedFormCategory";
@@ -32,6 +31,7 @@ import { Separator } from "~/renderer/components/Onboarding/Screens/SelectUseCas
 import { DEFAULT_FORM, DEFAULT_VALUES } from "./defaultValues";
 
 import { objectKeysType } from "@ledgerhq/live-common/helpers";
+import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
 function createLocalManifest() {
   return (
diff --git a/apps/ledger-live-desktop/src/renderer/screens/earn/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/earn/index.tsx
index fde361c55229..a9156306ac21 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/earn/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/earn/index.tsx
@@ -9,9 +9,9 @@ import {
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import WebPlatformPlayer from "~/renderer/components/WebPlatformPlayer";
 import useTheme from "~/renderer/hooks/useTheme";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import { useDeepLinkListener } from "~/renderer/screens/earn/useDeepLinkListener";
 import { useDiscreetMode } from "~/renderer/components/Discreet";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
 const DEFAULT_EARN_APP_ID = "earn";
 
diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx
index f7e7370938c4..f8e011595edc 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx
@@ -35,9 +35,9 @@ import SwapWebView, { SwapWebProps, useSwapLiveAppManifestID } from "./SwapWebVi
 import { SwapMigrationUI } from "./Migrations/SwapMigrationUI";
 import { useSwapLiveAppHook } from "~/renderer/hooks/swap-migrations/useSwapLiveAppHook";
 import SwapFormSummary from "./FormSummary";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import { languageSelector } from "~/renderer/reducers/settings";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { walletSelector } from "~/renderer/reducers/wallet";
 
 const DAPP_PROVIDERS = ["paraswap", "oneinch", "moonpay"];
diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/exchange/index.tsx
index 82b9b568c588..6191f55558de 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/exchange/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/exchange/index.tsx
@@ -8,7 +8,6 @@ import { languageSelector } from "~/renderer/reducers/settings";
 import { accountsSelector } from "~/renderer/reducers/accounts";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import useTheme from "~/renderer/hooks/useTheme";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import WebPTXPlayer from "~/renderer/components/WebPTXPlayer";
 import { getParentAccount, isTokenAccount } from "@ledgerhq/live-common/account/index";
 import { LiveAppManifest, Loadable } from "@ledgerhq/live-common/platform/types";
@@ -20,6 +19,7 @@ import {
 } from "@ledgerhq/live-common/wallet-api/constants";
 import { useInternalAppIds } from "@ledgerhq/live-common/hooks/useInternalAppIds";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { walletSelector } from "~/renderer/reducers/wallet";
 
 export type DProps = {
diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/LiveApp.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/LiveApp.tsx
index f53f68f62faf..7ab5bfe641cc 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/platform/LiveApp.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/platform/LiveApp.tsx
@@ -6,7 +6,7 @@ import WebPlatformPlayer from "~/renderer/components/WebPlatformPlayer";
 import { languageSelector } from "~/renderer/reducers/settings";
 import { useSelector } from "react-redux";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
 type Props = {
   match: {
diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Minimum.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Minimum.tsx
index 721e9760e68c..3da77bb2e917 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Minimum.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Minimum.tsx
@@ -7,16 +7,19 @@ import { Container, Subtitle } from "./Layout";
 import { useSelector } from "react-redux";
 import { languageSelector } from "~/renderer/reducers/settings";
 import { RecentlyUsedManifest } from "@ledgerhq/live-common/wallet-api/react";
+import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 
-export function MinimumCard(props: PropsCard<RecentlyUsedManifest>) {
+export function MinimumCard(props: PropsCard<RecentlyUsedManifest | LiveAppManifest>) {
   const { disabled, onClick } = useCard(props);
   const { manifest } = props;
 
   const lang = useSelector(languageSelector);
   const usedAt = useMemo(() => {
-    const rtf = new Intl.RelativeTimeFormat(lang);
-    return rtf.format(-manifest.usedAt.diff, manifest.usedAt.unit);
-  }, [lang, manifest.usedAt.diff, manifest.usedAt.unit]);
+    if ("usedAt" in manifest) {
+      const rtf = new Intl.RelativeTimeFormat(lang);
+      return rtf.format(-manifest.usedAt.diff, manifest.usedAt.unit);
+    } else return;
+  }, [lang, manifest]);
 
   return (
     <Container disabled={disabled} onClick={onClick} width={300}>
@@ -27,7 +30,7 @@ export function MinimumCard(props: PropsCard<RecentlyUsedManifest>) {
           <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontSize={14}>
             {manifest.name}
           </Text>
-          <Subtitle>{usedAt}</Subtitle>
+          {usedAt && <Subtitle>{usedAt}</Subtitle>}
         </Flex>
       </Flex>
     </Container>
diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/LocalLiveAppSection.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/LocalLiveAppSection.tsx
new file mode 100644
index 000000000000..1f90ecc477f7
--- /dev/null
+++ b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/LocalLiveAppSection.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Flex } from "@ledgerhq/react-ui";
+import { MinimumCard } from "./Card";
+import styled from "styled-components";
+import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
+import { useHistory } from "react-router";
+import { SectionHeader } from "./SectionHeader";
+import { useTranslation } from "react-i18next";
+
+export function LocalLiveAppSection({ localLiveApps }: { localLiveApps: LiveAppManifest[] }) {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDirection="column" marginBottom={4}>
+      <SectionHeader iconLeft="Download">
+        {t("platform.catalog.section.locallyLoaded")}
+      </SectionHeader>
+      <Scroll>
+        {localLiveApps.map(manifest => (
+          <Flex key={manifest.id} margin={2}>
+            <MinimumCard
+              manifest={manifest}
+              onClick={(manifest: LiveAppManifest) => history.push(`/platform/${manifest.id}`)}
+            />
+          </Flex>
+        ))}
+      </Scroll>
+    </Flex>
+  );
+}
+
+const Scroll = styled(Flex).attrs({ overflowX: "scroll" })`
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/index.tsx
index c1a8d4cd18d8..073b426ca46d 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/index.tsx
@@ -4,13 +4,15 @@ import { Text, Flex } from "@ledgerhq/react-ui";
 import { RecentlyUsed } from "./RecentlyUsed";
 import { Browse } from "./Browse";
 import { useTranslation } from "react-i18next";
-import { useCatalog, useDiscoverDB } from "../hooks";
+import { useCatalog, useRecentlyUsedDB } from "../hooks";
+import { LocalLiveAppSection } from "./LocalLiveAppSection";
 
 export function Catalog() {
-  const discoverDB = useDiscoverDB();
+  const recentlyUsedDB = useRecentlyUsedDB();
 
   const { t } = useTranslation();
-  const { categories, recentlyUsed, disclaimer, search } = useCatalog(discoverDB);
+  const { categories, recentlyUsed, disclaimer, search, localLiveApps } =
+    useCatalog(recentlyUsedDB);
 
   return (
     <Flex flexDirection="column" paddingBottom={100}>
@@ -20,6 +22,8 @@ export function Catalog() {
         {t("platform.catalog.title")}
       </Text>
 
+      {localLiveApps.length ? <LocalLiveAppSection localLiveApps={localLiveApps} /> : null}
+
       {recentlyUsed.data.length ? (
         <RecentlyUsed recentlyUsed={recentlyUsed} disclaimer={disclaimer} />
       ) : null}
diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/hooks.ts b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/hooks.ts
index 9afb043f8c2b..a9cbb17043b5 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/hooks.ts
+++ b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/hooks.ts
@@ -21,12 +21,14 @@ import { useCallback, useMemo } from "react";
 import { useHistory } from "react-router";
 import { closePlatformAppDrawer, openPlatformAppDisclaimerDrawer } from "~/renderer/actions/UI";
 import { useManifests } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
+import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
-export function useCatalog(db: RecentlyUsedDB) {
+export function useCatalog(recentlyUsedDB: RecentlyUsedDB) {
   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 } = useLocalLiveAppContext();
 
   const search = useSearch({
     list: combinedManifests,
@@ -50,11 +52,11 @@ export function useCatalog(db: RecentlyUsedDB) {
     recentlyUsed,
     disclaimer,
     search,
+    localLiveApps,
   };
 }
 
-// TODO: rename to useRecentlyUsedDB
-export function useDiscoverDB() {
+export function useRecentlyUsedDB() {
   return useDB("app", DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, state => state.recentlyUsed);
 }
 
diff --git a/apps/ledger-live-desktop/src/renderer/screens/recover/Player.tsx b/apps/ledger-live-desktop/src/renderer/screens/recover/Player.tsx
index ac9a97e5e7db..81c452c2e698 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/recover/Player.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/recover/Player.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { RouteComponentProps, useHistory } from "react-router-dom";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import { useOnboardingStatePolling } from "@ledgerhq/live-common/onboarding/hooks/useOnboardingStatePolling";
 import { OnboardingStep } from "@ledgerhq/live-common/hw/extractOnboardingState";
 import { counterValueCurrencySelector, languageSelector } from "~/renderer/reducers/settings";
@@ -12,6 +11,7 @@ import { getCurrentDevice } from "~/renderer/reducers/devices";
 import styled from "styled-components";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { StaticContext } from "react-router";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
 const pollingPeriodMs = 1000;
 
diff --git a/apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/RunLocalAppButton.tsx b/apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/RunLocalAppButton.tsx
index aa6d2213e0a1..1bebb7639d89 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/RunLocalAppButton.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/RunLocalAppButton.tsx
@@ -4,13 +4,13 @@ import React, { useCallback } from "react";
 import Button from "~/renderer/components/Button";
 import { useTranslation } from "react-i18next";
 import { readFile, writeFile } from "fs";
-import { useLocalLiveAppContext } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import { SettingsSectionRow as Row } from "../../SettingsSection";
 import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import { Flex } from "@ledgerhq/react-ui";
 import { useDispatch } from "react-redux";
 import { openModal } from "~/renderer/actions/modals";
+import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 
 const ButtonContainer = styled.div`
@@ -23,7 +23,7 @@ const RunLocalAppButton = () => {
   const { t } = useTranslation();
   const {
     addLocalManifest,
-    state: { liveAppByIndex },
+    state: localLiveApps,
     removeLocalManifestById,
   } = useLocalLiveAppContext();
 
@@ -41,7 +41,7 @@ const RunLocalAppButton = () => {
         })
         .then(function (response) {
           if (!response.canceled && response.filePath) {
-            const exportedManifest = liveAppByIndex.find(
+            const exportedManifest = localLiveApps.find(
               (manifest: LiveAppManifest) => manifest.id === id,
             );
 
@@ -56,7 +56,7 @@ const RunLocalAppButton = () => {
           }
         });
     },
-    [liveAppByIndex],
+    [localLiveApps],
   );
 
   const onBrowseLocalManifest = useCallback(() => {
@@ -121,7 +121,7 @@ const RunLocalAppButton = () => {
           </Button>
         </Flex>
       </Row>
-      {liveAppByIndex.map((manifest: LiveAppManifest) => (
+      {localLiveApps.map((manifest: LiveAppManifest) => (
         <Row key={manifest.id} title={manifest.name} desc={manifest.url as string}>
           <ButtonContainer>
             <Button small primary onClick={() => history.push(`/platform/${manifest.id}`)}>
diff --git a/apps/ledger-live-desktop/src/renderer/screens/swapWeb/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/swapWeb/index.tsx
index 8b7efe79f460..7aff53554e86 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/swapWeb/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/swapWeb/index.tsx
@@ -5,12 +5,12 @@ import { counterValueCurrencySelector, languageSelector } from "~/renderer/reduc
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import WebPlatformPlayer from "~/renderer/components/WebPlatformPlayer";
 import useTheme from "~/renderer/hooks/useTheme";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import { useHistory, useLocation } from "react-router-dom";
 import { WebviewProps } from "~/renderer/components/Web3AppWebview/types";
 import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
 import { captureException } from "~/sentry/internal";
 import { UnableToLoadSwapLiveError } from "~/renderer/screens/exchange/Swap2/Form/SwapWebView";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 
 const DEFAULT_SWAP_APP_ID = "swapWeb";
 
diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json
index 62344b8a37a0..41377fd4be37 100644
--- a/apps/ledger-live-desktop/static/i18n/en/app.json
+++ b/apps/ledger-live-desktop/static/i18n/en/app.json
@@ -27,6 +27,7 @@
       "title": "Discover",
       "section": {
         "recentlyUsed": "Recently used",
+        "locallyLoaded": "Locally Loaded Live Apps",
         "browse": "Browse"
       },
       "filter": {
diff --git a/apps/ledger-live-mobile/src/PlatformAppProviderWrapper.tsx b/apps/ledger-live-mobile/src/PlatformAppProviderWrapper.tsx
index 0b6a929ef0c3..986e3cbd758a 100644
--- a/apps/ledger-live-mobile/src/PlatformAppProviderWrapper.tsx
+++ b/apps/ledger-live-mobile/src/PlatformAppProviderWrapper.tsx
@@ -1,11 +1,17 @@
 import React, { ReactNode } from "react";
 import VersionNumber from "react-native-version-number";
 import { RemoteLiveAppProvider } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
-import { LocalLiveAppProvider } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { LocalLiveAppProvider } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { RampCatalogProvider } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/index";
 import useEnv from "@ledgerhq/live-common/hooks/useEnv";
 import { Platform } from "react-native";
 import { useLocale } from "~/context/Locale";
+import {
+  DISCOVER_STORE_KEY,
+  INITIAL_PLATFORM_STATE,
+} from "@ledgerhq/live-common/wallet-api/constants";
+import { DiscoverDB } from "@ledgerhq/live-common/wallet-api/types";
+import { useDB } from "./db";
 
 type PlatformAppProviderWrapperProps = {
   children: ReactNode;
@@ -20,6 +26,7 @@ export default function PlatformAppProviderWrapper({ children }: PlatformAppProv
   ) as boolean;
   const { locale: lang } = useLocale();
   const isDebugAppEnabled = useEnv<"PLATFORM_DEBUG">("PLATFORM_DEBUG") as boolean;
+  const localLiveAppDB = useLocalLiveAppDB();
 
   return (
     <RemoteLiveAppProvider
@@ -32,7 +39,7 @@ export default function PlatformAppProviderWrapper({ children }: PlatformAppProv
         lang,
       }}
     >
-      <LocalLiveAppProvider>
+      <LocalLiveAppProvider db={localLiveAppDB}>
         <RampCatalogProvider updateFrequency={AUTO_UPDATE_DEFAULT_DELAY}>
           {children}
         </RampCatalogProvider>
@@ -40,3 +47,11 @@ export default function PlatformAppProviderWrapper({ children }: PlatformAppProv
     </RemoteLiveAppProvider>
   );
 }
+
+function useLocalLiveAppDB() {
+  return useDB<DiscoverDB, DiscoverDB["localLiveApp"]>(
+    DISCOVER_STORE_KEY,
+    INITIAL_PLATFORM_STATE,
+    state => state.localLiveApp || INITIAL_PLATFORM_STATE.localLiveApp,
+  );
+}
diff --git a/apps/ledger-live-mobile/src/families/evm/StakingDrawer/EvmStakingDrawerProvider.tsx b/apps/ledger-live-mobile/src/families/evm/StakingDrawer/EvmStakingDrawerProvider.tsx
index 42f0841a9a2f..7e0a5f4cbc56 100644
--- a/apps/ledger-live-mobile/src/families/evm/StakingDrawer/EvmStakingDrawerProvider.tsx
+++ b/apps/ledger-live-mobile/src/families/evm/StakingDrawer/EvmStakingDrawerProvider.tsx
@@ -3,8 +3,9 @@ import { TouchableOpacity } from "react-native";
 import { useTranslation } from "react-i18next";
 
 import { Flex, Icon, Text, Tag } from "@ledgerhq/native-ui";
-import { useManifest } from "@ledgerhq/live-common/platform/hooks/useManifest";
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
+import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 
 import { EvmStakingDrawerProviderIcon } from "./EvmStakingDrawerProviderIcon";
 import { ListProvider } from "./types";
@@ -32,8 +33,11 @@ export function EvmStakingDrawerProvider({
   onProviderPress,
   redirectIfOneProvider,
 }: Props) {
+  const localManifest = useLocalLiveAppManifest(provider.liveAppId);
+  const remoteManifest = useRemoteLiveAppManifest(provider.liveAppId);
+  const manifest = remoteManifest || localManifest;
+
   const { t, i18n } = useTranslation();
-  const manifest = useManifest(provider.liveAppId);
   const hasTag: boolean =
     !!provider?.min && i18n.exists(`stake.ethereum.providers.${provider.id}.tag`);
 
diff --git a/apps/ledger-live-mobile/src/families/tron/Votes/index.tsx b/apps/ledger-live-mobile/src/families/tron/Votes/index.tsx
index 8923a7d19f05..c8a77604458d 100644
--- a/apps/ledger-live-mobile/src/families/tron/Votes/index.tsx
+++ b/apps/ledger-live-mobile/src/families/tron/Votes/index.tsx
@@ -26,9 +26,10 @@ import IlluRewards from "~/icons/images/Rewards";
 import ProgressCircle from "~/components/ProgressCircle";
 import AccountDelegationInfo from "~/components/AccountDelegationInfo";
 import AccountSectionLabel from "~/components/AccountSectionLabel";
-import { useManifest } from "@ledgerhq/live-common/platform/hooks/useManifest";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { ScreenName } from "../../../const";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
+import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import { useAccountUnit } from "~/hooks/useAccountUnit";
 
 type Props = {
@@ -62,8 +63,9 @@ const Delegation = ({ account }: Props) => {
   const totalVotesUsed = votes.reduce((sum, { voteCount }) => sum + voteCount, 0);
   const hasRewards = BigNumber(unwithdrawnReward).gt(0);
   const percentVotesUsed = totalVotesUsed / tronPower;
-
-  const manifest = useManifest("stakekit");
+  const localManifest = useLocalLiveAppManifest("stakekit");
+  const remoteManifest = useRemoteLiveAppManifest("stakekit");
+  const manifest = remoteManifest || localManifest;
 
   const navigation = useNavigation<StackNavigationProp<ParamListBase, string, ScreenName>>();
 
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
index 15af0d818d37..06902372321f 100644
--- a/apps/ledger-live-mobile/src/locales/en/common.json
+++ b/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"
       },
diff --git a/apps/ledger-live-mobile/src/screens/PTX/BuyAndSell/index.tsx b/apps/ledger-live-mobile/src/screens/PTX/BuyAndSell/index.tsx
index d5056e36be77..35ac1bc2e5cf 100644
--- a/apps/ledger-live-mobile/src/screens/PTX/BuyAndSell/index.tsx
+++ b/apps/ledger-live-mobile/src/screens/PTX/BuyAndSell/index.tsx
@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import semver from "semver";
 import { getParentAccount, isTokenAccount } from "@ledgerhq/live-common/account/index";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import {
   useRemoteLiveAppContext,
   useRemoteLiveAppManifest,
diff --git a/apps/ledger-live-mobile/src/screens/PTX/Earn/index.tsx b/apps/ledger-live-mobile/src/screens/PTX/Earn/index.tsx
index 9844fa9770e3..6d1a2aa8f74b 100644
--- a/apps/ledger-live-mobile/src/screens/PTX/Earn/index.tsx
+++ b/apps/ledger-live-mobile/src/screens/PTX/Earn/index.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from "react";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import {
   useRemoteLiveAppContext,
   useRemoteLiveAppManifest,
diff --git a/apps/ledger-live-mobile/src/screens/Platform/Catalog/AppCard.tsx b/apps/ledger-live-mobile/src/screens/Platform/Catalog/AppCard.tsx
index 5188db3a35da..8b29b88e038c 100644
--- a/apps/ledger-live-mobile/src/screens/Platform/Catalog/AppCard.tsx
+++ b/apps/ledger-live-mobile/src/screens/Platform/Catalog/AppCard.tsx
@@ -64,10 +64,12 @@ const AppCard = ({ manifest, onPress }: Props) => {
     () => getBranchStyle(manifest.branch, colors),
     [colors, manifest.branch],
   );
+
   const description = useMemo(
     () => translateContent(manifest.content.shortDescription, locale),
     [locale, manifest.content.shortDescription],
   );
+
   return (
     <TouchableOpacity disabled={isDisabled} onPress={handlePress}>
       <View
diff --git a/apps/ledger-live-mobile/src/screens/Platform/LiveApp.tsx b/apps/ledger-live-mobile/src/screens/Platform/LiveApp.tsx
index e60914b0c12c..af67e026182b 100644
--- a/apps/ledger-live-mobile/src/screens/Platform/LiveApp.tsx
+++ b/apps/ledger-live-mobile/src/screens/Platform/LiveApp.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import {
   useRemoteLiveAppContext,
   useRemoteLiveAppManifest,
diff --git a/apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/LocalLiveApp.tsx b/apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/LocalLiveApp.tsx
new file mode 100644
index 000000000000..3234e1990c29
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/index.tsx b/apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/index.tsx
index 939e56950014..b0164c3c5187 100644
--- a/apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/index.tsx
+++ b/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} />}
diff --git a/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts b/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts
index 5d2db8579f57..96726048f72e 100644
--- a/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts
+++ b/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts
@@ -6,6 +6,8 @@ import {
   useRecentlyUsed,
   DisclaimerRaw,
 } from "@ledgerhq/live-common/wallet-api/react";
+import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
+
 import {
   INITIAL_PLATFORM_STATE,
   DAPP_DISCLAIMER_ID,
@@ -24,12 +26,13 @@ import { NavigationProps } from "./types";
 import { useManifests } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 
 export function useCatalog() {
-  const db = useDiscoverDB();
+  const recentlyUsedDB = useRecentlyUsedDB();
+  const { state: localLiveApps } = useLocalLiveAppContext();
   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 search = useSearch<AppManifest, TextInput>({
     list: combinedManifests,
@@ -62,8 +65,9 @@ export function useCatalog() {
       recentlyUsed,
       search,
       disclaimer,
+      localLiveApps,
     }),
-    [categories, recentlyUsed, search, disclaimer],
+    [categories, recentlyUsed, search, disclaimer, localLiveApps],
   );
 }
 
@@ -167,7 +171,7 @@ function useDisclaimer(appendRecentlyUsed: (manifest: AppManifest) => void): Dis
   };
 }
 
-function useDiscoverDB() {
+function useRecentlyUsedDB() {
   return useDB<DiscoverDB, DiscoverDB["recentlyUsed"]>(
     DISCOVER_STORE_KEY,
     INITIAL_PLATFORM_STATE,
diff --git a/apps/ledger-live-mobile/src/screens/Protect/Player.tsx b/apps/ledger-live-mobile/src/screens/Protect/Player.tsx
index 5571eb194cc0..09d4ea5b78be 100644
--- a/apps/ledger-live-mobile/src/screens/Protect/Player.tsx
+++ b/apps/ledger-live-mobile/src/screens/Protect/Player.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import {
   useRemoteLiveAppContext,
   useRemoteLiveAppManifest,
diff --git a/apps/ledger-live-mobile/src/screens/Settings/Developer/CustomManifest.tsx b/apps/ledger-live-mobile/src/screens/Settings/Developer/CustomManifest.tsx
index b98825ce5430..5c09cef0e16b 100644
--- a/apps/ledger-live-mobile/src/screens/Settings/Developer/CustomManifest.tsx
+++ b/apps/ledger-live-mobile/src/screens/Settings/Developer/CustomManifest.tsx
@@ -1,74 +1,21 @@
-import React, { useState, useMemo, useCallback, useLayoutEffect } from "react";
+import React, { useState, useCallback, useLayoutEffect } from "react";
 import { TextInput, StyleSheet, TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { useTheme, CompositeScreenProps } from "@react-navigation/native";
-import { useLocalLiveAppContext } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
+import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { Box } from "@ledgerhq/native-ui";
 import NavigationScrollView from "~/components/NavigationScrollView";
 import { ScreenName } from "~/const";
 import KeyboardView from "~/components/KeyboardView";
 import ImportIcon from "~/icons/Import";
-import ArrowRight from "~/icons/ArrowRight";
 import type { SettingsNavigatorStackParamList } from "~/components/RootNavigator/types/SettingsNavigator";
 import type { BaseNavigatorStackParamList } from "~/components/RootNavigator/types/BaseNavigator";
 import type { StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
+import AppCard from "~/screens/Platform/Catalog/AppCard";
+import Plus from "~/icons/Plus";
+import Trash from "~/icons/Trash";
 
-const DebuggerButton: React.ComponentType<{
-  onPress: TouchableOpacityProps["onPress"];
-}> = ({ onPress }) => {
-  const { colors } = useTheme();
-  return (
-    <TouchableOpacity style={styles.buttons} onPress={onPress}>
-      <ImportIcon size={18} color={colors.grey} />
-    </TouchableOpacity>
-  );
-};
-
-const OpenButton: React.ComponentType<{
-  onPress: TouchableOpacityProps["onPress"];
-  disabled: boolean;
-}> = ({ onPress, disabled }) => {
-  const { colors } = useTheme();
-  return (
-    <TouchableOpacity style={styles.buttons} onPress={onPress} disabled={disabled}>
-      <ArrowRight size={18} color={colors.black} />
-    </TouchableOpacity>
-  );
-};
-
-type Props = CompositeScreenProps<
-  StackNavigatorProps<SettingsNavigatorStackParamList, ScreenName.DeveloperCustomManifest>,
-  StackNavigatorProps<BaseNavigatorStackParamList>
->;
-
-export default function CustomManifest({ navigation }: Props) {
-  const { colors } = useTheme();
-  const { manifest, disabled, addLocalManifest, onChange } = useCustomManifest();
-  const onOpen = useCallback(() => {
-    const json = JSON.parse(manifest);
-    Array.isArray(json) ? json.map(m => addLocalManifest(m)) : addLocalManifest(json);
-    const params = Array.isArray(json)
-      ? {
-          platform: json[0].id,
-          name: json[0].name,
-        }
-      : {
-          platform: json.id,
-          name: json.name,
-        };
-    navigation.navigate({
-      name: ScreenName.PlatformApp,
-      params,
-    });
-  }, [manifest, addLocalManifest, navigation]);
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <Box flexDirection="row">
-          <DebuggerButton
-            onPress={() =>
-              onChange(`
-{
-  "id": "metamask-test-dapp",
+const DEFAULT_MANIFEST = `{
+  "id": "metamask-test-dapsp",
   "name": "Metamask Test Dapp",
   "private": false,
   "url": "https://metamask.github.io/test-dapp/",
@@ -120,16 +67,79 @@ export default function CustomManifest({ navigation }: Props) {
   "permissions": [],
   "domains": ["http://", "https://"],
   "visibility": "complete"
-}
+}`;
+
+const DebuggerButton: React.ComponentType<{
+  onPress: TouchableOpacityProps["onPress"];
+}> = ({ onPress }) => {
+  const { colors } = useTheme();
+  return (
+    <TouchableOpacity style={styles.buttons} onPress={onPress}>
+      <ImportIcon size={18} color={colors.grey} />
+    </TouchableOpacity>
+  );
+};
+
+const AddButton: React.ComponentType<{
+  onPress: TouchableOpacityProps["onPress"];
+  disabled: boolean;
+}> = ({ onPress, disabled }) => {
+  const { colors } = useTheme();
+  return (
+    <TouchableOpacity style={styles.buttons} onPress={onPress} disabled={disabled}>
+      <Plus size={18} color={disabled ? colors.grey : colors.black} />
+    </TouchableOpacity>
+  );
+};
+
+type Props = CompositeScreenProps<
+  StackNavigatorProps<SettingsNavigatorStackParamList, ScreenName.DeveloperCustomManifest>,
+  StackNavigatorProps<BaseNavigatorStackParamList>
+>;
+
+export default function CustomManifest({ navigation }: Props) {
+  const { colors } = useTheme();
+  const { state: list, addLocalManifest, removeLocalManifestById } = useLocalLiveAppContext();
+  const [manifest, setManifest] = useState<string | null>(null);
+
+  const onChange = useCallback((val: string) => {
+    try {
+      setManifest(val);
+    } catch (e) {
+      setManifest(val);
+    }
+  }, []);
+
+  const onOpen = useCallback(
+    (id: string) => {
+      const params = {
+        platform: id,
+      };
+      navigation.navigate({
+        name: ScreenName.PlatformApp,
+        params,
+      });
+    },
+    [navigation],
+  );
 
-          `)
-            }
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Box flexDirection="row">
+          <DebuggerButton onPress={() => onChange(JSON.stringify(JSON.parse(DEFAULT_MANIFEST)))} />
+          <AddButton
+            disabled={manifest === null}
+            onPress={() => {
+              manifest !== null && addLocalManifest(JSON.parse(manifest));
+              setManifest(null);
+            }}
           />
-          <OpenButton disabled={disabled} onPress={onOpen} />
         </Box>
       ),
     });
-  }, [disabled, navigation, onChange, onOpen]);
+  }, [addLocalManifest, manifest, navigation, onChange, onOpen, removeLocalManifestById]);
+
   return (
     <KeyboardView>
       <NavigationScrollView>
@@ -137,58 +147,64 @@ export default function CustomManifest({ navigation }: Props) {
           style={[
             styles.input,
             {
-              color: colors.text,
               borderColor: colors.border,
             },
           ]}
-          value={manifest}
+          value={manifest === null ? "" : manifest}
           onChangeText={onChange}
           placeholder="Paste your manifest json"
           multiline
           autoCorrect={false}
           scrollEnabled={false}
         />
+        <>
+          {list.map(m => {
+            return (
+              <Box key={m.id} flexDirection="row">
+                <TouchableOpacity
+                  style={styles.appCardBox}
+                  onLongPress={() => {
+                    removeLocalManifestById(m.id);
+                  }}
+                >
+                  <AppCard
+                    manifest={m}
+                    onPress={() => {
+                      onOpen(m.id);
+                    }}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.buttonBox}
+                  onPress={() => {
+                    removeLocalManifestById(m.id);
+                  }}
+                >
+                  <Trash size={18} color={colors.black} />
+                </TouchableOpacity>
+              </Box>
+            );
+          })}
+        </>
       </NavigationScrollView>
     </KeyboardView>
   );
 }
 
-function useCustomManifest() {
-  const [manifest, setManifest] = useState("");
-  const { addLocalManifest } = useLocalLiveAppContext();
-  const onChange = useCallback((val: string) => {
-    try {
-      const json = JSON.parse(val);
-      setManifest(JSON.stringify(json, null, 2));
-    } catch (e) {
-      setManifest(val);
-    }
-  }, []);
-  const disabled = useMemo(() => {
-    if (!manifest) {
-      return true;
-    }
-
-    try {
-      JSON.parse(manifest);
-      return false;
-    } catch (e) {
-      return true;
-    }
-  }, [manifest]);
-  return {
-    manifest,
-    disabled,
-    onChange,
-    addLocalManifest,
-  };
-}
-
 const styles = StyleSheet.create({
   root: {
     flex: 1,
     padding: 16,
   },
+  buttonBox: {
+    marginBottom: 16,
+    display: "flex",
+    justifyContent: "center",
+    paddingHorizontal: 10,
+  },
+  appCardBox: {
+    flex: 1,
+  },
   input: {
     flex: 1,
     borderWidth: 1,
diff --git a/libs/ledger-live-common/.unimportedrc.json b/libs/ledger-live-common/.unimportedrc.json
index a83b873f07cc..d49be6e988c5 100644
--- a/libs/ledger-live-common/.unimportedrc.json
+++ b/libs/ledger-live-common/.unimportedrc.json
@@ -239,12 +239,12 @@
     "src/platform/hooks/useManifest.ts",
     "src/platform/JSONRPCServer.ts",
     "src/platform/logic.ts",
-    "src/platform/providers/LocalLiveAppProvider/index.ts",
+    "src/wallet-api/LocalLiveAppProvider/index.tsx",
     "src/platform/providers/RampCatalogProvider/index.ts",
     "src/platform/providers/RampCatalogProvider/types.ts",
     "src/platform/providers/RampCatalogProvider/useRampCatalog.ts",
     "src/platform/providers/RemoteLiveAppProvider/api/index.ts",
-    "src/platform/providers/RemoteLiveAppProvider/index.ts",
+    "src/platform/providers/RemoteLiveAppProvider/index.tsx",
     "src/platform/rawTypes.ts",
     "src/platform/react.ts",
     "src/platform/serializers.ts",
diff --git a/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts b/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts
deleted file mode 100644
index 2b585a5da61b..000000000000
--- a/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { renderHook } from "@testing-library/react";
-
-import { LiveAppManifest } from "../types";
-import { useLocalLiveAppManifest } from "../providers/LocalLiveAppProvider";
-import { useRemoteLiveAppManifest } from "../providers/RemoteLiveAppProvider";
-import { useManifest } from "./useManifest";
-
-jest.mock("../providers/LocalLiveAppProvider");
-jest.mock("../providers/RemoteLiveAppProvider");
-
-const mockUseLocalLiveAppManifest = useLocalLiveAppManifest as jest.Mock;
-const mockUseRemoteLiveAppManifest = useRemoteLiveAppManifest as jest.Mock;
-
-const mockRemoteManifest = {
-  id: "remote-manifest",
-} as LiveAppManifest;
-const mockLocalManifest = {
-  id: "local-manifest",
-} as LiveAppManifest;
-const mockLiveAppID = "mock-live-app-id";
-
-describe("useManifest hook", () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it("should return remoteManifest when it is available", () => {
-    mockUseRemoteLiveAppManifest.mockReturnValue(mockRemoteManifest);
-
-    const { result } = renderHook(() => useManifest(mockLiveAppID));
-
-    expect(result.current).toEqual(mockRemoteManifest);
-    expect(useRemoteLiveAppManifest).toHaveBeenCalledWith(mockLiveAppID);
-  });
-
-  it("should return localManifest when remoteManifest is not available", () => {
-    mockUseRemoteLiveAppManifest.mockReturnValue(undefined);
-    mockUseLocalLiveAppManifest.mockReturnValue(mockLocalManifest);
-
-    const { result } = renderHook(() => useManifest(mockLiveAppID));
-
-    expect(result.current).toEqual(mockLocalManifest);
-    expect(useRemoteLiveAppManifest).toHaveBeenCalledWith(mockLiveAppID);
-    expect(useLocalLiveAppManifest).toHaveBeenCalledWith(mockLiveAppID);
-  });
-
-  it("should return remoteManifest over localManifest when both are available", () => {
-    mockUseLocalLiveAppManifest.mockReturnValue(mockLocalManifest);
-    mockUseRemoteLiveAppManifest.mockReturnValue(mockRemoteManifest);
-
-    const { result } = renderHook(() => useManifest(mockLiveAppID));
-
-    expect(result.current).toEqual(mockRemoteManifest);
-    expect(useRemoteLiveAppManifest).toHaveBeenCalledWith(mockLiveAppID);
-  });
-
-  it("should return undefined when both remoteManifest and localManifest are not available", () => {
-    mockUseRemoteLiveAppManifest.mockReturnValue(undefined);
-    mockUseLocalLiveAppManifest.mockReturnValue(undefined);
-
-    const { result } = renderHook(() => useManifest(mockLiveAppID));
-
-    expect(result.current).toBeUndefined();
-    expect(useRemoteLiveAppManifest).toHaveBeenCalledWith(mockLiveAppID);
-    expect(useLocalLiveAppManifest).toHaveBeenCalledWith(mockLiveAppID);
-  });
-});
diff --git a/libs/ledger-live-common/src/platform/hooks/useManifest.ts b/libs/ledger-live-common/src/platform/hooks/useManifest.ts
deleted file mode 100644
index 3b7b6a451c0a..000000000000
--- a/libs/ledger-live-common/src/platform/hooks/useManifest.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useMemo } from "react";
-import { useLocalLiveAppManifest } from "../providers/LocalLiveAppProvider";
-import { useRemoteLiveAppManifest } from "../providers/RemoteLiveAppProvider";
-import { LiveAppManifest } from "../types";
-
-export function useManifest(appId: string): LiveAppManifest | undefined {
-  const remoteManifest = useRemoteLiveAppManifest(appId);
-  const localManifest = useLocalLiveAppManifest(appId);
-
-  const manifest = useMemo(() => {
-    return remoteManifest || localManifest;
-  }, [remoteManifest, localManifest]);
-
-  return manifest;
-}
diff --git a/libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/index.tsx b/libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/index.tsx
deleted file mode 100644
index 6c2c84531e6f..000000000000
--- a/libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useContext, createContext, useMemo, useState, useCallback } from "react";
-import { LiveAppRegistry } from "./types";
-import { LiveAppManifest } from "../../types";
-
-const initialState: LiveAppRegistry = {
-  liveAppById: {},
-  liveAppByIndex: [],
-};
-
-type LiveAppContextType = {
-  state: LiveAppRegistry;
-  addLocalManifest: (LiveAppManifest) => void;
-  removeLocalManifestById: (string) => void;
-};
-
-export const liveAppContext = createContext<LiveAppContextType>({
-  state: initialState,
-  addLocalManifest: () => {},
-  removeLocalManifestById: () => {},
-});
-
-type LiveAppProviderProps = {
-  children: React.ReactNode;
-};
-
-export function useLocalLiveAppManifest(appId?: string): LiveAppManifest | undefined {
-  const localLiveAppRegistry = useContext(liveAppContext).state;
-
-  return appId ? localLiveAppRegistry.liveAppById[appId] : undefined;
-}
-
-export function useLocalLiveAppContext(): LiveAppContextType {
-  return useContext(liveAppContext);
-}
-
-export function LocalLiveAppProvider({ children }: LiveAppProviderProps): JSX.Element {
-  const [state, setState] = useState<LiveAppRegistry>(initialState);
-
-  const addLocalManifest = useCallback((newManifest: LiveAppManifest) => {
-    setState(oldState => {
-      const liveAppByIndex = oldState.liveAppByIndex.filter(
-        manifest => manifest.id !== newManifest.id,
-      );
-
-      liveAppByIndex.push(newManifest);
-      return {
-        liveAppById: {
-          ...oldState.liveAppById,
-          [newManifest.id]: newManifest,
-        },
-        liveAppByIndex,
-      };
-    });
-  }, []);
-
-  const removeLocalManifestById = useCallback((manifestId: string) => {
-    setState(oldState => {
-      const liveAppByIndex = oldState.liveAppByIndex.filter(manifest => manifest.id !== manifestId);
-
-      const liveAppById = {
-        ...oldState.liveAppById,
-      };
-
-      delete liveAppById[manifestId];
-
-      return {
-        liveAppById,
-        liveAppByIndex,
-      };
-    });
-  }, []);
-
-  const value: LiveAppContextType = useMemo(
-    () => ({
-      state,
-      addLocalManifest,
-      removeLocalManifestById,
-    }),
-    [state, addLocalManifest, removeLocalManifestById],
-  );
-
-  return <liveAppContext.Provider value={value}>{children}</liveAppContext.Provider>;
-}
diff --git a/libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/types.ts b/libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/types.ts
deleted file mode 100644
index 6b13295be6f1..000000000000
--- a/libs/ledger-live-common/src/platform/providers/LocalLiveAppProvider/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LiveAppManifest } from "../../types";
-
-export type LiveAppRegistry = {
-  liveAppById: { [appId: string]: LiveAppManifest };
-  liveAppByIndex: LiveAppManifest[];
-};
-
-export type LiveAppDataAPI = {
-  fetchLiveAppManifests: (url: string) => Promise<LiveAppManifest[]>;
-};
diff --git a/libs/ledger-live-common/src/platform/providers/RemoteLiveAppProvider/types.ts b/libs/ledger-live-common/src/platform/providers/RemoteLiveAppProvider/types.ts
index a99975dadd8f..9e28af772125 100644
--- a/libs/ledger-live-common/src/platform/providers/RemoteLiveAppProvider/types.ts
+++ b/libs/ledger-live-common/src/platform/providers/RemoteLiveAppProvider/types.ts
@@ -6,7 +6,3 @@ export type LiveAppRegistry = {
   liveAppFilteredById: { [appId: string]: LiveAppManifest };
   liveAppFiltered: LiveAppManifest[];
 };
-
-export type LiveAppDataAPI = {
-  fetchLiveAppManifests: (url: string) => Promise<LiveAppManifest[]>;
-};
diff --git a/libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/index.tsx b/libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/index.tsx
new file mode 100644
index 000000000000..8f56f6ff44a3
--- /dev/null
+++ b/libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/index.tsx
@@ -0,0 +1,40 @@
+import React, { useContext, createContext, useMemo } from "react";
+import { LiveAppProviderProps, LiveAppContextType } from "./types";
+import { LiveAppManifest } from "../../platform/types";
+import { useLocalLiveApp } from "../react";
+
+const initialState: LiveAppManifest[] = [];
+
+export const liveAppContext = createContext<LiveAppContextType>({
+  state: initialState,
+  addLocalManifest: () => {},
+  removeLocalManifestById: () => {},
+  getLocalLiveAppManifestById: id => id,
+});
+
+export function LocalLiveAppProvider({ children, db }: LiveAppProviderProps): JSX.Element {
+  const { state, addLocalManifest, removeLocalManifestById, getLocalLiveAppManifestById } =
+    useLocalLiveApp(db);
+
+  const value: LiveAppContextType = useMemo(
+    () => ({
+      state,
+      addLocalManifest,
+      removeLocalManifestById,
+      getLocalLiveAppManifestById,
+    }),
+    [state, addLocalManifest, removeLocalManifestById, getLocalLiveAppManifestById],
+  );
+
+  return <liveAppContext.Provider value={value}>{children}</liveAppContext.Provider>;
+}
+
+export function useLocalLiveAppManifest(appId?: string): LiveAppManifest | undefined {
+  const getLocalLiveAppManifestById = useContext(liveAppContext).getLocalLiveAppManifestById;
+
+  return appId ? getLocalLiveAppManifestById(appId) : undefined;
+}
+
+export function useLocalLiveAppContext(): LiveAppContextType {
+  return useContext(liveAppContext);
+}
diff --git a/libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/types.ts b/libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/types.ts
new file mode 100644
index 000000000000..7ca9a86ef1a2
--- /dev/null
+++ b/libs/ledger-live-common/src/wallet-api/LocalLiveAppProvider/types.ts
@@ -0,0 +1,14 @@
+import { LiveAppManifest } from "../../platform/types";
+import { LocalLiveAppDB } from "../react";
+
+export type LiveAppProviderProps = {
+  children: React.ReactNode;
+  db: LocalLiveAppDB;
+};
+
+export type LiveAppContextType = {
+  state: LiveAppManifest[];
+  addLocalManifest: (LiveAppManifest) => void;
+  removeLocalManifestById: (string) => void;
+  getLocalLiveAppManifestById: (string) => LiveAppManifest | undefined;
+};
diff --git a/libs/ledger-live-common/src/wallet-api/constants.ts b/libs/ledger-live-common/src/wallet-api/constants.ts
index e36c5bec06ef..36c9cec2184e 100644
--- a/libs/ledger-live-common/src/wallet-api/constants.ts
+++ b/libs/ledger-live-common/src/wallet-api/constants.ts
@@ -21,7 +21,11 @@ export const HTTP_REGEX = new RegExp(
   /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)?/gi,
 );
 
-export const INITIAL_PLATFORM_STATE = { recentlyUsed: [], currentAccountHist: {} };
+export const INITIAL_PLATFORM_STATE = {
+  recentlyUsed: [],
+  currentAccountHist: {},
+  localLiveApp: [],
+};
 
 export const MAX_RECENTLY_USED_LENGTH = 10;
 
diff --git a/libs/ledger-live-common/src/wallet-api/react.ts b/libs/ledger-live-common/src/wallet-api/react.ts
index 9f7316ad8a69..5af7950aaede 100644
--- a/libs/ledger-live-common/src/wallet-api/react.ts
+++ b/libs/ledger-live-common/src/wallet-api/react.ts
@@ -44,6 +44,7 @@ import { UserRefusedOnDevice } from "@ledgerhq/errors";
 import { Transaction } from "../generated/types";
 import { DISCOVER_INITIAL_CATEGORY, MAX_RECENTLY_USED_LENGTH } from "./constants";
 import { DiscoverDB } from "./types";
+import { LiveAppManifest } from "../platform/types";
 import { WalletState } from "@ledgerhq/live-wallet/store";
 
 export function safeGetRefValue<T>(ref: RefObject<T>): NonNullable<T> {
@@ -846,8 +847,59 @@ export function useCategories(manifests): Categories {
 }
 
 export type RecentlyUsedDB = StateDB<DiscoverDB, DiscoverDB["recentlyUsed"]>;
+export type LocalLiveAppDB = StateDB<DiscoverDB, DiscoverDB["localLiveApp"]>;
 export type CurrentAccountHistDB = StateDB<DiscoverDB, DiscoverDB["currentAccountHist"]>;
 
+export interface LocalLiveApp {
+  state: LiveAppManifest[];
+  addLocalManifest: (LiveAppManifest) => void;
+  removeLocalManifestById: (string) => void;
+  getLocalLiveAppManifestById: (string) => LiveAppManifest | undefined;
+}
+
+export function useLocalLiveApp([LocalLiveAppDb, setState]: LocalLiveAppDB): LocalLiveApp {
+  const addLocalManifest = useCallback(
+    (newLocalManifest: LiveAppManifest) => {
+      setState(discoverDB => {
+        const newLocalLiveAppList = discoverDB.localLiveApp.filter(
+          manifest => manifest.id !== newLocalManifest.id,
+        );
+
+        newLocalLiveAppList.push(newLocalManifest);
+        return { ...discoverDB, localLiveApp: newLocalLiveAppList };
+      });
+    },
+    [setState],
+  );
+
+  const removeLocalManifestById = useCallback(
+    (manifestId: string) => {
+      setState(discoverDB => {
+        const newLocalLiveAppList = discoverDB.localLiveApp.filter(
+          manifest => manifest.id !== manifestId,
+        );
+
+        return { ...discoverDB, localLiveApp: newLocalLiveAppList };
+      });
+    },
+    [setState],
+  );
+
+  const getLocalLiveAppManifestById = useCallback(
+    (manifestId: string): LiveAppManifest | undefined => {
+      return LocalLiveAppDb.find(manifest => manifest.id === manifestId);
+    },
+    [LocalLiveAppDb],
+  );
+
+  return {
+    state: LocalLiveAppDb,
+    addLocalManifest,
+    removeLocalManifestById,
+    getLocalLiveAppManifestById,
+  };
+}
+
 export interface RecentlyUsed {
   data: RecentlyUsedManifest[];
   append: (manifest: AppManifest) => void;
diff --git a/libs/ledger-live-common/src/wallet-api/types.ts b/libs/ledger-live-common/src/wallet-api/types.ts
index 30325bd03641..725253c037c5 100644
--- a/libs/ledger-live-common/src/wallet-api/types.ts
+++ b/libs/ledger-live-common/src/wallet-api/types.ts
@@ -64,6 +64,7 @@ export type ConvertToLiveTransaction<T extends WalletAPITransaction, U extends T
 
 export type DiscoverDB = {
   recentlyUsed: RecentlyUsedIdDb[];
+  localLiveApp: LiveAppManifest[];
   currentAccountHist: CurrentAccountHistIDb;
 };