@ledgerhq/live-common 31.2.0 → 31.3.0-next.0

package/src/data/icons/svg/STX.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+	<g>
+		<path d="M 14.308594 14.109375 L 16.820312 17.910156 L 14.941406 17.910156 L 11.996094 13.445312 L 9.046875 17.910156 L 7.179688 17.910156 L 9.691406 14.121094 L 6.089844 14.121094 L 6.089844 12.679688 L 17.910156 12.679688 L 17.910156 14.109375 Z M 14.308594 14.109375 " fill="#5546ff"/>
+		<path d="M 17.910156 9.839844 L 17.910156 11.289062 L 6.089844 11.289062 L 6.089844 9.839844 L 9.621094 9.839844 L 7.140625 6.089844 L 9.015625 6.089844 L 11.996094 10.617188 L 14.984375 6.089844 L 16.859375 6.089844 L 14.378906 9.839844 Z M 17.910156 9.839844 " fill="#5546ff"/>
+	</g>
+</svg>

package/src/deviceSDK/actions/updateFirmware.ts

@@ -73,11 +73,11 @@ export function updateFirmwareAction({
       scan<
         UpdateFirmwareTaskEvent | GetLatestFirmwareTaskErrorEvent | GetDeviceInfoTaskErrorEvent,
         UpdateFirmwareActionState
-      >((_, event) => {
+      >((currentState, event) => {
         switch (event.type) {
           case "taskError":
             return {
-              ...initialState,
+              ...currentState,
               error: {
                 type: "UpdateFirmwareError",
                 name: event.error,
@@ -104,7 +104,7 @@ export function updateFirmwareAction({
             };
           default:
             return {
-              ...initialState,
+              ...currentState,
               ...sharedReducer({
                 event,
               }),

package/src/deviceSDK/hooks/useUpdateFirmware.ts

@@ -52,7 +52,10 @@ export const useUpdateFirmware = ({
     }
   }, [deviceId, updateFirmwareAction, nonce]);
 
-  const triggerUpdate = useCallback(() => setNonce(nonce => nonce + 1), []);
+  const triggerUpdate = useCallback(() => {
+    setUpdateState(initialState);
+    setNonce(nonce => nonce + 1);
+  }, []);
 
   return { updateState, triggerUpdate };
 };

package/src/errors.ts

@@ -28,6 +28,7 @@ export const ImageCommitRefusedOnDevice = createCustomErrorClass("ImageCommitRef
 
 export const LanguageInstallTimeout = createCustomErrorClass("LanguageInstallTimeout");
 
+export const DeviceOnboarded = createCustomErrorClass("DeviceOnboarded");
 export const DeviceNotOnboarded = createCustomErrorClass("DeviceNotOnboarded");
 export const InvalidAddressBecauseAlreadyDelegated = createCustomErrorClass(
   "InvalidAddressBecauseAlreadyDelegated",

package/src/exchange/swap/getExchangeRates.test.ts

@@ -111,14 +111,7 @@ describe("swap/getExchangeRates", () => {
 
     mockedAxios.mockResolvedValue(Promise.resolve(resp));
     mockedProviders.mockResolvedValue(Promise.resolve([]));
-    const res = await getExchangeRates(
-      exchange,
-      transaction,
-      undefined,
-      undefined,
-      providers,
-      true,
-    );
+    const res = await getExchangeRates(exchange, transaction, undefined, undefined, providers);
 
     const expectedExchangeRate: ExchangeRate = {
       magnitudeAwareRate: new BigNumber("140000000000"),
@@ -162,14 +155,7 @@ describe("swap/getExchangeRates", () => {
 
     mockedAxios.mockResolvedValue(Promise.resolve(resp));
     mockedProviders.mockResolvedValue(Promise.resolve([]));
-    const res = await getExchangeRates(
-      exchange,
-      transaction,
-      undefined,
-      undefined,
-      providers,
-      true,
-    );
+    const res = await getExchangeRates(exchange, transaction, undefined, undefined, providers);
 
     const expectedExchangeRate: ExchangeRate = {
       magnitudeAwareRate: new BigNumber("133913600000"),
@@ -184,33 +170,7 @@ describe("swap/getExchangeRates", () => {
     expect(res).toEqual([expectedExchangeRate]);
   });
 
-  it("should query for CEX providers only", async () => {
-    const resp = {
-      data: [],
-      status: 200,
-      statusText: "",
-      headers: {},
-      config: {},
-    };
-
-    mockedAxios.mockResolvedValue(Promise.resolve(resp));
-    mockedProviders.mockResolvedValue(Promise.resolve([]));
-    const includeDEX = false;
-    await getExchangeRates(exchange, transaction, undefined, undefined, providers, includeDEX);
-    expect(mockedAxios).toHaveBeenCalledWith({
-      method: "POST",
-      url: "https://swap.ledger.com/v4/rate",
-      data: {
-        amountFrom: "0.0001",
-        from: "bitcoin",
-        providers: ["changelly"],
-        to: "ethereum",
-      },
-      headers: expect.anything(),
-    });
-  });
-
-  it("should query for CEX and DEX providers", async () => {
+  it("should query for CEX and DEX providers by default", async () => {
     const resp = {
       data: [],
       status: 200,
@@ -221,8 +181,7 @@ describe("swap/getExchangeRates", () => {
 
     mockedAxios.mockResolvedValue(Promise.resolve(resp));
     mockedProviders.mockResolvedValue(Promise.resolve([]));
-    const includeDEX = true;
-    await getExchangeRates(exchange, transaction, undefined, undefined, providers, includeDEX);
+    await getExchangeRates(exchange, transaction, undefined, undefined, providers);
     expect(mockedAxios).toHaveBeenCalledWith({
       method: "POST",
       url: "https://swap.ledger.com/v4/rate",
@@ -235,7 +194,7 @@ describe("swap/getExchangeRates", () => {
       headers: expect.anything(),
     });
   });
-  test("shout not query for providers which is not compatible with the requested pair", async () => {
+  test("should not query for providers which is not compatible with the requested pair", async () => {
     const providers = [
       {
         provider: "changelly",
@@ -257,8 +216,7 @@ describe("swap/getExchangeRates", () => {
 
     mockedAxios.mockResolvedValue(Promise.resolve(resp));
     mockedProviders.mockResolvedValue(Promise.resolve([]));
-    const includeDEX = true;
-    await getExchangeRates(exchange, transaction, undefined, undefined, providers, includeDEX);
+    await getExchangeRates(exchange, transaction, undefined, undefined, providers);
     expect(mockedAxios).toHaveBeenCalledWith({
       method: "POST",
       url: "https://swap.ledger.com/v4/rate",

package/src/exchange/swap/getExchangeRates.ts

@@ -20,7 +20,8 @@ const getExchangeRates: GetExchangeRates = async (
   userId?: string, // TODO remove when wyre doesn't require this for rates
   currencyTo?: TokenCurrency | CryptoCurrency | undefined | null,
   providers: AvailableProviderV3[] = [],
-  includeDEX = false,
+  timeout = undefined,
+  timeoutErrorMessage = undefined,
 ) => {
   if (getEnv("MOCK") && !getEnv("PLAYWRIGHT_RUN"))
     return mockGetExchangeRates(exchange, transaction, currencyTo);
@@ -35,16 +36,8 @@ const getExchangeRates: GetExchangeRates = async (
 
   const providerList = providers
     .filter(provider => provider.pairs.some(pair => pair.from === from && pair.to === to))
-    .filter(provider =>
-      includeDEX ? true : !(getProviderConfig(provider.provider).type === "DEX"),
-    )
     .map(item => item.provider);
 
-  // This if can be removed if includeDex is always true. Prevent a backEnd error.
-  if (providerList.length === 0) {
-    return [];
-  }
-
   const request = {
     from,
     to,
@@ -57,6 +50,8 @@ const getExchangeRates: GetExchangeRates = async (
     headers: {
       ...(userId ? { userId } : {}),
     },
+    ...(timeout ? { timeout } : {}),
+    ...(timeoutErrorMessage ? { timeoutErrorMessage } : {}),
     data: request,
   });
 

package/src/exchange/swap/hooks/index.ts

@@ -8,3 +8,4 @@ export * from "./useUpdateMaxAmount";
 export * from "./useProviderRates";
 export * from "./useFromState";
 export * from "./useToState";
+export * from "./usePageState";

package/src/exchange/swap/hooks/useFromState.test.ts

@@ -12,6 +12,8 @@ const BTC = getCryptoCurrencyById("bitcoin");
 const ETH = getCryptoCurrencyById("ethereum");
 const USDT = getTokenById("ethereum/erc20/usd_tether__erc20_");
 
+jest.useFakeTimers();
+
 const mockedAccounts: Account[] = [
   genAccount("mocked-account-1"),
   genAccount("mocked-account-2", {
@@ -108,7 +110,7 @@ describe("useFromState", () => {
     });
   });
 
-  test("call hook and set the amount", () => {
+  test("call hook and set the amount after 400ms", () => {
     const { result } = renderHook(() => {
       const bridgeTransaction = useBridgeTransaction();
       return useFromState({
@@ -125,6 +127,17 @@ describe("useFromState", () => {
       result.current.setFromAmount(new BigNumber(10));
     });
 
+    expect(result.current).toMatchObject({
+      fromState: {
+        ...selectorStateDefaultValues,
+        amount: undefined,
+      },
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(400);
+    });
+
     expect(result.current).toMatchObject({
       fromState: {
         ...selectorStateDefaultValues,
@@ -132,4 +145,63 @@ describe("useFromState", () => {
       },
     });
   });
+
+  test("call hook and set the the most recent amount input after 400ms", () => {
+    const { result } = renderHook(() => {
+      const bridgeTransaction = useBridgeTransaction();
+      return useFromState({
+        accounts: allAccounts,
+        bridgeTransaction,
+      });
+    });
+
+    expect(result.current).toMatchObject({
+      fromState: selectorStateDefaultValues,
+    });
+
+    act(() => {
+      result.current.setFromAmount(new BigNumber(10));
+    });
+
+    expect(result.current).toMatchObject({
+      fromState: {
+        ...selectorStateDefaultValues,
+        amount: undefined,
+      },
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(result.current).toMatchObject({
+      fromState: {
+        ...selectorStateDefaultValues,
+        amount: undefined,
+      },
+    });
+
+    act(() => {
+      result.current.setFromAmount(new BigNumber(20));
+      jest.advanceTimersByTime(100);
+    });
+
+    expect(result.current).toMatchObject({
+      fromState: {
+        ...selectorStateDefaultValues,
+        amount: undefined,
+      },
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(result.current).toMatchObject({
+      fromState: {
+        ...selectorStateDefaultValues,
+        amount: new BigNumber(20),
+      },
+    });
+  });
 });

package/src/exchange/swap/hooks/useFromState.ts

@@ -1,10 +1,12 @@
 import { getAbandonSeedAddress } from "@ledgerhq/cryptoassets";
 import type { Account, AccountLike } from "@ledgerhq/types-live";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { selectorStateDefaultValues } from ".";
 import { getAccountCurrency, getMainAccount } from "../../../account";
 import { Result as UseBridgeTransactionReturnType } from "../../../bridge/useBridgeTransaction";
 import { SwapSelectorStateType, SwapTransactionType } from "../types";
+import BigNumber from "bignumber.js";
+import { debounce } from "../utils/debounce";
 
 export const useFromState = ({
   accounts,
@@ -58,18 +60,24 @@ export const useFromState = ({
     [accounts, bridgeTransaction.updateTransaction],
   );
 
-  const setFromAmount: SwapTransactionType["setFromAmount"] = useCallback(
-    amount => {
-      bridgeTransaction.updateTransaction(transaction => ({
-        ...transaction,
-        amount,
-      }));
-      setFromState(previousState => ({ ...previousState, amount: amount }));
-    },
+  const debouncedSetFromAmount = useMemo(
+    () =>
+      debounce((amount: BigNumber) => {
+        bridgeTransaction.updateTransaction(transaction => ({
+          ...transaction,
+          amount,
+        }));
+        setFromState(previousState => ({ ...previousState, amount: amount }));
+      }, 400),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [bridgeTransaction.updateTransaction],
   );
 
+  const setFromAmount: SwapTransactionType["setFromAmount"] = useCallback(
+    amount => debouncedSetFromAmount(amount),
+    [debouncedSetFromAmount],
+  );
+
   return {
     fromState,
     setFromAccount,

package/src/exchange/swap/hooks/usePageState.test.ts

@@ -0,0 +1,50 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { usePageState } from "./usePageState";
+import { SwapTransactionType } from "../types";
+
+describe("usePageState", () => {
+  it("returns the correct page state", () => {
+    const swapTransaction = {
+      swap: {
+        from: {
+          amount: {
+            isZero: () => true,
+          },
+        },
+        rates: {
+          status: "success",
+        },
+        isMaxLoading: false,
+      },
+    } as SwapTransactionType;
+
+    let swapError: { message: string } | undefined = undefined;
+
+    const { result, rerender } = renderHook(() => usePageState(swapTransaction, swapError));
+
+    // Initial render
+    expect(result.current).toBe("initial");
+
+    // Rerender with rates loading
+    swapTransaction.swap.rates.status = "loading";
+    rerender();
+    expect(result.current).toBe("loading");
+
+    // Rerender with rates error
+    swapTransaction.swap.rates.status = "error";
+    rerender();
+    expect(result.current).toBe("initial");
+
+    // Rerender with empty error message and data loaded
+    swapTransaction.swap.rates.status = "success";
+    swapError = { message: "" };
+    rerender();
+    expect(result.current).toBe("empty");
+
+    // Rerender with from field is zero and data loaded
+    swapError = undefined;
+    if (swapTransaction.swap.from.amount) swapTransaction.swap.from.amount.isZero = () => true;
+    rerender();
+    expect(result.current).toBe("initial");
+  });
+});

package/src/exchange/swap/hooks/usePageState.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { RatesReducerState, SwapTransactionType } from "../types";
+
+type PageState = "initial" | "empty" | "loading" | "loaded";
+
+type SwapError =
+  | SwapTransactionType["fromAmountError"]
+  | RatesReducerState["error"]
+  | { message: string };
+
+// when the user first lands on this screen, they are seeing the initial state
+// when the user fetches data, they are seeing the loading state
+// when the data is returned, they are seeing the loaded state
+// when the user updates their search, they still see the loaded state
+// when the user fetches data and there is an error, they see the empty state
+// when the user fetches data and there is no data, they see the empty state
+// when the user resets their from search, they see the initial state
+export const usePageState = (
+  swapTransaction: SwapTransactionType,
+  swapError: SwapError | undefined,
+): PageState => {
+  const [pageState, setPageState] = useState<PageState>("initial");
+  const fromFieldIsZero = swapTransaction.swap.from.amount?.isZero() ?? true;
+  const isDataLoading =
+    swapTransaction.swap.isMaxLoading || swapTransaction.swap.rates.status === "loading";
+
+  useEffect(() => {
+    if (pageState === "loading" && swapTransaction.swap.rates.status === "success") {
+      setPageState("loaded");
+    } else if (pageState === "loading" && swapTransaction.swap.rates.status === "error") {
+      setPageState("initial");
+    } else if ((pageState === "initial" || pageState === "empty") && isDataLoading) {
+      setPageState("loading");
+    } else if (swapError && swapError?.message.length === 0 && !isDataLoading) {
+      setPageState("empty");
+    } else if (fromFieldIsZero && !isDataLoading) {
+      setPageState("initial");
+    }
+  }, [
+    pageState,
+    isDataLoading,
+    swapTransaction.swap.rates.status,
+    swapTransaction.swap.from.amount,
+    swapTransaction.swap.isMaxLoading,
+    fromFieldIsZero,
+    swapError,
+  ]);
+
+  return pageState;
+};

package/src/exchange/swap/hooks/useProviderRates.test.ts

@@ -382,4 +382,40 @@ describe("useProviderRates", () => {
     expect(result.current.rates.status).toBe("success");
     expect(onNoRates).toHaveBeenCalledTimes(1);
   });
+
+  it("should call onBeforeTransaction before new swap transaction begins", async () => {
+    mockedGetExchangeRates.mockResolvedValue(mockedRatesPromise);
+    const setExchangeRate = jest.fn();
+    const onBeforeTransaction = jest.fn();
+
+    const { result, waitForNextUpdate } = renderHook(useProviderRates, {
+      initialProps: {
+        ...baseInitalProps,
+        setExchangeRate,
+        onBeforeTransaction,
+      },
+    });
+    expect(onBeforeTransaction).toBeCalledTimes(1);
+    expect(result.current.rates.status).toBe("loading");
+
+    await waitForNextUpdate({ timeout: 1000 });
+    expect(onBeforeTransaction).toBeCalledTimes(1);
+  });
+
+  it("should call onBeforeTransaction callback before onNoRates if there are no rates", async () => {
+    const onNoRates = jest.fn();
+    const onBeforeTransaction = jest.fn();
+
+    mockedGetExchangeRates.mockResolvedValue([]);
+
+    const { result, waitForNextUpdate } = renderHook(useProviderRates, {
+      initialProps: { ...baseInitalProps, onNoRates, onBeforeTransaction },
+    });
+    expect(onBeforeTransaction).toHaveBeenCalledTimes(1);
+    expect(onNoRates).toHaveBeenCalledTimes(0);
+    await waitForNextUpdate({ timeout: 1000 });
+    expect(result.current.rates.value).toMatchObject([]);
+    expect(result.current.rates.status).toBe("success");
+    expect(onNoRates).toHaveBeenCalledTimes(1);
+  });
 });

package/src/exchange/swap/hooks/useProviderRates.ts

@@ -9,6 +9,7 @@ import {
   RatesReducerState,
   CustomMinOrMaxError,
   AvailableProviderV3,
+  OnBeforeTransaction,
 } from "../types";
 import { SetExchangeRateCallback } from "./useSwapTransaction";
 
@@ -32,9 +33,11 @@ type UseProviderRates = (args: {
   toState: SwapSelectorStateType;
   transaction?: Transaction | null;
   onNoRates?: OnNoRatesCallback;
+  onBeforeTransaction?: OnBeforeTransaction;
   setExchangeRate?: SetExchangeRateCallback | null | undefined;
   providers?: AvailableProviderV3[];
-  includeDEX?: boolean;
+  timeout?: number;
+  timeoutErrorMessage?: string;
 }) => {
   rates: RatesReducerState;
   refetchRates: () => void;
@@ -51,9 +54,11 @@ export const useProviderRates: UseProviderRates = ({
   toState,
   transaction,
   onNoRates,
+  onBeforeTransaction,
   setExchangeRate,
   providers,
-  includeDEX,
+  timeout,
+  timeoutErrorMessage,
 }) => {
   const { account: fromAccount, parentAccount: fromParentAccount } = fromState;
   const { currency: toCurrency, parentAccount: toParentAccount, account: toAccount } = toState;
@@ -72,6 +77,7 @@ export const useProviderRates: UseProviderRates = ({
     () => {
       let abort = false;
       async function getRates() {
+        onBeforeTransaction && onBeforeTransaction();
         if (
           !transaction ||
           !transaction?.amount ||
@@ -95,7 +101,8 @@ export const useProviderRates: UseProviderRates = ({
             undefined,
             toCurrency,
             providers,
-            includeDEX,
+            timeout,
+            timeoutErrorMessage,
           );
 
           if (abort) return;

package/src/exchange/swap/hooks/useSwapTransaction.ts

@@ -6,6 +6,7 @@ import {
   OnNoRatesCallback,
   SwapTransactionType,
   AvailableProviderV3,
+  OnBeforeTransaction,
 } from "../types";
 import useBridgeTransaction from "../../../bridge/useBridgeTransaction";
 import { useFromState } from "./useFromState";
@@ -45,9 +46,11 @@ export const useSwapTransaction = ({
   defaultAccount = selectorStateDefaultValues.account,
   defaultParentAccount = selectorStateDefaultValues.parentAccount,
   onNoRates,
+  onBeforeTransaction,
   excludeFixedRates,
   providers,
-  includeDEX,
+  timeout,
+  timeoutErrorMessage,
 }: {
   accounts?: Account[];
   setExchangeRate?: SetExchangeRateCallback;
@@ -55,9 +58,11 @@ export const useSwapTransaction = ({
   defaultAccount?: SwapSelectorStateType["account"];
   defaultParentAccount?: SwapSelectorStateType["parentAccount"];
   onNoRates?: OnNoRatesCallback;
+  onBeforeTransaction?: OnBeforeTransaction;
   excludeFixedRates?: boolean;
   providers?: AvailableProviderV3[];
-  includeDEX?: boolean;
+  timeout?: number;
+  timeoutErrorMessage?: string;
 } = {}): SwapTransactionType => {
   const bridgeTransaction = useBridgeTransaction(() => ({
     account: defaultAccount,
@@ -105,10 +110,12 @@ export const useSwapTransaction = ({
     fromState,
     toState,
     transaction,
+    onBeforeTransaction,
     onNoRates,
     setExchangeRate,
     providers,
-    includeDEX,
+    timeout,
+    timeoutErrorMessage,
   });
 
   return {

package/src/exchange/swap/types.ts

@@ -50,7 +50,7 @@ export type ExchangeRate = {
   providerType: "CEX" | "DEX";
   tradeMethod: "fixed" | "float";
   error?: Error;
-  providerURL?: string | null | undefined;
+  providerURL?: string;
   expirationTime?: number;
 };
 
@@ -66,7 +66,7 @@ export type ExchangeRateRaw = {
   providerType: "CEX" | "DEX";
   tradeMethod: TradeMethod;
   error?: string;
-  providerURL?: string | null | undefined;
+  providerURL?: string;
 };
 
 export type AvailableProviderV2 = {
@@ -138,7 +138,8 @@ export type GetExchangeRates = (
   wyreUserId?: string,
   currencyTo?: TokenCurrency | CryptoCurrency | undefined | null,
   providers?: AvailableProviderV3[],
-  includeDEX?: boolean,
+  timeout?: number,
+  timeoutErrorMessage?: string,
 ) => Promise<ExchangeRate[]>;
 export type GetProviders = () => Promise<AvailableProvider[]>;
 export type InitSwapResult = {
@@ -286,6 +287,8 @@ export type OnNoRatesCallback = (arg: {
   toState: SwapSelectorStateType;
 }) => void;
 
+export type OnBeforeTransaction = () => void;
+
 export type RatesReducerState = {
   status?: string | null;
   value?: ExchangeRate[];

package/src/exchange/swap/utils/debounce.ts

@@ -0,0 +1,28 @@
+export function debounce<F extends (...args: never[]) => void>(
+  func: F,
+  waitMilliseconds: number,
+  immediate = false,
+) {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  return (...args: Parameters<F>): void => {
+    const doLater = () => {
+      timeoutId = undefined;
+      if (!immediate) {
+        func(...args);
+      }
+    };
+
+    const shouldCallNow = immediate && timeoutId === undefined;
+
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(doLater, waitMilliseconds);
+
+    if (shouldCallNow) {
+      func(...args);
+    }
+  };
+}