diff --git a/src/common/constants.ts b/src/common/constants.ts index 313d40f1b89..c8a7d066e52 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -36,6 +36,9 @@ const getDomainAppID = () => { else return deriv_com_app_id } +export const eu_domains = ['eu', 'staging-eu'] +export const uk_domains = ['uk', 'staging-uk'] + // URL export const domain_full_url = `https://${getDomainUrl()}` export const deriv_app_id = getDomainAppID() diff --git a/src/components/containers/index.js b/src/components/containers/index.js index 1ce044d1180..ef0ecd52911 100644 --- a/src/components/containers/index.js +++ b/src/components/containers/index.js @@ -8,7 +8,7 @@ import CssGrid, { CssGridColumn } from './css-grid' import SEO from './seo' import Show from './show' import Box from './box' -import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK } from './visibility' +import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK, UKEU } from './visibility' export { Container, @@ -26,6 +26,7 @@ export { Mobile, EU, UK, + UKEU, ROW, NonUK, NonEU, diff --git a/src/components/containers/visibility.tsx b/src/components/containers/visibility.tsx index 64cc1a484c9..4c9e9c87906 100644 --- a/src/components/containers/visibility.tsx +++ b/src/components/containers/visibility.tsx @@ -1,8 +1,9 @@ -import React, { ReactElement, useEffect, useState } from 'react' +import React, { ReactElement, useEffect, useState, useContext } from 'react' import styled from 'styled-components' import { size } from 'themes/device' import { useBrowserResize } from 'components/hooks/use-browser-resize' import { DerivStore } from 'store' +import { eu_domains, uk_domains } from 'common/constants' type ResponsiveContainerProps = { children: ReactElement @@ -26,6 +27,7 @@ const DesktopLayer = styled.div` display: none; } ` + const MobileLayer = styled.div` @media (min-width: ${({ breakpoint }) => breakpoint}px) { display: none; @@ -38,11 +40,12 @@ const domainBasedCheck = () => { useEffect(() => { if (window) { - const host_name = window.location.hostname - if (host_name.includes('eu')) { + const subdomain = window.location.hostname.split('.').slice(0, -2).join('.') + + if (eu_domains.includes(subdomain)) { setEuDomain(true) } - if (host_name.includes('uk')) { + if (uk_domains.includes(subdomain)) { setUkDomain(true) } } @@ -65,6 +68,20 @@ const deviceRenderer = (): boolean => { return is_loaded } +export const getCountryRule = () => { + const { is_eu_domain, is_uk_domain } = domainBasedCheck() + const { is_eu_country, is_uk_country } = useContext(DerivStore) + + const is_eu = (is_eu_country || is_eu_domain) && !is_uk_country + const is_uk = is_uk_country || is_uk_domain + const is_non_uk = !is_uk + const is_non_eu = !is_eu + const is_eu_uk = !(!is_eu && !is_uk) + const is_row = !is_eu_uk + + return { is_eu, is_uk, is_non_uk, is_non_eu, is_eu_uk, is_row } +} + export const Desktop = ({ children, breakpoint = DEFAULT_BREAKPOINT, @@ -74,7 +91,7 @@ export const Desktop = ({ const [is_mobile] = useBrowserResize(breakpoint_size) const is_loaded = deviceRenderer() - const desktop_view = is_mobile ? <> :
{children}
+ const desktop_view = is_mobile ? <> : <>{children} return is_loaded ? ( desktop_view @@ -102,47 +119,37 @@ export const Mobile = ({ } export const EU = ({ children }: ResponsiveContainerProps) => { - const { is_eu_domain } = domainBasedCheck() - const { is_eu_country } = React.useContext(DerivStore) - - const is_eu = is_eu_country || is_eu_domain + const { is_eu } = getCountryRule() return is_eu ? <>{children} : null } export const NonEU = ({ children }: ResponsiveContainerProps) => { - const { is_eu_domain } = domainBasedCheck() - const { is_eu_country } = React.useContext(DerivStore) + const { is_non_eu } = getCountryRule() - const is_eu = is_eu_domain || is_eu_country - - return !is_eu ? <>{children} : null + return is_non_eu ? <>{children} : null } export const UK = ({ children }: ResponsiveContainerProps) => { - const { is_uk_domain } = domainBasedCheck() - const { is_uk_country } = React.useContext(DerivStore) - - const is_uk = is_uk_country || is_uk_domain + const { is_uk } = getCountryRule() return is_uk ? <>{children} : null } export const NonUK = ({ children }: ResponsiveContainerProps) => { - const { is_uk_domain } = domainBasedCheck() - const { is_uk_country } = React.useContext(DerivStore) + const { is_non_uk } = getCountryRule() - const is_uk = is_uk_domain || is_uk_country + return is_non_uk ? <>{children} : null +} - return !is_uk ? <>{children} : null +export const UKEU = ({ children }: ResponsiveContainerProps) => { + const { is_eu_uk } = getCountryRule() + + return is_eu_uk ? <>{children} : null } export const ROW = ({ children }: ResponsiveContainerProps) => { - const { is_uk_domain, is_eu_domain } = domainBasedCheck() - const { is_uk_country, is_eu_country } = React.useContext(DerivStore) - - const is_uk = is_uk_country || is_uk_domain - const is_eu = is_eu_domain || is_eu_country + const { is_row } = getCountryRule() - return !is_eu && !is_uk ? <>{children} : null + return is_row ? <>{children} : null } diff --git a/src/components/custom/other-platforms.js b/src/components/custom/other-platforms.js index 6d70823ebb7..6fc3f4f084a 100644 --- a/src/components/custom/other-platforms.js +++ b/src/components/custom/other-platforms.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled, { css } from 'styled-components' -import { SectionContainer, Flex, FlexGridContainer, EU, NonEU } from 'components/containers' +import { SectionContainer, Flex, FlexGridContainer, EU, NonEU, ROW } from 'components/containers' import { Text, Card, @@ -12,6 +12,7 @@ import { Divider, } from 'components/elements' import { localize, LocalizedLink, Localize } from 'components/localization' +import { getCountryRule } from 'components/containers/visibility' import { binary_bot_url } from 'common/constants' import device from 'themes/device' // icons @@ -286,7 +287,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} to="/trade-types/cfds/" /> - + } @@ -297,7 +298,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} to="/trade-types/options/" /> - + } @@ -324,7 +325,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'} /> - + <> { otherLinkProps={{ rel: 'noopener noreferrer' }} /> - + @@ -365,7 +366,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} to="/dtrader/" /> - + <> { otherLinkProps={{ rel: 'noopener noreferrer' }} /> - + ) @@ -413,62 +414,68 @@ NavPlatform.propTypes = { onClick: PropTypes.func, } -export const NavMarket = ({ onClick, is_ppc }) => ( - - } - content={ - - } - title={} - onClick={onClick} - to="/markets/forex/" - /> - {!is_ppc && ( +export const NavMarket = ({ onClick, is_ppc }) => { + const { is_not_uk } = getCountryRule() + + return ( + } + aria_label="Forex" + icon={() => } content={ - + } - title={} + title={} onClick={onClick} - to="/markets/synthetic/" + to="/markets/forex/" /> - )} - } - content={ - - } - title={} - onClick={onClick} - to="/markets/stock/" - /> - } - content={ - - } - title={} - onClick={onClick} - to="/markets/cryptocurrencies/" - /> - } - content={ - - } - title={} - onClick={onClick} - to="/markets/commodities/" - /> - -) + {!is_ppc && is_not_uk && ( + } + content={ + + } + title={} + onClick={onClick} + to="/markets/synthetic/" + /> + )} + } + content={ + + } + title={} + onClick={onClick} + to="/markets/stock/" + /> + {is_not_uk && ( + } + content={ + + } + title={} + onClick={onClick} + to="/markets/cryptocurrencies/" + /> + )} + } + content={ + + } + title={} + onClick={onClick} + to="/markets/commodities/" + /> + + ) +} NavMarket.propTypes = { is_ppc: PropTypes.bool, diff --git a/src/components/elements/carousel/carousel.js b/src/components/elements/carousel/carousel.js index 981047d9d44..ee7478f4903 100644 --- a/src/components/elements/carousel/carousel.js +++ b/src/components/elements/carousel/carousel.js @@ -140,7 +140,6 @@ export const Carousel = ({ chevron_style || {} const is_arrow = prevBtnEnabled || nextBtnEnabled const { nav_color, bottom_offset, height } = navigation_style || {} - return (
diff --git a/src/components/elements/off-canvas-menu.js b/src/components/elements/off-canvas-menu.js index b1a423c2627..a337ddc65a0 100644 --- a/src/components/elements/off-canvas-menu.js +++ b/src/components/elements/off-canvas-menu.js @@ -3,6 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import { useOutsideClick } from 'components/hooks/use-outside-click' import { Flex, NonEU } from 'components/containers' +import { DerivStore } from 'store' import { LocalizedLink, localize, Localize } from 'components/localization' import { Accordion, AccordionItem, NavCard, Text, Divider } from 'components/elements' import { deriv_status_page_url, binary_bot_url } from 'common/constants' @@ -123,6 +124,7 @@ const content_style = { } export const OffCanvasMenuWrapper = (props) => { + const { is_uk_country } = React.useContext(DerivStore) const canvas = useRef() const handleArrowClick = () => { @@ -319,7 +321,7 @@ export const OffCanvasMenuWrapper = (props) => { to="/markets/forex/" /> - {!props.is_ppc && ( + {!props.is_ppc && !is_uk_country && ( { to="/markets/stock/" /> - - ( - - )} - content={localize( - 'Trade with leverage on the price movement of popular crypto-fiat pairs.', - )} - title={localize('Cryptocurrencies')} - onClick={handleArrowClick} - to="/markets/cryptocurrencies/" - /> - + {!is_uk_country && ( + + ( + + )} + content={localize( + 'Trade with leverage on the price movement of popular crypto-fiat pairs.', + )} + title={localize('Cryptocurrencies')} + onClick={handleArrowClick} + to="/markets/cryptocurrencies/" + /> + + )} { @@ -103,11 +103,13 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => { {localize('Forex')} {!is_ppc && ( - - - {localize('Synthetic indices')} - - + + + + {localize('Synthetic indices')} + + + )} {localize('Stocks & indices')} @@ -115,11 +117,13 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => { {localize('Commodities')} - - - {localize('Cryptocurrencies')} - - + + + + {localize('Cryptocurrencies')} + + + diff --git a/src/images/common/about/about_us_logo.png b/src/images/common/about/about_us_logo.png index 6356e685aae..dcf309e8e19 100644 Binary files a/src/images/common/about/about_us_logo.png and b/src/images/common/about/about_us_logo.png differ diff --git a/src/images/common/ebooks/crypto-hero-es.png b/src/images/common/ebooks/crypto-hero-es.png index 679d6b2c18c..a096da5388e 100644 Binary files a/src/images/common/ebooks/crypto-hero-es.png and b/src/images/common/ebooks/crypto-hero-es.png differ diff --git a/src/images/common/ebooks/crypto-hero-fr.png b/src/images/common/ebooks/crypto-hero-fr.png index e52ad1a0608..e0bab74c98e 100644 Binary files a/src/images/common/ebooks/crypto-hero-fr.png and b/src/images/common/ebooks/crypto-hero-fr.png differ diff --git a/src/images/common/ebooks/crypto-hero-pt.png b/src/images/common/ebooks/crypto-hero-pt.png index d052c807342..941bd892f15 100644 Binary files a/src/images/common/ebooks/crypto-hero-pt.png and b/src/images/common/ebooks/crypto-hero-pt.png differ diff --git a/src/images/common/ebooks/crypto-inside-es.png b/src/images/common/ebooks/crypto-inside-es.png index 368430e2af5..8143e922e6a 100644 Binary files a/src/images/common/ebooks/crypto-inside-es.png and b/src/images/common/ebooks/crypto-inside-es.png differ diff --git a/src/images/common/ebooks/crypto-inside-fr.png b/src/images/common/ebooks/crypto-inside-fr.png index 19b0346e7de..2b7af448c5b 100644 Binary files a/src/images/common/ebooks/crypto-inside-fr.png and b/src/images/common/ebooks/crypto-inside-fr.png differ diff --git a/src/images/common/ebooks/crypto-inside-pt.png b/src/images/common/ebooks/crypto-inside-pt.png index bcc9a5de202..c459f5fff82 100644 Binary files a/src/images/common/ebooks/crypto-inside-pt.png and b/src/images/common/ebooks/crypto-inside-pt.png differ diff --git a/src/images/common/home/dbot_trade_home.png b/src/images/common/home/dbot_trade_home.png index e5eaa260dc5..72cb4962666 100644 Binary files a/src/images/common/home/dbot_trade_home.png and b/src/images/common/home/dbot_trade_home.png differ diff --git a/src/images/common/home/dmt5_trade_home.png b/src/images/common/home/dmt5_trade_home.png index dd7f89d24df..d8b3d6e372f 100644 Binary files a/src/images/common/home/dmt5_trade_home.png and b/src/images/common/home/dmt5_trade_home.png differ diff --git a/src/images/common/home/dtrader_trade_home.png b/src/images/common/home/dtrader_trade_home.png index dc5866fe8a8..8b2c572a537 100644 Binary files a/src/images/common/home/dtrader_trade_home.png and b/src/images/common/home/dtrader_trade_home.png differ diff --git a/src/images/common/home/hero_bg.png b/src/images/common/home/hero_bg.png index cbb9d16b7b9..4f37d197aec 100644 Binary files a/src/images/common/home/hero_bg.png and b/src/images/common/home/hero_bg.png differ diff --git a/src/images/common/home/hero_platform1.png b/src/images/common/home/hero_platform1.png index 6e19e948c5a..431ce1444e1 100644 Binary files a/src/images/common/home/hero_platform1.png and b/src/images/common/home/hero_platform1.png differ diff --git a/src/images/common/home/hero_platform2.png b/src/images/common/home/hero_platform2.png index 3d1be54ab68..8290ea5714c 100644 Binary files a/src/images/common/home/hero_platform2.png and b/src/images/common/home/hero_platform2.png differ diff --git a/src/images/common/home/hero_platform3.png b/src/images/common/home/hero_platform3.png index 75aadbaef47..971e200c15b 100644 Binary files a/src/images/common/home/hero_platform3.png and b/src/images/common/home/hero_platform3.png differ diff --git a/src/images/common/home/hero_platform4.png b/src/images/common/home/hero_platform4.png index 28114ea3c52..c0d36a664f0 100644 Binary files a/src/images/common/home/hero_platform4.png and b/src/images/common/home/hero_platform4.png differ diff --git a/src/images/common/home/market_commodities.png b/src/images/common/home/market_commodities.png index 1fb76130c2d..0bc1a819ee0 100644 Binary files a/src/images/common/home/market_commodities.png and b/src/images/common/home/market_commodities.png differ diff --git a/src/images/common/home/market_crypto.png b/src/images/common/home/market_crypto.png index 6e628ff862a..166944c748b 100644 Binary files a/src/images/common/home/market_crypto.png and b/src/images/common/home/market_crypto.png differ diff --git a/src/images/common/home/market_forex.png b/src/images/common/home/market_forex.png index facabccc118..46204fd0347 100644 Binary files a/src/images/common/home/market_forex.png and b/src/images/common/home/market_forex.png differ diff --git a/src/images/common/home/market_stocks_indices.png b/src/images/common/home/market_stocks_indices.png index 366554478e5..af6f6832ff0 100644 Binary files a/src/images/common/home/market_stocks_indices.png and b/src/images/common/home/market_stocks_indices.png differ diff --git a/src/images/common/home/market_synthetic_indices.png b/src/images/common/home/market_synthetic_indices.png index 88d73374e6e..f377ff90409 100644 Binary files a/src/images/common/home/market_synthetic_indices.png and b/src/images/common/home/market_synthetic_indices.png differ diff --git a/src/images/common/home/platforms_api.png b/src/images/common/home/platforms_api.png index 8abe9436e18..ca982edf7c0 100644 Binary files a/src/images/common/home/platforms_api.png and b/src/images/common/home/platforms_api.png differ diff --git a/src/images/common/home/platforms_api_m.png b/src/images/common/home/platforms_api_m.png index eeaa14599cf..755f838da0e 100644 Binary files a/src/images/common/home/platforms_api_m.png and b/src/images/common/home/platforms_api_m.png differ diff --git a/src/images/common/home/platforms_binary_bot.png b/src/images/common/home/platforms_binary_bot.png index e8517986bc7..3b2b44a8891 100644 Binary files a/src/images/common/home/platforms_binary_bot.png and b/src/images/common/home/platforms_binary_bot.png differ diff --git a/src/images/common/home/platforms_binary_bot_m.png b/src/images/common/home/platforms_binary_bot_m.png index 600df8e5608..46163697ec6 100644 Binary files a/src/images/common/home/platforms_binary_bot_m.png and b/src/images/common/home/platforms_binary_bot_m.png differ diff --git a/src/images/common/home/platforms_dbot.png b/src/images/common/home/platforms_dbot.png index e82fe70b9dc..6695a68b779 100644 Binary files a/src/images/common/home/platforms_dbot.png and b/src/images/common/home/platforms_dbot.png differ diff --git a/src/images/common/home/platforms_dbot_m.png b/src/images/common/home/platforms_dbot_m.png index 2300262a186..a7eeedd16e1 100644 Binary files a/src/images/common/home/platforms_dbot_m.png and b/src/images/common/home/platforms_dbot_m.png differ diff --git a/src/images/common/home/platforms_deriv_go.png b/src/images/common/home/platforms_deriv_go.png index 4e11de1104d..6d72923a39f 100644 Binary files a/src/images/common/home/platforms_deriv_go.png and b/src/images/common/home/platforms_deriv_go.png differ diff --git a/src/images/common/home/platforms_deriv_go_m.png b/src/images/common/home/platforms_deriv_go_m.png index 7dfc2079404..fbab65f3383 100644 Binary files a/src/images/common/home/platforms_deriv_go_m.png and b/src/images/common/home/platforms_deriv_go_m.png differ diff --git a/src/images/common/home/platforms_derivx.png b/src/images/common/home/platforms_derivx.png index cc4bb5ebf6d..13791493d66 100644 Binary files a/src/images/common/home/platforms_derivx.png and b/src/images/common/home/platforms_derivx.png differ diff --git a/src/images/common/home/platforms_derivx_m.png b/src/images/common/home/platforms_derivx_m.png index b812af3b2b6..60b968e8192 100644 Binary files a/src/images/common/home/platforms_derivx_m.png and b/src/images/common/home/platforms_derivx_m.png differ diff --git a/src/images/common/home/platforms_dtrader.png b/src/images/common/home/platforms_dtrader.png index 957a4795682..9dd72177410 100644 Binary files a/src/images/common/home/platforms_dtrader.png and b/src/images/common/home/platforms_dtrader.png differ diff --git a/src/images/common/home/platforms_dtrader_m.png b/src/images/common/home/platforms_dtrader_m.png index 26cbe4173d9..6cc498e3fef 100644 Binary files a/src/images/common/home/platforms_dtrader_m.png and b/src/images/common/home/platforms_dtrader_m.png differ diff --git a/src/images/common/home/platforms_mt5.png b/src/images/common/home/platforms_mt5.png index 360278f29c6..a72187bb263 100644 Binary files a/src/images/common/home/platforms_mt5.png and b/src/images/common/home/platforms_mt5.png differ diff --git a/src/images/common/home/platforms_mt5_m.png b/src/images/common/home/platforms_mt5_m.png index a8960576cb8..36c323e3dbf 100644 Binary files a/src/images/common/home/platforms_mt5_m.png and b/src/images/common/home/platforms_mt5_m.png differ diff --git a/src/images/common/home/platforms_smarttrader.png b/src/images/common/home/platforms_smarttrader.png index 1f832f16087..0c246d2b657 100644 Binary files a/src/images/common/home/platforms_smarttrader.png and b/src/images/common/home/platforms_smarttrader.png differ diff --git a/src/images/common/home/platforms_smarttrader_m.png b/src/images/common/home/platforms_smarttrader_m.png index cf9bd792af6..3eb601c5d65 100644 Binary files a/src/images/common/home/platforms_smarttrader_m.png and b/src/images/common/home/platforms_smarttrader_m.png differ diff --git a/src/images/common/home/trade_type_cfds.png b/src/images/common/home/trade_type_cfds.png index 9c7ea416a98..98ce8d9b3a2 100644 Binary files a/src/images/common/home/trade_type_cfds.png and b/src/images/common/home/trade_type_cfds.png differ diff --git a/src/images/common/home/trade_type_digitaloptions.png b/src/images/common/home/trade_type_digitaloptions.png index b67c32fb5fd..140d7cfb077 100644 Binary files a/src/images/common/home/trade_type_digitaloptions.png and b/src/images/common/home/trade_type_digitaloptions.png differ diff --git a/src/images/common/home/trade_type_multipliers.png b/src/images/common/home/trade_type_multipliers.png index e99d90a357e..09d34c478e1 100644 Binary files a/src/images/common/home/trade_type_multipliers.png and b/src/images/common/home/trade_type_multipliers.png differ diff --git a/src/images/common/home/trade_type_spreads.png b/src/images/common/home/trade_type_spreads.png index 5a54bcca016..20dfc20ad10 100644 Binary files a/src/images/common/home/trade_type_spreads.png and b/src/images/common/home/trade_type_spreads.png differ diff --git a/src/images/common/who-we-are/earth-mobile.png b/src/images/common/who-we-are/earth-mobile.png index 23ef67a076a..2bc24ea3fca 100644 Binary files a/src/images/common/who-we-are/earth-mobile.png and b/src/images/common/who-we-are/earth-mobile.png differ diff --git a/src/images/common/who-we-are/earth.png b/src/images/common/who-we-are/earth.png index 92d57fae716..3444b607e5c 100644 Binary files a/src/images/common/who-we-are/earth.png and b/src/images/common/who-we-are/earth.png differ diff --git a/src/images/svg/symbols/ada-usd.svg b/src/images/svg/symbols/ada-usd.svg new file mode 100644 index 00000000000..9a8ca7bbc9c --- /dev/null +++ b/src/images/svg/symbols/ada-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/alg-usd.svg b/src/images/svg/symbols/alg-usd.svg new file mode 100644 index 00000000000..03d49545ac6 --- /dev/null +++ b/src/images/svg/symbols/alg-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/ava-usd.svg b/src/images/svg/symbols/ava-usd.svg new file mode 100644 index 00000000000..d8f2ad14899 --- /dev/null +++ b/src/images/svg/symbols/ava-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/bat-usd.svg b/src/images/svg/symbols/bat-usd.svg new file mode 100644 index 00000000000..234418392ad --- /dev/null +++ b/src/images/svg/symbols/bat-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/bch-usd.svg b/src/images/svg/symbols/bch-usd.svg index 928f961f27a..99e49f7e767 100644 --- a/src/images/svg/symbols/bch-usd.svg +++ b/src/images/svg/symbols/bch-usd.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/bnb-usd.svg b/src/images/svg/symbols/bnb-usd.svg new file mode 100644 index 00000000000..d3e31d87fb2 --- /dev/null +++ b/src/images/svg/symbols/bnb-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/boom-eu-boom-300.svg b/src/images/svg/symbols/boom-eu-boom-300.svg deleted file mode 100644 index 9dade87a486..00000000000 --- a/src/images/svg/symbols/boom-eu-boom-300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/svg/symbols/boom-indices-300.svg b/src/images/svg/symbols/boom-indices-300.svg new file mode 100644 index 00000000000..7abee26d34d --- /dev/null +++ b/src/images/svg/symbols/boom-indices-300.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/brent-crude-oil-uk.svg b/src/images/svg/symbols/brent-crude-oil-uk.svg new file mode 100644 index 00000000000..d96706ade9b --- /dev/null +++ b/src/images/svg/symbols/brent-crude-oil-uk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/btc-eth.svg b/src/images/svg/symbols/btc-eth.svg new file mode 100644 index 00000000000..fcc978ed99c --- /dev/null +++ b/src/images/svg/symbols/btc-eth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/btc-ltc.svg b/src/images/svg/symbols/btc-ltc.svg new file mode 100644 index 00000000000..f358af59209 --- /dev/null +++ b/src/images/svg/symbols/btc-ltc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/btc-usd.svg b/src/images/svg/symbols/btc-usd.svg index 8b2bf3136f1..226b4811502 100644 --- a/src/images/svg/symbols/btc-usd.svg +++ b/src/images/svg/symbols/btc-usd.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/btc-xag.svg b/src/images/svg/symbols/btc-xag.svg new file mode 100644 index 00000000000..a7f33462998 --- /dev/null +++ b/src/images/svg/symbols/btc-xag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/btc-xau.svg b/src/images/svg/symbols/btc-xau.svg new file mode 100644 index 00000000000..e63d74c968b --- /dev/null +++ b/src/images/svg/symbols/btc-xau.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/cad-chf.svg b/src/images/svg/symbols/cad-chf.svg index 233c38ea93f..8cfcc7e675f 100644 --- a/src/images/svg/symbols/cad-chf.svg +++ b/src/images/svg/symbols/cad-chf.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/cad-jpy.svg b/src/images/svg/symbols/cad-jpy.svg index 87a4a3dd977..cd4664e15d2 100644 --- a/src/images/svg/symbols/cad-jpy.svg +++ b/src/images/svg/symbols/cad-jpy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/crash-eu-crash-300.svg b/src/images/svg/symbols/crash-eu-crash-300.svg deleted file mode 100644 index e96ae4c8d08..00000000000 --- a/src/images/svg/symbols/crash-eu-crash-300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/svg/symbols/crash-indices-300.svg b/src/images/svg/symbols/crash-indices-300.svg new file mode 100644 index 00000000000..d3a9ff5a7ce --- /dev/null +++ b/src/images/svg/symbols/crash-indices-300.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/dax-30.svg b/src/images/svg/symbols/dax-30.svg deleted file mode 100644 index f0df22d48ac..00000000000 --- a/src/images/svg/symbols/dax-30.svg +++ /dev/null @@ -1,3 +0,0 @@ - - 30 - \ No newline at end of file diff --git a/src/images/svg/symbols/dog-usd.svg b/src/images/svg/symbols/dog-usd.svg new file mode 100644 index 00000000000..dafbc6d9181 --- /dev/null +++ b/src/images/svg/symbols/dog-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/dot-usd.svg b/src/images/svg/symbols/dot-usd.svg new file mode 100644 index 00000000000..d3160c1aabc --- /dev/null +++ b/src/images/svg/symbols/dot-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/dsh-usd.svg b/src/images/svg/symbols/dsh-usd.svg index 9fbe5761714..9bab492f4de 100644 --- a/src/images/svg/symbols/dsh-usd.svg +++ b/src/images/svg/symbols/dsh-usd.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/eos-usd.svg b/src/images/svg/symbols/eos-usd.svg index 74f168751ee..b5b6377d474 100644 --- a/src/images/svg/symbols/eos-usd.svg +++ b/src/images/svg/symbols/eos-usd.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/etc-usd.svg b/src/images/svg/symbols/etc-usd.svg new file mode 100644 index 00000000000..11b93c5409a --- /dev/null +++ b/src/images/svg/symbols/etc-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/eth-usd.svg b/src/images/svg/symbols/eth-usd.svg new file mode 100644 index 00000000000..600a7b74cf6 --- /dev/null +++ b/src/images/svg/symbols/eth-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/eur-nok.svg b/src/images/svg/symbols/eur-nok.svg new file mode 100644 index 00000000000..ddcf945a8ed --- /dev/null +++ b/src/images/svg/symbols/eur-nok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/eur-pln.svg b/src/images/svg/symbols/eur-pln.svg new file mode 100644 index 00000000000..c7a981d935a --- /dev/null +++ b/src/images/svg/symbols/eur-pln.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/eur-sek.svg b/src/images/svg/symbols/eur-sek.svg new file mode 100644 index 00000000000..134b1b98f97 --- /dev/null +++ b/src/images/svg/symbols/eur-sek.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/fil-usd.svg b/src/images/svg/symbols/fil-usd.svg new file mode 100644 index 00000000000..5d124fae7f6 --- /dev/null +++ b/src/images/svg/symbols/fil-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/gbp-sek.svg b/src/images/svg/symbols/gbp-sek.svg new file mode 100644 index 00000000000..e233bfa773c --- /dev/null +++ b/src/images/svg/symbols/gbp-sek.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/index200s1.svg b/src/images/svg/symbols/index200s1.svg new file mode 100644 index 00000000000..13e0b23435d --- /dev/null +++ b/src/images/svg/symbols/index200s1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/index300s1.svg b/src/images/svg/symbols/index300s1.svg new file mode 100644 index 00000000000..801198f35bd --- /dev/null +++ b/src/images/svg/symbols/index300s1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/iot-usd.svg b/src/images/svg/symbols/iot-usd.svg new file mode 100644 index 00000000000..3ffddcd09d4 --- /dev/null +++ b/src/images/svg/symbols/iot-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/lnk-usd.svg b/src/images/svg/symbols/lnk-usd.svg new file mode 100644 index 00000000000..6f8fb02cac3 --- /dev/null +++ b/src/images/svg/symbols/lnk-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/ltc-usd.svg b/src/images/svg/symbols/ltc-usd.svg new file mode 100644 index 00000000000..0ba912b0f2d --- /dev/null +++ b/src/images/svg/symbols/ltc-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-air-france.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-air-france.svg new file mode 100644 index 00000000000..1306256d4bc --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-air-france.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-airbus.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-airbus.svg new file mode 100644 index 00000000000..ab208d0e6c6 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-airbus.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-amd.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-amd.svg new file mode 100644 index 00000000000..d79f3064716 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-amd.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-continental-ag.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-continental-ag.svg new file mode 100644 index 00000000000..6603aca67dd --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-continental-ag.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-deutsche-lufthansa-ag.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-deutsche-lufthansa-ag.svg new file mode 100644 index 00000000000..f9917f03c1f --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-deutsche-lufthansa-ag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-fox-corp-class-b.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-fox-corp-class-b.svg new file mode 100644 index 00000000000..f8f96a61e99 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-fox-corp-class-b.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-home-depot-inc.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-home-depot-inc.svg new file mode 100644 index 00000000000..3cae9c572ae --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-home-depot-inc.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-hugo-boss-ag-common-stock.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-hugo-boss-ag-common-stock.svg new file mode 100644 index 00000000000..ffa77d5a8bb --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-hugo-boss-ag-common-stock.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-nestle-sa.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-nestle-sa.svg new file mode 100644 index 00000000000..1d9bfd49e00 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-nestle-sa.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-novartis-ag.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-novartis-ag.svg new file mode 100644 index 00000000000..cfc85e78b30 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-novartis-ag.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-pepsi-co-inc.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-pepsi-co-inc.svg new file mode 100644 index 00000000000..3f71452e8ff --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-pepsi-co-inc.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-porsche-automobile-holding-se.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-porsche-automobile-holding-se.svg new file mode 100644 index 00000000000..227a9d3bbbf --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-porsche-automobile-holding-se.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-puma-se.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-puma-se.svg new file mode 100644 index 00000000000..4b155178b9d --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-puma-se.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-sony-group-corp.svg b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-sony-group-corp.svg new file mode 100644 index 00000000000..5879c8536c9 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/american-stocks/stocks-sony-group-corp.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/svg/symbols/markets-stocks-and-indices/european-indices/germany-40.svg b/src/images/svg/symbols/markets-stocks-and-indices/european-indices/germany-40.svg new file mode 100644 index 00000000000..ac828310105 --- /dev/null +++ b/src/images/svg/symbols/markets-stocks-and-indices/european-indices/germany-40.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/svg/symbols/mkr-usd.svg b/src/images/svg/symbols/mkr-usd.svg new file mode 100644 index 00000000000..f06c05e594f --- /dev/null +++ b/src/images/svg/symbols/mkr-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/mtc-usd.svg b/src/images/svg/symbols/mtc-usd.svg new file mode 100644 index 00000000000..916b8f61fde --- /dev/null +++ b/src/images/svg/symbols/mtc-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/neo-usd.svg b/src/images/svg/symbols/neo-usd.svg new file mode 100644 index 00000000000..aa4c2cfb73b --- /dev/null +++ b/src/images/svg/symbols/neo-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/nzd-cad.svg b/src/images/svg/symbols/nzd-cad.svg index c36987b03f1..65e3ba01117 100644 --- a/src/images/svg/symbols/nzd-cad.svg +++ b/src/images/svg/symbols/nzd-cad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/omg-usd.svg b/src/images/svg/symbols/omg-usd.svg new file mode 100644 index 00000000000..5a73897d30c --- /dev/null +++ b/src/images/svg/symbols/omg-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/sol-usd.svg b/src/images/svg/symbols/sol-usd.svg new file mode 100644 index 00000000000..f39c788bde9 --- /dev/null +++ b/src/images/svg/symbols/sol-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/ter-usd.svg b/src/images/svg/symbols/ter-usd.svg new file mode 100644 index 00000000000..614c5cc0b20 --- /dev/null +++ b/src/images/svg/symbols/ter-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/trx-usd.svg b/src/images/svg/symbols/trx-usd.svg new file mode 100644 index 00000000000..226270371dc --- /dev/null +++ b/src/images/svg/symbols/trx-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/uni-usd.svg b/src/images/svg/symbols/uni-usd.svg new file mode 100644 index 00000000000..49d5a1f4efd --- /dev/null +++ b/src/images/svg/symbols/uni-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/usd-cnh.svg b/src/images/svg/symbols/usd-cnh.svg new file mode 100644 index 00000000000..3c6537839a4 --- /dev/null +++ b/src/images/svg/symbols/usd-cnh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/usd-zar.svg b/src/images/svg/symbols/usd-zar.svg index ccc34904bf3..77532a96188 100644 --- a/src/images/svg/symbols/usd-zar.svg +++ b/src/images/svg/symbols/usd-zar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/wti-oil-us.svg b/src/images/svg/symbols/wti-oil-us.svg new file mode 100644 index 00000000000..2e7e9c3924e --- /dev/null +++ b/src/images/svg/symbols/wti-oil-us.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/xlm-usd.svg b/src/images/svg/symbols/xlm-usd.svg new file mode 100644 index 00000000000..aedad8a8ab1 --- /dev/null +++ b/src/images/svg/symbols/xlm-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/xmr-usd.svg b/src/images/svg/symbols/xmr-usd.svg new file mode 100644 index 00000000000..d4498d73568 --- /dev/null +++ b/src/images/svg/symbols/xmr-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/xrp-usd.svg b/src/images/svg/symbols/xrp-usd.svg index 6fe492f9641..784e4d3b6ac 100644 --- a/src/images/svg/symbols/xrp-usd.svg +++ b/src/images/svg/symbols/xrp-usd.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/images/svg/symbols/xtz-usd.svg b/src/images/svg/symbols/xtz-usd.svg new file mode 100644 index 00000000000..5c129938a77 --- /dev/null +++ b/src/images/svg/symbols/xtz-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/svg/symbols/zec-usd.svg b/src/images/svg/symbols/zec-usd.svg new file mode 100644 index 00000000000..f3f1c861a28 --- /dev/null +++ b/src/images/svg/symbols/zec-usd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/home/_markets.js b/src/pages/home/_markets.js index d55a1e8b763..be1763d22f1 100644 --- a/src/pages/home/_markets.js +++ b/src/pages/home/_markets.js @@ -10,6 +10,8 @@ import CommoditiesIcon from 'images/svg/markets/commodities.svg' import ForexIcon from 'images/svg/markets/forex.svg' import StockIcon from 'images/svg/markets/stock.svg' import SyntheticIndicesIcon from 'images/svg/markets/synthetic.svg' +import { NonUK } from 'components/containers/visibility' + // Images const StyledSection = styled(SectionContainer)` box-shadow: inset 0 1px 0 0 var(--color-grey-8); @@ -115,25 +117,27 @@ const Markets = ({ is_ppc }) => (
{!is_ppc && ( - - -
-
- {localize('Synthetic indices')} -
- - {localize( - 'Enjoy synthetic markets that emulate the excitement of real-world markets without unpredictable real-world disruptions.', - )} - - , - ]} - /> -
-
+ + + +
+
+ {localize('Synthetic indices')} +
+ + {localize( + 'Enjoy synthetic markets that emulate the excitement of real-world markets without unpredictable real-world disruptions.', + )} + + , + ]} + /> +
+
+
)} diff --git a/src/pages/markets/components/markets/_commodities.js b/src/pages/markets/components/markets/_commodities.js index 296ac39dbc9..74726622710 100644 --- a/src/pages/markets/components/markets/_commodities.js +++ b/src/pages/markets/components/markets/_commodities.js @@ -9,10 +9,13 @@ import { commodities_options } from '../../static/content/_digital-options' import CFDs from '../sub-markets/_cfds' import DigitalOptions from '../sub-markets/_digital-options' import { Localize, localize } from 'components/localization' +import { getCountryRule } from 'components/containers/visibility' + const SimpleSteps = Loadable(() => import('components/custom/_simple-steps')) const OtherMarkets = Loadable(() => import('../sections/_other-markets.js')) const Commodities = ({ simple_step_content }) => { + const { is_row } = getCountryRule() simple_step_content[1].text = ( ) @@ -30,11 +33,14 @@ const Commodities = ({ simple_step_content }) => { } + // We need to replace this with ROW but we need to refactor available-trades.js due to ROW producing a truthy value and rendering the component tab title still DigitalOptions={ - + is_row && ( + + ) } name="Commodity" display_title={} diff --git a/src/pages/markets/components/markets/_cryptocurrencies.js b/src/pages/markets/components/markets/_cryptocurrencies.js index 3f3a47f8612..133a373151b 100644 --- a/src/pages/markets/components/markets/_cryptocurrencies.js +++ b/src/pages/markets/components/markets/_cryptocurrencies.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import Loadable from '@loadable/component' +import { navigate } from 'gatsby' import { WhyTrade } from '../sections/_why-trade' import AvailableTrades from '../helper/_available-trades.js' import { crypto_cfds } from '../../static/content/_cfds' @@ -13,13 +14,14 @@ import CryptoPairs from 'images/svg/markets/crypto-pairs.svg' import ZeroCommission from 'images/svg/markets/zero-commission.svg' import Leverage from 'images/svg/markets/leverage.svg' import { DerivStore } from 'store' +import { NonUK } from 'components/containers/visibility' //Lazy-load const SimpleSteps = Loadable(() => import('components/custom/_simple-steps')) const OtherMarkets = Loadable(() => import('../sections/_other-markets.js')) const Cryptocurrencies = ({ simple_step_content }) => { - const { is_eu_country } = React.useContext(DerivStore) + const { is_eu_country, is_uk_country } = React.useContext(DerivStore) const crypto_content = [ { src: Leverage, @@ -43,8 +45,12 @@ const Cryptocurrencies = ({ simple_step_content }) => { }, ] + if (is_uk_country) { + navigate('/404/') + } + return ( - <> + } text={ @@ -71,7 +77,7 @@ const Cryptocurrencies = ({ simple_step_content }) => { sign_up /> - + ) } diff --git a/src/pages/markets/components/markets/_forex.js b/src/pages/markets/components/markets/_forex.js index 3507db6f9ef..4a50fc6fcb2 100644 --- a/src/pages/markets/components/markets/_forex.js +++ b/src/pages/markets/components/markets/_forex.js @@ -4,20 +4,22 @@ import Loadable from '@loadable/component' import { WhyTrade } from '../sections/_why-trade' import AvailableTrades from '../helper/_available-trades.js' import { forex_content, forex_content_eu } from '../../static/content/_forex' -import { forex_cfds } from '../../static/content/_cfds' -import { forex_multiplier } from '../../static/content/_multipliers' +import { forex_cfds, forex_cfds_eu_uk } from '../../static/content/_cfds' +import { forex_multiplier, forex_multiplier_eu } from '../../static/content/_multipliers' import { forex_options } from '../../static/content/_digital-options' import CFDs from '../sub-markets/_cfds' import Multipliers from '../sub-markets/_multipliers' import DigitalOptions from '../sub-markets/_digital-options' import { Localize, localize } from 'components/localization' -import { DerivStore } from 'store' +import { UKEU, ROW } from 'components/containers' +import { getCountryRule } from 'components/containers/visibility' + //Lazy-load const SimpleSteps = Loadable(() => import('components/custom/_simple-steps')) const OtherMarkets = Loadable(() => import('../sections/_other-markets.js')) const Forex = ({ simple_step_content }) => { - const { is_eu_country } = React.useContext(DerivStore) + const { is_row, is_eu } = getCountryRule() return ( <> { } > - {(!is_eu_country ? forex_content : forex_content_eu).map((content, index) => ( + {(is_eu ? forex_content_eu : forex_content).map((content, index) => (
} /> ))} } + CFDs={ + <> + + + + + + + + } DigitalOptions={ - + is_row && ( + + ) + } + Multipliers={ + } - Multipliers={} name="Forex" display_title={} /> diff --git a/src/pages/markets/components/markets/_stock-indices.js b/src/pages/markets/components/markets/_stock-indices.js index f44224bea7a..7e0b2d59d07 100644 --- a/src/pages/markets/components/markets/_stock-indices.js +++ b/src/pages/markets/components/markets/_stock-indices.js @@ -9,10 +9,14 @@ import { stock_options } from '../../static/content/_digital-options' import CFDs from '../sub-markets/_cfds' import DigitalOptions from '../sub-markets/_digital-options' import { localize, Localize } from 'components/localization' +import { getCountryRule } from 'components/containers/visibility' + const SimpleSteps = Loadable(() => import('components/custom/_simple-steps')) const OtherMarkets = Loadable(() => import('../sections/_other-markets.js')) const StockIndices = ({ simple_step_content }) => { + const { is_row } = getCountryRule() + simple_step_content[1].text = localize( 'Open a real account, make a deposit, and start trading stocks, indices and other markets.', ) @@ -31,10 +35,12 @@ const StockIndices = ({ simple_step_content }) => { } DigitalOptions={ - + is_row && ( + + ) } name="Stocks & indices" display_title={ diff --git a/src/pages/markets/components/markets/_synthetic-indices.js b/src/pages/markets/components/markets/_synthetic-indices.js index ed0d9cfafc8..0579e898fa6 100644 --- a/src/pages/markets/components/markets/_synthetic-indices.js +++ b/src/pages/markets/components/markets/_synthetic-indices.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import Loadable from '@loadable/component' +import { navigate } from 'gatsby' import { WhyTrade } from '../sections/_why-trade' import AvailableTrades from '../helper/_available-trades' import synthetic_content from '../../static/content/_synthetic' @@ -13,10 +14,14 @@ import DigitalOptions from '../sub-markets/_digital-options' import { Localize, localize } from 'components/localization' const SimpleSteps = Loadable(() => import('components/custom/_simple-steps')) const OtherMarkets = Loadable(() => import('../sections/_other-markets.js')) -import { DerivStore } from 'store' +import { getCountryRule } from 'components/containers/visibility' const StockIndices = ({ simple_step_content }) => { - const { is_eu_country } = React.useContext(DerivStore) + const { is_eu, is_not_eu, is_uk } = getCountryRule() + + if (is_uk) { + navigate('/404/') + } return (
@@ -34,18 +39,18 @@ const StockIndices = ({ simple_step_content }) => { ))} } + CFDs={} DigitalOptions={ - + is_not_eu && ( + + ) } Multipliers={ } name="Synthetic indices" diff --git a/src/pages/markets/components/sections/_hero.js b/src/pages/markets/components/sections/_hero.js index 484861eb449..0f3ffafa746 100644 --- a/src/pages/markets/components/sections/_hero.js +++ b/src/pages/markets/components/sections/_hero.js @@ -6,6 +6,7 @@ import { Container } from 'components/containers' import { Header } from 'components/elements' import { useLazyVideo } from 'components/hooks/use-lazy-video' import { localize } from 'components/localization' +import { DerivStore } from 'store' import device from 'themes/device' const BackgroundWrapper = styled.div` @@ -66,6 +67,8 @@ const MarketSubHeader = styled(Header)` } ` export const Hero = () => { + const { is_uk_country } = React.useContext(DerivStore) + useLazyVideo() return ( @@ -88,9 +91,13 @@ export const Hero = () => { align="center" mt="1.6rem" > - {localize( - 'Learn about the markets that you can trade online with Deriv, including forex, commodities, synthetic indices, stocks, stock indices, and cryptocurrencies.', - )} + {!is_uk_country + ? localize( + 'Learn about the markets that you can trade online with Deriv, including forex, commodities, synthetic indices, stocks, stock indices, and cryptocurrencies.', + ) + : localize( + 'Learn about the markets that you can trade online with Deriv, including forex, commodities, stocks, and stock indices.', + )} diff --git a/src/pages/markets/components/sections/_nav-tab.js b/src/pages/markets/components/sections/_nav-tab.js index f0851e6ef93..fb93a59e172 100644 --- a/src/pages/markets/components/sections/_nav-tab.js +++ b/src/pages/markets/components/sections/_nav-tab.js @@ -4,6 +4,7 @@ import styled, { css } from 'styled-components' import { Text } from 'components/elements' import { Flex } from 'components/containers' import { Localize, LocalizedLink } from 'components/localization' +import { DerivStore } from 'store' import device from 'themes/device' const TabsContainer = styled(Flex)` @@ -80,7 +81,7 @@ const StyledLink = styled(LocalizedLink)` } ` -const tabList = [ +const tab_list = [ { title: , tab_name: 'forex', @@ -108,7 +109,27 @@ const tabList = [ }, ] +const tab_list_uk = [ + { + title: , + tab_name: 'forex', + route_to: '/markets/forex/', + }, + { + title: , + tab_name: 'stock', + route_to: '/markets/stock/', + }, + { + title: , + tab_name: 'commodities', + route_to: '/markets/commodities/', + }, +] + const NavTab = ({ route_from, route_offset }) => { + const { is_uk_country } = React.useContext(DerivStore) + const ref = useRef(null) useEffect(() => { @@ -119,7 +140,7 @@ const NavTab = ({ route_from, route_offset }) => { - {tabList.map((item, index) => { + {(is_uk_country ? tab_list_uk : tab_list).map((item, index) => { return ( @@ -128,7 +149,6 @@ const NavTab = ({ route_from, route_offset }) => { ) })} - diff --git a/src/pages/markets/components/sections/_other-markets.js b/src/pages/markets/components/sections/_other-markets.js index 83453f82d31..de285659f51 100644 --- a/src/pages/markets/components/sections/_other-markets.js +++ b/src/pages/markets/components/sections/_other-markets.js @@ -13,8 +13,9 @@ import Forex from 'images/svg/markets/forex.svg' import StockIndices from 'images/svg/markets/stock.svg' import SyntheticIndices from 'images/svg/markets/synthetic.svg' import device from 'themes/device' +import { DerivStore } from 'store' -const markets_type = { +const markets_type_non_uk = { forex: { // eslint-disable-next-line react/display-name icon: () => , @@ -45,7 +46,6 @@ const markets_type = { to: '/markets/stock/', id: 'marketstockothermarkets', }, - commodities: { // eslint-disable-next-line react/display-name icon: () => , @@ -56,7 +56,6 @@ const markets_type = { to: '/markets/commodities/', id: 'marketcommoditiesothermarket', }, - cryptocurrencies: { // eslint-disable-next-line react/display-name icon: () => , @@ -68,6 +67,39 @@ const markets_type = { id: 'marketcryptocurrenciesothermarket', }, } + +const markets_type_uk = { + forex: { + // eslint-disable-next-line react/display-name + icon: () => , + title: , + content: ( + + ), + to: '/markets/forex/', + id: 'marketforexothermarkets', + }, + stock_indices: { + // eslint-disable-next-line react/display-name + icon: () => , + title: , + content: ( + + ), + to: '/markets/stock/', + id: 'marketstockothermarkets', + }, + commodities: { + // eslint-disable-next-line react/display-name + icon: () => , + title: , + content: ( + + ), + to: '/markets/commodities/', + id: 'marketcommoditiesothermarket', + }, +} const LearnMore = styled(LocalizedLink)` opacity: ${(props) => (props.visibility === 'true' ? '1' : '0')}; width: 142px; @@ -127,6 +159,7 @@ const StyledFlex = styled(Flex)` background-color: var(--color-white); top: 0; min-height: 29.6rem; + margin-left: 2rem; ${LearnMore} { img { @@ -137,6 +170,8 @@ const StyledFlex = styled(Flex)` } ` const Card = ({ name }) => { + const { is_uk_country } = React.useContext(DerivStore) + const markets_type = is_uk_country ? markets_type_uk : markets_type_non_uk const [button_visibility, setButtonVisibility] = React.useState('false') const Icon = markets_type[name].icon @@ -167,6 +202,8 @@ const Card = ({ name }) => { ) } const MobileCard = ({ name }) => { + const { is_uk_country } = React.useContext(DerivStore) + const markets_type = is_uk_country ? markets_type_uk : markets_type_non_uk const Icon = markets_type[name].icon return ( @@ -217,13 +254,10 @@ const MobileCardContainer = styled(Flex)` } ` const OtherMarkets = ({ except }) => { - const markets = [ - 'forex', - 'Synthetic_Indices', - 'stock_indices', - 'commodities', - 'cryptocurrencies', - ] + const { is_uk_country } = React.useContext(DerivStore) + const markets = !is_uk_country + ? ['forex', 'Synthetic_Indices', 'stock_indices', 'commodities', 'cryptocurrencies'] + : ['forex', 'stock_indices', 'commodities'] return ( @@ -235,7 +269,7 @@ const OtherMarkets = ({ except }) => { diff --git a/src/pages/markets/instruments/_crash-boom-multipliers.js b/src/pages/markets/instruments/_crash-boom-multipliers.js new file mode 100644 index 00000000000..30498398d15 --- /dev/null +++ b/src/pages/markets/instruments/_crash-boom-multipliers.js @@ -0,0 +1,24 @@ +import React from 'react' +import Symbol from '../components/helper/_symbol' +import { crash_boom_multipliers, crash_boom_eu } from './_market-symbols' +import { DerivStore } from 'store' + +const CrashBoomMultipliers = () => { + const { is_eu_country } = React.useContext(DerivStore) + + return ( + <> + <> + {!is_eu_country + ? crash_boom_multipliers.map((symbol, index) => ( + + )) + : crash_boom_eu.map((symbol, index) => ( + + ))} + + + ) +} + +export default CrashBoomMultipliers diff --git a/src/pages/markets/instruments/_metals.js b/src/pages/markets/instruments/_energy-cfds.js similarity index 58% rename from src/pages/markets/instruments/_metals.js rename to src/pages/markets/instruments/_energy-cfds.js index 237b9fbc4d7..e63b33c765a 100644 --- a/src/pages/markets/instruments/_metals.js +++ b/src/pages/markets/instruments/_energy-cfds.js @@ -1,15 +1,15 @@ import React from 'react' import Symbol from '../components/helper/_symbol' -import { metals } from './_market-symbols' +import { energy_cfds } from './_market-symbols' -const Metals = () => { +const EnergyCFDs = () => { return ( <> - {metals.map((symbol, index) => ( + {energy_cfds.map((symbol, index) => ( ))} ) } -export default Metals +export default EnergyCFDs diff --git a/src/pages/markets/instruments/_energy-options.js b/src/pages/markets/instruments/_energy-options.js new file mode 100644 index 00000000000..8438bddd0ef --- /dev/null +++ b/src/pages/markets/instruments/_energy-options.js @@ -0,0 +1,15 @@ +import React from 'react' +import Symbol from '../components/helper/_symbol' +import { energy_options } from './_market-symbols' + +const EnergyOptions = () => { + return ( + <> + {energy_options.map((symbol, index) => ( + + ))} + + ) +} + +export default EnergyOptions diff --git a/src/pages/markets/instruments/_market-symbols.js b/src/pages/markets/instruments/_market-symbols.js index 0e25edd8857..7a047fc2568 100644 --- a/src/pages/markets/instruments/_market-symbols.js +++ b/src/pages/markets/instruments/_market-symbols.js @@ -76,20 +76,95 @@ export const continuous_indices = [ }, ] -export const volatility_indices = continuous_indices +export const volatility_indices = [ + { + src: icons.INDEX10S1, + text: , + }, + { + src: icons.INDEX25S1, + text: , + }, + { + src: icons.INDEX50S1, + text: , + }, + { + src: icons.INDEX75S1, + text: , + }, + { + src: icons.INDEX100S1, + text: , + }, + { + src: icons.INDEX200S1, + text: , + }, + { + src: icons.INDEX300S1, + text: , + }, + { + src: icons.INDEX10, + text: , + }, + { + src: icons.INDEX25, + text: , + }, + { + src: icons.INDEX50, + text: , + }, + { + src: icons.INDEX75, + text: , + }, + { + src: icons.INDEX100, + text: , + }, +] export const volatility_indices_eu = [ { - src: icons.VINDEXIC200, + src: icons.INDEX200S1, text: , }, { - src: icons.VINDEXIC300, + src: icons.INDEX300S1, text: , }, ] export const crash_boom = [ + { + src: icons.BOOM1000, + text: , + }, + { + src: icons.BOOM500, + text: , + }, + { + src: icons.BOOM300, + text: , + }, + { + src: icons.CRASH1000, + text: , + }, + { + src: icons.CRASH500, + text: , + }, + { + src: icons.CRASH300, + text: , + }, +] +export const crash_boom_multipliers = [ { src: icons.BOOM1000, text: , @@ -110,12 +185,12 @@ export const crash_boom = [ export const crash_boom_eu = [ { - src: icons.VCRASHIC300, - text: , + src: icons.BOOM300, + text: , }, { - src: icons.VBOOMIC300, - text: , + src: icons.CRASH300, + text: , }, ] @@ -144,8 +219,8 @@ export const europe = [ text: , }, { - src: icons.STOCKSGERMANY30, - text: , + src: icons.STOCKSGERMANY40, + text: , }, { src: icons.STOCKSSWISS20, @@ -178,10 +253,6 @@ export const exotic_pairs = [ src: icons.EURSGD, text: , }, - { - src: icons.EURTRY, - text: , - }, { src: icons.EURZAR, text: , @@ -190,10 +261,6 @@ export const exotic_pairs = [ src: icons.GBPSGD, text: , }, - { - src: icons.GBPTRY, - text: , - }, { src: icons.HKDJPY, text: , @@ -230,10 +297,6 @@ export const exotic_pairs = [ src: icons.USDTHB, text: , }, - { - src: icons.USDTRY, - text: , - }, ] export const major_pairs = [ @@ -295,7 +358,7 @@ export const major_pairs = [ }, ] -export const metals = [ +export const metals_cfds = [ { src: icons.ALUMINIUMUSD, text: , @@ -342,6 +405,104 @@ export const metals = [ }, ] +export const metals_options = [ + { + src: icons.GOLDUSD, + text: , + }, + { + src: icons.PALLADIUMUSD, + text: , + }, + { + src: icons.PLATINUMUSD, + text: , + }, + { + src: icons.SILVERUSD, + text: , + }, +] + +export const micro_pairs = [ + { + src: icons.AUDCAD, + text: , + }, + { + src: icons.AUDCHF, + text: , + }, + { + src: icons.AUDJPY, + text: , + }, + { + src: icons.AUDNZD, + text: , + }, + { + src: icons.AUDUSD, + text: , + }, + { + src: icons.EURAUD, + text: , + }, + { + src: icons.EURCAD, + text: , + }, + { + src: icons.EURCHF, + text: , + }, + { + src: icons.EURGBP, + text: , + }, + { + src: icons.EURJPY, + text: , + }, + { + src: icons.EURNZD, + text: , + }, + { + src: icons.EURUSD, + text: , + }, + { + src: icons.GBPCHF, + text: , + }, + { + src: icons.GBPJPY, + text: , + }, + { + src: icons.GBPUSD, + text: , + }, + { + src: icons.NZDUSD, + text: , + }, + { + src: icons.USDCAD, + text: , + }, + { + src: icons.USDCHF, + text: , + }, + { + src: icons.USDJPY, + text: , + }, +] + export const range_break = [ { src: icons.RANGEBREAK100, @@ -383,7 +544,7 @@ export const smart_gold_index = [ }, ] -export const minor_pairs = [ +export const minor_pairs_cfds = [ { src: icons.AUDCAD, text: , @@ -396,10 +557,106 @@ export const minor_pairs = [ src: icons.AUDNZD, text: , }, + { + src: icons.CADCHF, + text: , + }, + { + src: icons.CADJPY, + + text: , + }, { src: icons.CHFJPY, text: , }, + { + src: icons.EURNOK, + text: , + }, + { + src: icons.EURNZD, + text: , + }, + { + src: icons.EURPLN, + text: , + }, + { + src: icons.EURSEK, + text: , + }, + { + src: icons.GBPCAD, + text: , + }, + { + src: icons.GBPCHF, + text: , + }, + { + src: icons.GBPNOK, + text: , + }, + { + src: icons.GBPNZD, + text: , + }, + { + src: icons.GBPSEK, + text: , + }, + { + src: icons.NZDCAD, + text: , + }, + { + src: icons.NZDJPY, + text: , + }, + { + src: icons.NZDUSD, + text: , + }, + { + src: icons.USDCNH, + text: , + }, + { + src: icons.USDMXN, + text: , + }, + { + src: icons.USDNOK, + text: , + }, + { + src: icons.USDPLN, + text: , + }, + { + src: icons.USDSEK, + text: , + }, + { + src: icons.USDZAR, + text: , + }, +] + +export const minor_pairs_options = [ + { + src: icons.AUDCAD, + text: , + }, + { + src: icons.AUDCHF, + text: , + }, + { + src: icons.AUDNZD, + text: , + }, { src: icons.EURNZD, text: , @@ -486,8 +743,8 @@ export const stocks_european_indices = [ text: , }, { - src: icons.STOCKSGERMANY30, - text: , + src: icons.STOCKSGERMANY40, + text: , }, { src: icons.STOCKSUK100, @@ -501,32 +758,48 @@ export const stocks_european_indices = [ export const american_stocks = [ { - src: icons.STOCKSAIRLINESGROUP, - text: , + src: icons.STOCKSADIDASSALOMON, + text: , }, { - src: icons.STOCKSAPPLE, - text: , + src: icons.STOCKSAMD, + text: , }, { - src: icons.STOCKSADIDASSALOMON, - text: , + src: icons.STOCKSAIRBNB, + text: , }, { - src: icons.STOCKSAMERICANINTERNATIONAL, - text: , + src: icons.STOCKSAIRBUS, + text: , + }, + { + src: icons.STOCKSAIRFRANCE, + text: , + }, + { + src: icons.STOCKSALIBABAGROUP, + text: , + }, + { + src: icons.STOCKSALPHABET, + text: , }, { src: icons.STOCKSAMAZON, text: , }, { - src: icons.STOCKSBOEING, - text: , + src: icons.STOCKSAIRLINESGROUP, + text: , }, { - src: icons.STOCKSALIBABAGROUP, - text: , + src: icons.STOCKSAMERICANINTERNATIONAL, + text: , + }, + { + src: icons.STOCKSAPPLE, + text: , }, { src: icons.STOCKSBANKOFAMERICA, @@ -541,17 +814,29 @@ export const american_stocks = [ text: , }, { - src: icons.STOCKSCITIGROUP, - text: , + src: icons.STOCKSBOEING, + text: , }, { - src: icons.STOCKSSALESFORCE, - text: , + src: icons.STOCKSBIOGEN, + text: , }, { src: icons.STOCKSCISCO, text: , }, + { + src: icons.STOCKSCONTINENTALAG, + text: , + }, + { + src: icons.STOCKSCITIGROUP, + text: , + }, + { + src: icons.STOCKSCOCACOLA, + text: , + }, { src: icons.STOCKSDELTAAIRLINES, text: , @@ -560,10 +845,6 @@ export const american_stocks = [ src: icons.STOCKSDEUTSCHEBANK, text: , }, - { - src: icons.STOCKSWALTDISNEY, - text: , - }, { src: icons.STOCKSEBAY, text: , @@ -577,12 +858,12 @@ export const american_stocks = [ text: , }, { - src: icons.STOCKSGENERALMOTORSCOMP, - text: , + src: icons.STOCKSFOXCORPCLASSB, + text: , }, { - src: icons.STOCKSALPHABET, - text: , + src: icons.STOCKSGENERALMOTORSCOMP, + text: , }, { src: icons.STOCKSGOLDMANSACHS, @@ -592,6 +873,14 @@ export const american_stocks = [ src: icons.STOCKSHPINC, text: , }, + { + src: icons.STOCKSHOMEDEPOTINC, + text: , + }, + { + src: icons.STOCKSHUGOBOSSAGCOMMONSTOCK, + text: , + }, { src: icons.STOCKSIBM, text: , @@ -609,8 +898,8 @@ export const american_stocks = [ text: , }, { - src: icons.STOCKSCOCACOLA, - text: , + src: icons.STOCKSDEUTSCHELUFTHANSAAG, + text: , }, { src: icons.STOCKSMASTERCARDINC, @@ -624,6 +913,14 @@ export const american_stocks = [ src: icons.STOCKSMICROSOFT, text: , }, + { + src: icons.STOCKSMODERNA, + text: , + }, + { + src: icons.STOCKSNESTLESA, + text: , + }, { src: icons.STOCKSNETFLIX, text: , @@ -632,6 +929,10 @@ export const american_stocks = [ src: icons.STOCKSNIKE, text: , }, + { + src: icons.STOCKSNOVARTISAG, + text: , + }, { src: icons.STOCKSNVIDIA, text: , @@ -648,6 +949,26 @@ export const american_stocks = [ src: icons.STOCKSPAYPAL, text: , }, + { + src: icons.STOCKSPEPSICOINC, + text: , + }, + { + src: icons.STOCKSPORSCHEAUTOMOBILHOLDINGSE, + text: , + }, + { + src: icons.STOCKSPUMASE, + text: , + }, + { + src: icons.STOCKSSALESFORCE, + text: , + }, + { + src: icons.SONYGROUPCORP, + text: , + }, { src: icons.STOCKSTEVAPHARMACEUTICAL, text: , @@ -668,174 +989,347 @@ export const american_stocks = [ src: icons.STOCKSVISA, text: , }, + { + src: icons.STOCKSWALTDISNEY, + text: , + }, { src: icons.STOCKSWALMART, text: , }, - { src: icons.STOCKSZOOM, text: , }, - { - src: icons.STOCKSAIRBNB, - text: , - }, +] + +// export const cryptocurrencies_trade_type = [ +// { +// src: icons.BTC, +// text: , +// }, +// { +// src: icons.BCH, +// text: , +// }, +// { +// src: icons.ETH, +// text: , +// }, +// { +// src: icons.LTC, +// text: , +// }, +// { +// src: icons.EOS, +// text: , +// }, +// { +// src: icons.BNB, +// text: , +// }, +// { +// src: icons.DASH, +// text: , +// }, +// { +// src: icons.XRP, +// text: , +// }, +// { +// src: icons.MNR, +// text: , +// }, +// { +// src: icons.ZEC, +// text: , +// }, +// ] +export const cryptocurrencies_trade_type = [ { - src: icons.STOCKSBIOGEN, - text: , + src: icons.BTCUSD, + text: , }, { - src: icons.STOCKSMODERNA, - text: , + src: icons.ETHUSD, + text: , }, ] -export const cryptocurrencies_trade_type = [ +// export const cryptocurrencies_cfds = [ +// { +// src: icons.AVALANCHE, +// text: , +// }, +// { +// src: icons.ALGORAND, +// text: , +// }, +// { +// src: icons.BAT, +// text: , +// }, +// { +// src: icons.BNB, +// text: , +// }, +// { +// src: icons.BTC, +// text: , +// }, +// { +// src: icons.BCH, +// text: , +// }, +// { +// src: icons.CARDANO, +// text: , +// }, +// { +// src: icons.CHAINLINK, +// text: , +// }, +// { +// src: icons.DASH, +// text: , +// }, +// { +// src: icons.DOGECOIN, +// text: , +// }, +// { +// src: icons.EOS, +// text: , +// }, +// { +// src: icons.ETH, +// text: , +// }, +// { +// src: icons.ETH_CLASSIC, +// text: , +// }, +// { +// src: icons.FILECOIN, +// text: , +// }, +// { +// src: icons.IOTA, +// text: , +// }, +// { +// src: icons.LTC, +// text: , +// }, +// { +// src: icons.MAKER, +// text: , +// }, +// { +// src: icons.MNR, +// text: , +// }, +// { +// src: icons.NEO, +// text: , +// }, +// { +// src: icons.OMICEGO, +// text: , +// }, +// { +// src: icons.POLKADOT, +// text: , +// }, +// { +// src: icons.POLYGON, +// text: , +// }, +// { +// src: icons.XRP, +// text: , +// }, +// { +// src: icons.SOLANA, +// text: , +// }, +// { +// src: icons.XLM, +// text: , +// }, +// { +// src: icons.TERRA, +// text: , +// }, +// { +// src: icons.TRX, +// text: , +// }, +// { +// src: icons.UNISWAP, +// text: , +// }, +// { +// src: icons.XTZ, +// text: , +// }, +// { +// src: icons.ZEC, +// text: , +// }, +// ] + +export const cryptocurrencies_cfds = [ { - src: icons.BTC, - text: , + src: icons.ADAUSD, + text: , }, { - src: icons.ETH, - text: , + src: icons.ALGUSD, + text: , + }, + { + src: icons.AVAUSD, + text: , + }, + { + src: icons.BATUSD, + text: , }, -] - -export const cryptocurrencies_cfds = [ { - src: icons.AVALANCHE, - text: , + src: icons.BCHUSD, + text: , }, { - src: icons.ALGORAND, - text: , + src: icons.BNBUSD, + text: , }, { - src: icons.BAT, - text: , + src: icons.BTCETH, + text: , }, { - src: icons.BNB, - text: , + src: icons.BTCLTC, + text: , }, { - src: icons.BTC, - text: , + src: icons.BTCUSD, + text: , }, { - src: icons.BCH, - text: , + src: icons.BTCXAG, + text: , }, { - src: icons.CARDANO, - text: , + src: icons.BTCXAU, + text: , }, { - src: icons.CHAINLINK, - text: , + src: icons.DOGUSD, + text: , }, { - src: icons.DASH, - text: , + src: icons.DOTUSD, + text: , }, { - src: icons.DOGECOIN, - text: , + src: icons.DSHUSD, + text: , }, { - src: icons.EOS, - text: , + src: icons.EOSUSD, + text: , }, { - src: icons.ETH, - text: , + src: icons.ETHUSD, + text: , }, { - src: icons.ETH_CLASSIC, - text: , + src: icons.ETCUSD, + text: , }, { - src: icons.FILECOIN, - text: , + src: icons.FILUSD, + text: , }, { - src: icons.IOTA, - text: , + src: icons.IOTUSD, + text: , }, { - src: icons.LTC, - text: , + src: icons.LNKUSD, + text: , }, { - src: icons.MAKER, - text: , + src: icons.LTCUSD, + text: , }, { - src: icons.MNR, - text: , + src: icons.MKRUSD, + text: , }, { - src: icons.NEO, - text: , + src: icons.MTCUSD, + text: , }, { - src: icons.OMICEGO, - text: , + src: icons.NEOUSD, + text: , }, { - src: icons.POLKADOT, - text: , + src: icons.OMGUSD, + text: , }, { - src: icons.POLYGON, - text: , + src: icons.SOLUSD, + text: , }, { - src: icons.XRP, - text: , + src: icons.TERUSD, + text: , }, { - src: icons.SOLANA, - text: , + src: icons.TRXUSD, + text: , }, { - src: icons.XLM, - text: , + src: icons.UNIUSD, + text: , }, { - src: icons.TERRA, - text: , + src: icons.XLMUSD, + text: , }, { - src: icons.TRX, - text: , + src: icons.XMRUSD, + text: , }, { - src: icons.UNISWAP, - text: , + src: icons.XRPUSD, + text: , }, { - src: icons.XTZ, - text: , + src: icons.XTZUSD, + text: , }, { - src: icons.ZEC, - text: , + src: icons.ZECUSD, + text: , }, ] export const cryptocurrencies_multipliers = [ { - src: icons.BTC, - text: , + src: icons.BTCUSD, + text: , }, { - src: icons.ETH, - text: , + src: icons.ETHUSD, + text: , }, ] + export const jump_indices = [ { src: icons.JUMP10, @@ -859,35 +1353,42 @@ export const jump_indices = [ }, ] -export const energy = [ - { - src: icons.NATURALGAS, - text: , - }, +export const energy_options = [ { src: icons.OILUSD, text: , }, ] +export const energy_cfds = [ + { + src: icons.BRENTCRUDEOILUK, + text: , + }, + { + src: icons.WTIOILUS, + text: , + }, +] + export const volatility_indices_trade_type_eu = [ { - src: icons.VOLATILITY200EU, - text: , + src: icons.INDEX200S1, + text: , }, { - src: icons.VOLATILITY300EU, - text: , + src: icons.INDEX300S1, + text: , }, ] export const crash_boom_trade_type_eu = [ { - src: icons.CRASH300EU, + src: icons.CRASH300, text: , }, { - src: icons.BOOM300EU, + src: icons.BOOM300, text: , }, ] diff --git a/src/pages/markets/instruments/_minor-pairs.js b/src/pages/markets/instruments/_metals-cfds.js similarity index 58% rename from src/pages/markets/instruments/_minor-pairs.js rename to src/pages/markets/instruments/_metals-cfds.js index 45036e20aa5..7f18fb59f29 100644 --- a/src/pages/markets/instruments/_minor-pairs.js +++ b/src/pages/markets/instruments/_metals-cfds.js @@ -1,15 +1,15 @@ import React from 'react' import Symbol from '../components/helper/_symbol' -import { minor_pairs } from './_market-symbols' +import { metals_cfds } from './_market-symbols' -const MinorPairs = () => { +const MetalsCFDs = () => { return ( <> - {minor_pairs.map((symbol, index) => ( + {metals_cfds.map((symbol, index) => ( ))} ) } -export default MinorPairs +export default MetalsCFDs diff --git a/src/pages/markets/instruments/_metals-options.js b/src/pages/markets/instruments/_metals-options.js new file mode 100644 index 00000000000..afd1eef9aaa --- /dev/null +++ b/src/pages/markets/instruments/_metals-options.js @@ -0,0 +1,16 @@ +import React from 'react' +import Symbol from '../components/helper/_symbol' +import { metals_options } from './_market-symbols' +import { ROW } from 'components/containers' + +const MetalsOptions = () => { + return ( + + {metals_options.map((symbol, index) => ( + + ))} + + ) +} + +export default MetalsOptions diff --git a/src/pages/markets/instruments/_energy.js b/src/pages/markets/instruments/_micro_pairs.js similarity index 58% rename from src/pages/markets/instruments/_energy.js rename to src/pages/markets/instruments/_micro_pairs.js index dcce0edad8a..096e0420e8f 100644 --- a/src/pages/markets/instruments/_energy.js +++ b/src/pages/markets/instruments/_micro_pairs.js @@ -1,15 +1,15 @@ import React from 'react' import Symbol from '../components/helper/_symbol' -import { energy } from './_market-symbols' +import { micro_pairs } from './_market-symbols' -const Energy = () => { +const MicroPairs = () => { return ( <> - {energy.map((symbol, index) => ( + {micro_pairs.map((symbol, index) => ( ))} ) } -export default Energy +export default MicroPairs diff --git a/src/pages/markets/instruments/_minor-pairs-cfds.js b/src/pages/markets/instruments/_minor-pairs-cfds.js new file mode 100644 index 00000000000..c4a26cb2797 --- /dev/null +++ b/src/pages/markets/instruments/_minor-pairs-cfds.js @@ -0,0 +1,15 @@ +import React from 'react' +import Symbol from '../components/helper/_symbol' +import { minor_pairs_cfds } from './_market-symbols' + +const MinorPairsCFDS = () => { + return ( + <> + {minor_pairs_cfds.map((symbol, index) => ( + + ))} + + ) +} + +export default MinorPairsCFDS diff --git a/src/pages/markets/instruments/_minor-pairs-options.js b/src/pages/markets/instruments/_minor-pairs-options.js new file mode 100644 index 00000000000..ec36a2badb1 --- /dev/null +++ b/src/pages/markets/instruments/_minor-pairs-options.js @@ -0,0 +1,16 @@ +import React from 'react' +import Symbol from '../components/helper/_symbol' +import { minor_pairs_options } from './_market-symbols' + +// TODO create a _symbol.js component that takes in a market symbol and renders all these, Then we can remove a lot of files if we refactor it. +const MinorPairsOptions = () => { + return ( + <> + {minor_pairs_options.map((symbol, index) => ( + + ))} + + ) +} + +export default MinorPairsOptions diff --git a/src/pages/markets/instruments/_submarkets.js b/src/pages/markets/instruments/_submarkets.js index c28a3575a6a..b97414a4fb5 100644 --- a/src/pages/markets/instruments/_submarkets.js +++ b/src/pages/markets/instruments/_submarkets.js @@ -2,14 +2,19 @@ import Americas from './_americas' import AsiaOceania from './_asia-oceania' import ContinuousIndices from './_continuous-indices' import CrashBoom from './_crash-boom' +import CrashBoomMultipliers from './_crash-boom-multipliers' import CrashBoomEU from './_crash-boom-eu' import DailyResetIndices from './_daily-reset-indices' -import Energy from './_energy' +import EnergyCFDs from './_energy-cfds' +import EnergyOptions from './_energy-options' import Europe from './_europe' import ExoticPairs from './_exotic-pairs' import MajorPairs from './_major-pairs' -import Metals from './_metals' -import MinorPairs from './_minor-pairs' +import MicroPairs from './_micro_pairs' +import MetalsCFDs from './_metals-cfds' +import MetalsOptions from './_metals-options' +import MinorPairsCFDS from './_minor-pairs-cfds' +import MinorPairsOptions from './_minor-pairs-options' import RangeBreak from './_range-break' import SmartFX from './_smartfx' import StepIndices from './_step-indices' @@ -30,18 +35,23 @@ export { AsiaOceania, ContinuousIndices, CrashBoom, + CrashBoomMultipliers, CrashBoomEU, CryptocurrenciesMultipliers, CryptocurrenciesCFDs, CryptocurrenciesTradeType, DailyResetIndices, - Energy, + EnergyCFDs, + EnergyOptions, Europe, ExoticPairs, JumpIndices, MajorPairs, - Metals, - MinorPairs, + MetalsCFDs, + MetalsOptions, + MinorPairsCFDS, + MinorPairsOptions, + MicroPairs, RangeBreak, SmartFX, StepIndices, diff --git a/src/pages/markets/static/content/_cfds.js b/src/pages/markets/static/content/_cfds.js index ec37d3fd7e4..94866e2d532 100644 --- a/src/pages/markets/static/content/_cfds.js +++ b/src/pages/markets/static/content/_cfds.js @@ -3,11 +3,12 @@ import { CrashBoom, CrashBoomEU, CryptocurrenciesCFDs, - Energy, + EnergyCFDs, ExoticPairs, MajorPairs, - Metals, - MinorPairs, + MetalsCFDs, + MicroPairs, + MinorPairsCFDS, RangeBreak, SmartFX, StepIndices, @@ -41,11 +42,11 @@ export const commodities_cfds = { content: [ { title: , - component: , + component: , }, { title: , - component: , + component: , }, ], } @@ -63,12 +64,16 @@ export const forex_cfds = { }, { title: , - component: , + component: , }, { title: , component: , }, + { + title: , + component: , + }, { title: , component: , @@ -77,6 +82,24 @@ export const forex_cfds = { ], } +export const forex_cfds_eu_uk = { + markets_list: { + col: 4, + tablet_col: 3, + mobile_col: 2, + }, + content: [ + { + title: , + component: , + }, + { + title: , + component: , + }, + ], +} + export const synthetic_cfds = { has_global_accordion: true, content: [ @@ -190,7 +213,7 @@ export const crypto_cfds = { }, content: [ { - title: , + title: , component: , }, ], diff --git a/src/pages/markets/static/content/_details.js b/src/pages/markets/static/content/_details.js index c8993ed1664..afbf0c17c0b 100644 --- a/src/pages/markets/static/content/_details.js +++ b/src/pages/markets/static/content/_details.js @@ -63,7 +63,7 @@ export const ContinuousIndicesDetails = () => ( {localize( - 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.', + 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, 100%.', )} @@ -85,7 +85,18 @@ export const CrashBoomDetails = () => ( ]} + /> + + +) + +export const CrashBoomMultipliersDetails = () => ( + + + ]} /> @@ -141,7 +152,7 @@ export const EuropeDetails = (index) => { , ]} /> , @@ -239,7 +250,7 @@ export const VolatilityIndicesDetails = () => ( {localize( - 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.', + 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, 100%, 200%, and 300%.', )} @@ -250,7 +261,7 @@ export const VolatilityIndicesDetails = () => ( ]} /> @@ -351,7 +362,7 @@ export const EuropeanIndicesDetails = () => ( ]} /> diff --git a/src/pages/markets/static/content/_digital-options.js b/src/pages/markets/static/content/_digital-options.js index 924af0f3726..2fd7d21480b 100644 --- a/src/pages/markets/static/content/_digital-options.js +++ b/src/pages/markets/static/content/_digital-options.js @@ -4,11 +4,12 @@ import { AsiaOceania, ContinuousIndices, DailyResetIndices, - Energy, + EnergyOptions, Europe, + JumpIndices, MajorPairs, - Metals, - MinorPairs, + MetalsOptions, + MinorPairsOptions, SmartFX, } from '../../instruments/_submarkets.js' import { @@ -17,6 +18,7 @@ import { ContinuousIndicesDetails, DailyResetIndicesDetails, EuropeDetails, + JumpIndicesDetails, SmartFXDetails, } from './_details' import { Localize } from 'components/localization' @@ -213,11 +215,11 @@ export const commodities_options = { content: [ { title: , - component: , + component: , }, { title: , - component: , + component: , }, ], markets_list: { @@ -241,7 +243,7 @@ export const forex_options = { }, { title: , - component: , + component: , }, { title: , @@ -315,6 +317,11 @@ export const synthetic_options = { component: , details: ContinuousIndicesDetails, }, + { + title: , + component: , + details: JumpIndicesDetails, + }, { title: , component: , diff --git a/src/pages/markets/static/content/_multipliers.js b/src/pages/markets/static/content/_multipliers.js index 235bf35ba42..5a7b87ebaff 100644 --- a/src/pages/markets/static/content/_multipliers.js +++ b/src/pages/markets/static/content/_multipliers.js @@ -1,8 +1,9 @@ import React from 'react' import { - ContinuousIndices, - CrashBoom, + CrashBoomMultipliers, CrashBoomEU, + ContinuousIndices, + JumpIndices, MajorPairs, StepIndices, CryptocurrenciesMultipliers, @@ -10,13 +11,14 @@ import { SmartFX, } from '../../instruments/_submarkets' import { - ContinuousIndicesDetails, - CrashBoomDetails, + CrashBoomMultipliersDetails, CrashBoomDetailsEU, + ContinuousIndicesDetails, StepIndicesDetails, CryptocurrenciesDetails, VolatilityIndicesDetailsEU, SmartFXDetails, + JumpIndicesDetails, } from './_details' import { Localize } from 'components/localization' @@ -39,6 +41,20 @@ export const forex_multiplier = { ], } +export const forex_multiplier_eu = { + markets_list: { + col: 4, + tablet_col: 3, + mobile_col: 2, + }, + content: [ + { + title: , + component: , + }, + ], +} + export const synthetic_multiplier = { has_global_accordion: true, content: [ @@ -52,8 +68,13 @@ export const synthetic_multiplier = { mobile_title: ( ]} /> ), - component: , - details: CrashBoomDetails, + component: , + details: CrashBoomMultipliersDetails, + }, + { + title: , + component: , + details: JumpIndicesDetails, }, { title: , @@ -98,7 +119,7 @@ export const crypto_multiplier = { has_global_accordion: true, content: [ { - title: , + title: , component: , details: CryptocurrenciesDetails, }, diff --git a/src/pages/markets/static/style/_markets-style.js b/src/pages/markets/static/style/_markets-style.js index 5afa14fe9d3..9b3cb453615 100644 --- a/src/pages/markets/static/style/_markets-style.js +++ b/src/pages/markets/static/style/_markets-style.js @@ -149,6 +149,7 @@ export const SymbolContainer = styled(Flex)` width: fit-content; align-items: center; justify-content: flex-start; + padding: 0 2px; img { width: 32px; diff --git a/src/pages/markets/stock/index.js b/src/pages/markets/stock/index.js index 660ba44f571..76212f3138a 100644 --- a/src/pages/markets/stock/index.js +++ b/src/pages/markets/stock/index.js @@ -9,6 +9,7 @@ import { SEO } from 'components/containers' import PractiseIcon from 'images/svg/markets/aim.svg' import TradeIcon from 'images/svg/markets/trade.svg' import WithdrawIcon from 'images/svg/markets/withdraw.svg' +import { DerivStore } from 'store' const simple_step_content_stock = [ { @@ -34,19 +35,23 @@ const simple_step_content_stock = [ }, ] -const StocksAndIndicesPage = () => ( - - - - - - - -) +const StocksAndIndicesPage = () => { + const { is_uk_country } = React.useContext(DerivStore) + + return ( + + + + + + + + ) +} export default WithIntl()(StocksAndIndicesPage) diff --git a/src/pages/trade-types/cfds/_available-markets.tsx b/src/pages/trade-types/cfds/_available-markets.tsx index ac1b90a9aef..e29419ac088 100644 --- a/src/pages/trade-types/cfds/_available-markets.tsx +++ b/src/pages/trade-types/cfds/_available-markets.tsx @@ -12,6 +12,14 @@ import SyntheticIndices from 'images/svg/trade-types/synthetic-indices.svg' import StockIndices from 'images/svg/trade-types/stock-indices.svg' import Cryptocurrencies from 'images/svg/trade-types/cryptocurrencies.svg' import { DerivStore, DerivStoreType } from 'store' +import { EU, NonEU } from 'components/containers/visibility' + +type AllMarketsType = { + image: string + title: 'Forex' | 'Synthetic indices' | 'Commodities' | 'Stock indices' | 'Cryptocurrencies' + text: string | React.ReactNode + url: string +}[] const MobileCardHeader = styled(Flex)` margin-bottom: 0.8rem; @@ -38,8 +46,55 @@ const StyledText = styled(Text)` } ` +const all_markets: AllMarketsType = [ + { + image: Forex, + title: 'Forex', + text: ( + <> + + + + + + + + ), + url: '/markets/forex/', + }, + { + image: SyntheticIndices, + title: 'Synthetic indices', + text: 'Trade synthetic indices on margin 24/7 without being affected by natural events and liquidity risks.', + url: '/markets/synthetic/', + }, + { + image: Commodities, + title: 'Commodities', + text: 'Predict the price movements of commodities like silver, gold, and oil, and use margin to amplify your possible profits.', + url: '/markets/commodities/', + }, + { + image: StockIndices, + title: 'Stock indices', + text: 'Go long or short on our OTC German index and utilise leverage to increase your potential profit.', + url: '/markets/stock/', + }, + { + image: Cryptocurrencies, + title: 'Cryptocurrencies', + text: 'Trade on the world’s most popular cryptocurrencies and potentially profit from correctly anticipating price movements.', + url: '/markets/cryptocurrencies/', + }, +] + +const uk_exceptions = ['Synthetic indices', 'Cryptocurrencies'] + +const filterByUkExeptions = (markets: AllMarketsType) => + markets.filter(({ title }) => !uk_exceptions.includes(title)) + const AvailableMarkets = () => { - const { is_eu_country } = React.useContext(DerivStore) + const { is_uk_country } = React.useContext(DerivStore) return ( @@ -49,127 +104,25 @@ const AvailableMarkets = () => { - - - - - forex - - {localize('Forex')} - - - {is_eu_country ? ( - - ) : ( - - )} - - } - to="/markets/forex/" - /> - - - - - - - - synthetic indices - - - {localize('Synthetic indices')} - - - - {localize( - 'Trade synthetic indices on margin 24/7 without being affected by natural events and liquidity risks.', - )} - - } - to="/markets/synthetic/" - /> - - - - - - - - commodities - - {localize('Commodities')} - - - {localize( - 'Predict the price movements of commodities like silver, gold, and oil, and use margin to amplify your possible profits.', - )} - - } - to="/markets/commodities/" - /> - - - - - - - - stock indices - - {localize('Stock indices')} - - - {localize( - 'Go long or short on our OTC German index and utilise leverage to increase your potential profit.', - )} - - } - to="/markets/stock/" - /> - - - - - - - - cryptocurrencies - - - {localize('Cryptocurrencies')} - - - - {localize( - 'Trade on the world’s most popular cryptocurrencies and potentially profit from correctly anticipating price movements.', - )} - - } - to="/markets/cryptocurrencies/" - /> - - - + {(is_uk_country ? filterByUkExeptions(all_markets) : all_markets).map( + ({ image, title, text, url }) => ( + + + + + {title} + {localize(title)} + + {text} + } + to={url} + /> + + + + ), + )} ) diff --git a/src/pages/trade-types/components/_markets-carousel.tsx b/src/pages/trade-types/components/_markets-carousel.tsx index bd596aefe30..ee883d1d566 100644 --- a/src/pages/trade-types/components/_markets-carousel.tsx +++ b/src/pages/trade-types/components/_markets-carousel.tsx @@ -62,6 +62,7 @@ type MarketsCarouselProps = { } const MarketsCarousel = ({ children }: MarketsCarouselProps) => { + const flex_width = children.length > 1 ? '0 0 50%' : '0 0 100%' const carousel_props = { options: { align: 'start', @@ -73,7 +74,7 @@ const MarketsCarousel = ({ children }: MarketsCarouselProps) => { margin: '0 auto', }, slide_style: { - flex: '0 0 50%', + flex: flex_width, position: 'relative', margin: '4rem 0', }, diff --git a/src/pages/trade-types/multiplier/_available-trades.tsx b/src/pages/trade-types/multiplier/_available-trades.tsx index 44dab931def..eecad2c94e2 100644 --- a/src/pages/trade-types/multiplier/_available-trades.tsx +++ b/src/pages/trade-types/multiplier/_available-trades.tsx @@ -9,6 +9,7 @@ import device from 'themes/device' import ForexIcon from 'images/svg/trade-types/market-forex.svg' import SyntheticIcon from 'images/svg/trade-types/market-synthetic-indices.svg' import CryptocurrencyIcon from 'images/svg/markets/cryptocurrencies.svg' +import { DerivStore } from 'store' const StyledHeader = styled(Header)` @media ${device.tabletL} { @@ -207,6 +208,8 @@ Card.propTypes = { } const AvailableTrades = ({ display_title, Forex, SyntheticIndices, Cryptocurrencies }) => { + const { is_uk_country } = React.useContext(DerivStore) + const [active_tab, setActiveTab] = useState('Forex') const handleTabChange = (new_tab: string) => { @@ -229,7 +232,7 @@ const AvailableTrades = ({ display_title, Forex, SyntheticIndices, Cryptocurrenc active_tab={active_tab} /> )} - {SyntheticIndices && ( + {!is_uk_country && SyntheticIndices && ( } @@ -237,7 +240,7 @@ const AvailableTrades = ({ display_title, Forex, SyntheticIndices, Cryptocurrenc active_tab={active_tab} /> )} - {Cryptocurrencies && ( + {!is_uk_country && Cryptocurrencies && ( } diff --git a/src/pages/trade-types/multiplier/_cryptocurrencies.tsx b/src/pages/trade-types/multiplier/_cryptocurrencies.tsx index 4a13f9198f0..7b359315426 100644 --- a/src/pages/trade-types/multiplier/_cryptocurrencies.tsx +++ b/src/pages/trade-types/multiplier/_cryptocurrencies.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import { CryptocurrenciesTradeType } from '../../markets/instruments/_submarkets.js' import MarketsAccordion from '../../markets/components/helper/_markets_accordion.js' import AvailablePlatforms from '../../markets/components/helper/_available-platforms.js' +import { NonUK } from 'components/containers/visibility' import { Text } from 'components/elements' import { SectionContainer, Flex, CssGrid, Show } from 'components/containers' import { localize, Localize } from 'components/localization' @@ -99,46 +100,48 @@ const CryptocurrenciesDetails = () => ( const Cryptocurrencies = () => { return ( - - - - {localize( - 'Trade cryptocurrencies with multipliers and take advantage of 24/7 trading, including weekends and holidays.', - )} - - - - - - {localize('Cryptocurrencies available for multipliers trading')} - - - - ( - - - - Codestin Search App - - - Codestin Search App - - - - - - + + + + + {localize( + 'Trade cryptocurrencies with multipliers and take advantage of 24/7 trading, including weekends and holidays.', )} - renderDetails={CryptocurrenciesDetails} - /> - - - + + + + + + {localize('Instruments available for multipliers trading')} + + + + ( + + + + Codestin Search App + + + Codestin Search App + + + + + + + )} + renderDetails={CryptocurrenciesDetails} + /> + + + + ) } diff --git a/src/pages/trade-types/multiplier/_markets-available.tsx b/src/pages/trade-types/multiplier/_markets-available.tsx index 80f3f19ff21..1119fbc79f3 100644 --- a/src/pages/trade-types/multiplier/_markets-available.tsx +++ b/src/pages/trade-types/multiplier/_markets-available.tsx @@ -8,6 +8,14 @@ import { Header, Text } from 'components/elements' import { localize, Localize } from 'components/localization' import Forex from 'images/svg/trade-types/forex.svg' import SyntheticIndices from 'images/svg/trade-types/synthetic-indices.svg' +import { DerivStore, DerivStoreType } from 'store' + +type AllMarketsType = { + image: string + title: 'Forex' | 'Synthetic indices' + text: string + url: string +}[] const MobileCardHeader = styled(Flex)` margin-bottom: 0.8rem; @@ -34,7 +42,31 @@ const StyledText = styled(Text)` } ` +const all_markets: AllMarketsType = [ + { + image: Forex, + title: 'Forex', + text: 'Speculate on the price movements of major forex pairs and increase your profit potential without losing more than your stake.', + url: '/markets/forex/', + }, + { + image: SyntheticIndices, + title: 'Synthetic indices', + text: 'Trade multipliers on synthetic indices that are available 24/7 and increase your profit potential multiples times while limiting your risk.', + url: '/markets/synthetic/', + }, +] + +const uk_exceptions = ['Synthetic indices'] + +const filterByUkExeptions = (markets: AllMarketsType) => + markets.filter(({ title }) => !uk_exceptions.includes(title)) + +const uk_markets = filterByUkExeptions(all_markets) + const MarketsAvailable = () => { + const { is_uk_country } = React.useContext(DerivStore) + return ( <> @@ -44,48 +76,26 @@ const MarketsAvailable = () => { - - - - - - - {localize('Forex')} - - - {localize( - 'Speculate on the price movements of major forex pairs and increase your profit potential without losing more than your stake.', - )} - - } - to="/markets/forex/" - /> - - - - - - - - + {(is_uk_country ? uk_markets : all_markets).map( + ({ image, title, text, url }) => ( + + + + + {title} - - {localize('Synthetic indices')} - - - - {localize( - 'Trade multipliers on synthetic indices that are available 24/7 and increase your profit potential multiples times while limiting your risk.', - )} - - } - to="/markets/synthetic/" - /> - - - + {localize(title)} + + {localize(text)} + } + to={url} + /> + + + + ), + )} diff --git a/src/pages/trade-types/multiplier/_synthetic-indices.tsx b/src/pages/trade-types/multiplier/_synthetic-indices.tsx index 013cec6fffe..a9224e88f49 100644 --- a/src/pages/trade-types/multiplier/_synthetic-indices.tsx +++ b/src/pages/trade-types/multiplier/_synthetic-indices.tsx @@ -1,14 +1,16 @@ import React from 'react' import styled from 'styled-components' import { - CrashBoom, + CrashBoomMultipliers, ContinuousIndices, + JumpIndices, + StepIndices, VolatilityIndices, } from '../../markets/instruments/_submarkets.js' import MarketsAccordion from '../../markets/components/helper/_markets_accordion.js' import AvailablePlatforms from '../../markets/components/helper/_available-platforms.js' import { Text } from 'components/elements' -import { SectionContainer, Flex, CssGrid, Show } from 'components/containers' +import { SectionContainer, Flex, CssGrid, Desktop, Mobile, NonUK } from 'components/containers' import { localize, Localize } from 'components/localization' import device from 'themes/device' import { DerivStore } from 'store' @@ -91,16 +93,26 @@ const AvailablePlatformsWrapper = styled(Flex)` } ` -const CrashBoomDetails = () => ( - - - ]} - /> - - -) +const CrashBoomDetails = () => { + const { is_eu_country, is_uk_country } = React.useContext(DerivStore) + + return ( + + + a series of 1000, or 500 ticks' + : '<0>a series of 300 ticks', + }} + components={[]} + /> + + + ) +} const VolatilityIndicesDetails = () => ( @@ -123,7 +135,7 @@ const ContinuousIndicesDetails = () => ( {localize( - 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.', + 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, 100%, 200%, and 300%.', )} @@ -134,7 +146,29 @@ const ContinuousIndicesDetails = () => ( ]} + /> + + +) + +const JumpIndicesDetails = () => ( + + + ]} + /> + + +) + +const StepIndicesDetails = () => ( + + + ]} /> @@ -145,95 +179,170 @@ const SyntheticIndices = () => { const { is_eu_country } = React.useContext(DerivStore) return ( - - - - {is_eu_country - ? localize( - 'Synthetic indices are engineered to mimic real-world market movement; minus real life risk. Trade multipliers on synthetic indices 24/7 and benefit from tight spreads and fixed generation intervals.', - ) - : localize( - 'Synthetic indices are engineered to mimic real-world market movement; minus real life risk. Trade multipliers on synthetic indices 24/7 and benefit from high leverage, tight spreads and fixed generation intervals.', - )} - - - - - - {localize('Synthetic indices available for multipliers trading')} - - {is_eu_country && ( + + + + + {is_eu_country + ? localize( + 'Synthetic indices are engineered to mimic real-world market movement; minus real life risk. Trade multipliers on synthetic indices 24/7 and benefit from tight spreads and fixed generation intervals.', + ) + : localize( + 'Synthetic indices are engineered to mimic real-world market movement; minus real life risk. Trade multipliers on synthetic indices 24/7 and benefit from high leverage, tight spreads and fixed generation intervals.', + )} + + + + + + {localize('Synthetic indices available for multipliers trading')} + + {is_eu_country && ( + + ( + + + + Codestin Search App + + + Codestin Search App + + + + + + + )} + renderDetails={VolatilityIndicesDetails} + /> + + )} ( - + Codestin Search App - - + + Codestin Search App - - - - - - - )} - renderDetails={VolatilityIndicesDetails} - /> - - )} - - - ( - - - - Codestin Search App - - - Codestin Search App - - - - - - - )} - renderDetails={CrashBoomDetails} - /> - - {!is_eu_country && ( - - ( - - - Codestin Search App + - + )} - renderDetails={ContinuousIndicesDetails} + renderDetails={CrashBoomDetails} /> - )} - - + {!is_eu_country && ( + <> + + ( + + + Codestin Search App + + + + + + )} + renderDetails={ContinuousIndicesDetails} + /> + + + ( + + + + Codestin Search App + + + Codestin Search App + + + + + + + )} + renderDetails={JumpIndicesDetails} + /> + + + ( + + + + Codestin Search App + + + Codestin Search App + + + + + + + )} + renderDetails={StepIndicesDetails} + /> + + + )} + + + ) } diff --git a/src/pages/trader-tools/common/_underlying-data.tsx b/src/pages/trader-tools/common/_underlying-data.tsx index 6ca91486934..05dfb2f4ce6 100644 --- a/src/pages/trader-tools/common/_underlying-data.tsx +++ b/src/pages/trader-tools/common/_underlying-data.tsx @@ -33,7 +33,6 @@ import { CRM, CSCO, DAL, - DAX30, DBK, DIS, DSHUSD, @@ -277,7 +276,7 @@ export const financialItemLists = [ }, { name: 'ABNB', - display_name: 'Airbnb', + display_name: 'Airbnb Inc', icon: airbnb, market: 'other', }, @@ -551,12 +550,6 @@ export const financialItemLists = [ icon: australia 200, market: 'other', }, - { - name: 'DAX30', - display_name: 'Germany 30', - icon: germany 30, - market: 'other', - }, { name: 'ESP35', display_name: 'Spain 35',