Feat: add extra tracking events

src/components/common/NetworkSelector/index.tsx

@@ -14,7 +14,7 @@ import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
 
 const keepPathRoutes = [AppRoutes.welcome, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
 
-const NetworkSelector = (): ReactElement => {
+const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement => {
   const { configs } = useChains()
   const chainId = useChainId()
   const router = useRouter()
@@ -80,7 +80,7 @@ const NetworkSelector = (): ReactElement => {
       {configs.map((chain) => {
         return (
           <MenuItem key={chain.chainId} value={chain.chainId}>
-            <Link href={getNetworkLink(chain.shortName)} passHref>
+            <Link href={getNetworkLink(chain.shortName)} passHref onClick={props.onChainSelect}>
               <ChainIndicator chainId={chain.chainId} inline />
             </Link>
           </MenuItem>

src/components/sidebar/SafeListItem/index.tsx

@@ -22,6 +22,8 @@ import { sameAddress } from '@/utils/addresses'
 import PendingActionButtons from '@/components/sidebar/PendingActions'
 import usePendingActions from '@/hooks/usePendingActions'
 import useOnceVisible from '@/hooks/useOnceVisible'
+import Track from '@/components/common/Track'
+import { OVERVIEW_EVENTS } from '@/services/analytics'
 
 const SafeListItem = ({
   address,
@@ -82,32 +84,34 @@ const SafeListItem = ({
         )
       }
     >
-      <Link href={href} passHref legacyBehavior>
-        <ListItemButton
-          key={address}
-          onClick={closeDrawer}
-          selected={isCurrentSafe}
-          className={classnames(css.safe, { [css.open]: isCurrentSafe })}
-          ref={safeRef}
-        >
-          <ListItemIcon>
-            <SafeIcon address={address} {...rest} />
-          </ListItemIcon>
-          <ListItemText
-            sx={noActions ? undefined : { pr: 10 }}
-            primaryTypographyProps={{
-              variant: 'body2',
-              component: 'div',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-            }}
-            secondaryTypographyProps={{ component: 'div', color: 'primary' }}
-            primary={name || ''}
-            secondary={<EthHashInfo address={address} showAvatar={false} showName={false} prefix={shortName} />}
-          />
-        </ListItemButton>
-      </Link>
+      <Track {...OVERVIEW_EVENTS.SIDEBAR_OPEN_SAFE}>
+        <Link href={href} passHref legacyBehavior>
+          <ListItemButton
+            key={address}
+            onClick={closeDrawer}
+            selected={isCurrentSafe}
+            className={classnames(css.safe, { [css.open]: isCurrentSafe })}
+            ref={safeRef}
+          >
+            <ListItemIcon>
+              <SafeIcon address={address} {...rest} />
+            </ListItemIcon>
+            <ListItemText
+              sx={noActions ? undefined : { pr: 10 }}
+              primaryTypographyProps={{
+                variant: 'body2',
+                component: 'div',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+              }}
+              secondaryTypographyProps={{ component: 'div', color: 'primary' }}
+              primary={name || ''}
+              secondary={<EthHashInfo address={address} showAvatar={false} showName={false} prefix={shortName} />}
+            />
+          </ListItemButton>
+        </Link>
+      </Track>
 
       <PendingActionButtons
         safeAddress={address}

src/components/sidebar/SafeListItem/styles.module.css

@@ -4,6 +4,11 @@
   padding-left: var(--space-2);
 }
 
+/* <Track> */
+.container > span {
+  flex: 1;
+}
+
 .safe {
   border-radius: 8px;
   border: 1px solid var(--color-border-light);

src/components/walletconnect/WcInput/index.tsx

@@ -6,6 +6,7 @@ import { getClipboard, isClipboardSupported } from '@/utils/clipboard'
 import { isPairingUri } from '@/services/walletconnect/utils'
 import Track from '@/components/common/Track'
 import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
+import { trackEvent } from '@/services/analytics'
 
 const WcInput = ({ uri }: { uri: string }) => {
   const { walletConnect } = useContext(WalletConnectContext)
@@ -41,10 +42,18 @@ const WcInput = ({ uri }: { uri: string }) => {
     [walletConnect],
   )
 
+  // Insert a pre-filled uri
   useEffect(() => {
     onInput(uri)
   }, [onInput, uri])
 
+  // Track errors
+  useEffect(() => {
+    if (error) {
+      trackEvent({ ...WALLETCONNECT_EVENTS.SHOW_ERROR, label: error.message })
+    }
+  }, [error])
+
   const onPaste = useCallback(async () => {
     // Errors are handled by in getClipboard
     const clipboard = await getClipboard()

src/components/walletconnect/WcProposalForm/CompatibilityWarning.tsx

@@ -1,5 +1,5 @@
 import { Alert, Typography } from '@mui/material'
-import type { ReactElement } from 'react'
+import { useCallback } from 'react'
 import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 
 import ChainIndicator from '@/components/common/ChainIndicator'
@@ -8,17 +8,24 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 
 import css from './styles.module.css'
 import NetworkSelector from '@/components/common/NetworkSelector'
+import { trackEvent } from '@/services/analytics'
+import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
 
 export const CompatibilityWarning = ({
   proposal,
   chainIds,
 }: {
   proposal: Web3WalletTypes.SessionProposal
   chainIds: Array<string>
-}): ReactElement => {
+}) => {
   const { safe } = useSafeInfo()
   const isUnsupportedChain = !chainIds.includes(safe.chainId)
   const { severity, message } = useCompatibilityWarning(proposal, isUnsupportedChain)
+  const peerUrl = proposal.params.proposer.metadata.url || proposal.verifyContext.verified.origin
+
+  const onChainChange = useCallback(() => {
+    trackEvent({ ...WALLETCONNECT_EVENTS.SWITCH_FROM_UNSUPPORTED_CHAIN, label: peerUrl })
+  }, [peerUrl])
 
   return (
     <>
@@ -40,7 +47,7 @@ export const CompatibilityWarning = ({
 
           <Typography mt={3} component="div">
             Switch network
-            <NetworkSelector />
+            <NetworkSelector onChainSelect={onChainChange} />
           </Typography>
         </>
       )}

src/components/walletconnect/WcProposalForm/index.tsx

@@ -33,8 +33,8 @@ const WcProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): R
 
   const name = getPeerName(proposer) || 'Unknown dApp'
   const isHighRisk = proposal.verifyContext.verified.validation === 'INVALID' || isWarnedBridge(origin, name)
-  const isBlocked = isUnsupportedChain || isScam || isBlockedBridge(origin)
-  const disabled = !safeLoaded || isBlocked || (isHighRisk && !understandsRisk)
+  const isBlocked = isScam || isBlockedBridge(origin)
+  const disabled = !safeLoaded || isUnsupportedChain || isBlocked || (isHighRisk && !understandsRisk)
 
   const onCheckboxClick = useCallback(
     (_: ChangeEvent, checked: boolean) => {
@@ -50,6 +50,7 @@ const WcProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): R
     [url],
   )
 
+  // Track risk/scam/bridge warnings
   useEffect(() => {
     if (isHighRisk || isBlocked) {
       trackEvent({
@@ -59,6 +60,16 @@ const WcProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): R
     }
   }, [isHighRisk, isBlocked, url])
 
+  // Track unsupported chain warnings
+  useEffect(() => {
+    if (isUnsupportedChain) {
+      trackEvent({
+        ...WALLETCONNECT_EVENTS.UNSUPPORTED_CHAIN,
+        label: url,
+      })
+    }
+  }, [url, isUnsupportedChain])
+
   return (
     <div className={css.container}>
       <Typography variant="body2" color="text.secondary">

src/components/walletconnect/WcSessionMananger/index.tsx

@@ -118,6 +118,11 @@ const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
     return () => clearTimeout(timer)
   }, [changedSession, setOpen])
 
+  // Track errors
+  useEffect(() => {
+    if (error) trackEvent({ ...WALLETCONNECT_EVENTS.SHOW_ERROR, label: error.message })
+  }, [error])
+
   //
   // UI states
   //

src/services/analytics/events/overview.ts

@@ -31,6 +31,10 @@ export const OVERVIEW_EVENTS = {
     action: 'Sidebar',
     category: OVERVIEW_CATEGORY,
   },
+  SIDEBAR_OPEN_SAFE: {
+    action: 'Sidebar open Safe',
+    category: OVERVIEW_CATEGORY,
+  },
   TOTAL_ADDED_SAFES: {
     event: EventType.META,
     action: 'Total added Safes',

src/services/analytics/events/walletconnect.ts

@@ -45,4 +45,18 @@ export const WALLETCONNECT_EVENTS = {
     action: 'WC accept risk',
     category: WALLETCONNECT_CATEGORY,
   },
+  UNSUPPORTED_CHAIN: {
+    action: 'WC unsupported chain',
+    category: WALLETCONNECT_CATEGORY,
+    event: EventType.META,
+  },
+  SHOW_ERROR: {
+    action: 'WC show error',
+    category: WALLETCONNECT_CATEGORY,
+    event: EventType.META,
+  },
+  SWITCH_FROM_UNSUPPORTED_CHAIN: {
+    action: 'WC switch from unsupported chain',
+    category: WALLETCONNECT_CATEGORY,
+  },
 }