diff --git a/src/features/analytics/events.ts b/src/features/analytics/events.ts index f28ea66a..82a59b9e 100644 --- a/src/features/analytics/events.ts +++ b/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 = diff --git a/src/ui/lace-migration/components/almost-there/almost-there.component.jsx b/src/ui/lace-migration/components/almost-there/almost-there.component.jsx index 56a5554f..95397b5c 100644 --- a/src/ui/lace-migration/components/almost-there/almost-there.component.jsx +++ b/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 ( { + await captureEvent(Events.NamiMigrationOpenLaceOrOpenChromeStore); + onAction(); + }} isDismissable={isDismissable} buttonOrientation="column" dismissibleSeconds={dismissibleSeconds} + onDismiss={() => captureEvent(Events.NamiMigrationDismissedInProgress)} /> ); }; diff --git a/src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx b/src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx index 2d2c0fc9..4d071798 100644 --- a/src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx +++ b/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 ( { 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) + } /> ); }; diff --git a/src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx b/src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx index b3e56c2a..fb38c9d7 100644 --- a/src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx +++ b/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 ( { isDismissable={isDismissable} dismissibleSeconds={dismissibleSeconds} buttonOrientation={isDismissable ? 'column' : 'row'} + onDismiss={async () => + captureEvent(Events.NamiMigrationDismissedNotStarted) + } /> ); }; diff --git a/src/ui/lace-migration/components/carousel/slides/Slide3.component.jsx b/src/ui/lace-migration/components/carousel/slides/Slide3.component.jsx index ce248b07..6b3d889c 100644 --- a/src/ui/lace-migration/components/carousel/slides/Slide3.component.jsx +++ b/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 ( { isDismissable={isDismissable} dismissibleSeconds={dismissibleSeconds} buttonOrientation={isDismissable ? 'column' : 'row'} + onDismiss={async () => + captureEvent(Events.NamiMigrationDismissedNotStarted) + } /> ); }; diff --git a/src/ui/lace-migration/components/dismiss-btn.jsx b/src/ui/lace-migration/components/dismiss-btn.jsx index f5ec7379..61e9b733 100644 --- a/src/ui/lace-migration/components/dismiss-btn.jsx +++ b/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 }); }} > diff --git a/src/ui/lace-migration/components/migration-view/migration-view.component.jsx b/src/ui/lace-migration/components/migration-view/migration-view.component.jsx index df6a6dda..91c4159e 100644 --- a/src/ui/lace-migration/components/migration-view/migration-view.component.jsx +++ b/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,6 +30,12 @@ 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; @@ -33,8 +43,9 @@ export const MigrationView = ({ featureFlags?.['is-migration-active']?.dismissInterval; if (!hasWallet) { + captureEvent(Events.MigrationViewNoWalletViewed); return ( - @@ -57,12 +68,18 @@ export const MigrationView = ({ /> + + ); } switch (migrationState) { case MigrationState.Dismissed: case MigrationState.None: + captureEvent(Events.MigrationNoStartedViewed); return ( { 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}` ); diff --git a/src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx b/src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx index 2b9bb7b6..92d1eb96 100644 --- a/src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx +++ b/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 }) => ( - - - - } - 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 ( + + + + } + 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) + } + /> + ); +}; diff --git a/src/ui/lace-migration/components/slide.component.jsx b/src/ui/lace-migration/components/slide.component.jsx index 616a9067..5e4e8311 100644 --- a/src/ui/lace-migration/components/slide.component.jsx +++ b/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 = ({ )}