diff --git a/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx b/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx index 32e2ac654b42..596ed7985c2b 100644 --- a/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx +++ b/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx @@ -71,14 +71,7 @@ const PasswordsPlatform = ({ email, has_dxtrade_accounts, has_mt5_accounts }) => - - - ]} + i18n_default_text='Use the {{platform_name_dxtrade}} password to log in to your {{platform_name_dxtrade}} accounts on the web and mobile apps.' values={{ platform_name_dxtrade }} /> diff --git a/packages/appstore/package.json b/packages/appstore/package.json index 9bee2d325fb6..8c6ec5c98327 100644 --- a/packages/appstore/package.json +++ b/packages/appstore/package.json @@ -29,7 +29,7 @@ "license": "ISC", "dependencies": { "@deriv/account": "^1.0.0", - "@deriv/api-types": "1.0.48", + "@deriv/api-types": "^1.0.54", "@deriv/components": "^1.0.0", "@deriv/shared": "^1.0.0", "@deriv/trader": "^3.8.0", @@ -50,9 +50,9 @@ "@deriv/publisher": "^0.0.1-beta4", "@types/classnames": "^2.2.11", "@types/object.fromentries": "^2.0.0", - "@types/react-router-dom": "^5.1.6", "@types/react": "^18.0.7", "@types/react-dom": "^18.0.0", + "@types/react-router-dom": "^5.1.6", "babel-core": "^6.26.3", "babel-loader": "^8.1.0", "chai": "^4.2.0", diff --git a/packages/cashier/package.json b/packages/cashier/package.json index 81e8cc5ed925..2ce8dc40cba9 100644 --- a/packages/cashier/package.json +++ b/packages/cashier/package.json @@ -35,7 +35,7 @@ "url": "https://github.com/binary-com/deriv-app/issues" }, "dependencies": { - "@deriv/api-types": "1.0.48", + "@deriv/api-types": "^1.0.54", "@deriv/components": "^1.0.0", "@deriv/deriv-api": "^1.0.8", "@deriv/p2p": "^0.7.3", diff --git a/packages/cfd/package.json b/packages/cfd/package.json index 8894b0532aa2..3434a53d5530 100644 --- a/packages/cfd/package.json +++ b/packages/cfd/package.json @@ -35,10 +35,10 @@ }, "homepage": "https://github.com/binary-com/deriv-app", "devDependencies": { - "babel-eslint": "^10.1.0", - "babel-loader": "^8.1.0", "@types/react": "^18.0.7", "@types/react-dom": "^18.0.0", + "babel-eslint": "^10.1.0", + "babel-loader": "^8.1.0", "chai": "^4.2.0", "circular-dependency-plugin": "^5.2.2", "clean-webpack-plugin": "^3.0.0", @@ -87,7 +87,7 @@ }, "dependencies": { "@deriv/account": "^1.0.0", - "@deriv/api-types": "1.0.48", + "@deriv/api-types": "^1.0.54", "@deriv/components": "^1.0.0", "@deriv/deriv-api": "^1.0.8", "@deriv/shared": "^1.0.0", @@ -107,6 +107,7 @@ "prop-types": "^15.7.2", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-qrcode": "^0.3.5", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-transition-group": "4.4.2" diff --git a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js index 0671e444a350..3f3c5a463e74 100644 --- a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js @@ -223,7 +223,7 @@ describe('', () => { /> ); checkAccountCardsRendering(TESTED_CASES.NON_EU_DXTRADE); - const dxtrade_fund_top_up_button = screen.getByRole('button', { name: /fund top up/i }); + const dxtrade_fund_top_up_button = screen.getByRole('button', { name: /top up/i }); const dxtrade_trade_on_web_terminal_button = screen.getByRole('link', { name: /trade on web terminal/i }); expect(dxtrade_trade_on_web_terminal_button).toHaveAttribute('href', 'https://dx-demo.deriv.com'); diff --git a/packages/cfd/src/Containers/__tests__/cfd-dashboard-container.spec.js b/packages/cfd/src/Components/__tests__/cfd-download-container.spec.js similarity index 72% rename from packages/cfd/src/Containers/__tests__/cfd-dashboard-container.spec.js rename to packages/cfd/src/Components/__tests__/cfd-download-container.spec.js index 7e17abf89544..1b18aae48cef 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-dashboard-container.spec.js +++ b/packages/cfd/src/Components/__tests__/cfd-download-container.spec.js @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import CFDDashboardContainer from '../cfd-dashboard-container'; +import CFDDownloadContainer from '../cfd-download-container'; jest.mock('@deriv/components', () => { const original_module = jest.requireActual('@deriv/components'); @@ -10,7 +10,7 @@ jest.mock('@deriv/components', () => { }; }); -describe('CFDDashboardContainer', () => { +describe('CFDDownloadContainer', () => { const mock_props = { platform: 'mt5', active_index: 0, @@ -21,12 +21,12 @@ describe('CFDDashboardContainer', () => { }, }; - it('should render correctly', () => { - render(); + it('should render correctly', () => { + render(); expect(screen.getByTestId(/dt_cfd_dashboard_download_center_container/i)).toBeInTheDocument(); }); it('should render correct text according to the MT5 platform', () => { - render(); + render(); expect( screen.getByText(/run MT5 from your browser or download the MT5 app for your devices/i) ).toBeInTheDocument(); @@ -35,7 +35,7 @@ describe('CFDDashboardContainer', () => { ).toBeInTheDocument(); }); it('should show the proper icons for the MT5 platform ', () => { - render(); + render(); expect(screen.getByText(/IcMt5DeviceDesktop/i)).toBeInTheDocument(); expect(screen.getByText(/IcMt5DeviceLaptop/i)).toBeInTheDocument(); expect(screen.getByText(/IcInstallationWindows/i)).toBeInTheDocument(); @@ -49,7 +49,7 @@ describe('CFDDashboardContainer', () => { }); it('should download/redirect the correct file for MT5 platform', () => { - render(); + render(); expect(screen.getByText(/IcInstallationWindows/i).closest('a')).toHaveAttribute( 'href', 'https://download.mql5.com/cdn/web/deriv.limited/mt5/derivmt5setup.exe' @@ -77,27 +77,15 @@ describe('CFDDashboardContainer', () => { }); it('should render the correct icons and text for the Deriv X platform', () => { - render(); - expect(screen.getByText(/IcDxtradeDeviceDesktop/i)).toBeInTheDocument(); - expect(screen.getByText(/IcDxtradeDeviceLaptop/i)).toBeInTheDocument(); + render(); expect(screen.getByText(/IcBrandDxtrade/i)).toBeInTheDocument(); - expect(screen.getByText(/IcDxtradeDeviceTablet/i)).toBeInTheDocument(); - expect(screen.getByText(/IcDxtradeDevicePhone/i)).toBeInTheDocument(); expect(screen.getByText(/IcInstallationGoogle/i)).toBeInTheDocument(); expect(screen.getByText(/IcInstallationApple/i)).toBeInTheDocument(); - expect(screen.getByText(/Run deriv x on your browser or download the mobile app/i)).toBeInTheDocument(); expect(screen.getByText(/web terminal/i)).toBeInTheDocument(); }); - it('should render the correct icons if dark mode is on for DerivX', () => { - render(); - expect(screen.getByText(/IcDxtradeDeviceDesktopLight/i)).toBeInTheDocument(); - expect(screen.getByText(/IcDxtradeDeviceLaptopLight/i)).toBeInTheDocument(); - expect(screen.getByText(/IcDxtradeDeviceTabletLight/i)).toBeInTheDocument(); - expect(screen.getByText(/IcDxtradeDevicePhoneLight/i)).toBeInTheDocument(); - }); it('should download/redirect the correct file for DerivX', () => { - render(); + render(); expect(screen.getByText(/IcBrandDxtrade/i).closest('a')).toHaveAttribute('href', 'https://dx.deriv.com'); expect(screen.getByText(/IcInstallationGoogle/i).closest('a')).toHaveAttribute( 'href', @@ -109,7 +97,7 @@ describe('CFDDashboardContainer', () => { ); }); it('should render demo account dashboard and the demo link for derivx web terminal if active_index is 1 ', () => { - render(); + render(); expect(screen.getByText(/IcBrandDxtrade/i).closest('a')).toHaveAttribute('href', 'https://dx-demo.deriv.com'); }); }); diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 4d0fbcb8fd79..477e4a303c66 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -25,10 +25,12 @@ const account_icons: { [key: string]: TAccountIconValues } = { financial_stp: 'IcMt5FinancialStpPlatform', cfd: 'IcMt5CfdPlatform', }, + // TODO: Line 30, 31 and 32 should be removed after real released. dxtrade: { synthetic: 'IcDxtradeSyntheticPlatform', financial: 'IcDxtradeFinancialPlatform', cfd: 'IcMt5CfdPlatform', + all: 'IcDxtradeDerivxPlatform', }, }; @@ -595,7 +597,7 @@ const CFDAccountCardComponent = ({
)} diff --git a/packages/cfd/src/Components/cfd-demo-account-display.tsx b/packages/cfd/src/Components/cfd-demo-account-display.tsx index de4289300d2c..78e0419bd89c 100644 --- a/packages/cfd/src/Components/cfd-demo-account-display.tsx +++ b/packages/cfd/src/Components/cfd-demo-account-display.tsx @@ -5,7 +5,7 @@ import { general_messages } from '../Constants/cfd-shared-strings'; import specifications, { TSpecifications } from '../Constants/cfd-specifications'; import Loading from '../templates/_common/components/loading'; import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; -import { TTradingPlatformAccounts } from './props.types'; +import { TTradingPlatformAccounts, TCFDPlatform } from './props.types'; import { TObjectCFDAccount } from 'Containers/cfd-dashboard'; type TStandPoint = { @@ -38,7 +38,7 @@ type TCFDDemoAccountDisplayProps = { data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts, meta: TOpenAccountTransferMeta ) => void; - platform: string; + platform: TCFDPlatform; current_list: Record; openPasswordManager: (login?: string, title?: string, group?: string, type?: string, server?: string) => void; residence: string; diff --git a/packages/cfd/src/Components/cfd-download-container.tsx b/packages/cfd/src/Components/cfd-download-container.tsx new file mode 100644 index 000000000000..2346d6ad42d2 --- /dev/null +++ b/packages/cfd/src/Components/cfd-download-container.tsx @@ -0,0 +1,210 @@ +import React from 'react'; +import classnames from 'classnames'; +import { QRCode } from 'react-qrcode'; +import { Icon, Text, DesktopWrapper, MobileWrapper } from '@deriv/components'; +import { CFD_PLATFORMS, isDesktop, isMobile } from '@deriv/shared'; +import { Localize, localize } from '@deriv/translations'; +import { + getDXTradeWebTerminalLink, + getPlatformDXTradeDownloadLink, + getPlatformMt5DownloadLink, +} from '../Helpers/constants'; +import { general_messages } from '../Constants/cfd-shared-strings'; +import { TCFDDashboardContainer } from './props.types'; + +type TDxtradeDesktopDownloadProps = { + active_index: TCFDDashboardContainer['active_index']; + dxtrade_tokens: TCFDDashboardContainer['dxtrade_tokens']; +}; + +type TMobileDownloadProps = { + is_dark_mode_on: TCFDDashboardContainer['is_dark_mode_on']; + platform: TCFDDashboardContainer['platform']; +}; + +const mobileDownloadLink = (platform: string, type: 'ios' | 'android' | 'huawei') => { + return platform === CFD_PLATFORMS.MT5 ? getPlatformMt5DownloadLink(type) : getPlatformDXTradeDownloadLink(type); +}; + +const DxtradeDesktopDownload = ({ active_index, dxtrade_tokens }: TDxtradeDesktopDownloadProps) => { + return ( + +

{localize('Run Deriv X on your browser')}

+ + +
+ + + +
+ + + ); +}; + +const MT5DesktopDownload = () => { + return ( + +
+ + +
+ + + + + + ); +}; + +const MobileDownload = ({ is_dark_mode_on, platform }: TMobileDownloadProps) => { + return ( + + {platform === CFD_PLATFORMS.DXTRADE && ( +

+ {localize('Download the Deriv X mobile app')} +

+ )} +
+ {isMobile() && platform === CFD_PLATFORMS.DXTRADE && ( + + + + + )} + {platform === CFD_PLATFORMS.MT5 && ( + + + + + )} +
+ + + ); +}; + +const QRCodeBox = ({ platform }: { platform: string }) => { + return ( + +
+ + + {localize('Scan the QR code to download the Deriv X Mobile App')} + +
+ + ); +}; + +const CFDDownloadContainer = ({ platform, is_dark_mode_on, active_index, dxtrade_tokens }: TCFDDashboardContainer) => { + return ( + + + + + + +
+ {platform === CFD_PLATFORMS.MT5 && ( +

+ {isDesktop() ? general_messages.getDownloadHeader(platform) : localize('Download the MT5 app')} +

+ )} +
+ +
+ {platform === CFD_PLATFORMS.DXTRADE && ( + + )} + {platform === CFD_PLATFORMS.MT5 && } +
+ + +
+ +
+
+ + {platform === CFD_PLATFORMS.DXTRADE && } +
+ + ); +}; + +export default CFDDownloadContainer; diff --git a/packages/cfd/src/Components/cfd-dxtrade-compare-content.tsx b/packages/cfd/src/Components/cfd-dxtrade-compare-content.tsx new file mode 100644 index 000000000000..7baa88d8bbec --- /dev/null +++ b/packages/cfd/src/Components/cfd-dxtrade-compare-content.tsx @@ -0,0 +1,476 @@ +import React from 'react'; +import { Table, Text, ThemedScrollbars, Div100vhContainer } from '@deriv/components'; +import { localize, Localize } from '@deriv/translations'; +import { isDesktop, CFD_PLATFORMS } from '@deriv/shared'; +import { LandingCompany, CurrencyConfigStructure } from '@deriv/api-types'; + +// TODO: Remove this temporary type when api-types updates +type TLandingCompany = LandingCompany & { + /** + * Available Deriv X financial account types (all except Synthetic Indices). + */ + dxtrade_all_company?: { + /** + * Landing Company details. + */ + standard?: { + /** + * Landing Company address + */ + address?: string[] | null; + /** + * Special conditions for changing sensitive fields + */ + changeable_fields?: { + [k: string]: unknown; + }; + /** + * Landing Company country of incorporation + */ + country?: string; + currency_config?: CurrencyConfigStructure; + /** + * Flag to indicate whether reality check is applicable for this Landing Company. `1`: applicable, `0`: not applicable. The Reality Check is a feature that gives a summary of the client's trades and account balances on a regular basis throughout his session, and is a regulatory requirement for certain Landing Companies. + */ + has_reality_check?: 0 | 1; + /** + * Allowed contract types + */ + legal_allowed_contract_categories?: string[]; + /** + * Allowable currencies + */ + legal_allowed_currencies?: string[]; + /** + * Allowable markets + */ + legal_allowed_markets?: string[]; + /** + * Default account currency + */ + legal_default_currency?: string; + /** + * Landing Company legal name + */ + name?: string; + /** + * Legal requirements for the Landing Company + */ + requirements?: { + [k: string]: unknown; + }; + /** + * Landing Company short code + */ + shortcode?: string; + /** + * Flag that indicates whether the landing company supports professional accounts or not + */ + support_professional_client?: 0 | 1; + }; + }; +}; + +type TCFDAttributeDescriberProps = { + name: string; + counter: number | null; +}; + +type TFilterAvailableAccounts = ( + landing_companies: TLandingCompany, + table: TAccountsDescription[], + is_logged_in: boolean, + show_eu_related: boolean, + platform: string, + is_australian: boolean +) => Array<{ [key: string]: string | React.ReactNode | undefined }>; + +type TAccountsDescription = { + attribute: string; + dxtrade: TDxTradeAccountsDescription; +}; + +type TDxTradeAccountsDescription = { + derivx: string; + footnote: string | null; +}; + +type TCompareAccountsReusedProps = { + landing_companies: TLandingCompany; + platform: string; + is_logged_in: boolean; + is_uk: boolean; +}; + +type TCompareAccountsDataParams = TCompareAccountsReusedProps & { + show_eu_related: boolean; + residence: string; +}; + +type TCFDCompareAccountHintProps = TCompareAccountsReusedProps & { + show_risk_message: boolean; +}; + +type TModalContentProps = TCompareAccountsReusedProps & { + show_eu_related: boolean; + residence: string; + is_eu: boolean; +}; + +type TGetAccounts = (params: TCompareAccountsReusedProps) => TAccountsDescription[]; + +type TAccountTypesToFilter = (TLandingCompany['dxtrade_all_company'] | boolean | undefined)[]; + +const getAccounts: TGetAccounts = ({ landing_companies, is_logged_in }) => { + const getLoggedInTypesCount = ([landing_companies?.dxtrade_all_company] as TAccountTypesToFilter).length; + + const account_types_count = is_logged_in ? getLoggedInTypesCount : 2; + + return [ + { + attribute: localize('Currency'), + dxtrade: { + derivx: localize('USD'), + footnote: null, + }, + }, + { + attribute: localize('Maximum leverage'), + dxtrade: { + derivx: localize('Up to 1:1000'), + footnote: localize( + 'Leverage gives you the ability to trade a larger position using your existing capital. Leverage varies across different symbols.' + ), + }, + }, + { + attribute: localize('Order execution'), + dxtrade: { + derivx: localize('Market'), + footnote: localize( + "All {{count}} account types use market execution. This means you agree with the broker's price in advance and will place orders at the broker's price.", + { + count: account_types_count, + } + ), + }, + }, + { + attribute: localize('Spread'), + dxtrade: { + derivx: localize('Fixed/Variable'), + footnote: localize( + "The spread is the difference between the buy price and sell price. A variable spread means that the spread is constantly changing, depending on market conditions. A fixed spread remains constant but is subject to alteration, at the Broker's absolute discretion." + ), + }, + }, + { + attribute: localize('Commission'), + dxtrade: { + derivx: localize('No'), + footnote: localize('Deriv charges no commission across all account types.'), + }, + }, + { + attribute: localize('Minimum deposit'), + dxtrade: { + derivx: localize('No'), + footnote: null, + }, + }, + { + attribute: localize('Margin call'), + dxtrade: { + derivx: localize('100%'), + footnote: localize( + 'You’ll get a warning, named margin call, if your account balance drops down close to the stop out level.' + ), + }, + }, + { + attribute: localize('Stop out level'), + dxtrade: { + derivx: localize('50%'), + footnote: localize( + 'If your margin level drops below our stop out level, your positions may be closed automatically to protect you from further losses.' + ), + }, + }, + { + attribute: localize('Negative Balance Protection'), + dxtrade: { + derivx: localize('Available'), + footnote: null, + }, + }, + { + attribute: localize('Number of assets'), + dxtrade: { + derivx: localize('110+'), + footnote: null, + }, + }, + { + attribute: localize('Cryptocurrency trading'), + dxtrade: { + derivx: localize('N/A'), + footnote: localize('Indicates the availability of cryptocurrency trading on a particular account.'), + }, + }, + { + attribute: localize('Trading instruments'), + dxtrade: { + derivx: localize( + 'Synthetics, FX majors (standard/micro lots), FX minors, basket indices, commodities, and cryptocurrencies' + ), + footnote: null, + }, + }, + ]; +}; + +const CFDAttributeDescriber = ({ name, counter }: TCFDAttributeDescriberProps) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [is_visible, setIsVisible] = React.useState(false); + const toggleModal = () => setIsVisible(prev => !prev); + + return counter ? ( + + + {name} + + {counter} + + + + ) : ( + + {name} + + ); +}; + +const filterAvailableAccounts: TFilterAvailableAccounts = ( + landing_companies, + table, + is_logged_in, + show_eu_related, + platform +) => { + let footnote_number = 0; + return table + .filter(row => row[platform as keyof TAccountsDescription]) + .map(({ attribute, dxtrade = {} }) => { + const { derivx, footnote } = dxtrade; + const footnote_counter = footnote ? ++footnote_number : null; + + if (platform === CFD_PLATFORMS.DXTRADE) { + return { + attribute: , + derivx, + }; + } + if (is_logged_in) { + return { + attribute: , + }; + } + return { + attribute: , + }; + }); +}; + +const compareAccountsData = ({ + landing_companies, + is_logged_in, + show_eu_related, + platform, + residence, + is_uk, +}: TCompareAccountsDataParams) => { + const is_australian = residence === 'au'; + return filterAvailableAccounts( + landing_companies, + getAccounts({ landing_companies, platform, is_logged_in, is_uk }), + is_logged_in, + show_eu_related, + platform, + is_australian + ); +}; + +const CFDCompareAccountHint = ({ + platform, + show_risk_message, + landing_companies, + is_logged_in, + is_uk, +}: TCFDCompareAccountHintProps) => { + return ( +
+
+ + +
+ {show_risk_message && ( + +
+ + +
+
+ + * + + +
+ {is_uk && ( +
+ + ** + + +
+ )} + + )} + {getAccounts({ landing_companies, platform, is_logged_in, is_uk }) + .filter( + item => + !!(item[platform as keyof TAccountsDescription] as TAccountsDescription['dxtrade'])?.footnote + ) + .map((account, index) => { + return ( +
+ + {index + 1} + +
+ + {account.attribute} + + + { + ( + account[ + platform as keyof TAccountsDescription + ] as TAccountsDescription['dxtrade'] + ).footnote + } + +
+
+ ); + })} +
+ ); +}; + +const CfdDxtradeCompareContent = ({ + landing_companies, + is_logged_in, + platform, + show_eu_related, + residence, + is_uk, +}: TModalContentProps) => { + const [cols, setCols] = React.useState>>([]); + const [template_columns, updateColumnsStyle] = React.useState('1fr 1.5fr'); + + React.useEffect(() => { + setCols(compareAccountsData({ landing_companies, is_logged_in, platform, show_eu_related, residence, is_uk })); + updateColumnsStyle('1fr 1.5fr'); + }, [ + landing_companies?.mt_financial_company, + landing_companies?.mt_gaming_company, + is_logged_in, + is_uk, + landing_companies, + platform, + show_eu_related, + residence, + ]); + + const show_risk_message = !show_eu_related; + + return ( + + +
+ + + + + {localize('Deriv X')} + + + + {cols.map((row, i) => ( + + {Object.keys(row).map((col, j) => ( + + {row[col]} + + ))} + + ))} + +
+
+ + + + ); +}; + +export default CfdDxtradeCompareContent; diff --git a/packages/cfd/src/Components/cfd-dxtrade-demo-account-display.tsx b/packages/cfd/src/Components/cfd-dxtrade-demo-account-display.tsx new file mode 100644 index 000000000000..397894b53223 --- /dev/null +++ b/packages/cfd/src/Components/cfd-dxtrade-demo-account-display.tsx @@ -0,0 +1,116 @@ +import React from 'react'; +import { localize } from '@deriv/translations'; +import { CFDAccountCard } from 'Components/cfd-account-card'; +import specifications from 'Constants/cfd-specifications'; +import Loading from '../templates/_common/components/loading'; +import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; +import { TTradingPlatformAccounts, TCFDPlatform } from 'Components/props.types'; +import { TObjectCFDAccount } from 'Containers/cfd-dashboard'; + +type TStandPoint = { + financial_company: string; + gaming_company: string; + iom: boolean; + malta: boolean; + maltainvest: boolean; + svg: boolean; +}; + +type TOpenAccountTransferMeta = { + category: string; + type?: string; +}; + +type TCFDDemoAccountDisplayProps = { + has_cfd_account_error: boolean; + standpoint: TStandPoint; + is_loading: boolean; + is_logged_in: boolean; + onSelectAccount: (objCFDAccount: TObjectCFDAccount) => void; + openAccountTransfer: ( + data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts, + meta: TOpenAccountTransferMeta + ) => void; + platform: TCFDPlatform; + // TODO: update this type (DetailsOfEachMT5Loginid) when BE changed the schema + current_list: Record< + string, + DetailsOfEachMT5Loginid & { + enabled: number; + } + >; + openPasswordManager: (login?: string, title?: string, group?: string, type?: string, server?: string) => void; + landing_companies?: LandingCompany; +}; + +const CFDDxtradeDemoAccountDisplay = ({ + has_cfd_account_error, + standpoint, + is_loading, + is_logged_in, + onSelectAccount, + openAccountTransfer, + platform, + current_list, + openPasswordManager, +}: TCFDDemoAccountDisplayProps) => { + const existing_accounts_data = (acc_type: 'dxtrade') => { + const acc = Object.keys(current_list).some( + key => key.startsWith(`${platform}.demo.${acc_type}`) && current_list[key].enabled === 1 + ) + ? Object.keys(current_list) + .filter(key => key.startsWith(`${platform}.demo.${acc_type}`)) + .reduce((_acc, cur) => { + _acc.push(current_list[cur]); + return _acc; + }, [] as DetailsOfEachMT5Loginid[]) + : undefined; + return acc; + }; + + const current_list_index = Object.keys(current_list).find(key => key.startsWith(`${platform}.demo.dxtrade`)) || ''; + + return ( +
+ {is_loading ? ( + + ) : ( + + onSelectAccount({ + category: 'demo', + platform: 'dxtrade', + type: 'all', + }) + } + onPasswordManager={openPasswordManager} + onClickFund={() => + openAccountTransfer(current_list[current_list_index], { + category: 'demo', + type: 'all', + }) + } + platform={platform} + descriptor={localize( + 'Trade CFDs on forex, derived indices, cryptocurrencies, and commodities with high leverage.' + )} + specs={specifications.dxtrade.demo_all_specs} + has_banner + /> + )} +
+ ); +}; + +export default CFDDxtradeDemoAccountDisplay; diff --git a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx new file mode 100644 index 000000000000..36d2d517acfc --- /dev/null +++ b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx @@ -0,0 +1,185 @@ +import React from 'react'; +import { localize } from '@deriv/translations'; +import { CFDAccountCard } from './cfd-account-card'; +import { general_messages } from '../Constants/cfd-shared-strings'; +import specifications, { TSpecifications } from '../Constants/cfd-specifications'; +import Loading from '../templates/_common/components/loading'; +import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types'; +import { TTradingPlatformAccounts, TCFDPlatform } from './props.types'; +import { TObjectCFDAccount } from 'Containers/cfd-dashboard'; + +type TStandPoint = { + financial_company: string; + gaming_company: string; + iom: boolean; + malta: boolean; + maltainvest: boolean; + svg: boolean; +}; + +type TOpenAccountTransferMeta = { + category: string; + type?: string; +}; + +type TCFDDemoAccountDisplayProps = { + is_eu: boolean; + is_eu_country: boolean; + has_maltainvest_account: boolean; + has_cfd_account_error: boolean; + openAccountNeededModal: (target: string, target_label: string, target_dmt5_label: string) => void; + standpoint: TStandPoint; + is_loading: boolean; + is_logged_in: boolean; + isSyntheticCardVisible: (account_category: string) => boolean; + isFinancialCardVisible: () => boolean; + onSelectAccount: (objCFDAccount: TObjectCFDAccount) => void; + openAccountTransfer: ( + data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts, + meta: TOpenAccountTransferMeta + ) => void; + platform: TCFDPlatform; + current_list: Record; + openPasswordManager: (login?: string, title?: string, group?: string, type?: string, server?: string) => void; + residence: string; + landing_companies?: LandingCompany; + toggleMT5TradeModal: () => void; +}; + +const CFDMT5DemoAccountDisplay = ({ + is_eu, + is_eu_country, + has_maltainvest_account, + has_cfd_account_error, + openAccountNeededModal, + standpoint, + is_loading, + is_logged_in, + isSyntheticCardVisible, + isFinancialCardVisible, + onSelectAccount, + openAccountTransfer, + platform, + current_list, + openPasswordManager, + residence, + toggleMT5TradeModal, +}: TCFDDemoAccountDisplayProps) => { + const is_eu_user = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country); + + const openAccountTransferList = (type: 'synthetic' | 'financial') => { + return Object.keys(current_list).find((key: string) => key.startsWith(`${platform}.demo.${type}`)) || ''; + }; + + const openCFDAccount = () => { + if (is_eu && !has_maltainvest_account && standpoint.iom) { + openAccountNeededModal('maltainvest', localize('Deriv Multipliers'), localize('demo CFDs')); + } else { + onSelectAccount({ + category: 'demo', + type: 'financial', + platform, + }); + } + }; + + const financial_accounts_data = () => { + const acc = Object.keys(current_list).some(key => key.startsWith(`${platform}.demo.financial`)) + ? Object.keys(current_list) + .filter(key => key.startsWith(`${platform}.demo.financial`)) + .reduce((_acc, cur) => { + _acc.push(current_list[cur]); + return _acc; + }, [] as DetailsOfEachMT5Loginid[]) + : undefined; + return acc; + }; + + const financial_specs = React.useMemo(() => { + const should_show_eu = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country); + if (residence === 'au') { + return specifications[platform as keyof TSpecifications].au_real_financial_specs; + } + if (should_show_eu) { + return specifications[platform as keyof TSpecifications].eu_real_financial_specs; + } + return specifications[platform as keyof TSpecifications].real_financial_specs; + }, [is_logged_in, is_eu, is_eu_country, residence, platform]); + + return ( +
+ {is_loading ? ( + + ) : ( +
+ {isSyntheticCardVisible('demo') && ( + + onSelectAccount({ + category: 'demo', + type: 'synthetic', + platform, + }) + } + onPasswordManager={openPasswordManager} + onClickFund={() => + openAccountTransfer(current_list[openAccountTransferList('synthetic')], { + category: 'demo', + type: 'synthetic', + }) + } + platform={platform} + descriptor={localize( + 'Trade CFDs on our synthetic indices that simulate real-world market movements.' + )} + specs={specifications[platform as keyof TSpecifications].real_synthetic_specs} + has_banner + toggleMT5TradeModal={toggleMT5TradeModal} + /> + )} + + {isFinancialCardVisible() && ( + + openAccountTransfer(current_list[openAccountTransferList('financial')], { + category: 'demo', + type: 'financial', + }) + } + platform={platform} + descriptor={general_messages.getFinancialAccountDescriptor(platform, is_eu_user)} + specs={financial_specs} + has_banner + toggleMT5TradeModal={toggleMT5TradeModal} + /> + )} +
+ )} +
+ ); +}; + +export default CFDMT5DemoAccountDisplay; diff --git a/packages/cfd/src/Components/cfd-real-account-display.tsx b/packages/cfd/src/Components/cfd-real-account-display.tsx index 0ddd7f666073..c9ae151eae61 100644 --- a/packages/cfd/src/Components/cfd-real-account-display.tsx +++ b/packages/cfd/src/Components/cfd-real-account-display.tsx @@ -7,7 +7,7 @@ import specifications, { TSpecifications } from '../Constants/cfd-specifications import { CFDAccountCard } from './cfd-account-card'; import { general_messages } from '../Constants/cfd-shared-strings'; import { DetailsOfEachMT5Loginid } from '@deriv/api-types'; -import { TExistingData, TTradingPlatformAccounts } from './props.types'; +import { TExistingData, TTradingPlatformAccounts, TCFDPlatform } from './props.types'; import { TObjectCFDAccount } from 'Containers/cfd-dashboard'; type TStandPoint = { @@ -24,6 +24,10 @@ type TOpenAccountTransferMeta = { type?: string; }; +type TCurrentList = DetailsOfEachMT5Loginid & { + enabled: number; +}; + type TCFDRealAccountDisplayProps = { has_real_account: boolean; is_accounts_switcher_on: boolean; @@ -43,11 +47,12 @@ type TCFDRealAccountDisplayProps = { data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts, meta: TOpenAccountTransferMeta ) => void; - platform: string; + platform: TCFDPlatform; isAccountOfTypeDisabled: ( account: Array & { [key: string]: DetailsOfEachMT5Loginid | TTradingPlatformAccounts } ) => boolean; - current_list: Record; + // TODO: update this type (DetailsOfEachMT5Loginid) when BE changed the schema + current_list: Record; openPasswordManager: (login?: string, title?: string, group?: string, type?: string, server?: string) => void; toggleAccountsDialog: (is_accounts_switcher_on?: boolean) => void; toggleMT5TradeModal: (is_accounts_switcher_on?: boolean) => void; @@ -147,7 +152,13 @@ const CFDRealAccountDisplay = ({ }; const existing_accounts_data = (acc_type: 'synthetic' | 'financial') => { - const acc = Object.keys(current_list).some(key => key.startsWith(`${platform}.real.${acc_type}`)) + // We need to check enabled property for DXTRADE accounts only. + // TODO: This condition should be removed after separating the DXTRADE and MT5 component. + const should_be_enabled = (list_item: TCurrentList) => + platform === 'dxtrade' ? list_item.enabled === 1 : true; + const acc = Object.keys(current_list).some( + key => key.startsWith(`${platform}.real.${acc_type}`) && should_be_enabled(current_list[key]) + ) ? Object.keys(current_list) .filter(key => key.startsWith(`${platform}.real.${acc_type}`)) .reduce((_acc, cur) => { diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index f98a514060be..d2f0d6d443cb 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -1,5 +1,7 @@ import { DetailsOfEachMT5Loginid } from '@deriv/api-types'; +export type TCFDPlatform = 'dxtrade' | 'mt5'; + export type TCFDAccountCopy = { text: string | undefined; className: string; @@ -23,6 +25,16 @@ export type TType = { platform: string; }; +export type TCFDDashboardContainer = { + platform: TCFDPlatform; + active_index: number; + is_dark_mode_on: boolean; + dxtrade_tokens: { + demo: string; + real: string; + }; +}; + export type TCFDAccountCardActionProps = { button_label?: string | JSX.Element; handleClickSwitchAccount: () => void; @@ -127,7 +139,7 @@ export type TTradingPlatformAccounts = { /** * Landing company shortcode of the DXTrade account. */ - landing_company_short?: 'bvi' | 'labuan' | 'malta' | 'maltainvest' | 'samoa' | 'svg' | 'vanuatu'; + landing_company_short?: 'bvi' | 'labuan' | 'malta' | 'maltainvest' | 'svg' | 'vanuatu'; /** * Login of DXTrade account. */ diff --git a/packages/cfd/src/Constants/cfd-specifications.ts b/packages/cfd/src/Constants/cfd-specifications.ts index f3a1f4c9a88e..c6f529cdbfa7 100644 --- a/packages/cfd/src/Constants/cfd-specifications.ts +++ b/packages/cfd/src/Constants/cfd-specifications.ts @@ -10,6 +10,7 @@ type TMT5 = { }; type TDXTrade = { + demo_all_specs: Record string; value: () => string }>; real_synthetic_specs: Record string; value: () => string }>; real_financial_specs: Record string; value: () => string }>; eu_real_financial_specs: Record string; value: () => string }>; @@ -61,7 +62,15 @@ const mt5 = { 'number-of-assets': { key: () => localize('Number of assets'), value: () => localize('70+') }, }, }; + +// TODO: Edit this after real accounts release const dxtrade = { + demo_all_specs: { + leverage: { key: () => localize('Leverage'), value: () => localize('Up to 1:1000') }, + 'margin-call': { key: () => localize('Margin call'), value: () => localize('100%') }, + 'stop-out-level': { key: () => localize('Stop out level'), value: () => localize('50%') }, + 'number-of-assets': { key: () => localize('Number of assets'), value: () => localize('110+') }, + }, real_synthetic_specs: { leverage: { key: () => localize('Leverage'), value: () => localize('Up to 1:1000') }, 'margin-call': { key: () => localize('Margin call'), value: () => localize('100%') }, diff --git a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx index fe0c61cf11ad..131fa4e9b176 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx +++ b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx @@ -290,7 +290,8 @@ describe('', () => { const account_information_button_label = /account information/i; const top_up_button_label = /top up/i; const dmt5_download_header = /run mt5 from your browser or download the mt5 app for your devices/i; - const derivx_download_header = /run deriv x on your browser or download the mobile app/i; + const derivx_mobile_app_download_header = /download the deriv X mobile app/i; + const derivx_web_terminal_header = /run deriv X on your browser/i; const mt5_account_error = /some of your dmt5 accounts are unavailable at the moment./i; const dxtrade_account_error = /some of your deriv X accounts are unavailable at the moment./i; @@ -327,7 +328,8 @@ describe('', () => { renderCFDDashboardWithRouter({ platform: CFD_PLATFORMS.DXTRADE }, rerender); expect(screen.getByRole('heading', { name: derivx_welcome_header })).toBeInTheDocument(); - expect(screen.getByRole('heading', { name: derivx_download_header })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: derivx_mobile_app_download_header })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: derivx_web_terminal_header })).toBeInTheDocument(); }); it('Real account tab is active initially, and Demo account tab gets active when clicked', () => { renderCFDDashboardWithRouter(); diff --git a/packages/cfd/src/Containers/__tests__/compare-accounts-modal.spec.js b/packages/cfd/src/Containers/__tests__/compare-accounts-modal.spec.js index d9b050c54e47..4a4c4bafa778 100644 --- a/packages/cfd/src/Containers/__tests__/compare-accounts-modal.spec.js +++ b/packages/cfd/src/Containers/__tests__/compare-accounts-modal.spec.js @@ -59,7 +59,7 @@ describe('CompareAccountsModal', () => { it('should render the CompareAccountsModal if the platform is dxtrade', async () => { render(); await waitFor(() => { - expect(screen.getAllByText(/compare accounts/i)[0]).toBeInTheDocument(); + expect(screen.getAllByText(/account information/i)[0]).toBeInTheDocument(); }); expect(screen.getAllByText(/maximum leverage/i)[0]).toBeInTheDocument(); }); diff --git a/packages/cfd/src/Containers/cfd-dashboard-container.tsx b/packages/cfd/src/Containers/cfd-dashboard-container.tsx deleted file mode 100644 index df2c0f5cf415..000000000000 --- a/packages/cfd/src/Containers/cfd-dashboard-container.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import React from 'react'; -import { Icon, Text } from '@deriv/components'; -import { Localize } from '@deriv/translations'; -import { CFD_PLATFORMS } from '@deriv/shared'; -import { general_messages } from '../Constants/cfd-shared-strings'; -import { - getDXTradeWebTerminalLink, - getPlatformDXTradeDownloadLink, - getPlatformMt5DownloadLink, -} from '../Helpers/constants'; -import { TCFDDashboardContainer } from './props.types'; -import classNames from 'classnames'; - -const CFDDashboardContainer = ({ platform, active_index, is_dark_mode_on, dxtrade_tokens }: TCFDDashboardContainer) => ( -
-

{general_messages.getDownloadHeader(platform)}

-
-
-
-
-
- {platform === CFD_PLATFORMS.MT5 && ( - - - - - )} - {platform === CFD_PLATFORMS.DXTRADE && ( - - - - - )} -
- {platform === CFD_PLATFORMS.DXTRADE && ( - - )} -
- {platform === CFD_PLATFORMS.MT5 && ( - - )} -
- {platform === CFD_PLATFORMS.MT5 && ( - - - - )} -
-
-
- {platform === CFD_PLATFORMS.MT5 && ( - - - - - )} - {platform === CFD_PLATFORMS.DXTRADE && ( - - - - - )} -
-
- - - - - - - {platform === CFD_PLATFORMS.MT5 && ( - - - - )} -
-
-
-
-); - -export default CFDDashboardContainer; diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx index 6f9dfc1e7c85..91f62b13d084 100644 --- a/packages/cfd/src/Containers/cfd-dashboard.tsx +++ b/packages/cfd/src/Containers/cfd-dashboard.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { RouteComponentProps, withRouter } from 'react-router'; import { Redirect } from 'react-router-dom'; -import { DesktopWrapper, Icon, MobileWrapper, Tabs, PageError, Loading, Text } from '@deriv/components'; +import { Icon, Tabs, PageError, Loading, Text } from '@deriv/components'; import { isEmptyObject, isMobile, @@ -21,19 +21,20 @@ import CompareAccountsModal from './compare-accounts-modal'; import JurisdictionModal from './jurisdiction-modal'; import MT5TradeModal from './mt5-trade-modal'; import CFDDbViOnBoarding from './cfd-dbvi-onboarding'; -import CFDDashboardContainer from './cfd-dashboard-container'; +import CFDDownloadContainer from '../Components/cfd-download-container'; import CFDPasswordManagerModal from './cfd-password-manager-modal'; import CFDPasswordModal from './cfd-password-modal'; import CFDServerErrorDialog from './cfd-server-error-dialog'; import CFDTopUpDemoModal from './cfd-top-up-demo-modal'; import CFDResetPasswordModal from './cfd-reset-password-modal'; import { general_messages } from '../Constants/cfd-shared-strings'; -import { CFDDemoAccountDisplay } from '../Components/cfd-demo-account-display'; -import { CFDRealAccountDisplay } from '../Components/cfd-real-account-display'; -import { getPlatformMt5DownloadLink, getPlatformDXTradeDownloadLink } from '../Helpers/constants'; import 'Sass/cfd-dashboard.scss'; import RootStore from 'Stores/index'; import { DetailsOfEachMT5Loginid, LandingCompany, ResidenceList } from '@deriv/api-types'; +// TODO: Change these imports after real released +import CFDDxtradeDemoAccountDisplay from '../Components/cfd-dxtrade-demo-account-display'; +import CFDMT5DemoAccountDisplay from '../Components/cfd-mt5-demo-account-display'; +import { CFDRealAccountDisplay } from '../Components/cfd-real-account-display'; declare module 'react' { interface HTMLAttributes extends React.AriaAttributes, React.DOMAttributes { @@ -94,7 +95,13 @@ export type TCFDDashboardProps = RouteComponentProps & { beginRealSignupForMt5: () => void; country: string; createCFDAccount: (objCFDAccount: TObjectCFDAccount) => void; - current_list: Record; + // TODO: update this type (DetailsOfEachMT5Loginid) when BE changed the schema + current_list: Record< + string, + DetailsOfEachMT5Loginid & { + enabled: number; + } + >; dxtrade_accounts_list_error: null; isAccountOfTypeDisabled: (account: Record) => boolean; is_accounts_switcher_on: boolean; @@ -523,32 +530,48 @@ const CFDDashboard = (props: TCFDDashboardProps) => { )} {is_demo_enabled && (
- + {platform === CFD_PLATFORMS.DXTRADE && ( + + )} + {platform === CFD_PLATFORMS.MT5 && ( + + )}
)} @@ -578,7 +601,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => { />
{platform === CFD_PLATFORMS.DXTRADE && ( - + )} {platform === CFD_PLATFORMS.MT5 && ( @@ -586,75 +609,12 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
- - - - -
-

- {platform === CFD_PLATFORMS.MT5 && ( - - )} - {platform === CFD_PLATFORMS.DXTRADE && ( - - )} -

-
-
- {platform === CFD_PLATFORMS.MT5 && ( - - - - - )} - {platform === CFD_PLATFORMS.DXTRADE && ( - - - - - )} -
-
- - - - - - - {platform === CFD_PLATFORMS.MT5 && ( - - - - )} -
-
-
- + diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx index 18913c048e78..9525629f2498 100644 --- a/packages/cfd/src/Containers/cfd-password-modal.tsx +++ b/packages/cfd/src/Containers/cfd-password-modal.tsx @@ -192,10 +192,13 @@ const getSubmitText = (platform: string, is_eu: boolean, needs_poi: boolean, typ const IconType = React.memo(({ platform, type, is_eu }: TIconTypeProps) => { if (platform === CFD_PLATFORMS.DXTRADE) { - if (type === 'synthetic') { - return ; - } else if (type === 'financial') { - return ; + switch (type) { + case 'synthetic': + return ; + case 'financial': + return ; + default: + return ; } } diff --git a/packages/cfd/src/Containers/cfd-personal-details-modal.tsx b/packages/cfd/src/Containers/cfd-personal-details-modal.tsx index 5628a567bd14..fc5482694ba7 100644 --- a/packages/cfd/src/Containers/cfd-personal-details-modal.tsx +++ b/packages/cfd/src/Containers/cfd-personal-details-modal.tsx @@ -9,7 +9,7 @@ import { getPropertyValue, isDesktop, WS } from '@deriv/shared'; import { GetSettings } from '@deriv/api-types'; type TFormValues = { [key: string]: string }; -type TSetSubmiting = (isSubmitting: boolean) => void; +type TSetSubmitting = (isSubmitting: boolean) => void; const CFDPersonalDetailsModal = ({ account_settings, @@ -35,7 +35,7 @@ const CFDPersonalDetailsModal = ({ account_opening_reason: '', }); - const initiatePersonalDetails = async (setSubmitting?: TSetSubmiting) => { + const initiatePersonalDetails = async (setSubmitting?: TSetSubmitting) => { // force request to update settings cache since settings have been updated let get_settings_response: GetSettings; if (!account_settings) { @@ -96,7 +96,7 @@ const CFDPersonalDetailsModal = ({ toggleJurisdictionModal(); }; - const updateValue = async (index: number, value: TFormValues, setSubmitting: TSetSubmiting, is_dirty = true) => { + const updateValue = async (index: number, value: TFormValues, setSubmitting: TSetSubmitting, is_dirty = true) => { if (is_dirty) { // Set account settings const data = await WS.setSettings(value); diff --git a/packages/cfd/src/Containers/compare-accounts-modal.tsx b/packages/cfd/src/Containers/compare-accounts-modal.tsx index fdae781a52cb..e6bcbd19ee0b 100644 --- a/packages/cfd/src/Containers/compare-accounts-modal.tsx +++ b/packages/cfd/src/Containers/compare-accounts-modal.tsx @@ -7,6 +7,7 @@ import { CFD_PLATFORMS } from '@deriv/shared'; import { LandingCompany } from '@deriv/api-types'; import ModalContent from './compare-accounts-content'; import DMT5CompareModalContent from './mt5-compare-table-content'; +import CfdDxtradeCompareContent from '../Components/cfd-dxtrade-compare-content'; type TCompareAccountsReusedProps = { landing_companies: LandingCompany; @@ -35,6 +36,51 @@ type TCompareAccountsModalProps = TCompareAccountsReusedProps & { openDerivRealAccountNeededModal: () => void; }; +type TDxtradeCompareAccountContent = TCompareAccountsReusedProps & { + is_demo_tab: boolean; + show_eu_related: boolean; + residence: string; + is_eu: boolean; +}; + +// TODO: Remove this component and use one component for both when real released. +const DxtradeCompareAccountContent = ({ + is_demo_tab, + is_logged_in, + landing_companies, + platform, + show_eu_related, + residence, + is_eu, + is_uk, +}: TDxtradeCompareAccountContent) => { + if (is_demo_tab) { + return ( + + ); + } + + return ( + + ); +}; + const CompareAccountsModal = ({ disableApp, enableApp, @@ -62,7 +108,9 @@ const CompareAccountsModal = ({ ]; const cfd_account_button_label = - mt5_accounts.filter(Boolean).length === 1 ? localize('Account Information') : localize('Compare accounts'); + mt5_accounts.filter(Boolean).length === 1 || (is_demo_tab && platform === CFD_PLATFORMS.DXTRADE) + ? localize('Account Information') + : localize('Compare accounts'); const getCFDModalTitle = () => (is_dxtrade ? cfd_account_button_label : localize('Compare available accounts')); @@ -112,7 +160,8 @@ const CompareAccountsModal = ({ exit_classname={is_dxtrade ? '' : 'cfd-modal--custom-exit'} > {is_dxtrade ? ( - {is_dxtrade ? ( - 'Deriv Limited'; @@ -15,11 +16,15 @@ const getTopUpConfig = () => { }; }; -const getPlatformDXTradeDownloadLink = (platform: 'ios' | 'android') => { - if (platform === 'ios') { - return DXTRADE_IOS_APP_URL; +const getPlatformDXTradeDownloadLink = (platform: 'ios' | 'android' | 'huawei') => { + switch (platform) { + case 'ios': + return DXTRADE_IOS_APP_URL; + case 'huawei': + return DXTRADE_HUAWEI_APP_URL; + default: + return DXTRADE_ANDROID_APP_URL; } - return DXTRADE_ANDROID_APP_URL; }; const getPlatformMt5DownloadLink = (platform: string | undefined = undefined) => { diff --git a/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts b/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts index ef21e3aa9cbe..4a34588d6a3b 100644 --- a/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts +++ b/packages/cfd/src/Stores/Modules/CFD/Helpers/cfd-config.ts @@ -47,6 +47,12 @@ export const getDxCompanies = () => { }; export const getMtCompanies = (is_eu: boolean) => { + // TODO: Move this to the getDxCompanies for real release and when separating MT5 and DerivX components. + const all_config = { + account_type: '', + leverage: 500, + short_title: localize('CFDs'), + }; const synthetic_config = { account_type: '', leverage: 500, @@ -65,6 +71,12 @@ export const getMtCompanies = (is_eu: boolean) => { return { demo: { + all: { + mt5_account_type: all_config.account_type, + leverage: all_config.leverage, + title: localize('Demo'), + short_title: all_config.short_title, + }, synthetic: { mt5_account_type: synthetic_config.account_type, leverage: synthetic_config.leverage, @@ -98,6 +110,7 @@ export const getMtCompanies = (is_eu: boolean) => { }, }, real: { + // TODO: Add All here before real release synthetic: { mt5_account_type: synthetic_config.account_type, leverage: synthetic_config.leverage, diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index e2d68681e4a2..ea7f37f25819 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -11,27 +11,6 @@ max-width: fit-content; margin: 0 auto; - &__dxtrade-download { - background: $color-black-7; - border-radius: $BORDER_RADIUS; - text-decoration: none; - display: grid; - grid-template-columns: 32px 1fr; - grid-gap: 0.8rem; - width: 12.7rem; - align-items: center; - height: 4rem; - border: 1px solid #a6a6a6; - - &-text { - display: flex; - flex-direction: column; - padding: 0.4rem 0rem 0.4rem 0.2rem; - } - &--icon { - margin-left: 0.6rem; - } - } &--hint { @include typeface(--xsmall-left-normal-black, none); } @@ -140,97 +119,125 @@ } } } - &__download-center { + + &__download-container { border-top: 2px solid var(--general-section-1); padding-top: 2rem; - padding-bottom: 5.8rem; + display: flex; + align-items: center; + justify-content: space-evenly; - &-options { - display: flex; - justify-content: center; + @include mobile { + margin-bottom: 1.6rem; + } - &--desktop { - display: block; + &--is-mt5 { + display: block; + border-top: unset; + padding-top: unset; + } + + &-mobile-hint { + margin: 2.4rem 0; + display: block; + } + + &-heading { + @include typeface(--title-center-bold-black, none); + color: var(--text-general); + line-height: 1.5; + margin-bottom: 2.4rem; + @include desktop { + margin-left: 0; + text-align: center; + } + } + + &-links { + $parent: &; + + &--is-mt5 { + display: flex; align-items: baseline; - flex-flow: column nowrap; + justify-content: space-between; - &-links { - display: flex; - flex-direction: column; + #{$parent}--desktop { + margin-right: 6.4rem; } - &-row { - display: flex; - align-items: baseline; - justify-content: center; - margin-bottom: 3.1rem; - > svg:first-child { - margin-bottom: 0.4rem; - margin-right: 0.8rem; - } - a > svg { - margin-top: 0.8rem; - margin-right: 0.8rem; - } + @include mobile { + display: block; } - &-download { - display: grid; - grid-auto-flow: column; - grid-gap: 0.8rem; - justify-content: center; + } - a { - margin-top: 0.4rem; - } + &--desktop { + margin-bottom: 6.4rem; + } + + &-icons { + text-align: center; + margin-bottom: 1.6rem; + + svg { + margin: 0 0.4rem; + display: inline-block; } } - &--mobile { - align-items: center; + + &-download-buttons { display: flex; - flex-flow: column nowrap; - margin-left: 4.7rem; + align-items: center; + justify-content: center; + flex-wrap: wrap; - &-devices { - margin-bottom: 1.6em; - svg:first-child { - margin-right: 0.8em; - } - } - &-link:not(:first-child) { - margin-left: 0.8rem; - } - @include mobile { - margin-left: unset; - margin-right: unset; - &-links { - display: flex; - flex-direction: column; - } + & > a { + display: inline-block; + margin: 0.4rem; } } } - &--heading { - @include typeface(--title-center-bold-black, none); - color: var(--text-general); - line-height: 1.5; - margin-left: 2.1rem; - margin-bottom: 4.2rem; - @include desktop { - margin-left: 0; - text-align: center; + + &-dxtrade-button { + background: $color-black-7; + border-radius: $BORDER_RADIUS; + text-decoration: none; + display: grid; + grid-template-columns: 32px 1fr; + grid-gap: 0.8rem; + width: 12.7rem; + align-items: center; + height: 4rem; + border: 1px solid #a6a6a6; + margin: 0 auto; + + &-text { + display: flex; + flex-direction: column; + padding: 0.4rem 0rem 0.4rem 0.2rem; + } + &-icon { + margin-left: 0.6rem; } } - &--hint { - margin-top: 1.6rem; - } - @include mobile { - margin-bottom: 1.6rem; + + &-qrcode { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid $color-grey-4; + border-radius: $BORDER_RADIUS; + padding: 2.4rem 2.4rem 0.8rem; + margin-left: 10rem; + + &__hint { + @include typeface(--small-center-normal-black, none); + color: $color-black-1; + margin-top: 0.8rem; + width: 160px; + } } } - &__download-center--mt5 { - border-top: unset; - padding-top: unset; - } &__maintenance { @include typeface(--small-center-normal-black, none); display: flex; @@ -649,7 +656,6 @@ &--value { @include typeface(--title-left-bold-black); color: var(--text-profit-success); - padding: 0.8rem; } } diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-deriv-x.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-deriv-x.svg new file mode 100644 index 000000000000..6a836b0dcbea --- /dev/null +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-deriv-x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-derivx-platform.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-derivx-platform.svg new file mode 100644 index 000000000000..6a836b0dcbea --- /dev/null +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-derivx-platform.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop-light.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop-light.svg index e3d5a62f6971..dc103a2f049e 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop-light.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop.svg index 0023bb8dfda4..b91103cf5b9b 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-desktop.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop-light.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop-light.svg index abd311c3e44e..7f9281edb2b3 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop-light.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop.svg index 3ba86fcabe2b..2d532a318234 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-laptop.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone-light.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone-light.svg index 631fb44f843b..6f2d8114e461 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone-light.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone.svg index b72d428f5821..c70d1a43e4c2 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-phone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet-light.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet-light.svg index ae08bff6d901..447e93c1873b 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet-light.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet.svg index 98fb3a2d47ec..336d70ab4b68 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-device-tablet.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial-platform.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial-platform.svg index d6209d1ea863..72d388cff585 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial-platform.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial-platform.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial.svg index d6209d1ea863..72d388cff585 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-financial.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-one-password.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-one-password.svg index 6f70b3ea93c9..58c375f649e3 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-one-password.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-one-password.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic-platform.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic-platform.svg index 61516fb41fdd..e69172eb3e48 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic-platform.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic-platform.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic.svg b/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic.svg index 61516fb41fdd..e69172eb3e48 100644 --- a/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic.svg +++ b/packages/components/src/components/icon/dxtrade/ic-dxtrade-synthetic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index 68e4ea632e5b..848a836dfe0c 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -448,6 +448,8 @@ import './currency/ic-currency-usdc.svg'; import './currency/ic-currency-usdk.svg'; import './currency/ic-currency-ust.svg'; import './currency/ic-currency-virtual.svg'; +import './dxtrade/ic-dxtrade-deriv-x.svg'; +import './dxtrade/ic-dxtrade-derivx-platform.svg'; import './dxtrade/ic-dxtrade-device-desktop-light.svg'; import './dxtrade/ic-dxtrade-device-desktop.svg'; import './dxtrade/ic-dxtrade-device-laptop-light.svg'; diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index ee363a1df0d8..49cf65d39d25 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -461,6 +461,8 @@ export const icons = 'IcCurrencyVirtual', ], 'dxtrade': [ + 'IcDxtradeDerivX', + 'IcDxtradeDerivxPlatform', 'IcDxtradeDeviceDesktopLight', 'IcDxtradeDeviceDesktop', 'IcDxtradeDeviceLaptopLight', diff --git a/packages/core/src/App/Constants/platform-config.js b/packages/core/src/App/Constants/platform-config.js index 6f4c5f71b950..e0bf62f0f84e 100644 --- a/packages/core/src/App/Constants/platform-config.js +++ b/packages/core/src/App/Constants/platform-config.js @@ -28,7 +28,7 @@ const platform_config = [ icon: getPlatformSettings('dxtrade').icon, title: () => getPlatformSettings('dxtrade').name, name: getPlatformSettings('dxtrade').name, - description: () => localize('Trade FX and CFDs on a customisable, easy-to-use trading platform.'), + description: () => localize('Trade CFDs on a customizable, easy-to-use trading platform.'), link_to: routes.dxtrade, }, { diff --git a/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx b/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx index dbd37165f2e3..16ff7b25485e 100644 --- a/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx +++ b/packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx @@ -185,7 +185,10 @@ const AccountSwitcher = props => { }; const openDXTradeDemoAccount = account_type => { - sessionStorage.setItem('open_cfd_account_type', `demo.${CFD_PLATFORMS.DXTRADE}.${account_type}`); + sessionStorage.setItem( + 'open_cfd_account_type', + `demo.${CFD_PLATFORMS.DXTRADE}.${account_type === 'dxtrade' ? 'all' : account_type}` + ); redirectToDXTradeDemo(); }; @@ -220,7 +223,17 @@ const AccountSwitcher = props => { // * we should map them to landing_company: // mt_financial_company: { financial: {}, financial_stp: {}, swap_free: {} } // mt_gaming_company: { financial: {}, swap_free: {} } - const getRemainingAccounts = (existing_cfd_accounts, platform, is_eu, getIsEligibleForMoreAccounts) => { + const getRemainingAccounts = (existing_cfd_accounts, platform, is_eu, is_demo, getIsEligibleForMoreAccounts) => { + const all_config = getCFDConfig( + 'all', + props.landing_companies?.dxtrade_all_company, + existing_cfd_accounts, + props.mt5_trading_servers, + platform, + is_eu, + props.trading_platform_available_accounts, + getIsEligibleForMoreAccounts + ); const gaming_config = getCFDConfig( 'gaming', platform === CFD_PLATFORMS.MT5 @@ -250,6 +263,11 @@ const AccountSwitcher = props => { if (is_eu) { return [...financial_config]; } + + // TODO: change this condition before real release + if (is_demo && platform === CFD_PLATFORMS.DXTRADE) { + return [...all_config]; + } return [...gaming_config, ...financial_config]; }; @@ -272,15 +290,23 @@ const AccountSwitcher = props => { }; const getDemoDXTrade = () => { - return getSortedCFDList(props.dxtrade_accounts_list).filter(isDemo); + return getSortedCFDList(props.dxtrade_accounts_list).filter( + account => isDemo(account) && account.enabled === 1 + ); }; const getRemainingDemoMT5 = () => { - return getRemainingAccounts(getDemoMT5(), CFD_PLATFORMS.MT5, props.is_eu, props.isEligibleForMoreDemoMt5Svg); + return getRemainingAccounts( + getDemoMT5(), + CFD_PLATFORMS.MT5, + props.is_eu, + true, + props.isEligibleForMoreDemoMt5Svg + ); }; const getRemainingDemoDXTrade = () => { - return getRemainingAccounts(getDemoDXTrade(), CFD_PLATFORMS.DXTRADE, props.is_eu); + return getRemainingAccounts(getDemoDXTrade(), CFD_PLATFORMS.DXTRADE, props.is_eu, true); }; const getRealMT5 = () => { @@ -288,7 +314,9 @@ const AccountSwitcher = props => { }; const getRealDXTrade = () => { - return getSortedCFDList(props.dxtrade_accounts_list).filter(account => !isDemo(account)); + return getSortedCFDList(props.dxtrade_accounts_list).filter( + account => !isDemo(account) && account.enabled === 1 + ); }; const findServerForAccount = acc => { @@ -299,7 +327,13 @@ const AccountSwitcher = props => { }; const getRemainingRealMT5 = () => { - return getRemainingAccounts(getRealMT5(), CFD_PLATFORMS.MT5, props.is_eu, props.isEligibleForMoreRealMt5); + return getRemainingAccounts( + getRealMT5(), + CFD_PLATFORMS.MT5, + props.is_eu, + false, + props.isEligibleForMoreRealMt5 + ); }; const getRemainingRealDXTrade = () => { diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 1b7dc9cf472b..659e2b7241dd 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -781,9 +781,11 @@ export default class ClientStore extends BaseStore { if (!this.website_status?.clients_country || !landing_companies || !Object.keys(landing_companies).length) return true; + // TODO: Remove two first conditions after real released return ( 'dxtrade_financial_company' in landing_companies || 'dxtrade_gaming_company' in landing_companies || + 'dxtrade_all_company' in landing_companies || (!this.is_logged_in && !this.is_eu && !this.is_eu_country) ); }; diff --git a/packages/reports/package.json b/packages/reports/package.json index c6f02d607fa8..f4fa68a4b605 100644 --- a/packages/reports/package.json +++ b/packages/reports/package.json @@ -5,122 +5,122 @@ "main": "dist/reports/js/reports.js", "private": true, "scripts": { - "start": "npm run test && npm run serve", - "serve": "echo \"Serving...\" && webpack --progress --watch --config \"./build/webpack.config.js\"", - "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1;}; f", - "build:travis": "echo \"No build:travis specified\"", - "test": "echo \"No mocha:test specified\"", - "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", - "test:mocha": "mochapack -r babel-polyfill -r jsdom-global/register -r mock-local-storage --webpack-config \"./build/webpack.config-test.js\" \"src/**/__tests__/*.js\" --webpack-env.mocha_only --require ignore-styles", - "deploy": "echo \"No deploy specified\"", - "deploy:clean": "echo \"No deploy:clean specified\"", - "deploy:folder": "echo \"No deploy:folder specified\"", - "deploy:staging": "echo \"No deploy:staging specified\"", - "deploy:production": "echo \"No deploy:production specified\"" + "start": "npm run test && npm run serve", + "serve": "echo \"Serving...\" && webpack --progress --watch --config \"./build/webpack.config.js\"", + "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1;}; f", + "build:travis": "echo \"No build:travis specified\"", + "test": "echo \"No mocha:test specified\"", + "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", + "test:mocha": "mochapack -r babel-polyfill -r jsdom-global/register -r mock-local-storage --webpack-config \"./build/webpack.config-test.js\" \"src/**/__tests__/*.js\" --webpack-env.mocha_only --require ignore-styles", + "deploy": "echo \"No deploy specified\"", + "deploy:clean": "echo \"No deploy:clean specified\"", + "deploy:folder": "echo \"No deploy:folder specified\"", + "deploy:staging": "echo \"No deploy:staging specified\"", + "deploy:production": "echo \"No deploy:production specified\"" }, "engines": { - "node": "^16.16.0" + "node": "^16.16.0" }, "repository": { - "type": "git", - "url": "https://github.com/binary-com/deriv-app.git" + "type": "git", + "url": "https://github.com/binary-com/deriv-app.git" }, "keywords": [ - "deriv" + "deriv" ], "author": "Deriv", "license": "Apache-2.0", "bugs": { - "url": "https://github.com/binary-com/deriv-app/issues" + "url": "https://github.com/binary-com/deriv-app/issues" }, "homepage": "https://github.com/binary-com/deriv-app", "devDependencies": { - "babel-eslint": "^10.1.0", - "babel-loader": "^8.1.0", - "chai": "^4.2.0", - "circular-dependency-plugin": "^5.2.2", - "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^9.0.1", - "css-loader": "^5.0.1", - "css-minimizer-webpack-plugin": "^3.0.1", - "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.14.0", - "eslint-config-airbnb-base": "^14.2.1", - "eslint-config-binary": "^1.0.2", - "eslint-config-prettier": "^7.2.0", - "eslint-plugin-import": "^2.23.4", - "eslint-plugin-prettier": "^3.3.1", - "eslint-plugin-react": "^7.22.0", - "eslint-plugin-react-hooks": "^4.2.0", - "file-loader": "^6.2.0", - "fork-ts-checker-webpack-plugin": "^6.5.0", - "html-loader": "^1.3.2", - "html-webpack-plugin": "^5.0.0-beta.5", - "html-webpack-tags-plugin": "^2.0.17", - "ignore-styles": "^5.0.1", - "jsdom": "^16.2.1", - "jsdom-global": "^2.1.1", - "mini-css-extract-plugin": "^1.3.4", - "mocha": "^7.1.1", - "mochapack": "^2.1.2", - "mock-local-storage": "^1.1.8", - "node-sass": "^7.0.1", - "postcss-loader": "^6.2.1", - "postcss-preset-env": "^7.4.3", - "postcss-scss": "^4.0.3", - "react-svg-loader": "^3.0.3", - "resolve-url-loader": "^3.1.2", - "sass-loader": "^12.6.0", - "sass-resources-loader": "^2.1.1", - "sinon": "^7.3.2", - "stylelint-formatter-pretty": "^2.1.1", - "svgo": "^2.8.0", - "terser-webpack-plugin": "^5.1.1", - "webpack": "^5.46.0", - "webpack-bundle-analyzer": "^4.3.0", - "webpack-cli": "^4.7.2", - "webpack-manifest-plugin": "^4.0.2", - "webpack-node-externals": "^2.5.2" + "babel-eslint": "^10.1.0", + "babel-loader": "^8.1.0", + "chai": "^4.2.0", + "circular-dependency-plugin": "^5.2.2", + "clean-webpack-plugin": "^3.0.0", + "copy-webpack-plugin": "^9.0.1", + "css-loader": "^5.0.1", + "css-minimizer-webpack-plugin": "^3.0.1", + "enzyme": "^3.10.0", + "enzyme-adapter-react-16": "^1.14.0", + "eslint-config-airbnb-base": "^14.2.1", + "eslint-config-binary": "^1.0.2", + "eslint-config-prettier": "^7.2.0", + "eslint-plugin-import": "^2.23.4", + "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react-hooks": "^4.2.0", + "file-loader": "^6.2.0", + "fork-ts-checker-webpack-plugin": "^6.5.0", + "html-loader": "^1.3.2", + "html-webpack-plugin": "^5.0.0-beta.5", + "html-webpack-tags-plugin": "^2.0.17", + "ignore-styles": "^5.0.1", + "jsdom": "^16.2.1", + "jsdom-global": "^2.1.1", + "mini-css-extract-plugin": "^1.3.4", + "mocha": "^7.1.1", + "mochapack": "^2.1.2", + "mock-local-storage": "^1.1.8", + "node-sass": "^7.0.1", + "postcss-loader": "^6.2.1", + "postcss-preset-env": "^7.4.3", + "postcss-scss": "^4.0.3", + "react-svg-loader": "^3.0.3", + "resolve-url-loader": "^3.1.2", + "sass-loader": "^12.6.0", + "sass-resources-loader": "^2.1.1", + "sinon": "^7.3.2", + "stylelint-formatter-pretty": "^2.1.1", + "svgo": "^2.8.0", + "terser-webpack-plugin": "^5.1.1", + "webpack": "^5.46.0", + "webpack-bundle-analyzer": "^4.3.0", + "webpack-cli": "^4.7.2", + "webpack-manifest-plugin": "^4.0.2", + "webpack-node-externals": "^2.5.2" }, "dependencies": { - "@deriv/api-types": "1.0.48", - "@deriv/components": "^1.0.0", - "@deriv/deriv-api": "^1.0.8", - "@deriv/shared": "^1.0.0", - "@deriv/translations": "^1.0.0", - "@types/classnames": "^2.2.11", - "@types/react": "^18.0.7", - "@types/react-dom": "^18.0.0", - "@types/react-loadable": "^5.5.6", - "acorn": "^6.1.1", - "babel-polyfill": "^6.26.0", - "canvas-toBlob": "^1.0.0", - "classnames": "^2.2.6", - "crc-32": "^1.2.0", - "extend": "^3.0.2", - "formik": "^2.1.4", - "i18next": "^20.3.2", - "js-cookie": "^2.2.1", - "lodash.debounce": "^4.0.8", - "lodash.throttle": "^4.1.1", - "mobx": "^5.15.7", - "mobx-react": "6.3.1", - "mobx-utils": "^5.5.5", - "moment": "^2.29.2", - "null-loader": "^4.0.1", - "object.fromentries": "^2.0.0", - "promise-polyfill": "^8.1.3", - "prop-types": "^15.7.2", - "react": "^16.14.0", - "react-content-loader": "^4.3.2", - "react-dom": "^16.14.0", - "react-i18next": "^11.11.0", - "react-loadable": "^5.5.0", - "react-pose": "^4.0.10", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", - "react-transition-group": "4.4.2", - "typescript": "^4.6.3", - "workbox-webpack-plugin": "^6.0.2" + "@deriv/api-types": "^1.0.54", + "@deriv/components": "^1.0.0", + "@deriv/deriv-api": "^1.0.8", + "@deriv/shared": "^1.0.0", + "@deriv/translations": "^1.0.0", + "@types/classnames": "^2.2.11", + "@types/react": "^18.0.7", + "@types/react-dom": "^18.0.0", + "@types/react-loadable": "^5.5.6", + "acorn": "^6.1.1", + "babel-polyfill": "^6.26.0", + "canvas-toBlob": "^1.0.0", + "classnames": "^2.2.6", + "crc-32": "^1.2.0", + "extend": "^3.0.2", + "formik": "^2.1.4", + "i18next": "^20.3.2", + "js-cookie": "^2.2.1", + "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1", + "mobx": "^5.15.7", + "mobx-react": "6.3.1", + "mobx-utils": "^5.5.5", + "moment": "^2.29.2", + "null-loader": "^4.0.1", + "object.fromentries": "^2.0.0", + "promise-polyfill": "^8.1.3", + "prop-types": "^15.7.2", + "react": "^16.14.0", + "react-content-loader": "^4.3.2", + "react-dom": "^16.14.0", + "react-i18next": "^11.11.0", + "react-loadable": "^5.5.0", + "react-pose": "^4.0.10", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", + "react-transition-group": "4.4.2", + "typescript": "^4.6.3", + "workbox-webpack-plugin": "^6.0.2" } - } +} diff --git a/packages/shared/src/utils/cfd/cfd.js b/packages/shared/src/utils/cfd/cfd.js index e3b5c60593de..d848bf2ca267 100644 --- a/packages/shared/src/utils/cfd/cfd.js +++ b/packages/shared/src/utils/cfd/cfd.js @@ -24,6 +24,10 @@ const CFD_text = { // * // sub_account_type financial_stp only happens in "financial" market_type export const getCFDAccountKey = ({ market_type, sub_account_type, platform, shortcode }) => { + if (market_type === 'all') { + return 'dxtrade'; + } + if (market_type === 'gaming' || market_type === 'synthetic') { if (platform === CFD_PLATFORMS.DXTRADE || sub_account_type === 'financial') { switch (shortcode) { diff --git a/packages/trader/package.json b/packages/trader/package.json index cab76bdc9e17..c39f8fc98926 100644 --- a/packages/trader/package.json +++ b/packages/trader/package.json @@ -87,12 +87,12 @@ "webpack-node-externals": "^2.5.2" }, "dependencies": { - "@deriv/api-types": "1.0.48", + "@deriv/api-types": "^1.0.54", "@deriv/components": "^1.0.0", "@deriv/deriv-api": "^1.0.8", "@deriv/deriv-charts": "^0.6.3", - "@deriv/shared": "^1.0.0", "@deriv/reports": "^1.0.0", + "@deriv/shared": "^1.0.0", "@deriv/translations": "^1.0.0", "@types/classnames": "^2.2.11", "@types/react-loadable": "^5.5.6", diff --git a/packages/trader/src/sass/app/modules/mt5/cfd-dashboard.scss b/packages/trader/src/sass/app/modules/mt5/cfd-dashboard.scss index 66e92d6178d8..3b440740ad7e 100644 --- a/packages/trader/src/sass/app/modules/mt5/cfd-dashboard.scss +++ b/packages/trader/src/sass/app/modules/mt5/cfd-dashboard.scss @@ -21,7 +21,7 @@ width: 12.7rem; align-items: center; height: 4rem; - border: 1px solid #a6a6a6; + border: 1px solid $color-grey-4; &-text { display: flex;