From a977310d2416e357348aafed65db21d814b2af64 Mon Sep 17 00:00:00 2001 From: RamyEB Date: Thu, 18 Apr 2024 18:08:57 +0200 Subject: [PATCH 01/16] feat: create useLocalLiveApp hook --- .../screens/platform/v2/Catalog/index.tsx | 6 +-- .../src/renderer/screens/platform/v2/hooks.ts | 7 ++- .../src/wallet-api/constants.ts | 6 ++- .../src/wallet-api/react.ts | 52 +++++++++++++++++++ .../src/wallet-api/types.ts | 1 + 5 files changed, 66 insertions(+), 6 deletions(-) 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 c1a8d4cd18d..df0ab02a779 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,13 @@ 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"; export function Catalog() { - const discoverDB = useDiscoverDB(); + const recentlyUsedDB = useRecentlyUsedDB(); const { t } = useTranslation(); - const { categories, recentlyUsed, disclaimer, search } = useCatalog(discoverDB); + const { categories, recentlyUsed, disclaimer, search } = useCatalog(recentlyUsedDB); return ( 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 9afb043f8c2..e143f8e2a12 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 @@ -53,11 +53,14 @@ export function useCatalog(db: RecentlyUsedDB) { }; } -// TODO: rename to useRecentlyUsedDB -export function useDiscoverDB() { +export function useRecentlyUsedDB() { return useDB("app", DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, state => state.recentlyUsed); } +export function useLocalLiveAppDB() { + return useDB("app", DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, state => state.localLiveApp); +} + export function useCurrentAccountHistDB() { return useDB( "app", diff --git a/libs/ledger-live-common/src/wallet-api/constants.ts b/libs/ledger-live-common/src/wallet-api/constants.ts index e36c5bec06e..36c9cec2184 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 9f7316ad8a6..c1de7de9800 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(ref: RefObject): NonNullable { @@ -846,8 +847,59 @@ export function useCategories(manifests): Categories { } export type RecentlyUsedDB = StateDB; +export type LocalLiveAppDb = StateDB; export type CurrentAccountHistDB = StateDB; +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, 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 30325bd0364..725253c037c 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 Date: Mon, 22 Apr 2024 17:41:11 +0200 Subject: [PATCH 02/16] feat: add local db live apps to discover --- .../platform/v2/Catalog/Card/Minimum.tsx | 13 ++++--- .../v2/Catalog/LocalLiveAppSection.tsx | 38 +++++++++++++++++++ .../screens/platform/v2/Catalog/index.tsx | 11 +++++- .../src/renderer/screens/platform/v2/hooks.ts | 16 ++++++-- .../static/i18n/en/app.json | 1 + .../src/wallet-api/react.ts | 6 +-- 6 files changed, 72 insertions(+), 13 deletions(-) create mode 100644 apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/LocalLiveAppSection.tsx 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 721e9760e68..f59d1623067 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) { +export function MinimumCard(props: PropsCard) { 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 ( @@ -27,7 +30,7 @@ export function MinimumCard(props: PropsCard) { {manifest.name} - {usedAt} + {usedAt && {usedAt}} 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 00000000000..59e1b31fa5e --- /dev/null +++ b/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 ( + + + {t("platform.catalog.section.locallyLoaded")} + + + {localLiveApps.map(manifest => ( + + history.push(`/platform/${manifest.id}`)} + /> + + ))} + + + ); +} + +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 df0ab02a779..fad71442fc1 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,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 ( @@ -20,6 +25,8 @@ export function Catalog() { {t("platform.catalog.title")} + {localLiveApps.length ? : null} + {recentlyUsed.data.length ? ( ) : 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 e143f8e2a12..10ee2d74290 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 @@ -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() { diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json index 62344b8a37a..41377fd4be3 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/libs/ledger-live-common/src/wallet-api/react.ts b/libs/ledger-live-common/src/wallet-api/react.ts index c1de7de9800..e37148cc6ae 100644 --- a/libs/ledger-live-common/src/wallet-api/react.ts +++ b/libs/ledger-live-common/src/wallet-api/react.ts @@ -847,17 +847,17 @@ export function useCategories(manifests): Categories { } export type RecentlyUsedDB = StateDB; -export type LocalLiveAppDb = StateDB; +export type LocalLiveAppDB = StateDB; export type CurrentAccountHistDB = StateDB; -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 => { From 1d1b018e80fd42835c1a12873e0fa67af770b636 Mon Sep 17 00:00:00 2001 From: RamyEB Date: Tue, 23 Apr 2024 11:13:15 +0200 Subject: [PATCH 03/16] fix: repare removeManifestById --- .../screens/platform/v2/Catalog/LocalLiveAppSection.tsx | 2 +- .../src/renderer/screens/platform/v2/hooks.ts | 7 +------ libs/ledger-live-common/src/wallet-api/react.ts | 2 +- 3 files changed, 3 insertions(+), 8 deletions(-) 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 index 59e1b31fa5e..9a813e03b9a 100644 --- 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 @@ -1,5 +1,5 @@ import React from "react"; -import { Flex, Text } from "@ledgerhq/react-ui"; +import { Flex } from "@ledgerhq/react-ui"; import { MinimumCard } from "./Card"; import styled from "styled-components"; import { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; 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 10ee2d74290..d8568d60fd1 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 @@ -63,12 +63,7 @@ export function useRecentlyUsedDB() { export function useLocalLiveAppDB() { //TODO : Change key to DISCOVER_STORE_KEY - return useDB( - "app", - "localApps" as keyof DatabaseValues, - INITIAL_PLATFORM_STATE, - state => state.localLiveApp, - ); + return useDB("app", "toReplace", INITIAL_PLATFORM_STATE, state => state.localLiveApp); } export function useCurrentAccountHistDB() { diff --git a/libs/ledger-live-common/src/wallet-api/react.ts b/libs/ledger-live-common/src/wallet-api/react.ts index e37148cc6ae..5af7950aaed 100644 --- a/libs/ledger-live-common/src/wallet-api/react.ts +++ b/libs/ledger-live-common/src/wallet-api/react.ts @@ -879,7 +879,7 @@ export function useLocalLiveApp([LocalLiveAppDb, setState]: LocalLiveAppDB): Loc manifest => manifest.id !== manifestId, ); - return { ...discoverDB, newLocalLiveAppList }; + return { ...discoverDB, localLiveApp: newLocalLiveAppList }; }); }, [setState], From 0cbb51895a9aef9a06250076a7da51def3b5623d Mon Sep 17 00:00:00 2001 From: RamyEB Date: Fri, 26 Apr 2024 15:53:14 +0200 Subject: [PATCH 04/16] feat: display locally loaded app on mobile --- .../src/locales/en/common.json | 1 + .../Platform/v2/Catalog/LocalLiveApp.tsx | 52 +++++++++++++++++++ .../src/screens/Platform/v2/Catalog/index.tsx | 9 ++-- .../src/screens/Platform/v2/hooks.ts | 24 +++++++-- 4 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/LocalLiveApp.tsx diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json index 15af0d818d3..06902372321 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/Platform/v2/Catalog/LocalLiveApp.tsx b/apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/LocalLiveApp.tsx new file mode 100644 index 00000000000..3234e1990c2 --- /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(); + + return ( + <> + + + + {t("browseWeb3.catalog.section.locallyLoaded")} + + + + + + {localLiveApps.map(manifest => ( + { + navigation.navigate(ScreenName.PlatformApp, { + platform: manifest.id, + name: manifest.name, + }); + }} + > + + + + {manifest.name} + + ))} + + + ); +} 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 939e5695001..b0164c3c518 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 ( {/* TODO: put under the animation header and style */} @@ -43,7 +43,10 @@ export function Catalog() { } disableStyleBottomHeader bottomHeaderContent={ - + <> + {localLiveApps.length !== 0 && } + + } disableStyleSubBottomHeader subBottomHeaderContent={} 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 5d2db8579f5..ecea4cf59b4 100644 --- a/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts +++ b/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({ list: combinedManifests, @@ -62,8 +69,9 @@ export function useCatalog() { recentlyUsed, search, disclaimer, + localLiveApps, }), - [categories, recentlyUsed, search, disclaimer], + [categories, recentlyUsed, search, disclaimer, localLiveApps], ); } @@ -167,7 +175,7 @@ function useDisclaimer(appendRecentlyUsed: (manifest: AppManifest) => void): Dis }; } -function useDiscoverDB() { +function useRecentlyUsedDB() { return useDB( DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, @@ -175,6 +183,14 @@ function useDiscoverDB() { ); } +function useLocalLiveAppDB() { + return useDB( + DISCOVER_STORE_KEY, + INITIAL_PLATFORM_STATE, + state => state.localLiveApp, + ); +} + export function useCurrentAccountHistDB() { return useDB( DISCOVER_STORE_KEY, From 2618ce31d1542df57ba8fe41ee2df0d16d871df9 Mon Sep 17 00:00:00 2001 From: RamyEB Date: Fri, 26 Apr 2024 18:25:01 +0200 Subject: [PATCH 05/16] feat: llc combine hook and context --- .../src/screens/Platform/v2/hooks.ts | 6 +- .../src/platform/hooks/useManifest.test.ts | 2 +- .../src/platform/hooks/useManifest.ts | 2 +- .../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 ++++ 8 files changed, 57 insertions(+), 104 deletions(-) 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/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts b/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts index ecea4cf59b4..b39272514a2 100644 --- a/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts +++ b/apps/ledger-live-mobile/src/screens/Platform/v2/hooks.ts @@ -32,11 +32,7 @@ export function useCatalog() { const combinedManifests = useManifests({ visibility: ["searchable", "complete"] }); const categories = useCategories(completeManifests); const recentlyUsed = useRecentlyUsed(combinedManifests, recentlyUsedDB); - const { state: localLiveApps, addLocalManifest } = useLocalLiveApp(localLiveAppDB); - - useEffect(() => { - addLocalManifest({ id: "test", name: "Test", url: "localhost" }); - }, []); + const { state: localLiveApps } = useLocalLiveApp(localLiveAppDB); const search = useSearch({ list: combinedManifests, diff --git a/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts b/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts index 2b585a5da61..7d3387ec302 100644 --- a/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts +++ b/libs/ledger-live-common/src/platform/hooks/useManifest.test.ts @@ -4,9 +4,9 @@ import { renderHook } from "@testing-library/react"; import { LiveAppManifest } from "../types"; -import { useLocalLiveAppManifest } from "../providers/LocalLiveAppProvider"; import { useRemoteLiveAppManifest } from "../providers/RemoteLiveAppProvider"; import { useManifest } from "./useManifest"; +import { useLocalLiveAppManifest } from "../../wallet-api/LocalLiveAppProvider"; jest.mock("../providers/LocalLiveAppProvider"); jest.mock("../providers/RemoteLiveAppProvider"); diff --git a/libs/ledger-live-common/src/platform/hooks/useManifest.ts b/libs/ledger-live-common/src/platform/hooks/useManifest.ts index 3b7b6a451c0..b777658fed8 100644 --- a/libs/ledger-live-common/src/platform/hooks/useManifest.ts +++ b/libs/ledger-live-common/src/platform/hooks/useManifest.ts @@ -1,7 +1,7 @@ import { useMemo } from "react"; -import { useLocalLiveAppManifest } from "../providers/LocalLiveAppProvider"; import { useRemoteLiveAppManifest } from "../providers/RemoteLiveAppProvider"; import { LiveAppManifest } from "../types"; +import { useLocalLiveAppManifest } from "../../wallet-api/LocalLiveAppProvider"; export function useManifest(appId: string): LiveAppManifest | undefined { const remoteManifest = useRemoteLiveAppManifest(appId); 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 6c2c84531e6..00000000000 --- 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({ - 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(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 {children}; -} 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 6b13295be6f..00000000000 --- 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; -}; 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 a99975dadd8..9e28af77212 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; -}; 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 00000000000..8f56f6ff44a --- /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({ + 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 {children}; +} + +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 00000000000..7ca9a86ef1a --- /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; +}; From eb97771f5e8215bf03ae1b9bbab32453ab447017 Mon Sep 17 00:00:00 2001 From: RamyEB Date: Fri, 26 Apr 2024 19:05:54 +0200 Subject: [PATCH 06/16] feat: replace hook by context on lld --- .../components/PlatformAppProviderWrapper.tsx | 17 +++++++++++++++-- .../StakeFlowModal/component/ProviderItem.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 +- .../screens/platform/v2/Catalog/index.tsx | 9 +++------ .../src/renderer/screens/platform/v2/hooks.ts | 14 +++++--------- .../src/renderer/screens/recover/Player.tsx | 2 +- .../sections/Developer/RunLocalAppButton.tsx | 1 + .../src/renderer/screens/swapWeb/index.tsx | 2 +- 11 files changed, 31 insertions(+), 24 deletions(-) diff --git a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx index 6bf9f3f6364..024bef3f9d2 100644 --- a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx +++ b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx @@ -7,8 +7,16 @@ 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"; +import { StateDB } from "@ledgerhq/live-common/hooks/useDBRaw"; +import { DiscoverDB } from "@ledgerhq/live-common/wallet-api/types"; +import { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; type PlatformAppProviderWrapperProps = { children: ReactNode; @@ -33,7 +41,7 @@ export function PlatformAppProviderWrapper({ children }: PlatformAppProviderWrap }} updateFrequency={AUTO_UPDATE_DEFAULT_DELAY} > - + {children} @@ -41,3 +49,8 @@ export function PlatformAppProviderWrapper({ children }: PlatformAppProviderWrap ); } + +function useLocalLiveAppDB() { + //TODO : Change key to DISCOVER_STORE_KEY + return useDB("app", "DISCOVER_STORE_KEY", INITIAL_PLATFORM_STATE, state => 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 c3e80d1a217..edc723a8548 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/screens/earn/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/earn/index.tsx index fde361c5522..a9156306ac2 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 f7e7370938c..f8e011595ed 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 82b9b568c58..6191f55558d 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 f53f68f62fa..7ab5bfe641c 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/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/index.tsx index fad71442fc1..073b426ca46 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,18 +4,15 @@ import { Text, Flex } from "@ledgerhq/react-ui"; import { RecentlyUsed } from "./RecentlyUsed"; import { Browse } from "./Browse"; import { useTranslation } from "react-i18next"; -import { useCatalog, useRecentlyUsedDB, useLocalLiveAppDB } from "../hooks"; +import { useCatalog, useRecentlyUsedDB } from "../hooks"; import { LocalLiveAppSection } from "./LocalLiveAppSection"; export function Catalog() { const recentlyUsedDB = useRecentlyUsedDB(); - const localLiveAppDB = useLocalLiveAppDB(); const { t } = useTranslation(); - const { categories, recentlyUsed, disclaimer, search, localLiveApps } = useCatalog( - recentlyUsedDB, - localLiveAppDB, - ); + const { categories, recentlyUsed, disclaimer, search, localLiveApps } = + useCatalog(recentlyUsedDB); return ( 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 d8568d60fd1..56535785992 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 @@ -10,8 +10,6 @@ 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"; @@ -23,13 +21,16 @@ 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(recentlyUsedDB: RecentlyUsedDB, localLiveAppDB: LocalLiveAppDB) { +export function useCatalog(recentlyUsedDB: RecentlyUsedDB) { const completeManifests = useManifests({ visibility: ["complete"] }); const combinedManifests = useManifests({ visibility: ["searchable", "complete"] }); const categories = useCategories(completeManifests); const recentlyUsed = useRecentlyUsed(combinedManifests, recentlyUsedDB); - const { state: localLiveApps } = useLocalLiveApp(localLiveAppDB); + const { state: localLiveApps } = useLocalLiveAppContext(); + + console.log(useLocalLiveAppContext()); const search = useSearch({ list: combinedManifests, @@ -61,11 +62,6 @@ export function useRecentlyUsedDB() { return useDB("app", DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, state => state.recentlyUsed); } -export function useLocalLiveAppDB() { - //TODO : Change key to DISCOVER_STORE_KEY - return useDB("app", "toReplace", INITIAL_PLATFORM_STATE, state => state.localLiveApp); -} - export function useCurrentAccountHistDB() { return useDB( "app", 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 ac9a97e5e7d..81c452c2e69 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 aa6d2213e0a..d313774fee0 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 @@ -12,6 +12,7 @@ import { Flex } from "@ledgerhq/react-ui"; import { useDispatch } from "react-redux"; import { openModal } from "~/renderer/actions/modals"; import { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; +import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index"; const ButtonContainer = styled.div` display: flex; 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 8b7efe79f46..7aff53554e8 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"; From 2719556dcba2945e0cf072d313ae863ac2a489d1 Mon Sep 17 00:00:00 2001 From: RamyEB Date: Mon, 29 Apr 2024 18:36:05 +0200 Subject: [PATCH 07/16] feat: implement context with hook in mobile and rework import local manifest page --- .../components/PlatformAppProviderWrapper.tsx | 3 - .../src/PlatformAppProviderWrapper.tsx | 18 +- .../src/screens/PTX/BuyAndSell/index.tsx | 2 +- .../src/screens/PTX/Earn/index.tsx | 2 +- .../src/screens/Platform/Catalog/AppCard.tsx | 6 +- .../src/screens/Platform/LiveApp.tsx | 2 +- .../src/screens/Platform/v2/hooks.ts | 14 +- .../src/screens/Protect/Player.tsx | 2 +- .../Settings/Developer/CustomManifest.tsx | 213 ++++++++++-------- 9 files changed, 143 insertions(+), 119 deletions(-) diff --git a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx index 024bef3f9d2..201de1c67aa 100644 --- a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx +++ b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx @@ -14,9 +14,6 @@ import { DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, } from "@ledgerhq/live-common/wallet-api/constants"; -import { StateDB } from "@ledgerhq/live-common/hooks/useDBRaw"; -import { DiscoverDB } from "@ledgerhq/live-common/wallet-api/types"; -import { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; type PlatformAppProviderWrapperProps = { children: ReactNode; diff --git a/apps/ledger-live-mobile/src/PlatformAppProviderWrapper.tsx b/apps/ledger-live-mobile/src/PlatformAppProviderWrapper.tsx index 0b6a929ef0c..da3310585ab 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; @@ -32,7 +38,7 @@ export default function PlatformAppProviderWrapper({ children }: PlatformAppProv lang, }} > - + {children} @@ -40,3 +46,11 @@ export default function PlatformAppProviderWrapper({ children }: PlatformAppProv ); } + +function useLocalLiveAppDB() { + return useDB( + DISCOVER_STORE_KEY, + INITIAL_PLATFORM_STATE, + state => state.localLiveApp, + ); +} 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 d5056e36be7..35ac1bc2e5c 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 9844fa9770e..6d1a2aa8f74 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 5188db3a35d..a83b03cbe72 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,14 @@ const AppCard = ({ manifest, onPress }: Props) => { () => getBranchStyle(manifest.branch, colors), [colors, manifest.branch], ); - const description = useMemo( + + let description = ""; + + description = useMemo( () => translateContent(manifest.content.shortDescription, locale), [locale, manifest.content.shortDescription], ); + return ( ({ list: combinedManifests, @@ -179,14 +179,6 @@ function useRecentlyUsedDB() { ); } -function useLocalLiveAppDB() { - return useDB( - DISCOVER_STORE_KEY, - INITIAL_PLATFORM_STATE, - state => state.localLiveApp, - ); -} - export function useCurrentAccountHistDB() { return useDB( DISCOVER_STORE_KEY, diff --git a/apps/ledger-live-mobile/src/screens/Protect/Player.tsx b/apps/ledger-live-mobile/src/screens/Protect/Player.tsx index 5571eb194cc..09d4ea5b78b 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 b98825ce543..9b242f84812 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 ( - - - - ); -}; - -const OpenButton: React.ComponentType<{ - onPress: TouchableOpacityProps["onPress"]; - disabled: boolean; -}> = ({ onPress, disabled }) => { - const { colors } = useTheme(); - return ( - - - - ); -}; - -type Props = CompositeScreenProps< - StackNavigatorProps, - StackNavigatorProps ->; - -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: () => ( - - - 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 ( + + + + ); +}; + +const AddButton: React.ComponentType<{ + onPress: TouchableOpacityProps["onPress"]; + disabled: boolean; +}> = ({ onPress, disabled }) => { + const { colors } = useTheme(); + return ( + + + + ); +}; + +type Props = CompositeScreenProps< + StackNavigatorProps, + StackNavigatorProps +>; + +export default function CustomManifest({ navigation }: Props) { + const { colors } = useTheme(); + const { state: list, addLocalManifest, removeLocalManifestById } = useLocalLiveAppContext(); + const [manifest, setManifest] = useState(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: () => ( + + onChange(JSON.stringify(JSON.parse(DEFAULT_MANIFEST)))} /> + { + manifest !== null && addLocalManifest(JSON.parse(manifest)); + setManifest(null); + }} /> - ), }); - }, [disabled, navigation, onChange, onOpen]); + }, [addLocalManifest, manifest, navigation, onChange, onOpen, removeLocalManifestById]); + return ( @@ -137,58 +147,65 @@ 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 ( + // eslint-disable-next-line react/jsx-key + + { + removeLocalManifestById(m.id); + }} + > + { + onOpen(m.id); + }} + /> + + { + removeLocalManifestById(m.id); + }} + > + + + + ); + })} + ); } -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, From 8c887148e592f1f7642884e84956ae6aa0b6455e Mon Sep 17 00:00:00 2001 From: RamyEB Date: Tue, 30 Apr 2024 15:49:54 +0200 Subject: [PATCH 08/16] fix: fix and changeset --- .changeset/hot-zebras-ring.md | 7 +++++++ .../src/renderer/components/PlatformAppProviderWrapper.tsx | 5 +++-- .../screens/platform/v2/Catalog/LocalLiveAppSection.tsx | 1 - .../src/renderer/screens/platform/v2/hooks.ts | 2 -- .../src/screens/Platform/Catalog/AppCard.tsx | 4 +--- 5 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 .changeset/hot-zebras-ring.md diff --git a/.changeset/hot-zebras-ring.md b/.changeset/hot-zebras-ring.md new file mode 100644 index 00000000000..ab6a0d6c747 --- /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 201de1c67aa..1655c6d0da9 100644 --- a/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx +++ b/apps/ledger-live-desktop/src/renderer/components/PlatformAppProviderWrapper.tsx @@ -48,6 +48,7 @@ export function PlatformAppProviderWrapper({ children }: PlatformAppProviderWrap } function useLocalLiveAppDB() { - //TODO : Change key to DISCOVER_STORE_KEY - return useDB("app", "DISCOVER_STORE_KEY", INITIAL_PLATFORM_STATE, state => state.localLiveApp); + return useDB("app", DISCOVER_STORE_KEY, INITIAL_PLATFORM_STATE, state => { + return state.localLiveApp; + }); } 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 index 9a813e03b9a..1f90ecc477f 100644 --- 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 @@ -8,7 +8,6 @@ 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(); 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 56535785992..a9cbb17043b 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 @@ -30,8 +30,6 @@ export function useCatalog(recentlyUsedDB: RecentlyUsedDB) { const recentlyUsed = useRecentlyUsed(combinedManifests, recentlyUsedDB); const { state: localLiveApps } = useLocalLiveAppContext(); - console.log(useLocalLiveAppContext()); - const search = useSearch({ list: combinedManifests, options: BROWSE_SEARCH_OPTIONS, 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 a83b03cbe72..8b29b88e038 100644 --- a/apps/ledger-live-mobile/src/screens/Platform/Catalog/AppCard.tsx +++ b/apps/ledger-live-mobile/src/screens/Platform/Catalog/AppCard.tsx @@ -65,9 +65,7 @@ const AppCard = ({ manifest, onPress }: Props) => { [colors, manifest.branch], ); - let description = ""; - - description = useMemo( + const description = useMemo( () => translateContent(manifest.content.shortDescription, locale), [locale, manifest.content.shortDescription], ); From 62614e520282245777dc657cb08d9c6db67eb2f7 Mon Sep 17 00:00:00 2001 From: RamyEB Date: Tue, 30 Apr 2024 16:22:06 +0200 Subject: [PATCH 09/16] fix: merge --- .../renderer/modals/CreateLocalManifest/index.tsx | 2 +- .../sections/Developer/RunLocalAppButton.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) 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 bf34f37bfb4..ce788129904 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/settings/sections/Developer/RunLocalAppButton.tsx b/apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/RunLocalAppButton.tsx index d313774fee0..15f0e7a5cb0 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,15 +4,14 @@ 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 { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; import { useLocalLiveAppContext } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index"; +import { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; const ButtonContainer = styled.div` display: flex; @@ -24,10 +23,12 @@ const RunLocalAppButton = () => { const { t } = useTranslation(); const { addLocalManifest, - state: { liveAppByIndex }, + state: localLiveApps, removeLocalManifestById, } = useLocalLiveAppContext(); + console.log("state localLiveApps", localLiveApps); + const history = useHistory(); const onExportLocalManifest = useCallback( @@ -42,7 +43,7 @@ const RunLocalAppButton = () => { }) .then(function (response) { if (!response.canceled && response.filePath) { - const exportedManifest = liveAppByIndex.find( + const exportedManifest = localLiveApps.find( (manifest: LiveAppManifest) => manifest.id === id, ); @@ -57,7 +58,7 @@ const RunLocalAppButton = () => { } }); }, - [liveAppByIndex], + [localLiveApps], ); const onBrowseLocalManifest = useCallback(() => { @@ -122,7 +123,7 @@ const RunLocalAppButton = () => { - {liveAppByIndex.map((manifest: LiveAppManifest) => ( + {localLiveApps.map((manifest: LiveAppManifest) => (