@ledgerhq/live-common 34.51.0-nightly.1 → 34.51.0-nightly.11

package/src/modularDrawer/hooks/useCurrenciesUnderFeatureFlag.ts

@@ -73,6 +73,9 @@ export function useCurrenciesUnderFeatureFlag() {
   const kaspa = useFeature("currencyKaspa");
   const core = useFeature("currencyCore");
   const ethereumHoodi = useFeature("currencyEthereumHoodi");
+  const westend = useFeature("currencyWestend");
+  const assetHubWestend = useFeature("currencyAssetHubWestend");
+  const assetHubPolkadot = useFeature("currencyAssetHubPolkadot");
 
   const featureFlaggedCurrencies = useMemo(
     (): Partial<Record<CryptoCurrencyId, Feature<unknown> | null>> => ({
@@ -142,6 +145,9 @@ export function useCurrenciesUnderFeatureFlag() {
       kaspa,
       core,
       ethereum_hoodi: ethereumHoodi,
+      westend,
+      assethub_westend: assetHubWestend,
+      assethub_polkadot: assetHubPolkadot,
     }),
     [
       aptos,
@@ -210,6 +216,9 @@ export function useCurrenciesUnderFeatureFlag() {
       kaspa,
       core,
       ethereumHoodi,
+      westend,
+      assetHubWestend,
+      assetHubPolkadot,
     ],
   );
 

package/src/modularDrawer/hooks/useDetailedAccountsCore.ts

@@ -0,0 +1,146 @@
+import { useCallback } from "react";
+import { AccountLike } from "@ledgerhq/types-live";
+import { Currency } from "@ledgerhq/types-cryptoassets";
+import { CounterValuesState } from "@ledgerhq/live-countervalues/types";
+import { calculate } from "@ledgerhq/live-countervalues/logic";
+import { getTagDerivationMode } from "@ledgerhq/coin-framework/derivation";
+import {
+  BaseRawDetailedAccount,
+  ExtendedRawDetailedAccount,
+  CreateDetailedAccountsParams,
+} from "../types/detailedAccount";
+import { sortAccountsByFiatValue } from "../utils/sortAccountsByFiatValue";
+
+/**
+ * Core hook for creating detailed accounts with shared logic
+ * This contains the business logic that can be reused across platforms
+ */
+export function useDetailedAccountsCore(
+  counterValuesState: CounterValuesState,
+  counterValueCurrency: Currency,
+) {
+  /**
+   * Calculate fiat value for an account using counter values
+   */
+  const calculateFiatValue = useCallback(
+    (account: AccountLike): number => {
+      const currency = account.type === "Account" ? account.currency : account.token;
+      const fiatValue = calculate(counterValuesState, {
+        from: currency,
+        to: counterValueCurrency,
+        value: account.balance.toNumber(),
+      });
+      return fiatValue || 0;
+    },
+    [counterValuesState, counterValueCurrency],
+  );
+
+  /**
+   * Create base detailed accounts from account tuples
+   * This is the core transformation logic shared between platforms
+   */
+  const createBaseDetailedAccounts = useCallback(
+    (params: CreateDetailedAccountsParams): BaseRawDetailedAccount[] => {
+      const { accountTuples, accountNameMap, isTokenCurrency } = params;
+
+      const baseAccounts = accountTuples.map(tuple => {
+        const { account, subAccount } = tuple;
+        const address = account.freshAddress;
+
+        if (isTokenCurrency && subAccount) {
+          const parentAccountName = accountNameMap[account.id];
+          const details = subAccount.token;
+
+          return {
+            id: subAccount.id,
+            name: parentAccountName ?? details.name,
+            ticker: details.ticker,
+            balance: subAccount.balance,
+            balanceUnit: subAccount.token.units[0],
+            fiatValue: calculateFiatValue(subAccount),
+            address,
+            cryptoId: details.id,
+            parentId: details.parentCurrency.id,
+          };
+        } else {
+          const accountName = accountNameMap[account.id];
+          const details = account.currency;
+
+          return {
+            id: account.id,
+            name: accountName ?? details.name,
+            ticker: details.ticker,
+            balance: account.balance,
+            balanceUnit: account.currency.units[0],
+            fiatValue: calculateFiatValue(account),
+            address,
+            cryptoId: details.id,
+          };
+        }
+      });
+
+      return sortAccountsByFiatValue(baseAccounts);
+    },
+    [calculateFiatValue],
+  );
+
+  /**
+   * Create extended detailed accounts that include account references
+   * Used by mobile implementation that needs access to the full account objects
+   */
+  const createExtendedDetailedAccounts = useCallback(
+    (params: CreateDetailedAccountsParams): ExtendedRawDetailedAccount[] => {
+      const { accountTuples, accountNameMap, isTokenCurrency } = params;
+
+      const extendedAccounts = accountTuples.map(tuple => {
+        const { account, subAccount } = tuple;
+        const protocol = getTagDerivationMode(account.currency, account.derivationMode) ?? "";
+        const address = account.freshAddress;
+
+        if (isTokenCurrency && subAccount) {
+          const parentAccountName = accountNameMap[account.id];
+          const details = subAccount.token;
+
+          return {
+            id: subAccount.id,
+            name: parentAccountName ?? details.name,
+            ticker: details.ticker,
+            balance: subAccount.balance,
+            balanceUnit: subAccount.token.units[0],
+            fiatValue: calculateFiatValue(subAccount),
+            address,
+            cryptoId: details.id,
+            parentId: details.parentCurrency.id,
+            account: subAccount,
+            parentAccount: account,
+          };
+        } else {
+          const accountName = accountNameMap[account.id];
+          const details = account.currency;
+
+          return {
+            id: account.id,
+            name: accountName ?? details.name,
+            ticker: details.ticker,
+            balance: account.balance,
+            balanceUnit: account.currency.units[0],
+            fiatValue: calculateFiatValue(account),
+            address,
+            cryptoId: details.id,
+            account,
+            protocol,
+          };
+        }
+      });
+
+      return sortAccountsByFiatValue(extendedAccounts);
+    },
+    [calculateFiatValue],
+  );
+
+  return {
+    calculateFiatValue,
+    createBaseDetailedAccounts,
+    createExtendedDetailedAccounts,
+  };
+}

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/useNetworkAccountCounts.tsx

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

package/src/modularDrawer/hooks/useRightBalanceAsset.tsx

@@ -53,7 +53,11 @@ export function createUseRightBalanceAsset({ useBalanceDeps, balanceItem, assets
       }
 
       const assetsWithBalanceData = assets.map(asset => {
-        const balanceData = balanceMap.get(asset.id) || {};
+        const balanceData = balanceMap.get(asset.id) || {
+          currency: asset,
+          balance: new BigNumber(0),
+          fiatValue: 0,
+        };
         return {
           ...asset,
           balanceData,

package/src/modularDrawer/hooks/useRightBalanceNetwork.tsx

@@ -1,6 +1,7 @@
 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";
 
 export type NetworkDeps = {
   balanceItem: CreateBalanceItem;
@@ -12,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(
@@ -25,12 +29,16 @@ export function createUseRightBalanceNetwork({ useBalanceDeps, balanceItem }: Ne
     const balanceMap = new Map(networkBalanceData.map(b => [b.id, b]));
 
     return networks.map(network => {
-      const balanceData = balanceMap.get(network.id) || {};
-      const details = network.type === "TokenCurrency" ? network.parentCurrency : network;
+      const currency = network.type === "TokenCurrency" ? network.parentCurrency : network;
+      const balanceData = balanceMap.get(network.id) || {
+        currency,
+        balance: new BigNumber(0),
+        fiatValue: 0,
+      };
+
       return {
-        ...details,
         rightElement: balanceItem(balanceData),
-        balanceData: balanceData,
+        balanceData,
       };
     });
   };

package/src/modularDrawer/index.ts

@@ -0,0 +1,3 @@
+export * from "./hooks";
+export * from "./types";
+export * from "./utils";

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,
+    });
+  });
+});