Fix: don't show push notifications banner if wallet not conencted (sa…

…fe-global#2605) * Fix: don't show push notifications banner if wallet not conencted; don't track banner dismissal on enable all/customize * Tests
AstarNetwork · Oct 9, 2023 · 854c7be · 854c7be
1 parent 011a0c6
commit 854c7be
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/...nents/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx b/...nents/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx
@@ -10,13 +10,23 @@ import { createPushNotificationPrefsIndexedDb } from '@/services/push-notificati
 import { render } from '@/tests/test-utils'
 import type { AddedSafesOnChain } from '@/store/addedSafesSlice'
 import type { PushNotificationPreferences } from '@/services/push-notifications/preferences'
+import * as useWallet from '@/hooks/wallets/useWallet'
+import type { EIP1193Provider } from '@web3-onboard/core'
 
 Object.defineProperty(globalThis, 'crypto', {
   value: {
     randomUUID: () => Math.random().toString(),
   },
 })
 
+jest.spyOn(useWallet, 'default').mockImplementation(() => ({
+  ens: '',
+  address: '0x1230000000000000000000000000000000000000',
+  provider: jest.fn() as unknown as EIP1193Provider,
+  label: 'Metamask',
+  chainId: '4',
+}))
+
 describe('PushNotificationsBanner', () => {
   describe('getSafesToRegister', () => {
     it('should return all added safes if no preferences exist', () => {

diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx
@@ -25,6 +25,7 @@ import { FEATURES } from '@/utils/chains'
 import type { AddedSafesOnChain } from '@/store/addedSafesSlice'
 import type { PushNotificationPreferences } from '@/services/push-notifications/preferences'
 import type { NotifiableSafes } from '../logic'
+import useWallet from '@/hooks/wallets/useWallet'
 
 import css from './styles.module.css'
 
@@ -109,22 +110,27 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
   const addedSafesOnChain = useAppSelector((state) => selectAddedSafes(state, safe.chainId))
   const { query } = useRouter()
   const onboard = useOnboard()
+  const wallet = useWallet()
 
   const { getPreferences, getAllPreferences } = useNotificationPreferences()
   const { dismissPushNotificationBanner, isPushNotificationBannerDismissed } = useDismissPushNotificationsBanner()
 
   const isSafeAdded = !!addedSafesOnChain?.[safeAddress]
   const isSafeRegistered = getPreferences(safe.chainId, safeAddress)
   const shouldShowBanner =
-    isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered
+    isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered && !!wallet
 
   const { registerNotifications } = useNotificationRegistrations()
 
   const dismissBanner = useCallback(() => {
-    trackEvent(PUSH_NOTIFICATION_EVENTS.DISMISS_BANNER)
     dismissPushNotificationBanner(safe.chainId)
   }, [dismissPushNotificationBanner, safe.chainId])
 
+  const onDismiss = () => {
+    trackEvent(PUSH_NOTIFICATION_EVENTS.DISMISS_BANNER)
+    dismissBanner()
+  }
+
   const onEnableAll = async () => {
     if (!onboard || !addedSafesOnChain) {
       return
@@ -171,7 +177,7 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
               <Typography variant="subtitle2" fontWeight={700}>
                 Enable push notifications
               </Typography>
-              <IconButton onClick={dismissBanner} className={css.close}>
+              <IconButton onClick={onDismiss} className={css.close}>
                 <SvgIcon component={CloseIcon} inheritViewBox color="border" fontSize="small" />
               </IconButton>
               <Typography mt={0.5} mb={1.5} variant="body2">