Merge pull request #14600 from LedgerHQ/feat/24885_manual-refresh

feat/live 24885 manual refresh

Author: claudiiafg

.changeset/tough-mails-rest.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+feat(lwd): balance loading on manual sync

apps/ledger-live-desktop/src/mvvm/components/TopBar/hooks/__tests__/useActivityIndicator.test.ts

@@ -3,78 +3,39 @@ import { renderHook, act } from "tests/testSetup";
 import { useActivityIndicator } from "../useActivityIndicator";
 import { BTC_ACCOUNT } from "LLD/features/__mocks__/accounts.mock";
 
-const mockBridgeSync = jest.fn();
-const mockCvPoll = jest.fn();
-const mockOnUserRefresh = jest.fn();
+const mockTriggerRefresh = jest.fn();
+
+const defaultPortfolioBalanceSync = {
+  isBalanceLoading: false,
+  stableSyncPending: false,
+  hasCvOrBridgeError: false,
+  hasWalletSyncError: false,
+  triggerRefresh: mockTriggerRefresh,
+};
+
+jest.mock("LLD/hooks/usePortfolioBalanceSync", () => ({
+  usePortfolioBalanceSync: jest.fn(() => defaultPortfolioBalanceSync),
+}));
+
+const mockUsePortfolioBalanceSync = jest.requireMock(
+  "LLD/hooks/usePortfolioBalanceSync",
+).usePortfolioBalanceSync;
 
 // Bridge: useActivityIndicator + useAccountsSyncStatus both use this package
 jest.mock("@ledgerhq/live-common/bridge/react/index", () => ({
-  useBridgeSync: jest.fn(() => mockBridgeSync),
+  useBridgeSync: jest.fn(),
   useGlobalSyncState: jest.fn(() => ({ pending: false, error: null })),
   useBatchAccountsSyncState: jest.fn(({ accounts }: { accounts: { id: string }[] }) =>
     accounts.map(account => ({ syncState: { pending: false, error: null }, account })),
   ),
 }));
 
-jest.mock("@ledgerhq/live-countervalues-react", () => ({
-  ...jest.requireActual<typeof import("@ledgerhq/live-countervalues-react")>(
-    "@ledgerhq/live-countervalues-react",
-  ),
-  useCountervaluesPolling: jest.fn(() => ({
-    pending: false,
-    error: null,
-    poll: mockCvPoll,
-    start: jest.fn(),
-    stop: jest.fn(),
-    wipe: jest.fn(),
-  })),
-}));
-
-jest.mock("LLD/features/WalletSync/components/WalletSyncContext", () => ({
-  useWalletSyncUserState: jest.fn(() => ({
-    visualPending: false,
-    walletSyncError: null,
-    onUserRefresh: mockOnUserRefresh,
-  })),
-}));
-
-jest.mock("LLD/hooks/usePortfolioSyncStatus", () => ({
-  usePortfolioSyncStatus: jest.fn(() => ({ isColdStart: false })),
-}));
-
-const mockUseGlobalSyncState = jest.requireMock(
-  "@ledgerhq/live-common/bridge/react/index",
-).useGlobalSyncState;
-const mockUseCountervaluesPolling = jest.requireMock(
-  "@ledgerhq/live-countervalues-react",
-).useCountervaluesPolling;
-const mockUseWalletSyncUserState = jest.requireMock(
-  "LLD/features/WalletSync/components/WalletSyncContext",
-).useWalletSyncUserState;
-const mockUsePortfolioSyncStatus = jest.requireMock(
-  "LLD/hooks/usePortfolioSyncStatus",
-).usePortfolioSyncStatus;
-
 const defaultInitialState: { accounts: unknown[] } = { accounts: [] };
 
 describe("useActivityIndicator", () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseGlobalSyncState.mockReturnValue({ pending: false, error: null });
-    mockUseCountervaluesPolling.mockReturnValue({
-      pending: false,
-      error: null,
-      poll: mockCvPoll,
-      start: jest.fn(),
-      stop: jest.fn(),
-      wipe: jest.fn(),
-    });
-    mockUseWalletSyncUserState.mockReturnValue({
-      visualPending: false,
-      walletSyncError: null,
-      onUserRefresh: mockOnUserRefresh,
-    });
-    mockUsePortfolioSyncStatus.mockReturnValue({ isColdStart: false });
+    mockUsePortfolioBalanceSync.mockReturnValue(defaultPortfolioBalanceSync);
   });
 
   it("returns hasAccounts, handleSync, isError, isRotating, tooltip, icon", () => {
@@ -86,32 +47,33 @@ describe("useActivityIndicator", () => {
       hasAccounts: true,
       isError: false,
       isRotating: false,
+      isDisabled: false,
     });
     expect(result.current.tooltip).toBeDefined();
     expect(typeof result.current.tooltip).toBe("string");
     expect(result.current.handleSync).toBeDefined();
     expect(result.current.icon).toBe(Refresh);
   });
 
-  it("returns isRotating false when only countervalues polling is pending (no user click)", () => {
-    mockUseCountervaluesPolling.mockReturnValue({
-      pending: true,
-      error: null,
-      poll: mockCvPoll,
-      start: jest.fn(),
-      stop: jest.fn(),
-      wipe: jest.fn(),
+  it("returns isRotating and isDisabled true when balance is loading (e.g. countervalues polling)", () => {
+    mockUsePortfolioBalanceSync.mockReturnValue({
+      ...defaultPortfolioBalanceSync,
+      isBalanceLoading: true,
     });
 
     const { result } = renderHook(() => useActivityIndicator(), {
       initialState: { ...defaultInitialState, accounts: [BTC_ACCOUNT] },
     });
 
-    expect(result.current.isRotating).toBe(false);
+    expect(result.current.isRotating).toBe(true);
+    expect(result.current.isDisabled).toBe(true);
   });
 
   it("returns isRotating true on cold start when portfolio balance is not available", () => {
-    mockUsePortfolioSyncStatus.mockReturnValue({ isColdStart: true });
+    mockUsePortfolioBalanceSync.mockReturnValue({
+      ...defaultPortfolioBalanceSync,
+      isBalanceLoading: true,
+    });
 
     const { result } = renderHook(() => useActivityIndicator(), {
       initialState: { ...defaultInitialState, accounts: [BTC_ACCOUNT] },
@@ -121,45 +83,42 @@ describe("useActivityIndicator", () => {
     expect(result.current.tooltip).toBeNull();
   });
 
-  it("returns isRotating false when only global sync state is pending (no user click)", () => {
-    mockUseGlobalSyncState.mockReturnValue({ pending: true, error: null });
+  it("returns isRotating true when sync is pending", () => {
+    mockUsePortfolioBalanceSync.mockReturnValue({
+      ...defaultPortfolioBalanceSync,
+      stableSyncPending: true,
+      isBalanceLoading: true,
+    });
 
     const { result } = renderHook(() => useActivityIndicator(), {
       initialState: { ...defaultInitialState, accounts: [BTC_ACCOUNT] },
     });
 
-    expect(result.current.isRotating).toBe(false);
+    expect(result.current.isRotating).toBe(true);
   });
 
-  it("returns isRotating false when only wallet sync visualPending is true (no user click)", () => {
-    mockUseWalletSyncUserState.mockReturnValue({
-      visualPending: true,
-      walletSyncError: null,
-      onUserRefresh: mockOnUserRefresh,
-    });
-
-    const { result } = renderHook(() => useActivityIndicator(), {
-      initialState: { ...defaultInitialState, accounts: [BTC_ACCOUNT] },
+  it("returns isRotating true after user click when sync is pending", () => {
+    mockUsePortfolioBalanceSync.mockReturnValue({
+      ...defaultPortfolioBalanceSync,
+      stableSyncPending: true,
+      isBalanceLoading: true,
     });
 
-    expect(result.current.isRotating).toBe(false);
-  });
-
-  it("returns isRotating false after user click when sync is not pending", () => {
     const { result } = renderHook(() => useActivityIndicator(), {
       initialState: { ...defaultInitialState, accounts: [BTC_ACCOUNT] },
     });
 
-    expect(result.current.isRotating).toBe(false);
+    expect(result.current.isRotating).toBe(true);
 
     act(() => {
       result.current.handleSync();
     });
 
-    expect(result.current.isRotating).toBe(false);
+    expect(result.current.isRotating).toBe(true);
+    expect(result.current.isDisabled).toBe(true);
   });
 
-  it("handleSync calls onUserRefresh, cvPolling.poll, bridgeSync and track", () => {
+  it("handleSync calls triggerRefresh and track", () => {
     const { result } = renderHook(() => useActivityIndicator(), {
       initialState: { ...defaultInitialState, accounts: [BTC_ACCOUNT] },
     });
@@ -169,13 +128,7 @@ describe("useActivityIndicator", () => {
       result.current.handleSync();
     });
 
-    expect(mockOnUserRefresh).toHaveBeenCalledTimes(1);
-    expect(mockCvPoll).toHaveBeenCalledTimes(1);
-    expect(mockBridgeSync).toHaveBeenCalledWith({
-      type: "SYNC_ALL_ACCOUNTS",
-      priority: 5,
-      reason: "user-click",
-    });
+    expect(mockTriggerRefresh).toHaveBeenCalledTimes(1);
     expect(track).toHaveBeenCalledWith("SyncRefreshClick");
   });
 });

apps/ledger-live-desktop/src/mvvm/components/TopBar/hooks/__tests__/useTopBarViewModel.test.ts

@@ -33,6 +33,7 @@ describe("useTopBarViewModel", () => {
       isError: false,
       tooltip: "Refresh",
       icon: Refresh,
+      isDisabled: false,
     });
     mockUseSettings.mockReturnValue({
       handleSettings: mockHandleSettings,
@@ -82,6 +83,7 @@ describe("useTopBarViewModel", () => {
       isError: false,
       tooltip: "Refresh",
       icon: Refresh,
+      isDisabled: false,
     });
 
     const { result } = renderHook(() => useTopBarViewModel());
@@ -104,6 +106,7 @@ describe("useTopBarViewModel", () => {
       isError: true,
       tooltip: "Error",
       icon: Refresh,
+      isDisabled: true,
     });
 
     const { result } = renderHook(() => useTopBarViewModel());

apps/ledger-live-desktop/src/mvvm/components/TopBar/hooks/useActivityIndicator.ts

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { useSelector } from "LLD/hooks/redux";
 import { hasAccountsSelector, isUpToDateSelector } from "~/renderer/reducers/accounts";
-import { useWalletSyncUserState } from "LLD/features/WalletSync/components/WalletSyncContext";
-import { useCountervaluesPolling } from "@ledgerhq/live-countervalues-react";
-import { useBridgeSync, useGlobalSyncState } from "@ledgerhq/live-common/bridge/react/index";
 import { getEnv } from "@ledgerhq/live-env";
 import { track } from "~/renderer/analytics/segment";
 
-import { usePortfolioSyncStatus } from "LLD/hooks/usePortfolioSyncStatus";
+import { usePortfolioBalanceSync } from "LLD/hooks/usePortfolioBalanceSync";
 import { useAccountsSyncStatus } from "./useAccountsSyncStatus";
 import { useActivityIndicatorTooltip } from "./useActivityIndicatorTooltip";
 import { getActivityIndicatorIcon } from "../utils/getActivityIndicatorIcon";
@@ -17,14 +14,20 @@ import {
   USER_CLICK_SPIN_DURATION_MS,
 } from "../utils/constants";
 
+/**
+ * Activity indicator state for the TopBar sync button.
+ * When isRotating is true, the sync action should be non-interactive (disabled).
+ */
 export const useActivityIndicator = () => {
   const hasAccounts = useSelector(hasAccountsSelector);
   const accountsWithUpToDateCheck = useSelector(isUpToDateSelector);
-  const wsUserState = useWalletSyncUserState();
-  const cvPolling = useCountervaluesPolling();
-  const { isColdStart } = usePortfolioSyncStatus();
-  const bridgeSync = useBridgeSync();
-  const globalSyncState = useGlobalSyncState();
+  const {
+    isBalanceLoading,
+    stableSyncPending,
+    hasCvOrBridgeError,
+    hasWalletSyncError,
+    triggerRefresh,
+  } = usePortfolioBalanceSync();
   const [lastClickTime, setLastClickTime] = useState(0);
   const [, forceTooltipUpdate] = useReducer((tick: number) => tick + 1, 0);
 
@@ -40,16 +43,13 @@ export const useActivityIndicator = () => {
     return () => clearInterval(id);
   }, [needsTooltipUpdates]);
 
-  const isPending = cvPolling.pending || globalSyncState.pending || wsUserState.visualPending;
-  const hasWalletSyncError = !!wsUserState.walletSyncError;
-  const hasBridgeOrCvSyncError = !isPending && (!!cvPolling.error || !!globalSyncState.error);
-  const isError = hasBridgeOrCvSyncError || !areAllAccountsUpToDate || hasWalletSyncError;
+  const isError = hasCvOrBridgeError || !areAllAccountsUpToDate || hasWalletSyncError;
   const isPlaywrightRun = getEnv("PLAYWRIGHT_RUN");
   const userClickSpinMs = isPlaywrightRun
     ? PLAYWRIGHT_CLICK_SPIN_DURATION_MS
     : USER_CLICK_SPIN_DURATION_MS;
   const isUserClick = Date.now() - lastClickTime < userClickSpinMs;
-  const isRotating = isColdStart || (isUserClick && isPending);
+  const isRotating = isBalanceLoading || (isUserClick && stableSyncPending);
 
   const icon = getActivityIndicatorIcon(isError, isRotating);
   const tooltip = useActivityIndicatorTooltip({
@@ -60,22 +60,17 @@ export const useActivityIndicator = () => {
   });
 
   const handleSync = useCallback(() => {
-    wsUserState.onUserRefresh();
-    cvPolling.poll();
-    bridgeSync({
-      type: "SYNC_ALL_ACCOUNTS",
-      priority: 5,
-      reason: "user-click",
-    });
+    triggerRefresh();
     setLastClickTime(Date.now());
     track("SyncRefreshClick");
-  }, [wsUserState, cvPolling, bridgeSync]);
+  }, [triggerRefresh]);
 
   return {
     hasAccounts,
     handleSync,
     isError,
     isRotating,
+    isDisabled: isRotating,
     tooltip,
     icon,
   };

apps/ledger-live-desktop/src/mvvm/features/Portfolio/__integrations__/Portfolio.integration.test.tsx

@@ -300,7 +300,7 @@ describe("PortfolioView", () => {
       expect(balanceElement).not.toHaveTextContent("••••"); // Ensure no placeholders
     });
 
-    it("should not show loading when countervalues are polling but balance is already available", () => {
+    it("should display loading state when countervalues are being polled", () => {
       mockUseCountervaluesPolling.mockReturnValue({
         ...defaultPollingMock,
         pending: true,

apps/ledger-live-desktop/src/mvvm/features/Portfolio/components/Balance/BalanceView.tsx

@@ -10,6 +10,7 @@ export const BalanceView = ({
   valueChange,
   navigateToAnalytics,
   handleKeyDown,
+  isLoading,
   isColdStart,
   shouldDisplayBalanceRefreshRework,
 }: BalanceViewProps) => {
@@ -27,7 +28,7 @@ export const BalanceView = ({
         formatter={formatter}
         hidden={discreet}
         animate={shouldDisplayBalanceRefreshRework}
-        loading={shouldDisplayBalanceRefreshRework && isColdStart}
+        loading={shouldDisplayBalanceRefreshRework && isLoading}
         data-testid="portfolio-total-balance"
       />
       {!isColdStart && <Trend valueChange={valueChange} />}

apps/ledger-live-desktop/src/mvvm/features/Portfolio/components/Balance/types.ts

@@ -9,6 +9,7 @@ export interface BalanceViewProps {
   readonly navigateToAnalytics: () => void;
   readonly handleKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   readonly isColdStart: boolean;
+  readonly isLoading: boolean;
   readonly shouldDisplayBalanceRefreshRework: boolean;
 }