feat(suite): add anayltics to the device onboarding (seed backup types)

trezor · May 16, 2024 · 32d7f62 · 32d7f62
1 parent 629d6f8
commit 32d7f62
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 4 deletions.
diff --git a/packages/analytics/src/utils.ts b/packages/analytics/src/utils.ts
@@ -80,6 +80,8 @@ interface ReportEventProps {
 }
 
 export const reportEvent = async ({ type, url, options, retry }: ReportEventProps) => {
+    console.log({ type, url, options, retry });
+
     try {
         const response = await fetch(url, options);
 

diff --git a/packages/suite-analytics/src/constants.ts b/packages/suite-analytics/src/constants.ts
@@ -87,4 +87,7 @@ export enum EventType {
     GetDesktopApp = 'promo/desktop',
     GetMobileApp = 'promo/mobile',
     T2B1DashboardPromo = 'promo/t2b1-dashboard',
+
+    OnboardingSelectBackupType = 'onboarding/select-backup-type',
+    OnboardingSkipStep = 'onboarding/skip-step',
 }
diff --git a/packages/suite-analytics/src/types/events.ts b/packages/suite-analytics/src/types/events.ts
@@ -417,4 +417,19 @@ export type SuiteAnalyticsEvent =
           payload: {
               action: 'shop' | 'close';
           };
+      }
+    | {
+          type: EventType.OnboardingSelectBackupType;
+          payload: {
+              finalSelectedOption: 'shamir-default' | 'shamir-advance' | '12-words' | '24-words';
+              wasSelectTypeOpened: boolean;
+              device: string;
+              unitPackaging: number;
+          };
+      }
+    | {
+          type: EventType.OnboardingSkipStep;
+          payload: {
+              skippedStep: string;
+          };
       };
diff --git a/packages/suite/src/components/onboarding/SkipStepConfirmation.tsx b/packages/suite/src/components/onboarding/SkipStepConfirmation.tsx
@@ -6,6 +6,7 @@ import { Button } from '@trezor/components';
 import { Translation, Modal } from 'src/components/suite';
 import { useOnboarding } from 'src/hooks/suite';
 import { typography } from '@trezor/theme';
+import { EventType, analytics } from '@trezor/suite-analytics';
 
 const Wrapper = styled.div`
     display: flex;
@@ -46,6 +47,17 @@ export const SkipStepConfirmation = ({ onCancel }: SkipStepConfirmationProps) =>
             throw new Error(`Unexpected step to skip: ${activeStepId}`);
     }
 
+    const handleSkipStepConfirm = () => {
+        analytics.report({
+            type: EventType.OnboardingSkipStep,
+            payload: {
+                skippedStep: activeStepId,
+            },
+        });
+
+        goToNextStep(nextStep);
+    };
+
     return (
         <StyledModal
             isCancelable
@@ -59,7 +71,7 @@ export const SkipStepConfirmation = ({ onCancel }: SkipStepConfirmationProps) =>
                     <Button
                         variant="tertiary"
                         data-test="@onboarding/skip-button-confirm"
-                        onClick={() => goToNextStep(nextStep)}
+                        onClick={handleSkipStepConfirm}
                     >
                         {text}
                     </Button>

diff --git a/packages/suite/src/views/onboarding/steps/ResetDevice.tsx b/packages/suite/src/views/onboarding/steps/ResetDevice.tsx
@@ -11,6 +11,7 @@ import { Button, Divider, Text } from '@trezor/components';
 import { SelectBackupType, getDefaultBackupType, isShamirBackupType } from './SelectBackupType';
 import { DeviceModelInternal } from '@trezor/connect';
 import { BackupType } from '../../../reducers/onboarding/onboardingReducer';
+import { analytics, EventType } from '@trezor/suite-analytics';
 
 const SelectWrapper = styled.div`
     width: 100%;
@@ -44,6 +45,7 @@ export const ResetDeviceStep = () => {
 
     const [submitted, setSubmitted] = useState(false);
     const [backupType, setBackupType] = useState<BackupType>(deviceDefaultBackupType);
+    const [wasSelectTypeOpened, setWasSelectTypeOpened] = useState<boolean>(false);
     const { goToPreviousStep, goToNextStep, updateAnalytics, updateBackupType } = useOnboarding();
 
     const dispatch = useDispatch();
@@ -72,6 +74,16 @@ export const ResetDeviceStep = () => {
 
     const handleSubmit = useCallback(
         async (type: BackupType) => {
+            analytics.report({
+                type: EventType.OnboardingSelectBackupType,
+                payload: {
+                    wasSelectTypeOpened,
+                    finalSelectedOption: type,
+                    device: deviceModel ?? '',
+                    unitPackaging,
+                },
+            });
+
             switch (type) {
                 case 'shamir-default':
                     await onResetDevice({ backup_type: 1 });
@@ -90,7 +102,14 @@ export const ResetDeviceStep = () => {
             updateBackupType(type);
             updateAnalytics({ recoveryType: undefined, seedType: type });
         },
-        [updateAnalytics, onResetDevice, updateBackupType],
+        [
+            wasSelectTypeOpened,
+            deviceModel,
+            unitPackaging,
+            updateBackupType,
+            updateAnalytics,
+            onResetDevice,
+        ],
     );
 
     useEffect(() => {
@@ -150,7 +169,8 @@ export const ResetDeviceStep = () => {
                             <>
                                 <SelectBackupType
                                     selected={backupType}
-                                    onSelect={setBackupType}
+                                    onOpen={() => setWasSelectTypeOpened(true)}
+                                    onSelect={value => setBackupType(value)}
                                     isDisabled={isDeviceLocked}
                                     data-test="@onboarding/select-seed-type-open-dialog"
                                 />

diff --git a/packages/suite/src/views/onboarding/steps/SelectBackupType.tsx b/packages/suite/src/views/onboarding/steps/SelectBackupType.tsx
@@ -401,12 +401,14 @@ type SelectBackupTypeProps = {
     isDisabled: boolean;
     selected: BackupType;
     onSelect: (value: BackupType) => void;
+    onOpen: () => void;
     'data-test'?: string;
 };
 
 export const SelectBackupType = ({
     selected,
     onSelect,
+    onOpen,
     isDisabled,
     'data-test': dataTest,
 }: SelectBackupTypeProps) => {
@@ -450,11 +452,16 @@ export const SelectBackupType = ({
     const isShamirDefault = isShamirBackupType(defaultBackupType);
     const isShamirSelected = isShamirBackupType(selected);
 
+    const handleOpen = () => {
+        setIsOpen(true);
+        onOpen();
+    };
+
     return (
         <Wrapper>
             <SelectWrapper $elevation={elevation} ref={refs.setReference} {...getReferenceProps()}>
                 <ElevationUp>
-                    <SelectedOption isDisabled={isDisabled} onClick={() => setIsOpen(true)}>
+                    <SelectedOption isDisabled={isDisabled} onClick={handleOpen}>
                         <OptionText data-test={dataTest}>
                             <Text variant="tertiary" typographyStyle="hint">
                                 <Translation id="TR_ONBOARDING_BACKUP_TYPE" />