feat: add analytics to the hardware wallet flow (#1073)

* feat: add analytics to the hardware wallet flow

* fix: name analytics event properly

Author: greatertomi

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events.ts

@@ -26,11 +26,12 @@ export const postHogOnboardingActions: PostHogOnboardingActionsType = {
       PostHogAction.OnboardingRestoreEnterRecoveryPhrasePasteFromClipboardClick
   },
   hw: {
-    WALLET_NAME_NEXT_CLICK: PostHogAction.OnboardingHWNameNextClick,
-    CONNECT_HW_NEXT_CLICK: PostHogAction.OnboardingHWConnectNextClick,
-    SETUP_HW_WALLET_NEXT_CLICK: PostHogAction.OnboardingHWSelectAccountNextClick,
     SETUP_OPTION_CLICK: PostHogAction.OnboardingHWClick,
-    DONE_GO_TO_WALLET: PostHogAction.OnboardingHWDoneGoToWallet
+    CONNECT_HW_VIEW: PostHogAction.OnboardingHWConnectView,
+    HW_POPUP_CONNECT_CLICK: PostHogAction.OnboardingHWPopupConnectClick,
+    CONNECT_HW_TRY_AGAIN_CLICK: PostHogAction.OnboardingHWConnectTryAgainClick,
+    SETUP_HW_ACCOUNT_NO_CLICK: PostHogAction.OnboardingHWSetupWalletAccountNoClick,
+    ENTER_WALLET: PostHogAction.OnboardingHWEnterWalletClick
   },
   // eslint-disable-next-line camelcase
   forgot_password: {

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts

@@ -44,15 +44,15 @@ export type PostHogActionsKeys =
   | 'ANALYTICS_AGREE_CLICK'
   | 'LEARN_MORE_CLICK'
   | 'ANALYTICS_REJECT_CLICK'
-  | 'WALLET_NAME_NEXT_CLICK'
   | 'SAVE_RECOVERY_PHRASE_NEXT_CLICK'
   | 'ENTER_RECOVERY_PHRASE_NEXT_CLICK'
   | 'ENTER_WALLET'
   | 'GOT_IT_CLICK'
   | 'PIN_EXTENSION_CLICK'
-  | 'CONNECT_HW_NEXT_CLICK'
-  | 'SETUP_HW_WALLET_NEXT_CLICK'
-  | 'DONE_GO_TO_WALLET'
+  | 'CONNECT_HW_VIEW'
+  | 'HW_POPUP_CONNECT_CLICK'
+  | 'CONNECT_HW_TRY_AGAIN_CLICK'
+  | 'SETUP_HW_ACCOUNT_NO_CLICK'
   | 'WALLET_NAME_PASSWORD_NEXT_CLICK'
   | 'RECOVERY_PHRASE_INTRO_WATCH_VIDEO_CLICK'
   | 'RECOVERY_PHRASE_INTRO_VIDEO_GOTIT_CLICK'

apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/HardwareWalletFlow.tsx

@@ -11,6 +11,8 @@ import { walletRoutePaths } from '@routes/wallet-paths';
 import { StepConnect } from './StepConnect';
 import { WalletType } from '@cardano-sdk/web-extension';
 import { StepCreate, WalletData } from './StepCreate';
+import { useAnalyticsContext } from '@providers';
+import { postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker';
 
 export interface HardwareWalletFlowProps {
   onCancel: () => void;
@@ -58,6 +60,7 @@ export const HardwareWalletFlow = ({ onCancel }: HardwareWalletFlowProps): React
   const [connection, setConnection] = useState<Wallet.HardwareWalletConnection>();
   const [walletData, setWalletData] = useState<WalletData>();
   const { updateEnteredAtTime } = useTimeSpentOnPage();
+  const analytics = useAnalyticsContext();
 
   useEffect(() => {
     updateEnteredAtTime();
@@ -157,6 +160,9 @@ export const HardwareWalletFlow = ({ onCancel }: HardwareWalletFlowProps): React
                   accounts={TOTAL_ACCOUNTS}
                   onBack={() => setIsStartOverDialogVisible(true)}
                   onSubmit={onAccountAndNameSubmit}
+                  onSelectedAccountChange={() => {
+                    void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.SETUP_HW_ACCOUNT_NO_CLICK);
+                  }}
                 />
               </Route>
               <Route path={route(FlowStep.Create)}>

apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepConnect.tsx

@@ -6,6 +6,8 @@ import { TranslationKey } from '@lib/translations/types';
 import { TFunction } from 'i18next';
 import React, { useCallback, useEffect, useState, VFC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAnalyticsContext } from '@providers';
+import { postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker';
 
 export const isTrezorHWSupported = (): boolean => process.env.USE_TREZOR_HW === 'true';
 
@@ -92,14 +94,16 @@ export const StepConnect: VFC<StepConnectProps> = ({ onBack, onConnected, onUsbD
   const [discoveryState, setDiscoveryState] = useState<DiscoveryState>(DiscoveryState.Requested);
   const [connectionError, setConnectionError] = useState<ConnectionError | null>(null);
   const { connectHardwareWalletRevamped } = useWalletManager();
+  const analytics = useAnalyticsContext();
 
   const translations = makeTranslations({ connectionError, t });
   const connect = useConnectHardwareWalletWithTimeout(connectHardwareWalletRevamped);
 
   const onRetry = useCallback(() => {
     setDiscoveryState(DiscoveryState.Requested);
     setConnectionError(null);
-  }, []);
+    void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.CONNECT_HW_TRY_AGAIN_CLICK);
+  }, [analytics]);
 
   useEffect(() => {
     (async () => {
@@ -108,10 +112,12 @@ export const StepConnect: VFC<StepConnectProps> = ({ onBack, onConnected, onUsbD
       setDiscoveryState(DiscoveryState.Running);
       let connectionResult: Wallet.HardwareWalletConnection;
       try {
+        void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.CONNECT_HW_VIEW);
         const usbDevice = await requestHardwareWalletConnection();
         onUsbDeviceChange(usbDevice);
         connectionResult = await connect(usbDevice);
         onConnected(connectionResult);
+        void analytics.sendEventToPostHog(postHogOnboardingActions.hw?.HW_POPUP_CONNECT_CLICK);
         setDiscoveryState(DiscoveryState.Idle);
       } catch (error) {
         setDiscoveryState(DiscoveryState.Idle);
@@ -125,7 +131,7 @@ export const StepConnect: VFC<StepConnectProps> = ({ onBack, onConnected, onUsbD
         setConnectionError(parseConnectionError(error));
       }
     })();
-  }, [connect, discoveryState, onUsbDeviceChange, onConnected]);
+  }, [connect, discoveryState, onUsbDeviceChange, onConnected, analytics]);
 
   return (
     <WalletSetupConnectHardwareWalletStepRevamp

apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow/StepCreate.tsx

@@ -49,8 +49,6 @@ export const StepCreate: VFC<StepCreateProps> = ({ connection, onError, walletDa
       if (status !== CreationState.Idle) return;
       setStatus(CreationState.Working);
 
-      void analytics.sendEventToPostHog(postHogOnboardingActions.hw.SETUP_HW_WALLET_NEXT_CLICK);
-
       let cardanoWallet: Wallet.CardanoWallet;
       try {
         cardanoWallet = await createHardwareWalletRevamped({
@@ -64,7 +62,7 @@ export const StepCreate: VFC<StepCreateProps> = ({ connection, onError, walletDa
       }
 
       const deviceSpec = await Wallet.getDeviceSpec(connection);
-      await analytics.sendEventToPostHog(postHogOnboardingActions.hw.DONE_GO_TO_WALLET, {
+      void analytics.sendEventToPostHog(postHogOnboardingActions.hw.ENTER_WALLET, {
         /* eslint-disable camelcase */
         $set_once: {
           initial_hardware_wallet_model: deviceSpec.model,

packages/common/src/analytics/types.ts

@@ -7,14 +7,12 @@ export enum PostHogAction {
   OnboardingMainViewPinExtensionClick = 'wallet | onboarding | lace main view | pin the wallet extension | click',
   OnboardingMainViewMultiAddressModalGotItClick = 'wallet | onboarding | lace main view | multi-address modal | got it | click',
   // Hardware wallet connect
-  OnboardingHWAnalyticsAgreeClick = 'onboarding | hardware wallet | analytics | agree | click',
-  OnboardingHWAnalyticsSkipClick = 'onboarding | hardware wallet | analytics | skip | click',
-  OnboardingHWClick = 'onboarding | hardware wallet | connect | click',
-  OnboardinHWLaceTermsOfUseNextClick = 'onboarding | hardware wallet | lace terms of use | next | click',
-  OnboardingHWConnectNextClick = 'onboarding | hardware wallet | connect hw | next | click',
-  OnboardingHWSelectAccountNextClick = 'onboarding | hardware wallet | select hw account | next | click',
-  OnboardingHWNameNextClick = 'onboarding | hardware wallet | name hw wallet | next | click',
-  OnboardingHWDoneGoToWallet = 'onboarding | hardware wallet | all done | go to my wallet | click',
+  OnboardingHWClick = 'onboarding | hardware wallet revamp | connect | click',
+  OnboardingHWConnectView = 'onboarding | hardware wallet revamp | connect your device | view',
+  OnboardingHWPopupConnectClick = 'onboarding | hardware wallet revamp | native browser pop-up with HWs | connect | click',
+  OnboardingHWConnectTryAgainClick = 'onboarding | hardware wallet revamp | connect your device | try again | click',
+  OnboardingHWSetupWalletAccountNoClick = "onboarding | hardware wallet revamp | let's set up your wallet | Account No | click",
+  OnboardingHWEnterWalletClick = "onboarding | hardware wallet revamp | let's set up your wallet | enter wallet | click",
   // Restore wallet
   OnboardingRestoreClick = 'onboarding | restore wallet revamp | restore | click',
   OnboardingRestoreEnterRecoveryPhraseNextClick = 'onboarding | restore wallet revamp |  enter your recovery phrase  | next | click',

packages/core/src/ui/components/WalletSetupRevamp/WalletSetupSelectAccountsStepRevamp.tsx

@@ -16,13 +16,15 @@ export interface WalletSetupSelectAccountsStepRevampProps {
   onBack: () => void;
   onSubmit: (accountIndex: number, name: string) => void;
   isNextLoading?: boolean;
+  onSelectedAccountChange?: () => void;
 }
 
 export const WalletSetupSelectAccountsStepRevamp = ({
   accounts,
   onBack,
   onSubmit,
-  isNextLoading
+  isNextLoading,
+  onSelectedAccountChange
 }: WalletSetupSelectAccountsStepRevampProps): React.ReactElement => {
   const [selectedAccount, setSelectedAccount] = useState<string | undefined>('0');
   const [walletName, setWalletName] = useState(INITIAL_WALLET_NAME);
@@ -72,7 +74,10 @@ export const WalletSetupSelectAccountsStepRevamp = ({
           <SelectGroup
             placeholder="Accounts"
             options={options}
-            onValueChange={(value) => setSelectedAccount(value)}
+            onValueChange={(value) => {
+              setSelectedAccount(value);
+              onSelectedAccountChange?.();
+            }}
             showArrow
             withOutline
             selectedValue={selectedAccount}