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

package/src/modularDrawer/data/entities/interestRateSelectors.ts

@@ -0,0 +1,39 @@
+import { createSelector } from "@reduxjs/toolkit";
+import { InterestRate } from "../entities";
+
+interface ApiState {
+  assetsDataApi?: {
+    queries?: Record<string, QueryCacheEntry>;
+  };
+}
+
+interface QueryCacheEntry {
+  data?: {
+    pages?: Array<{
+      interestRates?: Record<string, InterestRate>;
+    }>;
+  };
+}
+
+export const selectInterestRateByCurrency: (
+  state: ApiState,
+  currencyId: string,
+) => InterestRate | undefined = createSelector(
+  [
+    (state: ApiState) => state.assetsDataApi?.queries ?? {},
+    (_state: ApiState, currencyId: string) => currencyId,
+  ],
+  (queries, currencyId): InterestRate | undefined => {
+    for (const query of Object.values(queries)) {
+      const pages = query.data?.pages;
+      if (!pages) continue;
+
+      for (const page of pages) {
+        const rate = page.interestRates?.[currencyId];
+        if (rate) return rate;
+      }
+    }
+
+    return undefined;
+  },
+);

package/src/modularDrawer/data/state-manager/api.ts

@@ -1,23 +1,14 @@
 import { createApi, fetchBaseQuery, FetchBaseQueryMeta } from "@reduxjs/toolkit/query/react";
 import { convertApiAssets } from "@ledgerhq/cryptoassets";
-import { AssetsData, RawApiResponse } from "../entities";
+import { RawApiResponse } from "../entities";
 import { getEnv } from "@ledgerhq/live-env";
-
-export enum AssetsDataTags {
-  Assets = "Assets",
-}
-
-export interface GetAssetsDataParams {
-  cursor?: string;
-  search?: string;
-  currencyIds?: string[];
-}
-
-export interface AssetsDataWithPagination extends AssetsData {
-  pagination: {
-    nextCursor?: string;
-  };
-}
+import {
+  AssetsAdditionalData,
+  AssetsDataTags,
+  AssetsDataWithPagination,
+  GetAssetsDataParams,
+  PageParam,
+} from "./types";
 
 function transformAssetsResponse(
   response: RawApiResponse,
@@ -43,20 +34,44 @@ export const assetsDataApi = createApi({
   }),
   tagTypes: [AssetsDataTags.Assets],
   endpoints: build => ({
-    getAssetsData: build.query<AssetsDataWithPagination, GetAssetsDataParams>({
-      query: ({ cursor, search, currencyIds: _currencyIds }) => ({
-        url: "assets",
-        params: {
-          ...(cursor && { cursor }),
-          ...(search && { search }),
-          // ...(currencyIds && currencyIds.length > 0 && { currencyIds }),
+    getAssetsData: build.infiniteQuery<AssetsDataWithPagination, GetAssetsDataParams, PageParam>({
+      query: ({ pageParam, queryArg }) => {
+        const params = {
           pageSize: 100,
-        },
-      }),
+          ...(pageParam?.cursor && { cursor: pageParam.cursor }),
+          ...(queryArg?.useCase && { transaction: queryArg.useCase }),
+          ...(queryArg?.currencyIds &&
+            queryArg?.currencyIds.length > 0 &&
+            !queryArg?.useCase && { currencyIds: queryArg.currencyIds }),
+          ...(queryArg?.search && { search: queryArg.search }),
+          product: queryArg.product,
+          minVersion: queryArg.version,
+          additionalData: [AssetsAdditionalData.Apy, AssetsAdditionalData.MarketTrend],
+        };
+
+        return {
+          url: "assets",
+          params,
+        };
+      },
       providesTags: [AssetsDataTags.Assets],
       transformResponse: transformAssetsResponse,
+      infiniteQueryOptions: {
+        initialPageParam: {
+          cursor: "",
+        },
+        getNextPageParam: lastPage => {
+          if (lastPage.pagination.nextCursor) {
+            return {
+              cursor: lastPage.pagination.nextCursor,
+            };
+          } else {
+            return undefined;
+          }
+        },
+      },
     }),
   }),
 });
 
-export const { useGetAssetsDataQuery } = assetsDataApi;
+export const { useGetAssetsDataInfiniteQuery } = assetsDataApi;

package/src/modularDrawer/data/state-manager/types.ts

@@ -0,0 +1,28 @@
+import { AssetsData } from "../entities";
+
+export enum AssetsDataTags {
+  Assets = "Assets",
+}
+
+export enum AssetsAdditionalData {
+  Apy = "apy",
+  MarketTrend = "marketTrend",
+}
+
+export interface GetAssetsDataParams {
+  search?: string;
+  currencyIds?: string[];
+  useCase?: string;
+  product: "llm" | "lld";
+  version: string;
+}
+
+export interface PageParam {
+  cursor?: string;
+}
+
+export interface AssetsDataWithPagination extends AssetsData {
+  pagination: {
+    nextCursor?: string;
+  };
+}

package/src/modularDrawer/hooks/__test__/useAssetsData.test.ts

@@ -4,21 +4,27 @@
 
 import { renderHook } from "@testing-library/react";
 import { useAssetsData } from "../useAssetsData";
-import { useGetAssetsDataQuery } from "../../data/state-manager/api";
+import { useGetAssetsDataInfiniteQuery } from "../../data/state-manager/api";
 
 jest.mock("../../data/state-manager/api", () => ({
-  useGetAssetsDataQuery: jest.fn(),
+  useGetAssetsDataInfiniteQuery: jest.fn(),
 }));
 
-const mockSetCursor = jest.fn();
-jest.mock("react", () => ({
-  ...jest.requireActual("react"),
-  useState: jest.fn(() => [undefined, mockSetCursor]),
-  useCallback: jest.fn(fn => fn),
-  useMemo: jest.fn(fn => fn()),
-}));
-
-const mockUseGetAssetsDataQuery = jest.mocked(useGetAssetsDataQuery);
+const mockuseGetAssetsDataInfiniteQuery = jest.mocked(useGetAssetsDataInfiniteQuery);
+
+const defaultMockValues = {
+  data: undefined,
+  isLoading: false,
+  error: undefined,
+  fetchNextPage: jest.fn(),
+  isSuccess: true,
+  isFetching: false,
+  isError: false,
+  fetchPreviousPage: jest.fn(),
+  isFetchingPreviousPage: false,
+  refetch: jest.fn(),
+  status: "success",
+};
 
 describe("useAssetsData", () => {
   beforeEach(() => {
@@ -26,114 +32,169 @@ describe("useAssetsData", () => {
   });
 
   it("should return loading state when API is loading", () => {
-    mockUseGetAssetsDataQuery.mockReturnValue({
-      data: undefined,
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
       isLoading: true,
-      error: undefined,
-      refetch: jest.fn(),
-      isFetching: false,
-      isSuccess: false,
-      isError: false,
-      currentData: undefined,
+      status: "pending",
     });
 
-    const { result } = renderHook(() => useAssetsData({}));
+    const { result } = renderHook(() => useAssetsData({ product: "lld", version: "1.0.0" }));
 
     expect(result.current.isLoading).toBe(true);
     expect(result.current.data).toBe(undefined);
-    expect(result.current.hasMore).toBe(false);
   });
 
-  it("should return data and hasMore when API returns data", () => {
-    const mockData = {
-      assetsData: [],
-      pagination: { nextCursor: "test-cursor" },
-    };
-    mockUseGetAssetsDataQuery.mockReturnValue({
-      data: mockData,
-      isLoading: false,
-      error: undefined,
-      refetch: jest.fn(),
-      isFetching: false,
-      isSuccess: true,
-      isError: false,
-      currentData: mockData,
+  it("should return combined data from multiple pages", () => {
+    const mockPages = [
+      {
+        cryptoAssets: { bitcoin: { id: "bitcoin", name: "Bitcoin" } },
+        networks: { bitcoin: { id: "bitcoin", name: "Bitcoin" } },
+        cryptoOrTokenCurrencies: { bitcoin: { id: "bitcoin" } },
+        interestRates: {},
+        markets: {},
+        currenciesOrder: {
+          currenciesIds: ["bitcoin"],
+          metaCurrencyIds: ["bitcoin"],
+          key: "marketCap",
+          order: "desc",
+        },
+        pagination: { nextCursor: "cursor-2" },
+      },
+      {
+        cryptoAssets: { ethereum: { id: "ethereum", name: "Ethereum" } },
+        networks: { ethereum: { id: "ethereum", name: "Ethereum" } },
+        cryptoOrTokenCurrencies: { ethereum: { id: "ethereum" } },
+        interestRates: {},
+        markets: {},
+        currenciesOrder: {
+          currenciesIds: ["ethereum"],
+          metaCurrencyIds: ["ethereum"],
+          key: "marketCap",
+          order: "desc",
+        },
+        pagination: { nextCursor: undefined },
+      },
+    ];
+
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
+      data: { pages: mockPages, pageParams: [{ cursor: "" }, { cursor: "cursor-2" }] },
     });
 
-    const { result } = renderHook(() => useAssetsData({}));
+    const { result } = renderHook(() => useAssetsData({ product: "lld", version: "1.0.0" }));
 
-    expect(result.current.data).toBe(mockData);
+    expect(result.current.data).toEqual({
+      cryptoAssets: {
+        bitcoin: { id: "bitcoin", name: "Bitcoin" },
+        ethereum: { id: "ethereum", name: "Ethereum" },
+      },
+      networks: {
+        bitcoin: { id: "bitcoin", name: "Bitcoin" },
+        ethereum: { id: "ethereum", name: "Ethereum" },
+      },
+      cryptoOrTokenCurrencies: {
+        bitcoin: { id: "bitcoin" },
+        ethereum: { id: "ethereum" },
+      },
+      interestRates: {},
+      markets: {},
+      currenciesOrder: {
+        currenciesIds: ["bitcoin", "ethereum"],
+        metaCurrencyIds: ["bitcoin", "ethereum"],
+        key: "marketCap",
+        order: "desc",
+      },
+      pagination: { nextCursor: undefined },
+    });
     expect(result.current.isLoading).toBe(false);
-    expect(result.current.hasMore).toBe(true);
   });
 
   it("should return error when API has error", () => {
     const mockError = new Error("API Error");
-    mockUseGetAssetsDataQuery.mockReturnValue({
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
       data: undefined,
-      isLoading: false,
       error: mockError,
-      refetch: jest.fn(),
-      isFetching: false,
       isSuccess: false,
       isError: true,
-      currentData: undefined,
+      status: "error",
     });
 
-    const { result } = renderHook(() => useAssetsData({}));
+    const { result } = renderHook(() => useAssetsData({ product: "lld", version: "1.0.0" }));
 
     expect(result.current.error).toBe(mockError);
     expect(result.current.isLoading).toBe(false);
   });
 
-  it("should call setCursor when loadNext is called and there's a nextCursor", () => {
-    const nextCursor = "next-cursor-456";
-    mockUseGetAssetsDataQuery.mockReturnValue({
-      data: {
-        assetsData: [],
-        pagination: { nextCursor },
-      },
-      isLoading: false,
-      error: undefined,
-      refetch: jest.fn(),
-      isFetching: false,
-      isSuccess: true,
-      isError: false,
-      currentData: {
-        assetsData: [],
-        pagination: { nextCursor },
+  it("should provide loadNext function when there's a nextCursor", () => {
+    const mockFetchNextPage = jest.fn();
+    const mockPages = [
+      {
+        cryptoAssets: {},
+        networks: {},
+        cryptoOrTokenCurrencies: {},
+        interestRates: {},
+        markets: {},
+        currenciesOrder: {
+          currenciesIds: [],
+          metaCurrencyIds: [],
+          key: "marketCap",
+          order: "desc",
+        },
+        pagination: { nextCursor: "next-cursor-456" },
       },
+    ];
+
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
+      data: { pages: mockPages, pageParams: [{ cursor: "" }] },
+      fetchNextPage: mockFetchNextPage,
     });
 
-    const { result } = renderHook(() => useAssetsData({}));
+    const { result } = renderHook(() => useAssetsData({ product: "lld", version: "1.0.0" }));
 
-    result.current.loadNext();
+    expect(result.current.loadNext).toBeDefined();
+    result.current.loadNext?.();
 
-    expect(mockSetCursor).toHaveBeenCalledWith(nextCursor);
+    expect(mockFetchNextPage).toHaveBeenCalled();
   });
 
-  it("should not call setCursor when there's no nextCursor", () => {
-    mockUseGetAssetsDataQuery.mockReturnValue({
-      data: {
-        assetsData: [],
-        pagination: { nextCursor: undefined },
-      },
-      isLoading: false,
-      error: undefined,
-      refetch: jest.fn(),
-      isFetching: false,
-      isSuccess: true,
-      isError: false,
-      currentData: {
-        assetsData: [],
+  it("should not provide loadNext function when there's no nextCursor", () => {
+    const mockPages = [
+      {
+        cryptoAssets: {},
+        networks: {},
+        cryptoOrTokenCurrencies: {},
+        interestRates: {},
+        markets: {},
+        currenciesOrder: {
+          currenciesIds: [],
+          metaCurrencyIds: [],
+          key: "marketCap",
+          order: "desc",
+        },
         pagination: { nextCursor: undefined },
       },
+    ];
+
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
+      data: { pages: mockPages, pageParams: [{ cursor: "" }] },
     });
 
-    const { result } = renderHook(() => useAssetsData({}));
+    const { result } = renderHook(() => useAssetsData({ product: "lld", version: "1.0.0" }));
+
+    expect(result.current.loadNext).toBeUndefined();
+  });
+
+  it("should return undefined data when no pages exist", () => {
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
+    });
 
-    result.current.loadNext();
+    const { result } = renderHook(() => useAssetsData({ product: "lld", version: "1.0.0" }));
 
-    expect(mockSetCursor).not.toHaveBeenCalled();
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.loadNext).toBeUndefined();
   });
 });

package/src/modularDrawer/hooks/__test__/useModularDrawerConfiguration.test.ts

@@ -0,0 +1,251 @@
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
+import { useFeature } from "../../../featureFlags";
+import { EnhancedModularDrawerConfiguration } from "../../../wallet-api/ModularDrawer/types";
+import { useModularDrawerConfiguration } from "../useModularDrawerConfiguration";
+
+jest.mock("../../../featureFlags", () => ({ useFeature: jest.fn() }));
+
+const mockUseFeature = jest.mocked(useFeature);
+
+describe("useModularDrawerConfiguration", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("when modularization is disabled", () => {
+    beforeEach(() => {
+      mockUseFeature.mockReturnValue({
+        enabled: true,
+        params: {
+          enableModularization: false,
+        },
+      });
+    });
+
+    it("should return disabled configurations when no drawer configuration is provided", () => {
+      const { result } = renderHook(() => useModularDrawerConfiguration("lldModularDrawer"));
+
+      expect(result.current.assetsConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+        filter: "undefined",
+      });
+      expect(result.current.networkConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+      });
+    });
+
+    it("should return disabled configurations even when drawer configuration is provided", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: {
+          rightElement: "balance",
+          leftElement: "apy",
+          filter: "topNetworks",
+        },
+        networks: {
+          rightElement: "balance",
+          leftElement: "numberOfAccounts",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+        filter: "undefined",
+      });
+      expect(result.current.networkConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+      });
+    });
+  });
+
+  describe("when modularization is enabled", () => {
+    beforeEach(() => {
+      mockUseFeature.mockReturnValue({
+        enabled: true,
+        params: {
+          enableModularization: true,
+        },
+      });
+    });
+
+    it("should return undefined configurations when no drawer configuration is provided", () => {
+      const { result } = renderHook(() => useModularDrawerConfiguration("lldModularDrawer"));
+
+      expect(result.current.assetsConfiguration).toBeUndefined();
+      expect(result.current.networkConfiguration).toBeUndefined();
+    });
+
+    it("should return the provided drawer configuration when modularization is enabled", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: {
+          rightElement: "balance",
+          leftElement: "apy",
+          filter: "topNetworks",
+        },
+        networks: {
+          rightElement: "balance",
+          leftElement: "numberOfAccounts",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toEqual(drawerConfiguration.assets);
+      expect(result.current.networkConfiguration).toEqual(drawerConfiguration.networks);
+    });
+
+    it("should handle partial drawer configuration", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: {
+          rightElement: "balance",
+          leftElement: "marketTrend",
+          filter: "topNetworks",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toEqual(drawerConfiguration.assets);
+      expect(result.current.networkConfiguration).toBeUndefined();
+    });
+
+    it("should handle configuration with undefined values", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: undefined,
+        networks: {
+          rightElement: "balance",
+          leftElement: "numberOfAccountsAndApy",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toBeUndefined();
+      expect(result.current.networkConfiguration).toEqual(drawerConfiguration.networks);
+    });
+  });
+
+  describe("when feature flag is not available", () => {
+    beforeEach(() => {
+      mockUseFeature.mockReturnValue(null);
+    });
+
+    it("should default to disabled configuration when feature flag returns null", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: {
+          rightElement: "balance",
+          leftElement: "apy",
+          filter: "topNetworks",
+        },
+        networks: {
+          rightElement: "balance",
+          leftElement: "numberOfAccounts",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+        filter: "undefined",
+      });
+      expect(result.current.networkConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+      });
+    });
+  });
+
+  describe("when feature flag params are not available", () => {
+    beforeEach(() => {
+      mockUseFeature.mockReturnValue({
+        enabled: true,
+        params: undefined,
+      });
+    });
+
+    it("should default to disabled configuration when params are undefined", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: {
+          rightElement: "balance",
+          leftElement: "apy",
+          filter: "topNetworks",
+        },
+        networks: {
+          rightElement: "balance",
+          leftElement: "numberOfAccounts",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+        filter: "undefined",
+      });
+      expect(result.current.networkConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+      });
+    });
+  });
+
+  describe("when enableModularization param is not available", () => {
+    beforeEach(() => {
+      mockUseFeature.mockReturnValue({
+        enabled: true,
+        params: {},
+      });
+    });
+
+    it("should default to disabled configuration when enableModularization is not in params", () => {
+      const drawerConfiguration: EnhancedModularDrawerConfiguration = {
+        assets: {
+          rightElement: "balance",
+          leftElement: "apy",
+          filter: "topNetworks",
+        },
+        networks: {
+          rightElement: "balance",
+          leftElement: "numberOfAccounts",
+        },
+      };
+
+      const { result } = renderHook(() =>
+        useModularDrawerConfiguration("lldModularDrawer", drawerConfiguration),
+      );
+
+      expect(result.current.assetsConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+        filter: "undefined",
+      });
+      expect(result.current.networkConfiguration).toEqual({
+        rightElement: "undefined",
+        leftElement: "undefined",
+      });
+    });
+  });
+});