fix: Add missing safe creation events

src/components/create-safe/InfoWidget/index.tsx

@@ -15,6 +15,7 @@ import type { ReactElement } from 'react'
 import LightbulbIcon from '@/public/images/common/lightbulb.svg'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import css from './styles.module.css'
+import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 
 type InfoWidgetProps = {
   title: string
@@ -51,7 +52,12 @@ const InfoWidget = ({ title, steps, variant, startExpanded = false }: InfoWidget
         <CardContent>
           {steps.map(({ title, text }) => {
             return (
-              <Accordion key={title} className={css.tipAccordion} defaultExpanded={startExpanded}>
+              <Accordion
+                key={title}
+                className={css.tipAccordion}
+                defaultExpanded={startExpanded}
+                onChange={(e, expanded) => expanded && trackEvent({ ...CREATE_SAFE_EVENTS.OPEN_HINT, label: title })}
+              >
                 <AccordionSummary
                   expandIcon={
                     <IconButton sx={{ '&:hover': { background: ({ palette }) => palette[variant]?.light } }}>

src/components/create-safe/status/useSafeCreation.ts

@@ -12,6 +12,7 @@ import { useCurrentChain } from '@/hooks/useChains'
 import useWallet from '@/hooks/wallets/useWallet'
 import type { PendingSafeData, PendingSafeTx } from '@/components/create-safe/types.d'
 import type { EthersError } from '@/utils/ethers-utils'
+import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 
 export enum SafeCreationStatus {
   AWAITING = 'AWAITING',
@@ -40,6 +41,7 @@ export const useSafeCreation = (
 
   const createSafeCallback = useCallback(
     async (txHash: string, tx: PendingSafeTx) => {
+      trackEvent(CREATE_SAFE_EVENTS.SUBMIT_CREATE_SAFE)
       setPendingSafe((prev) => (prev ? { ...prev, txHash, tx } : undefined))
     },
     [setPendingSafe],

src/components/new-safe/steps/Step1/index.tsx

@@ -12,6 +12,7 @@ import layoutCss from '@/components/new-safe/CreateSafe/styles.module.css'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import NetworkWarning from '@/components/new-safe/NetworkWarning'
 import NameInput from '@/components/common/NameInput'
+import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 
 type CreateSafeStep1Form = {
   name: string
@@ -49,6 +50,10 @@ function CreateSafeStep1({
     const name = data.name || fallbackName
     setSafeName(name)
     onSubmit({ ...data, name })
+
+    if (data.name) {
+      trackEvent(CREATE_SAFE_EVENTS.NAME_SAFE)
+    }
   }
 
   const isDisabled = isWrongChain || !isValid

src/components/new-safe/steps/Step2/index.tsx

@@ -16,6 +16,7 @@ import css from './styles.module.css'
 import layoutCss from '@/components/new-safe/CreateSafe/styles.module.css'
 import NetworkWarning from '@/components/new-safe/NetworkWarning'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
+import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 
 enum CreateSafeStep2Fields {
   owners = 'owners',
@@ -74,8 +75,22 @@ const CreateSafeStep2 = ({
     onBack(formData)
   }
 
+  const onFormSubmit = handleSubmit((data) => {
+    onSubmit(data)
+
+    trackEvent({
+      ...CREATE_SAFE_EVENTS.OWNERS,
+      label: data.owners.length,
+    })
+
+    trackEvent({
+      ...CREATE_SAFE_EVENTS.THRESHOLD,
+      label: data.threshold,
+    })
+  })
+
   return (
-    <form onSubmit={handleSubmit(onSubmit)} id={STEP_2_FORM_ID}>
+    <form onSubmit={onFormSubmit} id={STEP_2_FORM_ID}>
       <FormProvider {...formMethods}>
         <Box className={layoutCss.row}>
           {ownerFields.map((field, i) => (

src/components/new-safe/steps/Step4/useSafeCreation.ts

@@ -17,6 +17,7 @@ import {
 } from '@/components/new-safe/steps/Step4/logic'
 import { useAppDispatch } from '@/store'
 import { closeByGroupKey } from '@/store/notificationsSlice'
+import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 
 export enum SafeCreationStatus {
   AWAITING,
@@ -46,6 +47,7 @@ export const useSafeCreation = (
 
   const createSafeCallback = useCallback(
     async (txHash: string, tx: PendingSafeTx) => {
+      trackEvent(CREATE_SAFE_EVENTS.SUBMIT_CREATE_SAFE)
       setPendingSafe((prev) => (prev ? { ...prev, txHash, tx } : undefined))
     },
     [setPendingSafe],

src/services/analytics/events/createLoadSafe.ts

@@ -55,6 +55,10 @@ export const CREATE_SAFE_EVENTS = {
     action: 'Open Safe',
     category: CREATE_SAFE_CATEGORY,
   },
+  OPEN_HINT: {
+    action: 'Open Hint',
+    category: CREATE_SAFE_CATEGORY,
+  },
 }
 
 export const LOAD_SAFE_CATEGORY = 'load-safe'