feat: add mixpanel events for registration flow (#616)

Author: remicolin

app/src/consts/analytics.ts

@@ -58,6 +58,8 @@ export const ProofEvents = {
   PROOF_VERIFICATION_STARTED: 'Proof: Proof Verification Started',
   PROVING_PROCESS_ERROR: 'Proof: Proving Process Error',
   PROVING_STATE_CHANGE: 'Proof: Proving State Change',
+  REGISTER_COMPLETED: 'Proof: Register Completed',
+  ALREADY_REGISTERED: 'Proof: Already Registered',
   QR_SCAN_CANCELLED: 'Proof: QR Scan Cancelled',
   QR_SCAN_FAILED: 'Proof: QR Scan Failed',
   QR_SCAN_SUCCESS: 'Proof: QR Scan Success',
@@ -71,6 +73,7 @@ export const SettingsEvents = {
 
 export const BackupEvents = {
   ACCOUNT_RECOVERY_STARTED: 'Backup: Account Recovery Started',
+  ACCOUNT_RECOVERY_COMPLETED: 'Backup: Account Recovery Completed',
   ACCOUNT_VERIFICATION_COMPLETED: 'Backup: Account Verification Completed',
   CLOUD_BACKUP_CONTINUE: 'Backup: Cloud Backup Continue',
   CLOUD_BACKUP_STARTED: 'Backup: Cloud Backup Started',

app/src/screens/recovery/AccountRecoveryChoiceScreen.tsx

@@ -76,6 +76,7 @@ const AccountRecoveryChoiceScreen: React.FC<
       }
       reStorePassportDataWithRightCSCA(passportData, csca as string);
       trackEvent(BackupEvents.CLOUD_RESTORE_SUCCESS);
+      trackEvent(BackupEvents.ACCOUNT_RECOVERY_COMPLETED);
       onRestoreFromCloudNext();
       setRestoring(false);
     } catch (e: any) {

app/src/screens/recovery/RecoverWithPhraseScreen.tsx

@@ -7,12 +7,14 @@ import { Text, TextArea, View, XStack, YStack } from 'tamagui';
 
 import { SecondaryButton } from '../../components/buttons/SecondaryButton';
 import Description from '../../components/typography/Description';
+import { BackupEvents } from '../../consts/analytics';
 import Paste from '../../images/icons/paste.svg';
 import { useAuth } from '../../providers/authProvider';
 import {
   loadPassportDataAndSecret,
   reStorePassportDataWithRightCSCA,
 } from '../../providers/passportDataProvider';
+import analytics from '../../utils/analytics';
 import {
   black,
   slate300,
@@ -30,6 +32,7 @@ const RecoverWithPhraseScreen: React.FC<
 > = ({}) => {
   const navigation = useNavigation();
   const { restoreAccountFromMnemonic } = useAuth();
+  const { trackEvent } = analytics();
   const [mnemonic, setMnemonic] = useState<string>();
   const [restoring, setRestoring] = useState(false);
   const onPaste = useCallback(async () => {
@@ -75,6 +78,7 @@ const RecoverWithPhraseScreen: React.FC<
     }
 
     setRestoring(false);
+    trackEvent(BackupEvents.ACCOUNT_RECOVERY_COMPLETED);
     navigation.navigate('AccountVerifiedSuccess');
   }, [mnemonic, restoreAccountFromMnemonic]);
 

app/src/utils/proving/provingMachine.ts

@@ -8,6 +8,7 @@ import { v4 } from 'uuid';
 import { AnyActorRef, createActor, createMachine } from 'xstate';
 import { create } from 'zustand';
 
+import { ProofEvents } from '../../consts/analytics';
 import { navigationRef } from '../../navigation';
 import { unsafe_getPrivateKey } from '../../providers/authProvider';
 import {
@@ -17,6 +18,7 @@ import {
 } from '../../providers/passportDataProvider';
 import { useProtocolStore } from '../../stores/protocolStore';
 import { useSelfAppStore } from '../../stores/selfAppStore';
+import analytics from '../analytics';
 import { getPublicKey, verifyAttestation } from './attest';
 import {
   generateTEEInputsDisclose,
@@ -39,6 +41,8 @@ import {
   isUserRegisteredWithAlternativeCSCA,
 } from './validateDocument';
 
+const { trackEvent } = analytics();
+
 const provingMachine = createMachine({
   id: 'proving',
   initial: 'idle',
@@ -385,6 +389,9 @@ export const useProvingStore = create<ProvingState>((set, get) => {
         } else if (data.status === 4) {
           socket?.disconnect();
           set({ socketConnection: null });
+          if (get().circuitType === 'register') {
+            trackEvent(ProofEvents.REGISTER_COMPLETED);
+          }
           actor!.send({ type: 'PROVE_SUCCESS' });
         }
       });
@@ -589,6 +596,7 @@ export const useProvingStore = create<ProvingState>((set, get) => {
             );
           if (isRegistered) {
             reStorePassportDataWithRightCSCA(passportData, csca as string);
+            trackEvent(ProofEvents.ALREADY_REGISTERED);
             actor!.send({ type: 'ALREADY_REGISTERED' });
             return;
           }