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

LedgerHQ · Feb 7, 2025 · e1f5b99 · e1f5b99
1 parent a1a7f2d
commit e1f5b99
Show file tree

Hide file tree

Showing 15 changed files with 46 additions and 34 deletions.
diff --git a/.changeset/wise-frogs-kiss.md b/.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
diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackAddAccountModal.test.ts b/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,
     );

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackAddAccountModal.ts b/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackAddAccountModal.ts
@@ -2,7 +2,7 @@ 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 = {
@@ -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,

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackManagerSectionEvents.test.ts b/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,
     );

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackManagerSectionEvents.ts b/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackManagerSectionEvents.ts
@@ -6,7 +6,7 @@ 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 = {
@@ -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,

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackReceiveFlow.test.ts b/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,

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackReceiveFlow.ts b/apps/ledger-live-desktop/src/renderer/analytics/hooks/useTrackReceiveFlow.ts
@@ -3,6 +3,7 @@ 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;
@@ -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,

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/hooks/variables.ts b/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",
 }
diff --git a/apps/ledger-live-desktop/src/renderer/components/Stepper/index.tsx b/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),

diff --git a/apps/ledger-live-desktop/src/renderer/modals/AddAccounts/steps/StepConnectDevice.tsx b/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}
       />
     </>
   );

diff --git a/apps/ledger-live-desktop/src/renderer/modals/Receive/index.tsx b/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),

diff --git a/apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepConnectDevice.tsx b/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}
       />
     </>
   );

diff --git a/.../src/renderer/screens/manager/DeviceDashboard/DeviceInformationSummary/EditDeviceName.tsx b/.../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>
         ) : (

diff --git a/...c/renderer/screens/manager/DeviceDashboard/DeviceInformationSummary/RemoveCustomImage.tsx b/...c/renderer/screens/manager/DeviceDashboard/DeviceInformationSummary/RemoveCustomImage.tsx
@@ -9,6 +9,7 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { clearLastSeenCustomImage } from "~/renderer/actions/settings";
 import { ImageDoesNotExistOnDevice } from "@ledgerhq/live-common/errors";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 
 const action = createAction(removeImage);
 
@@ -101,7 +102,7 @@ const RemoveCustomImage: React.FC<Props> = ({ onClose, onRemoved }) => {
               action={action}
               onResult={onSuccess}
               onError={onError}
-              location="Manager Dashboard"
+              location={HOOKS_TRACKING_LOCATIONS.managerDashboard}
             />
           </Flex>
         ) : null}

diff --git a/apps/ledger-live-desktop/src/renderer/screens/manager/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/manager/index.tsx
@@ -15,6 +15,7 @@ import { useDispatch } from "react-redux";
 import { context } from "~/renderer/drawers/Provider";
 import { useDeviceSessionRefresherToggle } from "@ledgerhq/live-dmk";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { HOOKS_TRACKING_LOCATIONS } from "~/renderer/analytics/hooks/variables";
 
 const action = createAction(getEnv("MOCK") ? mockedEventEmitter : connectManager);
 const Manager = () => {
@@ -73,7 +74,7 @@ const Manager = () => {
           onResult={onResult}
           action={action}
           request={null}
-          location="Manager Dashboard"
+          location={HOOKS_TRACKING_LOCATIONS.managerDashboard}
         />
       ) : (
         <Disconnected onTryAgain={setHasReset} />