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 (