diff --git a/src/Modals.tsx b/src/Modals.tsx index e01fcd87..3d8b0403 100644 --- a/src/Modals.tsx +++ b/src/Modals.tsx @@ -11,8 +11,11 @@ import W3iContext from '@/contexts/W3iContext/context' import { SignatureModal } from '@/pages/Login/SignatureModal' import { useModals } from '@/utils/hooks' import { useNotificationPermissionState } from '@/utils/hooks/notificationHooks' -import { notificationsEnabledInBrowser } from '@/utils/notifications' -import { isMobileButNotInstalledOnHomescreen } from '@/utils/pwa' +import { + checkIfNotificationModalClosed, + notificationsEnabledInBrowser +} from '@/utils/notifications' +import { isMobileButNotInstalledOnHomeScreen } from '@/utils/pwa' import { notificationPwaModalService, signatureModalService } from '@/utils/store' import { isMobile } from '@/utils/ui' @@ -29,18 +32,17 @@ export const Modals = () => { const notificationsEnabled = useNotificationPermissionState() + const notificationModalClosed = checkIfNotificationModalClosed() const explicitlyDeniedOnDesktop = !isMobile() && window.Notification?.permission === 'denied' - const shouldShowNotificationModal = useMemo( - () => - notificationsEnabledInBrowser() && - !explicitlyDeniedOnDesktop && - !isMobileButNotInstalledOnHomescreen() && - !notificationsEnabled && - Boolean(notifyRegisteredKey) && - !isSignatureModalOpen, - [explicitlyDeniedOnDesktop, notificationsEnabled, notifyRegisteredKey, isSignatureModalOpen] - ) + const shouldShowNotificationModal = + notificationsEnabledInBrowser() && + !explicitlyDeniedOnDesktop && + !isMobileButNotInstalledOnHomeScreen() && + !notificationsEnabled && + Boolean(notifyRegisteredKey) && + !isSignatureModalOpen && + !notificationModalClosed useEffect(() => { const notifySignatureRequired = Boolean(notifyRegisterMessage) && !notifyRegisteredKey @@ -64,20 +66,18 @@ export const Modals = () => { }, [shouldShowNotificationModal]) return ( - <> - - {isUnsubscribeModalOpen && } + + {isUnsubscribeModalOpen && } - {isPreferencesModalOpen && } + {isPreferencesModalOpen && } - {isSignatureModalOpen && ( - - )} + {isSignatureModalOpen && ( + + )} - {isMobileButNotInstalledOnHomescreen() && } + {isMobileButNotInstalledOnHomeScreen() && } - {isNotificationPwaModalOpen && } - - + {isNotificationPwaModalOpen && } + ) } diff --git a/src/components/general/Icon/CrossIcon.tsx b/src/components/general/Icon/CrossIcon.tsx index e8f42f35..441fe5aa 100644 --- a/src/components/general/Icon/CrossIcon.tsx +++ b/src/components/general/Icon/CrossIcon.tsx @@ -5,7 +5,7 @@ const CrossIcon: React.FC = () => { diff --git a/src/components/general/Icon/SignatureIcon.tsx b/src/components/general/Icon/SignatureIcon.tsx index 3b122f08..037459a5 100644 --- a/src/components/general/Icon/SignatureIcon.tsx +++ b/src/components/general/Icon/SignatureIcon.tsx @@ -19,7 +19,7 @@ const SignatureIcon: React.FC = () => { fill="#3ABDF2" d="M39.83 62.83a20.35 20.35 0 0 1 28.34 0l.95.92c.39.39.39 1 0 1.4l-3.23 3.15a.5.5 0 0 1-.7 0l-1.3-1.27a14.2 14.2 0 0 0-19.78 0l-1.39 1.36a.5.5 0 0 1-.7 0l-3.23-3.16c-.39-.38-.39-1 0-1.39l1.04-1Zm35 6.53 2.88 2.8c.39.39.39 1 0 1.4L64.77 86.21c-.39.38-1.02.38-1.41 0l-9.18-9a.25.25 0 0 0-.36 0l-9.18 9c-.39.38-1.02.38-1.41 0L30.29 73.55c-.39-.38-.39-1 0-1.39l2.87-2.8c.4-.39 1.03-.39 1.42 0l9.18 8.98c.1.1.26.1.35 0l9.18-8.98c.4-.39 1.03-.39 1.42 0l9.18 8.98c.1.1.25.1.35 0l9.18-8.98c.4-.39 1.03-.39 1.42 0Z" /> - + diff --git a/src/components/general/Modal/Modal.scss b/src/components/general/Modal/Modal.scss index e85daeac..82a41767 100644 --- a/src/components/general/Modal/Modal.scss +++ b/src/components/general/Modal/Modal.scss @@ -23,7 +23,6 @@ align-items: center; border-radius: 30px; background: var(--bg-color-1); - border: 1px solid var(--border-color-2); box-shadow: 0px 8px 22px -6px rgba(0, 0, 0, 0.12), 0px 14px 64px -4px rgba(0, 0, 0, 0.12); diff --git a/src/components/utils/NotificationPwaModal/NotificationPwaModal.scss b/src/components/utils/NotificationPwaModal/NotificationPwaModal.scss index e59bbe2a..0b204794 100644 --- a/src/components/utils/NotificationPwaModal/NotificationPwaModal.scss +++ b/src/components/utils/NotificationPwaModal/NotificationPwaModal.scss @@ -7,6 +7,19 @@ gap: 2em; position: relative; + &__close-button { + svg { + color: var(--fg-color-3); + } + } + + &__header { + display: flex; + justify-content: flex-end; + width: 100%; + align-items: center; + } + &__background { position: absolute; z-index: -999; diff --git a/src/components/utils/NotificationPwaModal/index.tsx b/src/components/utils/NotificationPwaModal/index.tsx index 0c3b10e4..1d21c8bd 100644 --- a/src/components/utils/NotificationPwaModal/index.tsx +++ b/src/components/utils/NotificationPwaModal/index.tsx @@ -2,11 +2,11 @@ import React, { Fragment, useContext } from 'react' import BackgroundImage from '@/assets/IntroBackground.png' import Button from '@/components/general/Button' -import WalletConnectIcon from '@/components/general/Icon/WalletConnectIcon' +import CrossIcon from '@/components/general/Icon/CrossIcon' import { Modal } from '@/components/general/Modal/Modal' import Text from '@/components/general/Text' import W3iContext from '@/contexts/W3iContext/context' -import { requireNotifyPermission } from '@/utils/notifications' +import { closeNotificationModal, requireNotifyPermission } from '@/utils/notifications' import { pwaModalService } from '@/utils/store' import './NotificationPwaModal.scss' @@ -14,6 +14,8 @@ import './NotificationPwaModal.scss' export const NotificationPwaModal: React.FC = () => { const { notifyClientProxy } = useContext(W3iContext) + const explicitlyDeniedPermissionForNotifications = window.Notification?.permission === 'denied' + const handleEnableNotifications = async () => { const notificationPermissionGranted = await requireNotifyPermission() @@ -26,37 +28,38 @@ export const NotificationPwaModal: React.FC = () => { } } - const explicitlyDeniedPermissionForNotifications = window.Notification?.permission === 'denied' - return (
+
+ +
Web3Inbox icon
-
- Enable Notifications -
-
- - To use Web3Inbox and receive notifications from your subscribed apps, please enable push - notifications. - -
+ Enable Notifications + + To use Web3Inbox and receive notifications from your subscribed apps, please enable push + notifications. + {explicitlyDeniedPermissionForNotifications ? ( You have explicitly denied notification permissions. Please adjust in OS settings. ) : ( -
- - You can always adjust your permissions in your OS settings. - -
+ + You can always adjust your permissions in your OS settings. + diff --git a/src/constants/localStorage.ts b/src/constants/localStorage.ts new file mode 100644 index 00000000..9b1af607 --- /dev/null +++ b/src/constants/localStorage.ts @@ -0,0 +1,3 @@ +export const localStorageKeys = { + notificationModalClosed: 'w3i:notification_modal_closed' +} diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts new file mode 100644 index 00000000..0ec945ce --- /dev/null +++ b/src/utils/localStorage.ts @@ -0,0 +1,16 @@ +export class LocalStorage { + static get(key: string) { + if (typeof localStorage === 'undefined') { + return undefined + } + + return localStorage.getItem(key) + } + static set(key: string, value: string) { + if (typeof localStorage === 'undefined') { + return undefined + } + + return localStorage.setItem(key, value) + } +} diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts index ff22bec8..d541871d 100644 --- a/src/utils/notifications.ts +++ b/src/utils/notifications.ts @@ -1,7 +1,9 @@ -import { useEffect, useState } from 'react' - import { NotifyClient } from '@walletconnect/notify-client' +import { localStorageKeys } from '@/constants/localStorage' +import { LocalStorage } from '@/utils/localStorage' +import { notificationPwaModalService } from '@/utils/store' + import { getFirebaseToken } from './firebase' import { getDbEchoRegistrations, getDbSymkeyStore } from './idb' @@ -61,6 +63,16 @@ export const setupSubscriptionsSymkeys = async (topicSymkeyEntries: [string, str } } +export const closeNotificationModal = () => { + LocalStorage.set(localStorageKeys.notificationModalClosed, 'true') + notificationPwaModalService.closeModal() +} + +export const checkIfNotificationModalClosed = () => { + const storageValue = LocalStorage.get(localStorageKeys.notificationModalClosed) + return storageValue === 'true' +} + export const notificationsEnabledInBrowser = () => { return 'Notification' in window } diff --git a/src/utils/pwa.ts b/src/utils/pwa.ts index e0a9453a..1d2c8e7f 100644 --- a/src/utils/pwa.ts +++ b/src/utils/pwa.ts @@ -8,5 +8,5 @@ export const isInstalledOnHomescreen = () => { export const isMobileBrowser = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) -export const isMobileButNotInstalledOnHomescreen = () => +export const isMobileButNotInstalledOnHomeScreen = () => isMobileBrowser() && !isInstalledOnHomescreen()