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

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