diff --git a/src/analytics/event.ts b/src/analytics/event.ts index 07be2def47..6333dff68a 100644 --- a/src/analytics/event.ts +++ b/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 }; }; diff --git a/src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx b/src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx index dab6367e9c..2fc13bf223 100644 --- a/src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx +++ b/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([]); const setWalletBackedUp = useWalletBackupsStore.use.setWalletBackedUp(); + const walletBackups = useWalletBackupsStore.use.walletBackups(); + const seedBoxBorderColor = useMemo(() => { if (validated) return globalColors.green90; if (incorrect) return globalColors.red90; @@ -186,9 +192,19 @@ 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 { @@ -196,7 +212,15 @@ export function SeedVerifyQuiz({ 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} > diff --git a/src/entries/popup/pages/seedVerify/index.tsx b/src/entries/popup/pages/seedVerify/index.tsx index 201a9cd76a..8f305c9fb6 100644 --- a/src/entries/popup/pages/seedVerify/index.tsx +++ b/src/entries/popup/pages/seedVerify/index.tsx @@ -21,6 +21,7 @@ export function SeedVerify() { address={currentAddress} onQuizValidated={goToCreatePassword} handleSkip={goToCreatePassword} + entryPoint="onboarding" /> ); diff --git a/src/entries/popup/pages/settings/walletsAndKeys/recoveryPhrase/recoveryPhraseVerify.tsx b/src/entries/popup/pages/settings/walletsAndKeys/recoveryPhrase/recoveryPhraseVerify.tsx index 3f2a95a15f..0ab168c9e3 100644 --- a/src/entries/popup/pages/settings/walletsAndKeys/recoveryPhrase/recoveryPhraseVerify.tsx +++ b/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" /> );