feat: add local db live apps to discover

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 (manifest.usedAt) {
+      const rtf = new Intl.RelativeTimeFormat(lang);
+      return rtf.format(-manifest.usedAt.diff, manifest.usedAt.unit);
+    } else return;
+  }, [lang, manifest.usedAt]);
 
   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>

apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/LocalLiveAppSection.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Flex, Text } 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[] }) {
+  console.log("localLiveApps", localLiveApps);
+  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;
+  }
+`;

apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/index.tsx

@@ -4,13 +4,18 @@ import { Text, Flex } from "@ledgerhq/react-ui";
 import { RecentlyUsed } from "./RecentlyUsed";
 import { Browse } from "./Browse";
 import { useTranslation } from "react-i18next";
-import { useCatalog, useRecentlyUsedDB } from "../hooks";
+import { useCatalog, useRecentlyUsedDB, useLocalLiveAppDB } from "../hooks";
+import { LocalLiveAppSection } from "./LocalLiveAppSection";
 
 export function Catalog() {
   const recentlyUsedDB = useRecentlyUsedDB();
+  const localLiveAppDB = useLocalLiveAppDB();
 
   const { t } = useTranslation();
-  const { categories, recentlyUsed, disclaimer, search } = useCatalog(recentlyUsedDB);
+  const { categories, recentlyUsed, disclaimer, search, localLiveApps } = useCatalog(
+    recentlyUsedDB,
+    localLiveAppDB,
+  );
 
   return (
     <Flex flexDirection="column" paddingBottom={100}>
@@ -20,6 +25,8 @@ export function Catalog() {
         {t("platform.catalog.title")}
       </Text>
 
+      {localLiveApps.length ? <LocalLiveAppSection localLiveApps={localLiveApps} /> : null}
+
       {recentlyUsed.data.length ? (
         <RecentlyUsed recentlyUsed={recentlyUsed} disclaimer={disclaimer} />
       ) : null}

apps/ledger-live-desktop/src/renderer/screens/platform/v2/hooks.ts

@@ -10,6 +10,8 @@ import {
   useRecentlyUsed,
   RecentlyUsedDB,
   DisclaimerRaw,
+  useLocalLiveApp,
+  LocalLiveAppDB,
 } from "@ledgerhq/live-common/wallet-api/react";
 import { SearchRaw, useSearch } from "@ledgerhq/live-common/hooks/useSearch";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
@@ -22,11 +24,12 @@ import { useHistory } from "react-router";
 import { closePlatformAppDrawer, openPlatformAppDisclaimerDrawer } from "~/renderer/actions/UI";
 import { useManifests } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 
-export function useCatalog(db: RecentlyUsedDB) {
+export function useCatalog(recentlyUsedDB: RecentlyUsedDB, localLiveAppDB: LocalLiveAppDB) {
   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 } = useLocalLiveApp(localLiveAppDB);
 
   const search = useSearch({
     list: combinedManifests,
@@ -50,6 +53,7 @@ export function useCatalog(db: RecentlyUsedDB) {
     recentlyUsed,
     disclaimer,
     search,
+    localLiveApps,
   };
 }
 
@@ -58,7 +62,13 @@ export function useRecentlyUsedDB() {
 }
 
 export function useLocalLiveAppDB() {
-  return useDB("app", DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, state => state.localLiveApp);
+  //TODO : Change key to DISCOVER_STORE_KEY
+  return useDB(
+    "app",
+    "localApps" as keyof DatabaseValues,
+    INITIAL_PLATFORM_STATE,
+    state => state.localLiveApp,
+  );
 }
 
 export function useCurrentAccountHistDB() {

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": {

libs/ledger-live-common/src/wallet-api/react.ts

@@ -840,17 +840,17 @@ export function useCategories(manifests): Categories {
 }
 
 export type RecentlyUsedDB = StateDB<DiscoverDB, DiscoverDB["recentlyUsed"]>;
-export type LocalLiveAppDb = StateDB<DiscoverDB, DiscoverDB["localLiveApp"]>;
+export type LocalLiveAppDB = StateDB<DiscoverDB, DiscoverDB["localLiveApp"]>;
 export type CurrentAccountHistDB = StateDB<DiscoverDB, DiscoverDB["currentAccountHist"]>;
 
-interface LocalLiveApp {
+export interface LocalLiveApp {
   state: LiveAppManifest[];
   addLocalManifest: (LiveAppManifest) => void;
   removeLocalManifestById: (string) => void;
   getLocalLiveAppManifestById: (string) => LiveAppManifest | undefined;
 }
 
-export function useLocalLiveApp([LocalLiveAppDb, setState]: LocalLiveAppDb): LocalLiveApp {
+export function useLocalLiveApp([LocalLiveAppDb, setState]: LocalLiveAppDB): LocalLiveApp {
   const addLocalManifest = useCallback(
     (newLocalManifest: LiveAppManifest) => {
       setState(discoverDB => {