diff --git a/packages/appstore/src/components/app.scss b/packages/appstore/src/components/app.scss index 802f4bbc66f4..e35fda25eefd 100644 --- a/packages/appstore/src/components/app.scss +++ b/packages/appstore/src/components/app.scss @@ -1,17 +1,17 @@ .dashboard { - @include desktop { + @include desktop-screen { height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT}); } - @include mobile { + @include mobile-or-tablet-screen { height: calc(100vh - #{$MOBILE_HEADER_HEIGHT}); } } .dashboard-onboarding { - @include desktop { + @include desktop-screen { height: inherit; } - @include mobile { + @include mobile-or-tablet-screen { height: calc(100vh - #{$MOBILE_HEADER_HEIGHT}); } } diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss index df988b8cbd1e..9a95d265b323 100644 --- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss +++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss @@ -1932,6 +1932,13 @@ } } +.dc-mobile-dialog__content.dc-mobile-dialog__content--is-full-height:has(.dc-mobile-dialog__cfd-password-modal) { + @include mobile-or-tablet-screen { + display: flex; + justify-content: center; + } +} + .dc-modal__container_cfd-password-modal, .dc-mobile-dialog__cfd-password-modal { display: flex; diff --git a/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx b/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx index 969b3c10d4bc..628590c0d432 100644 --- a/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx +++ b/packages/appstore/src/components/elements/cfds-title/cfds-title.tsx @@ -1,21 +1,20 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { Text } from '@deriv/components'; -import { observer, useStore } from '@deriv/stores'; -import { localize } from '@deriv/translations'; +import { Localize } from '@deriv/translations'; import './cfds-title.scss'; -const CFDsTitle = observer(() => { - const { ui } = useStore(); - const { is_mobile } = ui; +const CFDsTitle = () => { + const { isDesktop } = useDevice(); - if (is_mobile) return null; + if (!isDesktop) return null; return (
- {localize('CFDs')} +
); -}); +}; export default CFDsTitle; diff --git a/packages/appstore/src/components/elements/options-title/options-title.tsx b/packages/appstore/src/components/elements/options-title/options-title.tsx index 42ed13befff2..65256ba1f036 100644 --- a/packages/appstore/src/components/elements/options-title/options-title.tsx +++ b/packages/appstore/src/components/elements/options-title/options-title.tsx @@ -1,17 +1,16 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { Text } from '@deriv/components'; -import { observer, useStore } from '@deriv/stores'; import { Localize } from '@deriv/translations'; type TOptionsTitle = { is_eu_user: boolean; }; -const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => { - const { ui } = useStore(); - const { is_mobile } = ui; +const OptionsTitle = ({ is_eu_user }: TOptionsTitle) => { + const { isDesktop } = useDevice(); - if (is_mobile) return null; + if (!isDesktop) return null; return is_eu_user ? ( @@ -21,6 +20,6 @@ const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => { ); -}); +}; export default OptionsTitle; diff --git a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss index 6489f169e5d4..e44fcf86cf70 100644 --- a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss +++ b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss @@ -13,7 +13,7 @@ background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-desktop.svg'); background-repeat: no-repeat; - @include mobile { + @include mobile-or-tablet-screen { height: 14.4rem; background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-responsive.svg'); background-repeat: no-repeat; @@ -32,7 +32,7 @@ font-weight: 500; } - @include mobile { + @include mobile-or-tablet-screen { margin-inline-start: 1.6rem; } } @@ -46,7 +46,7 @@ font-size: 1.6rem; } - @include mobile { + @include mobile-or-tablet-screen { min-width: 6.4rem; padding: 0.5rem 1.2rem; } @@ -62,7 +62,7 @@ transform: scaleX(-1); } - @include mobile { + @include mobile-or-tablet-screen { margin-inline-end: 0; align-self: flex-end; } diff --git a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx index 0a0b92c244f6..65216e54d386 100644 --- a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx +++ b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useDevice } from '@deriv-com/ui'; import { getLanguage, Localize, localize } from '@deriv/translations'; import { Button, Text, Icon } from '@deriv/components'; import { useStore, observer } from '@deriv/stores'; @@ -7,8 +8,8 @@ import TrustpilotWidget from 'Components/trustpilot-widget'; import './get-started-trading-banner.scss'; const GetStartedTradingBanner = observer(() => { - const { ui, traders_hub } = useStore(); - const { is_mobile } = ui; + const { isDesktop } = useDevice(); + const { traders_hub } = useStore(); const { is_eu_user } = traders_hub; const desktopWidth = is_eu_user ? 326 : 445; @@ -20,7 +21,7 @@ const GetStartedTradingBanner = observer(() => {
- +
diff --git a/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss b/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss index db17f592396f..cbb4010b5895 100644 --- a/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss +++ b/packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss @@ -5,7 +5,7 @@ justify-content: space-between; gap: 4.8rem; - @include mobile { + @include mobile-or-tablet-screen { display: none; } &__left { diff --git a/packages/appstore/src/components/trustpilot-widget/trustpilot-widget.tsx b/packages/appstore/src/components/trustpilot-widget/trustpilot-widget.tsx index 6458ff0194db..62d67ee9b7c7 100644 --- a/packages/appstore/src/components/trustpilot-widget/trustpilot-widget.tsx +++ b/packages/appstore/src/components/trustpilot-widget/trustpilot-widget.tsx @@ -1,16 +1,15 @@ import React, { useEffect, useState } from 'react'; +import { useDevice } from '@deriv-com/ui'; import { Icon, Text } from '@deriv/components'; -import { useStore, observer } from '@deriv/stores'; import { Localize } from '@deriv/translations'; import { TTrustpilotWidgetData } from 'Types'; import { fetchTrustpilotData } from 'Helpers'; import TrustpilotStarRating from 'Components/trustpilot-star-rating'; import './trustpilot-widget.scss'; -const TrustpilotWidget = observer(() => { +const TrustpilotWidget = () => { + const { isDesktop } = useDevice(); const [trustpilotData, setTrustpilotData] = useState(); - const { ui } = useStore(); - const { is_mobile } = ui; useEffect(() => { const getTrustpilotData = async () => { @@ -27,7 +26,7 @@ const TrustpilotWidget = observer(() => {
- {!is_mobile && ( + {isDesktop && ( @@ -38,7 +37,7 @@ const TrustpilotWidget = observer(() => { )} - {!is_mobile && ( + {isDesktop && ( {
); -}); +}; export default TrustpilotWidget; diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss index 3e2e64035769..5c827c5c38b2 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss @@ -6,13 +6,14 @@ margin: auto; padding: 4rem; - @include mobile { + @include mobile-or-tablet-screen { + max-width: 60rem; padding: 2rem; width: 100%; } &__eu-user { - @include mobile { + @include mobile-or-tablet-screen { min-height: 650px; } } diff --git a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx index 0dcd18a66c5f..80ef46397e5a 100644 --- a/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx +++ b/packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx @@ -1,7 +1,8 @@ import React from 'react'; import classNames from 'classnames'; +import { useDevice } from '@deriv-com/ui'; import { observer, useStore } from '@deriv/stores'; -import { Div100vhContainer, DesktopWrapper, MobileWrapper, Loading, Text } from '@deriv/components'; +import { Div100vhContainer, Loading, Text } from '@deriv/components'; import { isEuCountry } from '@deriv/shared'; import { Localize } from '@deriv/translations'; import OrderedPlatformSections from 'Components/ordered-platform-sections'; @@ -10,8 +11,8 @@ import TabsOrTitle from 'Components/tabs-or-title'; import './traders-hub-logged-out.scss'; const TradersHubLoggedOut = observer(() => { - const { traders_hub, client, ui } = useStore(); - const { is_desktop } = ui; + const { isDesktop } = useDevice(); + const { traders_hub, client } = useStore(); const { clients_country } = client; const { setTogglePlatformType, selectRegion, is_eu_user } = traders_hub; @@ -29,23 +30,24 @@ const TradersHubLoggedOut = observer(() => { if (!clients_country) return ; return ( - +
- + - + {isDesktop ? ( - - - - - + ) : ( + + + + + )}
); diff --git a/packages/appstore/src/modules/traders-hub/traders-hub.scss b/packages/appstore/src/modules/traders-hub/traders-hub.scss index e736d725ba45..a3db2f9362ce 100644 --- a/packages/appstore/src/modules/traders-hub/traders-hub.scss +++ b/packages/appstore/src/modules/traders-hub/traders-hub.scss @@ -23,12 +23,12 @@ } &--eu-user { - @include mobile { + @include mobile-or-tablet-screen { min-height: 650px; } &-without-mt5 { - @include mobile { + @include mobile-or-tablet-screen { min-height: 540px; } } diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx index 32eb6df03269..91abee62dc09 100644 --- a/packages/cfd/src/Containers/cfd-password-modal.tsx +++ b/packages/cfd/src/Containers/cfd-password-modal.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useHistory } from 'react-router'; import { Formik, FormikErrors, FormikHelpers } from 'formik'; +import { useDevice } from '@deriv-com/ui'; import { SentEmailModal } from '@deriv/account'; import { @@ -20,7 +21,6 @@ import { getCFDPlatformLabel, getErrorMessages, getLegalEntityName, - isDesktop, routes, validLength, validPassword, @@ -109,36 +109,36 @@ type TCFDPasswordModalProps = { platform: typeof CFD_PLATFORMS[keyof typeof CFD_PLATFORMS]; }; -const PasswordModalHeader = observer( - ({ should_set_trading_password, is_password_reset_error, platform }: TPasswordModalHeaderProps) => { - const { ui } = useStore(); - const { is_mobile } = ui; - - const element = is_mobile ? 'p' : 'span'; - const alignment = 'center'; - const font_size = 's'; - const style = is_mobile - ? { - padding: '2rem', - } - : {}; - - return ( - - {!should_set_trading_password && !is_password_reset_error && ( - - )} - {is_password_reset_error && } - - ); - } -); +const PasswordModalHeader = ({ + should_set_trading_password, + is_password_reset_error, + platform, +}: TPasswordModalHeaderProps) => { + const { isDesktop } = useDevice(); + + const element = !isDesktop ? 'p' : 'span'; + const alignment = 'center'; + const font_size = 's'; + const style = !isDesktop + ? { + padding: '2rem', + } + : {}; + return ( + + {!should_set_trading_password && !is_password_reset_error && ( + + )} + {is_password_reset_error && } + + ); +}; const ReviewMessageForMT5 = ({ is_selected_mt5_verified, jurisdiction_selected_shortcode, @@ -206,9 +206,10 @@ IconType.displayName = 'IconType'; const getCancelButtonLabel = ({ should_set_trading_password, error_type, -}: Pick) => { + isDesktop, +}: Pick & { isDesktop: boolean }) => { if (should_set_trading_password && error_type !== 'PasswordReset') { - return isDesktop() ? null : localize('Cancel'); + return isDesktop ? null : localize('Cancel'); } return localize('Forgot password?'); @@ -382,169 +383,166 @@ const CFDCreatePasswordForm = ({ return ; }; -const CFDPasswordForm = observer( - ({ - closeModal, - error_message, - error_type, - form_error, - has_mt5_account, - is_real_financial_stp, - onCancel, - onForgotPassword, - platform, - should_set_trading_password, - submitPassword, - validatePassword, - }: TCFDPasswordFormProps) => { - const { ui } = useStore(); - const { is_mobile } = ui; - - const button_label = React.useMemo(() => { - if (error_type === 'PasswordReset') { - return localize('Try later'); - } - return localize('Add account'); - }, [error_type]); - - const has_cancel_button = (isDesktop() ? !should_set_trading_password : true) || error_type === 'PasswordReset'; +const CFDPasswordForm = ({ + closeModal, + error_message, + error_type, + form_error, + has_mt5_account, + is_real_financial_stp, + onCancel, + onForgotPassword, + platform, + should_set_trading_password, + submitPassword, + validatePassword, +}: TCFDPasswordFormProps) => { + const { isDesktop } = useDevice(); - const cancel_button_label = getCancelButtonLabel({ should_set_trading_password, error_type }); + const button_label = React.useMemo(() => { + if (error_type === 'PasswordReset') { + return localize('Try later'); + } + return localize('Add account'); + }, [error_type]); - const handleCancel = () => { - if (!has_cancel_button) { - return undefined; - } - if (should_set_trading_password) { - return onCancel(); - } + const has_cancel_button = (isDesktop ? !should_set_trading_password : true) || error_type === 'PasswordReset'; - return onForgotPassword(); - }; + const cancel_button_label = getCancelButtonLabel({ should_set_trading_password, error_type, isDesktop }); - if (error_type === 'PasswordReset') { - return ( - -
-
- - - -
- - {({ handleSubmit }) => ( -
- - - )} -
-
- - ); + const handleCancel = () => { + if (!has_cancel_button) { + return undefined; } - if (should_set_trading_password) { - return ( - - ); + return onCancel(); } + return onForgotPassword(); + }; + + if (error_type === 'PasswordReset') { return ( - - {({ - errors, - isSubmitting, - handleBlur, - handleChange, - handleSubmit, - setFieldTouched, - touched, - values, - validateForm, - }) => ( -
-
- {!should_set_trading_password && } -
- ) => { - handlePasswordInputChange(e, handleChange, validateForm, setFieldTouched); - }} - data_testId={`dt_${platform}_password`} + +
+
+ + + +
+ + {({ handleSubmit }) => ( + + -
+ + )} + +
+ + ); + } - {is_real_financial_stp && ( -
- -
- )} - {error_type === 'PasswordError' && ( - - - - )} -
- - - )} - + if (should_set_trading_password) { + return ( + ); } -); + return ( + + {({ + errors, + isSubmitting, + handleBlur, + handleChange, + handleSubmit, + setFieldTouched, + touched, + values, + validateForm, + }) => ( +
+
+ {!should_set_trading_password && } +
+ ) => { + handlePasswordInputChange(e, handleChange, validateForm, setFieldTouched); + }} + data_testId={`dt_${platform}_password`} + /> +
+ + {is_real_financial_stp && ( +
+ +
+ )} + {error_type === 'PasswordError' && ( + + + + )} +
+ + + )} +
+ ); +}; const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalProps) => { + const { isDesktop } = useDevice(); const { client, traders_hub, ui } = useStore(); const { @@ -559,7 +557,7 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr updateMT5Status, } = client; const { show_eu_related_content, is_eu_user, toggleAccountTransferModal } = traders_hub; - const { is_mobile, is_mt5_migration_modal_enabled, setMT5MigrationModalEnabled, is_mt5_migration_modal_open } = ui; + const { is_mt5_migration_modal_enabled, setMT5MigrationModalEnabled, is_mt5_migration_modal_open } = ui; const { account_type, @@ -766,17 +764,17 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr const should_show_password_modal = React.useMemo(() => { if (should_show_password) { - return should_set_trading_password ? true : isDesktop(); + return should_set_trading_password ? true : isDesktop; } return false; }, [should_set_trading_password, should_show_password]); const should_show_password_dialog = React.useMemo(() => { if (should_show_password) { - if (!should_set_trading_password) return is_mobile; + if (!should_set_trading_password) return !isDesktop; } return false; - }, [is_mobile, should_set_trading_password, should_show_password]); + }, [isDesktop, should_set_trading_password, should_show_password]); const success_modal_submit_label = React.useMemo(() => { if (account_type.category === CATEGORY.REAL) { @@ -921,7 +919,7 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr onUnmount={() => getAccountStatus(platform)} onExited={() => setPasswordModalExited(true)} onEntered={() => setPasswordModalExited(false)} - width={is_mobile ? '32.8rem' : 'auto'} + width={!isDesktop ? '32.8rem' : 'auto'} > {cfd_password_form} @@ -1027,8 +1025,8 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr : account_type.category === CATEGORY.REAL } has_close_icon={false} - width={is_mobile ? '32.8rem' : 'auto'} - is_medium_button={is_mobile} + width={!isDesktop ? '32.8rem' : 'auto'} + is_medium_button={!isDesktop} /> - DISABLE_LANDSCAPE_BLOCKER_ROUTES.some(route => path.startsWith(route)); +export const isDisabledLandscapeBlockerRoute = (path: string) => { + // can't use routes.traders_hub for the next check because all routes starts with '/' + if (path === routes.traders_hub) return true; + return DISABLE_LANDSCAPE_BLOCKER_ROUTES.some(route => path.startsWith(route)); +};