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

…s), add analytics to multi share backup
trezor · Jun 6, 2024 · e8e3271 · e8e3271
1 parent 403060f
commit e8e3271
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 15 deletions.
diff --git a/packages/suite-analytics/src/constants.ts b/packages/suite-analytics/src/constants.ts
@@ -87,4 +87,6 @@ export enum EventType {
     GetDesktopApp = 'promo/desktop',
     GetMobileApp = 'promo/mobile',
     T2B1DashboardPromo = 'promo/t2b1-dashboard',
+
+    SettingsMultiShareBackup = 'settings/device/multi-share-backup',
 }
diff --git a/packages/suite-analytics/src/types/definitions.ts b/packages/suite-analytics/src/types/definitions.ts
@@ -5,6 +5,7 @@ export type OnboardingAnalytics = {
     firmware: 'install' | 'update' | 'skip' | 'up-to-date';
     seed: 'create' | 'recovery' | 'recovery-in-progress';
     seedType: 'shamir-single' | 'shamir-advanced' | '12-words' | '24-words';
+    wasSelectTypeOpened: boolean;
     recoveryType: 'standard' | 'advanced';
     backup: 'create' | 'skip';
     pin: 'create' | 'skip';

diff --git a/packages/suite-analytics/src/types/events.ts b/packages/suite-analytics/src/types/events.ts
@@ -87,6 +87,7 @@ export type SuiteAnalyticsEvent =
           payload: Partial<Omit<OnboardingAnalytics, 'startTime'>> & {
               duration: number;
               device: string;
+              unitPackaging: number;
           };
       }
     | {
@@ -417,4 +418,10 @@ export type SuiteAnalyticsEvent =
           payload: {
               action: 'shop' | 'close';
           };
+      }
+    | {
+          type: EventType.SettingsMultiShareBackup;
+          payload: {
+              action: 'start' | 'done' | 'learn-more' | 'close-modal';
+          };
       };
diff --git a/packages/suite/src/components/onboarding/SkipStepConfirmation.tsx b/packages/suite/src/components/onboarding/SkipStepConfirmation.tsx
@@ -46,6 +46,10 @@ export const SkipStepConfirmation = ({ onCancel }: SkipStepConfirmationProps) =>
             throw new Error(`Unexpected step to skip: ${activeStepId}`);
     }
 
+    const handleSkipStepConfirm = () => {
+        goToNextStep(nextStep);
+    };
+
     return (
         <StyledModal
             isCancelable
@@ -59,7 +63,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/.../suite/modals/ReduxModal/UserContextModal/MultiShareBackupModal/MultiShareBackupModal.tsx b/.../suite/modals/ReduxModal/UserContextModal/MultiShareBackupModal/MultiShareBackupModal.tsx
@@ -18,10 +18,17 @@ import { MultiShareBackupStep5Done } from './MultiShareBackupStep5Done';
 import { isAdditionalShamirBackupInProgress } from '../../../../../../utils/device/isRecoveryInProgress';
 import { MultiShareBackupStep3VerifyOwnership } from './MultiShareBackupStep3VerifyOwnership';
 import { MultiShareBackupStep4BackupSeed } from './MultiShareBackupStep4BackupSeed';
+import { EventType, analytics } from '@trezor/suite-analytics';
 
 type Steps = 'first-info' | 'second-info' | 'verify-ownership' | 'backup-seed' | 'done';
 
-export const MultiShareBackupModal = ({ onCancel }: { onCancel: () => void }) => {
+type MultiShareBackupModalProps = {
+    onCancel: () => void;
+};
+
+export const MultiShareBackupModal = ({
+    onCancel: onCancelFromProps,
+}: MultiShareBackupModalProps) => {
     const device = useSelector(selectDevice);
 
     const isInBackupMode =
@@ -33,9 +40,27 @@ export const MultiShareBackupModal = ({ onCancel }: { onCancel: () => void }) =>
     const [isChecked2, setIsChecked2] = useState(false);
     const [isSubmitted, setIsSubmitted] = useState(false);
 
+    const learnMoreClicked = () => {
+        analytics.report({
+            type: EventType.SettingsMultiShareBackup,
+            payload: { action: 'learn-more' },
+        });
+    };
+
+    const handleCancel = () => {
+        if (step !== 'done') {
+            analytics.report({
+                type: EventType.SettingsMultiShareBackup,
+                payload: { action: 'close-modal' },
+            });
+        }
+
+        onCancelFromProps();
+    };
+
     const closeWithCancelOnDevice = () => {
         TrezorConnect.cancel('cancel');
-        onCancel();
+        handleCancel();
     };
 
     if (device === undefined) {
@@ -68,7 +93,11 @@ export const MultiShareBackupModal = ({ onCancel }: { onCancel: () => void }) =>
                             <Button onClick={goToStepNextStep}>
                                 <Translation id="TR_CREATE_MULTI_SHARE_BACKUP" />
                             </Button>
-                            <LearnMoreButton url={HELP_CENTER_SEED_CARD_URL} size="medium" />
+                            <LearnMoreButton
+                                url={HELP_CENTER_SEED_CARD_URL}
+                                size="medium"
+                                onClick={learnMoreClicked}
+                            />
                         </>
                     ),
                 };
@@ -90,13 +119,18 @@ export const MultiShareBackupModal = ({ onCancel }: { onCancel: () => void }) =>
                         setStep('backup-seed');
                         TrezorConnect.backupDevice().then(response => {
                             if (response.success) {
+                                analytics.report({
+                                    type: EventType.SettingsMultiShareBackup,
+                                    payload: { action: 'done' },
+                                });
+
                                 setStep('done');
                             } else {
-                                onCancel();
+                                handleCancel();
                             }
                         });
                     } else {
-                        onCancel();
+                        handleCancel();
                     }
                 };
 
@@ -136,7 +170,7 @@ export const MultiShareBackupModal = ({ onCancel }: { onCancel: () => void }) =>
                     children: <MultiShareBackupStep5Done />,
                     bottomBarComponents: (
                         <>
-                            <Button onClick={onCancel}>
+                            <Button onClick={handleCancel}>
                                 <Translation id="TR_GOT_IT_BUTTON" />
                             </Button>
                             <LearnMoreButton url={HELP_CENTER_KEEPING_SEED_SAFE_URL} size="medium">
@@ -148,5 +182,5 @@ export const MultiShareBackupModal = ({ onCancel }: { onCancel: () => void }) =>
         }
     };
 
-    return <Modal isCancelable onCancel={onCancel} {...getStepConfig()}></Modal>;
+    return <Modal isCancelable onCancel={handleCancel} {...getStepConfig()}></Modal>;
 };
diff --git a/...nents/suite/modals/ReduxModal/UserContextModal/MultiShareBackupModal/instructionSteps.tsx b/...nents/suite/modals/ReduxModal/UserContextModal/MultiShareBackupModal/instructionSteps.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Image, Text } from '@trezor/components';
 import { borders, spacings, spacingsPx } from '@trezor/theme';
-import { ESHOP_KEEP_METAL_URL, HELP_CENTER_SEED_CARD_URL } from '@trezor/urls';
+import { ESHOP_KEEP_METAL_SINGLE_SHARE_URL, HELP_CENTER_SEED_CARD_URL } from '@trezor/urls';
 
 import { Translation, TrezorLink } from 'src/components/suite';
 import { BackupInstructionsCard } from './BackupInstructionsCard';
@@ -68,7 +68,10 @@ export const createSharesInstruction: InstructionBaseConfig = {
                                 </TrezorLink>
                             ),
                             keepLink: chunks => (
-                                <TrezorLink href={ESHOP_KEEP_METAL_URL} variant="underline">
+                                <TrezorLink
+                                    href={ESHOP_KEEP_METAL_SINGLE_SHARE_URL}
+                                    variant="underline"
+                                >
                                     {chunks}
                                 </TrezorLink>
                             ),

diff --git a/packages/suite/src/views/onboarding/steps/Final.tsx b/packages/suite/src/views/onboarding/steps/Final.tsx
@@ -221,6 +221,7 @@ export const FinalStep = () => {
                                 ...onboardingAnalytics,
                                 duration: Date.now() - onboardingAnalytics.startTime!,
                                 device: device.features.internal_model,
+                                unitPackaging: device.features.unit_packaging ?? 0,
                             };
                             delete payload.startTime;
 

diff --git a/packages/suite/src/views/onboarding/steps/ResetDevice.tsx b/packages/suite/src/views/onboarding/steps/ResetDevice.tsx
@@ -92,9 +92,9 @@ export const ResetDeviceStep = () => {
             }
 
             updateBackupType(type);
-            updateAnalytics({ recoveryType: undefined, seedType: type });
+            updateAnalytics({ seedType: type });
         },
-        [updateAnalytics, onResetDevice, updateBackupType],
+        [updateBackupType, updateAnalytics, onResetDevice],
     );
 
     useEffect(() => {
@@ -154,6 +154,7 @@ export const ResetDeviceStep = () => {
                             <>
                                 <SelectBackupType
                                     selected={backupType}
+                                    onOpen={() => updateAnalytics({ wasSelectTypeOpened: true })}
                                     onSelect={setBackupType}
                                     isDisabled={isDeviceLocked}
                                     data-test="@onboarding/select-seed-type-open-dialog"

diff --git a/packages/suite/src/views/onboarding/steps/SelectBackupType/SelectBackupType.tsx b/packages/suite/src/views/onboarding/steps/SelectBackupType/SelectBackupType.tsx
@@ -84,13 +84,15 @@ type SelectBackupTypeProps = {
     selected: BackupType;
     onSelect: (value: BackupType) => void;
     'data-test'?: string;
+    onOpen: () => void;
 };
 
 export const SelectBackupType = ({
     selected,
     onSelect,
     isDisabled,
     'data-test': dataTest,
+    onOpen,
 }: SelectBackupTypeProps) => {
     const { elevation } = useElevation();
     const [isOpen, setIsOpen] = useState(false);
@@ -136,7 +138,13 @@ export const SelectBackupType = ({
         <Wrapper>
             <SelectWrapper $elevation={elevation} ref={refs.setReference} {...getReferenceProps()}>
                 <ElevationUp>
-                    <SelectedOption isDisabled={isDisabled} onClick={() => setIsOpen(true)}>
+                    <SelectedOption
+                        isDisabled={isDisabled}
+                        onClick={() => {
+                            setIsOpen(true);
+                            onOpen();
+                        }}
+                    >
                         <OptionText data-test={dataTest}>
                             <Text variant="tertiary" typographyStyle="hint">
                                 <Translation id="TR_ONBOARDING_BACKUP_TYPE" />

diff --git a/packages/suite/src/views/settings/SettingsDevice/MultiShareBackup.tsx b/packages/suite/src/views/settings/SettingsDevice/MultiShareBackup.tsx
@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from 'src/hooks/suite';
 import { selectDevice } from '@suite-common/wallet-core';
 import { TrezorDevice } from '@suite-common/suite-types';
 import { goto } from '../../../actions/suite/routerActions';
+import { EventType, analytics } from '@trezor/suite-analytics';
 
 const doesSupportMultiShare = (device: TrezorDevice | undefined): boolean => {
     if (device?.features === undefined) {
@@ -38,7 +39,14 @@ export const MultiShareBackup = () => {
         return;
     }
 
-    const handleClick = () => dispatch(goto('create-multi-share-backup'));
+    const handleClick = () => {
+        analytics.report({
+            type: EventType.SettingsMultiShareBackup,
+            payload: { action: 'start' },
+        });
+
+        dispatch(goto('create-multi-share-backup'));
+    };
 
     return (
         <SectionItem>

diff --git a/packages/urls/src/urls.ts b/packages/urls/src/urls.ts
@@ -73,7 +73,7 @@ export const HELP_CENTER_ETH_STAKING =
     'https://trezor.io/learn/a/stake-ethereum-eth-in-trezor-suite';
 export const HELP_CENTER_SEED_CARD_URL = 'https://trezor.io/learn/a/recovery-seed-card';
 export const HELP_CENTER_MULTI_SHARE_BACKUP_URL =
-    'https://trezor.io/learn/a/introducing-multi-share-backup';
+    'https://trezor.io/learn/a/multi-share-backup-on-trezor';
 export const HELP_CENTER_KEEPING_SEED_SAFE_URL =
     'https://trezor.io/learn/a/keeping-your-recovery-seed-safe';
 
@@ -101,3 +101,4 @@ export const ZKSNACKS_TERMS_URL =
 export const CROWDIN_URL = 'https://crowdin.com/project/trezor-suite';
 
 export const ESHOP_KEEP_METAL_URL = 'https://trezor.io/trezor-keep-metal';
+export const ESHOP_KEEP_METAL_SINGLE_SHARE_URL = 'https://trezor.io/trezor-keep-metal-single-share';