feat(LIVE-29447): add desktop swap status modal

Author: philipptpunkt

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking/__tests__/parseDeepLink.test.ts

@@ -181,6 +181,21 @@ describe("parseDeepLink", () => {
       });
     });
 
+    it("creates transaction-status swap route", () => {
+      const parsed = parseDeepLink(
+        "ledgerwallet://connect/swap/transaction-status?swapId=swap-1&provider=lifi&redirectUrl=https%3A%2F%2Fexample.com",
+      );
+      const route = createRoute(parsed);
+
+      expect(route).toEqual({
+        type: "transaction-status",
+        kind: "swap",
+        swapId: "swap-1",
+        provider: "lifi",
+        redirectUrl: "https://example.com",
+      });
+    });
+
     it("creates bridge route", () => {
       const parsed = parseDeepLink("ledgerwallet://bridge?origin=https://example.com&appName=Test");
       const route = createRoute(parsed);

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking/__tests__/useDeepLinkHandler.test.ts

@@ -18,6 +18,27 @@ jest.mock("~/renderer/actions/modals", () => ({
   closeAllModal: jest.fn(() => ({ type: "CLOSE_ALL_MODAL" })),
 }));
 
+jest.mock(
+  "@ledgerhq/live-common/exchange/transactionStatus/index",
+  () => ({
+    parseSwapTransactionStatusParams: jest.fn(params => {
+      if (!params.swapId) {
+        return { ok: false, error: { code: "missing_required_field" } };
+      }
+      return {
+        ok: true,
+        params: {
+          kind: "swap",
+          swapId: params.swapId,
+          provider: params.provider,
+          redirectUrl: params.redirectUrl,
+        },
+      };
+    }),
+  }),
+  { virtual: true },
+);
+
 jest.mock("~/renderer/actions/walletSync");
 
 const mockOpenModal = jest.mocked(openModal);
@@ -176,6 +197,34 @@ describe("useDeepLinkHandler", () => {
     });
   });
 
+  describe("transaction-status flow", () => {
+    it("opens the SwapTransactionStatus modal with validated swap params", async () => {
+      await testDeeplink(
+        "ledgerwallet://connect/swap/transaction-status?swapId=swap-1&provider=lifi&redirectUrl=https%3A%2F%2Fexample.com",
+      );
+
+      await waitFor(() => {
+        expect(mockOpenModal).toHaveBeenCalledWith("MODAL_SWAP_TRANSACTION_STATUS", {
+          kind: "swap",
+          swapId: "swap-1",
+          provider: "lifi",
+          redirectUrl: "https://example.com",
+        });
+      });
+    });
+
+    it("ignores invalid SwapTransactionStatus deeplinks", async () => {
+      await testDeeplink("ledgerwallet://connect/swap/transaction-status?provider=lifi");
+
+      await waitFor(() => {
+        expect(mockOpenModal).not.toHaveBeenCalledWith(
+          "MODAL_SWAP_TRANSACTION_STATUS",
+          expect.anything(),
+        );
+      });
+    });
+  });
+
   describe("send/receive/delegate flows", () => {
     describe.each([
       ["send", "MODAL_SEND"],

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking/handlers/swapTransactionStatus.handler.ts

@@ -0,0 +1,12 @@
+import { parseSwapTransactionStatusParams } from "@ledgerhq/live-common/exchange/transactionStatus/index";
+import { openModal } from "~/renderer/actions/modals";
+import { DeeplinkHandler } from "../types";
+
+export const swapTransactionStatusHandler: DeeplinkHandler<"transaction-status"> = (
+  route,
+  { dispatch },
+) => {
+  const result = parseSwapTransactionStatusParams(route);
+  if (!result.ok) return;
+  dispatch(openModal("MODAL_SWAP_TRANSACTION_STATUS", result.params));
+};

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking/parseDeepLink.ts

@@ -10,6 +10,7 @@ import {
   BorrowRoute,
   ManagerRoute,
   SwapRoute,
+  SwapTransactionStatusRoute,
   BridgeRoute,
   SendRoute,
   ReceiveRoute,
@@ -175,6 +176,31 @@ export function createRoute(parsed: ParsedDeeplink): DeeplinkRoute {
       return route;
     }
 
+    case "connect": {
+      if (path === "swap/transaction-status") {
+        const route: SwapTransactionStatusRoute = {
+          type: "transaction-status",
+          kind: "swap",
+          swapId: query.swapId,
+          provider: query.provider,
+          redirectUrl: query.redirectUrl,
+        };
+        return route;
+      }
+      return { type: "default" };
+    }
+
+    case "transaction-status": {
+      const route: SwapTransactionStatusRoute = {
+        type: "transaction-status",
+        kind: path === "swap" || !path ? "swap" : (path as never),
+        swapId: query.swapId,
+        provider: query.provider,
+        redirectUrl: query.redirectUrl,
+      };
+      return route;
+    }
+
     case "bridge": {
       const route: BridgeRoute = {
         type: "bridge",

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking/registry.ts

@@ -7,6 +7,7 @@ import { earnHandler } from "./handlers/earn.handler";
 import { borrowHandler } from "./handlers/borrow.handler";
 import { managerHandler } from "./handlers/manager.handler";
 import { swapHandler } from "./handlers/swap.handler";
+import { swapTransactionStatusHandler } from "./handlers/swapTransactionStatus.handler";
 import { bridgeHandler } from "./handlers/bridge.handler";
 import { sendHandler, receiveHandler, delegateHandler } from "./handlers/transactionFlow.handler";
 import { settingsHandler } from "./handlers/settings.handler";
@@ -30,6 +31,7 @@ export const deeplinkRegistry: DeeplinkHandlerRegistry = {
   borrow: borrowHandler,
   myledger: managerHandler,
   swap: swapHandler,
+  "transaction-status": swapTransactionStatusHandler,
   bridge: bridgeHandler,
   send: sendHandler,
   receive: receiveHandler,

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking/types.ts

@@ -1,6 +1,7 @@
 import { Account, TokenAccount } from "@ledgerhq/types-live";
 import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
 import type { AppDispatch } from "~/state-manager/configureStore";
+import type { SwapTransactionStatusRawParams } from "@ledgerhq/live-common/exchange/transactionStatus/index";
 
 export type NavigateFn = (
   pathname: string,
@@ -135,6 +136,10 @@ export interface SwapRoute {
   toAccountId?: string;
 }
 
+export interface SwapTransactionStatusRoute extends SwapTransactionStatusRawParams {
+  type: "transaction-status";
+}
+
 export interface BridgeRoute {
   type: "bridge";
   origin?: string;
@@ -240,6 +245,7 @@ export type DeeplinkRoute =
   | BorrowRoute
   | ManagerRoute
   | SwapRoute
+  | SwapTransactionStatusRoute
   | BridgeRoute
   | SendRoute
   | ReceiveRoute

apps/ledger-live-desktop/src/renderer/modals/SwapTransactionStatus/Details/CopyIconButton.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Copy } from "@ledgerhq/lumen-ui-react/symbols";
+import { useCopyToClipboard } from "LLD/hooks/useCopyToClipboard";
+
+type CopyIconButtonProps = {
+  text: string;
+};
+
+export function CopyIconButton({ text }: CopyIconButtonProps) {
+  const { t } = useTranslation();
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const copyToClipboard = useCopyToClipboard(() => {
+    setIsCopied(true);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setIsCopied(false), 1_000);
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="inline-flex cursor-pointer border-0 bg-transparent p-0 text-base hover:text-interactive"
+        aria-label={t("swap2.modals.transactionStatus.accessibility.copySwapId")}
+        onClick={() => copyToClipboard(text)}
+      >
+        <Copy size={16} />
+      </button>
+      {isCopied ? (
+        <div className="pointer-events-none fixed inset-0 z-10000 flex items-center justify-center">
+          <div className="rounded-sm bg-base px-16 py-8 body-2-semi-bold text-inverted">
+            {t("swap2.modals.transactionStatus.actions.copied")}
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

apps/ledger-live-desktop/src/renderer/modals/SwapTransactionStatus/Details/DetailRow.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type DetailRowProps = {
+  label: string;
+  value: React.ReactNode;
+};
+
+export function DetailRow({ label, value }: DetailRowProps) {
+  return (
+    <div className="flex justify-between">
+      <dt className="body-3 text-muted">{label}</dt>
+      <dd className="text-right body-3-semi-bold text-base">{value}</dd>
+    </div>
+  );
+}

apps/ledger-live-desktop/src/renderer/modals/SwapTransactionStatus/Details/DetailsSection.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Skeleton } from "@ledgerhq/lumen-ui-react";
+import { getProviderName } from "@ledgerhq/live-common/exchange/swap/utils/index";
+import type { AdditionalProviderConfig } from "@ledgerhq/live-common/exchange/providers/swap";
+import type { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import CryptoCurrencyIcon from "~/renderer/components/CryptoCurrencyIcon";
+import ProviderIcon from "~/renderer/components/ProviderIcon";
+import { openURL } from "~/renderer/linking";
+import { CopyIconButton } from "./CopyIconButton";
+import { DetailRow } from "./DetailRow";
+import { truncateMiddle } from "../utils";
+
+interface Props {
+  feesAmount?: string;
+  receiveAccountName?: string;
+  provider?: string;
+  providerData?: AdditionalProviderConfig;
+  receiveCurrency?: CryptoOrTokenCurrency;
+  swapId: string;
+}
+
+export function DetailsSection({
+  feesAmount,
+  receiveAccountName,
+  provider,
+  providerData,
+  receiveCurrency,
+  swapId,
+}: Props) {
+  const { t } = useTranslation();
+  const providerName = provider ? getProviderName(provider) : undefined;
+
+  return (
+    <section>
+      <dl className="m-0 flex flex-col gap-12">
+        <DetailRow
+          label={t("swap2.modals.transactionStatus.sections.details.networkFees")}
+          value={feesAmount ?? <Skeleton className="h-16 w-96 rounded-sm" />}
+        />
+        <DetailRow
+          label={t("swap2.modals.transactionStatus.sections.details.receiveAccount")}
+          value={
+            receiveAccountName ? (
+              <span className="inline-flex items-center gap-6">
+                <span>{receiveAccountName}</span>
+                {receiveCurrency ? (
+                  <CryptoCurrencyIcon currency={receiveCurrency} size={16} />
+                ) : null}
+              </span>
+            ) : (
+              <Skeleton className="h-16 w-112 rounded-sm" />
+            )
+          }
+        />
+        {provider && providerName ? (
+          <DetailRow
+            label={t("swap2.modals.transactionStatus.sections.details.provider")}
+            value={
+              providerData?.mainUrl ? (
+                <button
+                  type="button"
+                  className="inline-flex cursor-pointer items-center gap-6 border-0 bg-transparent p-0 body-3 text-base"
+                  onClick={() => openURL(providerData.mainUrl!, "SwapTransactionStatus_Provider")}
+                >
+                  <span>{providerName}</span>
+                  <ProviderIcon name={provider} size="XXS" boxed={false} />
+                </button>
+              ) : (
+                <span className="inline-flex items-center gap-6">
+                  <span className="body-3-semi-bold">{providerName}</span>
+                  <ProviderIcon name={provider} size="XXS" boxed={false} />
+                </span>
+              )
+            }
+          />
+        ) : null}
+        <DetailRow
+          label={t("swap2.modals.transactionStatus.sections.details.swapId")}
+          value={
+            <span className="inline-flex items-center gap-6">
+              <p className="body-3-semi-bold">{truncateMiddle(swapId)}</p>
+              <CopyIconButton text={swapId} />
+            </span>
+          }
+        />
+      </dl>
+    </section>
+  );
+}

apps/ledger-live-desktop/src/renderer/modals/SwapTransactionStatus/ModalLayout.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { IconButton } from "@ledgerhq/lumen-ui-react";
+import { Close } from "@ledgerhq/lumen-ui-react/symbols";
+
+interface Props {
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+export function ModalLayout({ children, onClose }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col bg-base">
+      <div className="flex justify-end p-16">
+        <IconButton
+          aria-label={t("swap2.modals.transactionStatus.accessibility.close")}
+          icon={Close}
+          onClick={onClose}
+          size="sm"
+          appearance="transparent"
+        />
+      </div>
+      <div className="flex flex-col px-24 pb-24 pt-12 gap-24">{children}</div>
+    </div>
+  );
+}