Merge pull request #11310 from LedgerHQ/feat/LIVE-20619

♻️ (llm) refactor useModularDrawerState

Author: LucasWerey

.changeset/rude-years-repeat.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+LLM - MAD - rework useModularDrawerState

apps/ledger-live-mobile/__tests__/handlers/index.ts

@@ -1,6 +1,7 @@
 import marketHandlers from "./market";
 import ledgerSyncHandlers from "./ledgerSync";
 import cryptoIconsHandlers from "./crypto-icons";
+import supportedCvsHandlers from "./supportedCvs";
 
 export const ALLOWED_UNHANDLED_REQUESTS = [
   "ledger.statuspage.io",
@@ -10,4 +11,9 @@ export const ALLOWED_UNHANDLED_REQUESTS = [
   "https://crypto-assets-service.api.ledger.com/v1/partners?output=name,signature,public_key,public_key_curve&service_name=swap",
 ];
 
-export default [...marketHandlers, ...ledgerSyncHandlers, ...cryptoIconsHandlers];
+export default [
+  ...marketHandlers,
+  ...ledgerSyncHandlers,
+  ...cryptoIconsHandlers,
+  ...supportedCvsHandlers,
+];

apps/ledger-live-mobile/__tests__/handlers/supportedCvs.ts

@@ -0,0 +1,9 @@
+import { http, HttpResponse } from "msw";
+
+const supportedCvsHandlers = [
+  http.get("https://countervalues.live.ledger.com/v3/supported/crypto", () =>
+    HttpResponse.json([]),
+  ),
+];
+
+export default supportedCvsHandlers;

apps/ledger-live-mobile/src/newArch/features/ModularDrawer/hooks/__tests__/useDeviceNavigation.test.ts

@@ -0,0 +1,61 @@
+import { renderHook, act } from "@tests/test-renderer";
+import { useDeviceNavigation } from "../useDeviceNavigation";
+import {
+  arbitrumToken,
+  mockBtcCryptoCurrency,
+} from "@ledgerhq/live-common/modularDrawer/__mocks__/currencies.mock";
+import { StepFlowManagerReturnType } from "../useModularDrawerFlowStepManager";
+import { NavigationProp } from "@react-navigation/native";
+import { ModularDrawerStep } from "../../types";
+
+const mockNavigate = jest.fn();
+const mockNavigation: Partial<NavigationProp<Record<string, never>>> = {
+  navigate: mockNavigate,
+};
+
+jest.mock("@react-navigation/native", () => ({
+  useNavigation: () => mockNavigation,
+  NavigationContainer: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe("useDeviceNavigation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const navigationStepManager: StepFlowManagerReturnType = {
+    reset: jest.fn(),
+    goToStep: jest.fn(),
+    currentStep: ModularDrawerStep.Asset,
+    currentStepIndex: 0,
+  };
+
+  it("navigates to device with a crypto currency", () => {
+    const onClose = jest.fn();
+    const resetSelection = jest.fn();
+    const { result } = renderHook(() =>
+      useDeviceNavigation({ navigationStepManager, onClose, resetSelection }),
+    );
+
+    const crypto = mockBtcCryptoCurrency;
+    act(() => result.current.navigateToDeviceWithCurrency(crypto));
+
+    expect(onClose).toHaveBeenCalled();
+    expect(resetSelection).toHaveBeenCalled();
+    expect(navigationStepManager.reset).toHaveBeenCalled();
+    expect(mockNavigate).toHaveBeenCalled();
+  });
+
+  it("navigates to device with a token currency (uses parent)", () => {
+    const onClose = jest.fn();
+    const resetSelection = jest.fn();
+    const { result } = renderHook(() =>
+      useDeviceNavigation({ navigationStepManager, onClose, resetSelection }),
+    );
+
+    const token = arbitrumToken;
+    act(() => result.current.navigateToDeviceWithCurrency(token));
+
+    expect(mockNavigate).toHaveBeenCalled();
+  });
+});

apps/ledger-live-mobile/src/newArch/features/ModularDrawer/hooks/__tests__/useDrawerLifecycle.test.ts

@@ -0,0 +1,79 @@
+import { renderHook, act } from "@tests/test-renderer";
+import { useDrawerLifecycle } from "../useDrawerLifecycle";
+import { ModularDrawerStep } from "../../types";
+import type { StepFlowManagerReturnType } from "../useModularDrawerFlowStepManager";
+
+jest.mock("../../analytics/useModularDrawerAnalytics", () => ({
+  useModularDrawerAnalytics: () => ({
+    trackModularDrawerEvent: jest.fn(),
+  }),
+  getCurrentPageName: () => "page",
+}));
+
+describe("useDrawerLifecycle", () => {
+  const navigationStepManager: StepFlowManagerReturnType = {
+    currentStep: ModularDrawerStep.Account,
+    currentStepIndex: 2,
+    reset: jest.fn(),
+    goToStep: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("back button prefers network when available, else asset", () => {
+    const backToAsset = jest.fn();
+    const backToNetwork = jest.fn();
+    const { result } = renderHook(() =>
+      useDrawerLifecycle({
+        flow: "test",
+        navigationStepManager,
+        canGoBackToAsset: true,
+        canGoBackToNetwork: true,
+        backToAsset,
+        backToNetwork,
+        resetSelection: jest.fn(),
+      }),
+    );
+
+    act(() => result.current.handleBackButton());
+    expect(backToNetwork).toHaveBeenCalled();
+
+    const result2 = renderHook(() =>
+      useDrawerLifecycle({
+        flow: "test",
+        navigationStepManager,
+        canGoBackToAsset: true,
+        canGoBackToNetwork: false,
+        backToAsset,
+        backToNetwork,
+        resetSelection: jest.fn(),
+      }),
+    );
+    act(() => result2.result.current.handleBackButton());
+    expect(backToAsset).toHaveBeenCalled();
+  });
+
+  it("close button resets and calls onClose", () => {
+    const onClose = jest.fn();
+    const resetSelection = jest.fn();
+    const { result } = renderHook(() =>
+      useDrawerLifecycle({
+        flow: "test",
+        navigationStepManager,
+        canGoBackToAsset: false,
+        canGoBackToNetwork: false,
+        backToAsset: jest.fn(),
+        backToNetwork: jest.fn(),
+        onClose,
+        resetSelection,
+      }),
+    );
+
+    act(() => result.current.handleCloseButton());
+    expect(resetSelection).toHaveBeenCalled();
+    expect(navigationStepManager.reset).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+});

apps/ledger-live-mobile/src/newArch/features/ModularDrawer/hooks/__tests__/useModularDrawerState.test.ts

@@ -1,32 +1,15 @@
 import { renderHook, act } from "@tests/test-renderer";
 import { useModularDrawerState } from "../useModularDrawerState";
-import { ModularDrawerStep } from "../../types";
 import {
   mockBtcCryptoCurrency,
   mockCurrenciesByProvider,
   mockCurrencyIds,
-  mockEthCryptoCurrency,
 } from "@ledgerhq/live-common/modularDrawer/__mocks__/currencies.mock";
+import { NavigationProp } from "@react-navigation/native";
 
 const mockNavigate = jest.fn();
-const mockNavigation = {
+const mockNavigation: Partial<NavigationProp<Record<string, never>>> = {
   navigate: mockNavigate,
-  goBack: jest.fn(),
-  addListener: jest.fn(),
-  removeListener: jest.fn(),
-  setParams: jest.fn(),
-  dispatch: jest.fn(),
-  canGoBack: jest.fn(),
-  isFocused: jest.fn(),
-  getParent: jest.fn(),
-  replace: jest.fn(),
-  push: jest.fn(),
-  pop: jest.fn(),
-  popToTop: jest.fn(),
-  reset: jest.fn(),
-  getId: jest.fn(),
-  getState: jest.fn(),
-  setOptions: jest.fn(),
 };
 
 jest.mock("@react-navigation/native", () => ({
@@ -37,13 +20,14 @@ jest.mock("@react-navigation/native", () => ({
 // Mock the useProviders hook
 const mockSetProviders = jest.fn();
 const mockGetNetworksFromProvider = jest.fn();
+const mockGetProvider: jest.Mock = jest.fn(() => null);
 jest.mock("../useProviders", () => ({
   useProviders: () => ({
     providers: null,
     setProviders: mockSetProviders,
     getNetworksFromProvider: mockGetNetworksFromProvider,
   }),
-  getProvider: jest.fn(() => null),
+  getProvider: (currency: unknown, providers: unknown) => mockGetProvider(currency, providers),
 }));
 
 // Mock the modularDrawer utils
@@ -54,11 +38,13 @@ jest.mock("@ledgerhq/live-common/modularDrawer/utils/index", () => ({
 }));
 
 // Mock the useModularDrawerFlowStepManager to prevent infinite loops
+const mockGoToStep = jest.fn();
+const mockResetStepManager = jest.fn();
 jest.mock("../useModularDrawerFlowStepManager", () => ({
   useModularDrawerFlowStepManager: () => ({
     currentStep: "asset",
-    goToStep: jest.fn(),
-    reset: jest.fn(),
+    goToStep: mockGoToStep,
+    reset: mockResetStepManager,
   }),
 }));
 
@@ -67,6 +53,7 @@ jest.mock("../../analytics/useModularDrawerAnalytics", () => ({
   useModularDrawerAnalytics: () => ({
     trackModularDrawerEvent: jest.fn(),
   }),
+  getCurrentPageName: () => "page",
 }));
 
 describe("useModularDrawerState", () => {
@@ -89,56 +76,31 @@ describe("useModularDrawerState", () => {
     expect(result.current.availableNetworks).toEqual([]);
   });
 
-  it("should select an asset and go to correct step", () => {
-    const { result } = renderHook(() =>
-      useModularDrawerState({
-        currencyIds: mockCurrencyIds,
-        currenciesByProvider: mockCurrenciesByProvider,
-        flow: "test",
-      }),
-    );
-    act(() => {
-      result.current.selectAsset(mockCurrency, [mockEthCryptoCurrency, mockBtcCryptoCurrency]);
+  it("should handle asset selection and populate networks when multiple networks exist", () => {
+    mockGetProvider.mockReturnValue({
+      providerId: "provider1",
+      currenciesByNetwork: [],
     });
-    expect(result.current.asset).toEqual(mockCurrency);
-    expect(result.current.availableNetworks.length).toBeGreaterThan(0);
-  });
+    mockGetNetworksFromProvider.mockReturnValue(["ethereum", "bitcoin"]);
 
-  it("should reset state", () => {
     const { result } = renderHook(() =>
       useModularDrawerState({
-        currencyIds: mockCurrencyIds,
+        currencyIds: ["ethereum", "bitcoin"],
         currenciesByProvider: mockCurrenciesByProvider,
         flow: "test",
       }),
     );
-    act(() => {
-      result.current.selectAsset(mockCurrency, [mockEthCryptoCurrency]);
-      result.current.selectNetwork(mockCurrency, mockEthCryptoCurrency);
-      result.current.reset();
-    });
-    expect(result.current.asset).toBeUndefined();
-    expect(result.current.network).toBeUndefined();
-    expect(result.current.availableNetworks).toEqual([]);
-  });
 
-  it("should go back to asset step", () => {
-    const { result } = renderHook(() =>
-      useModularDrawerState({
-        currencyIds: mockCurrencyIds,
-        currenciesByProvider: mockCurrenciesByProvider,
-        flow: "test",
-      }),
-    );
     act(() => {
-      result.current.backToAsset();
+      result.current.handleAsset(mockCurrency);
     });
-    // Test that the state is reset
-    expect(result.current.asset).toBeUndefined();
-    expect(result.current.network).toBeUndefined();
+
+    expect(mockSetProviders).toHaveBeenCalled();
+    expect(result.current.asset).toEqual(mockCurrency);
+    expect(result.current.availableNetworks.length).toBeGreaterThan(1);
   });
 
-  it("should go back to network step", () => {
+  it("should reset state on close", () => {
     const { result } = renderHook(() =>
       useModularDrawerState({
         currencyIds: mockCurrencyIds,
@@ -147,57 +109,38 @@ describe("useModularDrawerState", () => {
       }),
     );
     act(() => {
-      result.current.backToNetwork();
+      result.current.handleAsset(mockCurrency);
     });
-    // Test that network is cleared
-    expect(result.current.network).toBeUndefined();
-  });
-
-  it("should handle back from Network step", () => {
-    const { result } = renderHook(() =>
-      useModularDrawerState({
-        currencyIds: mockCurrencyIds,
-        currenciesByProvider: mockCurrenciesByProvider,
-        flow: "test",
-      }),
-    );
+    expect(result.current.asset).toEqual(mockCurrency);
     act(() => {
-      result.current.handleBack(ModularDrawerStep.Network);
+      result.current.handleCloseButton();
     });
-    // Test that the state is reset when going back from network
     expect(result.current.asset).toBeUndefined();
+    expect(result.current.network).toBeUndefined();
+    expect(result.current.availableNetworks).toEqual([]);
   });
 
-  it("should handle back from Account step with multiple networks", () => {
+  it("should expose back/close handlers", () => {
     const { result } = renderHook(() =>
       useModularDrawerState({
         currencyIds: mockCurrencyIds,
         currenciesByProvider: mockCurrenciesByProvider,
         flow: "test",
       }),
     );
-    act(() => {
-      result.current.selectAsset(mockCurrency, [mockEthCryptoCurrency, mockBtcCryptoCurrency]);
-      result.current.handleBack(ModularDrawerStep.Account);
-    });
-    // Test that we go back to network step when multiple networks are available
-    expect(result.current.network).toBeUndefined();
+    expect(typeof result.current.handleBackButton).toBe("function");
+    expect(typeof result.current.handleCloseButton).toBe("function");
   });
 
-  it("should handle back from Account step with one network", () => {
+  it("should compute hasOneCurrency as false with provided mocks", () => {
     const { result } = renderHook(() =>
       useModularDrawerState({
-        currencyIds: mockCurrencyIds,
+        currencyIds: ["bitcoin", "ethereum"],
         currenciesByProvider: mockCurrenciesByProvider,
         flow: "test",
       }),
     );
-    act(() => {
-      result.current.selectAsset(mockCurrency, [mockEthCryptoCurrency]);
-      result.current.handleBack(ModularDrawerStep.Account);
-    });
-    // Test that we go back to asset step when only one network is available
-    expect(result.current.asset).toBeUndefined();
+    expect(result.current.hasOneCurrency).toBe(false);
   });
 
   it("should handle single currency flow", () => {