Fix: delay the notifications banner (#2823)

* Fix: delay the notifications banner

* Fix tests

* Fix: close immediately

src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx

@@ -7,7 +7,7 @@ import type { ChainInfo, SafeInfo } from '@safe-global/safe-gateway-typescript-s
 
 import { PushNotificationsBanner, _getSafesToRegister } from '.'
 import { createPushNotificationPrefsIndexedDb } from '@/services/push-notifications/preferences'
-import { render } from '@/tests/test-utils'
+import { act, 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'
@@ -28,6 +28,10 @@ jest.spyOn(useWallet, 'default').mockImplementation(() => ({
 }))
 
 describe('PushNotificationsBanner', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+
   describe('getSafesToRegister', () => {
     it('should return all added safes if no preferences exist', () => {
       const addedSafesOnChain = {
@@ -152,6 +156,7 @@ describe('PushNotificationsBanner', () => {
 
       expect(tracking.trackEvent).toHaveBeenCalledTimes(1)
     })
+
     it('should display the banner', () => {
       const result = render(
         <PushNotificationsBanner>
@@ -193,6 +198,8 @@ describe('PushNotificationsBanner', () => {
         },
       )
 
+      jest.advanceTimersByTime(3000)
+
       expect(result.getByText('Get notified about pending signatures', { exact: false })).toBeInTheDocument()
     })
 
@@ -240,7 +247,7 @@ describe('PushNotificationsBanner', () => {
       expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument()
     })
 
-    it('should not show the banner if the user has dismissed it', () => {
+    it('should not show the banner if the user has dismissed it', async () => {
       window.localStorage.setItem(
         'SAFE_v2__dismissPushNotifications',
         JSON.stringify({ '1': { [hexZeroPad('0x123', 20)]: true } }),
@@ -281,6 +288,11 @@ describe('PushNotificationsBanner', () => {
         },
       )
 
+      await act(() => {
+        jest.advanceTimersByTime(3000)
+        return Promise.resolve()
+      })
+
       expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument()
     })
 

src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx

@@ -27,10 +27,11 @@ import type { PushNotificationPreferences } from '@/services/push-notifications/
 import type { NotifiableSafes } from '../logic'
 import useWallet from '@/hooks/wallets/useWallet'
 import CircularProgress from '@mui/material/CircularProgress'
-
+import useDebounce from '@/hooks/useDebounce'
 import css from './styles.module.css'
 
 const DISMISS_PUSH_NOTIFICATIONS_KEY = 'dismissPushNotifications'
+const BANNER_DELAY = 3000
 
 export const useDismissPushNotificationsBanner = () => {
   const addedSafes = useAppSelector(selectAllAddedSafes)
@@ -119,8 +120,10 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
 
   const isSafeAdded = !!addedSafesOnChain?.[safeAddress]
   const isSafeRegistered = getPreferences(safe.chainId, safeAddress)
-  const shouldShowBanner =
-    isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered && !!wallet
+  const shouldShowBanner = useDebounce(
+    isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered && !!wallet,
+    BANNER_DELAY,
+  )
 
   const { registerNotifications } = useNotificationRegistrations()
 
@@ -164,7 +167,7 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
     dismissBanner()
   }
 
-  if (!shouldShowBanner) {
+  if (!shouldShowBanner || isPushNotificationBannerDismissed) {
     return children
   }