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

package/src/modularDrawer/hooks/modules/useLeftApyModule.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
-import { ApyType } from "../../types";
+import { ApyType } from "../../utils/type";
+import { useInterestRatesByCurrencies } from "../useInterestRatesByCurrencies";
+import { getInterestRateForAsset } from "../../utils/getInterestRateForAsset";
 
 const createApyItem = ({
   value,
@@ -13,14 +15,30 @@ const createApyItem = ({
 }) => <ApyIndicator value={value} type={type} />;
 
 export const useLeftApyModule = (
-  assets: CryptoOrTokenCurrency[],
+  currencies: CryptoOrTokenCurrency[],
   ApyIndicator: React.ComponentType<{ value: number; type: ApyType }>,
 ) => {
-  const value = 5.11; // TODO to be retrieved from DADA
-  const type = "APY"; // TODO to be retrieved from DADA
+  const interestRates = useInterestRatesByCurrencies(currencies);
 
-  return assets.map(asset => ({
-    ...asset,
-    leftElement: createApyItem({ value, type, ApyIndicator }),
-  }));
+  return useMemo(() => {
+    return currencies.map(currency => {
+      const { interestRate, interestRatePercentageRounded } = getInterestRateForAsset(
+        currency,
+        interestRates,
+      );
+
+      if (!interestRate || interestRatePercentageRounded <= 0) {
+        return currency;
+      }
+
+      return {
+        ...currency,
+        leftElement: createApyItem({
+          value: interestRatePercentageRounded,
+          type: interestRate.type,
+          ApyIndicator,
+        }),
+      };
+    });
+  }, [currencies, interestRates, ApyIndicator]);
 };

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

@@ -1,8 +1,8 @@
 import { Observable } from "rxjs";
 import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
-import { getAccountTuplesForCurrency } from "../../../utils/getAccountTuplesForCurrency";
+import { getAccountTuplesForCurrency } from "../../utils/getAccountTuplesForCurrency";
 import type { Account } from "@ledgerhq/types-live";
-import { WalletAPIAccount } from "../../../wallet-api/types";
+import { WalletAPIAccount } from "../../wallet-api/types";
 
 type AccountModuleParams = {
   assets: CryptoOrTokenCurrency[];

package/src/modularDrawer/hooks/useAssetsData.ts

@@ -1,36 +1,73 @@
-import { useState, useCallback } from "react";
-import { useGetAssetsDataQuery } from "../data/state-manager/api";
+import { useMemo } from "react";
+import { useGetAssetsDataInfiniteQuery } from "../data/state-manager/api";
+import { AssetsDataWithPagination } from "../data/state-manager/types";
+
+const emptyData = () => ({
+  cryptoAssets: {},
+  networks: {},
+  cryptoOrTokenCurrencies: {},
+  interestRates: {},
+  markets: {},
+  currenciesOrder: {
+    currenciesIds: [],
+    metaCurrencyIds: [],
+    key: "",
+    order: "",
+  },
+  pagination: { nextCursor: "" },
+});
 
 export function useAssetsData({
   search,
   currencyIds,
+  useCase,
+  areCurrenciesFiltered,
+  product,
+  version,
 }: {
   search?: string;
   currencyIds?: string[];
+  useCase?: string;
+  areCurrenciesFiltered?: boolean;
+  product: "llm" | "lld";
+  version: string;
 }) {
-  const [cursor, setCursor] = useState<string | undefined>(undefined);
-  const { data, error, isLoading, isSuccess } = useGetAssetsDataQuery({
-    cursor,
-    search,
-    currencyIds,
-  });
-
-  const loadNext = useCallback(() => {
-    const nextCursor = data?.pagination?.nextCursor;
-    if (nextCursor) {
-      setCursor(nextCursor);
-    }
-  }, [data?.pagination?.nextCursor]);
-
-  const hasMore = Boolean(data?.pagination?.nextCursor);
+  const { data, isLoading, error, fetchNextPage, isSuccess, refetch } =
+    useGetAssetsDataInfiniteQuery({
+      search,
+      useCase,
+      currencyIds: areCurrenciesFiltered ? currencyIds : undefined,
+      product,
+      version,
+    });
+
+  const joinedPages = useMemo(() => {
+    return data?.pages.reduce<AssetsDataWithPagination>((acc, page) => {
+      Object.assign(acc.cryptoAssets, page.cryptoAssets);
+      Object.assign(acc.networks, page.networks);
+      Object.assign(acc.cryptoOrTokenCurrencies, page.cryptoOrTokenCurrencies);
+      Object.assign(acc.interestRates, page.interestRates);
+      Object.assign(acc.markets, page.markets);
+
+      acc.currenciesOrder.currenciesIds.push(...page.currenciesOrder.currenciesIds);
+      acc.currenciesOrder.metaCurrencyIds.push(...page.currenciesOrder.metaCurrencyIds);
+
+      acc.currenciesOrder.key = page.currenciesOrder.key;
+      acc.currenciesOrder.order = page.currenciesOrder.order;
+      acc.pagination.nextCursor = page.pagination.nextCursor;
+
+      return acc;
+    }, emptyData());
+  }, [data]);
+
+  const hasMore = Boolean(joinedPages?.pagination.nextCursor);
 
   return {
-    data,
-    error,
+    data: joinedPages,
     isLoading,
+    error,
+    loadNext: hasMore ? fetchNextPage : undefined,
     isSuccess,
-    hasMore,
-    cursor,
-    loadNext,
+    refetch,
   };
 }

package/src/modularDrawer/hooks/useInterestRatesByCurrencies.ts

@@ -0,0 +1,23 @@
+import { useSelector } from "react-redux";
+import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { selectInterestRateByCurrency } from "../data/entities/interestRateSelectors";
+import { ApyType } from "../utils/type";
+
+const isValidApyType = (type: string): type is ApyType =>
+  type === "NRR" || type === "APY" || type === "APR";
+
+export const useInterestRatesByCurrencies = (currencies: CryptoOrTokenCurrency[]) => {
+  return useSelector(state => {
+    const rates: Record<string, { value: number; type: ApyType } | undefined> = {};
+    currencies.forEach(currency => {
+      const apiRate = selectInterestRateByCurrency(state, currency.id);
+      if (apiRate && isValidApyType(apiRate.type)) {
+        rates[currency.id] = {
+          value: apiRate.rate,
+          type: apiRate.type,
+        };
+      }
+    });
+    return rates;
+  });
+};

package/src/modularDrawer/hooks/useLeftAccounts.tsx

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

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/useModularDrawerConfiguration.ts

@@ -0,0 +1,33 @@
+import { useFeature } from "../../featureFlags";
+import { EnhancedModularDrawerConfiguration } from "../../wallet-api/ModularDrawer/types";
+
+const assetConfigurationDisabled: EnhancedModularDrawerConfiguration["assets"] = {
+  rightElement: "undefined",
+  leftElement: "undefined",
+  filter: "undefined",
+};
+
+const networkConfigurationDisabled: EnhancedModularDrawerConfiguration["networks"] = {
+  rightElement: "undefined",
+  leftElement: "undefined",
+};
+
+export const useModularDrawerConfiguration = (
+  featureFlagKey: "lldModularDrawer" | "llmModularDrawer",
+  drawerConfiguration?: EnhancedModularDrawerConfiguration,
+) => {
+  const featureModularDrawer = useFeature(featureFlagKey);
+
+  const modularizationEnabled = featureModularDrawer?.params?.enableModularization ?? false;
+  const assetsConfiguration = modularizationEnabled
+    ? drawerConfiguration?.assets
+    : assetConfigurationDisabled;
+  const networkConfiguration = modularizationEnabled
+    ? drawerConfiguration?.networks
+    : networkConfigurationDisabled;
+
+  return {
+    assetsConfiguration,
+    networkConfiguration,
+  };
+};

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