@ledgerhq/live-common 34.47.0 → 34.48.0-nightly.0

package/src/modularDrawer/hooks/useLeftAccountsApy.tsx

@@ -0,0 +1,44 @@
+import {
+  AccountDataItem,
+  AccountModuleParams,
+  CreateAccountsCountAndApy,
+  NetworkWithCount,
+} from "../utils/type";
+import { useInterestRatesByCurrencies } from "../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[] {
+  const accountData = useAccountData(params);
+  const interestRates = useInterestRatesByCurrencies(networks);
+
+  // Map each account to its APY info using the shared utility
+  return accountData.map(({ asset, label, count }) => {
+    const { interestRate, interestRatePercentageRounded } = getInterestRateForAsset(
+      asset,
+      interestRates,
+      networks,
+    );
+
+    if ((!interestRate || interestRatePercentageRounded <= 0) && count <= 0) {
+      return {
+        ...asset,
+        count,
+      };
+    }
+    return {
+      ...asset,
+      leftElement: accountsCountAndApy({
+        label: count > 0 ? label : undefined,
+        value: interestRatePercentageRounded,
+        type: interestRate?.type,
+      }),
+      count,
+    };
+  });
+}

package/src/modularDrawer/hooks/useRightBalanceAsset.tsx

@@ -0,0 +1,140 @@
+import { useMemo } from "react";
+import type { ReactNode } from "react";
+import type { CryptoOrTokenCurrency, Currency } from "@ledgerhq/types-cryptoassets";
+import { formatCurrencyUnit } from "@ledgerhq/coin-framework/currencies/formatCurrencyUnit";
+import BigNumber from "bignumber.js";
+import { counterValueFormatter } from "../utils/counterValueFormatter";
+import { compareByBalanceThenFiat } from "../utils/sortByBalance";
+import { UseBalanceDeps } from "../utils/type";
+import { buildProviderCurrenciesMap } from "../utils/buildProviderCurrenciesMap";
+import { CurrenciesByProviderId } from "../../deposit/type";
+import { calculateProviderTotals } from "../utils/calculateProviderTotal";
+import { getProviderCurrency } from "../utils/getProviderCurrency";
+import { getBalanceAndFiatValueByAssets } from "../utils/getBalanceAndFiatValueByAssets";
+import { groupAccountsByAsset } from "../utils/groupAccountsByAsset";
+
+export type AssetDeps = {
+  useBalanceDeps: UseBalanceDeps;
+  balanceItem: (asset: { fiatValue?: string; balance?: string }) => ReactNode;
+};
+
+export function createUseRightBalanceAsset({ useBalanceDeps, balanceItem }: AssetDeps) {
+  const formatProviderResult = (
+    providerCurrency: CryptoOrTokenCurrency,
+    totalBalance: BigNumber,
+    totalFiatValue: BigNumber,
+    counterValueCurrency: Currency,
+    locale: string,
+    discreet: boolean,
+  ) => {
+    const unit = providerCurrency.units?.[0];
+    const balance = unit
+      ? formatCurrencyUnit(unit, totalBalance, { showCode: true, discreet })
+      : `${totalBalance.toFixed()} ${providerCurrency.ticker ?? providerCurrency.symbol}`;
+    const fiatValue = counterValueFormatter({
+      currency: counterValueCurrency.ticker,
+      value: totalFiatValue.toNumber(),
+      locale,
+      allowZeroValue: true,
+    });
+    return { balance, fiatValue };
+  };
+
+  return function useRightBalanceAsset(
+    assets: CryptoOrTokenCurrency[],
+    currenciesByProvider: CurrenciesByProviderId[],
+  ) {
+    const { flattenedAccounts, discreet, state, counterValueCurrency, locale } = useBalanceDeps();
+
+    const grouped = useMemo(
+      () => groupAccountsByAsset(flattenedAccounts, state, counterValueCurrency, discreet),
+      [flattenedAccounts, state, counterValueCurrency, discreet],
+    );
+
+    const providerMap = useMemo(
+      () => buildProviderCurrenciesMap(currenciesByProvider),
+      [currenciesByProvider],
+    );
+
+    return useMemo(() => {
+      if (!providerMap) {
+        const allBalance = getBalanceAndFiatValueByAssets(
+          flattenedAccounts,
+          assets,
+          state,
+          counterValueCurrency,
+          discreet,
+          locale,
+        );
+        const balanceMap = new Map(allBalance.map(b => [b.id, b]));
+        const assetsWithBalanceData = assets.map(asset => {
+          const balanceData = balanceMap.get(asset.id) || {};
+          return {
+            asset,
+            balanceData,
+          };
+        });
+
+        assetsWithBalanceData.sort((a, b) =>
+          compareByBalanceThenFiat(a.balanceData, b.balanceData, discreet),
+        );
+
+        return assetsWithBalanceData.map(({ asset, balanceData }) => ({
+          ...asset,
+          rightElement: balanceItem(balanceData),
+        }));
+      }
+
+      const assetsSet = new Set(assets.map(a => a.id));
+      const providerResultsMap = new Map<string, { balance?: string; fiatValue?: string }>();
+
+      for (const [, { currencies, mainCurrency }] of providerMap) {
+        if (!assetsSet.has(mainCurrency.id)) continue;
+        const providerCurrency = getProviderCurrency(mainCurrency, currencies);
+        if (!providerCurrency) continue;
+
+        const { totalBalance, totalFiatValue, hasAccounts } = calculateProviderTotals(
+          currencies,
+          grouped,
+        );
+        if (!hasAccounts) continue;
+
+        const { balance, fiatValue } = formatProviderResult(
+          providerCurrency,
+          totalBalance,
+          totalFiatValue,
+          counterValueCurrency,
+          locale,
+          discreet,
+        );
+        providerResultsMap.set(mainCurrency.id, { balance, fiatValue });
+      }
+
+      const assetsWithBalanceData = assets.map(asset => {
+        const balanceData = providerResultsMap.get(asset.id) || {};
+        return {
+          asset,
+          balanceData,
+        };
+      });
+
+      assetsWithBalanceData.sort((a, b) =>
+        compareByBalanceThenFiat(a.balanceData, b.balanceData, discreet),
+      );
+
+      return assetsWithBalanceData.map(({ asset, balanceData }) => ({
+        ...asset,
+        rightElement: balanceItem(balanceData),
+      }));
+    }, [
+      assets,
+      providerMap,
+      flattenedAccounts,
+      state,
+      counterValueCurrency,
+      discreet,
+      locale,
+      grouped,
+    ]);
+  };
+}

package/src/modularDrawer/hooks/useRightBalanceNetwork.tsx

@@ -0,0 +1,116 @@
+import { useMemo, type ReactNode } from "react";
+import type { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { compareByBalanceThenFiat } from "../utils/sortByBalance";
+import { BalanceUI, UseBalanceDeps } from "../utils/type";
+import { CurrenciesByProviderId } from "../../deposit/type";
+import { getBalanceAndFiatValueByAssets } from "../utils/getBalanceAndFiatValueByAssets";
+
+export type NetworkDeps = {
+  balanceItem: (asset: { fiatValue?: string; balance?: string }) => ReactNode;
+  useBalanceDeps: UseBalanceDeps;
+};
+
+type Params = {
+  assets: CryptoOrTokenCurrency[];
+  selectedAssetId: string;
+  currenciesByProvider: CurrenciesByProviderId[];
+};
+
+export function createUseRightBalanceNetwork({ useBalanceDeps, balanceItem }: NetworkDeps) {
+  return function useRightBalanceNetwork({
+    assets: networks,
+    selectedAssetId,
+    currenciesByProvider,
+  }: Params) {
+    const { flattenedAccounts, discreet, state, counterValueCurrency, locale } = useBalanceDeps();
+
+    return useMemo(() => {
+      if (currenciesByProvider && currenciesByProvider.length > 0) {
+        const providerOfSelectedAsset = currenciesByProvider.find(provider =>
+          provider.currenciesByNetwork.some(currency => currency.id === selectedAssetId),
+        );
+
+        if (providerOfSelectedAsset) {
+          const pairs = networks.map(network => ({
+            network,
+            asset: providerOfSelectedAsset.currenciesByNetwork.find(currency =>
+              currency.type === "TokenCurrency"
+                ? currency.parentCurrency.id === network.id
+                : currency.id === network.id,
+            ),
+          }));
+
+          const validAssets = pairs.filter(p => p.asset).map(p => p.asset!);
+
+          const allBalanceData =
+            validAssets.length > 0
+              ? getBalanceAndFiatValueByAssets(
+                  flattenedAccounts,
+                  validAssets,
+                  state,
+                  counterValueCurrency,
+                  discreet,
+                  locale,
+                )
+              : [];
+
+          const balanceMap = new Map(allBalanceData.map(b => [b.id, b]));
+
+          const networkWithBalanceData = pairs.map(({ network, asset }) => {
+            const balanceData: BalanceUI = asset ? balanceMap.get(asset.id) || {} : {};
+            return {
+              network,
+              balanceData,
+            };
+          });
+
+          networkWithBalanceData.sort((a, b) =>
+            compareByBalanceThenFiat(a.balanceData, b.balanceData, discreet),
+          );
+
+          return networkWithBalanceData.map(({ network, balanceData }) => ({
+            ...network,
+            rightElement: balanceItem(balanceData),
+          }));
+        }
+      }
+
+      const networkBalanceData = getBalanceAndFiatValueByAssets(
+        flattenedAccounts,
+        networks,
+        state,
+        counterValueCurrency,
+        discreet,
+        locale,
+      );
+
+      const balanceMap = new Map(networkBalanceData.map(b => [b.id, b]));
+
+      const networksWithBalance = networks.map(network => {
+        const balanceData = balanceMap.get(network.id) || {};
+        return {
+          network,
+          balanceData,
+        };
+      });
+
+      networksWithBalance.sort((a, b) =>
+        compareByBalanceThenFiat(a.balanceData, b.balanceData, discreet),
+      );
+
+      return networksWithBalance.map(({ network, balanceData }) => ({
+        ...network,
+        rightElement: balanceItem(balanceData),
+      }));
+    }, [
+      networks,
+      selectedAssetId,
+      currenciesByProvider,
+      flattenedAccounts,
+      state,
+      counterValueCurrency,
+      discreet,
+      locale,
+    ]);
+  };
+}

package/src/modularDrawer/modules/createAssetConfiguration.ts

@@ -0,0 +1,62 @@
+import type { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { AssetType, CreateAssetConfigurationHook, AssetConfigurationDeps } from "../utils/type";
+import { CurrenciesByProviderId } from "../../deposit/type";
+import { composeHooks } from "../../utils/composeHooks";
+import { useLeftApyModule } from "../hooks/modules/useLeftApyModule";
+import { createUseRightBalanceAsset } from "../hooks/useRightBalanceAsset";
+
+const getRightElement =
+  (AssetConfigurationDeps: AssetConfigurationDeps) => (rightElement?: string) => {
+    switch (rightElement) {
+      case "undefined":
+        return undefined;
+      case "marketTrend":
+      case "balance":
+      default:
+        return createUseRightBalanceAsset({
+          useBalanceDeps: AssetConfigurationDeps.useBalanceDeps,
+          balanceItem: AssetConfigurationDeps.balanceItem,
+        });
+    }
+  };
+
+const getLeftElement =
+  (AssetConfigurationDeps: AssetConfigurationDeps) => (leftElement?: string) => {
+    switch (leftElement) {
+      case "apy":
+        return (assets: CryptoOrTokenCurrency[]) =>
+          useLeftApyModule(assets, AssetConfigurationDeps.ApyIndicator);
+      case "marketTrend":
+      case "undefined":
+      default:
+        return undefined;
+    }
+  };
+
+const createAssetConfigurationHook: CreateAssetConfigurationHook =
+  deps =>
+  ({ assetsConfiguration, currenciesByProvider }) => {
+    const { rightElement, leftElement } = assetsConfiguration ?? {};
+
+    const rightHook = getRightElement(deps)(rightElement);
+    const leftHook = getLeftElement(deps)(leftElement);
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const hooks = [rightHook, leftHook].filter(Boolean) as Array<
+      (
+        assets: CryptoOrTokenCurrency[],
+        currenciesByProvider?: CurrenciesByProviderId[],
+      ) => AssetType[]
+    >;
+
+    return (assets: CryptoOrTokenCurrency[]) => {
+      const composedHook = composeHooks<CryptoOrTokenCurrency, AssetType>(
+        ...hooks.map(
+          hook => (assets: CryptoOrTokenCurrency[]) => hook(assets, currenciesByProvider),
+        ),
+      );
+      return composedHook(assets);
+    };
+  };
+
+export default createAssetConfigurationHook;

package/src/modularDrawer/modules/createNetworkConfiguration.ts

@@ -0,0 +1,87 @@
+import type { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { createUseLeftAccountsModule } from "../hooks/useLeftAccounts";
+import { useLeftAccountsApyModule } from "../hooks/useLeftAccountsApy";
+import { createUseRightBalanceNetwork } from "../hooks/useRightBalanceNetwork";
+import {
+  CreateNetworkConfigurationHookProps,
+  NetworkConfigurationDeps,
+  LeftElementKind,
+  Network,
+  NetworkHook,
+  RightElementKind,
+  AccountModuleParams,
+} from "../utils/type";
+import { composeHooks } from "../../utils/composeHooks";
+
+export const getLeftElement =
+  (NetworkConfigurationDeps: NetworkConfigurationDeps) =>
+  (leftElement?: LeftElementKind): NetworkHook | undefined => {
+    switch (leftElement) {
+      case "undefined":
+        return undefined;
+      case "numberOfAccountsAndApy":
+        return (params: AccountModuleParams & { networks: CryptoOrTokenCurrency[] }) =>
+          useLeftAccountsApyModule(
+            params,
+            NetworkConfigurationDeps.useAccountData,
+            NetworkConfigurationDeps.accountsCountAndApy,
+            params.networks,
+          );
+      case "numberOfAccounts":
+      default:
+        return createUseLeftAccountsModule({
+          useAccountData: NetworkConfigurationDeps.useAccountData,
+          accountsCount: NetworkConfigurationDeps.accountsCount,
+        });
+    }
+  };
+
+export const getRightElement =
+  (NetworkConfigurationDeps: NetworkConfigurationDeps) =>
+  (rightElement?: RightElementKind): NetworkHook | undefined => {
+    switch (rightElement) {
+      case "undefined":
+        return undefined;
+      case "balance":
+      default:
+        return createUseRightBalanceNetwork({
+          useBalanceDeps: NetworkConfigurationDeps.useBalanceDeps,
+          balanceItem: NetworkConfigurationDeps.balanceItem,
+        });
+    }
+  };
+
+export const createNetworkConfigurationHook =
+  (NetworkConfigurationDeps: NetworkConfigurationDeps) =>
+  ({
+    networksConfig,
+    selectedAssetId,
+    currenciesByProvider,
+    accounts$,
+  }: CreateNetworkConfigurationHookProps) => {
+    const { leftElement, rightElement } = networksConfig ?? {};
+    const leftHook = getLeftElement(NetworkConfigurationDeps)(leftElement);
+    const rightHook = getRightElement(NetworkConfigurationDeps)(rightElement);
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const hooks = [rightHook, leftHook].filter(Boolean) as NetworkHook[];
+
+    return (
+      assets: CryptoOrTokenCurrency[],
+      networks: CryptoOrTokenCurrency[],
+    ): Array<CryptoOrTokenCurrency & Network> => {
+      const composedHook = composeHooks<CryptoOrTokenCurrency, Network>(
+        ...hooks.map(
+          hook => () =>
+            hook({
+              assets,
+              selectedAssetId,
+              currenciesByProvider: currenciesByProvider || [],
+              accounts$,
+              networks,
+            }),
+        ),
+      );
+      return composedHook(assets);
+    };
+  };

package/src/modularDrawer/utils/__tests__/getInterestRateForAsset.test.ts

@@ -0,0 +1,58 @@
+import { getInterestRateForAsset } from "../getInterestRateForAsset";
+import {
+  mockEthCryptoCurrency,
+  mockScrollCryptoCurrency,
+  usdcToken,
+} from "../../__mocks__/currencies.mock";
+import { ApyType } from "../type";
+
+describe("getInterestRateForAsset", () => {
+  const networks = [mockEthCryptoCurrency, usdcToken];
+  const interestRates: Record<string, { value: number; type: ApyType }> = {
+    [mockEthCryptoCurrency.id]: { value: 0.05, type: "APY" },
+    [usdcToken.id]: { value: 0.042927, type: "NRR" },
+  };
+
+  it("returns correct rate for CryptoCurrency asset", () => {
+    const { interestRate, interestRatePercentageRounded } = getInterestRateForAsset(
+      mockEthCryptoCurrency,
+      interestRates,
+    );
+    expect(interestRate).toEqual({ value: 0.05, type: "APY" });
+    expect(interestRatePercentageRounded).toBe(5);
+  });
+
+  it("returns correct rate for TokenCurrency (parentCurrency) asset", () => {
+    const { interestRate, interestRatePercentageRounded } = getInterestRateForAsset(
+      usdcToken,
+      interestRates,
+      networks,
+    );
+    expect(interestRate).toEqual({ value: 0.042927, type: "NRR" });
+    expect(interestRatePercentageRounded).toBeCloseTo(4.29, 2);
+  });
+
+  it("returns undefined and 0 if no rate found", () => {
+    const { interestRate, interestRatePercentageRounded } = getInterestRateForAsset(
+      mockScrollCryptoCurrency,
+      interestRates,
+      networks,
+    );
+    expect(interestRate).toBeUndefined();
+    expect(interestRatePercentageRounded).toBe(0);
+  });
+
+  it("returns 0 if rate is 0", () => {
+    const zeroNetworks = [mockEthCryptoCurrency];
+    const zeroRates: Record<string, { value: number; type: ApyType }> = {
+      ethereum: { value: 0, type: "APY" },
+    };
+    const { interestRate, interestRatePercentageRounded } = getInterestRateForAsset(
+      mockEthCryptoCurrency,
+      zeroRates,
+      zeroNetworks,
+    );
+    expect(interestRate).toEqual({ value: 0, type: "APY" });
+    expect(interestRatePercentageRounded).toBe(0);
+  });
+});

package/src/modularDrawer/utils/buildProviderCurrenciesMap.tsx

@@ -0,0 +1,25 @@
+import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+
+export const buildProviderCurrenciesMap = (
+  currenciesByProvider?: Array<{
+    providerId: string;
+    currenciesByNetwork?: CryptoOrTokenCurrency[];
+  }>,
+) => {
+  if (!currenciesByProvider?.length) return null;
+
+  const map = new Map<
+    string,
+    { mainCurrency: CryptoOrTokenCurrency; currencies: CryptoOrTokenCurrency[] }
+  >();
+
+  currenciesByProvider.forEach(({ providerId, currenciesByNetwork = [] }) => {
+    if (currenciesByNetwork.length > 0) {
+      const mainCurrency =
+        currenciesByNetwork.find(c => c.id === providerId) ?? currenciesByNetwork[0];
+      map.set(providerId, { mainCurrency, currencies: currenciesByNetwork });
+    }
+  });
+
+  return map;
+};

package/src/modularDrawer/utils/getInterestRateForAsset.ts

@@ -0,0 +1,32 @@
+import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { ApyType } from "./type";
+
+type InterestRate = { value: number; type: ApyType };
+type InterestRateResult = {
+  interestRate: InterestRate | undefined;
+  interestRatePercentageRounded: number;
+};
+
+const roundPercentage = (value: number, decimals = 2): number => {
+  const factor = 10 ** decimals;
+  return Math.round(value * 100 * factor) / factor;
+};
+
+export function getInterestRateForAsset(
+  asset: CryptoOrTokenCurrency,
+  interestRates: Record<string, InterestRate | undefined>,
+  networks: CryptoOrTokenCurrency[] = [],
+): InterestRateResult {
+  const currencyId =
+    asset.type === "TokenCurrency"
+      ? asset.id
+      : networks.find(n => n.type === "TokenCurrency" && n.parentCurrency?.id === asset.id)?.id ??
+        asset.id;
+
+  const interestRate = interestRates[currencyId] ?? undefined;
+
+  return {
+    interestRate,
+    interestRatePercentageRounded: interestRate ? roundPercentage(interestRate.value) : 0,
+  };
+}

package/src/modularDrawer/utils/getLoadingStatus.ts

@@ -0,0 +1,24 @@
+import { LoadingStatus } from "../../deposit/type";
+import { SerializedError } from "@reduxjs/toolkit";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
+
+export const getLoadingStatus = ({
+  isLoading,
+  isSuccess,
+  error,
+}: {
+  isLoading: boolean;
+  isSuccess: boolean;
+  error?: FetchBaseQueryError | SerializedError;
+}): LoadingStatus => {
+  if (isLoading) {
+    return LoadingStatus.Pending;
+  }
+  if (error) {
+    return LoadingStatus.Error;
+  }
+  if (isSuccess) {
+    return LoadingStatus.Success;
+  }
+  return LoadingStatus.Idle;
+};

package/src/modularDrawer/utils/sortByBalance.tsx

@@ -0,0 +1,32 @@
+import { BalanceUI } from "./type";
+
+export const parseFiatValue = (value?: string, discreet?: boolean) => {
+  if (!value || discreet) return -1;
+  return parseFloat(value.replace(/[^0-9.-]+/g, "")) || -1;
+};
+
+export function toFiatString(x?: BalanceUI): string | undefined {
+  return x && "fiatValue" in x ? String(x.fiatValue) : undefined;
+}
+
+export function hasBalance(balanceData?: BalanceUI): boolean {
+  return (
+    !!balanceData &&
+    (("fiatValue" in balanceData && !!balanceData.fiatValue) ||
+      ("balance" in balanceData && !!balanceData.balance))
+  );
+}
+
+export function compareByBalanceThenFiat(
+  a: BalanceUI | undefined,
+  b: BalanceUI | undefined,
+  discreet: boolean,
+): number {
+  const ah = hasBalance(a);
+  const bh = hasBalance(b);
+  if (ah && !bh) return -1;
+  if (!ah && bh) return 1;
+  const af = parseFiatValue(toFiatString(a), discreet);
+  const bf = parseFiatValue(toFiatString(b), discreet);
+  return bf - af;
+}