chore(suite-desktop): improve coverage with analytics for yield

53gur0 · 53gur0 · commit 521616371c7b · 2026-08-05T13:04:10.000+02:00
diff --git a/packages/suite/src/actions/wallet/unwrapNativeTokenThunks.ts b/packages/suite/src/actions/wallet/unwrapNativeTokenThunks.ts
@@ -127,6 +127,7 @@ export const submitUnwrapNativeTokenThunk = createThunk(
             dispatch(
                 notificationsActions.addToast({
                     type: 'tx-unwrap',
+                    isYieldFlowStep: !!yieldFlow,
                     descriptor: account.descriptor,
                     symbol: account.symbol,
                     txid: sendResult.txid,
diff --git a/packages/suite/src/actions/wallet/wrapNativeTokenThunks.ts b/packages/suite/src/actions/wallet/wrapNativeTokenThunks.ts
@@ -164,6 +164,7 @@ export const submitWrapNativeTokenThunk = createThunk(
             dispatch(
                 notificationsActions.addToast({
                     type: 'tx-wrap',
+                    isYieldFlowStep: !!yieldFlow,
                     descriptor: account.descriptor,
                     symbol: account.symbol,
                     txid: sendResult.txid,
diff --git a/packages/suite/src/components/earn/yield/common/useWrappedNativeFlowAnalytics.test.ts b/packages/suite/src/components/earn/yield/common/useWrappedNativeFlowAnalytics.test.ts
@@ -54,6 +54,25 @@ describe('useWrappedNativeFlowAnalytics', () => {
         );
     });
 
+    it.each([
+        ['wrap', 'wrap-max'],
+        ['unwrap', 'unwrap-max'],
+    ] as const)('reportMaxClick fires %s-max on the interaction event', (flowType, element) => {
+        const { result } = renderFlowAnalytics({
+            flowType,
+            status: null,
+            txid: null,
+            networkSymbol: 'eth',
+        });
+
+        act(() => result.current.reportMaxClick());
+
+        expect(mockReport).toHaveBeenCalledWith({
+            type: events.yieldInteractionEvent.name,
+            payload: { element, networkSymbol: 'eth' },
+        });
+    });
+
     it('reports success with a duration when the broadcast confirms', () => {
         const { rerender } = renderFlowAnalytics(pendingWrap);
 
diff --git a/packages/suite/src/components/earn/yield/common/useWrappedNativeFlowAnalytics.ts b/packages/suite/src/components/earn/yield/common/useWrappedNativeFlowAnalytics.ts
@@ -21,6 +21,7 @@ type UseWrappedNativeFlowAnalyticsParams = {
 /**
  * Fires the `yield/wrap` / `yield/unwrap` events for the standalone wrap/unwrap flows: `submit` via
  * the returned `reportSubmit`, `success` / `error` on-chain, `leftPending` if the user leaves first.
+ * `reportMaxClick` fires the max-button `yield/interaction` event.
  */
 export const useWrappedNativeFlowAnalytics = ({
     flowType,
@@ -47,6 +48,17 @@ export const useWrappedNativeFlowAnalytics = ({
         report({ type: 'submit', action: 'continue', networkSymbol });
     }, [report, networkSymbol]);
 
+    // No `vaultId` — that is what separates these from the in-flow deposit-max / withdraw-max.
+    const reportMaxClick = useCallback(() => {
+        analytics.report({
+            type: events.yieldInteractionEvent.name,
+            payload: {
+                element: flowType === 'wrap' ? 'wrap-max' : 'unwrap-max',
+                networkSymbol,
+            },
+        });
+    }, [analytics, flowType, networkSymbol]);
+
     // Timed in an effect rather than during render so the hook stays pure.
     useEffect(() => {
         if (txid && startRef.current?.txid !== txid) {
@@ -95,5 +107,5 @@ export const useWrappedNativeFlowAnalytics = ({
         [report, latestRef],
     );
 
-    return { reportSubmit };
+    return { reportSubmit, reportMaxClick };
 };
diff --git a/packages/suite/src/components/earn/yield/hooks/useYieldFiatInput.test.ts b/packages/suite/src/components/earn/yield/hooks/useYieldFiatInput.test.ts
@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form';
 
 import { act, renderHook } from '@testing-library/react';
 
+import { events } from '@suite-common/analytics';
 import { type YieldFlowFormValues } from '@suite-common/wallet-core';
 
 import { useYieldFiatInput } from './useYieldFiatInput';
@@ -15,21 +16,38 @@ const mockState = {
     },
 };
 
+const mockReport = jest.fn();
+
 jest.mock('src/hooks/suite', () => ({
     useSelector: (selector: (state: unknown) => unknown) => selector(mockState),
 }));
 
-const renderYieldFiatInput = () =>
+jest.mock('@suite-common/dependency-injection', () => {
+    const analytics = { report: (...args: unknown[]) => mockReport(...args) };
+
+    return { useServices: () => ({ analytics }) };
+});
+
+jest.mock('@suite/analytics', () => ({ selectDesktopAnalyticsDep: () => ({}) }));
+
+const renderYieldFiatInput = (vaultId?: string) =>
     renderHook(() => {
         const methods = useForm<YieldFlowFormValues>({
             mode: 'onChange',
             defaultValues: { amountInput: '', fiatInput: '' },
         });
 
-        return { methods, fiat: useYieldFiatInput({ methods, symbol: 'eth', decimals: 18 }) };
+        return {
+            methods,
+            fiat: useYieldFiatInput({ methods, symbol: 'eth', decimals: 18, vaultId }),
+        };
     });
 
 describe('useYieldFiatInput', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     it('offers the fiat switch when a rate is available', () => {
         const { result } = renderYieldFiatInput();
 
@@ -69,4 +87,37 @@ describe('useYieldFiatInput', () => {
 
         expect(result.current.methods.getValues('amountInput')).toBe('0.099998500007499963');
     });
+
+    it('reports the unit switched to, in both directions', () => {
+        const { result } = renderYieldFiatInput();
+
+        act(() => result.current.fiat.fiatToggle?.onToggle());
+        act(() => result.current.fiat.fiatToggle?.onToggle());
+
+        expect(mockReport.mock.calls.map(([event]) => event.payload.value)).toEqual([
+            'fiat',
+            'crypto',
+        ]);
+        expect(mockReport).toHaveBeenCalledWith({
+            type: events.yieldInteractionEvent.name,
+            payload: {
+                element: 'amount-currency-toggle',
+                value: 'fiat',
+                networkSymbol: 'eth',
+                vaultId: undefined,
+            },
+        });
+    });
+
+    it('carries the vault id when the amount belongs to a vault flow', () => {
+        const { result } = renderYieldFiatInput('morpho-weth');
+
+        act(() => result.current.fiat.fiatToggle?.onToggle());
+
+        expect(mockReport).toHaveBeenCalledWith(
+            expect.objectContaining({
+                payload: expect.objectContaining({ vaultId: 'morpho-weth' }),
+            }),
+        );
+    });
 });
diff --git a/packages/suite/src/components/earn/yield/hooks/useYieldFiatInput.ts b/packages/suite/src/components/earn/yield/hooks/useYieldFiatInput.ts
@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { type UseFormReturn, useWatch } from 'react-hook-form';
 
+import { selectDesktopAnalyticsDep } from '@suite/analytics';
+import { events } from '@suite-common/analytics';
+import { useServices } from '@suite-common/dependency-injection';
 import { type NetworkSymbol } from '@suite-common/wallet-config';
 import {
     type YieldFlowFormValues,
@@ -28,6 +31,7 @@ type UseYieldFiatInputParams = {
     symbol: NetworkSymbol | undefined;
     tokenAddress?: TokenAddress;
     decimals: number;
+    vaultId?: string;
 };
 
 export type UseYieldFiatInputResult = {
@@ -46,7 +50,9 @@ export const useYieldFiatInput = ({
     symbol,
     tokenAddress,
     decimals,
+    vaultId,
 }: UseYieldFiatInputParams): UseYieldFiatInputResult => {
+    const { analytics } = useServices(selectDesktopAnalyticsDep);
     const baseCurrencyCode = useSelector(selectBaseCurrency);
     const currentFiatRates = useSelector(selectCurrentFiatRates);
     const [currency, setCurrency] = useState<YieldCurrency>('crypto');
@@ -96,11 +102,28 @@ export const useYieldFiatInput = ({
         [currentRate, decimals, methods],
     );
 
+    // Derived from `currency` rather than the `setCurrency` updater, which React may invoke twice.
+    const onToggle = useCallback(() => {
+        const nextCurrency: YieldCurrency = currency === 'crypto' ? 'fiat' : 'crypto';
+
+        analytics.report({
+            type: events.yieldInteractionEvent.name,
+            payload: {
+                element: 'amount-currency-toggle',
+                value: nextCurrency,
+                networkSymbol: symbol,
+                vaultId,
+            },
+        });
+
+        setCurrency(nextCurrency);
+    }, [analytics, currency, symbol, vaultId]);
+
     const fiatToggle: YieldAmountCardFiatToggleProps | undefined = hasFiatRate
         ? {
               currency,
               fiatSymbol,
-              onToggle: () => setCurrency(prev => (prev === 'crypto' ? 'fiat' : 'crypto')),
+              onToggle,
               onFiatAmountChange,
           }
         : undefined;
diff --git a/packages/suite/src/components/earn/yield/hooks/useYieldFlow.ts b/packages/suite/src/components/earn/yield/hooks/useYieldFlow.ts
@@ -189,6 +189,7 @@ export const useYieldFlow = ({
         symbol: rateToken?.symbol,
         tokenAddress: rateToken?.tokenAddress,
         decimals: token?.decimals ?? getNetwork(account.symbol).decimals,
+        vaultId: vault.id,
     });
 
     const getMaxAmount = () => {
diff --git a/packages/suite/src/components/earn/yield/unwrap/UnwrapNativeToken.tsx b/packages/suite/src/components/earn/yield/unwrap/UnwrapNativeToken.tsx
@@ -75,7 +75,7 @@ export const UnwrapNativeToken = ({
 
     const pendingTxStatus = useWrappedNativePendingTx(account, broadcast?.txid ?? null, 'unwrap');
 
-    const { reportSubmit } = useWrappedNativeFlowAnalytics({
+    const { reportSubmit, reportMaxClick } = useWrappedNativeFlowAnalytics({
         flowType: 'unwrap',
         status: pendingTxStatus,
         txid: broadcast?.txid ?? null,
@@ -147,6 +147,12 @@ export const UnwrapNativeToken = ({
         unwrapMutation.mutate(unwrapAmount);
     });
 
+    const handleMaxClick = () => {
+        reportMaxClick();
+
+        setMaxAmount(tokenBalance);
+    };
+
     const openTxDetail = (txid: string) => {
         dispatch(
             openModal({
@@ -223,7 +229,7 @@ export const UnwrapNativeToken = ({
                                 : undefined
                         }
                         fiatToggle={fiatToggle}
-                        onMaxClick={() => setMaxAmount(tokenBalance)}
+                        onMaxClick={handleMaxClick}
                         onSubmit={handleSubmit}
                         onPendingTxClick={openTxDetail}
                     />
diff --git a/packages/suite/src/components/earn/yield/wrap/WrapNativeToken.tsx b/packages/suite/src/components/earn/yield/wrap/WrapNativeToken.tsx
@@ -61,7 +61,7 @@ export const WrapNativeToken = ({ account, token }: WrapNativeTokenProps) => {
 
     const pendingTxStatus = useWrappedNativePendingTx(account, broadcast?.txid ?? null, 'wrap');
 
-    const { reportSubmit } = useWrappedNativeFlowAnalytics({
+    const { reportSubmit, reportMaxClick } = useWrappedNativeFlowAnalytics({
         flowType: 'wrap',
         status: pendingTxStatus,
         txid: broadcast?.txid ?? null,
@@ -127,6 +127,12 @@ export const WrapNativeToken = ({ account, token }: WrapNativeTokenProps) => {
         wrapMutation.mutate(wrapAmount);
     });
 
+    const handleMaxClick = () => {
+        reportMaxClick();
+
+        setMaxAmount(maxWrapAmount);
+    };
+
     const openTxDetail = (txid: string) => {
         dispatch(
             openModal({
@@ -218,7 +224,7 @@ export const WrapNativeToken = ({ account, token }: WrapNativeTokenProps) => {
                                 : undefined
                         }
                         fiatToggle={fiatToggle}
-                        onMaxClick={() => setMaxAmount(maxWrapAmount)}
+                        onMaxClick={handleMaxClick}
                         onSubmit={handleSubmit}
                         onPendingTxClick={openTxDetail}
                     />
diff --git a/packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.test.tsx b/packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.test.tsx
@@ -1,7 +1,8 @@
 import '@suite-common/test-utils/globalOverrides';
 
 import { Translation } from '@suite/intl';
-import { configureMockStore, screen } from '@suite-common/test-utils';
+import { events } from '@suite-common/analytics';
+import { configureMockStore, fireEvent, screen } from '@suite-common/test-utils';
 import { type NotificationEntry } from '@suite-common/toast-notifications';
 
 import { renderWithProviders } from 'src/support/test-utils/hooksHelper';
@@ -12,11 +13,21 @@ import { mockInitialAppState } from '../../../../../mocks/mockInitialAppState';
 import { type NotificationViewProps } from '../Notifications/NotificationGroup/NotificationList/NotificationView';
 
 type TradingErrorNotification = Extract<NotificationEntry, { type: 'trading-error' }>;
+type WrapNotification = Extract<NotificationEntry, { type: 'tx-wrap' | 'tx-unwrap' }>;
+
+const mockReport = jest.fn();
 
 const MessageView = ({ message, messageValues }: NotificationViewProps) => (
     <Translation id={message} values={messageValues} />
 );
 
+// Stands in for ToastNotificationView, the only view that wires `onCancel`.
+const DismissableView = ({ onCancel }: NotificationViewProps & { onCancel?: () => void }) => (
+    <button type="button" onClick={onCancel}>
+        dismiss
+    </button>
+);
+
 const renderTradingError = (payload: Omit<TradingErrorNotification, 'context' | 'id'>) => {
     const notification: TradingErrorNotification = { context: 'toast', id: 0, ...payload };
     const store = configureMockStore({
@@ -31,6 +42,64 @@ const renderTradingError = (payload: Omit<TradingErrorNotification, 'context' |
     );
 };
 
+const renderWrapToast = (payload: Omit<WrapNotification, 'context' | 'id'>) => {
+    const notification = { context: 'toast', id: 0, ...payload } as WrapNotification;
+    const store = configureMockStore({
+        preloadedState: mockInitialAppState,
+        serializableCheck: { ignoredActions: [] },
+    });
+    const services = {
+        ...extraDependenciesDesktopMock.services,
+        analytics: { ...extraDependenciesDesktopMock.services.analytics, report: mockReport },
+    };
+
+    renderWithProviders(
+        store,
+        services,
+        <NotificationRenderer render={DismissableView} notification={notification} />,
+    );
+
+    fireEvent.click(screen.getByText('dismiss'));
+};
+
+const wrapMetadata = {
+    send: { symbol: 'eth', displaySymbol: 'ETH', amount: '1' },
+    receive: { symbol: 'eth', displaySymbol: 'WETH', amount: '1' },
+} as const;
+
+const wrapToastPayload = {
+    type: 'tx-wrap',
+    metadata: wrapMetadata,
+    descriptor: '0xdescriptor',
+    symbol: 'eth',
+    txid: '0xwrap',
+    formattedAmount: '1',
+} as const;
+
+describe('NotificationRenderer wrap toast dismissal', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it.each([
+        ['tx-wrap', 'yieldWrapEvent'],
+        ['tx-unwrap', 'yieldUnwrapEvent'],
+    ] as const)('reports %s dismissal as sent/close', (type, eventKey) => {
+        renderWrapToast({ ...wrapToastPayload, type });
+
+        expect(mockReport).toHaveBeenCalledWith({
+            type: events[eventKey].name,
+            payload: { type: 'sent', action: 'close', networkSymbol: 'eth' },
+        });
+    });
+
+    it('stays silent for an in-flow yield step', () => {
+        renderWrapToast({ ...wrapToastPayload, isYieldFlowStep: true });
+
+        expect(mockReport).not.toHaveBeenCalled();
+    });
+});
+
 describe('NotificationRenderer trading-error', () => {
     it('step 1: renders the structured message when data is present, ignoring the partner message', () => {
         renderTradingError({
diff --git a/packages/suite/src/components/suite/notifications/NotificationRenderer/WrapInfoRenderer.tsx b/packages/suite/src/components/suite/notifications/NotificationRenderer/WrapInfoRenderer.tsx
diff --git a/packages/suite/src/views/wallet/transactions/TradeBox/WrapNativeTokenButton.tsx b/packages/suite/src/views/wallet/transactions/TradeBox/WrapNativeTokenButton.tsx
diff --git a/suite-common/analytics/src/events/yieldInteractionEvent.ts b/suite-common/analytics/src/events/yieldInteractionEvent.ts
diff --git a/suite-common/analytics/src/events/yieldWrappedNativeAttributes.ts b/suite-common/analytics/src/events/yieldWrappedNativeAttributes.ts
diff --git a/suite-common/toast-notifications/src/types.ts b/suite-common/toast-notifications/src/types.ts
