chore(lld): swapped string to enum for tracking locations

Author: fAnselmi-Ledger

.changeset/wise-frogs-kiss.md

@@ -2,4 +2,4 @@
 "ledger-live-desktop": minor
 ---
 
-Add Tracking in the ledger sync flow
+Add Tracking in the ledger sync flow and polish tracking implementation

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackAddAccountModal.test.ts

@@ -3,7 +3,7 @@ import { UseTrackAddAccountModal, useTrackAddAccountModal } from "./useTrackAddA
 import { track } from "../segment";
 import { CantOpenDevice, UserRefusedOnDevice, LockedDeviceError } from "@ledgerhq/errors";
 import type { Device } from "@ledgerhq/types-devices";
-import { CONNECTION_TYPES } from "./variables";
+import { CONNECTION_TYPES, HOOKS_TRACKING_LOCATIONS } from "./variables";
 
 jest.mock("../segment", () => ({
   track: jest.fn(),
@@ -16,7 +16,7 @@ describe("useTrackAddAccountModal", () => {
   };
 
   const defaultArgs: UseTrackAddAccountModal = {
-    location: "Add account modal",
+    location: HOOKS_TRACKING_LOCATIONS.addAccountModal,
     requestOpenApp: "Bitcoin",
     device: deviceMock,
     error: null,
@@ -43,7 +43,7 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.BLE,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );
@@ -70,7 +70,7 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.BLE,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );
@@ -90,7 +90,7 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.BLE,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );
@@ -110,7 +110,7 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.BLE,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );
@@ -130,7 +130,7 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.BLE,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );
@@ -157,13 +157,13 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );
   });
 
-  it('should not track if location is not "Add account modal"', () => {
+  it("should not track if location is not HOOKS_TRACKING_LOCATIONS.addAccountModal", () => {
     renderHook(() =>
       useTrackAddAccountModal({
         ...defaultArgs,
@@ -191,7 +191,7 @@ describe("useTrackAddAccountModal", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Add account modal",
+        page: HOOKS_TRACKING_LOCATIONS.addAccountModal,
       }),
       true,
     );

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackAddAccountModal.ts

@@ -2,11 +2,11 @@ import { useRef, useEffect } from "react";
 import { track } from "../segment";
 import { Device } from "@ledgerhq/types-devices";
 import { UserRefusedOnDevice, LockedDeviceError, CantOpenDevice } from "@ledgerhq/errors";
-import { CONNECTION_TYPES } from "./variables";
+import { CONNECTION_TYPES, HOOKS_TRACKING_LOCATIONS } from "./variables";
 import { LedgerError } from "~/renderer/components/DeviceAction";
 
 export type UseTrackAddAccountModal = {
-  location: string | undefined;
+  location: HOOKS_TRACKING_LOCATIONS.addAccountModal | undefined;
   device: Device;
   error:
     | (LedgerError & {
@@ -31,7 +31,7 @@ function getConnectionType(d?: Device): string | undefined {
  * a custom hook to track events in the Add Account Modal.
  * tracks user interactions with the Add Account Modal based on state changes and errors.
  *
- * @param location - current location in the app (expected "Add account modal").
+ * @param location - current location in the app (expected "Add account modal" from HOOKS_TRACKING_LOCATIONS enum).
  * @param device - the connected device information.
  * @param error - current error state.
  * @param isTrackingEnabled - flag indicating if tracking is enabled.
@@ -52,7 +52,7 @@ export const useTrackAddAccountModal = ({
   const previousDevice = useRef<Device | null | undefined>(undefined);
 
   useEffect(() => {
-    if (location !== "Add account modal") return;
+    if (location !== HOOKS_TRACKING_LOCATIONS.addAccountModal) return;
 
     const defaultPayload = {
       deviceType: device?.modelId || previousDevice.current?.modelId || undefined,

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackManagerSectionEvents.test.ts

@@ -9,7 +9,7 @@ import {
   UserRefusedDeviceNameChange,
   UserRefusedFirmwareUpdate,
 } from "@ledgerhq/errors";
-import { CONNECTION_TYPES } from "./variables";
+import { CONNECTION_TYPES, HOOKS_TRACKING_LOCATIONS } from "./variables";
 
 jest.mock("../segment", () => ({
   track: jest.fn(),
@@ -23,7 +23,7 @@ describe("useTrackManagerSectionEvents", () => {
   };
 
   const defaultArgs: UseTrackManagerSectionEvents = {
-    location: "Manager Dashboard",
+    location: HOOKS_TRACKING_LOCATIONS.managerDashboard,
     device: deviceMock,
     allowManagerRequested: null,
     clsImageRemoved: null,
@@ -51,7 +51,7 @@ describe("useTrackManagerSectionEvents", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Manager Dashboard",
+        page: HOOKS_TRACKING_LOCATIONS.managerDashboard,
       }),
       true,
     );
@@ -75,7 +75,7 @@ describe("useTrackManagerSectionEvents", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Manager Dashboard",
+        page: HOOKS_TRACKING_LOCATIONS.managerDashboard,
       }),
       true,
     );
@@ -94,7 +94,7 @@ describe("useTrackManagerSectionEvents", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Manager Dashboard",
+        page: HOOKS_TRACKING_LOCATIONS.managerDashboard,
       }),
       true,
     );
@@ -113,7 +113,7 @@ describe("useTrackManagerSectionEvents", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Manager Dashboard",
+        page: HOOKS_TRACKING_LOCATIONS.managerDashboard,
       }),
       true,
     );
@@ -132,7 +132,7 @@ describe("useTrackManagerSectionEvents", () => {
         deviceType: "europa",
         connectionType: CONNECTION_TYPES.USB,
         platform: "LLD",
-        page: "Manager Dashboard",
+        page: HOOKS_TRACKING_LOCATIONS.managerDashboard,
       }),
       true,
     );

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackManagerSectionEvents.ts

@@ -6,11 +6,11 @@ import {
 } from "@ledgerhq/errors";
 import { track } from "../segment";
 import { Device } from "@ledgerhq/types-devices";
-import { CONNECTION_TYPES } from "./variables";
+import { CONNECTION_TYPES, HOOKS_TRACKING_LOCATIONS } from "./variables";
 import { LedgerError } from "~/renderer/components/DeviceAction";
 
 export type UseTrackManagerSectionEvents = {
-  location: string | undefined;
+  location: HOOKS_TRACKING_LOCATIONS.managerDashboard | undefined;
   device: Device;
   allowManagerRequested: boolean | null | undefined;
   error:
@@ -28,7 +28,7 @@ export type UseTrackManagerSectionEvents = {
  * a custom hook to track events in the Manager section.
  * tracks user interactions with the Manager dashboard based on state changes and errors.
  *
- * @param location - current location in the app (expected "Manager").
+ * @param location - current location in the app (expected "Manager Dashboard" from HOOKS_TRACKING_LOCATIONS enum).
  * @param device - the connected device information.
  * @param allowManagerRequested - flag indicating if the user has allowed the Manager app.
  * @param clsImageRemoved - flag indicating if the user has removed the custom lock screen image.
@@ -47,7 +47,7 @@ export const useTrackManagerSectionEvents = ({
   const previousAllowManagerRequested = useRef<boolean | null | undefined>(undefined);
 
   useEffect(() => {
-    if (location !== "Manager Dashboard") return;
+    if (location !== HOOKS_TRACKING_LOCATIONS.managerDashboard) return;
 
     const defaultPayload = {
       deviceType: device?.modelId,

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackReceiveFlow.test.ts

@@ -2,6 +2,7 @@ import { renderHook } from "tests/testUtils";
 import { useTrackReceiveFlow, UseTrackReceiveFlow } from "./useTrackReceiveFlow";
 import { track } from "../segment";
 import { UserRefusedOnDevice } from "@ledgerhq/errors";
+import { HOOKS_TRACKING_LOCATIONS } from "./variables";
 
 jest.mock("../segment", () => ({
   track: jest.fn(),
@@ -15,7 +16,7 @@ describe("useTrackReceiveFlow", () => {
   };
 
   const defaultArgs: UseTrackReceiveFlow = {
-    location: "Receive Modal",
+    location: HOOKS_TRACKING_LOCATIONS.receiveModal,
     device: deviceMock,
     verifyAddressError: null,
     error: null,

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackReceiveFlow.ts

@@ -3,9 +3,10 @@ import { track } from "../segment";
 import { Device } from "@ledgerhq/types-devices";
 import { UserRefusedOnDevice } from "@ledgerhq/errors";
 import { LedgerError } from "~/renderer/components/DeviceAction";
+import { HOOKS_TRACKING_LOCATIONS } from "./variables";
 
 export type UseTrackReceiveFlow = {
-  location: string | undefined;
+  location: HOOKS_TRACKING_LOCATIONS.receiveModal | undefined;
   device: Device;
   verifyAddressError?:
     | {
@@ -33,7 +34,7 @@ export type UseTrackReceiveFlow = {
  * a custom hook to track events in the Receive modal.
  * tracks user interactions with the Receive modal based on state changes and errors.
  *
- * @param location - current location in the app (expected "Receive Modal").
+ * @param location - current location in the app (expected "Receive Modal" from HOOKS_TRACKING_LOCATIONS enum).
  * @param device - the connected device information.
  * @param verifyAddressError - optional - error from verifying address.
  * @param error - optional - current error state.
@@ -49,7 +50,7 @@ export const useTrackReceiveFlow = ({
   isTrackingEnabled,
 }: UseTrackReceiveFlow) => {
   useEffect(() => {
-    if (location !== "Receive Modal") return;
+    if (location !== HOOKS_TRACKING_LOCATIONS.receiveModal) return;
 
     const defaultPayload = {
       deviceType: device?.modelId,

apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackSyncFlow.ts

@@ -8,7 +8,7 @@ import { HOOKS_TRACKING_LOCATIONS } from "./variables";
 type LedgerError = InstanceType<LedgerErrorConstructor<{ [key: string]: unknown }>>;
 
 export type UseTrackSyncFlow = {
-  location: string | undefined;
+  location: HOOKS_TRACKING_LOCATIONS.ledgerSync | undefined;
   device: Device;
   allowManagerRequested: boolean | null | undefined;
   error?:

apps/ledger-live-desktop/src/renderer/analytics/hooks/variables.ts

@@ -5,4 +5,7 @@ export enum CONNECTION_TYPES {
 
 export enum HOOKS_TRACKING_LOCATIONS {
   ledgerSync = "Ledger Sync",
+  addAccountModal = "Add account modal",
+  managerDashboard = "Manager Dashboard",
+  receiveModal = "Receive Modal",
 }

apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.tsx

@@ -84,6 +84,7 @@ import { useTrackManagerSectionEvents } from "~/renderer/analytics/hooks/useTrac
 import { useTrackReceiveFlow } from "~/renderer/analytics/hooks/useTrackReceiveFlow";
 import { useTrackAddAccountModal } from "~/renderer/analytics/hooks/useTrackAddAccountModal";
 import { useTrackSyncFlow } from "~/renderer/analytics/hooks/useTrackSyncFlow";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 
 export type LedgerError = InstanceType<LedgerErrorConstructor<{ [key: string]: unknown }>>;
 
@@ -160,7 +161,7 @@ type InnerProps<P> = {
   analyticsPropertyFlow?: string;
   overridesPreferredDeviceModel?: DeviceModelId;
   inlineRetry?: boolean; // Set to false if the retry mechanism is handled externally.
-  location?: string;
+  location?: HOOKS_TRACKING_LOCATIONS;
 };
 
 type Props<H extends States, P> = InnerProps<P> & {

apps/ledger-live-desktop/src/renderer/components/Stepper/index.tsx

@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import { trackingEnabledSelector } from "~/renderer/reducers/settings";
 import { getCurrentDevice } from "~/renderer/reducers/devices";
 import { LedgerError } from "../DeviceAction";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 
 export type BasicStepProps = {
   t: TFunction;
@@ -72,7 +73,7 @@ const Stepper = <T, StepProps>({
     [onStepChange, steps],
   );
   useTrackAddAccountModal({
-    location: "Add account modal",
+    location: HOOKS_TRACKING_LOCATIONS.addAccountModal,
     device: useSelector(getCurrentDevice),
     error: err,
     isTrackingEnabled: useSelector(trackingEnabledSelector),

apps/ledger-live-desktop/src/renderer/modals/AddAccounts/steps/StepConnectDevice.tsx

@@ -8,6 +8,7 @@ import { StepProps } from "..";
 import { getEnv } from "@ledgerhq/live-env";
 import { mockedEventEmitter } from "~/renderer/components/debug/DebugMock";
 import connectApp from "@ledgerhq/live-common/hw/connectApp";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 const action = createAction(getEnv("MOCK") ? mockedEventEmitter : connectApp);
 const StepConnectDevice = ({ currency, transitionTo, flow }: StepProps) => {
   invariant(currency, "No crypto asset given");
@@ -40,7 +41,7 @@ const StepConnectDevice = ({ currency, transitionTo, flow }: StepProps) => {
           transitionTo("import");
         }}
         analyticsPropertyFlow={flow}
-        location="Add account modal"
+        location={HOOKS_TRACKING_LOCATIONS.addAccountModal}
       />
     </>
   );

apps/ledger-live-desktop/src/renderer/modals/Receive/index.tsx

@@ -8,6 +8,7 @@ import { openModal, closeModal } from "~/renderer/actions/modals";
 import { useTrackReceiveFlow } from "~/renderer/analytics/hooks/useTrackReceiveFlow";
 import { trackingEnabledSelector } from "~/renderer/reducers/settings";
 import { getCurrentDevice } from "~/renderer/reducers/devices";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 
 type State = {
   stepId: StepId;
@@ -28,7 +29,7 @@ const ReceiveModal = () => {
   const device = useSelector(getCurrentDevice);
 
   useTrackReceiveFlow({
-    location: "Receive Modal",
+    location: HOOKS_TRACKING_LOCATIONS.receiveModal,
     device,
     verifyAddressError,
     isTrackingEnabled: useSelector(trackingEnabledSelector),

apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepConnectDevice.tsx

@@ -10,6 +10,7 @@ import connectApp from "@ledgerhq/live-common/hw/connectApp";
 import { StepProps } from "../Body";
 import { mockedEventEmitter } from "~/renderer/components/debug/DebugMock";
 import { getEnv } from "@ledgerhq/live-env";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 const action = createAction(getEnv("MOCK") ? mockedEventEmitter : connectApp);
 export default function StepConnectDevice({
   account,
@@ -34,7 +35,7 @@ export default function StepConnectDevice({
         request={request}
         onResult={() => transitionTo("receive")}
         analyticsPropertyFlow="receive"
-        location="Receive Modal"
+        location={HOOKS_TRACKING_LOCATIONS.receiveModal}
       />
     </>
   );

apps/ledger-live-desktop/src/renderer/screens/manager/DeviceDashboard/DeviceInformationSummary/EditDeviceName.tsx

@@ -13,6 +13,7 @@ import getDeviceNameMaxLength from "@ledgerhq/live-common/hw/getDeviceNameMaxLen
 import renameDevice from "@ledgerhq/live-common/hw/renameDevice";
 import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
 import { DeviceInfo } from "@ledgerhq/types-live";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 
 const action = createAction(renameDevice);
 
@@ -144,7 +145,7 @@ const EditDeviceName: React.FC<Props> = ({
               inlineRetry={false}
               onResult={onSuccess}
               onError={(error: Error) => setActionError(error)}
-              location="Manager Dashboard"
+              location={HOOKS_TRACKING_LOCATIONS.managerDashboard}
             />
           </Flex>
         ) : (