diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx index 83b4361a0097..8c6ae89bcfd2 100644 --- a/packages/appstore/src/components/cfds-listing/index.tsx +++ b/packages/appstore/src/components/cfds-listing/index.tsx @@ -24,7 +24,7 @@ const CFDsListing = () => { has_any_real_account, startTrade, is_eu_user, - is_demo, + is_real, getExistingAccounts, getAccount, } = traders_hub; @@ -35,12 +35,24 @@ const CFDsListing = () => { const accounts_sub_text = is_eu ? localize('Account Information') : localize('Compare accounts'); - const getShortCode = (account: TDetailsOfEachMT5Loginid) => { - return account.landing_company_short && - account.landing_company_short !== 'svg' && - account.landing_company_short !== 'bvi' - ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1) - : account.landing_company_short?.toUpperCase(); + const getShortCodeAndRegion = (account: TDetailsOfEachMT5Loginid) => { + let short_code_and_region; + if (is_real && !is_eu_user) { + const short_code = + account.landing_company_short && + account.landing_company_short !== 'svg' && + account.landing_company_short !== 'bvi' + ? account.landing_company_short?.charAt(0).toUpperCase() + account.landing_company_short?.slice(1) + : account.landing_company_short?.toUpperCase(); + + const region = + account.market_type !== 'financial' && account.landing_company_short !== 'bvi' + ? ` - ${account?.server_info?.geolocation?.region}` + : ''; + + short_code_and_region = `${short_code}${region}`; + } + return short_code_and_region; }; return ( @@ -78,7 +90,7 @@ const CFDsListing = () => { )} - {!is_demo && has_no_real_account && ( + {is_real && has_no_real_account && (
@@ -103,9 +115,10 @@ const CFDsListing = () => { existing_account.display_balance, true )} ${existing_account.currency}`} + short_code_and_region={getShortCodeAndRegion(existing_account)} platform={account.platform} description={existing_account.display_login} - key={`trading_app_card_${account.name}`} + key={`trading_app_card_${existing_account.display_login}`} type='transfer_trade' availability={selected_region} onAction={() => { @@ -159,10 +172,9 @@ const CFDsListing = () => { )} ${existing_account.currency}`} description={existing_account.display_login} platform={account.platform} - key={`trading_app_card_${account.name}`} + key={`trading_app_card_${existing_account.display_login}`} type='transfer_trade' availability={selected_region} - is_disabled={!is_demo ? !has_no_real_account : account.is_disabled} onAction={() => { startTrade(account.platform, existing_account); }} @@ -174,7 +186,6 @@ const CFDsListing = () => { name={account.name} platform={account.platform} description={account.description} - is_disabled={account.is_disabled} onAction={() => { getAccount(account.market_type, account.platform); }} diff --git a/packages/appstore/src/components/containers/trading-app-card.scss b/packages/appstore/src/components/containers/trading-app-card.scss index 2ba5e36bb8a5..56d2f7b02bfb 100644 --- a/packages/appstore/src/components/containers/trading-app-card.scss +++ b/packages/appstore/src/components/containers/trading-app-card.scss @@ -11,6 +11,14 @@ margin-left: 1.6rem; padding: 0 2rem 0 0; width: 100%; + &__short-code { + padding: 0.4rem; + height: fit-content; + width: fit-content; + margin-left: 1rem; + background-color: var(--icon-grey-background); + border-radius: 4px; + } } &__actions { diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index d6f80d37859e..bf81601a5d79 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -5,7 +5,6 @@ import { platform_config, mf_platform_config, BrandConfig } from 'Constants/plat import './trading-app-card.scss'; import TradingAppCardActions, { Actions } from './trading-app-card-actions'; import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types'; -import { isMobile } from '@deriv/shared'; import { useStores } from 'Stores/index'; import { observer } from 'mobx-react-lite'; import classNames from 'classnames'; @@ -19,6 +18,7 @@ const TradingAppCard = ({ onAction, sub_title, has_divider, + short_code_and_region, }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => { const { client } = useStores(); @@ -34,9 +34,21 @@ const TradingAppCard = ({
- - {sub_title} - +
+ + {sub_title} + + {short_code_and_region && ( + + {short_code_and_region} + + )} +
{name} diff --git a/packages/appstore/src/types/common.types.ts b/packages/appstore/src/types/common.types.ts index 8d0ce130f1bb..8e7a3ed5d718 100644 --- a/packages/appstore/src/types/common.types.ts +++ b/packages/appstore/src/types/common.types.ts @@ -50,6 +50,7 @@ export type TCategotyTypes = Record; export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & { display_login?: string; landing_company_short?: string; + short_code_and_region?: string; }; export type TTradingPlatformAvailableAccount = { diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index fe50f75489ea..82e53347e194 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -47,6 +47,7 @@ export default class TradersHubStore extends BaseStore { toggleRegulatorsCompareModal: action.bound, has_any_real_account: computed, is_demo: computed, + is_real: computed, is_eu_selected: computed, getAvailableDxtradeAccounts: action.bound, getAvailableCFDAccounts: action.bound, @@ -63,11 +64,12 @@ export default class TradersHubStore extends BaseStore { this.selected_region, this.root_store.client.is_eu, this.root_store.client.is_switching, + this.root_store.client.mt5_login_list, + this.root_store.client.dxtrade_accounts_list, ], () => { this.getAvailablePlatforms(); this.getAvailableCFDAccounts(); - this.getAvailableDxtradeAccounts(); } ); @@ -223,15 +225,16 @@ export default class TradersHubStore extends BaseStore { getExistingAccounts(platform, market_type) { const { current_list } = this.root_store.modules.cfd; const current_list_keys = Object.keys(current_list); + const selected_account_type = this.selected_account_type; const existing_accounts = current_list_keys .filter(key => { if (platform === CFD_PLATFORMS.MT5) { - return key.startsWith(`${platform}.${this.selected_account_type}.${market_type}`); + return key.startsWith(`${platform}.${selected_account_type}.${market_type}`); } if (platform === CFD_PLATFORMS.DXTRADE && market_type === 'all') { - return key.startsWith(`${platform}.${this.selected_account_type}.${platform}@${market_type}`); + return key.startsWith(`${platform}.${selected_account_type}.${platform}@${market_type}`); } - return key.startsWith(`${platform}.${this.selected_account_type}.${market_type}@${market_type}`); + return key.startsWith(`${platform}.${selected_account_type}.${market_type}@${market_type}`); }) .reduce((_acc, cur) => { _acc.push(current_list[cur]); @@ -250,8 +253,12 @@ export default class TradersHubStore extends BaseStore { get is_demo() { return this.selected_account_type === 'demo'; } + get is_real() { + return this.selected_account_type === 'real'; + } get is_eu_user() { - return this.selected_region === 'EU'; + const { is_eu } = this.root_store.client; + return this.selected_region === 'EU' || is_eu; } setActiveIndex(active_index) { this.active_index = active_index;