Merge branch 'deriv-com:main' into shontzu/TRAH-3015/ui-for-seamless-…

…MT5-mobile-login-integration

README.md

@@ -13,6 +13,19 @@ This template was generated using `create-deriv-v2`
 
 ## Getting started
 
+Setup SSL Certificates
+
+To run this project, you will need the dev.pem and cert.pem SSL certificate keys. You can obtain these keys from any member of the TradersHub team.
+Once you have these keys, add them to your local machine. You can place them in any directory, but remember the path where you placed them.
+Next, you need to include the paths to these keys in your .env file. Add the following lines to your .env file:
+
+```
+DEV_PEM_PATH='YOUR_PATH/dev.pem'
+CERT_PEM_PATH='YOUR_PATH/cert.pem'
+```
+
+After setting up the SSL certificates, you can run the development server.
+
 To run the development server:
 
 ```bash

package.json

@@ -23,6 +23,7 @@
         "@tanstack/react-query-devtools": "^5.28.14",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "dotenv": "^16.4.5",
         "formik": "^2.4.5",
         "js-cookie": "^3.0.5",
         "qrcode.react": "^3.1.0",
@@ -31,7 +32,7 @@
         "react-router-dom": "^6.22.3",
         "tailwind-merge": "^2.2.1",
         "usehooks-ts": "^3.0.2",
-        "vite-bundle-visualizer": "^1.1.0",
+        "vite-bundle-visualizer": "^0.11.0",
         "yup": "^1.4.0"
     },
     "devDependencies": {

src/cfd/constants/constants.tsx

@@ -107,19 +107,19 @@ export const Jurisdiction = {
 
 export const PlatformDetails = {
     ctrader: {
-        icon: (width?: number) => <IconComponent icon='CTrader' width={width} />,
+        icon: (width?: number, height?: number) => <IconComponent icon='CTrader' width={width} height={height} />,
         link: 'https://onelink.to/5jgj8z',
         platform: 'ctrader' as TPlatforms.OtherAccounts,
         title: 'Deriv cTrader',
     },
     dxtrade: {
-        icon: (width?: number) => <IconComponent icon='DerivX' width={width} />,
+        icon: (width?: number, height?: number) => <IconComponent icon='DerivX' width={width} height={height} />,
         link: 'https://onelink.to/grmtyx',
         platform: 'dxtrade' as TPlatforms.OtherAccounts,
         title: 'Deriv X',
     },
     mt5: {
-        icon: (width?: number) => <IconComponent icon='Derived' width={width} />,
+        icon: (width?: number, height?: number) => <IconComponent icon='Derived' width={width} height={height} />,
         link: 'https://onelink.to/grmtyx',
         platform: 'mt5' as TPlatforms.MT5,
         title: 'Deriv MT5',

src/cfd/modals/DxtradePasswordModal/DxtradeSuccess.tsx

@@ -5,7 +5,7 @@ import { useActiveDerivTradingAccount } from '@/hooks';
 
 import { Category, PlatformDetails } from '../../constants';
 
-const DxtradeSuccess = () => {
+export const DxtradeSuccess = () => {
     const { data: activeTrading } = useActiveDerivTradingAccount();
     const isDemo = activeTrading?.is_virtual;
 
@@ -21,5 +21,3 @@ const DxtradeSuccess = () => {
         />
     );
 };
-
-export default DxtradeSuccess;

src/cfd/modals/DxtradePasswordModal/index.ts

@@ -1,2 +1,3 @@
 export { DxtradePasswordModal } from './DxtradePasswordModal';
 export { DxtradeCreateAccountButton } from './DxtradeCreateAccountButton';
+export { DxtradeSuccess } from './DxtradeSuccess';

src/cfd/modals/DxtradeSuccessModal/DxtradeSuccessModal.tsx

@@ -0,0 +1,15 @@
+import { DxtradeSuccess } from '@cfd/modals/';
+import { Modal } from '@deriv-com/ui';
+
+import { useQueryParams } from '@/hooks';
+
+export const DxtradeSuccessModal = () => {
+    const { isModalOpen, closeModal } = useQueryParams();
+    return (
+        <Modal ariaHideApp={false} isOpen={isModalOpen('DxtradeSuccessModal')} onRequestClose={closeModal}>
+            <Modal.Body>
+                <DxtradeSuccess />
+            </Modal.Body>
+        </Modal>
+    );
+};

src/cfd/modals/DxtradeSuccessModal/index.ts

@@ -0,0 +1 @@
+export { DxtradeSuccessModal } from './DxtradeSuccessModal';

src/cfd/modals/index.ts

@@ -2,3 +2,4 @@ export * from './DxtradePasswordModal';
 export * from './MT5PasswordModal';
 export * from './MT5SuccessModal';
 export * from './TradeModal';
+export * from './DxtradeSuccessModal';

src/cfd/screens/CFDSuccess/CFDSuccess.tsx

@@ -60,7 +60,7 @@ export const CFDSuccess = ({ description, marketType, platform, renderButtons }:
     if (platform === 'mt5') {
         icon = marketTypeToDetailsMapper[platform][marketType]?.icon;
     } else {
-        icon = PlatformDetails[platform as keyof typeof PlatformDetails]?.icon();
+        icon = PlatformDetails[platform as keyof typeof PlatformDetails]?.icon(150, 100);
     }
 
     const IconWithCheckMark = () => (

src/cfd/screens/EnterPassword/EnterPassword.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, Fragment } from 'react';
 
 import { Category, CFDPlatforms, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants';
-import { Modal, PasswordInput, Text } from '@deriv-com/ui';
+import { Modal, PasswordInput, Text, useDevice } from '@deriv-com/ui';
 
 import { useActiveDerivTradingAccount, useQueryParams, useRegulationFlags } from '@/hooks';
 import { useCFDContext } from '@/providers';
@@ -33,22 +33,25 @@ export const EnterPassword = ({ onPasswordChange, password }: TEnterPasswordProp
     const accountType = data?.is_virtual ? Category.DEMO : Category.REAL;
     const marketTypeTitle =
         platform === PlatformDetails.dxtrade.platform ? accountType : marketTypeDetails[marketType]?.title;
+    const { isDesktop } = useDevice();
 
     return (
         <Fragment>
             <Modal.Header onRequestClose={closeModal}>
-                <Text weight='bold'>{`Enter your ${title} password`}</Text>
+                {isDesktop && <Text weight='bold'>{`Enter your ${title} password`}</Text>}
             </Modal.Header>
             <Modal.Body>
-                <div className='flex flex-col gap-16 lg:w-[400px] lg:gap-8 lg:pt-24 lg:px-24'>
+                <div className='flex flex-col gap-16 lg:w-[400px] lg:gap-8 lg:pt-24 lg:px-24 items-center pt-24 '>
+                    {!isDesktop && <Text weight='bold'>{`Enter your ${title} password`}</Text>}
                     <Text size='sm'>
                         Enter your {title} password to add a {title} {marketTypeTitle} account.
                     </Text>
                     <PasswordInput
-                        isFullWidth
+                        isFullWidth={isDesktop}
                         label={`${title} password`}
                         onChange={onPasswordChange}
                         value={password}
+                        hidePasswordMeter
                     />
                 </div>
             </Modal.Body>

src/components/Header/Header.tsx

@@ -11,7 +11,13 @@ export const Header = () => {
     return (
         <header className='border-solid border-b-1 border-b-system-light-hover-background flex px-20'>
             <div className='flex justify-between items-center w-full'>
-                <IconComponent icon='Deriv' />
+                <IconComponent
+                    icon='Deriv'
+                    onClick={() => {
+                        window.location.href = '/';
+                    }}
+                    className='cursor-pointer'
+                />
                 {!(isAuthorized || activeLoginid) ? (
                     <div className='flex gap-6'>
                         <Button

src/hooks/useQueryParams.ts

@@ -20,7 +20,8 @@ type ModalId =
     | 'Signup'
     | 'TopUpModal'
     | 'TradeModal'
-    | 'VerificationFailedModal';
+    | 'VerificationFailedModal'
+    | 'DxtradeSuccessModal';
 /**
  * @description A hook to manage query params for modals
  * @returns isOpen: (modalId: ModalId) => boolean

src/modals/Modals.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react/jsx-runtime';
 
-import { DxtradePasswordModal, MT5PasswordModal, MT5SuccessModal, TradeModal } from '@/cfd/modals';
+import { DxtradePasswordModal, DxtradeSuccessModal, MT5PasswordModal, MT5SuccessModal, TradeModal } from '@/cfd/modals';
 import { RealAccountCreation } from '@/flows';
 
 import { JurisdictionModal } from './JurisdictionModal';
@@ -18,6 +18,7 @@ export const Modals = () => {
             <AccountSelector />
             <AccountOpeningSuccessModal />
             <DxtradePasswordModal />
+            <DxtradeSuccessModal />
             <JurisdictionModal />
             <MT5PasswordModal />
             <MT5SuccessModal />

src/modals/__tests__/Modals.spec.tsx

@@ -62,6 +62,12 @@ jest.mock('@/cfd/modals/DxtradePasswordModal', () => {
     return { DxtradePasswordModal };
 });
 
+jest.mock('@/cfd/modals/DxtradeSuccessModal', () => {
+    const DxtradeSuccessModal = () => <div>DxtradeSuccessModal</div>;
+    DxtradeSuccessModal.displayName = 'DxtradeSuccessModal';
+    return { DxtradeSuccessModal };
+});
+
 describe('Modals', () => {
     it('should render all modals', () => {
         render(<Modals />);
@@ -74,5 +80,6 @@ describe('Modals', () => {
         expect(screen.getByText('JurisdictionModal')).toBeInTheDocument();
         expect(screen.getByText('TradeModal')).toBeInTheDocument();
         expect(screen.getByText('DxtradePasswordModal')).toBeInTheDocument();
+        expect(screen.getByText('DxtradeSuccessModal')).toBeInTheDocument();
     });
 });