Fix: restore tracking of send modals (#2185)

src/components/tx-flow/common/TxButton.tsx

@@ -1,23 +1,59 @@
-import { Button, SvgIcon } from '@mui/material'
-import type { ButtonProps } from '@mui/material'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Button, SvgIcon, type ButtonProps } from '@mui/material'
 
 import AssetsIcon from '@/public/images/sidebar/assets.svg'
 import NftIcon from '@/public/images/common/nft.svg'
+import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
+import { AppRoutes } from '@/config/routes'
+import Track from '@/components/common/Track'
+import { MODALS_EVENTS } from '@/services/analytics'
 
 const TxButton = ({ sx, ...props }: ButtonProps) => (
   <Button variant="contained" sx={{ '& svg path': { fill: 'currentColor' }, ...sx }} fullWidth {...props} />
 )
 
 export const SendTokensButton = ({ onClick, ...props }: ButtonProps) => (
-  <TxButton onClick={onClick} startIcon={<SvgIcon component={AssetsIcon} inheritViewBox />} {...props}>
-    Send tokens
-  </TxButton>
+  <Track {...MODALS_EVENTS.SEND_FUNDS}>
+    <TxButton onClick={onClick} startIcon={<SvgIcon component={AssetsIcon} inheritViewBox />} {...props}>
+      Send tokens
+    </TxButton>
+  </Track>
 )
 
-export const SendNFTsButton = ({ onClick, ...props }: ButtonProps) => (
-  <TxButton onClick={onClick} startIcon={<SvgIcon component={NftIcon} inheritViewBox />} {...props}>
-    Send NFTs
-  </TxButton>
-)
+export const SendNFTsButton = ({ onClick, ...props }: ButtonProps) => {
+  const router = useRouter()
+
+  return (
+    <Track {...MODALS_EVENTS.SEND_COLLECTIBLE}>
+      <Link href={{ pathname: AppRoutes.balances.nfts, query: { safe: router.query.safe } }} passHref>
+        <TxButton startIcon={<SvgIcon component={NftIcon} inheritViewBox />} {...props}>
+          Send NFTs
+        </TxButton>
+      </Link>
+    </Track>
+  )
+}
+
+export const TxBuilderButton = ({ ...props }: ButtonProps) => {
+  const txBuilder = useTxBuilderApp()
+  if (!txBuilder?.app) return null
+
+  return (
+    <Track {...MODALS_EVENTS.CONTRACT_INTERACTION}>
+      <Link href={txBuilder.link} passHref>
+        <a style={{ width: '100%' }}>
+          <TxButton
+            startIcon={<img src={txBuilder.app.iconUrl} height={20} width="auto" alt={txBuilder.app.name} />}
+            variant="outlined"
+            {...props}
+          >
+            Contract interaction
+          </TxButton>
+        </a>
+      </Link>
+    </Track>
+  )
+}
 
 export default TxButton

src/components/tx-flow/flows/NewTx/index.tsx

@@ -1,27 +1,14 @@
 import { useCallback, useContext } from 'react'
-import { useRouter } from 'next/router'
-import TxButton, { SendNFTsButton, SendTokensButton } from '@/components/tx-flow/common/TxButton'
-import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
+import { SendNFTsButton, SendTokensButton, TxBuilderButton } from '@/components/tx-flow/common/TxButton'
 import { Box, Typography } from '@mui/material'
 import { TxModalContext } from '../../'
 import TokenTransferFlow from '../TokenTransfer'
-import { AppRoutes } from '@/config/routes'
 import css from './styles.module.css'
-import Link from 'next/link'
 
-const BUTTONS_HEIGHT = '91px'
+const buttonSx = { height: '91px' }
 
 const NewTxMenu = () => {
-  const router = useRouter()
   const { setTxFlow } = useContext(TxModalContext)
-  const txBuilder = useTxBuilderApp()
-
-  const onNftsClick = useCallback(() => {
-    router.push({
-      pathname: AppRoutes.balances.nfts,
-      query: { safe: router.query.safe },
-    })
-  }, [router])
 
   const onTokensClick = useCallback(() => {
     setTxFlow(<TokenTransferFlow />)
@@ -33,24 +20,11 @@ const NewTxMenu = () => {
         New transaction
       </Typography>
 
-      <SendTokensButton onClick={onTokensClick} sx={{ height: BUTTONS_HEIGHT }} />
-
-      <SendNFTsButton onClick={onNftsClick} sx={{ height: BUTTONS_HEIGHT }} />
-
-      {txBuilder && txBuilder.app && (
-        <Link href={txBuilder.link} passHref>
-          <a style={{ width: '100%' }}>
-            <TxButton
-              startIcon={<img src={txBuilder.app.iconUrl} height={20} width="auto" alt={txBuilder.app.name} />}
-              variant="outlined"
-              onClick={() => console.log('open contract interaction flow')}
-              sx={{ height: BUTTONS_HEIGHT }}
-            >
-              Contract interaction
-            </TxButton>
-          </a>
-        </Link>
-      )}
+      <SendTokensButton onClick={onTokensClick} sx={buttonSx} />
+
+      <SendNFTsButton sx={buttonSx} />
+
+      <TxBuilderButton sx={buttonSx} />
     </Box>
   )
 }