feat: add additional analytics capture events (#967)

Author: mchappell

src/features/analytics/events.ts

@@ -105,6 +105,16 @@ export enum Events {
   MigrationDownloadLaceClicked = 'nami tool | nami | download lace | click',
   MigrationOpenLaceClicked = 'nami tool | nami | open lace | click',
   NamiMigrationDismissed = 'nami tool | nami | migration dismissed | click',
+
+  // Enhanced migration events
+  MigrationViewed = 'nami tool | nami | migration tool viewed',
+  MigrationViewNoWalletViewed = 'nami tool | nami | migration tool | no wallet viewed',
+  MigrationNoStartedViewed = 'nami tool | nami | migration tool | not started viewed',
+  MigrationInProgressViewed = 'nami tool | nami | migration tool | in progress viewed',
+  NamiMigrationDismissedNoWallet = 'nami tool | nami | migration dismissed | no wallet | click',
+  NamiMigrationDismissedNotStarted = 'nami tool | nami | migration dismissed | not started | click',
+  NamiMigrationDismissedInProgress = 'nami tool | nami | migration dismissed | in progress | click',
+  NamiMigrationOpenLaceOrOpenChromeStore = 'nami tool | nami | open lace or open chrome store link | click',
 }
 
 export type Property =

src/ui/lace-migration/components/almost-there/almost-there.component.jsx

@@ -5,6 +5,8 @@ import { ReactComponent as Download } from '../../assets/download.svg';
 import { ReactComponent as Arrow } from '../../assets/arrow.svg';
 import { ReactComponent as PendingDark } from '../../assets/pending-dark-mode.svg';
 import { ReactComponent as PendingWhite } from '../../assets/pending-white-mode.svg';
+import { useCaptureEvent } from '../../../../features/analytics/hooks';
+import { Events } from '../../../../features/analytics/events';
 
 export const AlmostThere = ({
   isLaceInstalled,
@@ -13,6 +15,7 @@ export const AlmostThere = ({
   dismissibleSeconds,
 }) => {
   const { colorMode } = useColorMode();
+  const captureEvent = useCaptureEvent();
   return (
     <Slide
       showTerms={false}
@@ -35,10 +38,14 @@ export const AlmostThere = ({
       }
       buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
       buttonIcon={isLaceInstalled ? Arrow : Download}
-      onButtonClick={onAction}
+      onButtonClick={async () => {
+        await captureEvent(Events.NamiMigrationOpenLaceOrOpenChromeStore);
+        onAction();
+      }}
       isDismissable={isDismissable}
       buttonOrientation="column"
       dismissibleSeconds={dismissibleSeconds}
+      onDismiss={() => captureEvent(Events.NamiMigrationDismissedInProgress)}
     />
   );
 };

src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx

@@ -3,8 +3,11 @@ import { Box } from '@chakra-ui/react';
 import { Slide } from '../../slide.component';
 import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
 import { ReactComponent as BackpackImg } from '../../../assets/backpack.svg';
+import { useCaptureEvent } from '../../../../../features/analytics/hooks';
+import { Events } from '../../../../../features/analytics/events';
 
 export const Slide1 = ({ onAction, isDismissable, dismissibleSeconds }) => {
+  const captureEvent = useCaptureEvent();
   return (
     <Slide
       showTerms
@@ -17,10 +20,13 @@ export const Slide1 = ({ onAction, isDismissable, dismissibleSeconds }) => {
       description="The Nami Wallet is now integrated into Lace. Click 'Upgrade your wallet' to begin the process."
       buttonText="Upgrade your wallet"
       buttonIcon={Arrow}
-      onButtonClick={onAction}
+      onButtonClick={async () => await onAction()}
       isDismissable={isDismissable}
       dismissibleSeconds={dismissibleSeconds}
       buttonOrientation={isDismissable ? 'column' : 'row'}
+      onDismiss={async () =>
+        captureEvent(Events.NamiMigrationDismissedNotStarted)
+      }
     />
   );
 };

src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx

@@ -4,9 +4,12 @@ import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
 import { ReactComponent as SeamlessDark } from '../../../assets/grouped-dark-mode.svg';
 import { ReactComponent as SeamlessWhite } from '../../../assets/grouped-white-mode.svg';
 import { useColorMode, Box } from '@chakra-ui/react';
+import { useCaptureEvent } from '../../../../../features/analytics/hooks';
+import { Events } from '../../../../../features/analytics/events';
 
 export const Slide2 = ({ onAction, isDismissable, dismissibleSeconds }) => {
   const { colorMode } = useColorMode();
+  const captureEvent = useCaptureEvent();
   return (
     <Slide
       showTerms
@@ -27,6 +30,9 @@ export const Slide2 = ({ onAction, isDismissable, dismissibleSeconds }) => {
       isDismissable={isDismissable}
       dismissibleSeconds={dismissibleSeconds}
       buttonOrientation={isDismissable ? 'column' : 'row'}
+      onDismiss={async () =>
+        captureEvent(Events.NamiMigrationDismissedNotStarted)
+      }
     />
   );
 };

src/ui/lace-migration/components/carousel/slides/Slide3.component.jsx

@@ -3,8 +3,11 @@ import { Slide } from '../../slide.component';
 import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
 import { Box } from '@chakra-ui/react';
 import { ReactComponent as FeaturesImg } from '../../../assets/features.svg';
+import { useCaptureEvent } from '../../../../../features/analytics/hooks';
+import { Events } from '../../../../../features/analytics/events';
 
 export const Slide3 = ({ onAction, isDismissable, dismissibleSeconds }) => {
+  const captureEvent = useCaptureEvent();
   return (
     <Slide
       showTerms
@@ -21,6 +24,9 @@ export const Slide3 = ({ onAction, isDismissable, dismissibleSeconds }) => {
       isDismissable={isDismissable}
       dismissibleSeconds={dismissibleSeconds}
       buttonOrientation={isDismissable ? 'column' : 'row'}
+      onDismiss={async () =>
+        captureEvent(Events.NamiMigrationDismissedNotStarted)
+      }
     />
   );
 };

src/ui/lace-migration/components/dismiss-btn.jsx

@@ -4,7 +4,11 @@ import { Text } from './text.component';
 import { dismissMigration } from '../../../api/migration-tool/cross-extension-messaging/nami-migration-client.extension';
 import { ReactComponent as PendingDark } from '../assets/clock.svg';
 
-export const DismissBtn = ({ dismissableIntervalSeconds, hasIcon }) => {
+export const DismissBtn = ({
+  dismissableIntervalSeconds,
+  hasIcon,
+  onDismiss,
+}) => {
   const futureDate = new Date();
   const futureTime = futureDate.setTime(
     futureDate.getTime() + dismissableIntervalSeconds * 1000
@@ -22,6 +26,7 @@ export const DismissBtn = ({ dismissableIntervalSeconds, hasIcon }) => {
       border="2px solid transparent"
       backgroundColor="none"
       onClick={async () => {
+        onDismiss();
         await dismissMigration({ dismissMigrationUntil: futureTime });
       }}
     >

src/ui/lace-migration/components/migration-view/migration-view.component.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MigrationState } from '../../../../api/migration-tool/migrator/migration-state.data';
 import { Carousel } from '../carousel/carousel.component';
 import { Slide1 } from '../carousel/slides/Slide1.component';
@@ -9,6 +9,10 @@ import { AllDone } from '../all-done/all-done.component';
 import { NoWallet } from '../no-wallet/no-wallet.component';
 import { useColorModeValue, Flex } from '@chakra-ui/react';
 import { useFeatureFlagsContext } from '../../../../features/feature-flags/provider';
+import { Events } from '../../../../features/analytics/events';
+import { useCaptureEvent } from '../../../../features/analytics/hooks';
+import { AnalyticsConsentModal } from '../../../../features/analytics/ui/AnalyticsConsentModal';
+import { useAnalyticsContext } from '../../../../features/analytics/provider';
 
 export const MigrationView = ({
   migrationState,
@@ -26,15 +30,22 @@ export const MigrationView = ({
   const panelBg = useColorModeValue('#349EA3', 'gray.800');
   const bgColor = useColorModeValue('#FFF', '#1A202C');
   const { featureFlags } = useFeatureFlagsContext();
+  const [analytics, setAnalyticsConsent] = useAnalyticsContext();
+  const captureEvent = useCaptureEvent();
+  useEffect(() => {
+    captureEvent(Events.MigrationViewed);
+  }, []);
+
   const isDismissable =
     featureFlags?.['is-migration-active']?.dismissable || false;
 
   const dismissibleSeconds =
     featureFlags?.['is-migration-active']?.dismissInterval;
 
   if (!hasWallet) {
+    captureEvent(Events.MigrationViewNoWalletViewed);
     return (
-      <Flex
+      <><Flex
         h="100%"
         backgroundColor={panelBg}
       >
@@ -57,12 +68,18 @@ export const MigrationView = ({
           />
         </Flex>
       </Flex>
+      <AnalyticsConsentModal 
+        askForConsent={analytics.consent === undefined}
+        setConsent={setAnalyticsConsent}
+      />
+      </>
     );
   }
 
   switch (migrationState) {
     case MigrationState.Dismissed:
     case MigrationState.None:
+      captureEvent(Events.MigrationNoStartedViewed);
       return (
         <Flex
           h="100%"

src/ui/lace-migration/components/migration.component.jsx

@@ -137,35 +137,35 @@ export const AppWithMigration = () => {
           slideIndex: nextSlideIndex,
         });
       }}
-      onUpgradeWalletClicked={() => {
+      onUpgradeWalletClicked={async() => {
         enableMigration();
-        captureEvent(Events.MigrationUpgradeYourWalletClicked);
+        await captureEvent(Events.MigrationUpgradeYourWalletClicked);
       }}
-      onWaitingForLaceScreenViewed={() => {
-        captureEvent(Events.MigrationDownloadLaceScreenViewed);
+      onWaitingForLaceScreenViewed={async() => {
+       await  captureEvent(Events.MigrationDownloadLaceScreenViewed);
       }}
-      onOpenLaceScreenViewed={() => {
-        captureEvent(Events.MigrationOpenLaceScreenViewed);
+      onOpenLaceScreenViewed={async() => {
+        await captureEvent(Events.MigrationOpenLaceScreenViewed);
       }}
-      onDownloadLaceClicked={() => {
-        captureEvent(Events.MigrationDownloadLaceClicked);
+      onDownloadLaceClicked={async() => {
+        await captureEvent(Events.MigrationDownloadLaceClicked);
         window.open(
           `https://chromewebstore.google.com/detail/lace/${secrets.LACE_EXTENSION_ID}`
         );
       }}
-      onOpenLaceClicked={() => {
-        captureEvent(Events.MigrationOpenLaceClicked);
+      onOpenLaceClicked={async() => {
+       await captureEvent(Events.MigrationOpenLaceClicked);
         openLace();
       }}
-      onAllDoneScreenViewed={() => {
-        captureEvent(Events.MigrationAllDoneScreenViewed);
+      onAllDoneScreenViewed={async() => {
+        await captureEvent(Events.MigrationAllDoneScreenViewed);
       }}
-      onNoWalletActionClick={() => {
+      onNoWalletActionClick={async() => {
         if (state.isLaceInstalled) {
-          captureEvent(Events.MigrationOpenLaceClicked, { noWallet: true });
+          await captureEvent(Events.MigrationOpenLaceClicked);
           openLace();
         } else {
-          captureEvent(Events.MigrationDownloadLaceClicked, { noWallet: true });
+          await captureEvent(Events.MigrationDownloadLaceClicked);
           window.open(
             `https://chromewebstore.google.com/detail/lace/${secrets.LACE_EXTENSION_ID}`
           );

src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx

@@ -3,23 +3,32 @@ import { Slide } from '../slide.component';
 import { ReactComponent as LaceIcon } from '../../assets/lace-icon.svg';
 import { ReactComponent as BackpackImg } from '../../assets/backpack.svg';
 import { Box } from '@chakra-ui/react';
+import { useCaptureEvent } from '../../../../features/analytics/hooks';
+import { Events } from '../../../../features/analytics/events';
 
-export const NoWallet = ({ onAction, isDismissable, dismissibleSeconds }) => (
-  <Slide
-    title="Your Nami wallet has upgraded!"
-    image={
-      <Box mb={'38px'}>
-        <BackpackImg width="91px" height="126px" />
-      </Box>
-    }
-    description="To create or import a wallet, proceed using the Lace extension."
-    buttonText="Get started with Lace"
-    buttonIcon={LaceIcon}
-    onButtonClick={onAction}
-    isDismissable={isDismissable}
-    buttonOrientation={isDismissable ? 'column' : 'row'}
-    dismissibleSeconds={dismissibleSeconds}
-    showTerms={false}
-    showFindOutMore
-  />
-);
+export const NoWallet = ({ onAction, isDismissable, dismissibleSeconds }) => {
+  const captureEvent = useCaptureEvent();
+
+  return (
+    <Slide
+      title="Your Nami wallet has upgraded!"
+      image={
+        <Box mb={'38px'}>
+          <BackpackImg width="91px" height="126px" />
+        </Box>
+      }
+      description="To create or import a wallet, proceed using the Lace extension."
+      buttonText="Get started with Lace"
+      buttonIcon={LaceIcon}
+      onButtonClick={onAction}
+      isDismissable={isDismissable}
+      buttonOrientation={isDismissable ? 'column' : 'row'}
+      dismissibleSeconds={dismissibleSeconds}
+      showTerms={false}
+      showFindOutMore
+      onDismiss={async () =>
+        captureEvent(Events.NamiMigrationDismissedNoWallet)
+      }
+    />
+  );
+};

src/ui/lace-migration/components/slide.component.jsx

@@ -16,6 +16,7 @@ export const Slide = ({
   dismissibleSeconds,
   buttonOrientation,
   showFindOutMore,
+  onDismiss,
 }) => {
   const borderColor = useColorModeValue('#C0C0C0', '#383838');
   const slideBoxBgColor = useColorModeValue('#FFFFFF', '#2D3848');
@@ -199,6 +200,7 @@ export const Slide = ({
             <DismissBtn
               hasIcon={buttonOrientation === 'column'}
               dismissableIntervalSeconds={dismissibleSeconds}
+              onDismiss={onDismiss}
             />
           )}
         </Flex>