Analytics: track Buy Crypto button (#3029)

* Analytics: track Buy Crypto button * Refactor * Track page path
safe-global · Dec 19, 2023 · 44b3069 · 44b3069
1 parent 0fde08e
commit 44b3069
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 51 deletions.
diff --git a/src/components/balances/AssetsTable/NoAssets.tsx b/src/components/balances/AssetsTable/NoAssets.tsx
@@ -1,28 +1,19 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { Box, Button, FormControlLabel, Grid, Paper, Switch, Typography } from '@mui/material'
+import { Box, FormControlLabel, Grid, Paper, Switch, Typography } from '@mui/material'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import QRCode from '@/components/common/QRCode'
-import { AppRoutes } from '@/config/routes'
-import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { useCurrentChain } from '@/hooks/useChains'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { useAppDispatch, useAppSelector } from '@/store'
 import { selectSettings, setQrShortName } from '@/store/settingsSlice'
-import AddIcon from '@mui/icons-material/Add'
+import BuyCryproButton from '@/components/common/BuyCryproButton'
 
 const NoAssets = () => {
-  const router = useRouter()
   const safeAddress = useSafeAddress()
   const chain = useCurrentChain()
   const dispatch = useAppDispatch()
   const settings = useAppSelector(selectSettings)
   const qrPrefix = settings.shortName.qr ? `${chain?.shortName}:` : ''
   const qrCode = `${qrPrefix}${safeAddress}`
-  const [apps] = useRemoteSafeApps()
-
-  // @FIXME: use tags instead of name
-  const rampSafeApp = apps?.find((app) => app.name === 'Ramp Network')
 
   return (
     <Paper>
@@ -55,18 +46,9 @@ const NoAssets = () => {
             <EthHashInfo address={safeAddress} shortAddress={false} showCopyButton hasExplorer avatarSize={24} />
           </Box>
 
-          {rampSafeApp && (
-            <Box alignSelf="flex-start">
-              <Link
-                href={{ pathname: AppRoutes.apps.index, query: { safe: router.query.safe, appUrl: rampSafeApp.url } }}
-                passHref
-              >
-                <Button variant="contained" size="small" startIcon={<AddIcon />}>
-                  Buy crypto
-                </Button>
-              </Link>
-            </Box>
-          )}
+          <Box alignSelf="flex-start">
+            <BuyCryproButton />
+          </Box>
         </Grid>
       </Grid>
     </Paper>

diff --git a/src/components/common/BuyCryproButton/index.tsx b/src/components/common/BuyCryproButton/index.tsx
@@ -0,0 +1,52 @@
+import { usePathname, useSearchParams } from 'next/navigation'
+import Link, { type LinkProps } from 'next/link'
+import { Button } from '@mui/material'
+import AddIcon from '@mui/icons-material/Add'
+import { SafeAppsTag } from '@/config/constants'
+import { AppRoutes } from '@/config/routes'
+import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
+import madProps from '@/utils/mad-props'
+import { useMemo } from 'react'
+import Track from '../Track'
+import { OVERVIEW_EVENTS } from '@/services/analytics'
+
+const useOnrampAppUrl = (): string | undefined => {
+  const [onrampApps] = useRemoteSafeApps(SafeAppsTag.ONRAMP)
+  return onrampApps?.[0]?.url
+}
+
+const useBuyCryptoHref = (): LinkProps['href'] | undefined => {
+  const query = useSearchParams()
+  const safe = query.get('safe')
+  const appUrl = useOnrampAppUrl()
+
+  return useMemo(() => {
+    if (!safe || !appUrl) return undefined
+    return { pathname: AppRoutes.apps.open, query: { safe, appUrl } }
+  }, [safe, appUrl])
+}
+
+const buttonStyles = {
+  minHeight: '40px',
+}
+
+const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
+  if (!href) return null
+
+  return (
+    <Track {...OVERVIEW_EVENTS.BUY_CRYPTO_BUTTON} label={pagePath}>
+      <Link href={href} passHref>
+        <Button variant="contained" size="small" sx={buttonStyles} fullWidth startIcon={<AddIcon />}>
+          Buy crypto
+        </Button>
+      </Link>
+    </Track>
+  )
+}
+
+const BuyCryproButton = madProps(_BuyCryptoButton, {
+  href: useBuyCryptoHref,
+  pagePath: usePathname,
+})
+
+export default BuyCryproButton
diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx
@@ -1,7 +1,6 @@
 import QrCodeButton from '@/components/sidebar/QrCodeButton'
 import { TxModalContext } from '@/components/tx-flow'
 import NewTxMenu from '@/components/tx-flow/flows/NewTx'
-import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
 import { useAppSelector } from '@/store'
 import { selectCurrency } from '@/store/settingsSlice'
@@ -19,9 +18,9 @@ import { AppRoutes } from '@/config/routes'
 import useCollectibles from '@/hooks/useCollectibles'
 import type { UrlObject } from 'url'
 import { useVisibleBalances } from '@/hooks/useVisibleBalances'
-import AddIcon from '@mui/icons-material/Add'
 import ArrowIconNW from '@/public/images/common/arrow-top-right.svg'
 import ArrowIconSE from '@/public/images/common/arrow-se.svg'
+import BuyCryproButton from '@/components/common/BuyCryproButton'
 
 const ValueSkeleton = () => <Skeleton variant="text" width={20} />
 
@@ -81,15 +80,12 @@ const Overview = (): ReactElement => {
   const chain = useCurrentChain()
   const { chainId } = chain || {}
   const { setTxFlow } = useContext(TxModalContext)
-  const [apps] = useRemoteSafeApps()
 
   const fiatTotal = useMemo(
     () => (balances.fiatTotal ? formatCurrency(balances.fiatTotal, currency) : ''),
     [currency, balances.fiatTotal],
   )
 
-  const rampSafeApp = apps?.find((app) => app.name === 'Ramp Network')
-
   const assetsLink: UrlObject = {
     pathname: AppRoutes.balances.index,
     query: { safe: router.query.safe },
@@ -185,29 +181,10 @@ const Overview = (): ReactElement => {
             </Grid>
             <Grid item mt="auto">
               <Grid container mt={3} spacing={1} flexWrap="wrap">
-                {rampSafeApp && (
-                  <Grid item xs={12} sm="auto">
-                    <Link
-                      href={{
-                        pathname: AppRoutes.apps.open,
-                        query: { safe: router.query.safe, appUrl: rampSafeApp.url },
-                      }}
-                      passHref
-                      legacyBehavior
-                    >
-                      <Button
-                        size="small"
-                        variant="contained"
-                        color="primary"
-                        startIcon={<AddIcon />}
-                        sx={{ minHeight: '40px' }}
-                        fullWidth
-                      >
-                        Buy crypto
-                      </Button>
-                    </Link>
-                  </Grid>
-                )}
+                <Grid item xs={12} sm="auto">
+                  <BuyCryproButton />
+                </Grid>
+
                 <Grid item xs={6} sm="auto">
                   <Button
                     onClick={handleOnSend}

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -57,6 +57,7 @@ export enum SafeAppsTag {
   DASHBOARD_FEATURED = 'dashboard-widgets',
   SAFE_GOVERNANCE_APP = 'safe-governance-app',
   WALLET_CONNECT = 'wallet-connect',
+  ONRAMP = 'onramp',
 }
 
 // Safe Gelato relay service

diff --git a/src/services/analytics/events/overview.ts b/src/services/analytics/events/overview.ts
@@ -104,6 +104,10 @@ export const OVERVIEW_EVENTS = {
     action: 'Safe viewed',
     category: OVERVIEW_CATEGORY,
   },
+  BUY_CRYPTO_BUTTON: {
+    action: 'Buy crypto button',
+    category: OVERVIEW_CATEGORY,
+  },
 }
 
 export enum OPEN_SAFE_LABELS {