Analytics tracking for seedVerifyQuiz (#1751)

Co-authored-by: Daniel Sinclair <[email protected]>

src/analytics/event.ts

@@ -221,6 +221,11 @@ export const event = {
    * Called when the user toggles Degen Mode in the Swap/Bridge flow.
    */
   toggledDegenMode: 'degenMode.toggled',
+  /**
+   * Called when user completes or skips the wallet backup flow.
+   * potential outcomes are 'succeeded,' 'failed,' or 'skipped.'
+   */
+  walletBackupQuizSubmitted: 'wallet.backup_quiz.submitted',
   /**
    * Called when the core wallet Tokens & Activity
    * screen is viewed or opened in the extension popup.
@@ -847,6 +852,22 @@ export type EventProperties = {
      */
     hardwareWallet: boolean;
   };
+  [event.walletBackupQuizSubmitted]: {
+    /**
+     * Completed: if the user successfully completes the wallet backup quiz.
+     * Failed: if the user fails to complete the backup quiz.
+     * Skipped: if the user opts to skip the backup quiz completely.
+     */
+    status: 'completed' | 'failed' | 'skipped';
+    /**
+     * The entry point of the wallet backup quiz.
+     */
+    entryPoint: 'onboarding' | 'settings';
+    /**
+     * Index of the wallet seed to track how many backups are completed.
+     */
+    index: number;
+  };
   [event.walletViewed]: undefined;
   [event.toggledDegenMode]: { enabled: boolean };
 };

src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Address } from 'viem';
 
+import { analytics } from '~/analytics';
+import { event } from '~/analytics/event';
 import { i18n } from '~/core/languages';
 import { useWalletBackupsStore } from '~/core/state/walletBackups';
 import {
@@ -138,10 +140,12 @@ export function SeedVerifyQuiz({
   address,
   onQuizValidated,
   handleSkip,
+  entryPoint,
 }: {
   address: Address;
   onQuizValidated: () => void;
   handleSkip: () => void;
+  entryPoint: 'onboarding' | 'settings';
 }) {
   const [seed, setSeed] = useState('');
   const [validated, setValidated] = useState(false);
@@ -153,6 +157,8 @@ export function SeedVerifyQuiz({
   const [selectedWords, setSelectedWords] = useState<SeedWord[]>([]);
 
   const setWalletBackedUp = useWalletBackupsStore.use.setWalletBackedUp();
+  const walletBackups = useWalletBackupsStore.use.walletBackups();
+
   const seedBoxBorderColor = useMemo(() => {
     if (validated) return globalColors.green90;
     if (incorrect) return globalColors.red90;
@@ -186,17 +192,35 @@ export function SeedVerifyQuiz({
               setWalletBackedUp({ address });
               onQuizValidated();
             }, 1200);
+            analytics.track(event.walletBackupQuizSubmitted, {
+              status: 'completed',
+              entryPoint,
+              index: Object.keys(walletBackups).indexOf(address),
+            });
           } else {
             playSound('IncorrectSeedQuiz');
             setIncorrect(true);
+            analytics.track(event.walletBackupQuizSubmitted, {
+              status: 'failed',
+              entryPoint,
+              index: Object.keys(walletBackups).indexOf(address),
+            });
           }
         }, 100);
       } else {
         setValidated(false);
         setIncorrect(false);
       }
     },
-    [address, onQuizValidated, seed, selectedWords, setWalletBackedUp],
+    [
+      address,
+      entryPoint,
+      onQuizValidated,
+      seed,
+      selectedWords,
+      setWalletBackedUp,
+      walletBackups,
+    ],
   );
 
   useEffect(() => {
@@ -321,7 +345,14 @@ export function SeedVerifyQuiz({
           height="44px"
           variant="transparent"
           width="full"
-          onClick={handleSkip}
+          onClick={() => {
+            handleSkip();
+            analytics.track(event.walletBackupQuizSubmitted, {
+              status: 'skipped',
+              entryPoint,
+              index: Object.keys(walletBackups).indexOf(address),
+            });
+          }}
           testId="skip-this-button"
           tabIndex={0}
         >

src/entries/popup/pages/seedVerify/index.tsx

@@ -21,6 +21,7 @@ export function SeedVerify() {
         address={currentAddress}
         onQuizValidated={goToCreatePassword}
         handleSkip={goToCreatePassword}
+        entryPoint="onboarding"
       />
     </FullScreenContainer>
   );

src/entries/popup/pages/settings/walletsAndKeys/recoveryPhrase/recoveryPhraseVerify.tsx

@@ -34,6 +34,7 @@ export function RecoveryPhraseVerify() {
                 ROUTES.SETTINGS__PRIVACY__WALLETS_AND_KEYS__WALLET_DETAILS,
               )
         }
+        entryPoint="settings"
       />
     </Box>
   );