+
{(platform === mt5Platform || app === ctraderPlatform) && (
@@ -54,9 +55,11 @@ const MT5TradeLink: FC = ({ app = 'linux', platform, webtrad
{(platform === mt5Platform || app === ctraderPlatform) && (
@@ -64,14 +67,16 @@ const MT5TradeLink: FC
= ({ app = 'linux', platform, webtrad
{platform !== mt5Platform && app !== ctraderPlatform && (
)}
diff --git a/packages/tradershub/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx b/packages/tradershub/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
new file mode 100644
index 000000000000..ea5abb031a3a
--- /dev/null
+++ b/packages/tradershub/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
@@ -0,0 +1,155 @@
+import React, { Fragment, useMemo } from 'react';
+import { useActiveTradingAccount, useCtraderAccountsList, useDxtradeAccountsList } from '@deriv/api';
+import { Provider } from '@deriv/library';
+import { Text, useBreakpoint } from '@deriv/quill-design';
+import ImportantIcon from '../../../../public/images/ic-important.svg';
+import { THooks, TPlatforms } from '../../../../types';
+import { AppToContentMapper, MarketTypeDetails, PlatformDetails } from '../../constants';
+import { MT5TradeDetailsItem } from './MT5TradeDetailsItem';
+import { MT5TradeLink } from './MT5TradeLink';
+
+type MT5TradeScreenProps = {
+ account?: THooks.CtraderAccountsList | THooks.DxtradeAccountsList | THooks.MT5AccountsList;
+};
+
+const serviceMaintenanceMessages: Record
= {
+ ctrader:
+ 'Server maintenance occurs every first Saturday of the month from 7 to 10 GMT time. You may experience service disruption during this time.',
+ dxtrade:
+ 'Server maintenance starts at 06:00 GMT every Sunday and may last up to 2 hours. You may experience service disruption during this time.',
+ mt5: 'Server maintenance starts at 01:00 GMT every Sunday, and this process may take up to 2 hours to complete. Service may be disrupted during this time.',
+};
+
+const MT5TradeScreen = ({ account }: MT5TradeScreenProps) => {
+ const { isMobile } = useBreakpoint();
+ const { getCFDState } = Provider.useCFDContext();
+ const { data: dxtradeAccountsList } = useDxtradeAccountsList();
+ const { data: ctraderAccountsList } = useCtraderAccountsList();
+ const { data: activeAccount } = useActiveTradingAccount();
+
+ const mt5Platform = PlatformDetails.mt5.platform;
+ const dxtradePlatform = PlatformDetails.dxtrade.platform;
+ const ctraderPlatform = PlatformDetails.ctrader.platform;
+
+ const marketType = getCFDState('marketType');
+ const platform = getCFDState('platform') ?? mt5Platform;
+
+ const platformToAccountsListMapper = useMemo(
+ () => ({
+ ctrader: ctraderAccountsList?.find(account => account.is_virtual === activeAccount?.is_virtual),
+ dxtrade: dxtradeAccountsList?.find(account => account.is_virtual === activeAccount?.is_virtual),
+ mt5: account,
+ }),
+ [ctraderAccountsList, dxtradeAccountsList, account, activeAccount?.is_virtual]
+ );
+
+ const details = platformToAccountsListMapper[platform as TPlatforms.All];
+
+ const loginId = useMemo(() => {
+ if (platform === mt5Platform) {
+ return (details as THooks.MT5AccountsList)?.display_login;
+ } else if (platform === dxtradePlatform) {
+ return (details as THooks.DxtradeAccountsList)?.account_id;
+ }
+ return (details as THooks.CtraderAccountsList)?.login;
+ }, [details, dxtradePlatform, mt5Platform, platform]);
+
+ return (
+
+
+
+
+
+ {platform === mt5Platform
+ ? MarketTypeDetails[(marketType ?? 'all') as keyof typeof MarketTypeDetails].icon
+ : PlatformDetails[platform as keyof typeof PlatformDetails].icon}
+
+
+
+
+ {platform === mt5Platform
+ ? MarketTypeDetails[(marketType ?? 'all') as keyof typeof MarketTypeDetails]
+ .title
+ : PlatformDetails[platform as keyof typeof PlatformDetails].title}{' '}
+ {!activeAccount?.is_virtual && details?.landing_company_short?.toUpperCase()}
+
+
+
+ {loginId}
+
+
+
+
+ {details?.display_balance}
+
+
+
+ {platform === mt5Platform && (
+
+
+
+
+
+
+ )}
+ {platform === dxtradePlatform && (
+
+
+
+
+ )}
+ {platform === ctraderPlatform && (
+
+ )}
+
+
+
+
+
+
{serviceMaintenanceMessages[(platform || mt5Platform) as TPlatforms.All]}
+
+
+
+ {platform === mt5Platform && (
+
+
+ {!isMobile && (
+
+
+
+
+
+ )}
+
+ )}
+ {platform === dxtradePlatform && (
+
+ )}
+ {platform === ctraderPlatform && (
+
+
+
+
+ )}
+
+