feat(wallets): ✨ add mf mt5 gold support

packages/api-v2/src/hooks/useCFDCompareAccounts.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
+import useAvailableMT5Accounts from './useAvailableMT5Accounts';
 import useLandingCompany from './useLandingCompany';
-import useSortedMT5Accounts from './useSortedMT5Accounts';
 
 // Remove the hardcoded values and use the values from the API once it's ready
 export const MARKET_TYPE = {
@@ -74,13 +74,30 @@ const ctraderAccount = {
 };
 
 /** A custom hook that gets compare accounts values. */
-const useCFDCompareAccounts = (isEU?: boolean) => {
-    const { data: sortedMt5Accounts, ...rest } = useSortedMT5Accounts(isEU ? 'EU' : undefined);
+const useCFDCompareAccounts = () => {
+    const { data: all_available_mt5_accounts, ...rest } = useAvailableMT5Accounts();
     const { data: landingCompany } = useLandingCompany();
 
     const hasDxtradeAccountAvailable = landingCompany?.dxtrade_all_company;
     const hasCTraderAccountAvailable = landingCompany?.ctrader?.all?.standard === JURISDICTION.SVG;
 
+    const sortedMt5Accounts = useMemo(() => {
+        const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread', 'gold'];
+
+        if (!all_available_mt5_accounts) return;
+
+        const sorted_data = sorting_order.reduce(
+            (acc, sort_order) => {
+                const accounts = all_available_mt5_accounts.filter(account => account.product === sort_order);
+                if (!accounts.length) return acc;
+                return [...acc, ...accounts];
+            },
+            [] as typeof all_available_mt5_accounts
+        );
+
+        return sorted_data;
+    }, [all_available_mt5_accounts]);
+
     const modifiedData = useMemo(() => {
         return {
             ctraderAccount: hasCTraderAccountAvailable ? ctraderAccount : undefined,

packages/api-v2/src/hooks/useSortedMT5Accounts.ts

@@ -6,13 +6,13 @@ import useIsEuRegion from './useIsEuRegion';
 import useMT5AccountsList from './useMT5AccountsList';
 
 /** A custom hook to get the sorted added and non-added MT5 accounts. */
-const useSortedMT5Accounts = (regulation?: string) => {
+const useSortedMT5Accounts = (isEUClient: boolean = false) => {
     const { data: all_available_mt5_accounts } = useAvailableMT5Accounts();
     const { isEUCountry } = useIsEuRegion();
     const { data: mt5_accounts, ...rest } = useMT5AccountsList();
     const { data: activeAccount } = useActiveAccount();
 
-    const isEU = regulation === 'EU' || isEUCountry;
+    const isEU = isEUClient || isEUCountry;
 
     const modified_data = useMemo(() => {
         if (!all_available_mt5_accounts || !mt5_accounts) return;

packages/wallets/src/features/cfd/constants.tsx

@@ -38,10 +38,6 @@ const getMarketTypeDetailsDescription = (
     product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp',
     isEuRegion?: boolean
 ) => {
-    if (isEuRegion && product !== 'stp') {
-        return localize('Your all-in-one access to financial and derived instruments.');
-    }
-
     if (product === 'stp') {
         return localize('Direct access to market prices');
     }
@@ -50,17 +46,15 @@ const getMarketTypeDetailsDescription = (
         return localize('Trading opportunities on popular precious metals.');
     }
 
-    return localize('CFDs on financial instruments');
+    return isEuRegion
+        ? localize('Your all-in-one access to financial and derived instruments.')
+        : localize('CFDs on financial instruments');
 };
 
 const getMarketTypeDetailsTitle = (
     product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp',
     isEuRegion?: boolean
 ) => {
-    if (isEuRegion && product !== 'stp') {
-        return 'CFDs';
-    }
-
     if (product === 'stp') {
         return 'Financial STP';
     }
@@ -69,7 +63,7 @@ const getMarketTypeDetailsTitle = (
         return 'Gold';
     }
 
-    return 'Financial';
+    return isEuRegion ? 'CFDs' : 'Financial';
 };
 
 export const getMarketTypeDetails = (
@@ -78,12 +72,12 @@ export const getMarketTypeDetails = (
     isEuRegion?: boolean
 ) => {
     const getIcon = () => {
-        if (isEuRegion) {
-            return <AccountsDmt5CfdsIcon fill='#000000' iconSize='lg' />;
+        if (product === 'gold') {
+            return <AccountsDmt5GoldIcon height={48} width={48} />;
         }
-        return product === 'gold' ? (
-            // TODO: replace with icon from quill-icons
-            <AccountsDmt5GoldIcon height={48} width={48} />
+
+        return isEuRegion ? (
+            <AccountsDmt5CfdsIcon fill='#000000' iconSize='lg' />
         ) : (
             <AccountsDmt5FinancialIcon height={48} width={48} />
         );

packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsCard.tsx

@@ -28,6 +28,8 @@ const CompareAccountsCard = ({ account, isDemo, isEuRegion }: TCompareAccountsCa
     //@ts-expect-error need update api-types
     const isNewBadgeVisible = product === PRODUCT.ZEROSPREAD || product === PRODUCT.GOLD;
 
+    const shouldShowEuDisclaimer = isEuRegion && product === 'financial';
+
     return (
         <div>
             <div className='wallets-compare-accounts-card'>
@@ -51,7 +53,7 @@ const CompareAccountsCard = ({ account, isDemo, isEuRegion }: TCompareAccountsCa
                     isEuRegion={isEuRegion}
                     platform={account.platform}
                 />
-                {isEuRegion && (
+                {shouldShowEuDisclaimer && (
                     <div className='wallets-compare-accounts-card__eu-clients'>
                         <Text color='red' size='2xs' weight='bold'>
                             <Localize i18n_default_text='*Boom 300 and Crash 300 Index' />

packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx

@@ -12,11 +12,7 @@ const CompareAccountsScreen = () => {
     const { data: isEuRegion, isLoading: isEuRegionLoading } = useIsEuRegion();
     const { is_virtual: isDemo = false } = activeWallet || {};
 
-    const {
-        data: compareAccounts,
-        hasCTraderAccountAvailable,
-        hasDxtradeAccountAvailable,
-    } = useCFDCompareAccounts(isEuRegion);
+    const { data: compareAccounts, hasCTraderAccountAvailable, hasDxtradeAccountAvailable } = useCFDCompareAccounts();
 
     // Remove the hardcoded cTrader and Deriv X values and use the values from the API once it's ready
     const { ctraderAccount, dxtradeAccount, mt5Accounts } = compareAccounts;

packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsTitleIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LegacyInfo1pxIcon } from '@deriv/quill-icons';
 import { localize, useTranslations } from '@deriv-com/translations';
-import { Divider, Text, Tooltip } from '@deriv-com/ui';
+import { Divider, Text, Tooltip, useDevice } from '@deriv-com/ui';
 import { THooks, TPlatforms } from '../../../../types';
 import { CFD_PLATFORMS } from '../../constants';
 import { ACCOUNT_ICONS, MT5_PRODUCT } from './constants';
@@ -74,15 +74,15 @@ const getAccountCardTitle = (values: TGetAccountCardTitleValues) => {
     }
 
     if (platform === CFD_PLATFORMS.MT5) {
-        if (isEuRegion) {
-            return isDemo ? localize('CFDs Demo') : localize('CFDs');
-        }
-
         switch (product) {
             case MT5_PRODUCT.STANDARD:
                 return isDemo ? localize('Standard Demo') : localize('Standard');
-            case MT5_PRODUCT.FINANCIAL:
+            case MT5_PRODUCT.FINANCIAL: {
+                if (isEuRegion) {
+                    return isDemo ? localize('CFDs Demo') : localize('CFDs');
+                }
                 return isDemo ? localize('Financial Demo') : localize('Financial');
+            }
             case MT5_PRODUCT.STP:
                 return localize('Financial - STP');
             case MT5_PRODUCT.SWAP_FREE:
@@ -99,17 +99,19 @@ const getAccountCardTitle = (values: TGetAccountCardTitleValues) => {
 
 const CompareAccountsTitleIcon = ({ isDemo, isEuRegion, platform, product }: TCompareAccountsTitleIcon) => {
     const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
 
     const jurisdictionCardIcon = getAccountIcon({ isEuRegion, platform, product });
     const jurisdictionCardTitle = getAccountCardTitle({ isDemo, isEuRegion, platform, product });
     const labuanJurisdictionMessage = localize(
         'This account gives you direct market price access and tighter spreads.'
     );
+    const iconSize = { height: isDesktop ? 48 : 32, width: isDesktop ? 48 : 32 };
 
     return (
         <React.Fragment>
             <div className='wallets-compare-accounts-title'>
-                {jurisdictionCardIcon}
+                {jurisdictionCardIcon(iconSize)}
                 <div className='wallets-compare-accounts-title__separator'>
                     <Text align='center' as='h1' size='sm' weight='bold'>
                         {jurisdictionCardTitle}

packages/wallets/src/features/cfd/screens/CompareAccounts/__tests__/CompareAccountsCard.spec.tsx

@@ -67,13 +67,22 @@ describe('CompareAccountsCard', () => {
         expect(screen.queryByText('NEW')).not.toBeInTheDocument();
     });
 
-    it('renders the EU clients disclaimer for EU users', () => {
+    it('renders the EU clients disclaimer for EU users with financial product', () => {
+        const modifiedDefaultProps = { ...defaultProps, account: { ...defaultProps.account, product: 'financial' } };
         //@ts-expect-error we only need partial types
-        render(<CompareAccountsCard {...defaultProps} isEuRegion />, { wrapper });
+        render(<CompareAccountsCard {...modifiedDefaultProps} isEuRegion />, { wrapper });
 
         expect(screen.getByText('*Boom 300 and Crash 300 Index')).toBeInTheDocument();
     });
 
+    it('does not render the EU clients disclaimer for EU users with gold     product', () => {
+        const modifiedDefaultProps = { ...defaultProps, account: { ...defaultProps.account, product: 'gold' } };
+        //@ts-expect-error we only need partial types
+        render(<CompareAccountsCard {...modifiedDefaultProps} isEuRegion />, { wrapper });
+
+        expect(screen.queryByText('*Boom 300 and Crash 300 Index')).not.toBeInTheDocument();
+    });
+
     it('does not render the EU clients disclaimer for non-EU users', () => {
         //@ts-expect-error we only need partial types
         render(<CompareAccountsCard {...defaultProps} />, { wrapper });

packages/wallets/src/features/cfd/screens/CompareAccounts/constants.tsx

@@ -21,15 +21,20 @@ export const MT5_PRODUCT = {
     ZERO_SPREAD: 'zero_spread',
 } as const;
 
+type TProps = React.ComponentProps<typeof AccountsDmt5GoldIcon> | React.ComponentProps<typeof AccountsDmt5StandardIcon>;
+
 export const ACCOUNT_ICONS = {
-    [MT5_PRODUCT.STANDARD]: <AccountsDmt5StandardIcon iconSize='lg' />,
-    [MT5_PRODUCT.FINANCIAL]: { Eu: <AccountsDmt5CfdsIcon />, NonEU: <AccountsDmt5FinancialIcon iconSize='lg' /> },
-    [MT5_PRODUCT.SWAP_FREE]: <AccountsDmt5SwfIcon iconSize='lg' />,
-    [CFD_PLATFORMS.DXTRADE]: <AccountsDerivXIcon iconSize='lg' />,
-    [CFD_PLATFORMS.CTRADER]: <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon height={48} width={48} />,
-    [MT5_PRODUCT.ZERO_SPREAD]: <AccountsDmt5ZrsIcon iconSize='lg' />,
-    [MT5_PRODUCT.GOLD]: <AccountsDmt5GoldIcon height={48} width={48} />,
-    default: <AccountsDmt5CfdsIcon iconSize='lg' />,
+    [MT5_PRODUCT.STANDARD]: (props: TProps) => <AccountsDmt5StandardIcon {...props} />,
+    [MT5_PRODUCT.FINANCIAL]: {
+        Eu: (props: TProps) => <AccountsDmt5CfdsIcon {...props} />,
+        NonEU: (props: TProps) => <AccountsDmt5FinancialIcon {...props} />,
+    },
+    [MT5_PRODUCT.SWAP_FREE]: (props: TProps) => <AccountsDmt5SwfIcon {...props} />,
+    [CFD_PLATFORMS.DXTRADE]: (props: TProps) => <AccountsDerivXIcon {...props} />,
+    [CFD_PLATFORMS.CTRADER]: (props: TProps) => <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon {...props} />,
+    [MT5_PRODUCT.ZERO_SPREAD]: (props: TProps) => <AccountsDmt5ZrsIcon {...props} />,
+    [MT5_PRODUCT.GOLD]: (props: TProps) => <AccountsDmt5GoldIcon {...props} />,
+    default: (props: TProps) => <AccountsDmt5CfdsIcon {...props} />,
 } as const;
 
 export const JURISDICTION = {