diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-button.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-button.spec.tsx index a9026a35dde9..965c320fbab8 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-button.spec.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-button.spec.tsx @@ -229,8 +229,6 @@ describe('', () => { userEvent.click(buttonElement); await waitFor(() => { expect(mock.common.setAppstorePlatform).toHaveBeenCalledWith('dxtrade'); - // expect(mock.modules.cfd.setJurisdictionSelectedShortcode).toHaveBeenCalled(); - // expect(mock.modules.cfd.toggleCFDVerificationModal).toHaveBeenCalledTimes(1); expect(mock.traders_hub.getAccount).toHaveBeenCalled(); }); }); diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-card.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-card.spec.tsx index 5f307b8af2c8..8823c937c6b8 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-card.spec.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-card.spec.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { CFD_PLATFORMS } from '@deriv/shared'; import { StoreProvider, mockStore } from '@deriv/stores'; -// import { Localize } from '@deriv/translations'; import CFDCompareAccountsCard from '../cfd-compare-accounts-card'; jest.mock('../../../Assets/svgs/trading-platform', () => jest.fn(() =>
Mocked Icon
)); diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts.spec.tsx index 861f05c22891..d5990fa6c0a6 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts.spec.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts.spec.tsx @@ -103,7 +103,6 @@ describe('', () => { const navigationElement = screen.getByText(/Trader's hub/i); navigationElement.click(); - // Assert that the history.push function is called with the correct route expect(historyMock.push).toHaveBeenCalledWith(routes.traders_hub); }); }); diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx index 83ed89b1a325..7e3ba00c73c2 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx @@ -26,7 +26,7 @@ const CFDCompareAccountsCard = ({ trading_platforms, is_eu_user, is_demo }: TCom is_demo={is_demo} /> - + {is_eu_user && (
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 4f031a5b0b48..dfdf2c27d37f 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 @@ -1,5 +1,6 @@ import React from 'react'; import { Text, Popover } from '@deriv/components'; +import { isMobile } from '@deriv/shared'; import { localize } from '@deriv/translations'; import TradigPlatformIconProps from '../../Assets/svgs/trading-platform'; import { TCompareAccountsCard } from 'Components/props.types'; @@ -30,7 +31,7 @@ const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: {jurisdiction_shortcode === 'financial_labuan' && ( {
-
+
{all_available_accounts.map(item => ( @@ -101,12 +106,23 @@ const CompareCFDs = observer(() => { + } header_classname='compare-cfd-header-title' is_from_app={!routes.traders_hub} onClickClose={() => history.push(routes.traders_hub)} > -
+
{all_available_accounts.map(item => ( { - const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms)]; +const CFDInstrumentsLabelHighlighted = ({ trading_platforms, is_demo }: TCompareAccountsCard) => { + const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms, is_demo)]; return (
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx index eff5500d3d66..135d8cac28fd 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Text } from '@deriv/components'; import { TInstrumentsIcon } from 'Components/props.types'; import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments'; @@ -12,14 +13,16 @@ const InstrumentsIconWithLabel = ({ icon, text, highlighted, className, is_aster className={className} > - {text} - + {is_asterik && ( * diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts index 8a580022371d..f7ae42150bf3 100644 --- a/packages/cfd/src/Helpers/compare-accounts-config.ts +++ b/packages/cfd/src/Helpers/compare-accounts-config.ts @@ -7,12 +7,15 @@ import { } from '../Components/props.types'; // Map the accounts according to the market type -const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvailableAccount): TInstrumentsIcon[] => { +const getHighlightedIconLabel = ( + trading_platforms: TModifiedTradingPlatformAvailableAccount, + is_demo?: boolean +): TInstrumentsIcon[] => { const market_type = getMarketType(trading_platforms); const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode); // Forex for these: MT5 Financial Vanuatu, MT5 Financial Labuan const forex_label = - jurisdiction_shortcode === 'financial_labuan' || jurisdiction_shortcode === 'financial_vanuatu' + jurisdiction_shortcode === 'financial_labuan' || jurisdiction_shortcode === 'financial_vanuatu' || is_demo ? localize('Forex') : localize('Forex: standard/micro'); @@ -25,7 +28,7 @@ const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvai { icon: 'Stocks', text: localize('Stocks'), highlighted: false }, { icon: 'StockIndices', text: localize('Stock Indices'), highlighted: false }, { icon: 'Commodities', text: localize('Commodities'), highlighted: false }, - { icon: 'Forex', text: localize('Forex: standard/micro'), highlighted: false }, + { icon: 'Forex', text: forex_label, highlighted: false }, { icon: 'Cryptocurrencies', text: localize('Cryptocurrencies'), highlighted: false }, { icon: 'ETF', text: localize('ETF'), highlighted: false }, ]; @@ -33,7 +36,7 @@ const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvai if (trading_platforms.shortcode === 'maltainvest') { return [ { icon: 'Synthetics', text: localize('Synthetics'), highlighted: true, is_asterik: true }, - { icon: 'Forex', text: localize('Forex'), highlighted: true }, + { icon: 'Forex', text: forex_label, highlighted: true }, { icon: 'Stocks', text: localize('Stocks'), highlighted: true }, { icon: 'StockIndices', text: localize('Stock Indices'), highlighted: true }, { icon: 'Commodities', text: localize('Commodities'), highlighted: true }, @@ -60,7 +63,7 @@ const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvai { icon: 'Stocks', text: localize('Stocks'), highlighted: true }, { icon: 'StockIndices', text: localize('Stock Indices'), highlighted: true }, { icon: 'Commodities', text: localize('Commodities'), highlighted: true }, - { icon: 'Forex', text: localize('Forex: standard/micro'), highlighted: true }, + { icon: 'Forex', text: forex_label, highlighted: true }, { icon: 'Cryptocurrencies', text: localize('Cryptocurrencies'), highlighted: true }, { icon: 'ETF', text: localize('ETF'), highlighted: true }, ];