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

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

@@ -8,11 +8,14 @@ export enum AssetsDataTags {
 }
 
 export interface GetAssetsDataParams {
-  cursor?: string;
   search?: string;
   currencyIds?: string[];
 }
 
+export interface PageParam {
+  cursor?: string;
+}
+
 export interface AssetsDataWithPagination extends AssetsData {
   pagination: {
     nextCursor?: string;
@@ -43,20 +46,38 @@ 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?.currencyIds && queryArg?.currencyIds.length > 0 && { currencyIds: queryArg.currencyIds }),
+          ...(queryArg?.search && { search: queryArg.search }),
+        };
+
+        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/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,58 +32,92 @@ 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({}));
 
     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({}));
 
-    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({}));
@@ -86,54 +126,75 @@ describe("useAssetsData", () => {
     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({}));
 
-    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({}));
 
-    result.current.loadNext();
+    expect(result.current.loadNext).toBeUndefined();
+  });
+
+  it("should return undefined data when no pages exist", () => {
+    mockuseGetAssetsDataInfiniteQuery.mockReturnValue({
+      ...defaultMockValues,
+    });
+
+    const { result } = renderHook(() => useAssetsData({}));
 
-    expect(mockSetCursor).not.toHaveBeenCalled();
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.loadNext).toBeUndefined();
   });
 });

package/src/modularDrawer/hooks/useAssetsData.ts

@@ -1,5 +1,20 @@
-import { useState, useCallback } from "react";
-import { useGetAssetsDataQuery } from "../data/state-manager/api";
+import { useMemo } from "react";
+import { AssetsDataWithPagination, useGetAssetsDataInfiniteQuery } from "../data/state-manager/api";
+
+const emptyData = () => ({
+  cryptoAssets: {},
+  networks: {},
+  cryptoOrTokenCurrencies: {},
+  interestRates: {},
+  markets: {},
+  currenciesOrder: {
+    currenciesIds: [],
+    metaCurrencyIds: [],
+    key: "",
+    order: "",
+  },
+  pagination: { nextCursor: "" },
+});
 
 export function useAssetsData({
   search,
@@ -8,29 +23,37 @@ export function useAssetsData({
   search?: string;
   currencyIds?: string[];
 }) {
-  const [cursor, setCursor] = useState<string | undefined>(undefined);
-  const { data, error, isLoading, isSuccess } = useGetAssetsDataQuery({
-    cursor,
+  const { data, isLoading, error, fetchNextPage, isSuccess } = useGetAssetsDataInfiniteQuery({
     search,
     currencyIds,
   });
 
-  const loadNext = useCallback(() => {
-    const nextCursor = data?.pagination?.nextCursor;
-    if (nextCursor) {
-      setCursor(nextCursor);
-    }
-  }, [data?.pagination?.nextCursor]);
+  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;
 
-  const hasMore = Boolean(data?.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,
   };
 }

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