@ledgerhq/live-common 34.54.0 → 34.55.0-nightly.20251210114107

package/src/e2e/speculos.ts

@@ -49,6 +49,7 @@ import {
   swipeRight,
 } from "./deviceInteraction/TouchDeviceSimulator";
 import { withDeviceController } from "./deviceInteraction/DeviceController";
+import { sanitizeError } from ".";
 
 const isSpeculosRemote = process.env.REMOTE_SPECULOS === "true";
 
@@ -428,7 +429,7 @@ export async function startSpeculos(
           };
         });
   } catch (e: unknown) {
-    console.error(e);
+    console.error(sanitizeError(e));
     log("engine", `test ${testName} failed with ${String(e)}`);
   }
 }
@@ -610,7 +611,7 @@ export async function takeScreenshot(port?: number): Promise<Buffer | undefined>
     );
     return response.data;
   } catch (error) {
-    console.error("Error downloading speculos screenshot:", error);
+    console.error("Error downloading speculos screenshot:", sanitizeError(error));
   }
 }
 
@@ -668,12 +669,42 @@ export const activateLedgerSync = withDeviceController(({ getButtonsController }
   }
 });
 
+const getSettingsToggle1Coordinates = () => {
+  const deviceModel = getSpeculosModel();
+
+  switch (deviceModel) {
+    case DeviceModelId.stax:
+      return { x: 345, y: 136 };
+    case DeviceModelId.europa:
+      return { x: 420, y: 140 };
+    case DeviceModelId.apex:
+      return { x: 263, y: 100 };
+    default:
+      return { x: 420, y: 140 };
+  }
+};
+
+const getSettingsCogwheelCoordinates = () => {
+  const deviceModel = getSpeculosModel();
+
+  switch (deviceModel) {
+    case DeviceModelId.stax:
+      return { x: 362, y: 43 };
+    case DeviceModelId.europa:
+      return { x: 400, y: 80 };
+    case DeviceModelId.apex:
+      return { x: 253, y: 58 };
+    default:
+      return { x: 400, y: 80 };
+  }
+};
+
 export const activateExpertMode = withDeviceController(({ getButtonsController }) => async () => {
   const buttons = getButtonsController();
 
   if (isTouchDevice()) {
     await goToSettings();
-    const SettingsToggle1Coordinates = { x: 344, y: 136 };
+    const SettingsToggle1Coordinates = getSettingsToggle1Coordinates();
     await pressAndRelease(
       DeviceLabels.SETTINGS_TOGGLE_1,
       SettingsToggle1Coordinates.x,
@@ -698,7 +729,7 @@ export const goToSettings = withDeviceController(({ getButtonsController }) => a
   const buttons = getButtonsController();
 
   if (isTouchDevice()) {
-    const SettingsCogwheelCoordinates = { x: 400, y: 75 };
+    const SettingsCogwheelCoordinates = getSettingsCogwheelCoordinates();
     await pressAndRelease(
       DeviceLabels.SETTINGS,
       SettingsCogwheelCoordinates.x,

package/src/e2e/speculosAppVersion.ts

@@ -3,6 +3,7 @@ import { version } from "../../package.json";
 import { getEnv } from "@ledgerhq/live-env";
 import { DeviceModelId } from "@ledgerhq/devices";
 import { Device as CryptoWallet } from "./enum/Device";
+import { sanitizeError } from "./index";
 import * as fs from "fs";
 import * as path from "path";
 
@@ -18,6 +19,8 @@ export function getSpeculosModel(): DeviceModelId {
     case CryptoWallet.FLEX.name:
     case DeviceModelId.europa:
       return DeviceModelId.europa;
+    case CryptoWallet.NANO_GEN_5.name:
+      return DeviceModelId.apex;
     case CryptoWallet.LNSP.name:
     default:
       return DeviceModelId.nanoSP;
@@ -26,7 +29,9 @@ export function getSpeculosModel(): DeviceModelId {
 
 export function isTouchDevice(): boolean {
   const model = getSpeculosModel();
-  return model === DeviceModelId.stax || model === DeviceModelId.europa;
+  return (
+    model === DeviceModelId.stax || model === DeviceModelId.europa || model === DeviceModelId.apex
+  );
 }
 
 function getDeviceTargetId(device: DeviceModelId): number {
@@ -36,6 +41,7 @@ function getDeviceTargetId(device: DeviceModelId): number {
     [DeviceModelId.nanoSP]: CryptoWallet.LNSP.targetId,
     [DeviceModelId.stax]: CryptoWallet.STAX.targetId,
     [DeviceModelId.europa]: CryptoWallet.FLEX.targetId,
+    [DeviceModelId.apex]: CryptoWallet.NANO_GEN_5.targetId,
   };
   return modelToTargetIdMap[device];
 }
@@ -73,7 +79,7 @@ export async function createNanoAppJsonFile(nanoAppFilePath: string): Promise<vo
     }
     fs.writeFileSync(jsonFilePath, JSON.stringify(appCatalog, null, 2), "utf8");
   } catch (error) {
-    console.error("Unable to create app version file:", error);
+    console.error("Unable to create app version file:", sanitizeError(error));
   }
 }
 

package/src/e2e/swap.ts

@@ -1,11 +1,12 @@
 import { Account } from "./enum/Account";
+import { sanitizeError } from "./index";
 import axios from "axios";
 
 export async function getMinimumSwapAmount(AccountFrom: Account, AccountTo: Account) {
   try {
     const requestConfig = {
       method: "GET",
-      url: `https://swap-stg.ledger-test.com/v5/quote`,
+      url: "https://swap-stg.ledger-test.com/v5/quote",
       params: {
         from: AccountFrom.currency.id,
         to: AccountTo.currency.id,
@@ -21,9 +22,7 @@ export async function getMinimumSwapAmount(AccountFrom: Account, AccountTo: Acco
         tradeType: "INPUT",
         uniswapOrderType: "uniswapxv1",
       },
-      headers: {
-        accept: "application/json",
-      },
+      headers: { accept: "application/json" },
     };
 
     const { data } = await axios(requestConfig);
@@ -38,8 +37,10 @@ export async function getMinimumSwapAmount(AccountFrom: Account, AccountTo: Acco
     }
 
     return Math.max(...minimumAmounts);
-  } catch (error) {
-    console.error("Error fetching swap minimum amount:", error);
-    throw error;
+  } catch (error: any) {
+    const sanitizedError = sanitizeError(error);
+    console.error("Error fetching swap minimum amount:", sanitizedError);
+    // throw the sanitized error, not the original circular Axios error
+    throw sanitizedError;
   }
 }

package/src/exchange/swap/api/v5/__tests__/fetchCurrencyAll.spec.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import { fetchCurrencyAll } from "../fetchCurrencyAll";
 import { fetchCurrencyAllMock } from "../__mocks__/fetchCurrencyAll.mocks";
 import { DEFAULT_SWAP_TIMEOUT_MS } from "../../../const/timeout";

package/src/exchange/swap/api/v5/__tests__/fetchCurrencyFrom.spec.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import { fetchCurrencyFrom } from "../fetchCurrencyFrom";
 import { fetchCurrencyFromMock } from "../__mocks__/fetchCurrencyFrom.mocks";
 import { DEFAULT_SWAP_TIMEOUT_MS } from "../../../const/timeout";

package/src/exchange/swap/api/v5/__tests__/fetchCurrencyTo.spec.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 
 import { fetchCurrencyTo } from "../fetchCurrencyTo";
 import { fetchCurrencyToMock } from "../__mocks__/fetchCurrencyTo.mocks";

package/src/exchange/swap/api/v5/fetchCurrencyAll.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import { DEFAULT_SWAP_TIMEOUT_MS } from "../../const/timeout";
 import axios from "axios";
 import { LedgerAPI4xx } from "@ledgerhq/errors";

package/src/exchange/swap/api/v5/fetchCurrencyFrom.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import { DEFAULT_SWAP_TIMEOUT_MS } from "../../const/timeout";
 import { flattenV5CurrenciesToAndFrom } from "../../utils/flattenV5CurrenciesToAndFrom";
 import { fetchCurrencyFromMock } from "./__mocks__/fetchCurrencyFrom.mocks";
@@ -45,7 +45,7 @@ export async function fetchCurrencyFrom({
       ...(headers !== undefined ? { headers } : {}),
     });
     return flattenV5CurrenciesToAndFrom(data);
-  } catch (e) {
+  } catch {
     throw Error("Something went wrong in fetchCurrencyFrom call");
   }
 }

package/src/exchange/swap/api/v5/fetchCurrencyTo.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import { fetchCurrencyToMock } from "./__mocks__/fetchCurrencyTo.mocks";
 import { isIntegrationTestEnv } from "../../utils/isIntegrationTestEnv";
 import { DEFAULT_SWAP_TIMEOUT_MS } from "../../const/timeout";

package/src/exchange/swap/api/v5/fetchRates.ts

@@ -1,4 +1,4 @@
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import { DEFAULT_SWAP_TIMEOUT_MS } from "../../const/timeout";
 import axios from "axios";
 import { LedgerAPI4xx } from "@ledgerhq/errors";

package/src/exchange/swap/getIncompatibleCurrencyKeys.ts

@@ -83,6 +83,10 @@ const INCOMPATIBLE_NANO_S_CURRENCY_KEYS: Keys = {
     title: "swap.incompatibility.celo_title",
     description: "swap.incompatibility.celo_description",
   },
+  monad: {
+    title: "swap.incompatibility.monad_title",
+    description: "swap.incompatibility.monad_description",
+  },
 };
 
 export const getIncompatibleCurrencyKeys = (exchange: ExchangeSwap) => {

package/src/exchange/swap/postSwapState.ts

@@ -106,6 +106,7 @@ export const postSwapCancelled: PostSwapCancelled = async ({
   seedIdTo,
   refundAddress,
   payoutAddress,
+  data,
   ...rest
 }) => {
   if (isIntegrationTestEnv()) return mockPostSwapCancelled({ provider, swapId, ...rest });
@@ -138,7 +139,8 @@ export const postSwapCancelled: PostSwapCancelled = async ({
 
     const shouldIncludeAddresses =
       rest.statusCode === "WrongDeviceForAccountPayout" ||
-      rest.statusCode === "WrongDeviceForAccountRefund";
+      rest.statusCode === "WrongDeviceForAccountRefund" ||
+      rest.statusCode === "FeeNotLoaded";
 
     const requestData = {
       provider,
@@ -147,11 +149,14 @@ export const postSwapCancelled: PostSwapCancelled = async ({
       swapIntentWithoutProvider,
       payloadAddressMatchAccountAddress,
       fromAmount,
-      fromAccountAddress: shouldIncludeAddresses ? fromAccountAddress : undefined,
-      toAccountAddress: shouldIncludeAddresses ? toAccountAddress : undefined,
-      payloadRefundAddress: shouldIncludeAddresses ? refundAddress : undefined,
-      payloadPayoutAddress: shouldIncludeAddresses ? payoutAddress : undefined,
+      ...(shouldIncludeAddresses && {
+        fromAccountAddress,
+        toAccountAddress,
+        payloadRefundAddress: refundAddress,
+        payloadPayoutAddress: payoutAddress,
+      }),
       maybeSeedMatch: seedIdFrom === seedIdTo, // Only true if both accounts are from the same seed and from the same chain type
+      data,
       ...rest,
     };
 

package/src/exchange/swap/transactionStrategies.ts

@@ -2,6 +2,9 @@ import { BigNumber } from "bignumber.js";
 
 import { Transaction } from "../../generated/types";
 import { TransactionCommon } from "@ledgerhq/types-live";
+import { createStepError, StepError, CustomErrorType } from "../../wallet-api/Exchange";
+import { getFeature } from "../../featureFlags";
+
 export type { SwapLiveError } from "@ledgerhq/wallet-api-exchange-module";
 
 export function defaultTransaction({
@@ -85,11 +88,11 @@ export function stellarTransaction({
   customErrorType,
 }: TransactionWithCustomFee): Extract<Transaction, { family: "stellar" }> {
   if (!payinExtraId)
-    throw {
+    throw createStepError({
       error: new Error("Missing payinExtraId"),
-      step: "PayinExtraIdStepError",
+      step: StepError.PAYIN_EXTRA_ID,
       customErrorType,
-    };
+    });
 
   return {
     family: "stellar",
@@ -110,11 +113,11 @@ export function rippleTransaction({
   customErrorType,
 }: TransactionWithCustomFee): Partial<Extract<Transaction, { family: "xrp" }>> {
   if (!payinExtraId)
-    throw {
+    throw createStepError({
       error: new Error("Missing payinExtraId"),
-      step: "PayinExtraIdStepError",
+      step: StepError.PAYIN_EXTRA_ID,
       customErrorType,
-    };
+    });
 
   return {
     family: "xrp",
@@ -182,12 +185,32 @@ export function solanaTransaction({
   amount,
   recipient,
   customFeeConfig: _customFeeConfig,
+  extraTransactionParameters,
 }: TransactionWithCustomFee): Extract<Transaction, { family: "solana" }> {
+  let templateId: string | undefined = undefined;
+  const lifiSolanaFeature = getFeature({ key: "lifiSolana" });
+
+  if (lifiSolanaFeature?.enabled && extraTransactionParameters) {
+    try {
+      const parsed = JSON.parse(extraTransactionParameters);
+      if (typeof parsed?.solanaTransaction?.templateId === "string") {
+        templateId = parsed.solanaTransaction.templateId;
+      } else {
+        console.warn(
+          `Template id "${templateId}" found in extraTransactionParameters for solana transaction is not a string, ignored`,
+        );
+      }
+    } catch (e) {
+      console.warn("Failed to parse extraTransactionParameters", e);
+    }
+  }
+
   return {
     family: "solana",
     amount,
     recipient,
     model: { kind: "transfer", uiState: {} },
+    ...(templateId && { templateId }),
   };
 }
 
@@ -257,7 +280,7 @@ export type TransactionWithCustomFee = TransactionCommon & {
     [key: string]: BigNumber;
   };
   payinExtraId?: string;
-  customErrorType?: "swap";
+  customErrorType?: CustomErrorType;
   extraTransactionParameters?: string;
   family: string;
   sponsored?: boolean;

package/src/exchange/swap/types.ts

@@ -214,7 +214,9 @@ export type SwapStateAcceptedRequest = SwapStateRequest & {
   transactionId: string;
 };
 
-export type SwapStateCancelledRequest = SwapStateRequest;
+export type SwapStateCancelledRequest = SwapStateRequest & {
+  data?: string;
+};
 
 export type PostSwapAccepted = (arg0: SwapStateAcceptedRequest) => Promise<null>;
 

package/src/families/bitcoin/bridge/api.ts

@@ -1,6 +1,6 @@
 import { FeeEstimationFailed } from "@ledgerhq/errors";
 import { makeLRUCache } from "@ledgerhq/live-network/cache";
-import network from "@ledgerhq/live-network/network";
+import network from "@ledgerhq/live-network";
 import type { CryptoCurrency } from "@ledgerhq/types-cryptoassets";
 import { BigNumber } from "bignumber.js";
 import invariant from "invariant";
@@ -13,7 +13,7 @@ const getEstimatedFees: (currency: CryptoCurrency) => Promise<Fees> = makeLRUCac
   async currency => {
     const baseURL = blockchainBaseURL(currency);
     invariant(baseURL, `Fees for ${currency.id} are not supported`);
-    const { data, status } = await network({
+    const { data, status } = await network<Fees>({
       method: "GET",
       url: `${baseURL}/fees`,
     });

package/src/families/bitcoin/walletApiAdapter.test.ts

@@ -122,6 +122,42 @@ describe("getPlatformTransactionSignFlowInfos", () => {
     "strategy": 0,
   },
 }
+`);
+    });
+
+    test("with changeAddress provided", () => {
+      const btcPlatformTx: WalletAPITransaction = {
+        family: "bitcoin",
+        amount: new BigNumber(100000),
+        recipient: "0xABCDEF",
+        changeAddress: "1ChangeAddressExample",
+      };
+
+      const { canEditFees, hasFeesProvided, liveTx } = btc.getWalletAPITransactionSignFlowInfos({
+        walletApiTransaction: btcPlatformTx,
+        account: {} as Account,
+      });
+
+      expect(canEditFees).toBe(true);
+
+      expect(hasFeesProvided).toBe(false);
+
+      expect(liveTx).toMatchInlineSnapshot(`
+{
+  "amount": "100000",
+  "changeAddress": "1ChangeAddressExample",
+  "family": "bitcoin",
+  "feePerByte": null,
+  "feesStrategy": "medium",
+  "networkInfo": null,
+  "rbf": false,
+  "recipient": "0xABCDEF",
+  "useAllAmount": false,
+  "utxoStrategy": {
+    "excludeUTXOs": [],
+    "strategy": 0,
+  },
+}
 `);
     });
   });

package/src/families/bitcoin/walletApiAdapter.ts

@@ -35,6 +35,10 @@ const convertToLiveTransaction: ConvertToLiveTransaction<
     liveTx.opReturnData = walletApiTransaction.opReturnData;
   }
 
+  if (walletApiTransaction.changeAddress) {
+    liveTx.changeAddress = walletApiTransaction.changeAddress;
+  }
+
   if (hasFeesProvided) {
     liveTx.feesStrategy = null;
   }

package/src/families/canton/config.ts

@@ -23,9 +23,9 @@ export const cantonConfig: Record<string, ConfigInfo> = {
       status: {
         type: "active",
       },
-      nodeUrl: "https://canton-gateway.api.live.ledger.com/v1/node/ledger-live-devnet",
+      nodeUrl: "https://canton-gateway-devnet.api.live.ledger-test.com/v1/node/ledger-live-devnet",
       nodeId: "ledger-live-devnet",
-      gatewayUrl: "https://canton-gateway.api.live.ledger-test.com",
+      gatewayUrl: "https://canton-gateway-devnet.api.live.ledger-test.com",
       minReserve: 0,
       useGateway: true,
       networkType: "devnet",
@@ -39,9 +39,10 @@ export const cantonConfig: Record<string, ConfigInfo> = {
       status: {
         type: "active",
       },
-      nodeUrl: "https://canton-gateway.api.live.ledger.com/v1/node/ledger-live-testnet",
+      nodeUrl:
+        "https://canton-gateway-testnet.api.live.ledger-test.com/v1/node/ledger-live-testnet",
       nodeId: "ledger-live-testnet",
-      gatewayUrl: "https://canton-gateway.api.live.ledger-test.com",
+      gatewayUrl: "https://canton-gateway-testnet.api.live.ledger-test.com",
       minReserve: 0,
       nativeInstrumentId: "Amulet",
       useGateway: true,

package/src/families/canton/react.test.ts

@@ -0,0 +1,147 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Mock the bridge to avoid loading all bridge implementations with ESM dependencies
+jest.mock("../../bridge", () => ({
+  getCurrencyBridge: jest.fn(),
+}));
+
+import { renderHook, act } from "@testing-library/react";
+import { getRemainingTime, useTimeRemaining } from "./react";
+
+const MILLISECOND = 1000;
+const SECOND = 1 * MILLISECOND;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+describe("getRemainingTime", () => {
+  test("should return empty string for negative or zero diff", () => {
+    expect(getRemainingTime(0)).toBe("");
+    expect(getRemainingTime(-1000)).toBe("");
+    expect(getRemainingTime(-100000)).toBe("");
+  });
+
+  test("should format seconds only", () => {
+    expect(getRemainingTime(30 * SECOND)).toBe("30s");
+    expect(getRemainingTime(59 * SECOND)).toBe("59s");
+    expect(getRemainingTime(1 * SECOND)).toBe("1s");
+  });
+
+  test("should format minutes and seconds", () => {
+    expect(getRemainingTime(1 * MINUTE + 30 * SECOND)).toBe("1m 30s");
+    expect(getRemainingTime(5 * MINUTE + 15 * SECOND)).toBe("5m 15s");
+    expect(getRemainingTime(59 * MINUTE + 59 * SECOND)).toBe("59m 59s");
+  });
+
+  test("should format hours, minutes and seconds", () => {
+    expect(getRemainingTime(1 * HOUR + 30 * MINUTE + 15 * SECOND)).toBe("1h 30m 15s");
+    expect(getRemainingTime(2 * HOUR + 5 * MINUTE + 10 * SECOND)).toBe("2h 5m 10s");
+    expect(getRemainingTime(23 * HOUR + 59 * MINUTE + 59 * SECOND)).toBe("23h 59m 59s");
+  });
+
+  test("should format days, hours, minutes and seconds", () => {
+    expect(getRemainingTime(1 * DAY + 2 * HOUR + 30 * MINUTE + 15 * SECOND)).toBe("1d 2h 30m 15s");
+    expect(getRemainingTime(5 * DAY + 10 * HOUR + 5 * MINUTE + 10 * SECOND)).toBe("5d 10h 5m 10s");
+    expect(getRemainingTime(10 * DAY + 23 * HOUR + 59 * MINUTE + 59 * SECOND)).toBe(
+      "10d 23h 59m 59s",
+    );
+  });
+
+  test("should skip zero values", () => {
+    expect(getRemainingTime(1 * DAY)).toBe("1d 0s");
+    expect(getRemainingTime(1 * HOUR)).toBe("1h 0s");
+    expect(getRemainingTime(1 * MINUTE)).toBe("1m 0s");
+    expect(getRemainingTime(1 * DAY + 1 * MINUTE)).toBe("1d 1m 0s");
+    expect(getRemainingTime(1 * DAY + 1 * HOUR)).toBe("1d 1h 0s");
+  });
+});
+
+describe("useTimeRemaining", () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    jest.setSystemTime(new Date("2024-01-01T12:00:00Z"));
+  });
+
+  test("should return empty string when proposal is null", () => {
+    const { result } = renderHook(() => useTimeRemaining());
+    expect(result.current).toBe("");
+  });
+
+  test("should return empty string when proposal is expired", () => {
+    const proposal = {
+      expiresAt: (Date.now() - 1000) * 1000, // 1 second ago
+      isExpired: true,
+    };
+    const { result } = renderHook(() => useTimeRemaining(proposal.expiresAt, proposal.isExpired));
+    expect(result.current).toBe("");
+  });
+
+  test("should return formatted time remaining for valid proposal", () => {
+    const expiresAt = Date.now() + 2 * HOUR + 30 * MINUTE + 15 * SECOND;
+    const { result } = renderHook(() => useTimeRemaining(expiresAt * 1000));
+    expect(result.current).toBe("2h 30m 15s");
+  });
+
+  test("should update time remaining every second", () => {
+    const expiresAt = Date.now() + 2 * MINUTE + 30 * SECOND;
+    const { result } = renderHook(() => useTimeRemaining(expiresAt * 1000));
+
+    expect(result.current).toBe("2m 30s");
+
+    act(() => {
+      jest.advanceTimersByTime(1 * SECOND);
+    });
+    expect(result.current).toBe("2m 29s");
+
+    act(() => {
+      jest.advanceTimersByTime(1 * SECOND);
+    });
+    expect(result.current).toBe("2m 28s");
+
+    act(() => {
+      jest.advanceTimersByTime(30 * SECOND);
+    });
+    expect(result.current).toBe("1m 58s");
+  });
+
+  test("should return empty string when time expires", () => {
+    const expiresAt = Date.now() + 2 * SECOND;
+    const { result } = renderHook(() => useTimeRemaining(expiresAt * 1000));
+
+    expect(result.current).toBe("2s");
+
+    act(() => {
+      jest.advanceTimersByTime(1 * SECOND);
+    });
+    expect(result.current).toBe("1s");
+
+    act(() => {
+      jest.advanceTimersByTime(1 * SECOND);
+    });
+    expect(result.current).toBe("");
+  });
+
+  test("should clear interval on unmount", () => {
+    const expiresAt = Date.now() + 1 * HOUR;
+    const { result, unmount } = renderHook(() => useTimeRemaining(expiresAt * 1000));
+
+    expect(result.current).toBe("1h 0s");
+
+    unmount();
+
+    // Advance time after unmount - should not cause errors
+    act(() => {
+      jest.advanceTimersByTime(1 * SECOND);
+    });
+  });
+});

package/src/families/canton/react.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useState, useEffect } from "react";
 import { getCurrencyBridge } from "../../bridge";
 import { CantonCurrencyBridge } from "@ledgerhq/coin-canton/types";
 import { CryptoCurrency } from "@ledgerhq/types-cryptoassets";
@@ -48,3 +48,47 @@ export function useCantonAcceptOrRejectOffer({
 
   return transferInstruction;
 }
+
+export const getRemainingTime = (diff: number): string => {
+  if (diff <= 0) {
+    return "";
+  }
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+  let format = "";
+  if (days > 0) format += `${days}d `;
+  if (hours > 0) format += `${hours}h `;
+  if (minutes > 0) format += `${minutes}m `;
+  format += `${seconds}s`;
+
+  return format.trim();
+};
+
+export const useTimeRemaining = (expiresAtMicros = 0, isExpired = false): string => {
+  const [timeRemaining, setTimeRemaining] = useState<string>("");
+
+  useEffect(() => {
+    if (expiresAtMicros <= 0 || isExpired) {
+      setTimeRemaining("");
+      return;
+    }
+
+    const updateTimeRemaining = () => {
+      const now = Date.now();
+      const expiresAt = expiresAtMicros / 1000;
+      const diff = expiresAt - now;
+
+      setTimeRemaining(getRemainingTime(diff));
+    };
+
+    updateTimeRemaining();
+    const interval = setInterval(updateTimeRemaining, 1000);
+
+    return () => clearInterval(interval);
+  }, [expiresAtMicros, isExpired]);
+
+  return timeRemaining;
+};