diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss index ad87fc25ceab..0f6fe1474809 100644 --- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss +++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss @@ -36,7 +36,7 @@ } &__header { - padding: 2rem; + padding: 1.6rem 2.4rem; border-bottom: 0.2rem solid #f2f3f4; display: flex; justify-content: space-between; diff --git a/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx b/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx index 2ce68c17d6ef..5870c330e543 100644 --- a/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx +++ b/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx @@ -32,6 +32,7 @@ const AvailableCTraderAccountsList: React.FC = () => { if (status === 'success') { show( diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx index e4b98eda86d3..a402861e771c 100644 --- a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx +++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx @@ -1,57 +1,40 @@ -import React, { useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; +import React from 'react'; import { useCtraderAccountsList } from '@deriv/api-v2'; -import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components'; +import { ModalStepWrapper, ModalWrapper } from '../../../../components'; import { useModal } from '../../../../components/ModalProvider'; import useDevice from '../../../../hooks/useDevice'; import { THooks } from '../../../../types'; import { PlatformDetails } from '../../constants'; import { CFDSuccess } from '../../screens'; +import { CTraderSuccessModalButtons } from './components'; type TCTraderSuccessModal = { + displayBalance?: string; isDemo: boolean; walletCurrencyType: THooks.WalletAccountsList['wallet_currency_type']; }; -const CTraderSuccessModal = ({ isDemo, walletCurrencyType }: TCTraderSuccessModal) => { +const CTraderSuccessModal = ({ displayBalance, isDemo, walletCurrencyType }: TCTraderSuccessModal) => { const { data: cTraderAccounts } = useCtraderAccountsList(); const { isMobile } = useDevice(); - const history = useHistory(); const { hide } = useModal(); - const renderButtons = useCallback( - () => ( - - hide()} size='lg' variant='outlined'> - Maybe later - - { - hide(); - history.push('/wallets/cashier/transfer'); - }} - size='lg' - > - Transfer funds - - - ), - [hide, history] - ); - const description = isDemo - ? `Transfer virtual funds from your Demo Wallet to your ${PlatformDetails.ctrader.title} Demo account to practice trading.` + ? `Let's practise trading with ${displayBalance} virtual funds.` : `Transfer funds from your ${walletCurrencyType} Wallet to your ${PlatformDetails.ctrader.title} account to start trading.`; if (isMobile) { return ( - + } + title={' '} + > account.login)?.formatted_balance} marketType='all' platform='ctrader' - renderButton={renderButtons} + renderButton={() => } title={`Your ${PlatformDetails.ctrader.title} ${isDemo ? 'demo' : ''} account is ready`} /> ; @@ -65,7 +48,7 @@ const CTraderSuccessModal = ({ isDemo, walletCurrencyType }: TCTraderSuccessModa displayBalance={cTraderAccounts?.find(account => account.login)?.formatted_balance} marketType='all' platform={PlatformDetails.ctrader.platform} - renderButton={renderButtons} + renderButton={() => } title={`Your ${PlatformDetails.ctrader.title} ${isDemo ? 'demo' : ''} account is ready`} /> diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx new file mode 100644 index 000000000000..fc6f4a6f882e --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +import { WalletButton, WalletButtonGroup } from '../../../../../components'; + +type TCTraderSuccessModalButtons = { + hide: () => void; + isDemo: boolean; +}; + +const CTraderSuccessModalButtons = ({ hide, isDemo }: TCTraderSuccessModalButtons) => { + const history = useHistory(); + + if (isDemo) { + return ( +
+ + OK + +
+ ); + } + + return ( + + + Maybe later + + { + hide(); + history.push('/wallets/cashier/transfer'); + }} + size='lg' + > + Transfer funds + + + ); +}; + +export default CTraderSuccessModalButtons; diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/index.ts b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/index.ts new file mode 100644 index 000000000000..99d8dae6fcac --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/index.ts @@ -0,0 +1 @@ +export { default as CTraderSuccessModalButtons } from './CTraderSuccessModalButtons'; diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss index 34b72df40ecf..5e583abfab7c 100644 --- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss +++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss @@ -13,7 +13,6 @@ @include mobile { padding: 0.8rem; - height: 6rem; } } diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx index 0e404f56f97b..c4dc18f2b134 100644 --- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx +++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx @@ -27,11 +27,11 @@ const MT5TradeDetailsItem: FC = ({ label, value, vari > {variant !== 'info' && ( - + {label}
- + {value} {variant === 'clipboard' && ( @@ -51,7 +51,7 @@ const MT5TradeDetailsItem: FC = ({ label, value, vari )} {variant === 'info' && ( - + {value} )} diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.scss b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.scss index bee029eb3dd3..da2de4f750e2 100644 --- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.scss +++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.scss @@ -33,13 +33,15 @@ &__icon { & > svg { - transform: scale(0.7) translateX(-0.7rem); + width: 2.4rem; + height: 2.4rem; } } &__details { display: flex; flex-direction: column; + padding-left: 0.8rem; } &__balance { diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx index 32ff0e008f95..696a45fb0634 100644 --- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx +++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx @@ -103,14 +103,14 @@ const MT5TradeScreen: FC = ({ mt5Account }) => {
- + {platform === mt5Platform ? marketTypeTitle : platformTitle}{' '} {!activeWalletData?.is_virtual && details?.landing_company_short?.toUpperCase()} {activeWalletData?.is_virtual && }
- {loginId} + {platform !== ctraderPlatform && loginId}
@@ -147,7 +147,7 @@ const MT5TradeScreen: FC = ({ mt5Account }) => {
- + { serviceMaintenanceMessages[ (platform as keyof typeof serviceMaintenanceMessages) ?? PlatformDetails.mt5.platform