fix: use Track component, rename recovery_init, add enum for Next/Bac…

…k, rename actions
safe-global · Nov 28, 2023 · e9a5d7a · e9a5d7a
1 parent 65a3903
commit e9a5d7a
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 35 deletions.
diff --git a/src/components/recovery/CancelRecoveryButton/index.tsx b/src/components/recovery/CancelRecoveryButton/index.tsx
@@ -38,8 +38,8 @@ export function CancelRecoveryButton({
     e.stopPropagation()
     e.preventDefault()
 
+    trackEvent(RECOVERY_EVENTS.CANCEL_RECOVERY)
     if (isOwner) {
-      trackEvent(RECOVERY_EVENTS.CANCEL_RECOVERY)
       setTxFlow(<CancelRecoveryFlow recovery={recovery} />)
     } else if (onboard) {
       try {

diff --git a/src/components/recovery/GroupedRecoveryListItems/index.tsx b/src/components/recovery/GroupedRecoveryListItems/index.tsx
@@ -1,3 +1,5 @@
+import Track from '@/components/common/Track'
+import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
 import { Box, Paper, Typography } from '@mui/material'
 import { partition } from 'lodash'
 import type { RecoveryQueueItem } from '@/services/recovery/recovery-state'
@@ -23,9 +25,11 @@ function Disclaimer({ isMalicious }: { isMalicious: boolean }): ReactElement {
           Cancelling {isMalicious ? 'malicious transaction' : 'Account recovery'}.
         </Typography>{' '}
         You will need to execute the cancellation.{' '}
-        <ExternalLink href={HelpCenterArticle.RECOVERY} title="Learn more about the Account recovery process">
-          Learn more
-        </ExternalLink>
+        <Track {...RECOVERY_EVENTS.LEARN_MORE} label="tx-queue">
+          <ExternalLink href={HelpCenterArticle.RECOVERY} title="Learn more about the Account recovery process">
+            Learn more
+          </ExternalLink>
+        </Track>
       </Typography>
     </Box>
   )

diff --git a/src/components/recovery/RecoveryCards/RecoveryInProgressCard.tsx b/src/components/recovery/RecoveryCards/RecoveryInProgressCard.tsx
@@ -1,4 +1,4 @@
-import { trackEvent } from '@/services/analytics'
+import Track from '@/components/common/Track'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
 import { Button, Card, Divider, Grid, Typography } from '@mui/material'
 import { useRouter } from 'next/dist/client/router'
@@ -26,10 +26,6 @@ type Props =
       recovery: RecoveryQueueItem
     }
 
-const onLearnMoreClick = () => {
-  trackEvent({ ...RECOVERY_EVENTS.LEARN_MORE, label: 'in-progress-card' })
-}
-
 export function RecoveryInProgressCard({ orientation = 'vertical', onClose, recovery }: Props): ReactElement {
   const { isExecutable, remainingSeconds } = useRecoveryTxState(recovery)
   const router = useRouter()
@@ -49,13 +45,11 @@ export function RecoveryInProgressCard({ orientation = 'vertical', onClose, reco
     : 'The recovery process has started. This Account will be ready to recover in:'
 
   const link = (
-    <ExternalLink
-      href={HelpCenterArticle.RECOVERY}
-      onClick={onLearnMoreClick}
-      title="Learn more about the Account recovery process"
-    >
-      Learn more
-    </ExternalLink>
+    <Track {...RECOVERY_EVENTS.LEARN_MORE} label="in-progress-card">
+      <ExternalLink href={HelpCenterArticle.RECOVERY} title="Learn more about the Account recovery process">
+        Learn more
+      </ExternalLink>
+    </Track>
   )
 
   if (orientation === 'horizontal') {

diff --git a/src/components/recovery/RecoveryCards/RecoveryProposalCard.tsx b/src/components/recovery/RecoveryCards/RecoveryProposalCard.tsx
@@ -1,3 +1,4 @@
+import Track from '@/components/common/Track'
 import { trackEvent } from '@/services/analytics'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
 import { Button, Card, Divider, Grid, Typography } from '@mui/material'
@@ -30,10 +31,6 @@ type Props =
       setTxFlow: TxModalContextType['setTxFlow']
     }
 
-const onLearnMoreClick = () => {
-  trackEvent({ ...RECOVERY_EVENTS.LEARN_MORE, label: 'proposal-card' })
-}
-
 export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe, setTxFlow }: Props): ReactElement {
   const onRecover = async () => {
     onClose?.()
@@ -48,13 +45,11 @@ export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe,
   } regain access by updating the owner list.`
 
   const link = (
-    <ExternalLink
-      href={HelpCenterArticle.RECOVERY}
-      onClick={onLearnMoreClick}
-      title="Learn more about the Account recovery process"
-    >
-      Learn more
-    </ExternalLink>
+    <Track {...RECOVERY_EVENTS.LEARN_MORE} label="proposal-card">
+      <ExternalLink href={HelpCenterArticle.RECOVERY} title="Learn more about the Account recovery process">
+        Learn more
+      </ExternalLink>
+    </Track>
   )
 
   const recoveryButton = (

diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
@@ -83,7 +83,7 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
         refetchRecoveryData: refetch,
       })
       // TODO: This event is fired before the user submits the tx in their wallet but it should wait for it
-      trackEvent({ ...TX_EVENTS.CREATE, label: TX_TYPES.recovery_init })
+      trackEvent({ ...TX_EVENTS.CREATE, label: TX_TYPES.recovery_attempt })
     } catch (_err) {
       const err = asError(_err)
       trackError(Errors._810, err)

diff --git a/src/components/tx-flow/useTxStepper.tsx b/src/components/tx-flow/useTxStepper.tsx
@@ -1,4 +1,4 @@
-import { trackEvent } from '@/services/analytics'
+import { MODAL_NAVIGATION, trackEvent } from '@/services/analytics'
 import { useCallback, useState } from 'react'
 
 const useTxStepper = <T extends unknown>(initialData: T, eventCategory?: string) => {
@@ -10,7 +10,7 @@ const useTxStepper = <T extends unknown>(initialData: T, eventCategory?: string)
       setData(entireData)
       setStep((prevStep) => {
         if (eventCategory) {
-          trackEvent({ action: 'Next', category: eventCategory, label: prevStep })
+          trackEvent({ action: MODAL_NAVIGATION.Next, category: eventCategory, label: prevStep })
         }
 
         return prevStep + 1
@@ -22,7 +22,7 @@ const useTxStepper = <T extends unknown>(initialData: T, eventCategory?: string)
   const prevStep = useCallback(() => {
     setStep((prevStep) => {
       if (eventCategory) {
-        trackEvent({ action: 'Back', category: eventCategory, label: prevStep })
+        trackEvent({ action: MODAL_NAVIGATION.Back, category: eventCategory, label: prevStep })
       }
       return prevStep - 1
     })

diff --git a/src/services/analytics/events/modals.ts b/src/services/analytics/events/modals.ts
@@ -58,3 +58,8 @@ export const MODALS_EVENTS = {
     event: EventType.META,
   },
 }
+
+export enum MODAL_NAVIGATION {
+  Next = 'TxFlow Next',
+  Back = 'TxFlow Back',
+}
diff --git a/src/services/analytics/events/recovery.ts b/src/services/analytics/events/recovery.ts
@@ -29,17 +29,17 @@ export const RECOVERY_EVENTS = {
     event: EventType.CLICK,
   },
   DISMISS_PROPOSAL_CARD: {
-    action: 'Do it later',
+    action: 'Dismiss recovery proposal card',
     category: RECOVERY_CATEGORY,
     event: EventType.CLICK,
   },
   LEARN_MORE: {
-    action: 'Learn more',
+    action: 'Learn more about recovery',
     category: RECOVERY_CATEGORY,
     event: EventType.CLICK,
   },
   GO_BACK: {
-    action: 'Go back on cancel',
+    action: 'Go back on cancel recovery',
     category: RECOVERY_CATEGORY,
     event: EventType.CLICK,
   },

diff --git a/src/services/analytics/events/transactions.ts b/src/services/analytics/events/transactions.ts
@@ -31,7 +31,7 @@ export enum TX_TYPES {
   recovery_setup = 'recovery_setup',
   recovery_edit = 'recovery_edit',
   recovery_remove = 'recovery_remove',
-  recovery_init = 'recovery_init',
+  recovery_attempt = 'recovery_attempt',
   recovery_cancel = 'recovery_cancel',
 }