From 479ce8042148e2a6aae54eaf94b9859676f0b825 Mon Sep 17 00:00:00 2001 From: hirad-deriv Date: Fri, 17 Nov 2023 14:32:32 +0800 Subject: [PATCH] [CFDs] Hirad/ Adding the current_list hook (#11358) * chore: adding the current_list hook * fix: making changes based on the comments * fix: changed back to the previous state because of the type conflicts * fix: used api types instead of constant types --- packages/cfd/src/Components/props.types.ts | 10 ++-- .../cfd-compare-accounts-button.tsx | 2 +- .../cfd-compare-accounts-description.tsx | 2 +- .../cfd-compare-accounts-title-icon.tsx | 2 +- packages/cfd/src/Containers/props.types.ts | 2 +- .../src/Helpers/compare-accounts-config.ts | 2 +- .../cfd/src/features/hooks/useCurrentList.ts | 51 +++++++++++++++++++ packages/stores/types.ts | 4 +- 8 files changed, 64 insertions(+), 11 deletions(-) create mode 100644 packages/cfd/src/features/hooks/useCurrentList.ts diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index dc809c4fa404..d000fed00179 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -7,6 +7,8 @@ export type TCFDPlatform = 'dxtrade' | 'mt5' | 'ctrader' | 'derivez'; export type TCFDsPlatformType = 'dxtrade' | 'derivez' | 'mt5' | 'ctrader' | ''; +export type TShortcode = DetailsOfEachMT5Loginid['landing_company_short']; + export type TCFDAccountCopy = { text: string | undefined; className: string; @@ -87,10 +89,10 @@ export type TTradingPlatformAvailableAccount = { }; signup: string[]; }; - shortcode: 'bvi' | 'labuan' | 'maltainvest' | 'svg' | 'vanuatu'; + shortcode?: TShortcode; sub_account_type: string; account_type?: 'real' | 'demo'; - landing_company_short?: 'bvi' | 'labuan' | 'svg' | 'vanuatu'; + landing_company_short?: TShortcode; }; export type TModifiedTradingPlatformAvailableAccount = Omit & { @@ -235,7 +237,7 @@ export type TTradingPlatformAccounts = { /** * Landing company shortcode of the DXTrade account. */ - landing_company_short?: 'bvi' | 'labuan' | 'malta' | 'maltainvest' | 'svg' | 'vanuatu'; + landing_company_short?: DetailsOfEachMT5Loginid['landing_company_short']; /** * Login of DXTrade account. */ @@ -279,7 +281,7 @@ export type TJurisdictionData = { export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & { display_login?: string; - landing_company_short?: string; + landing_company_short?: TShortcode; short_code_and_region?: string; mt5_acc_auth_status?: string | null; selected_mt5_jurisdiction?: TOpenAccountTransferMeta & diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx index ac5323a24fd1..7bc1c800b621 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx @@ -19,7 +19,7 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp const history = useHistory(); const market_type = getMarketType(trading_platforms); - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); const { modules: { cfd }, common, diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx index 550c4901dceb..cb667c141ad3 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx @@ -9,7 +9,7 @@ import { REGION } from '../../Helpers/cfd-config'; const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareAccountsCard) => { const market_type = getMarketType(trading_platforms); - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); const juridisction_data = getJuridisctionDescription(market_type_shortcode); const { traders_hub } = useStore(); const { selected_region } = traders_hub; diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx index babd29009e52..7d8c0066a694 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx @@ -8,7 +8,7 @@ import { CFD_PLATFORMS, MARKET_TYPE_SHORTCODE } from '../../Helpers/cfd-config'; const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => { const market_type = !is_eu_user ? getMarketType(trading_platforms) : 'CFDs'; - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); const jurisdiction_card_icon = trading_platforms.platform === CFD_PLATFORMS.DXTRADE || trading_platforms.platform === CFD_PLATFORMS.CTRADER ? getAccountIcon(trading_platforms.platform) diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 3825364e3c43..c92484520172 100644 --- a/packages/cfd/src/Containers/props.types.ts +++ b/packages/cfd/src/Containers/props.types.ts @@ -24,7 +24,7 @@ export type TCFDPersonalDetailsContainerProps = { onSubmit: (index: number, value: { [key: string]: string }) => void; }; -type CFD_Platform = 'dxtrade' | 'mt5' | 'derivez' | 'ctrader'; +export type CFD_Platform = 'dxtrade' | 'mt5' | 'derivez' | 'ctrader'; export type TCFDChangePasswordConfirmationProps = { confirm_label?: string; diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts index 37de7c5bb4c2..89268df19550 100644 --- a/packages/cfd/src/Helpers/compare-accounts-config.ts +++ b/packages/cfd/src/Helpers/compare-accounts-config.ts @@ -13,7 +13,7 @@ const getHighlightedIconLabel = ( is_demo?: boolean ): TInstrumentsIcon[] => { const market_type = getMarketType(trading_platforms); - const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode); + const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode ?? ''); // Forex for these: MT5 Financial Vanuatu, MT5 Financial Labuan const forex_label = market_type_shortcode === MARKET_TYPE_SHORTCODE.FINANCIAL_LABUAN || diff --git a/packages/cfd/src/features/hooks/useCurrentList.ts b/packages/cfd/src/features/hooks/useCurrentList.ts new file mode 100644 index 000000000000..4ff5076cb38a --- /dev/null +++ b/packages/cfd/src/features/hooks/useCurrentList.ts @@ -0,0 +1,51 @@ +import { useStore } from '@deriv/stores'; +import { useMT5AccountsList, useDxtradeAccountsList, useCtraderAccountsList } from '@deriv/api'; +import { getAccountListKey, CFD_PLATFORMS, Jurisdiction } from '@deriv/shared'; + +type MT5AccountsList = NonNullable['data']>[number]; +type DxtradeAccountsList = NonNullable['data']>[number]; +type CtraderAccountsList = NonNullable['data']>[number]; + +type TCurrentList = { + [key: string]: MT5AccountsList | DxtradeAccountsList | CtraderAccountsList; +}; + +/* + This hook is used to get the existing_accounts_data +*/ +const useCurrentList = () => { + const current_list: TCurrentList = {}; + const { traders_hub } = useStore(); + const { data: mt5_accounts } = useMT5AccountsList(); + const { data: dxtrade_accounts } = useDxtradeAccountsList(); + const { data: ctrader_accounts } = useCtraderAccountsList(); + const show_eu_related_content = traders_hub.show_eu_related_content; + + mt5_accounts + ?.filter(acc => + show_eu_related_content + ? acc.landing_company_short === Jurisdiction.MALTA_INVEST + : acc.landing_company_short !== Jurisdiction.MALTA_INVEST + ) + .forEach(account => { + current_list[getAccountListKey(account, CFD_PLATFORMS.MT5, account.landing_company_short)] = { + ...account, + }; + }); + + dxtrade_accounts?.forEach(account => { + current_list[getAccountListKey(account, CFD_PLATFORMS.DXTRADE, account.landing_company_short)] = { + ...account, + }; + }); + + ctrader_accounts?.forEach(account => { + current_list[getAccountListKey(account, CFD_PLATFORMS.CTRADER, account.landing_company_short)] = { + ...account, + }; + }); + + return { current_list }; +}; + +export default useCurrentList; diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 10b22f337660..d10b421ecc2e 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -229,7 +229,7 @@ type TTradingPlatformAvailableAccount = { }; signup: string[]; }; - shortcode: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest'; + shortcode?: DetailsOfEachMT5Loginid['landing_company_short']; sub_account_type: string; }; @@ -884,7 +884,7 @@ type TTradersHubStore = { action_type: 'get' | 'none' | 'trade' | 'dxtrade' | 'multi-action'; key: string; name: string; - landing_company_short?: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest'; + landing_company_short?: DetailsOfEachMT5Loginid['landing_company_short']; platform?: TPlatform; availability?: TRegionAvailability; description?: string;