chore: Mt5 account title updated and icons added (#10379)

packages/account/src/Sections/Security/ClosingAccount/account-has-balance.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Icon, Money, ThemedScrollbars, Text } from '@deriv/components';
-import { formatMoney, getCFDAccount, getCFDAccountDisplay, CFD_PLATFORMS } from '@deriv/shared';
+import { formatMoney, getCFDAccount, getCFDAccountDisplay, CFD_PLATFORMS, getMT5Icon } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 
 const getDerivAccount = (client_accounts, login_id) =>
@@ -161,17 +161,16 @@ const AccountHasPendingConditions = ({
                         {mt5_open_positions.map(account => (
                             <Content
                                 key={account.login}
-                                currency_icon={`IcMt5-${getCFDAccount({
+                                currency_icon={`IcMt5-${getMT5Icon({
                                     market_type: account.market_type,
-                                    sub_account_type: account.sub_account_type,
-                                    platform: CFD_PLATFORMS.MT5,
                                     is_eu,
                                 })}`}
                                 loginid={account.display_login}
                                 title={getCFDAccountDisplay({
                                     market_type: account.market_type,
                                     sub_account_type: account.sub_account_type,
                                     platform: CFD_PLATFORMS.MT5,
+                                    shortcode: account.landing_company_short,
                                     is_eu,
                                 })}
                                 value={
@@ -189,17 +188,16 @@ const AccountHasPendingConditions = ({
                         {mt5_balance.map(account => (
                             <Content
                                 key={account.login}
-                                currency_icon={`IcMt5-${getCFDAccount({
+                                currency_icon={`IcMt5-${getMT5Icon({
                                     market_type: account.market_type,
-                                    sub_account_type: account.sub_account_type,
-                                    platform: CFD_PLATFORMS.MT5,
                                     is_eu,
                                 })}`}
                                 loginid={account.display_login}
                                 title={getCFDAccountDisplay({
                                     market_type: account.market_type,
                                     sub_account_type: account.sub_account_type,
                                     platform: CFD_PLATFORMS.MT5,
+                                    shortcode: account.landing_company_short,
                                     is_eu,
                                 })}
                                 value={

packages/account/src/Sections/Security/ClosingAccount/closing-account-reason.jsx

@@ -74,8 +74,9 @@ const character_limit_no = 110;
 const max_allowed_reasons = 3;
 
 const ClosingAccountReason = observer(({ onBackClick }) => {
-    const { client } = useStore();
+    const { client, traders_hub } = useStore();
     const { dxtrade_accounts_list, mt5_login_list, account_list } = client;
+    const { is_eu_user } = traders_hub;
     const { is_appstore } = React.useContext(PlatformContext);
     const [is_account_closed, setIsAccountClosed] = React.useState(false);
     const [is_loading, setIsLoading] = React.useState(false);
@@ -233,6 +234,7 @@ const ClosingAccountReason = observer(({ onBackClick }) => {
                         client_accounts={account_list}
                         dxtrade_accounts_list={dxtrade_accounts_list}
                         onBackClick={onBackClick}
+                        is_eu={is_eu_user}
                     />
                 )}
                 {which_modal_should_render === 'inaccessible_modal' && (

packages/components/src/components/icon/icons.js

@@ -700,9 +700,11 @@ import './mt5/ic-mt5-password-updated.svg';
 import './mt5/ic-mt5-responsive.svg';
 import './mt5/ic-mt5-support.svg';
 import './mt5/ic-mt5-swap-free-platform.svg';
+import './mt5/ic-mt5-swap-free.svg';
 import './mt5/ic-mt5-synthetic-dashboard.svg';
 import './mt5/ic-mt5-synthetic-indices.svg';
 import './mt5/ic-mt5-synthetic-platform.svg';
+import './mt5/ic-mt5-synthetic.svg';
 import './mt5/ic-mt5-trade-types.svg';
 import './option/ic-option-accumulators.svg';
 import './option/ic-option-call-put-reset.svg';

packages/shared/src/utils/cfd/cfd.ts

@@ -184,7 +184,7 @@ export const getCFDAccountDisplay = ({
     let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform, shortcode });
     if (!cfd_account_key) return undefined;
 
-    if (cfd_account_key === 'financial' && is_eu) {
+    if (cfd_account_key === 'financial_demo' && is_eu) {
         if (is_mt5_trade_modal) cfd_account_key = 'mt5_cfds';
         else cfd_account_key = 'cfd';
     }
@@ -206,6 +206,11 @@ type TGetCFDAccount = TGetAccount & {
     is_transfer_form?: boolean;
 };
 
+type TGetMT5Icon = {
+    market_type: TMarketType;
+    is_eu?: boolean;
+};
+
 export const getCFDAccount = ({
     market_type,
     sub_account_type,
@@ -216,7 +221,7 @@ export const getCFDAccount = ({
     let cfd_account_key = getCFDAccountKey({ market_type, sub_account_type, platform });
     if (!cfd_account_key) return undefined;
 
-    if (cfd_account_key === 'financial' && is_eu) {
+    if (cfd_account_key === 'financial_demo' && is_eu) {
         cfd_account_key = 'cfd';
     }
 
@@ -225,6 +230,12 @@ export const getCFDAccount = ({
     return CFD_text[cfd_account_key as keyof typeof CFD_text];
 };
 
+export const getMT5Icon = ({ market_type, is_eu }: TGetMT5Icon) => {
+    if (market_type === 'all' && !is_eu) return 'SwapFree';
+    if (market_type === 'financial' && is_eu) return 'CFDs';
+    return market_type;
+};
+
 export const setSharedCFDText = (all_shared_CFD_text: { [key: string]: () => void }) => {
     CFD_text_translated = all_shared_CFD_text;
 };