@ledgerhq/live-common 34.51.0-nightly.7 → 34.51.0-nightly.9

package/src/modularDrawer/hooks/__tests__/useAcceptedCurrency.test.ts

@@ -0,0 +1,176 @@
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
+import { useAcceptedCurrency } from "../useAcceptedCurrency";
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { useCurrenciesUnderFeatureFlag } from "../useCurrenciesUnderFeatureFlag";
+import { isCurrencySupported } from "@ledgerhq/coin-framework/currencies/support";
+
+// Mock dependencies
+jest.mock("../useCurrenciesUnderFeatureFlag");
+jest.mock("@ledgerhq/coin-framework/currencies/support");
+
+const mockUseCurrenciesUnderFeatureFlag = useCurrenciesUnderFeatureFlag as jest.MockedFunction<
+  typeof useCurrenciesUnderFeatureFlag
+>;
+const mockIsCurrencySupported = isCurrencySupported as jest.MockedFunction<
+  typeof isCurrencySupported
+>;
+
+describe("useAcceptedCurrency", () => {
+  const mockCryptoCurrency: CryptoCurrency = {
+    id: "bitcoin",
+    name: "Bitcoin",
+    ticker: "BTC",
+    type: "CryptoCurrency",
+  } as CryptoCurrency;
+
+  const mockDeactivatedCurrency: CryptoCurrency = {
+    id: "ethereum",
+    name: "Ethereum",
+    ticker: "ETH",
+    type: "CryptoCurrency",
+  } as CryptoCurrency;
+
+  const mockTokenCurrency: TokenCurrency = {
+    id: "usdc",
+    name: "USD Coin",
+    ticker: "USDC",
+    type: "TokenCurrency",
+    parentCurrency: mockCryptoCurrency,
+  } as TokenCurrency;
+
+  const mockTokenWithDeactivatedParent: TokenCurrency = {
+    id: "weth",
+    name: "Wrapped Ethereum",
+    ticker: "WETH",
+    type: "TokenCurrency",
+    parentCurrency: mockDeactivatedCurrency,
+  } as TokenCurrency;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return true for a supported and non-deactivated currency", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set<string>(),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(true);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+    const isAccepted = result.current(mockCryptoCurrency);
+
+    expect(isAccepted).toBe(true);
+    expect(mockIsCurrencySupported).toHaveBeenCalledWith(mockCryptoCurrency);
+  });
+
+  it("should return false for a deactivated currency", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set(["ethereum"]),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(true);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+    const isAccepted = result.current(mockDeactivatedCurrency);
+
+    expect(isAccepted).toBe(false);
+    expect(mockIsCurrencySupported).toHaveBeenCalledWith(mockDeactivatedCurrency);
+  });
+
+  it("should return false for an unsupported currency", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set<string>(),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(false);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+    const isAccepted = result.current(mockCryptoCurrency);
+
+    expect(isAccepted).toBe(false);
+    expect(mockIsCurrencySupported).toHaveBeenCalledWith(mockCryptoCurrency);
+  });
+
+  it("should return true for a token with an accepted parent currency", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set<string>(),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(true);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+    const isAccepted = result.current(mockTokenCurrency);
+
+    expect(isAccepted).toBe(true);
+    expect(mockIsCurrencySupported).toHaveBeenCalledWith(mockCryptoCurrency);
+  });
+
+  it("should return false for a token with a deactivated parent currency", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set(["ethereum"]),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(true);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+    const isAccepted = result.current(mockTokenWithDeactivatedParent);
+
+    expect(isAccepted).toBe(false);
+    expect(mockIsCurrencySupported).toHaveBeenCalledWith(mockDeactivatedCurrency);
+  });
+
+  it("should return false for a token with an unsupported parent currency", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set<string>(),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(false);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+    const isAccepted = result.current(mockTokenCurrency);
+
+    expect(isAccepted).toBe(false);
+    expect(mockIsCurrencySupported).toHaveBeenCalledWith(mockCryptoCurrency);
+  });
+
+  it("should update when deactivatedCurrencyIds changes", () => {
+    const { result, rerender } = renderHook(() => useAcceptedCurrency());
+
+    // First render - currency is accepted
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set<string>(),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(true);
+    rerender();
+    expect(result.current(mockCryptoCurrency)).toBe(true);
+
+    // Second render - currency is deactivated
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set(["bitcoin"]),
+      featureFlaggedCurrencies: {},
+    } as any);
+    rerender();
+    expect(result.current(mockCryptoCurrency)).toBe(false);
+  });
+
+  it("should handle multiple currencies in deactivated set", () => {
+    mockUseCurrenciesUnderFeatureFlag.mockReturnValue({
+      deactivatedCurrencyIds: new Set(["ethereum", "cardano", "polkadot"]),
+      featureFlaggedCurrencies: {},
+    } as any);
+    mockIsCurrencySupported.mockReturnValue(true);
+
+    const { result } = renderHook(() => useAcceptedCurrency());
+
+    // Bitcoin should be accepted (not in deactivated set)
+    expect(result.current(mockCryptoCurrency)).toBe(true);
+
+    // Ethereum should be rejected (in deactivated set)
+    expect(result.current(mockDeactivatedCurrency)).toBe(false);
+  });
+});

package/src/modularDrawer/hooks/index.ts

@@ -1 +1,2 @@
 export { useDetailedAccountsCore } from "./useDetailedAccountsCore";
+export { useAcceptedCurrency } from "./useAcceptedCurrency";

package/src/modularDrawer/hooks/useAcceptedCurrency.ts

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import { CryptoCurrency, CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { isCurrencySupported } from "@ledgerhq/coin-framework/currencies/support";
+import { useCurrenciesUnderFeatureFlag } from "./useCurrenciesUnderFeatureFlag";
+
+/**
+ * Hook that returns a predicate function to check if a currency or token is accepted.
+ * A currency is accepted if:
+ * - It is supported by the platform (via isCurrencySupported)
+ * - It is not deactivated by a feature flag
+ *
+ * For tokens, the parent currency is checked instead.
+ */
+export function useAcceptedCurrency() {
+  const { deactivatedCurrencyIds } = useCurrenciesUnderFeatureFlag();
+
+  const isAcceptedCurrency = useCallback(
+    (currencyOrToken: CryptoOrTokenCurrency): boolean => {
+      const currency: CryptoCurrency =
+        currencyOrToken.type === "TokenCurrency" ? currencyOrToken.parentCurrency : currencyOrToken;
+
+      return isCurrencySupported(currency) && !deactivatedCurrencyIds.has(currency.id);
+    },
+    [deactivatedCurrencyIds],
+  );
+
+  return isAcceptedCurrency;
+}

package/src/modularDrawer/hooks/useLeftAccounts.tsx

@@ -1,6 +1,5 @@
-import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { ReactNode } from "react";
-import { AccountModuleParams, AccountDataItem } from "../utils/type";
+import { AccountModuleParams, AccountDataItem, NetworkWithCount } from "../utils/type";
 
 export const createUseLeftAccountsModule = ({
   useAccountData,
@@ -9,13 +8,10 @@ export const createUseLeftAccountsModule = ({
   useAccountData: (params: AccountModuleParams) => AccountDataItem[];
   accountsCount: (args: { label: string }) => ReactNode;
 }) => {
-  return function useLeftAccountsModule(
-    params: AccountModuleParams,
-  ): Array<CryptoOrTokenCurrency & { leftElement?: ReactNode; count: number }> {
+  return function useLeftAccountsModule(params: AccountModuleParams): Array<NetworkWithCount> {
     const accountData = useAccountData(params);
 
-    return accountData.map(({ asset, label, count }) => ({
-      ...asset,
+    return accountData.map(({ label, count }) => ({
       leftElement: count > 0 ? accountsCount({ label }) : undefined,
       count,
     }));

package/src/modularDrawer/hooks/useLeftAccountsApy.tsx

@@ -5,15 +5,14 @@ import {
   NetworkWithCount,
 } from "../utils/type";
 import { useInterestRatesByCurrencies } from "../../dada-client/hooks/useInterestRatesByCurrencies";
-import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { getInterestRateForAsset } from "../utils/getInterestRateForAsset";
 
 export function useLeftAccountsApyModule(
   params: AccountModuleParams,
   useAccountData: (params: AccountModuleParams) => AccountDataItem[],
   accountsCountAndApy: CreateAccountsCountAndApy,
-  networks: CryptoOrTokenCurrency[],
-): NetworkWithCount[] {
+): Array<NetworkWithCount> {
+  const { networks } = params;
   const accountData = useAccountData(params);
   const interestRates = useInterestRatesByCurrencies(networks);
 
@@ -27,12 +26,10 @@ export function useLeftAccountsApyModule(
 
     if ((!interestRate || interestRatePercentageRounded <= 0) && count <= 0) {
       return {
-        ...asset,
         count,
       };
     }
     return {
-      ...asset,
       leftElement: accountsCountAndApy({
         label: count > 0 ? label : undefined,
         value: interestRatePercentageRounded,

package/src/modularDrawer/hooks/{useAssetAccountCounts.tsx → useNetworkAccountCounts.tsx}

@@ -5,26 +5,27 @@ import type { Account } from "@ledgerhq/types-live";
 import { WalletAPIAccount } from "../../wallet-api/types";
 
 type AccountModuleParams = {
-  assets: CryptoOrTokenCurrency[];
+  networks: CryptoOrTokenCurrency[];
   nestedAccounts: Account[];
   accountIds: Map<string, boolean> | undefined;
   formatLabel: (count: number) => string;
   accounts$?: Observable<WalletAPIAccount[]>;
 };
 
-export type AssetCountItem = {
+export type NetworkCountItem = {
   asset: CryptoOrTokenCurrency;
   label: string;
   count: number;
 };
 
-export const useAssetAccountCounts = ({
-  assets,
+export const useNetworkAccountCounts = ({
+  networks,
   nestedAccounts,
   accountIds,
   formatLabel,
-}: AccountModuleParams): AssetCountItem[] =>
-  assets.map(asset => {
+}: AccountModuleParams): NetworkCountItem[] =>
+  networks.map(network => {
+    const asset = network.type === "TokenCurrency" ? network.parentCurrency : network;
     const { length } = getAccountTuplesForCurrency(asset, nestedAccounts, accountIds);
     return {
       asset,

package/src/modularDrawer/hooks/useRightBalanceNetwork.tsx

@@ -1,5 +1,5 @@
 import type { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
-import { UseBalanceDeps, CreateBalanceItem } from "../utils/type";
+import { UseBalanceDeps, CreateBalanceItem, BalanceUI } from "../utils/type";
 import { getBalanceAndFiatValueByAssets } from "../utils/getBalanceAndFiatValueByAssets";
 import BigNumber from "bignumber.js";
 
@@ -13,7 +13,10 @@ type Params = {
 };
 
 export function createUseRightBalanceNetwork({ useBalanceDeps, balanceItem }: NetworkDeps) {
-  return function useRightBalanceNetwork({ networks }: Params) {
+  return function useRightBalanceNetwork({ networks }: Params): Array<{
+    rightElement?: React.ReactNode;
+    balanceData?: BalanceUI;
+  }> {
     const { flattenedAccounts, state, counterValueCurrency } = useBalanceDeps();
 
     const networkBalanceData = getBalanceAndFiatValueByAssets(
@@ -34,7 +37,6 @@ export function createUseRightBalanceNetwork({ useBalanceDeps, balanceItem }: Ne
       };
 
       return {
-        ...currency,
         rightElement: balanceItem(balanceData),
         balanceData,
       };

package/src/modularDrawer/modules/__test__/createAssetConfiguration.test.tsx

@@ -0,0 +1,250 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { renderHook } from "@testing-library/react";
+import { mockEthCryptoCurrency } from "../../__mocks__/currencies.mock";
+import { groupCurrenciesByProvider } from "../../utils";
+import createAssetConfigurationHook from "../createAssetConfiguration";
+import { BigNumber } from "bignumber.js";
+import { genAccount, genTokenAccount } from "@ledgerhq/coin-framework/lib/mocks/account";
+import { createFixtureCryptoCurrency } from "../../../mock/fixtures/cryptoCurrencies";
+import { CounterValuesState } from "@ledgerhq/live-countervalues/lib/types";
+import { CryptoCurrency, FiatCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+
+export const makeUsdcToken = (
+  parentCurrency: CryptoCurrency,
+  contractAddress: string,
+  tokenType: string = "erc20",
+  name: string = "USD Coin",
+  explicitId?: string,
+) => {
+  const id = explicitId ?? `${parentCurrency.id}/${tokenType}/usdc`;
+  return {
+    type: "TokenCurrency" as const,
+    parentCurrency,
+    tokenType,
+    id,
+    contractAddress,
+    ticker: "USDC",
+    name,
+    units: [
+      {
+        name: "USD Coin",
+        code: "USDC",
+        magnitude: 6,
+      },
+    ],
+  };
+};
+
+const ApyIndicator = () => null;
+const MarketPercentIndicator = () => null;
+const MarketPriceIndicator = jest.fn(() => null);
+
+const ethereumCurrencyMagnitude = 18;
+const fiatCurrencyMagnitude = 2;
+const fiatConversion = 4589;
+
+const ethereumCurrency = createFixtureCryptoCurrency("ethereum");
+ethereumCurrency.id = "ethereum";
+ethereumCurrency.units[0].magnitude = ethereumCurrencyMagnitude;
+const ethereumAccountHigh = genAccount("ethereum-account-high", {
+  currency: ethereumCurrency,
+});
+
+ethereumAccountHigh.balance = new BigNumber("1000000000000000000000");
+ethereumAccountHigh.spendableBalance = ethereumAccountHigh.balance;
+
+const ethereumUsdcToken: TokenCurrency = makeUsdcToken(ethereumCurrency, "erc20", "USD Coin");
+const ethereumUsdcTokenAccount = genTokenAccount(0, ethereumAccountHigh, ethereumUsdcToken);
+ethereumUsdcTokenAccount.balance = new BigNumber("1000000000");
+ethereumAccountHigh.subAccounts = [ethereumUsdcTokenAccount];
+
+const mockFiatCurrency: FiatCurrency = {
+  type: "FiatCurrency",
+  ticker: "USD",
+  name: "US Dollar",
+  symbol: "$",
+  units: [
+    {
+      code: "$",
+      name: "US Dollar",
+      magnitude: fiatCurrencyMagnitude,
+      showAllDigits: true,
+      prefixCode: true,
+    },
+  ],
+};
+
+const useBalanceDeps = () => {
+  const mockCounterValuesState: CounterValuesState = {
+    cache: {
+      "USD ethereum": {
+        map: new Map([["latest", fiatConversion]]),
+        stats: {
+          oldest: "2024-09-12",
+          earliest: "2025-10-02T13",
+          oldestDate: new Date(),
+          earliestDate: new Date(),
+          earliestStableDate: new Date(),
+        },
+      },
+    },
+    data: {},
+    status: {},
+  };
+
+  return {
+    counterValueCurrency: mockFiatCurrency,
+    flattenedAccounts: [ethereumAccountHigh],
+    state: mockCounterValuesState,
+    locale: "en-US",
+  };
+};
+
+const balanceItem = jest.fn(() => null);
+
+const assetConfigurationDeps = {
+  useBalanceDeps,
+  balanceItem,
+  ApyIndicator,
+  MarketPercentIndicator,
+  MarketPriceIndicator,
+  assetsMap: groupCurrenciesByProvider([
+    {
+      asset: {
+        id: "ethereum",
+        ticker: "ETH",
+        name: "Ethereum",
+        assetsIds: {
+          ethereum: "ethereum",
+          arbitrum: "arbitrum",
+        },
+        metaCurrencyId: "ethereum",
+      },
+      networks: [mockEthCryptoCurrency],
+    },
+  ]),
+};
+
+describe("createAssetConfiguration", () => {
+  it("should call balanceItem with correct BalanceUI objects for each asset", () => {
+    renderHook(() =>
+      createAssetConfigurationHook(assetConfigurationDeps)({
+        assetsConfiguration: { rightElement: "balance" },
+      })([ethereumCurrency]),
+    );
+
+    expect(balanceItem).toHaveBeenCalledTimes(1);
+    expect(balanceItem).toHaveBeenNthCalledWith(1, {
+      currency: ethereumCurrency,
+      balance: ethereumAccountHigh.balance,
+      fiatValue: ethereumAccountHigh.balance
+        .shiftedBy(fiatCurrencyMagnitude - ethereumCurrencyMagnitude)
+        .multipliedBy(fiatConversion)
+        .toNumber(),
+    });
+  });
+
+  const store = configureStore({
+    reducer: {
+      assetsDataApi: (state = {}, _action) => state,
+    },
+    preloadedState: {
+      assetsDataApi: {
+        queries: {
+          mockMarketsQuery: {
+            data: {
+              pages: [
+                {
+                  markets: {
+                    ethereum: {
+                      price: 2500.5,
+                      priceChangePercentage24h: 5.25,
+                      marketCap: 300000000000,
+                      ticker: "ETH",
+                      name: "Ethereum",
+                    },
+                  },
+                  interestRates: {
+                    ethereum: {
+                      currencyId: "ethereum",
+                      rate: 0.045,
+                      type: "APY",
+                      fetchAt: "2024-10-13T10:00:00Z",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+  });
+
+  it("should generate market trend right element with correct market trend data", () => {
+    const {
+      result: { current },
+    } = renderHook(
+      () =>
+        createAssetConfigurationHook(assetConfigurationDeps)({
+          assetsConfiguration: { rightElement: "marketTrend" },
+        })([ethereumCurrency]),
+      {
+        wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+      },
+    );
+
+    const rightElement = current[0]?.rightElement;
+    expect(rightElement).toBeDefined();
+    expect(React.isValidElement(rightElement)).toBe(true);
+    if (React.isValidElement(rightElement)) {
+      expect(rightElement.props).toEqual({
+        percent: 5.25,
+        price: "$2,500.50",
+      });
+    }
+  });
+
+  it("should generate apy left element when leftElement is 'apy'", () => {
+    const {
+      result: { current },
+    } = renderHook(
+      () =>
+        createAssetConfigurationHook(assetConfigurationDeps)({
+          assetsConfiguration: { leftElement: "apy" },
+        })([ethereumCurrency]),
+      {
+        wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+      },
+    );
+
+    expect((current[0]?.leftElement as React.ReactElement).props).toEqual({
+      value: 4.5,
+      type: "APY",
+    });
+  });
+
+  it("should generate market trend left element when leftElement is 'marketTrend'", () => {
+    const {
+      result: { current },
+    } = renderHook(
+      () =>
+        createAssetConfigurationHook(assetConfigurationDeps)({
+          assetsConfiguration: { leftElement: "marketTrend" },
+        })([ethereumCurrency]),
+      {
+        wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+      },
+    );
+
+    expect((current[0]?.leftElement as React.ReactElement).props).toEqual({
+      percent: 5.25,
+    });
+  });
+});