diff --git a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallModal.tsx b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallModal.tsx index 7916cc7745..84c92ce9c7 100644 --- a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallModal.tsx +++ b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallModal.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { MobileDevice, InstallButton } from './PWAInstallPrompt' -import { Modal, AppleShareIcon } from 'rt-components' +import { AppleShareIcon, Modal } from 'rt-components' import { styled } from 'rt-theme' +import { InstallButton } from './PWAInstallPrompt' const MainTitle = styled.div` font-size: 1.19rem; @@ -31,23 +31,17 @@ const Icon = styled.div` ` interface InstallModalProps { - device: MobileDevice | null closeModal: () => void } -export const PWAInstallModal: React.FC = ({ device, closeModal }) => ( +export const PWAInstallModal: React.FC = ({ closeModal }) => ( Install Reactive Trader This must be done manually - {device === MobileDevice.iOS ? ( - - Tap {AppleShareIcon} from the browsers bottom menu and select "Add to Home - Screen" - - ) : ( - Go to your browser settings and select "Add to Home Screen" - )} + + Tap {AppleShareIcon} from the browsers menu and select "Add to Home Screen" + Close diff --git a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallPrompt.tsx b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallPrompt.tsx index 34ea18adc4..de6211e528 100644 --- a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallPrompt.tsx +++ b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWAInstallPrompt.tsx @@ -3,6 +3,8 @@ import { CrossIcon } from 'rt-components' import { styled } from 'rt-theme' import { PWAInstallModal } from './PWAInstallModal' import { usePWABannerPrompt } from './usePWABannerPrompt' +import Environment from 'rt-system/environment' +import { isiOS, isMobileDevice } from 'apps/utils' const MainBanner = styled.div<{ isHidden: boolean }>` display: ${({ isHidden }) => (isHidden ? 'none' : 'flex')}; @@ -50,14 +52,9 @@ export enum PWABanner { Installed = 'installed', } -export enum MobileDevice { - Android = 'android', - iOS = 'iOS', -} - interface InstallBannerProps { banner: string | null - updateBanner: (state: PWABanner, device?: MobileDevice) => void + updateBanner: (state: PWABanner) => void isModalOpen: boolean setIsModalOpen: Dispatch> } @@ -68,16 +65,17 @@ export const PWAInstallBanner: React.FC = ({ isModalOpen, setIsModalOpen, }) => { - const [prompt, promptToInstall, device] = usePWABannerPrompt() - const isHidden = banner !== PWABanner.Shown || (!prompt && device !== MobileDevice.iOS) + const [prompt, promptToInstall] = usePWABannerPrompt() + + const isHidden = banner !== PWABanner.Shown || (!prompt && !isiOS) || Environment.isPWA() useEffect(() => { if (prompt && banner === PWABanner.NotSet) { updateBanner(PWABanner.Shown) - } else if (device && banner === PWABanner.NotSet) { - updateBanner(PWABanner.Shown, device) + } else if (isiOS && banner === PWABanner.NotSet) { + updateBanner(PWABanner.Shown) } - }, [prompt, banner, updateBanner, device]) + }, [prompt, banner, updateBanner]) useEffect(() => { const handler = () => { @@ -93,8 +91,8 @@ export const PWAInstallBanner: React.FC = ({ updateBanner(PWABanner.Hidden) } - const installPWA = (device: MobileDevice | null) => { - if (device === MobileDevice.iOS) { + const installPWA = (isiOS: boolean) => { + if (isiOS) { setIsModalOpen(true) } else { promptToInstall() @@ -102,18 +100,18 @@ export const PWAInstallBanner: React.FC = ({ } if (isModalOpen) { - return setIsModalOpen(false)} /> + return setIsModalOpen(false)} /> } return ( {CrossIcon} - {device + {isMobileDevice ? 'Experience Reactive Trader as an app!' : 'Experience Reactive Trader on your desktop!'} - installPWA(device)}>Install + installPWA(isiOS)}>Install ) } diff --git a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWALaunchButton.tsx b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWALaunchButton.tsx index 472e1f2d78..fef8f28b06 100644 --- a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWALaunchButton.tsx +++ b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/PWALaunchButton.tsx @@ -1,14 +1,15 @@ import React, { Dispatch, SetStateAction } from 'react' -import { PWABanner, InstallButton, MobileDevice } from './PWAInstallPrompt' +import { PWABanner, InstallButton } from './PWAInstallPrompt' import { usePWABannerPrompt } from './usePWABannerPrompt' +import { isiOS } from 'apps/utils' interface InstallLaunchProps { state: string | null setIsModalOpen: Dispatch> } export const PWALaunchButton: React.FC = ({ state, setIsModalOpen }) => { - const [prompt, promptToInstall, device] = usePWABannerPrompt() + const [prompt, promptToInstall] = usePWABannerPrompt() - if (!prompt && device === MobileDevice.iOS && state === PWABanner.Hidden) { + if (!prompt && isiOS && state === PWABanner.Hidden) { return setIsModalOpen(true)}>Install } else if (prompt && state === PWABanner.Hidden) { return Install PWA diff --git a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/usePWABannerPrompt.tsx b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/usePWABannerPrompt.tsx index 2ddab704b5..147b515fed 100644 --- a/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/usePWABannerPrompt.tsx +++ b/src/client/src/apps/MainRoute/components/app-header/PWAInstallPrompt/usePWABannerPrompt.tsx @@ -1,15 +1,11 @@ import { useEffect, useState } from 'react' import { usePlatform } from 'rt-platforms' -import { isAndroid, isiOS } from 'apps/utils' -import { MobileDevice } from './PWAInstallPrompt' export const usePWABannerPrompt = (): [ BeforeInstallPromptEvent | null, - () => Promise | undefined, - MobileDevice | null + () => Promise | undefined ] => { const [prompt, setPrompt] = useState(null) - const [device, setDevice] = useState(null) const platform = usePlatform() const promptToInstall = () => { @@ -24,9 +20,6 @@ export const usePWABannerPrompt = (): [ platform.type === 'browser' ? setPrompt(e) : setPrompt(null) } - if (isAndroid) setDevice(MobileDevice.Android) - else if (isiOS) setDevice(MobileDevice.iOS) - if (typeof window.beforeInstallPromptEvent === 'undefined') { window.addEventListener('beforeinstallprompt', ready) } else { @@ -36,7 +29,7 @@ export const usePWABannerPrompt = (): [ return () => { window.removeEventListener('beforeinstallprompt', ready) } - }, [platform.type, device]) + }, [platform.type]) - return [prompt, promptToInstall, device] + return [prompt, promptToInstall] } diff --git a/src/client/src/rt-components/icons/index.ts b/src/client/src/rt-components/icons/index.ts index b68199a3a5..06460ec01e 100644 --- a/src/client/src/rt-components/icons/index.ts +++ b/src/client/src/rt-components/icons/index.ts @@ -12,6 +12,5 @@ export { default as ChevronIcon } from './ChevronIcon' export { default as ChartIcon } from './ChartIcon' export { default as MailIcon } from './MailIcon' export { default as AppleShareIcon } from './AppleShareIcon' -export { default as AndroidSettingsIcon } from './AndroidSettingsIcon' export { IconStateTypes } from './types' diff --git a/src/client/src/rt-system/environment.ts b/src/client/src/rt-system/environment.ts index 76c5a51f6d..bf348a6a11 100644 --- a/src/client/src/rt-system/environment.ts +++ b/src/client/src/rt-system/environment.ts @@ -17,8 +17,9 @@ export default class Environment { static isPWA() { return ( - window.matchMedia('(display-mode: standalone)').matches || - (window.navigator as Navigator).standalone + (window.matchMedia('(display-mode: standalone)').matches || + (window.navigator as Navigator).standalone) ?? + false ) } }