Merge pull request #81 from sergei-deriv/sergei/trah-3146/add-perform…

…ance-metrics

[TRAH] Sergei / TRAH 3146 / Add performance metrics for trader's hub new repo

package.json

@@ -14,6 +14,7 @@
         "prepare": "husky install"
     },
     "dependencies": {
+        "@deriv-com/analytics": "~1.4.13",
         "@deriv-com/api-hooks": "^0.0.22",
         "@deriv-com/ui": "1.12.19",
         "@deriv-com/utils": "^0.0.11",

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);
             }
 

src/hooks/useMT5AccountHandler.ts

@@ -2,6 +2,7 @@ import { Category, CFDPlatforms, Jurisdiction, MarketType } from '@cfd/constants
 import { useMT5NewAccount, useTradingPlatformPasswordChange } from '@deriv-com/api-hooks';
 
 import { useCFDContext } from '@/providers';
+import { setPerformanceValue, startPerformanceEventTimer } from '@/utils';
 
 import { useAccountStatus, useActiveDerivTradingAccount, useAvailableMT5Accounts, useSettings } from '.';
 
@@ -12,7 +13,7 @@ export const useMT5AccountHandler = () => {
         isPending: createMT5AccountLoading,
         isSuccess: isCreateMT5AccountSuccess,
         status: createMT5AccountStatus,
-        mutate: createMT5Account,
+        mutateAsync: createMT5Account,
     } = useMT5NewAccount();
     const { isPending: tradingPlatformPasswordChangeLoading, mutateAsync: tradingPasswordChange } =
         useTradingPlatformPasswordChange();
@@ -35,6 +36,7 @@ export const useMT5AccountHandler = () => {
     // in order to create account, we need to set a password through trading_platform_password_change endpoint first
     // then only mt5_create_account can be called, otherwise it will response an error for password required
     const handleSubmit = async (password: string) => {
+        startPerformanceEventTimer('create_mt5_account_time');
         if (isMT5PasswordNotSet) {
             await tradingPasswordChange({
                 new_password: password,
@@ -43,6 +45,7 @@ export const useMT5AccountHandler = () => {
         }
 
         await createPassword(password);
+        setPerformanceValue('create_mt5_account_time');
     };
 
     const createPassword = (password: string) =>