feat: add change browser modal

src/Modals.tsx

@@ -5,6 +5,7 @@ import { AnimatePresence } from 'framer-motion'
 
 import { PreferencesModal } from '@/components/notifications/NotificationsLayout/PreferencesModal'
 import { UnsubscribeModal } from '@/components/notifications/NotificationsLayout/UnsubscribeModal'
+import ChangeBrowserModal from '@/components/utils/ChangeBrowserModal'
 import NotificationPwaModal from '@/components/utils/NotificationPwaModal'
 import PwaModal from '@/components/utils/PwaModal'
 import W3iContext from '@/contexts/W3iContext/context'
@@ -15,7 +16,7 @@ import {
   checkIfNotificationModalClosed,
   notificationsEnabledInBrowser
 } from '@/utils/notifications'
-import { isMobileButNotInstalledOnHomeScreen } from '@/utils/pwa'
+import { isChrome, isIOS, isMobileButNotInstalledOnHomeScreen } from '@/utils/pwa'
 import { notificationPwaModalService, signatureModalService } from '@/utils/store'
 import { isMobile } from '@/utils/ui'
 
@@ -34,6 +35,11 @@ export const Modals = () => {
 
   const notificationModalClosed = checkIfNotificationModalClosed()
   const explicitlyDeniedOnDesktop = !isMobile() && window.Notification?.permission === 'denied'
+  const shouldShowChangeBrowserModal = isIOS() && isChrome()
+  const shouldShowPWAModal = isMobileButNotInstalledOnHomeScreen() && !shouldShowChangeBrowserModal
+  const shouldShowSignatureModal = isSignatureModalOpen && !shouldShowChangeBrowserModal
+  const shouldShowUnsubscribeModalOpen = isUnsubscribeModalOpen && !shouldShowChangeBrowserModal
+  const shouldShowPreferencesModalOpen = isPreferencesModalOpen && !shouldShowChangeBrowserModal
 
   const shouldShowNotificationModal =
     notificationsEnabledInBrowser() &&
@@ -42,7 +48,8 @@ export const Modals = () => {
     !notificationsEnabled &&
     Boolean(notifyRegisteredKey) &&
     !isSignatureModalOpen &&
-    !notificationModalClosed
+    !notificationModalClosed &&
+    !shouldShowChangeBrowserModal
 
   useEffect(() => {
     const notifySignatureRequired = Boolean(notifyRegisterMessage) && !notifyRegisteredKey
@@ -67,17 +74,19 @@ export const Modals = () => {
 
   return (
     <AnimatePresence mode="popLayout">
-      {isUnsubscribeModalOpen && <UnsubscribeModal />}
+      {shouldShowUnsubscribeModalOpen && <UnsubscribeModal />}
 
-      {isPreferencesModalOpen && <PreferencesModal />}
+      {shouldShowPreferencesModalOpen && <PreferencesModal />}
 
-      {isSignatureModalOpen && (
+      {shouldShowSignatureModal && (
         <SignatureModal message={notifyRegisterMessage ?? ''} sender={'notify'} />
       )}
 
-      {isMobileButNotInstalledOnHomeScreen() && <PwaModal />}
+      {shouldShowPWAModal && <PwaModal />}
 
       {isNotificationPwaModalOpen && <NotificationPwaModal />}
+
+      {shouldShowChangeBrowserModal && <ChangeBrowserModal />}
     </AnimatePresence>
   )
 }

src/components/utils/ChangeBrowserModal/ChangeBrowserModal.scss

@@ -0,0 +1,54 @@
+.ChangeBrowserModal {
+  padding: 3em;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  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;
+    top: -50%;
+    left: -50%;
+  }
+
+  &__icon {
+    display: block;
+    width: 3em;
+    background: white;
+    width: 4em;
+    height: 4em;
+    display: grid;
+    place-items: center;
+    padding: 0.75em;
+    border-radius: 13px;
+    box-shadow: 0px 8px 32px 17.5px hsla(0, 0%, 0%, 0.12);
+  }
+
+  &__warning {
+    color: var(--error-color-1);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    align-items: center;
+    text-align: center;
+  }
+}

src/components/utils/ChangeBrowserModal/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import BackgroundImage from '@/assets/IntroBackground.png'
+import { Modal } from '@/components/general/Modal/Modal'
+import Text from '@/components/general/Text'
+import { pwaModalService } from '@/utils/store'
+
+import './ChangeBrowserModal.scss'
+
+export const ChangeBrowserModal: React.FC = () => {
+  return (
+    <Modal onCloseModal={pwaModalService.closeModal}>
+      <div className="ChangeBrowserModal">
+        <div className="ChangeBrowserModal__background">
+          <img src={BackgroundImage} />
+        </div>
+        <div className="ChangeBrowserModal__icon">
+          <img alt="Web3Inbox icon" className="wc-icon" src="/icon.png" />
+        </div>
+        <Text variant={'large-500'}>Change Browser</Text>
+        <div className="ChangeBrowserModal__content">
+          <Text variant="small-500">
+            To install the app, you need to add this to your home screen.
+          </Text>
+          <Text variant="small-500">
+            Please open <span>app.web3inbox.com</span> in Safari and follow the instructions.
+          </Text>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ChangeBrowserModal

src/utils/pwa.ts

@@ -1,3 +1,7 @@
+import { detect } from 'detect-browser'
+
+const browser = detect()
+
 export const isInstalledOnHomescreen = () => {
   // on Android and iOS, display mode is set to
   // standalone when the app is opened from home screen
@@ -8,5 +12,10 @@ export const isInstalledOnHomescreen = () => {
 
 export const isMobileBrowser = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 
+export const isIOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+export const isChrome = () =>
+  browser?.name ? /chrome|crios|edge-chromium/i.test(browser?.name) : false
+
 export const isMobileButNotInstalledOnHomeScreen = () =>
   isMobileBrowser() && !isInstalledOnHomescreen()