[LWD] feat(tracking): add tracking contact send flow lwd

.changeset/violet-flowers-try.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+feat(tracking): add tracking contact send flow lwd

apps/ledger-live-desktop/src/mvvm/features/Send/components/SendFlowLayout.tsx

@@ -16,6 +16,8 @@ import { track } from "~/renderer/analytics/segment";
 import { getSendFlowTrackingProperties } from "../utils/tracking";
 import { AddNewContactHeaderProvider } from "../context/AddNewContactHeaderContext";
 import { RecipientContactSelectionProvider } from "../context/RecipientContactSelectionContext";
+import { useSendFlowTracking } from "../context/SendFlowTrackingContext";
+import { getSendFlowTrackingPage } from "../utils/contactTracking";
 
 type SendFlowLayoutProps = Readonly<{
   isOpen: boolean;
@@ -25,6 +27,7 @@ type SendFlowLayoutProps = Readonly<{
 export function SendFlowLayout({ isOpen, onClose }: SendFlowLayoutProps) {
   const wizard = useFlowWizard<SendFlowStep, SendFlowBusinessContext, SendStepConfig>();
   const { state } = useSendFlowData();
+  const { recipientType } = useSendFlowTracking();
 
   const currentStepConfig = wizard.currentStepConfig;
   const StepComponent = wizard.currentStepRenderer;
@@ -38,13 +41,14 @@ export function SendFlowLayout({ isOpen, onClose }: SendFlowLayoutProps) {
       if (!open) {
         track("button_clicked", {
           button: "close",
-          page: `step ${wizard.currentStep}`,
+          page: getSendFlowTrackingPage(wizard.currentStep),
+          recipientType,
           ...sendFlowTrackingProperties,
         });
         onClose();
       }
     },
-    [onClose, wizard.currentStep, sendFlowTrackingProperties],
+    [onClose, recipientType, wizard.currentStep, sendFlowTrackingProperties],
   );
 
   const dialogHeight = currentStepConfig?.height ?? "fixed";

apps/ledger-live-desktop/src/mvvm/features/Send/components/SendHeader.tsx

@@ -2,7 +2,7 @@
 import { useTranslation } from "react-i18next";
 import { AddressInput, DialogHeader } from "@ledgerhq/lumen-ui-react";
 import { useFlowWizard } from "../../FlowWizard/FlowWizardContext";
-import { useSendFlowData, useSendFlowActions } from "../context/SendFlowContext";
+import { useSendFlowData } from "../context/SendFlowContext";
 import { useSendAmountDisplayMode } from "@ledgerhq/live-common/flows/send/amount/SendAmountDisplayModeContext";
 import {
   SEND_FLOW_STEP,
@@ -22,7 +22,6 @@
 export function SendHeader() {
   const wizard = useFlowWizard<SendFlowStep, SendFlowBusinessContext, SendStepConfig>();
   const { state, uiConfig, recipientSearch } = useSendFlowData();
-  const { close } = useSendFlowActions();
   const { displayMode } = useSendAmountDisplayMode();
   const { t } = useTranslation();
   const { currentStep } = wizard;
@@ -45,8 +44,10 @@
     addressInputValue,
     descriptionText,
     handleBack,
+    handleClose,
     handleRecipientInputClick,
     handleRecipientInputChange,
+    handleRecipientPaste,
     handleQrCodeClick,
     handleScanPicked,
     isScannerOpen,
@@ -104,6 +105,7 @@
           prefix={t("newSendFlow.to")}
           value={addressInputValue}
           onChange={e => handleRecipientInputChange(e.target.value)}
+          onPaste={handleRecipientPaste}
           onClear={recipientSearch.clear}
           onQrCodeClick={handleQrCodeClick}
           placeholder={recipientPlaceholder}
@@ -153,7 +155,7 @@
     currencyId,
     hasMemoTypeOptions,
     memoTypeOptions,
     memo.type,
     memo.value,
     onMemoTypeChange,
     showMemoValueInput,
@@ -162,6 +164,7 @@
     onMemoValueChange,
     handleRecipientInputClick,
     handleRecipientInputChange,
+    handleRecipientPaste,
     handleQrCodeClick,
     handleScanPicked,
     isScannerOpen,
@@ -175,7 +178,7 @@
           title={title}
           description={descriptionText || undefined}
           onBack={showBackButton ? handleBack : undefined}
-          onClose={close}
+          onClose={handleClose}
         />
       </div>
       {recipientInputContent}

apps/ledger-live-desktop/src/mvvm/features/Send/components/__tests__/SendHeader.test.tsx

@@ -10,16 +10,40 @@ import { useFlowWizard } from "../../../FlowWizard/FlowWizardContext";
 import { useSendFlowData, useSendFlowActions } from "../../context/SendFlowContext";
 
 jest.mock("../../hooks/useSendHeaderModel");
-jest.mock("../../../FlowWizard/FlowWizardContext", () => ({ useFlowWizard: jest.fn() }));
+jest.mock("../../../FlowWizard/FlowWizardContext", () => ({
+  useFlowWizard: jest.fn(),
+}));
 jest.mock("../../context/SendFlowContext", () => ({
   useSendFlowData: jest.fn(),
   useSendFlowActions: jest.fn(),
 }));
-jest.mock("../../hooks/useAvailableBalance", () => ({ useAvailableBalance: () => "" }));
+jest.mock("../../hooks/useAvailableBalance", () => ({
+  useAvailableBalance: () => "",
+}));
 jest.mock("@ledgerhq/live-common/flows/send/amount/SendAmountDisplayModeContext", () => ({
-  useSendAmountDisplayMode: () => ({ displayMode: "fiat", setDisplayMode: jest.fn() }),
+  useSendAmountDisplayMode: () => ({
+    displayMode: "fiat",
+    setDisplayMode: jest.fn(),
+  }),
 }));
 jest.mock("../AddressDisclaimer", () => ({ AddressDisclaimer: () => null }));
+jest.mock("../../hooks/useSendHeaderMemo", () => ({
+  useSendHeaderMemo: () => ({
+    currencyId: undefined,
+    hasMemoTypeOptions: false,
+    memo: undefined,
+    memoTypeOptions: [],
+    onMemoTypeChange: jest.fn(),
+    showMemoValueInput: false,
+    onMemoValueChange: jest.fn(),
+    showSkipMemo: false,
+    skipMemoState: "idle",
+    onSkipMemoRequestConfirm: jest.fn(),
+    onSkipMemoCancelConfirm: jest.fn(),
+    onSkipMemoConfirm: jest.fn(),
+    resetViewState: jest.fn(),
+  }),
+}));
 jest.mock("@ledgerhq/lumen-ui-react", () => ({
   ...jest.requireActual("@ledgerhq/lumen-ui-react"),
   DialogHeader: ({ title }: { title?: string }) => <div>{title}</div>,
@@ -31,8 +55,10 @@ const baseModel = {
   addressInputValue: "0x123456...12345678",
   descriptionText: "Base 1 · $5,969.83",
   handleBack: jest.fn(),
+  handleClose: jest.fn(),
   handleRecipientInputClick: jest.fn(),
   handleRecipientInputChange: jest.fn(),
+  handleRecipientPaste: jest.fn(),
   handleQrCodeClick: jest.fn(),
   handleScanPicked: jest.fn(),
   isScannerOpen: false,
@@ -114,7 +140,10 @@ describe("SendHeader", () => {
       currentStepConfig: { addressInput: true },
       navigation: { goToNextStep: jest.fn() },
     });
-    mockedUseSendHeaderModel.mockReturnValue({ ...baseModel, addressInputValue: "" });
+    mockedUseSendHeaderModel.mockReturnValue({
+      ...baseModel,
+      addressInputValue: "",
+    });
 
     render(<SendHeader />);
 

apps/ledger-live-desktop/src/mvvm/features/Send/context/SendFlowTrackingContext.tsx

@@ -0,0 +1,75 @@
+import React, {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import type {
+  RecipientInputMethod,
+  RecipientResultType,
+  RecipientType,
+} from "../utils/contactTracking";
+
+type SendFlowTrackingState = Readonly<{
+  inputMethod: RecipientInputMethod;
+  resultType: RecipientResultType | null;
+  recipientType: RecipientType | null;
+  savedContactDuringFlow: boolean;
+}>;
+
+type SendFlowTrackingContextValue = SendFlowTrackingState &
+  Readonly<{
+    setInputMethod: (inputMethod: RecipientInputMethod) => void;
+    setRecipientResolution: (resultType: RecipientResultType, recipientType: RecipientType) => void;
+    markContactSaved: () => void;
+  }>;
+
+const SendFlowTrackingContext = createContext<SendFlowTrackingContextValue | null>(null);
+
+export function SendFlowTrackingProvider({ children }: Readonly<{ children: ReactNode }>) {
+  const [state, setState] = useState<SendFlowTrackingState>({
+    inputMethod: "manual",
+    resultType: null,
+    recipientType: null,
+    savedContactDuringFlow: false,
+  });
+
+  const setInputMethod = useCallback((inputMethod: RecipientInputMethod) => {
+    setState(previous => ({ ...previous, inputMethod }));
+  }, []);
+
+  const setRecipientResolution = useCallback(
+    (resultType: RecipientResultType, recipientType: RecipientType) => {
+      setState(previous => ({ ...previous, resultType, recipientType }));
+    },
+    [],
+  );
+
+  const markContactSaved = useCallback(() => {
+    setState(previous => ({ ...previous, savedContactDuringFlow: true }));
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      ...state,
+      setInputMethod,
+      setRecipientResolution,
+      markContactSaved,
+    }),
+    [markContactSaved, setInputMethod, setRecipientResolution, state],
+  );
+
+  return (
+    <SendFlowTrackingContext.Provider value={value}>{children}</SendFlowTrackingContext.Provider>
+  );
+}
+
+export function useSendFlowTracking(): SendFlowTrackingContextValue {
+  const context = useContext(SendFlowTrackingContext);
+  if (!context) {
+    throw new Error("useSendFlowTracking must be used within a SendFlowTrackingProvider");
+  }
+  return context;
+}

apps/ledger-live-desktop/src/mvvm/features/Send/context/__tests__/SendFlowTrackingContext.test.tsx

@@ -0,0 +1,33 @@
+import React, { type ReactNode } from "react";
+import { act, renderHook } from "tests/testSetup";
+import { SendFlowTrackingProvider, useSendFlowTracking } from "../SendFlowTrackingContext";
+
+function wrapper({ children }: Readonly<{ children: ReactNode }>) {
+  return <SendFlowTrackingProvider>{children}</SendFlowTrackingProvider>;
+}
+
+describe("SendFlowTrackingContext", () => {
+  it("keeps recipient resolution metadata for the whole Send flow", () => {
+    const { result } = renderHook(() => useSendFlowTracking(), { wrapper });
+
+    expect(result.current).toMatchObject({
+      inputMethod: "manual",
+      resultType: null,
+      recipientType: null,
+      savedContactDuringFlow: false,
+    });
+
+    act(() => {
+      result.current.setInputMethod("paste");
+      result.current.setRecipientResolution("contact address match", "contact");
+      result.current.markContactSaved();
+    });
+
+    expect(result.current).toMatchObject({
+      inputMethod: "paste",
+      resultType: "contact address match",
+      recipientType: "contact",
+      savedContactDuringFlow: true,
+    });
+  });
+});