Merge branch 'main' into habib/setup-rudderstack

.env.example

@@ -0,0 +1,2 @@
+DEV_PEM_PATH=./cert/dev.pem
+CERT_PEM_PATH=./cert/cert.pem

.gitignore

@@ -31,3 +31,5 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+cert.pem
+dev.pem

README.md

@@ -15,7 +15,18 @@ This template was generated using `create-deriv-v2`
 
 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.
+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.
+
+If you desire to use the default directory:
+
+-   In `cert` directory, copy `cert.example.pem` & `dev.example.pem` to `cert.pem` & `dev.pem` respectively
+-   Paste the respective certificate keys to `pem` files.
+-   Create a new `.env` from the `.env.example` file within the root directory
+
+If you prefer to use a different directory:
+
 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:
 

cert/cert.example.pem

@@ -0,0 +1 @@
+// paste the CERTIFICATE starting from -----BEGIN CERTIFICATE-----

cert/dev.example.pem

@@ -0,0 +1 @@
+// paste the CERTIFICATE starting from -----BEGIN CERTIFICATE-----

package.json

@@ -14,8 +14,8 @@
         "prepare": "husky install"
     },
     "dependencies": {
-        "@deriv-com/analytics": "^1.4.13",
-        "@deriv-com/api-hooks": "^0.0.22",
+        "@deriv-com/api-hooks": "^0.1.1",
+        "@deriv-com/analytics": "~1.4.13",
         "@deriv-com/ui": "1.12.19",
         "@deriv-com/utils": "^0.0.11",
         "@deriv/quill-icons": "latest",

src/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx

@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { PlatformDetails } from '@cfd/constants';
+import { CFDSuccess } from '@cfd/screens';
+import { Button, Modal } from '@deriv-com/ui';
+
+import { useQueryParams } from '@/hooks';
+import { useUIContext } from '@/providers';
+
+export const CTraderSuccessModal = () => {
+    const navigate = useNavigate();
+    const { uiState } = useUIContext();
+    const { isModalOpen, closeModal } = useQueryParams();
+
+    const isDemo = uiState.accountType === 'demo';
+
+    const renderButtons = useCallback(
+        () =>
+            isDemo ? (
+                <Button className='rounded-xs' onClick={closeModal}>
+                    Continue
+                </Button>
+            ) : (
+                <div className='space-x-10'>
+                    <Button
+                        className='border-2 rounded-xs border-system-light-less-prominent'
+                        color='black'
+                        onClick={closeModal}
+                        variant='outlined'
+                    >
+                        Maybe later
+                    </Button>
+                    <Button
+                        className='rounded-xs'
+                        onClick={() => {
+                            closeModal();
+                            navigate('/cashier/transfer');
+                        }}
+                    >
+                        Transfer funds
+                    </Button>
+                </div>
+            ),
+        [closeModal, isDemo, navigate]
+    );
+
+    const description = isDemo
+        ? `Congratulations, you have successfully created your demo ${PlatformDetails.ctrader.title} CFDs account.`
+        : `Congratulations, you have successfully created your real ${PlatformDetails.ctrader.title} CFDs account. To start trading, transfer funds from your Deriv account into this account.`;
+
+    return (
+        <Modal
+            isOpen={isModalOpen('CTraderSuccessModal')}
+            onRequestClose={closeModal}
+            ariaHideApp={false}
+            className='max-w-[440px] rounded-sm h-auto'
+        >
+            <Modal.Body>
+                <CFDSuccess
+                    description={description}
+                    platform={PlatformDetails.ctrader.platform}
+                    renderButtons={renderButtons}
+                />
+            </Modal.Body>
+        </Modal>
+    );
+};

src/cfd/modals/CTraderSuccessModal/index.ts

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

src/cfd/modals/index.ts

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

src/cfd/screens/Jurisdiction/JurisdictionScreen.tsx

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { Jurisdiction } from '@cfd/constants';
 
-import { useAvailableMT5Accounts, useMT5AccountsList } from '@/hooks';
+import { useAvailableMT5Accounts, useMT5AccountsList, useQueryParams } from '@/hooks';
 import { useCFDContext, useDynamicLeverageModalState } from '@/providers';
 
 import { JurisdictionCard } from './JurisdictionCard';
@@ -14,6 +14,7 @@ type TJurisdictionScreenProps = {
 
 export const JurisdictionScreen = ({ setIsCheckBoxChecked }: TJurisdictionScreenProps) => {
     const { cfdState, setCfdState } = useCFDContext();
+    const { closeModal } = useQueryParams();
     const { data: availableMT5Accounts } = useAvailableMT5Accounts();
     const { data: mt5AccountsList } = useMT5AccountsList();
     const { marketType, selectedJurisdiction } = cfdState;
@@ -37,6 +38,12 @@ export const JurisdictionScreen = ({ setIsCheckBoxChecked }: TJurisdictionScreen
         setIsCheckBoxChecked(false);
     }, [selectedJurisdiction, setIsCheckBoxChecked]);
 
+    useEffect(() => {
+        if (typeof closeModal === 'function') {
+            setCfdState({ selectedJurisdiction: '' });
+        }
+    }, [closeModal, setCfdState]);
+
     return (
         <div
             className={twMerge(

src/components/CurrencySwitcher/CurrencySwitcher.tsx

@@ -1,13 +1,13 @@
-import { useNavigate } from 'react-router-dom';
-
 import { StandaloneChevronDownBoldIcon } from '@deriv/quill-icons';
 import { useAuthData, useTopupVirtual } from '@deriv-com/api-hooks';
 import { Button } from '@deriv-com/ui';
 
 import { CurrencySwitcherLoader } from '@/components';
 import { IconToCurrencyMapper } from '@/constants';
-import { useActiveDerivTradingAccount, useQueryParams, useRegulationFlags } from '@/hooks';
+import { derivUrls } from '@/helpers';
+import { useActiveDerivTradingAccount, useCurrencyConfig, useQueryParams, useRegulationFlags } from '@/hooks';
 import { THooks } from '@/types';
+import { startPerformanceEventTimer } from '@/utils';
 
 import { DemoCurrencySwitcherAccountInfo, RealCurrencySwitcherAccountInfo } from './CurrencySwitcherAccountInfo';
 
@@ -19,7 +19,7 @@ type AccountActionButtonProps = {
 const AccountActionButton = ({ balance, isDemo }: AccountActionButtonProps) => {
     const { mutate: resetVirtualBalance } = useTopupVirtual();
     const { activeLoginid } = useAuthData();
-    const navigate = useNavigate();
+    const { data: currencyConfig } = useCurrencyConfig();
     let buttonText = 'Deposit';
     if (isDemo && balance !== 10000) {
         buttonText = 'Reset Balance';
@@ -36,7 +36,10 @@ const AccountActionButton = ({ balance, isDemo }: AccountActionButtonProps) => {
                         loginid: activeLoginid,
                     });
                 } else {
-                    navigate('/cashier/deposit');
+                    if (currencyConfig?.currency?.isCrypto)
+                        startPerformanceEventTimer('load_crypto_deposit_cashier_time');
+                    else startPerformanceEventTimer('load_fiat_deposit_cashier_time');
+                    window.location.href = `${derivUrls.DERIV_APP_PRODUCTION}/cashier/deposit#deposit`;
                 }
             }}
             variant='outlined'

src/components/TotalAssets/TotalAssets.tsx

@@ -1,12 +1,28 @@
 import { twMerge } from 'tailwind-merge';
 
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 
 import { useActiveDerivTradingAccount, useTotalAssets } from '@/hooks';
+import { setPerformanceValue } from '@/utils';
+
+import { TotalAssetsLoader } from '../Loaders';
 
 const TotalAssets = () => {
     const { data: activeDerivTradingAccount } = useActiveDerivTradingAccount();
     const { formattedTotalBalance } = useTotalAssets();
+    const { isMobile } = useDevice();
+
+    // TODO: need to add more conditions to show the loader and wait until all accounts are measured
+    // or wait when BE team completes the task to measure TotalAssets on BE
+    if (!formattedTotalBalance) {
+        return <TotalAssetsLoader />;
+    }
+
+    setPerformanceValue('login_time', isMobile);
+    setPerformanceValue('redirect_from_deriv_com_time', isMobile);
+    setPerformanceValue('switch_currency_accounts_time', isMobile);
+    setPerformanceValue('switch_from_demo_to_real_time', isMobile);
+    setPerformanceValue('switch_from_real_to_demo_time', isMobile);
 
     return (
         <div className='relative lg:inline-block text-center lg:text-right w-full lg:w-auto flex justify-center mt-24 lg:mt-0'>

src/components/TotalAssets/__tests__/TotalAssets.spec.tsx

@@ -13,6 +13,11 @@ jest.mock('@/hooks', () => ({
 
 jest.mock('@deriv-com/ui', () => ({
     Text: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    useDevice: jest.fn(() => ({
+        isDesktop: true,
+        isMobile: false,
+        isTablet: false,
+    })),
 }));
 
 describe('TotalAssets', () => {

src/components/TradingAccountsList/TradingAccountsList.tsx

@@ -6,6 +6,7 @@ import { Text } from '@deriv-com/ui';
 import { IconComponent } from '@/components';
 import { IconToCurrencyMapper } from '@/constants';
 import { useActiveDerivTradingAccount, useDerivTradingAccountsList, useQueryParams, useRegulationFlags } from '@/hooks';
+import { startPerformanceEventTimer } from '@/utils';
 
 export const TradingAccountsList = () => {
     const { data: tradingAccountsList } = useDerivTradingAccountsList();
@@ -16,6 +17,7 @@ export const TradingAccountsList = () => {
     const { closeModal } = useQueryParams();
 
     const handleSwitchAccount = (loginid: string) => {
+        startPerformanceEventTimer('switch_currency_accounts_time');
         switchAccount(loginid);
         closeModal();
     };

src/hooks/__tests__/useMT5AccountHandler.spec.ts

@@ -33,7 +33,7 @@ describe('useMT5AccountHandler', () => {
             isPending: false,
             isSuccess: false,
             status: 'idle',
-            mutate: jest.fn(),
+            mutateAsync: jest.fn(),
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({ isPending: false, mutateAsync: jest.fn() });
         (useActiveDerivTradingAccount as jest.Mock).mockReturnValue({ data: {} });
@@ -63,7 +63,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
             mutateAsync: mockTradingPasswordChange,
@@ -90,7 +90,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
             mutateAsync: mockTradingPasswordChange,
@@ -122,7 +122,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
             mutateAsync: mockTradingPasswordChange,
@@ -154,7 +154,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useAvailableMT5Accounts as jest.Mock).mockReturnValue({
             data: mockAccounts,
@@ -182,7 +182,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
             mutateAsync: mockTradingPasswordChange,
@@ -215,7 +215,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
             mutateAsync: mockTradingPasswordChange,
@@ -248,7 +248,7 @@ describe('useMT5AccountHandler', () => {
             },
         });
         (useMT5NewAccount as jest.Mock).mockReturnValue({
-            mutate: mockCreateMT5Account,
+            mutateAsync: mockCreateMT5Account,
         });
         (useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
             mutateAsync: mockTradingPasswordChange,

src/hooks/useAccountSwitcher.ts

@@ -4,6 +4,7 @@ import { useAuthData } from '@deriv-com/api-hooks';
 
 import { Regulation } from '@/constants';
 import { useUIContext } from '@/providers';
+import { startPerformanceEventTimer } from '@/utils';
 
 import {
     useActiveDerivTradingAccount,
@@ -67,6 +68,9 @@ export const useAccountSwitcher = () => {
 
             const loginId = account.value === accountTypes[0].value ? demoLoginId : firstRealLoginId;
             if (loginId) {
+                if (account.value === accountTypes[0].value)
+                    startPerformanceEventTimer('switch_from_real_to_demo_time');
+                else startPerformanceEventTimer('switch_from_demo_to_real_time');
                 switchAccount(loginId);
             }