From e9a5d7ab8c8a8c56a52ed5b4d9927191dda85059 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 28 Nov 2023 16:14:44 +0100 Subject: [PATCH] fix: use Track component, rename recovery_init, add enum for Next/Back, rename actions --- .../recovery/CancelRecoveryButton/index.tsx | 2 +- .../GroupedRecoveryListItems/index.tsx | 10 +++++++--- .../RecoveryCards/RecoveryInProgressCard.tsx | 18 ++++++------------ .../RecoveryCards/RecoveryProposalCard.tsx | 17 ++++++----------- .../RecoverAccountFlowReview.tsx | 2 +- src/components/tx-flow/useTxStepper.tsx | 6 +++--- src/services/analytics/events/modals.ts | 5 +++++ src/services/analytics/events/recovery.ts | 6 +++--- src/services/analytics/events/transactions.ts | 2 +- 9 files changed, 33 insertions(+), 35 deletions(-) diff --git a/src/components/recovery/CancelRecoveryButton/index.tsx b/src/components/recovery/CancelRecoveryButton/index.tsx index 78796365f8..9b18e2faa2 100644 --- 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() } else if (onboard) { try { diff --git a/src/components/recovery/GroupedRecoveryListItems/index.tsx b/src/components/recovery/GroupedRecoveryListItems/index.tsx index 28870e252a..1e740e039c 100644 --- 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'}. {' '} You will need to execute the cancellation.{' '} - - Learn more - + + + Learn more + + ) diff --git a/src/components/recovery/RecoveryCards/RecoveryInProgressCard.tsx b/src/components/recovery/RecoveryCards/RecoveryInProgressCard.tsx index 5452def818..2ab0fc630f 100644 --- 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 = ( - - Learn more - + + + Learn more + + ) if (orientation === 'horizontal') { diff --git a/src/components/recovery/RecoveryCards/RecoveryProposalCard.tsx b/src/components/recovery/RecoveryCards/RecoveryProposalCard.tsx index 8a764d1eb0..a766351bc9 100644 --- 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 = ( - - Learn more - + + + Learn more + + ) const recoveryButton = ( diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx index 644a74206d..076844cf9a 100644 --- 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 index cbd6482496..b91900a37a 100644 --- 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 = (initialData: T, eventCategory?: string) => { @@ -10,7 +10,7 @@ const useTxStepper = (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 = (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 index 6d81dd8139..f100737479 100644 --- 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 index 956aefbd26..4974466fa8 100644 --- 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 index 6d6daeb997..aa1ce9dbf1 100644 --- 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', }