[WALL] george / WALL-5147 / Gold MT5 account creation flow on Wallets

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

@@ -1,10 +1,11 @@
+import { cleanup } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
+
 import useActiveAccount from '../useActiveAccount';
 import useAvailableMT5Accounts from '../useAvailableMT5Accounts';
 import useIsEuRegion from '../useIsEuRegion';
 import useMT5AccountsList from '../useMT5AccountsList';
 import useSortedMT5Accounts from '../useSortedMT5Accounts';
-import { cleanup } from '@testing-library/react';
 
 jest.mock('../useActiveAccount', () => jest.fn());
 jest.mock('../useAvailableMT5Accounts', () => jest.fn());
@@ -42,6 +43,11 @@ const mockMT5NonEUAvailableAccounts = [
         product: 'zero_spread',
         shortcode: 'bvi',
     },
+    {
+        is_default_jurisdiction: 'true',
+        product: 'gold',
+        shortcode: 'bvi',
+    },
     {
         is_default_jurisdiction: 'true',
         product: 'swap_free',
@@ -65,6 +71,11 @@ const mockMT5NonEUAddedAccounts = [
         landing_company_short: 'bvi',
         product: 'zero_spread',
     },
+    {
+        is_virtual: false,
+        landing_company_short: 'bvi',
+        product: 'gold',
+    },
 ];
 
 const mockMT5EUAvailableAccounts = [
@@ -135,6 +146,12 @@ describe('useSortedMT5Accounts', () => {
                 product: 'zero_spread',
                 shortcode: 'bvi',
             },
+            {
+                is_added: false,
+                is_default_jurisdiction: 'true',
+                product: 'gold',
+                shortcode: 'bvi',
+            },
         ]);
     });
 
@@ -199,6 +216,12 @@ describe('useSortedMT5Accounts', () => {
                 landing_company_short: 'bvi',
                 product: 'zero_spread',
             },
+            {
+                is_added: true,
+                is_virtual: false,
+                landing_company_short: 'bvi',
+                product: 'gold',
+            },
         ]);
     });
 
@@ -241,6 +264,7 @@ describe('useSortedMT5Accounts', () => {
             'stp',
             'swap_free',
             'zero_spread',
+            'gold',
         ]);
     });
 
@@ -297,6 +321,12 @@ describe('useSortedMT5Accounts', () => {
                 landing_company_short: 'bvi',
                 product: 'zero_spread',
             },
+            {
+                is_added: true,
+                is_virtual: false,
+                landing_company_short: 'bvi',
+                product: 'gold',
+            },
         ]);
     });
 });

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

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
-import useMT5AccountsList from './useMT5AccountsList';
+
+import useActiveAccount from './useActiveAccount';
 import useAvailableMT5Accounts from './useAvailableMT5Accounts';
 import useIsEuRegion from './useIsEuRegion';
-import useActiveAccount from './useActiveAccount';
+import useMT5AccountsList from './useMT5AccountsList';
 
 /** A custom hook to get the sorted added and non-added MT5 accounts. */
 const useSortedMT5Accounts = (regulation?: string) => {
@@ -47,15 +48,18 @@ const useSortedMT5Accounts = (regulation?: string) => {
     }, [activeAccount?.is_virtual, all_available_mt5_accounts, isEU, mt5_accounts]);
 
     const sorted_data = useMemo(() => {
-        const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread'];
+        const sorting_order = ['standard', 'financial', 'stp', 'swap_free', 'zero_spread', 'gold'];
 
         if (!modified_data) return;
 
-        const sorted_data = sorting_order.reduce((acc, sort_order) => {
-            const accounts = modified_data.filter(account => account.product === sort_order);
-            if (!accounts.length) return acc;
-            return [...acc, ...accounts];
-        }, [] as typeof modified_data);
+        const sorted_data = sorting_order.reduce(
+            (acc, sort_order) => {
+                const accounts = modified_data.filter(account => account.product === sort_order);
+                if (!accounts.length) return acc;
+                return [...acc, ...accounts];
+            },
+            [] as typeof modified_data
+        );
 
         return sorted_data;
     }, [modified_data]);

packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, FC } from 'react';
-import { CFDPlatformIcons, MT5MarketIcons } from '../../constants/icons';
+import { CFDPlatformIcons, MT5GoldIcon, MT5MarketIcons } from '../../constants/icons';
 import { CFD_PLATFORMS, MARKET_TYPE } from '../../features/cfd/constants';
 import { THooks, TPlatforms } from '../../types';
 import { WalletCurrencyCard } from '../WalletCurrencyCard';
@@ -11,7 +11,7 @@ type TWalletMarketCurrencyIconProps = {
     isDemo: THooks.ActiveWalletAccount['is_virtual'];
     marketType?: keyof typeof MT5MarketIcons;
     platform?: TPlatforms.All;
-    product?: THooks.AvailableMT5Accounts['product'];
+    product?: THooks.AvailableMT5Accounts['product'] | 'gold';
     size?: ComponentProps<typeof WalletCurrencyCard>['size'];
 };
 
@@ -27,6 +27,8 @@ const WalletMarketCurrencyIcon: FC<TWalletMarketCurrencyIconProps> = ({
     let MarketTypeIcon;
     if (marketType === MARKET_TYPE.ALL && platform && marketTypeAllkey in CFDPlatformIcons) {
         MarketTypeIcon = marketTypeAllkey;
+    } else if (platform === CFD_PLATFORMS.MT5 && product && product in MT5GoldIcon) {
+        MarketTypeIcon = product;
     } else if (platform === CFD_PLATFORMS.MT5 && marketType && marketType in MT5MarketIcons) {
         MarketTypeIcon = marketType;
     } else MarketTypeIcon = 'standard';

packages/wallets/src/components/WalletMarketIcon/WalletMarketIcon.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable sort-keys */
 import React, { CSSProperties } from 'react';
-import { AppIcons, CFDPlatformIcons, MT5MarketIcons, PlatformIcons } from '../../constants/icons';
+import { AppIcons, CFDPlatformIcons, MT5GoldIcon, MT5MarketIcons, PlatformIcons } from '../../constants/icons';
 import { TIconTypes } from '../../types';
 
-const Icons: TIconTypes = {
+const Icons: Record<string, React.ComponentType<React.SVGAttributes<SVGElement>>> | TIconTypes = {
     ...AppIcons,
     ...MT5MarketIcons,
     ...CFDPlatformIcons,
     ...PlatformIcons,
+    ...MT5GoldIcon,
 };
 
 const IconSizes = {

packages/wallets/src/constants/icons.ts → packages/wallets/src/constants/icons.tsx

@@ -29,6 +29,7 @@ import {
     PaymentMethodUsdCoinBrandIcon,
     PaymentMethodXrpBrandIcon,
 } from '@deriv/quill-icons';
+import AccountsDmt5GoldIcon from '../public/images/account-dmt5-gold-icon.svg';
 import { TCurrencyIconTypes, TIconTypes } from '../types';
 
 export const AppIcons: TIconTypes = {
@@ -56,6 +57,11 @@ export const PlatformIcons: TIconTypes = {
     standard: AccountsDerivAccountLightIcon,
 };
 
+export const MT5GoldIcon = {
+    //TODO: replace with icon from quill-icons and change the extension of the file from tsx to ts
+    gold: AccountsDmt5GoldIcon,
+};
+
 // Currencies icons
 export const fiatIcons = ['AUD', 'EUR', 'GBP', 'USD'] as const;
 

packages/wallets/src/features/cashier/constants/constants.ts

@@ -83,6 +83,10 @@ export const MT5MarketTypeDetails: Record<TMarketTypes.All, TMT5MarketTypeDetail
         },
         name: 'financial',
         product: {
+            gold: {
+                name: 'financial',
+                title: 'MT5 Gold',
+            },
             stp: {
                 name: 'financial',
                 title: 'MT5 Financial STP',

packages/wallets/src/features/cashier/helpers/__tests__/helpers.spec.ts

@@ -1,25 +1,7 @@
 import { LandingCompanyDetails, MT5MarketTypeDetails, PlatformDetails } from '../../constants';
-import { getAccountName, getLandingCompanyNameOfMT5Account, getMarketType } from '../helpers';
+import { getAccountName, getLandingCompanyNameOfMT5Account } from '../helpers';
 
 describe('Cashier Helpers', () => {
-    describe('getMarketType', () => {
-        it('returns correct market type for financial', () => {
-            expect(getMarketType('financial_svg')).toBe(MT5MarketTypeDetails.financial.name);
-        });
-
-        it('returns correct market type for synthetic', () => {
-            expect(getMarketType('synthetic_svg')).toBe(MT5MarketTypeDetails.synthetic.name);
-        });
-
-        it('returns correct market type for all', () => {
-            expect(getMarketType('all_svg')).toBe(MT5MarketTypeDetails.all.name);
-        });
-
-        it('returns undefined for unknown market type', () => {
-            expect(getMarketType('unknown_svg')).toBeUndefined();
-        });
-    });
-
     describe('getLandingCompanyNameOfMT5Account', () => {
         it('returns correct landing company name for BVI', () => {
             expect(getLandingCompanyNameOfMT5Account('financial_bvi')).toBe(LandingCompanyDetails.bvi.name);
@@ -107,6 +89,18 @@ describe('Cashier Helpers', () => {
             ).toBe(MT5MarketTypeDetails.financial.product?.stp?.title);
         });
 
+        it('returns correct name for MT5 financial GOLD account', () => {
+            expect(
+                getAccountName({
+                    accountCategory: 'trading',
+                    accountType: PlatformDetails.mt5.name,
+                    landingCompanyName: 'svg',
+                    mt5MarketType: MT5MarketTypeDetails.financial.name,
+                    product: 'gold',
+                })
+            ).toBe(MT5MarketTypeDetails.financial.product?.gold?.title);
+        });
+
         it('returns correct name for MT5 synthetic account', () => {
             expect(
                 getAccountName({

packages/wallets/src/features/cashier/helpers/helpers.ts

@@ -9,15 +9,7 @@ type TGetAccountNameProps = {
     displayCurrencyCode?: THooks.CurrencyConfig['display_code'];
     landingCompanyName: TWalletLandingCompanyName;
     mt5MarketType?: TMarketTypes.SortedMT5Accounts;
-    product?: THooks.AvailableMT5Accounts['product'] | 'stp';
-};
-
-//TODO: remove this function when market_type will be added to transfer_between_accounts response in API
-export const getMarketType = (mt5Group?: string) => {
-    if (mt5Group?.includes(MT5MarketTypeDetails.financial.name)) return MT5MarketTypeDetails.financial.name;
-    if (mt5Group?.includes(MT5MarketTypeDetails.synthetic.name)) return MT5MarketTypeDetails.synthetic.name;
-    if (mt5Group?.includes(MT5MarketTypeDetails.all.name)) return MT5MarketTypeDetails.all.name;
-    return undefined;
+    product?: THooks.AvailableMT5Accounts['product'] | 'gold' | 'stp';
 };
 
 //TODO: remove this function when landing_company_name will be added to transfer_between_accounts response in API for mt5 accounts
@@ -37,10 +29,16 @@ export const getAccountName = ({
     mt5MarketType,
     product,
 }: TGetAccountNameProps) => {
-    const MT5FinancialTitle =
-        product === 'stp'
-            ? MT5MarketTypeDetails.financial.product?.stp?.title
-            : MT5MarketTypeDetails.financial.landingCompany?.svg.title;
+    const getMT5FinancialTitle = () => {
+        switch (product) {
+            case 'stp':
+                return MT5MarketTypeDetails.financial.product?.stp?.title;
+            case 'gold':
+                return MT5MarketTypeDetails.financial.product?.gold?.title;
+            default:
+                return MT5MarketTypeDetails.financial.landingCompany?.svg.title;
+        }
+    };
 
     switch (accountCategory) {
         case 'wallet':
@@ -65,7 +63,7 @@ export const getAccountName = ({
                                     'svg' | 'virtual'
                                 >
                             )
-                                ? MT5FinancialTitle
+                                ? getMT5FinancialTitle()
                                 : MT5MarketTypeDetails.financial.landingCompany?.malta.title;
                         case MT5MarketTypeDetails.synthetic.name:
                             return MT5MarketTypeDetails.synthetic.title;

packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx

@@ -3,8 +3,6 @@ import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { WalletCurrencyCard, WalletMarketCurrencyIcon } from '../../../../../../../../components';
 import { THooks, TPlatforms } from '../../../../../../../../types';
-import { MARKET_TYPE } from '../../../../../../../cfd/constants';
-import { getMarketType } from '../../../../../../helpers';
 import './TransactionsCompletedRowAccountDetails.scss';
 
 type TProps = {
@@ -15,7 +13,7 @@ type TProps = {
     displayActionType: string;
     isDemo: boolean;
     isInterWallet?: boolean;
-    mt5Group?: string;
+    marketType?: string;
     product?: THooks.AvailableMT5Accounts['product'];
     transactionID?: number;
 };
@@ -28,12 +26,11 @@ const TransactionsCompletedRowAccountDetails: React.FC<TProps> = ({
     displayActionType,
     isDemo,
     isInterWallet = false,
-    mt5Group,
+    marketType,
     product,
     transactionID,
 }) => {
     const { isDesktop } = useDevice();
-    const marketType = getMarketType(mt5Group);
 
     return (
         <div className='wallets-transactions-completed-row-account-details'>
@@ -48,7 +45,7 @@ const TransactionsCompletedRowAccountDetails: React.FC<TProps> = ({
                 <WalletMarketCurrencyIcon
                     currency={currency}
                     isDemo={isDemo}
-                    marketType={marketType ?? MARKET_TYPE.ALL}
+                    marketType={marketType}
                     platform={accountType as TPlatforms.All}
                     product={product}
                 />

packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowAccountDetails/__tests__/TransactionsCompletedRowAccountDetails.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { getMarketType } from '../../../../../../../helpers';
 import TransactionsCompletedRowAccountDetails from '../TransactionsCompletedRowAccountDetails';
 
 jest.mock('../../../../../../../helpers', () => ({
@@ -47,13 +46,4 @@ describe('TransactionsCompletedRowAccountDetails', () => {
 
         expect(screen.queryByTestId('dt_wallet_list_card_badge')).not.toBeInTheDocument();
     });
-
-    it('calls getMarketType with correct mt5 group', () => {
-        const mt5Props = {
-            ...defaultProps,
-        };
-        render(<TransactionsCompletedRowAccountDetails {...mt5Props} />);
-
-        expect(getMarketType).toHaveBeenCalledWith('mocked mt5 group');
-    });
 });

packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowTransferAccountDetails/TransactionsCompletedRowTransferAccountDetails.tsx

@@ -49,7 +49,7 @@ const TransactionsCompletedRowTransferAccountDetails: React.FC<TProps> = ({
                 displayActionType={displayActionType}
                 isDemo={Boolean(transferAccount.is_virtual)}
                 isInterWallet={transferAccount === wallet}
-                mt5Group={transferAccount === mt5Account ? mt5Account.group : undefined}
+                marketType={transferAccount === mt5Account ? mt5Account.market_type : undefined}
                 product={mt5Account?.product}
                 transactionID={transactionID}
             />

packages/wallets/src/features/cashier/modules/Transfer/hooks/useExtendedTransferAccountProperties.ts

@@ -3,7 +3,7 @@ import { useActiveWalletAccount, useCurrencyConfig } from '@deriv/api-v2';
 import { displayMoney } from '@deriv/api-v2/src/utils';
 import { THooks, TWalletLandingCompanyName } from '../../../../../types';
 import { PlatformDetails } from '../../../constants';
-import { getAccountName, getLandingCompanyNameOfMT5Account, getMarketType } from '../../../helpers';
+import { getAccountName, getLandingCompanyNameOfMT5Account } from '../../../helpers';
 
 /** A custom hook that enhances the transfer accounts response by adding additional properties for convenient UI rendering. */
 const useExtendedTransferAccountProperties = (accounts?: THooks.TransferAccount[]) => {
@@ -21,7 +21,7 @@ const useExtendedTransferAccountProperties = (accounts?: THooks.TransferAccount[
                 accountType: account.account_type,
                 displayCurrencyCode: currencyConfig?.display_code,
                 landingCompanyName: activeWallet?.landing_company_name as TWalletLandingCompanyName,
-                mt5MarketType: getMarketType(account.mt5_group),
+                mt5MarketType: account.market_type,
                 product: account.product,
             });
             const displayBalance = displayMoney(Number(account.balance), currencyConfig?.display_code, {

packages/wallets/src/features/cashier/modules/Transfer/hooks/useSortedTransferAccounts.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { MT5MarketTypeDetails, PlatformDetails } from '../../../constants';
-import { getMarketType } from '../../../helpers';
 import { TAccount, TAccountsList } from '../types';
 
 const useSortedTransferAccounts = (accounts: TAccountsList) => {
@@ -69,8 +68,8 @@ const sortTradingAccounts = (a: TAccount, b: TAccount) => {
 
     // For mt5 accounts, compare market types
     if (typeA === PlatformDetails.mt5.name) {
-        const marketTypeA = getMarketType(a.mt5_group);
-        const marketTypeB = getMarketType(b.mt5_group);
+        const marketTypeA = a.market_type;
+        const marketTypeB = b.market_type;
 
         if (
             marketTypeOrder[marketTypeA ?? MT5MarketTypeDetails.all.name] !==