Merge pull request #411 from WalletConnect/refactor/require-notificat…

…ion-permission-to-register-device

refactor: update notification device register logics

src/Modals.tsx

@@ -14,7 +14,7 @@ import { useModals } from '@/utils/hooks'
 import { useNotificationPermissionState } from '@/utils/hooks/notificationHooks'
 import {
   checkIfNotificationModalClosed,
-  notificationsEnabledInBrowser
+  notificationsAvailableInBrowser
 } from '@/utils/notifications'
 import { isAppleMobile, isMobileButNotInstalledOnHomeScreen, isNonSafari } from '@/utils/pwa'
 import { notificationPwaModalService, signatureModalService } from '@/utils/store'
@@ -44,7 +44,7 @@ export const Modals = () => {
   const shouldShowPreferencesModalOpen = isPreferencesModalOpen && !shouldShowChangeBrowserModal
 
   const shouldShowNotificationModal =
-    notificationsEnabledInBrowser() &&
+    notificationsAvailableInBrowser() &&
     !explicitlyDeniedOnDesktop &&
     !isMobileButNotInstalledOnHomeScreen &&
     !notificationsEnabled &&

src/components/settings/NotificationsSettings/index.tsx

@@ -13,7 +13,7 @@ import SettingsContext from '@/contexts/SettingsContext/context'
 import W3iContext from '@/contexts/W3iContext/context'
 import { useNotificationPermissionState } from '@/utils/hooks/notificationHooks'
 import { getDbEchoRegistrations } from '@/utils/idb'
-import { notificationsEnabledInBrowser, requireNotifyPermission } from '@/utils/notifications'
+import { notificationsAvailableInBrowser, requireNotifyPermission } from '@/utils/notifications'
 import { showSuccessMessageToast } from '@/utils/toasts'
 
 import SettingsHeader from '../SettingsHeader'
@@ -131,7 +131,7 @@ const NotificationsSettings: React.FC = () => {
                   setChecked={handleEnableNotifications}
                   icon={<NotificationIcon />}
                   title="Enable Push Notifications"
-                  active={notificationsEnabledInBrowser() && !notificationsEnabled}
+                  active={notificationsAvailableInBrowser() && !notificationsEnabled}
                 />
               </SettingsItem>
             </div>

src/utils/notifications.ts

@@ -73,12 +73,12 @@ export const checkIfNotificationModalClosed = () => {
   return storageValue === 'true'
 }
 
-export const notificationsEnabledInBrowser = () => {
+export const notificationsAvailableInBrowser = () => {
   return 'Notification' in window
 }
 
 export const userEnabledNotification = () => {
-  if (notificationsEnabledInBrowser()) {
+  if (notificationsAvailableInBrowser()) {
     return window.Notification?.permission === 'granted'
   }
   return false
@@ -89,7 +89,7 @@ export const userEnabledNotification = () => {
  * Returns true if permissions were granted
  */
 export const requireNotifyPermission = async () => {
-  if (!notificationsEnabledInBrowser()) {
+  if (!notificationsAvailableInBrowser()) {
     console.warn('This browser does not support desktop push notifications')
     return false
   }

src/w3iProxy/notifyProviders/internalNotifyProvider.ts

@@ -7,8 +7,9 @@ import mixpanel from 'mixpanel-browser'
 import { logError } from '@/utils/error'
 import { getDbEchoRegistrations } from '@/utils/idb'
 import {
-  notificationsEnabledInBrowser,
+  notificationsAvailableInBrowser,
   registerWithEcho,
+  requireNotifyPermission,
   setupSubscriptionsSymkeys,
   userEnabledNotification
 } from '@/utils/notifications'
@@ -78,10 +79,14 @@ export default class InternalNotifyProvider implements W3iNotifyProvider {
       return
     }
 
-    if (notificationsEnabledInBrowser()) {
-      await window.Notification?.requestPermission()
+    const notificationsAvailabe = notificationsAvailableInBrowser()
 
-      await registerWithEcho(this.notifyClient)
+    if (notificationsAvailabe) {
+      const notificationsGranted = await requireNotifyPermission()
+
+      if (notificationsGranted) {
+        await registerWithEcho(this.notifyClient)
+      }
     }
   }