diff --git a/packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx b/packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx index ff64f6674dd6..14cc3211769c 100644 --- a/packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx +++ b/packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx @@ -1,21 +1,32 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; -import { isDisabledLandscapeBlockerRoute, isTabletOs, routes } from '@deriv/shared'; +import { isDisabledLandscapeBlockerRoute, isMobileOs, isTabletOs, routes } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import LandscapeBlockerSvg from 'Assets/SvgComponents/settings/landscape-blocker.svg'; import './landscape-blocker.scss'; +import { useDevice } from '@deriv-com/ui'; const LandscapeBlocker = observer(() => { // need to check for wallet account and don't hide landscape blocker for users migrated to wallets const { client: { has_wallet }, } = useStore(); + const { isMobile } = useDevice(); const location = useLocation(); const pathname = location?.pathname; const is_hidden_landscape_blocker = isDisabledLandscapeBlockerRoute(pathname); const shouldShowDtraderTabletView = pathname === routes.trade && isTabletOs; + const showBlockerDtraderMobileLandscapeView = + !isMobile && + isMobileOs() && + (pathname.startsWith(routes.trade) || pathname.startsWith(routes.reports || pathname.startsWith('/contract/'))); - if (!has_wallet && (is_hidden_landscape_blocker || shouldShowDtraderTabletView)) return null; + if ( + !has_wallet && + !showBlockerDtraderMobileLandscapeView && + (is_hidden_landscape_blocker || shouldShowDtraderTabletView) + ) + return null; return (
diff --git a/packages/shared/src/utils/os/os_detect.ts b/packages/shared/src/utils/os/os_detect.ts index 3a7c906f9537..cb5249f20de9 100644 --- a/packages/shared/src/utils/os/os_detect.ts +++ b/packages/shared/src/utils/os/os_detect.ts @@ -58,7 +58,8 @@ export const isDesktopOs = () => { }; export const isMobileOs = () => - /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + (/android/i.test(navigator.userAgent.toLowerCase()) && /mobile/i.test(navigator.userAgent.toLowerCase())) || + /webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); export const isTabletOs = /ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()) ||