Feat: analytics through safe-apps-sdk (#80)

src/analytics/lockEvents.ts

@@ -0,0 +1,23 @@
+export const LOCK_EVENTS = {
+  LOCK_BUTTON: {
+    action: 'Lock tokens button',
+  },
+  UNLOCK_BUTTON: {
+    action: 'Unlock tokens button',
+  },
+  WITHDRAW_BUTTON: {
+    action: 'Withdraw tokens button',
+  },
+  LOCK_SUCCESS: {
+    action: 'Transaction proposed',
+    label: 'locking',
+  },
+  UNLOCK_SUCCESS: {
+    action: 'Transaction proposed',
+    label: 'unlocking',
+  },
+  WITHDRAW_SUCCESS: {
+    action: 'Transaction proposed',
+    label: 'withdrawal',
+  },
+}

src/analytics/navigation.ts

@@ -0,0 +1,14 @@
+export const NAVIGATION_EVENTS = {
+  OPEN_LOCKING: {
+    action: 'Open locking page',
+  },
+  OPEN_UNLOCKING: {
+    action: 'Open unlocking/withdrawal page',
+  },
+  OPEN_CLAIM: {
+    action: 'Open claim page',
+  },
+  LEADERBOARD_SHOW_MORE: {
+    action: 'Leaderboard show more',
+  },
+}

src/components/NavTabs/index.tsx

@@ -3,11 +3,14 @@ import NextLink, { type LinkProps as NextLinkProps } from 'next/link'
 import { Tab, Tabs, Typography, type TabProps } from '@mui/material'
 import { useRouter } from 'next/router'
 import css from './styles.module.css'
+import { useIsSafeApp } from '@/hooks/useIsSafeApp'
+import Track from '../Track'
 
 export type NavItem = {
   label: string
   icon?: ReactElement
   href: string
+  event: { action: string }
 }
 
 type Props = TabProps & NextLinkProps
@@ -38,27 +41,29 @@ const NextLinkComposed = forwardRef<HTMLAnchorElement, Props>(function NextCompo
 const NavTabs = ({ tabs }: { tabs: NavItem[] }) => {
   const router = useRouter()
   const activeTab = Math.max(0, tabs.map((tab) => tab.href).indexOf(router.pathname))
-  const query = router.query.safe ? { safe: router.query.safe } : undefined
+
+  const isSafeApp = useIsSafeApp()
 
   return (
     <Tabs value={activeTab} variant="scrollable" allowScrollButtonsMobile className={css.tabs}>
       {tabs.map((tab, idx) => (
-        <Tab
-          component={NextLinkComposed}
-          key={tab.href}
-          href={{ pathname: tab.href, query }}
-          className={css.tab}
-          label={
-            <Typography
-              variant="body2"
-              fontWeight={700}
-              color={activeTab === idx ? 'primary' : 'primary.light'}
-              className={css.label}
-            >
-              {tab.label}
-            </Typography>
-          }
-        />
+        <Track {...tab.event} label={isSafeApp ? 'safe-app' : 'standalone'} key={tab.href}>
+          <Tab
+            component={NextLinkComposed}
+            href={{ pathname: tab.href }}
+            className={css.tab}
+            label={
+              <Typography
+                variant="body2"
+                fontWeight={700}
+                color={activeTab === idx ? 'primary' : 'primary.light'}
+                className={css.label}
+              >
+                {tab.label}
+              </Typography>
+            }
+          />
+        </Track>
       ))}
     </Tabs>
   )

src/components/PageLayout/index.tsx

@@ -10,6 +10,7 @@ import css from './styles.module.css'
 import NavTabs from '../NavTabs'
 import { AppRoutes, RoutesWithNavigation, RoutesRequiringWallet } from '@/config/routes'
 import { useRouter } from 'next/router'
+import { NAVIGATION_EVENTS } from '@/analytics/navigation'
 import { useWallet } from '@/hooks/useWallet'
 import { useIsSafeApp } from '@/hooks/useIsSafeApp'
 
@@ -44,10 +45,12 @@ export const PageLayout = ({ children }: { children: ReactNode }): ReactElement
                 {
                   label: 'Activity App',
                   href: AppRoutes.activity,
+                  event: NAVIGATION_EVENTS.OPEN_LOCKING,
                 },
                 {
                   label: 'Governance / Claiming',
                   href: AppRoutes.index,
+                  event: NAVIGATION_EVENTS.OPEN_CLAIM,
                 },
               ]}
             />

src/components/TockenUnlocking/UnlockTokenWidget.tsx

@@ -13,6 +13,9 @@ import { getCurrentDays } from '@/utils/date'
 import { CHAIN_START_TIMESTAMPS } from '@/config/constants'
 import { BoostBreakdown } from '../TokenLocking/BoostBreakdown'
 import { SEASON2_START } from '../TokenLocking/BoostGraph/graphConstants'
+import Track from '../Track'
+import { LOCK_EVENTS } from '@/analytics/lockEvents'
+import { trackSafeAppEvent } from '@/utils/analytics'
 import MilesReceipt from '@/components/TokenLocking/MilesReceipt'
 import { useTxSender } from '@/hooks/useTxSender'
 
@@ -69,6 +72,7 @@ export const UnlockTokenWidget = ({
 
     try {
       await txSender?.sendTxs([unlockTx])
+      trackSafeAppEvent(LOCK_EVENTS.UNLOCK_SUCCESS.action)
       setReceiptOpen(true)
     } catch (err) {
       console.error(err)
@@ -119,9 +123,11 @@ export const UnlockTokenWidget = ({
             </Grid>
 
             <Grid item xs={4}>
-              <Button onClick={onUnlock} variant="contained" fullWidth disableElevation disabled={isDisabled}>
-                {isUnlocking ? <CircularProgress size={20} /> : 'Unlock'}
-              </Button>
+              <Track {...LOCK_EVENTS.UNLOCK_BUTTON}>
+                <Button onClick={onUnlock} variant="contained" fullWidth disableElevation disabled={isDisabled}>
+                  {isUnlocking ? <CircularProgress size={20} /> : 'Unlock'}
+                </Button>
+              </Track>
             </Grid>
           </Grid>
         </Grid>

src/components/TockenUnlocking/index.tsx

@@ -19,6 +19,9 @@ import SafeToken from '@/public/images/token.svg'
 import { useMemo, useState } from 'react'
 import { CHAIN_START_TIMESTAMPS } from '@/config/constants'
 import { useSummarizedLockHistory } from '@/hooks/useSummarizedLockHistory'
+import Track from '../Track'
+import { LOCK_EVENTS } from '@/analytics/lockEvents'
+import { trackSafeAppEvent } from '@/utils/analytics'
 import { useTxSender } from '@/hooks/useTxSender'
 
 const TokenUnlocking = () => {
@@ -41,6 +44,7 @@ const TokenUnlocking = () => {
     const withdrawTx = createWithdrawTx(chainId)
     try {
       await txSender?.sendTxs([withdrawTx])
+      trackSafeAppEvent(LOCK_EVENTS.WITHDRAW_SUCCESS.action)
     } catch (error) {
       console.error(error)
     }
@@ -98,15 +102,17 @@ const TokenUnlocking = () => {
                   </Typography>
                 </Grid>
               </Box>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={onWithdraw}
-                disabled={totalWithdrawable.eq(0) || isWithdrawing || !isTransactionPossible}
-                sx={{ ml: 'auto !important' }}
-              >
-                {isWithdrawing ? <CircularProgress size={20} /> : 'Withdraw'}
-              </Button>
+              <Track {...LOCK_EVENTS.WITHDRAW_BUTTON}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={onWithdraw}
+                  disabled={totalWithdrawable.eq(0) || isWithdrawing || !isTransactionPossible}
+                  sx={{ ml: 'auto !important' }}
+                >
+                  {isWithdrawing ? <CircularProgress size={20} /> : 'Withdraw'}
+                </Button>
+              </Track>
             </Stack>
           </Paper>
         </Grid>

src/components/TokenLocking/ActionNavigation.tsx

@@ -1,7 +1,8 @@
+import { NAVIGATION_EVENTS } from '@/analytics/navigation'
 import { AppRoutes } from '@/config/routes'
-
 import { Typography, Stack, Button, Box } from '@mui/material'
 import { useRouter } from 'next/router'
+import Track from '../Track'
 
 import css from './styles.module.css'
 
@@ -19,12 +20,16 @@ export const ActionNavigation = () => {
         <Typography variant="subtitle1" fontWeight={700}>
           Remove SAFE from locking
         </Typography>
-
-        <Button variant="outlined" color="primary" onClick={onUnlockAndWithdraw} sx={{ borderWidth: '1px !important' }}>
-          <Box display="flex" alignItems="center">
-            <Box>Unlock/Withdraw</Box>
-          </Box>
-        </Button>
+        <Track {...NAVIGATION_EVENTS.OPEN_UNLOCKING}>
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={onUnlockAndWithdraw}
+            sx={{ borderWidth: '1px !important' }}
+          >
+            Unlock/Withdraw
+          </Button>
+        </Track>
       </Box>
     </Stack>
   )

src/components/TokenLocking/Leaderboard.tsx

@@ -25,6 +25,8 @@ import { formatAmount } from '@/utils/formatters'
 import { formatEther } from 'ethers/lib/utils'
 import { ReactElement, useState } from 'react'
 import { useEnsLookup } from '@/hooks/useEnsLookup'
+import Track from '../Track'
+import { NAVIGATION_EVENTS } from '@/analytics/navigation'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -163,16 +165,18 @@ const LeaderboardPage = ({ index, onLoadMore }: { index: number; onLoadMore?: ()
       {onLoadMore && leaderboardPage?.next && (
         <tr>
           <td colSpan={3} style={{ textAlign: 'center' }}>
-            <Link
-              sx={{
-                '&:hover': {
-                  cursor: 'pointer',
-                },
-              }}
-              onClick={onLoadMore}
-            >
-              Load more
-            </Link>
+            <Track {...NAVIGATION_EVENTS.LEADERBOARD_SHOW_MORE}>
+              <Link
+                sx={{
+                  '&:hover': {
+                    cursor: 'pointer',
+                  },
+                }}
+                onClick={onLoadMore}
+              >
+                Show more
+              </Link>
+            </Track>
           </td>
         </tr>
       )}

src/components/TokenLocking/LockTokenWidget.tsx

@@ -18,6 +18,9 @@ import { SEASON2_START } from './BoostGraph/graphConstants'
 import { CHAIN_START_TIMESTAMPS, UNLIMITED_APPROVAL_AMOUNT } from '@/config/constants'
 import { getCurrentDays } from '@/utils/date'
 import { BoostBreakdown } from './BoostBreakdown'
+import Track from '../Track'
+import { LOCK_EVENTS } from '@/analytics/lockEvents'
+import { trackSafeAppEvent } from '@/utils/analytics'
 import MilesReceipt from '@/components/TokenLocking/MilesReceipt'
 import { BaseTransaction, useTxSender } from '@/hooks/useTxSender'
 import { useSafeTokenLockingAllowance } from '@/hooks/useSafeTokenBalance'
@@ -99,7 +102,7 @@ export const LockTokenWidget = ({ safeBalance }: { safeBalance: BigNumberish | u
           await txSender?.sendTxs([txs[i]])
         }
       }
-
+      trackSafeAppEvent(LOCK_EVENTS.LOCK_SUCCESS.action)
       setReceiptOpen(true)
     } catch (error) {
       console.error(error)
@@ -160,9 +163,11 @@ export const LockTokenWidget = ({ safeBalance }: { safeBalance: BigNumberish | u
               </Grid>
 
               <Grid item xs={4}>
-                <Button onClick={onLockTokens} variant="contained" fullWidth disableElevation disabled={isDisabled}>
-                  {isLocking ? <CircularProgress size={20} /> : 'Lock'}
-                </Button>
+                <Track {...LOCK_EVENTS.LOCK_BUTTON}>
+                  <Button onClick={onLockTokens} variant="contained" fullWidth disableElevation disabled={isDisabled}>
+                    {isLocking ? <CircularProgress size={20} /> : 'Lock'}
+                  </Button>
+                </Track>
               </Grid>
             </Grid>
           </Grid>

src/components/Track/index.tsx

@@ -0,0 +1,51 @@
+import { trackSafeAppEvent } from '@/utils/analytics'
+import type { ReactElement } from 'react'
+import { Fragment, useEffect, useRef } from 'react'
+
+type Props = {
+  children: ReactElement
+  as?: 'span' | 'div'
+  action: string
+  label?: string
+}
+
+const shouldTrack = (el: HTMLDivElement) => {
+  const disabledChildren = el.querySelectorAll('*[disabled]')
+  return disabledChildren.length === 0
+}
+
+const Track = ({ children, as: Wrapper = 'span', ...trackData }: Props): typeof children => {
+  const el = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!el.current) {
+      return
+    }
+
+    const trackEl = el.current
+
+    const handleClick = () => {
+      if (shouldTrack(trackEl)) {
+        trackSafeAppEvent(trackData.action, trackData.label)
+      }
+    }
+
+    // We cannot use onClick as events in children do not always bubble up
+    trackEl.addEventListener('click', handleClick)
+    return () => {
+      trackEl.removeEventListener('click', handleClick)
+    }
+  }, [el, trackData])
+
+  if (children.type === Fragment) {
+    throw new Error('Fragments cannot be tracked.')
+  }
+
+  return (
+    <Wrapper data-track={trackData.action} ref={el}>
+      {children}
+    </Wrapper>
+  )
+}
+
+export default Track

src/utils/analytics.ts

@@ -0,0 +1,13 @@
+const SAFE_APPS_ANALYTICS_CATEGORY = 'safe-apps-analytics'
+
+export const trackSafeAppEvent = (action: string, label?: string) => {
+  window.parent.postMessage(
+    {
+      category: SAFE_APPS_ANALYTICS_CATEGORY,
+      action,
+      label,
+      safeAppName: 'Safe{Miles}',
+    },
+    '*',
+  )
+}