[WALL] Lubega / WALL-3675 / Demo ctrader design updates (#14398)

* fix: demo ctrader design updates * fix: applied comments * fix: missing prop * fix: missing prop * fix: applied comments * fix: applied comments
deriv-com · Apr 1, 2024 · 9c25063 · 9c25063
1 parent e8a6d0b
commit 9c25063
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 38 deletions.
diff --git 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/.../features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx b/.../features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
@@ -32,6 +32,7 @@ const AvailableCTraderAccountsList: React.FC = () => {
         if (status === 'success') {
             show(
                 <CTraderSuccessModal
+                    displayBalance={activeWallet?.display_balance || ''}
                     isDemo={accountType === 'demo'}
                     walletCurrencyType={activeWallet?.wallet_currency_type || 'USD'}
                 />

diff --git 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(
-        () => (
-            <WalletButtonGroup isFlex isFullWidth>
-                <WalletButton onClick={() => hide()} size='lg' variant='outlined'>
-                    Maybe later
-                </WalletButton>
-                <WalletButton
-                    onClick={() => {
-                        hide();
-                        history.push('/wallets/cashier/transfer');
-                    }}
-                    size='lg'
-                >
-                    Transfer funds
-                </WalletButton>
-            </WalletButtonGroup>
-        ),
-        [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 (
-            <ModalStepWrapper renderFooter={renderButtons} title={' '}>
+            <ModalStepWrapper
+                renderFooter={() => <CTraderSuccessModalButtons hide={hide} isDemo={isDemo} />}
+                title={' '}
+            >
                 <CFDSuccess
                     description={description}
                     displayBalance={cTraderAccounts?.find(account => account.login)?.formatted_balance}
                     marketType='all'
                     platform='ctrader'
-                    renderButton={renderButtons}
+                    renderButton={() => <CTraderSuccessModalButtons hide={hide} isDemo={isDemo} />}
                     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={() => <CTraderSuccessModalButtons hide={hide} isDemo={isDemo} />}
                 title={`Your ${PlatformDetails.ctrader.title} ${isDemo ? 'demo' : ''} account is ready`}
             />
         </ModalWrapper>

diff --git a/...ets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx b/...ets/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 (
+            <div className='wallets-success-btn'>
+                <WalletButton isFullWidth onClick={hide} size='lg'>
+                    OK
+                </WalletButton>
+            </div>
+        );
+    }
+
+    return (
+        <WalletButtonGroup isFlex isFullWidth>
+            <WalletButton onClick={hide} size='lg' variant='outlined'>
+                Maybe later
+            </WalletButton>
+            <WalletButton
+                onClick={() => {
+                    hide();
+                    history.push('/wallets/cashier/transfer');
+                }}
+                size='lg'
+            >
+                Transfer funds
+            </WalletButton>
+        </WalletButtonGroup>
+    );
+};
+
+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
@@ -0,0 +1 @@
+export { default as CTraderSuccessModalButtons } from './CTraderSuccessModalButtons';
diff --git a/...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss b/...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
@@ -13,7 +13,6 @@
 
         @include mobile {
             padding: 0.8rem;
-            height: 6rem;
         }
     }
 

diff --git a/...llets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx b/...llets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx
@@ -27,11 +27,11 @@ const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value, vari
         >
             {variant !== 'info' && (
                 <React.Fragment>
-                    <WalletText color='less-prominent' size='sm'>
+                    <WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
                         {label}
                     </WalletText>
                     <div className='wallets-mt5-trade-details-item__values'>
-                        <WalletText size='sm' weight='bold'>
+                        <WalletText size={isDesktop ? 'xs' : 'sm'} weight='bold'>
                             {value}
                         </WalletText>
                         {variant === 'clipboard' && (
@@ -51,7 +51,7 @@ const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value, vari
                 </React.Fragment>
             )}
             {variant === 'info' && (
-                <WalletText color='less-prominent' size={isDesktop ? 'sm' : 'md'}>
+                <WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
                     {value}
                 </WalletText>
             )}

diff --git 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
@@ -103,14 +103,14 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
                     </div>
                     <div className='wallets-mt5-trade-screen__details-description__details'>
                         <div className='wallets-mt5-trade-screen__label'>
-                            <WalletText lineHeight='3xs' size='sm'>
+                            <WalletText lineHeight='3xs' size={isDesktop ? 'sm' : 'md'}>
                                 {platform === mt5Platform ? marketTypeTitle : platformTitle}{' '}
                                 {!activeWalletData?.is_virtual && details?.landing_company_short?.toUpperCase()}
                             </WalletText>
                             {activeWalletData?.is_virtual && <WalletListCardBadge isDemo label='virtual' />}
                         </div>
                         <WalletText color='less-prominent' size='xs'>
-                            {loginId}
+                            {platform !== ctraderPlatform && loginId}
                         </WalletText>
                     </div>
                     <div className='wallets-mt5-trade-screen__details-description__balance'>
@@ -147,7 +147,7 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
 
                 <div className='wallets-mt5-trade-screen__details-maintenance'>
                     <LabelPairedCircleExclamationMdFillIcon fill='#FFAD3A' />
-                    <WalletText color='less-prominent' size='2xs'>
+                    <WalletText color='less-prominent' size={isDesktop ? '2xs' : 'xs'}>
                         {
                             serviceMaintenanceMessages[
                                 (platform as keyof typeof serviceMaintenanceMessages) ?? PlatformDetails.mt5.platform
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as CTraderSuccessModalButtons } from './CTraderSuccessModalButtons';
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,6 @@ @@
             @include mobile {
                 padding: 0.8rem;
-                height: 6rem;
             }
         }
@@ Expand Down @@