diff --git a/src/components/common/NetworkSelector/NetworkMultiSelector.tsx b/src/components/common/NetworkSelector/NetworkMultiSelector.tsx index 22f0a666e1..c983c3670a 100644 --- a/src/components/common/NetworkSelector/NetworkMultiSelector.tsx +++ b/src/components/common/NetworkSelector/NetworkMultiSelector.tsx @@ -121,7 +121,7 @@ const NetworkMultiSelector = ({ )) } renderOption={(props, chain, { selected }) => ( -
  • +
  • diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx index ab9c22e4d2..389a56ece1 100644 --- a/src/components/common/NetworkSelector/index.tsx +++ b/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 ( - onSelect(chain)} - disabled={isDisabled} - > - - - {isDisabled ? ( - - Not available - - ) : ( - - )} - - + + onSelect(chain)} + disabled={isDisabled} + > + + + {isDisabled ? ( + + Not available + + ) : ( + + )} + + + ) } diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx index 58a8f9f9b3..15357a6b7b 100644 --- a/src/components/new-safe/create/steps/ReviewStep/index.tsx +++ b/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 { if (!wallet) return + gtmSetChainId(chain.chainId) + try { if (isCounterfactualEnabled && payMethod === PayMethod.PayLater) { gtmSetSafeAddress(safeAddress) diff --git a/src/components/welcome/MyAccounts/AddNetworkButton.tsx b/src/components/welcome/MyAccounts/AddNetworkButton.tsx index 4f340f9adc..d2860555a5 100644 --- a/src/components/welcome/MyAccounts/AddNetworkButton.tsx +++ b/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 ( <> - + + + {open && ( { + 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 ( - e.stopPropagation()}> +
    - Add another network - @@ -187,7 +183,7 @@ const ReplaySafeDialog = ({ ) : ( <> -
    + ) } diff --git a/src/services/analytics/events/overview.ts b/src/services/analytics/events/overview.ts index f4a456600a..1f8748d630 100644 --- a/src/services/analytics/events/overview.ts +++ b/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,