fix: track banner once

safe-global · Oct 6, 2023 · 3f52f1c · 3f52f1c
1 parent beac185
commit 3f52f1c
Showing 1 changed file with 67 additions and 55 deletions.
diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Chip, Grid, SvgIcon, Typography, IconButton } from '@mui/material'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import type { ReactElement } from 'react'
 
 import { CustomTooltip } from '@/components/common/CustomTooltip'
@@ -89,6 +89,21 @@ const getSafesToRegister = (addedSafes: AddedSafesState, allPreferences: PushNot
   }, {})
 }
 
+const TrackBanner = (): null => {
+  const hasTracked = useRef(false)
+
+  useEffect(() => {
+    if (hasTracked.current) {
+      return
+    }
+
+    trackEvent(PUSH_NOTIFICATION_EVENTS.DISPLAY_BANNER)
+    hasTracked.current = true
+  }, [])
+
+  return null
+}
+
 export const PushNotificationsBanner = ({ children }: { children: ReactElement }): ReactElement => {
   const isNotificationsEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
   const addedSafes = useAppSelector(selectAllAddedSafes)
@@ -110,12 +125,6 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
     dismissPushNotificationBanner(safe.chainId)
   }, [dismissPushNotificationBanner, safe.chainId])
 
-  useEffect(() => {
-    if (shouldShowBanner) {
-      trackEvent(PUSH_NOTIFICATION_EVENTS.DISPLAY_BANNER)
-    }
-  }, [dismissBanner, shouldShowBanner])
-
   const onEnableAll = async () => {
     if (!onboard) {
       return
@@ -148,55 +157,58 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
   }
 
   return (
-    <CustomTooltip
-      className={css.banner}
-      title={
-        <Grid container className={css.container}>
-          <Grid item xs={3}>
-            <Chip label="New" className={css.chip} />
-            <SvgIcon component={PushNotificationIcon} inheritViewBox fontSize="inherit" className={css.icon} />
-          </Grid>
-          <Grid item xs={9}>
-            <Typography variant="subtitle2" fontWeight={700}>
-              Enable push notifications
-            </Typography>
-            <IconButton onClick={dismissBanner} className={css.close}>
-              <SvgIcon component={CloseIcon} inheritViewBox color="border" fontSize="small" />
-            </IconButton>
-            <Typography mt={0.5} mb={1.5} variant="body2">
-              Get notified about pending signatures, incoming and outgoing transactions and more when Safe{`{Wallet}`}{' '}
-              is in the background or closed.
-            </Typography>
-            <div className={css.buttons}>
-              {totalAddedSafes > 0 && (
-                <CheckWallet>
-                  {(isOk) => (
-                    <Button
-                      variant="contained"
-                      size="small"
-                      className={css.button}
-                      onClick={onEnableAll}
-                      disabled={!isOk || !onboard}
-                    >
-                      Enable all
+    <>
+      <TrackBanner />
+      <CustomTooltip
+        className={css.banner}
+        title={
+          <Grid container className={css.container}>
+            <Grid item xs={3}>
+              <Chip label="New" className={css.chip} />
+              <SvgIcon component={PushNotificationIcon} inheritViewBox fontSize="inherit" className={css.icon} />
+            </Grid>
+            <Grid item xs={9}>
+              <Typography variant="subtitle2" fontWeight={700}>
+                Enable push notifications
+              </Typography>
+              <IconButton onClick={dismissBanner} className={css.close}>
+                <SvgIcon component={CloseIcon} inheritViewBox color="border" fontSize="small" />
+              </IconButton>
+              <Typography mt={0.5} mb={1.5} variant="body2">
+                Get notified about pending signatures, incoming and outgoing transactions and more when Safe{`{Wallet}`}{' '}
+                is in the background or closed.
+              </Typography>
+              <div className={css.buttons}>
+                {totalAddedSafes > 0 && (
+                  <CheckWallet>
+                    {(isOk) => (
+                      <Button
+                        variant="contained"
+                        size="small"
+                        className={css.button}
+                        onClick={onEnableAll}
+                        disabled={!isOk || !onboard}
+                      >
+                        Enable all
+                      </Button>
+                    )}
+                  </CheckWallet>
+                )}
+                {safe && (
+                  <Link passHref href={{ pathname: AppRoutes.settings.notifications, query }} onClick={onCustomize}>
+                    <Button variant="outlined" size="small" className={css.button}>
+                      Customize
                     </Button>
-                  )}
-                </CheckWallet>
-              )}
-              {safe && (
-                <Link passHref href={{ pathname: AppRoutes.settings.notifications, query }} onClick={onCustomize}>
-                  <Button variant="outlined" size="small" className={css.button}>
-                    Customize
-                  </Button>
-                </Link>
-              )}
-            </div>
+                  </Link>
+                )}
+              </div>
+            </Grid>
           </Grid>
-        </Grid>
-      }
-      open
-    >
-      <span>{children}</span>
-    </CustomTooltip>
+        }
+        open
+      >
+        <span>{children}</span>
+      </CustomTooltip>
+    </>
   )
 }