[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/useCFDCompareAccounts.tsx

@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
-import useActiveWalletAccount from './useActiveWalletAccount';
-import useAvailableMT5Accounts from './useAvailableMT5Accounts';
+
 import useLandingCompany from './useLandingCompany';
-import useMT5AccountsList from './useMT5AccountsList';
-import useActiveTradingAccount from './useActiveTradingAccount';
+import useSortedMT5Accounts from './useSortedMT5Accounts';
 
 // Remove the hardcoded values and use the values from the API once it's ready
 export const MARKET_TYPE = {
@@ -77,88 +75,22 @@ const ctraderAccount = {
 
 /** A custom hook that gets compare accounts values. */
 const useCFDCompareAccounts = (isEU?: boolean) => {
-    const { data: activeWallet } = useActiveWalletAccount();
-    const { data: activeDerivTradingAccount } = useActiveTradingAccount();
-    const { is_virtual: isDemoWallet } = activeWallet ?? {};
-    const { is_virtual: isDemoTrading } = activeDerivTradingAccount ?? {};
-
-    const isDemo = isDemoWallet || isDemoTrading;
-
-    const { data: allAvailableMt5Accounts } = useAvailableMT5Accounts();
-    const { data: addedAccounts, ...rest } = useMT5AccountsList();
-
-    const modifiedMt5Data = useMemo(() => {
-        if (!allAvailableMt5Accounts || !addedAccounts) return;
-
-        return allAvailableMt5Accounts?.map(availableAccount => {
-            const createdAccount = addedAccounts?.find(account => {
-                return (
-                    availableAccount.market_type === account.market_type &&
-                    availableAccount.shortcode === account.landing_company_short
-                );
-            });
-            if (createdAccount)
-                return {
-                    ...availableAccount,
-
-                    /** Determine if the account is added or not */
-                    is_added: true,
-                } as const;
-
-            return {
-                ...availableAccount,
-
-                /** Determine if the account is added or not */
-                is_added: false,
-            } as const;
-        });
-    }, [addedAccounts, allAvailableMt5Accounts]);
-
-    // Sort the data by market_type to make sure the order is 'synthetic', 'financial', 'all'
-    const sortedMt5Accounts = useMemo(() => {
-        const marketTypeOrder = ['synthetic', 'financial', 'all'];
-
-        if (!modifiedMt5Data) return;
-
-        if (isEU) {
-            return modifiedMt5Data.filter(
-                account => account.shortcode === 'maltainvest' && account.market_type === 'financial'
-            );
-        }
-
-        const sortedData = marketTypeOrder.reduce((acc, marketType) => {
-            const accounts = modifiedMt5Data.filter(
-                account => account.market_type === marketType && account.shortcode !== 'maltainvest'
-            );
-            if (!accounts.length) return acc;
-            return [...acc, ...accounts];
-        }, [] as typeof modifiedMt5Data);
-        return sortedData;
-    }, [isEU, modifiedMt5Data]);
-
+    const { data: sortedMt5Accounts, ...rest } = useSortedMT5Accounts(isEU ? 'EU' : undefined);
     const { data: landingCompany } = useLandingCompany();
 
     const hasDxtradeAccountAvailable = landingCompany?.dxtrade_all_company;
     const hasCTraderAccountAvailable = landingCompany?.ctrader?.all?.standard === JURISDICTION.SVG;
 
-    const demoAvailableAccounts = useMemo(() => {
-        if (!sortedMt5Accounts) return;
-        if (isEU) return sortedMt5Accounts.filter(account => account.shortcode === JURISDICTION.MALTAINVEST);
-        return sortedMt5Accounts.filter(account => {
-            if (account.product === PRODUCT.ZEROSPREAD) {
-                return account.shortcode === JURISDICTION.BVI;
-            }
-            return account.shortcode === JURISDICTION.SVG;
-        });
-    }, [isEU, sortedMt5Accounts]);
-
     const modifiedData = useMemo(() => {
         return {
             ctraderAccount: hasCTraderAccountAvailable ? ctraderAccount : undefined,
             dxtradeAccount: hasDxtradeAccountAvailable ? dxtradeAccount : undefined,
-            mt5Accounts: isDemo ? demoAvailableAccounts : sortedMt5Accounts,
+            mt5Accounts: sortedMt5Accounts?.filter(
+                //@ts-expect-error need update api-types
+                account => account.is_default_jurisdiction === 'true'
+            ),
         };
-    }, [demoAvailableAccounts, hasCTraderAccountAvailable, hasDxtradeAccountAvailable, isDemo, sortedMt5Accounts]);
+    }, [hasCTraderAccountAvailable, hasDxtradeAccountAvailable, sortedMt5Accounts]);
 
     return {
         data: modifiedData,

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

@@ -89,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,7 +9,7 @@ type TGetAccountNameProps = {
     displayCurrencyCode?: THooks.CurrencyConfig['display_code'];
     landingCompanyName: TWalletLandingCompanyName;
     mt5MarketType?: TMarketTypes.SortedMT5Accounts;
-    product?: THooks.AvailableMT5Accounts['product'] | 'stp';
+    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
@@ -29,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':
@@ -57,7 +63,7 @@ export const getAccountName = ({
                                     'svg' | 'virtual'
                                 >
                             )
-                                ? MT5FinancialTitle
+                                ? getMT5FinancialTitle()
                                 : MT5MarketTypeDetails.financial.landingCompany?.malta.title;
                         case MT5MarketTypeDetails.synthetic.name:
                             return MT5MarketTypeDetails.synthetic.title;