WALL-2578/chore: cfd trade modal description fix for different platfo…

…rms and css cleanup (#11376) * chore: cfd trade modal description fix for different platforms and css cleanup * chore: dont show landing_company demo wallet, use account_id for dxtrade and login for username
binary-com · Nov 14, 2023 · e934268 · e934268 · vercel · Nov 14, 2023
1 parent f780db6
commit e934268
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/packages/wallets/src/features/cfd/components/ModalTradeWrapper/ModalTradeWrapper.scss b/packages/wallets/src/features/cfd/components/ModalTradeWrapper/ModalTradeWrapper.scss
@@ -41,8 +41,8 @@
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
-                padding: 0.8rem;
                 width: 13.6rem;
+                gap: 0.5rem;
             }
         }
     }

diff --git a/packages/wallets/src/features/cfd/components/ModalTradeWrapper/ModalTradeWrapper.tsx b/packages/wallets/src/features/cfd/components/ModalTradeWrapper/ModalTradeWrapper.tsx
@@ -54,7 +54,8 @@ const ModalTradeWrapper: FC<PropsWithChildren<TModalTradeWrapper>> = ({ children
                 return (
                     <div className='wallets-modal-trade-wrapper__footer'>
                         <WalletText align='center' size='sm' weight='bold'>
-                            Download Deriv MT5 on your phone to trade with the Deriv MT5 account
+                            Download {PlatformDetails[platform].title} on your phone to trade with the{' '}
+                            {PlatformDetails[platform].title} account
                         </WalletText>
                         <div className='wallets-modal-trade-wrapper__footer-installations'>
                             <div className='wallets-modal-trade-wrapper__footer-installations-icons'>
@@ -68,7 +69,7 @@ const ModalTradeWrapper: FC<PropsWithChildren<TModalTradeWrapper>> = ({ children
                                 <div className='wallets-modal-trade-wrapper__footer-installations-qr'>
                                     <QRCode size={80} value={PlatformDetails[platform].link} />
                                     <WalletText align='center' size='xs'>
-                                        Scan the QR code to download Deriv {PlatformDetails[platform].title}
+                                        Scan the QR code to download {PlatformDetails[platform].title}
                                     </WalletText>
                                 </div>
                             )}

diff --git a/...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss b/...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
@@ -20,6 +20,8 @@
     &__values {
         display: flex;
         align-items: center;
+        gap: 0.8rem;
+        padding-right: 0.8rem;
 
         & .wallets-text {
             font-family: 'Courier', serif;
@@ -32,7 +34,6 @@
     }
 
     &__edit {
-        margin: 0 0.5rem;
         cursor: pointer;
     }
 }
diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
@@ -1,15 +1,15 @@
 import React, { useMemo } from 'react';
-import { InlineMessage, WalletText } from '../../../../components/Base';
+import { useActiveWalletAccount, useCtraderAccountsList, useDxtradeAccountsList, useMT5AccountsList } from '@deriv/api';
 import { WalletListCardBadge } from '../../../../components';
-import { MT5TradeDetailsItem } from './MT5TradeDetailsItem';
-import ImportantIcon from '../../../../public/images/ic-important.svg';
+import { InlineMessage, WalletText } from '../../../../components/Base';
+import { useModal } from '../../../../components/ModalProvider';
 import useDevice from '../../../../hooks/useDevice';
+import ImportantIcon from '../../../../public/images/ic-important.svg';
+import { THooks } from '../../../../types';
+import { MarketTypeDetails, PlatformDetails } from '../../constants';
+import { MT5TradeDetailsItem } from './MT5TradeDetailsItem';
 import { MT5TradeLink } from './MT5TradeLink';
 import './MT5TradeScreen.scss';
-import { useModal } from '../../../../components/ModalProvider';
-import { MarketTypeDetails, PlatformDetails } from '../../constants';
-import { useActiveWalletAccount, useCtraderAccountsList, useDxtradeAccountsList, useMT5AccountsList } from '@deriv/api';
-import { THooks } from '../../../../types';
 
 const MT5TradeScreen = () => {
     const { isDesktop } = useDevice();
@@ -38,7 +38,12 @@ const MT5TradeScreen = () => {
     }, [platform, marketType, platformToAccountsListMapper]);
 
     const loginId = useMemo(() => {
-        return platform === 'mt5' ? (details as THooks.MT5AccountsList)?.loginid : details?.login;
+        if (platform === 'mt5') {
+            return (details as THooks.MT5AccountsList)?.loginid;
+        } else if (platform === 'dxtrade') {
+            return (details as THooks.DxtradeAccountsList)?.account_id;
+        }
+        return details?.login;
     }, [details, platform]);
 
     return (
@@ -55,7 +60,7 @@ const MT5TradeScreen = () => {
                                     {platform === 'mt5'
                                         ? MarketTypeDetails[marketType || 'all'].title
                                         : PlatformDetails[platform || 'dxtrade'].title}{' '}
-                                    {details?.landing_company_short?.toUpperCase()}
+                                    {!activeWalletData?.is_virtual && details?.landing_company_short?.toUpperCase()}
                                 </WalletText>
                                 {activeWalletData?.is_virtual && <WalletListCardBadge isDemo label='virtual' />}
                             </div>
@@ -90,7 +95,7 @@ const MT5TradeScreen = () => {
                     )}
                     {getModalState('platform') === 'dxtrade' && (
                         <>
-                            <MT5TradeDetailsItem label='Username' value={loginId || '12345678'} />
+                            <MT5TradeDetailsItem label='Username' value={details?.login || '12345678'} />
                             <MT5TradeDetailsItem label='Password' value='********' variant='password' />
                         </>
                     )}