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

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

package/src/modularDrawer/hooks/useAssetsData.ts

@@ -24,6 +24,7 @@ export function useAssetsData({
   areCurrenciesFiltered,
   product,
   version,
+  isStaging,
 }: {
   search?: string;
   currencyIds?: string[];
@@ -31,15 +32,26 @@ export function useAssetsData({
   areCurrenciesFiltered?: boolean;
   product: "llm" | "lld";
   version: string;
+  isStaging?: boolean;
 }) {
-  const { data, isLoading, error, fetchNextPage, isSuccess, refetch } =
-    useGetAssetsDataInfiniteQuery({
-      search,
-      useCase,
-      currencyIds: areCurrenciesFiltered ? currencyIds : undefined,
-      product,
-      version,
-    });
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    isSuccess,
+    refetch,
+    isFetching,
+    isError,
+    isFetchingNextPage,
+  } = useGetAssetsDataInfiniteQuery({
+    search,
+    useCase,
+    currencyIds: areCurrenciesFiltered ? currencyIds : undefined,
+    product,
+    version,
+    isStaging,
+  });
 
   const joinedPages = useMemo(() => {
     return data?.pages.reduce<AssetsDataWithPagination>((acc, page) => {
@@ -62,12 +74,15 @@ export function useAssetsData({
 
   const hasMore = Boolean(joinedPages?.pagination.nextCursor);
 
+  const isInitialLoading = isLoading || (isFetching && !isFetchingNextPage);
+
   return {
     data: joinedPages,
-    isLoading,
+    isLoading: isInitialLoading,
     error,
     loadNext: hasMore ? fetchNextPage : undefined,
     isSuccess,
+    isError,
     refetch,
   };
 }

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

@@ -0,0 +1,52 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+export type UseSearchParams = {
+  /** Initial value to display in the search input */
+  initialValue?: string;
+  /** Persist the search value to the host app state (e.g., Redux) */
+  onPersistSearchValue?: (value: string) => void;
+  /** Track analytics when the debounced value changes and should be emitted */
+  onTrackSearch?: (query: string) => void;
+};
+
+export type UseSearchResult = {
+  handleSearch: (queryOrEvent: string | ChangeEvent<HTMLInputElement>) => void;
+  handleDebouncedChange: (current: string, previous: string) => void;
+  displayedValue: string | undefined;
+};
+
+const normalize = (value: string) => value.trim();
+
+export function useSearchCommon({
+  initialValue,
+  onPersistSearchValue,
+  onTrackSearch,
+}: UseSearchParams): UseSearchResult {
+  const [displayedValue, setDisplayedValue] = useState<string | undefined>(initialValue);
+
+  const handleSearch = useCallback((queryOrEvent: string | ChangeEvent<HTMLInputElement>) => {
+    const nextValue = typeof queryOrEvent === "string" ? queryOrEvent : queryOrEvent.target.value;
+    setDisplayedValue(nextValue);
+  }, []);
+
+  const shouldEmitEvent = useCallback(
+    (currentQuery: string, previousQuery: string) =>
+      currentQuery !== "" && currentQuery !== previousQuery,
+    [],
+  );
+  const handleDebouncedChange = useCallback(
+    (current: string, previous: string) => {
+      const currentQuery = normalize(current);
+      const previousQuery = normalize(previous);
+
+      onPersistSearchValue?.(currentQuery);
+
+      if (!shouldEmitEvent(currentQuery, previousQuery)) return;
+
+      onTrackSearch?.(currentQuery);
+    },
+    [onPersistSearchValue, onTrackSearch, shouldEmitEvent],
+  );
+
+  return { handleSearch, handleDebouncedChange, displayedValue };
+}

package/src/notifications/ServiceStatusProvider/index.test.ts

@@ -0,0 +1,102 @@
+import { filterServiceStatusIncidents } from "./index";
+import { LEDGER_COMPONENTS } from "./ledger-components";
+import type { Incident } from "./types";
+
+const makeIncident = (overrides: Partial<Incident> = {}): Incident => ({
+  created_at: "2025-01-01T00:00:00Z",
+  id: Math.random().toString(16).slice(2),
+  impact: "minor",
+  incident_updates: [],
+  monitoring_at: null,
+  name: "Test incident",
+  page_id: null,
+  resolved_at: null,
+  shortlink: null,
+  status: "investigating",
+  updated_at: null,
+  ...overrides,
+});
+
+describe("filterServiceStatusIncidents", () => {
+  it("returns empty when no tickers or no incidents", () => {
+    expect(filterServiceStatusIncidents([], ["BTC"]).length).toBe(0);
+    expect(filterServiceStatusIncidents([makeIncident()], []).length).toBe(0);
+  });
+
+  it("matches incidents with known Ledger components (case-insensitive)", () => {
+    const incidents: Incident[] = [
+      makeIncident({ components: [{ id: "1", name: "Ledger Application Store" }] }),
+      makeIncident({ components: [{ id: "2", name: "ledger appliCAtion store" }] }),
+      makeIncident({ components: [{ id: "3", name: "Unknown Component" }] }),
+    ];
+
+    const result = filterServiceStatusIncidents(incidents, ["BTC"]);
+    expect(result.map(i => i.components?.[0].id)).toEqual(["1", "2"]);
+  });
+
+  it("matches incidents if a component contains a tracked ticker as a whole word (case-insensitive)", () => {
+    const incidents: Incident[] = [
+      makeIncident({ components: [{ id: "1", name: "BTC Node" }] }),
+      makeIncident({ components: [{ id: "2", name: "eth Node" }] }),
+      makeIncident({ components: [{ id: "3", name: "TETHER Service" }] }),
+      makeIncident({ components: [{ id: "4", name: "NOTBTCService" }] }),
+    ];
+
+    const result = filterServiceStatusIncidents(incidents, ["BTC", "ETH"]);
+    expect(result.map(i => i.components?.[0].id)).toEqual(["1", "2"]);
+  });
+
+  it("includes incidents with no components array or empty array", () => {
+    const incidents: Incident[] = [
+      makeIncident({ components: undefined }),
+      makeIncident({ components: [] }),
+    ];
+
+    const result = filterServiceStatusIncidents(incidents, ["BTC"]);
+    expect(result.length).toBe(2);
+  });
+
+  it("escapes tickers so special regex characters do not break matching", () => {
+    const incidents: Incident[] = [
+      makeIncident({ components: [{ id: "1", name: "USDT Node" }] }),
+      makeIncident({ components: [{ id: "2", name: "US.DT Node" }] }),
+      makeIncident({ components: [{ id: "3", name: "(USDT) Node" }] }),
+      makeIncident({ components: [{ id: "4", name: "Ethereum  Node" }] }),
+      makeIncident({ components: [{ id: "5", name: "Ethereum (ETH) swap issue" }] }),
+    ];
+
+    const result = filterServiceStatusIncidents(incidents, ["USDT", "ETH"]);
+    expect(result.map(i => i.components?.[0].id)).toEqual(["1", "3", "5"]);
+    expect(result.length).toBe(3);
+  });
+
+  it("matches incidents for all known Ledger components", () => {
+    const incidents: Incident[] = LEDGER_COMPONENTS.map((name, index) =>
+      makeIncident({ components: [{ id: `${index + 1}`, name }] }),
+    );
+
+    const result = filterServiceStatusIncidents(incidents, ["BTC"]);
+    expect(result.length).toBe(LEDGER_COMPONENTS.length);
+  });
+
+  it("filters correctly with common tickers", () => {
+    const tickers = ["XRP", "SOL", "ETH", "BTC", "ADA", "USDC", "USDT"];
+    const incidents: Incident[] = [
+      makeIncident({ components: [{ id: "1", name: "BTC Node" }] }),
+      makeIncident({ components: [{ id: "2", name: "eth Node" }] }),
+      makeIncident({ components: [{ id: "3", name: "ADA-Service" }] }),
+      makeIncident({ components: [{ id: "4", name: "usdc gateway" }] }),
+      makeIncident({ components: [{ id: "5", name: "NOTUSDTService" }] }),
+      makeIncident({ components: [{ id: "6", name: "USDT" }] }),
+      makeIncident({ components: [{ id: "7", name: "xrp relayer" }] }),
+      makeIncident({ components: [{ id: "8", name: "SOL Node" }] }),
+      makeIncident({ components: [{ id: "9", name: "SOLANA Node" }] }),
+      makeIncident({ components: [{ id: "10", name: "Random Service" }] }),
+      makeIncident({ components: [] }),
+    ];
+
+    const result = filterServiceStatusIncidents(incidents, tickers);
+    expect(result.map(i => i.components?.[0]?.id)).toEqual(["1", "2", "3", "4", "6", "7", "8"]);
+    expect(result.length).toBe(8);
+  });
+});

package/src/notifications/ServiceStatusProvider/index.tsx

@@ -4,6 +4,7 @@ import defaultNetworkApi from "./api";
 import { fromPromise } from "xstate";
 import { useMachine } from "@xstate/react";
 import { serviceStatusMachine } from "./machine";
+import { LEDGER_COMPONENTS } from "./ledger-components";
 type Props = {
   children: React.ReactNode;
   autoUpdateDelay: number;
@@ -33,27 +34,51 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()[\]\\]/g, "\\$&"); // $& means the whole matched string
 }
 
+function sanitizeName(name: string): string {
+  return name.toLowerCase().trim().replace(/\s+/g, " "); // collapse multiple spaces
+}
+
+/**
+ * Filters service status incidents based on related tickers or Ledger components.
+ *
+ * ## Behavior:
+ * - If there are no `tickers` or no `incidents`, returns an empty list.
+ * - For each incident:
+ *   1. ✅ If the incident has no components → keep it (always relevant).
+ *   2. ✅ If at least one component name matches a known **Ledger component** → keep it.
+ *   3. ✅ If at least one component name contains a **currency ticker** → keep it.
+ *   4. ❌ Otherwise, the incident is discarded.
+ *
+ * @param {Incident[]} [incidents=[]] - List of incidents to filter.
+ * @param {string[]} [tickers=[]] - List of currency tickers to match against incident components.
+ * @returns {Incident[]} The list of incidents relevant to the provided tickers or Ledger components.
+ */
+
 export function filterServiceStatusIncidents(
-  incidents: Incident[],
+  incidents: Incident[] = [],
   tickers: string[] = [],
 ): Incident[] {
-  if (!tickers || tickers.length === 0 || !incidents || incidents.length === 0) {
-    return [];
-  }
-
-  const tickersRegex = new RegExp(escapeRegExp(tickers.join("|")), "i");
-  return incidents.filter(
-    ({ components }) =>
-      !components || // dont filter out if no components
-      components.length === 0 ||
-      components.some(({ name }) => tickersRegex.test(name)), // component name should hold currency ticker
-  );
+  if (!tickers.length || !incidents.length) return [];
+
+  const tickerRegex = new RegExp(`\\b(${tickers.map(escapeRegExp).join("|")})\\b`, "i");
+
+  const ledgerComponentsSet = new Set(LEDGER_COMPONENTS.map(component => sanitizeName(component)));
+
+  return incidents.filter(({ components }) => {
+    if (!components?.length) return true;
+
+    return components.some(({ name }) => {
+      const sanitizedName = sanitizeName(name);
+      return ledgerComponentsSet.has(sanitizedName) || tickerRegex.test(sanitizedName);
+    });
+  });
 }
 
 // filter out service status incidents by given currencies or fallback on context currencies
 export function useFilteredServiceStatus(filters?: ServiceStatusUserSettings): StatusContextType {
   const stateData = useContext(ServiceStatusContext);
   const { incidents, context } = stateData;
+
   const filteredIncidents = useMemo(() => {
     return filterServiceStatusIncidents(incidents, filters?.tickers || context?.tickers);
   }, [incidents, context, filters?.tickers]);

package/src/notifications/ServiceStatusProvider/ledger-components.ts

@@ -0,0 +1,12 @@
+export const LEDGER_COMPONENTS = [
+  "Ledger Application Store",
+  "Ledger Live Security Services",
+  "Swap API",
+  "Buy",
+  "Earn Dashboard",
+  "Crypto Assets Service",
+  "Cloud Sync",
+  "Trustchain",
+  "Loyalty Program",
+  "Card Program",
+] as const;