From 844e5b3d74305924f728360f111af74478e13822 Mon Sep 17 00:00:00 2001 From: Hirad Date: Mon, 13 Nov 2023 14:18:34 +0800 Subject: [PATCH 1/4] chore: adding the current_list hook --- packages/cfd/src/Components/props.types.ts | 8 +-- packages/cfd/src/Containers/props.types.ts | 2 +- .../cfd/src/features/hooks/useCurrentList.ts | 51 +++++++++++++++++++ 3 files changed, 57 insertions(+), 4 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..1dae6fd567a4 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 = 'svg' | 'bvi' | 'labuan' | 'vanuatu' | 'maltainvest'; + 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 & { @@ -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/props.types.ts b/packages/cfd/src/Containers/props.types.ts index 7361e2f95061..bd31b8d9b972 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/features/hooks/useCurrentList.ts b/packages/cfd/src/features/hooks/useCurrentList.ts new file mode 100644 index 000000000000..15789f18e7fc --- /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 } 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 === 'maltainvest' + : acc.landing_company_short !== 'maltainvest' + ) + .forEach(account => { + current_list[getAccountListKey(account, 'mt5', account.landing_company_short)] = { + ...account, + }; + }); + + dxtrade_accounts?.forEach(account => { + current_list[getAccountListKey(account, 'dxtrade', account.landing_company_short)] = { + ...account, + }; + }); + + ctrader_accounts?.forEach(account => { + current_list[getAccountListKey(account, 'ctrader', account.landing_company_short)] = { + ...account, + }; + }); + + return { current_list }; +}; + +export default useCurrentList; From 4b489b006ed58fcdb9593c4c464f0c79cdb158f1 Mon Sep 17 00:00:00 2001 From: Hirad Date: Tue, 14 Nov 2023 14:27:26 +0800 Subject: [PATCH 2/4] fix: making changes based on the comments --- packages/cfd/src/Components/props.types.ts | 2 +- packages/cfd/src/features/hooks/useCurrentList.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 1dae6fd567a4..348be867dbc4 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -7,7 +7,7 @@ export type TCFDPlatform = 'dxtrade' | 'mt5' | 'ctrader' | 'derivez'; export type TCFDsPlatformType = 'dxtrade' | 'derivez' | 'mt5' | 'ctrader' | ''; -export type TShortcode = 'svg' | 'bvi' | 'labuan' | 'vanuatu' | 'maltainvest'; +export type TShortcode = DetailsOfEachMT5Loginid['landing_company_short']; export type TCFDAccountCopy = { text: string | undefined; diff --git a/packages/cfd/src/features/hooks/useCurrentList.ts b/packages/cfd/src/features/hooks/useCurrentList.ts index 15789f18e7fc..4ff5076cb38a 100644 --- a/packages/cfd/src/features/hooks/useCurrentList.ts +++ b/packages/cfd/src/features/hooks/useCurrentList.ts @@ -1,6 +1,6 @@ import { useStore } from '@deriv/stores'; import { useMT5AccountsList, useDxtradeAccountsList, useCtraderAccountsList } from '@deriv/api'; -import { getAccountListKey } from '@deriv/shared'; +import { getAccountListKey, CFD_PLATFORMS, Jurisdiction } from '@deriv/shared'; type MT5AccountsList = NonNullable['data']>[number]; type DxtradeAccountsList = NonNullable['data']>[number]; @@ -24,23 +24,23 @@ const useCurrentList = () => { mt5_accounts ?.filter(acc => show_eu_related_content - ? acc.landing_company_short === 'maltainvest' - : acc.landing_company_short !== 'maltainvest' + ? acc.landing_company_short === Jurisdiction.MALTA_INVEST + : acc.landing_company_short !== Jurisdiction.MALTA_INVEST ) .forEach(account => { - current_list[getAccountListKey(account, 'mt5', account.landing_company_short)] = { + current_list[getAccountListKey(account, CFD_PLATFORMS.MT5, account.landing_company_short)] = { ...account, }; }); dxtrade_accounts?.forEach(account => { - current_list[getAccountListKey(account, 'dxtrade', account.landing_company_short)] = { + current_list[getAccountListKey(account, CFD_PLATFORMS.DXTRADE, account.landing_company_short)] = { ...account, }; }); ctrader_accounts?.forEach(account => { - current_list[getAccountListKey(account, 'ctrader', account.landing_company_short)] = { + current_list[getAccountListKey(account, CFD_PLATFORMS.CTRADER, account.landing_company_short)] = { ...account, }; }); From 040e28cf17f141ffc500c2ea291226c6d1f39df3 Mon Sep 17 00:00:00 2001 From: Hirad Date: Tue, 14 Nov 2023 15:03:27 +0800 Subject: [PATCH 3/4] fix: changed back to the previous state because of the type conflicts --- packages/cfd/src/Components/props.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 348be867dbc4..1dae6fd567a4 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -7,7 +7,7 @@ export type TCFDPlatform = 'dxtrade' | 'mt5' | 'ctrader' | 'derivez'; export type TCFDsPlatformType = 'dxtrade' | 'derivez' | 'mt5' | 'ctrader' | ''; -export type TShortcode = DetailsOfEachMT5Loginid['landing_company_short']; +export type TShortcode = 'svg' | 'bvi' | 'labuan' | 'vanuatu' | 'maltainvest'; export type TCFDAccountCopy = { text: string | undefined; From 1128c09a6a205e82135d43bef9911394cb48a571 Mon Sep 17 00:00:00 2001 From: Hirad Date: Fri, 17 Nov 2023 12:32:03 +0800 Subject: [PATCH 4/4] fix: used api types instead of constant types --- packages/cfd/src/Components/props.types.ts | 6 +++--- .../cfd-compare-accounts/cfd-compare-accounts-button.tsx | 2 +- .../cfd-compare-accounts-description.tsx | 2 +- .../cfd-compare-accounts-title-icon.tsx | 2 +- packages/cfd/src/Helpers/compare-accounts-config.ts | 2 +- packages/stores/types.ts | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 1dae6fd567a4..d000fed00179 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -7,7 +7,7 @@ export type TCFDPlatform = 'dxtrade' | 'mt5' | 'ctrader' | 'derivez'; export type TCFDsPlatformType = 'dxtrade' | 'derivez' | 'mt5' | 'ctrader' | ''; -export type TShortcode = 'svg' | 'bvi' | 'labuan' | 'vanuatu' | 'maltainvest'; +export type TShortcode = DetailsOfEachMT5Loginid['landing_company_short']; export type TCFDAccountCopy = { text: string | undefined; @@ -89,7 +89,7 @@ export type TTradingPlatformAvailableAccount = { }; signup: string[]; }; - shortcode: TShortcode; + shortcode?: TShortcode; sub_account_type: string; account_type?: 'real' | 'demo'; landing_company_short?: TShortcode; @@ -237,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. */ 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/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/stores/types.ts b/packages/stores/types.ts index 8e799883a5ba..f76c5083e3db 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -226,7 +226,7 @@ type TTradingPlatformAvailableAccount = { }; signup: string[]; }; - shortcode: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest'; + shortcode?: DetailsOfEachMT5Loginid['landing_company_short']; sub_account_type: string; }; @@ -879,7 +879,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?: string; description?: string; market_type?: 'all' | 'financial' | 'synthetic';