fix: fix back button lld card (#7772)

* fix: dix back button lld card * fix: fix typecheck * fix: set lastScreen as flowName for card
LedgerHQ · Sep 9, 2024 · 7b6d676 · 7b6d676
1 parent 9abf63b
commit 7b6d676
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/apps/ledger-live-desktop/src/renderer/Default.tsx b/apps/ledger-live-desktop/src/renderer/Default.tsx
@@ -328,7 +328,7 @@ export default function Default() {
                               <Route path="/" exact render={withSuspense(Dashboard)} />
                               <Route path="/settings" render={withSuspense(Settings)} />
                               <Route path="/accounts" render={withSuspense(Accounts)} />
-                              <Route path="/card" render={withSuspense(Card)} />
+                              <Route exact path="/card/:appId?" render={withSuspense(Card)} />
                               <Redirect from="/manager/reload" to="/manager" />
                               <Route path="/manager" render={withSuspense(Manager)} />
                               <Route

diff --git a/apps/ledger-live-desktop/src/renderer/components/WebPTXPlayer/TopBar.tsx b/apps/ledger-live-desktop/src/renderer/components/WebPTXPlayer/TopBar.tsx
@@ -143,8 +143,9 @@ export const TopBar = ({ manifest, webviewAPIRef, webviewState }: Props) => {
         flow: flowName,
       });
 
+      const pathname = match.path.replace("/:appId?", "");
       history.replace({
-        pathname: "/exchange",
+        pathname,
         search: `?referrer=isExternal`,
         state: {
           mode: flowName,
@@ -167,12 +168,19 @@ export const TopBar = ({ manifest, webviewAPIRef, webviewState }: Props) => {
       await webview.loadURL(safeUrl);
       webview.clearHistory();
     }
-  }, [localStorage, history, webviewAPIRef, webviewState.url]);
+  }, [localStorage, history, match.path, webviewAPIRef, webviewState.url]);
 
   const getButtonLabel = useCallback(() => {
     const lastScreen = localStorage.getItem("last-screen") || "";
 
-    return lastScreen === "compare_providers" ? t("common.quote") : manifest.name;
+    const screenMap: {
+      [key: string]: string;
+    } = {
+      compare_providers: t("common.quote"),
+      card: t("card.backToCard"),
+    };
+
+    return screenMap[lastScreen] || manifest.name;
   }, [localStorage, manifest, t]);
 
   const handleReload = useCallback(() => {
@@ -192,7 +200,10 @@ export const TopBar = ({ manifest, webviewAPIRef, webviewState }: Props) => {
         if (goToURL) {
           localStorage.setItem("manifest-id", manifestId);
           localStorage.setItem("flow-name", url.searchParams.get("flowName") || "buy");
-          localStorage.setItem("last-screen", url.searchParams.get("lastScreen") || "");
+          localStorage.setItem(
+            "last-screen",
+            url.searchParams.get("lastScreen") || url.searchParams.get("flowName") || "",
+          );
 
           history.replace(`${match.url}/${manifestId}?goToURL=${goToURL}`);
         }

diff --git a/apps/ledger-live-desktop/src/renderer/screens/card/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/card/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, RouteComponentProps } from "react-router-dom";
 import { useSelector } from "react-redux";
 import Card from "~/renderer/components/Box/Card";
 import {
@@ -12,12 +12,14 @@ import useTheme from "~/renderer/hooks/useTheme";
 import WebPTXPlayer from "~/renderer/components/WebPTXPlayer";
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
-import { CARD_APP_ID } from "@ledgerhq/live-common/wallet-api/constants";
+import { CARD_APP_ID, INTERNAL_APP_IDS } from "@ledgerhq/live-common/wallet-api/constants";
 import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import CardPlatformApp from "./CardPlatformApp";
 
-const LiveAppCard = () => {
-  const { state: urlParams, search } = useLocation();
+type CardState = { account?: string } | undefined;
+
+const LiveAppCard = ({ appId }: { appId: string }) => {
+  const { state: urlParams, search } = useLocation<CardState>();
   const searchParams = new URLSearchParams(search);
   const locale = useSelector(localeSelector);
   const language = useSelector(languageSelector);
@@ -26,8 +28,8 @@ const LiveAppCard = () => {
   const mockManifest: LiveAppManifest | undefined =
     process.env.MOCK_REMOTE_LIVE_MANIFEST && JSON.parse(process.env.MOCK_REMOTE_LIVE_MANIFEST)[0];
 
-  const localManifest = useLocalLiveAppManifest(CARD_APP_ID);
-  const remoteManifest = useRemoteLiveAppManifest(CARD_APP_ID);
+  const localManifest = useLocalLiveAppManifest(appId);
+  const remoteManifest = useRemoteLiveAppManifest(appId);
   const manifest = localManifest || mockManifest || remoteManifest;
   const themeType = useTheme().colors.palette.type;
 
@@ -36,7 +38,7 @@ const LiveAppCard = () => {
    * to ensure the context is reset. last-screen is used to give an external app's webview context
    * of the last screen the user was on before navigating to the external app screen.
    */
-  if (manifest?.id) {
+  if (manifest?.id && INTERNAL_APP_IDS.includes(manifest.id)) {
     const { localStorage } = window;
     localStorage.removeItem("last-screen");
     localStorage.removeItem("manifest-id");
@@ -67,10 +69,15 @@ const LiveAppCard = () => {
   );
 };
 
-const CardDapp = () => {
+export type ComponentParams = {
+  appId?: string;
+};
+
+const CardDapp = ({ match }: RouteComponentProps<ComponentParams>) => {
+  const appId = match?.params?.appId;
   const ptxCardFlag = useFeature("ptxCard");
   if (ptxCardFlag?.enabled) {
-    return <LiveAppCard />;
+    return <LiveAppCard appId={appId || CARD_APP_ID} />;
   } else {
     return <CardPlatformApp />; // Baanx card
   }

diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json
@@ -860,6 +860,9 @@
       "continue": "Continue"
     }
   },
+  "card": {
+    "backToCard": "all cards"
+  },
   "lend": {
     "title": "Lend crypto",
     "tabs": {