[LIVE-3341][FEATURE] use navigation for buy sell screen (#923)

* [LIVE-2943] Feat/add back forward buttons to web platform player (#625)

* add possibility to go back and forward

* use arrow icon

* move webview specific callbacks to TopBar

* disable nav buttons when nav not possible

* Add shouldDisplayNavigation to TopBarConfig

* Use webview ref as prop instead of ref current value

* add comments for events listened to

* small code style changes

* Add changeset

* use navigation is buy/sell screen

* Revert "use navigation is buy/sell screen"

This reverts commit 647b892da5763154cc2eae656029bd1fd862c828.

* handle Buy Sell live app in exchange screen

* add changeset

* Revert "[LIVE-2943] Feat/add back forward buttons to web platform player (#625)"

This reverts commit 3caf8e1.

Author: chabroA

.changeset/dull-moles-invite.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+use navigation for buy sell screen

apps/ledger-live-desktop/src/renderer/Default.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
 import styled from "styled-components";
 import { ipcRenderer } from "electron";
 import { Redirect, Route, Switch, useLocation } from "react-router-dom";
-import { FeatureToggle, useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { FeatureToggle } from "@ledgerhq/live-common/featureFlags/index";
 import TrackAppStart from "~/renderer/components/TrackAppStart";
 import { BridgeSyncProvider } from "~/renderer/bridge/BridgeSyncContext";
 import { SyncNewAccounts } from "~/renderer/bridge/SyncNewAccounts";
@@ -142,9 +142,6 @@ export default function Default() {
   useDeeplink();
   useUSBTroubleshooting();
 
-  // PTX smart routing feature flag - buy sell live app flag
-  const ptxSmartRouting = useFeature("ptxSmartRouting");
-
   useProviders(); // prefetch data from swap providers here
 
   // every time location changes, scroll back up
@@ -218,19 +215,7 @@ export default function Default() {
                           render={(props: any) => <PlatformApp {...props} />}
                         />
                         <Route path="/lend" render={props => <Lend {...props} />} />
-                        <Route
-                          path="/exchange"
-                          render={(props: any) =>
-                            ptxSmartRouting?.enabled ? (
-                              <PlatformApp
-                                appId={ptxSmartRouting?.params?.liveAppId ?? "multibuy"}
-                                {...props}
-                              />
-                            ) : (
-                              <Exchange {...props} />
-                            )
-                          }
-                        />
+                        <Route path="/exchange" render={(props: any) => <Exchange />} />
                         <Route
                           exact
                           path="/account/:id/nft-collection"

apps/ledger-live-desktop/src/renderer/screens/exchange/index.jsx

@@ -1,19 +1,24 @@
 // @flow
 
 import React, { useState } from "react";
-import styled from "styled-components";
-import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import styled from "styled-components";
 
+import { useRampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/index";
+import type { RampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/types";
 import Box from "~/renderer/components/Box";
-import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
-import TabBar from "~/renderer/components/TabBar";
 import Card from "~/renderer/components/Box/Card";
+import TabBar from "~/renderer/components/TabBar";
+import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
 import OnRamp from "./Buy";
-import OffRamp from "./Sell";
 import { useExchangeProvider } from "./hooks";
-import { useRampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/index";
-import type { RampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/types";
+import OffRamp from "./Sell";
+
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
+import WebPlatformPlayer from "~/renderer/components/WebPlatformPlayer";
+import useTheme from "~/renderer/hooks/useTheme";
 
 const Container: ThemedComponent<{ selectable: boolean, pb: number }> = styled(Box)`
   flex: 1;
@@ -47,7 +52,41 @@ type QueryParams = {
   defaultTicker?: string,
 };
 
-const Exchange = () => {
+const DEFAULT_MULTIBUY_APP_ID = "multibuy";
+
+// Exchange (Buy / Sell) as a live app screen
+const LiveAppExchange = ({ appId }: { appId: string }) => {
+  const { state: urlParams } = useLocation();
+
+  const manifest = useRemoteLiveAppManifest(appId);
+
+  const themeType = useTheme("colors.palette.type");
+
+  return (
+    <Card grow style={{ overflow: "hidden" }}>
+      {manifest ? (
+        <WebPlatformPlayer
+          config={{
+            topBarConfig: {
+              shouldDisplayName: false,
+              shouldDisplayInfo: false,
+              shouldDisplayClose: false,
+              shouldDisplayNavigation: true,
+            },
+          }}
+          manifest={manifest}
+          inputs={{
+            theme: themeType,
+            ...urlParams,
+          }}
+        />
+      ) : null}
+    </Card>
+  );
+};
+
+// Legacy native Exchange (Buy / Sell) screen, should be deprecated soonish
+const LegacyExchange = () => {
   const rampCatalog = useRampCatalog();
 
   const location = useLocation();
@@ -85,4 +124,17 @@ const Exchange = () => {
   );
 };
 
+const Exchange = () => {
+  // PTX smart routing feature flag - buy sell live app flag
+  const ptxSmartRouting = useFeature("ptxSmartRouting");
+
+  if (ptxSmartRouting?.enabled) {
+    return (
+      <LiveAppExchange appId={ptxSmartRouting?.params?.liveAppId ?? DEFAULT_MULTIBUY_APP_ID} />
+    );
+  }
+
+  return <LegacyExchange />;
+};
+
 export default Exchange;