From 7955d52db98159b2ea6515c11a0ff2e07747bb77 Mon Sep 17 00:00:00 2001 From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> Date: Tue, 24 Oct 2023 14:38:42 +0800 Subject: [PATCH] adrienne/feat: responsive view for success and password modal (#10871) * chore: backup * chore: added responsive view for success and password modal * chore: reverted test changes * chore: removed unused scss file * chore: removed unused scss file * chore: fix eslint issues * chore: fix eslint issues * chore: removed unused css and fix padding issue in header step modal * chore: refactored code based on reviews * chore: remove usage of children * chore: fix eslint issues --- .../ModalStepWrapper/ModalStepWrapper.scss | 7 +- .../ModalStepWrapper/ModalStepWrapper.tsx | 2 +- .../WalletButtonGroup/WalletButtonGroup.scss | 15 ++++ .../WalletButtonGroup/WalletButtonGroup.tsx | 23 ++++++ .../Base/WalletButtonGroup/index.ts | 1 + packages/wallets/src/components/Base/index.ts | 1 + .../WalletMarketCurrencyIcon.tsx | 5 +- .../DxtradeEnterPasswordModal.tsx | 1 + .../MT5PasswordModal/MT5PasswordModal.tsx | 70 ++++++++++++++++++- .../CreatePassword/CreatePassword.scss | 4 ++ .../screens/CreatePassword/CreatePassword.tsx | 19 +++-- .../screens/EnterPassword/EnterPassword.scss | 14 +++- .../screens/EnterPassword/EnterPassword.tsx | 37 ++++++---- .../features/cfd/screens/Success/Success.scss | 9 +++ .../features/cfd/screens/Success/Success.tsx | 4 +- 15 files changed, 186 insertions(+), 26 deletions(-) create mode 100644 packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss create mode 100644 packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx create mode 100644 packages/wallets/src/components/Base/WalletButtonGroup/index.ts diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss index 9df4bbad230b..b2f4fb07715c 100644 --- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss +++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss @@ -12,7 +12,7 @@ grid-template-rows: 9% auto; &--fixed { - grid-template-rows: 9% auto 8%; + grid-template-rows: 7% auto 8%; } } @@ -23,15 +23,18 @@ justify-content: space-between; align-items: center; - &-close-icon { + &--close-icon { cursor: pointer; } @include mobile { + display: grid; + grid-template-columns: auto 5%; background-color: #ffffff; position: relative; z-index: 99; width: 100%; + padding: 0 2rem; } } diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx index 89d1829fffde..543f1ed57513 100644 --- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx +++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx @@ -29,7 +29,7 @@ const ModalStepWrapper: FC> = ({ {title} - +
{children} diff --git a/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss b/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss new file mode 100644 index 000000000000..8baac6deef19 --- /dev/null +++ b/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss @@ -0,0 +1,15 @@ +.wallets-button-group { + display: grid; + width: 100%; + gap: 1.2rem; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; + + &--flex { + grid-auto-columns: auto; + } + + &--vertical { + flex-direction: column; + } +} diff --git a/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx b/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx new file mode 100644 index 000000000000..7e5bbf968c30 --- /dev/null +++ b/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx @@ -0,0 +1,23 @@ +import React, { FC, PropsWithChildren } from 'react'; +import classNames from 'classnames'; +import './WalletButtonGroup.scss'; + +type TWalletButtonGroupProps = { + isFlex?: boolean; + isVertical?: boolean; +}; + +const WalletButtonGroup: FC> = ({ children, isFlex, isVertical }) => { + return ( +
+ {children} +
+ ); +}; + +export default WalletButtonGroup; diff --git a/packages/wallets/src/components/Base/WalletButtonGroup/index.ts b/packages/wallets/src/components/Base/WalletButtonGroup/index.ts new file mode 100644 index 000000000000..4c177d90866c --- /dev/null +++ b/packages/wallets/src/components/Base/WalletButtonGroup/index.ts @@ -0,0 +1 @@ +export { default as WalletButtonGroup } from './WalletButtonGroup'; diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts index 32262d2576b6..7a079370f53b 100644 --- a/packages/wallets/src/components/Base/index.ts +++ b/packages/wallets/src/components/Base/index.ts @@ -6,6 +6,7 @@ export * from './ProgressBar'; export * from './Tabs'; export * from './WalletAlertMessage'; export * from './WalletButton'; +export * from './WalletButtonGroup'; export * from './WalletClipboard'; export * from './WalletDropdown'; export * from './WalletText'; diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx index b5b61d87da86..d9b1aaadb1b0 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -7,6 +7,7 @@ import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg'; import { WalletCardIcon } from '../WalletCardIcon'; import { WalletGradientBackground } from '../WalletGradientBackground'; import type { useSortedMT5Accounts } from '@deriv/api'; +import useDevice from '../../hooks/useDevice'; import './WalletMarketCurrencyIcon.scss'; const marketTypeToIconMapper: Record>> = { @@ -28,6 +29,8 @@ type TWalletMarketCurrencyIconProps = { }; const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TWalletMarketCurrencyIconProps) => { + const { isMobile } = useDevice(); + const MarketTypeIcon = marketType === 'all' && Object.keys(marketTypeToPlatformIconMapper).includes(platform) ? marketTypeToPlatformIconMapper[platform] @@ -42,7 +45,7 @@ const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TW }`} > - +
diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index 63d059525107..2f5bf8776e3a 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -63,6 +63,7 @@ const DxtradeEnterPasswordModal = () => { icon={} onPasswordChange={e => setPassword(e.target.value)} onPrimaryClick={onSubmit} + password={password} platform='dxtrade' /> )} diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index 884ac493cd4a..b8f245034999 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -7,10 +7,11 @@ import { useSettings, useTradingPlatformPasswordChange, } from '@deriv/api'; -import { ModalWrapper, WalletButton } from '../../../../components/Base'; +import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components/Base'; import { useModal } from '../../../../components/ModalProvider'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; import { TMarketTypes, TPlatforms } from '../../../../types'; +import useDevice from '../../../../hooks/useDevice'; import { MarketTypeToTitleMapper, PlatformToTitleMapper } from '../../constants'; import { CreatePassword, EnterPassword, Success } from '../../screens'; @@ -28,6 +29,7 @@ const MT5PasswordModal: React.FC = ({ marketType, platform }) => { const { data: availableMT5Accounts } = useAvailableMT5Accounts(); const { data: settings } = useSettings(); const { hide } = useModal(); + const { isMobile } = useDevice(); const hasMT5Account = mt5Accounts?.find(account => account.login); const isDemo = activeWallet?.is_virtual; @@ -68,6 +70,70 @@ const MT5PasswordModal: React.FC = ({ marketType, platform }) => { }); }; + const renderTitle = () => { + if (!isSuccess && hasMT5Account) return `Enter your ${PlatformToTitleMapper.mt5} password`; + return ''; + }; + + const renderFooter = () => { + if (isSuccess) return ; + if (hasMT5Account) + return ( + + + + + ); + return ( + + ); + }; + + if (isMobile) { + return ( + + {isSuccess && ( + account.market_type === marketType)?.display_balance || '' + } + marketType={marketType} + platform={platform} + renderButton={() => } + title={`Your ${marketTypeTitle} ${isDemo ? ' demo' : 'real'} account is ready`} + /> + )} + {!isSuccess && + (hasMT5Account ? ( + setPassword(e.target.value)} + onPrimaryClick={onSubmit} + password={password} + platform='mt5' + /> + ) : ( + } + onPasswordChange={e => setPassword(e.target.value)} + onPrimaryClick={onSubmit} + password={password} + platform='mt5' + /> + ))} + + ); + } + return ( {isSuccess && ( @@ -90,6 +156,7 @@ const MT5PasswordModal: React.FC = ({ marketType, platform }) => { marketType={marketType} onPasswordChange={e => setPassword(e.target.value)} onPrimaryClick={onSubmit} + password={password} platform='mt5' /> ) : ( @@ -97,6 +164,7 @@ const MT5PasswordModal: React.FC = ({ marketType, platform }) => { icon={} onPasswordChange={e => setPassword(e.target.value)} onPrimaryClick={onSubmit} + password={password} platform='mt5' /> ))} diff --git a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss index fe9bd57258bb..b770741a27a4 100644 --- a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss +++ b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss @@ -10,6 +10,10 @@ border-radius: 8px; background: var(--system-light-8-primary-background, #fff); + @include mobile { + width: 100%; + } + &-title { font-weight: 700; font-size: 18px; diff --git a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx index e97f8e140dac..2794513cd591 100644 --- a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx +++ b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx @@ -3,15 +3,21 @@ import PasswordShowIcon from '../../../../public/images/ic-password-show.svg'; import './CreatePassword.scss'; import { TPlatforms } from '../../../../types'; import { PlatformToTitleMapper } from '../../constants'; +import { WalletButton } from '../../../../components/Base'; +import useDevice from '../../../../hooks/useDevice'; +// TODO: Refactor the unnecessary props out once FlowProvider is integrated type TProps = { icon: React.ReactNode; onPasswordChange?: (e: React.ChangeEvent) => void; onPrimaryClick: () => void; + password: string; platform: TPlatforms.All; }; -const CreatePassword: React.FC = ({ icon, onPasswordChange, onPrimaryClick, platform }) => { +const CreatePassword: React.FC = ({ icon, onPasswordChange, onPrimaryClick, password, platform }) => { + const { isMobile } = useDevice(); + const title = PlatformToTitleMapper[platform]; return (
@@ -24,9 +30,14 @@ const CreatePassword: React.FC = ({ icon, onPasswordChange, onPrimaryCli
- + {!isMobile && ( + + )} ); }; diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss index fb113f05b004..fc6de78d29d9 100644 --- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss +++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss @@ -8,13 +8,23 @@ background: var(--system-light-8-primary-background, #fff); box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25); + @include mobile { + justify-content: flex-start; + border-radius: 0; + box-shadow: none; + } + &--container { display: flex; - width: 400px; - padding: 0 24px 24px; + width: 40rem; + padding: 0 2.4rem 2.4rem; flex-direction: column; align-items: flex-start; gap: 8px; + + @include mobile { + width: 100%; + } } &-title { diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx index 6c1c011de60b..a48db5c27dd0 100644 --- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx +++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx @@ -3,13 +3,16 @@ import PasswordShowIcon from '../../../../public/images/ic-password-show.svg'; import './EnterPassword.scss'; import { TMarketTypes, TPlatforms } from '../../../../types'; import { PlatformToTitleMapper } from '../../constants'; +import useDevice from '../../../../hooks/useDevice'; +// TODO: Refactor the unnecessary props out once FlowProvider is integrated type TProps = { isLoading?: boolean; marketType: TMarketTypes.CreateOtherCFDAccount; onPasswordChange?: (e: React.ChangeEvent) => void; onPrimaryClick?: () => void; onSecondaryClick?: () => void; + password: string; platform: TPlatforms.All; }; @@ -19,32 +22,38 @@ const EnterPassword: React.FC = ({ onPasswordChange, onPrimaryClick, onSecondaryClick, + password, platform, }) => { + const { isDesktop } = useDevice(); const title = PlatformToTitleMapper[platform]; return ( - -
-
-
Enter your {title} password
- - Enter your {title} password to add a {title} {marketType} account. - -
- - -
+
+
+ {isDesktop &&
Enter your {title} password
} + + Enter your {title} password to add a {title} {marketType} account. + +
+ +
+
+ {isDesktop && (
-
-
- + )} +
); }; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss index 588d7ef44de6..7c242691d323 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.scss +++ b/packages/wallets/src/features/cfd/screens/Success/Success.scss @@ -10,6 +10,11 @@ text-align: center; background: var(--system-light-8-primary-background, #fff); + @include mobile { + width: 100%; + height: 100%; + } + &__info { display: flex; flex-direction: column; @@ -20,6 +25,10 @@ position: relative; border-radius: 10px; + @include mobile { + height: fit-content; + } + &-badge { position: absolute; top: 0; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index cd1cce2ee232..424896713d3a 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -4,6 +4,7 @@ import { WalletText } from '../../../../components'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon'; import { TDisplayBalance, TMarketTypes, TPlatforms } from '../../../../types'; +import useDevice from '../../../../hooks/useDevice'; import { MarketTypeToTitleMapper, PlatformToTitleMapper } from '../../constants'; import './Success.scss'; @@ -25,6 +26,7 @@ const Success: React.FC = ({ title, }) => { const { data } = useActiveWalletAccount(); + const { isDesktop } = useDevice(); const isDemo = data?.is_virtual; const landingCompanyName = data?.landing_company_name?.toUpperCase(); @@ -68,7 +70,7 @@ const Success: React.FC = ({ {description} - {renderButton()} + {isDesktop && renderButton()}
); };