feat(LIVE-9328): swap live app quotes native UI migration

.changeset/itchy-cows-march.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+feat(LIVE-9328): migrate more native swap UI including loading state and form summary (target account and network fee)

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Migrations/SwapMigrationUI.tsx

@@ -8,6 +8,8 @@ import { SwapTransactionType } from "@ledgerhq/live-common/exchange/swap/types";
 import ButtonBase from "~/renderer/components/Button";
 import SwapFormRates from "../FormRates";
 import { SwapWebManifestIDs } from "../SwapWebView";
+import LoadingState from "../Rates/LoadingState";
+import SwapFormSummary from "../FormSummary";
 
 const Button = styled(ButtonBase)`
   width: 100%;
@@ -40,6 +42,12 @@ export const SwapMigrationUI = (props: SwapMigrationUIProps) => {
   } = props;
   const { t } = useTranslation();
 
+  const nativeLoadingUI = pageState === "loading" ? <LoadingState /> : null;
+  const nativeNetworkFeesUI =
+    pageState === "loaded" ? (
+      <SwapFormSummary swapTransaction={swapTransaction} provider={provider} />
+    ) : null;
+
   const nativeQuotesUI =
     pageState === "loaded" ? (
       <SwapFormRates
@@ -62,6 +70,8 @@ export const SwapMigrationUI = (props: SwapMigrationUIProps) => {
    */
   const allNativeUI = (
     <>
+      {nativeLoadingUI}
+      {nativeNetworkFeesUI}
       {nativeQuotesUI}
       {nativeExchangeButtonUI}
     </>
@@ -82,6 +92,8 @@ export const SwapMigrationUI = (props: SwapMigrationUIProps) => {
        */
       return (
         <>
+          {nativeLoadingUI}
+          {nativeNetworkFeesUI}
           {nativeQuotesUI}
           {liveApp}
         </>
@@ -93,7 +105,12 @@ export const SwapMigrationUI = (props: SwapMigrationUIProps) => {
        *  - Exchange Button
        *  - Quotes UI
        */
-      return <>{liveApp}</>;
+      return (
+        <>
+          {nativeNetworkFeesUI}
+          {liveApp}
+        </>
+      );
 
     /**
      * Fall back to show all native UI

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx

@@ -25,7 +25,6 @@ import ExchangeDrawer from "./ExchangeDrawer/index";
 import SwapFormSelectors from "./FormSelectors";
 import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
 import { accountToWalletAPIAccount } from "@ledgerhq/live-common/wallet-api/converters";
-import LoadingState from "./Rates/LoadingState";
 import EmptyState from "./Rates/EmptyState";
 import { AccountLike } from "@ledgerhq/types-live";
 import BigNumber from "bignumber.js";
@@ -34,10 +33,9 @@ import { OnNoRatesCallback } from "@ledgerhq/live-common/exchange/swap/types";
 import SwapWebView, { SwapWebProps, useSwapLiveAppManifestID } from "./SwapWebView";
 import { SwapMigrationUI } from "./Migrations/SwapMigrationUI";
 import { useSwapLiveAppHook } from "~/renderer/hooks/swap-migrations/useSwapLiveAppHook";
-import SwapFormSummary from "./FormSummary";
+import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/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"];
@@ -454,13 +452,6 @@ const SwapForm = () => {
         updateSelectedRate={swapTransaction.swap.updateSelectedRate}
       />
       {pageState === "empty" && <EmptyState />}
-      {pageState === "loading" && <LoadingState />}
-
-      {pageState === "loaded" && (
-        <>
-          <SwapFormSummary swapTransaction={swapTransaction} provider={provider} />
-        </>
-      )}
       <SwapMigrationUI
         manifestID={swapLiveAppManifestID}
         liveAppEnabled={isSwapLiveAppEnabled.enabled}