diff --git a/.changeset/itchy-cows-march.md b/.changeset/itchy-cows-march.md new file mode 100644 index 000000000000..bf63f52236ea --- /dev/null +++ b/.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) diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Migrations/SwapMigrationUI.tsx b/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Migrations/SwapMigrationUI.tsx index 2d04ffd91f3c..37c8554349eb 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/Migrations/SwapMigrationUI.tsx +++ b/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" ? : null; + const nativeNetworkFeesUI = + pageState === "loaded" ? ( + + ) : null; + const nativeQuotesUI = pageState === "loaded" ? ( { */ 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 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 f8e011595edc..aa2ffd477f6b 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 @@ -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" && } - {pageState === "loading" && } - - {pageState === "loaded" && ( - <> - - - )}