[Multichain] fix: Add analytics events [SW-165]

src/components/common/NetworkSelector/NetworkMultiSelector.tsx

@@ -121,7 +121,7 @@ const NetworkMultiSelector = ({
               ))
             }
             renderOption={(props, chain, { selected }) => (
-              <li {...props}>
+              <li key={chain.chainId} {...props}>
                 <Checkbox size="small" checked={selected} />
                 <ChainIndicator chainId={chain.chainId} inline />
               </li>

src/components/common/NetworkSelector/index.tsx

@@ -1,4 +1,5 @@
 import ChainIndicator from '@/components/common/ChainIndicator'
+import Track from '@/components/common/Track'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import { useAppSelector } from '@/store'
 import { selectChains } from '@/store/chainsSlice'
@@ -26,7 +27,7 @@ import { useRouter } from 'next/router'
 import css from './styles.module.css'
 import { useChainId } from '@/hooks/useChainId'
 import { type ReactElement, useCallback, useMemo, useState } from 'react'
-import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
+import { trackEvent, OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
 
 import { useAllSafesGrouped } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
 import useSafeAddress from '@/hooks/useSafeAddress'
@@ -79,23 +80,25 @@ const UndeployedNetworkMenuItem = ({
   const isDisabled = !chain.available
 
   return (
-    <MenuItem
-      value={chain.chainId}
-      sx={{ '&:hover': { backgroundColor: 'inherit' } }}
-      onClick={() => onSelect(chain)}
-      disabled={isDisabled}
-    >
-      <Box className={css.item}>
-        <ChainIndicator responsive={isSelected} chainId={chain.chainId} inline />
-        {isDisabled ? (
-          <Typography variant="caption" component="span" className={css.comingSoon}>
-            Not available
-          </Typography>
-        ) : (
-          <PlusIcon className={css.plusIcon} />
-        )}
-      </Box>
-    </MenuItem>
+    <Track {...OVERVIEW_EVENTS.ADD_NEW_NETWORK} label={OVERVIEW_LABELS.top_bar}>
+      <MenuItem
+        value={chain.chainId}
+        sx={{ '&:hover': { backgroundColor: 'inherit' } }}
+        onClick={() => onSelect(chain)}
+        disabled={isDisabled}
+      >
+        <Box className={css.item}>
+          <ChainIndicator responsive={isSelected} chainId={chain.chainId} inline />
+          {isDisabled ? (
+            <Typography variant="caption" component="span" className={css.comingSoon}>
+              Not available
+            </Typography>
+          ) : (
+            <PlusIcon className={css.plusIcon} />
+          )}
+        </Box>
+      </MenuItem>
+    </Track>
   )
 }
 

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -26,7 +26,7 @@ import { useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
 import useWalletCanPay from '@/hooks/useWalletCanPay'
 import useWallet from '@/hooks/wallets/useWallet'
 import { CREATE_SAFE_CATEGORY, CREATE_SAFE_EVENTS, OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
-import { gtmSetSafeAddress } from '@/services/analytics/gtm'
+import { gtmSetChainId, gtmSetSafeAddress } from '@/services/analytics/gtm'
 import { asError } from '@/services/exceptions/utils'
 import { useAppDispatch, useAppSelector } from '@/store'
 import { FEATURES, hasFeature } from '@/utils/chains'
@@ -215,6 +215,8 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
         createSafe(network, replayedSafeWithNonce, safeAddress)
       }
 
+      gtmSetChainId(chain.chainId)
+
       if (isCounterfactualEnabled && payMethod === PayMethod.PayLater) {
         router?.push({
           pathname: AppRoutes.home,
@@ -237,6 +239,8 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const createSafe = async (chain: ChainInfo, props: ReplayedSafeProps, safeAddress: string) => {
     if (!wallet) return
 
+    gtmSetChainId(chain.chainId)
+
     try {
       if (isCounterfactualEnabled && payMethod === PayMethod.PayLater) {
         gtmSetSafeAddress(safeAddress)

src/components/welcome/MyAccounts/AddNetworkButton.tsx

@@ -1,4 +1,6 @@
+import Track from '@/components/common/Track'
 import { CreateSafeOnNewChain } from '@/features/multichain/components/CreateSafeOnNewChain'
+import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
 import { Button } from '@mui/material'
 import { useState } from 'react'
 import PlusIcon from '@/public/images/common/plus.svg'
@@ -16,9 +18,11 @@ export const AddNetworkButton = ({
 
   return (
     <>
-      <Button variant="text" fullWidth onClick={() => setOpen(true)}>
-        <PlusIcon /> Add another network
-      </Button>
+      <Track {...OVERVIEW_EVENTS.ADD_NEW_NETWORK} label={OVERVIEW_LABELS.sidebar}>
+        <Button variant="text" fullWidth onClick={() => setOpen(true)}>
+          <PlusIcon /> Add another network
+        </Button>
+      </Track>
 
       {open && (
         <CreateSafeOnNewChain

src/features/multichain/components/CreateSafeOnNewChain/index.tsx

@@ -1,18 +1,9 @@
+import ModalDialog from '@/components/common/ModalDialog'
 import NameInput from '@/components/common/NameInput'
 import NetworkInput from '@/components/common/NetworkInput'
 import ErrorMessage from '@/components/tx/ErrorMessage'
-import {
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  Stack,
-  Typography,
-} from '@mui/material'
+import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
+import { Box, Button, CircularProgress, DialogActions, DialogContent, Divider, Stack, Typography } from '@mui/material'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useSafeCreationData } from '../../hooks/useSafeCreationData'
 import { replayCounterfactualSafeDeployment } from '@/features/counterfactual/utils'
@@ -60,7 +51,7 @@ const ReplaySafeDialog = ({
     mode: 'all',
     defaultValues: {
       name: currentName,
-      chainId: chain?.chainId,
+      chainId: chain?.chainId || '',
     },
   })
   const { handleSubmit, formState } = formMethods
@@ -74,6 +65,11 @@ const ReplaySafeDialog = ({
   // Load some data
   const [safeCreationData, safeCreationDataError, safeCreationDataLoading] = safeCreationResult
 
+  const onCancel = () => {
+    trackEvent({ ...OVERVIEW_EVENTS.CANCEL_ADD_NEW_NETWORK })
+    onClose()
+  }
+
   const onFormSubmit = handleSubmit(async (data) => {
     setIsSubmitting(true)
 
@@ -97,6 +93,8 @@ const ReplaySafeDialog = ({
         return
       }
 
+      trackEvent({ ...OVERVIEW_EVENTS.SUBMIT_ADD_NEW_NETWORK, label: selectedChain.chainName })
+
       // 2. Replay Safe creation and add it to the counterfactual Safes
       replayCounterfactualSafeDeployment(selectedChain.chainId, safeAddress, safeCreationData, data.name, dispatch)
 
@@ -126,10 +124,8 @@ const ReplaySafeDialog = ({
     !chain && safeCreationData && replayableChains && replayableChains.filter((chain) => chain.available).length === 0
 
   return (
-    <Dialog open={open} onClose={onClose} onClick={(e) => e.stopPropagation()}>
+    <ModalDialog open={open} onClose={onClose} dialogTitle="Add another network" hideChainIndicator>
       <form onSubmit={onFormSubmit} id="recreate-safe">
-        <DialogTitle fontWeight={700}>Add another network</DialogTitle>
-        <Divider />
         <DialogContent>
           <FormProvider {...formMethods}>
             <Stack spacing={2}>
@@ -187,7 +183,7 @@ const ReplaySafeDialog = ({
             </Box>
           ) : (
             <>
-              <Button variant="outlined" onClick={onClose}>
+              <Button variant="outlined" onClick={onCancel}>
                 Cancel
               </Button>
               <Button type="submit" variant="contained" disabled={submitDisabled}>
@@ -197,7 +193,7 @@ const ReplaySafeDialog = ({
           )}
         </DialogActions>
       </form>
-    </Dialog>
+    </ModalDialog>
   )
 }
 

src/services/analytics/events/overview.ts

@@ -35,6 +35,14 @@ export const OVERVIEW_EVENTS = {
     action: 'Add new network',
     category: OVERVIEW_CATEGORY,
   },
+  SUBMIT_ADD_NEW_NETWORK: {
+    action: 'Submit add new network',
+    category: OVERVIEW_CATEGORY,
+  },
+  CANCEL_ADD_NEW_NETWORK: {
+    action: 'Cancel add new network',
+    category: OVERVIEW_CATEGORY,
+  },
   DELETED_FROM_WATCHLIST: {
     action: 'Deleted from watchlist',
     category: OVERVIEW_CATEGORY,