Add event for the swap link in the sidebar (#3689)

safe-global · May 13, 2024 · 57bbcc5 · 57bbcc5
1 parent deceb9b
commit 57bbcc5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx
@@ -128,7 +128,7 @@ const Overview = (): ReactElement => {
 
                   {isSwapFeatureEnabled && (
                     <Grid item xs={buttonWidth} sm="auto">
-                      <Track {...SWAP_EVENTS.SWAP_ASSETS} label={SWAP_LABELS.dashboard}>
+                      <Track {...SWAP_EVENTS.OPEN_SWAPS} label={SWAP_LABELS.dashboard}>
                         <Link href={{ pathname: AppRoutes.swap, query: router.query }} passHref type="button">
                           <Button
                             size={isSmallScreen ? 'medium' : 'small'}

diff --git a/src/components/sidebar/SidebarNavigation/index.tsx b/src/components/sidebar/SidebarNavigation/index.tsx
@@ -16,6 +16,8 @@ import { AppRoutes } from '@/config/routes'
 import { useQueuedTxsLength } from '@/hooks/useTxQueue'
 import { useCurrentChain } from '@/hooks/useChains'
 import { FeatureRoutes, hasFeature } from '@/utils/chains'
+import { trackEvent } from '@/services/analytics'
+import { SWAP_EVENTS, SWAP_LABELS } from '@/services/analytics/events/swaps'
 import useIsCounterfactualSafe from '@/features/counterfactual/hooks/useIsCounterfactualSafe'
 
 const getSubdirectory = (pathname: string): string => {
@@ -69,13 +71,24 @@ const Navigation = (): ReactElement => {
     return href
   }
 
+  const handleNavigationClick = (href: string) => {
+    if (href === AppRoutes.swap) {
+      trackEvent({ ...SWAP_EVENTS.OPEN_SWAPS, label: SWAP_LABELS.sidebar })
+    }
+  }
+
   return (
     <SidebarList>
       {enabledNavItems.map((item) => {
         const isSelected = currentSubdirectory === getSubdirectory(item.href)
 
         return (
-          <ListItem key={item.href} disablePadding selected={isSelected}>
+          <ListItem
+            key={item.href}
+            disablePadding
+            selected={isSelected}
+            onClick={() => handleNavigationClick(item.href)}
+          >
             <SidebarListItemButton
               selected={isSelected}
               href={{ pathname: getRoute(item.href), query: { safe: router.query.safe } }}

diff --git a/src/features/swap/components/SwapButton/index.tsx b/src/features/swap/components/SwapButton/index.tsx
@@ -2,7 +2,7 @@ import CheckWallet from '@/components/common/CheckWallet'
 import Track from '@/components/common/Track'
 import { AppRoutes } from '@/config/routes'
 import useSpendingLimit from '@/hooks/useSpendingLimit'
-import { SWAP_EVENTS } from '@/services/analytics/events/swaps'
+import { SWAP_EVENTS, SWAP_LABELS } from '@/services/analytics/events/swaps'
 import { Button } from '@mui/material'
 import type { TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { useRouter } from 'next/router'
@@ -16,7 +16,7 @@ const SwapButton = ({ tokenInfo, amount }: { tokenInfo: TokenInfo; amount: strin
   return (
     <CheckWallet allowSpendingLimit={!!spendingLimit}>
       {(isOk) => (
-        <Track {...SWAP_EVENTS.SWAP_ASSETS} label={tokenInfo.address}>
+        <Track {...SWAP_EVENTS.OPEN_SWAPS} label={SWAP_LABELS.asset}>
           <Button
             variant="outlined"
             color="primary"

diff --git a/src/services/analytics/events/swaps.ts b/src/services/analytics/events/swaps.ts
@@ -1,16 +1,14 @@
 const SWAP_CATEGORY = 'swap'
 
 export const SWAP_EVENTS = {
-  SWAP_ASSETS: {
-    action: 'Swap asset',
-    category: SWAP_CATEGORY,
-  },
-  SWAP_TOKENS: {
-    action: 'Swap total asset',
+  OPEN_SWAPS: {
+    action: 'Open swaps',
     category: SWAP_CATEGORY,
   },
 }
 
 export const SWAP_LABELS = {
   dashboard: 'dashboard',
+  sidebar: 'sidebar',
+  asset: 'asset',
 }