From bc8fb77136c41ae2c0fccfa07b500082b32cb28a Mon Sep 17 00:00:00 2001 From: suthesan Date: Mon, 28 Dec 2020 16:47:40 +0800 Subject: [PATCH 1/3] added available trading instruments(wip) --- .../multiplier/_available-trades.js | 267 ++++++++++++++ .../multiplier/_available_instruments.js | 16 + .../multiplier/_digital-options.js | 347 ++++++++++++++++++ src/pages/trade-types/multiplier/_margin.js | 140 +++++++ 4 files changed, 770 insertions(+) create mode 100644 src/pages/trade-types/multiplier/_available-trades.js create mode 100644 src/pages/trade-types/multiplier/_available_instruments.js create mode 100644 src/pages/trade-types/multiplier/_digital-options.js create mode 100644 src/pages/trade-types/multiplier/_margin.js diff --git a/src/pages/trade-types/multiplier/_available-trades.js b/src/pages/trade-types/multiplier/_available-trades.js new file mode 100644 index 00000000000..6b85407c855 --- /dev/null +++ b/src/pages/trade-types/multiplier/_available-trades.js @@ -0,0 +1,267 @@ +import React from 'react' +import styled, { css } from 'styled-components' +import PropTypes from 'prop-types' +import { SectionContainer, Flex, Container } from 'components/containers' +import { Localize } from 'components/localization' +import { Header } from 'components/elements' +import device from 'themes/device' +//SVG +import MarginIcon from 'images/svg/margin.svg' +import OptionsIcon from 'images/svg/options.svg' +import MultipliersIcon from 'images/svg/multipliers.svg' + +const StyledSection = styled(SectionContainer)` + padding: 5rem 0; +` +const StyledHeader = styled(Header)` + @media ${device.tabletL} { + max-width: 35.75rem; + font-size: 4rem; + margin: 0 auto; + } +` +const StyledContainer = styled(Container)` + margin-top: 2.8rem; + + @media ${device.tabletL} { + width: 100%; + margin-top: 0; + } +` +const CardWrapper = styled(Flex)` + max-width: 100.6rem; + justify-content: flex-start; + z-index: 1; + height: 8rem; + align-items: flex-end; + padding-left: 0.8rem; + overflow: hidden; + + div:first-child { + z-index: 3; + margin: 0 -0.3rem; + } + div:nth-child(2) { + z-index: 2; + } + div:last-child { + z-index: 1; + } + + @media ${device.mobileL} { + overflow: scroll; + } +` +const CardContainer = styled(Flex)` + position: relative; + width: fit-content; + min-width: 29rem; + height: 7.72rem; + padding: 0; + margin: 0 -0.6rem; + cursor: pointer; + z-index: ${(props) => (props.active_tab === props.name ? '4 !important' : '')}; + padding-right: 5rem; + + ${Flex} { + padding: 2.71rem 0 0 3.2rem; + + img { + width: 32px; + height: 32px; + margin-right: 1.6rem; + opacity: ${(props) => (props.active_tab === props.name ? '1' : '0')}; + } + h4 { + color: ${(props) => + props.active_tab === props.name ? 'var(--color-red)' : 'var(--color-black-3)'}; + opacity: ${(props) => (props.active_tab === props.name ? '1' : '0.56')}; + } + @media ${device.tabletL} { + width: 100%; + height: 100%; + justify-content: flex-start; + padding: 10px 44px 0 0; + + img { + width: 16px; + height: 16px; + margin-right: 1rem; + } + } + } + ::before { + content: ''; /* To generate the box */ + width: 100%; + position: absolute; + top: 0; + right: 0; + bottom: -1rem; + left: 0; + z-index: -1; + border-bottom: none; + border-radius: 10px 30px 0 0; + background: #f3f3f3; + transform: perspective(14px) rotateX(1.4deg); + transform-origin: bottom left; + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); + ${(props) => { + if (props.active_tab === props.name) + return css` + background-color: #ffffff; + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); + ` + }} + } + @media ${device.tabletL} { + width: 100%; + height: 6rem; + min-width: unset; + padding-right: 0; + } +` +const TabMarginIcon = styled.img` + min-width: 16px; + ${(props) => { + if (props.active_tab === props.name) + return css` + margin-left: 16px; + ` + }} +` +const TabOptionIcon = styled.img` + min-width: 16px; + ${(props) => { + if (props.active_tab === props.name) + return css` + margin-left: 16px; + ` + }} +` +const TabMultiplierIcon = styled.img` + min-width: 16px; + ${(props) => { + if (props.active_tab === props.name) + return css` + margin-left: 16px; + ` + }} +` +const ContentWrapper = styled.div` + width: 100%; + max-width: 99.6rem; + display: block; + background: #ffffff; + border-radius: 0.15em; + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); + + @media ${device.tabletL} { + padding: 0 2rem; + } +` +const CardHeader = styled(Header)` + @media ${device.tabletL} { + font-size: 1.75rem; + } +` +const Card = ({ display_name, active_tab, onTabChange, name }) => { + return ( + onTabChange(name)}> + + {active_tab === 'Margin' && ( + + )} + {active_tab === 'Options' && ( + + )} + {active_tab === 'Multipliers' && ( + + )} + + {display_name} + + + + ) +} + +Card.propTypes = { + active_tab: PropTypes.string, + display_name: PropTypes.object, + name: PropTypes.string, + onTabChange: PropTypes.func, +} + +class AvailableTrades extends React.Component { + state = { + active_tab: 'Margin', + } + handleTabChange = (new_tab) => { + if (new_tab === this.state.active_tab) return + this.setState({ active_tab: new_tab }) + } + render() { + const { Margin, DigitalOptions, Multipliers} = this.props + return ( + + + + {Margin && ( + } + onTabChange={() => this.handleTabChange('Margin')} + active_tab={this.state.active_tab} + /> + )} + {DigitalOptions && ( + } + onTabChange={() => this.handleTabChange('Options')} + active_tab={this.state.active_tab} + /> + )} + {Multipliers && ( + } + onTabChange={() => this.handleTabChange('Multipliers')} + active_tab={this.state.active_tab} + /> + )} + + + {this.state.active_tab === 'Margin' && } + {this.state.active_tab === 'Options' && } + {this.state.active_tab === 'Multipliers' && } + + + + ) + } +} + +AvailableTrades.propTypes = { + DigitalOptions: PropTypes.func, + display_title: PropTypes.object, + Margin: PropTypes.func, + Multipliers: PropTypes.func, +} + +export default AvailableTrades diff --git a/src/pages/trade-types/multiplier/_available_instruments.js b/src/pages/trade-types/multiplier/_available_instruments.js new file mode 100644 index 00000000000..84bd6269a69 --- /dev/null +++ b/src/pages/trade-types/multiplier/_available_instruments.js @@ -0,0 +1,16 @@ +import React from 'react' +import Loadable from '@loadable/component' +import Margin from './_margin.js' +import DigitalOptions from './_digital-options.js' +const AvailableTrades = Loadable(() => import('./_available-trades.js')) + +const AvailableInstruments = () => { + return ( + + ); +} + +export default AvailableInstruments \ No newline at end of file diff --git a/src/pages/trade-types/multiplier/_digital-options.js b/src/pages/trade-types/multiplier/_digital-options.js new file mode 100644 index 00000000000..2ca6c8583d2 --- /dev/null +++ b/src/pages/trade-types/multiplier/_digital-options.js @@ -0,0 +1,347 @@ +import React from 'react' +import styled from 'styled-components' +import { Americas, AsiaOceania, Europe } from '../../markets/sub-markets/_submarkets.js' +import AvailableOptions from '../../markets/_available-options.js' +import MarketsAccordion from '../../markets/_markets_accordion.js' +import AvailablePlatforms from '../../markets/_available-platforms.js' +import { Text } from 'components/elements' +import { SectionContainer, Flex, CssGrid } from 'components/containers' +import { localize, Localize } from 'components/localization' +import device from 'themes/device' +//SVG +import RiseFall from 'images/svg/options/rise-fall.svg' +import HigherLower from 'images/svg/options/higher-lower.svg' +import EbEo from 'images/svg/options/eb-eo.svg' +import SbGo from 'images/svg/options/sb-go.svg' +import TNT from 'images/svg/options/tnt.svg' + +const Descriptions = styled.div` + padding-bottom: 4rem; + border-bottom: 1px solid var(--color-grey-21); +` +const Col = styled(Flex)` + max-width: 13.2rem; + + @media ${device.tabletL} { + max-width: 10rem; + } +` +const Row = styled(Flex)`` + +const MarketsWrapper = styled(Flex)` + flex-direction: column; + + > div { + margin-top: 2.4rem; + } +` +const MarketsList = styled(CssGrid)` + border-left: 1px solid var(--color-grey-22); + border-right: 1px solid var(--color-grey-22); + width: 100%; + padding: 2.4rem 1.6rem; + grid-row-gap: 1.6rem; + + @media ${device.tabletL} { + grid-template-columns: repeat(1, 1fr); + + img { + width: 16px; + height: 16px; + margin-right: 4px; + } + ${Text} { + font-size: 1.5rem; + line-height: 1.5; + } + } +` +const Options = styled(Descriptions)` + margin-top: 2.4rem; + + ${Row} { + margin-top: 4rem; + border: unset; + justify-content: space-between; + + @media ${device.tabletL} { + flex-direction: column; + } + + ${Col} { + max-width: 38.4rem; + } + } + div:first-child { + margin-top: 0; + } +` +const StyledText = styled(Text)` + @media ${device.tabletL} { + font-size: 2rem; + text-align: left; + } +` +const Title = styled(Text)` + text-align: center; + + @media ${device.tabletL} { + max-width: 8rem; + font-weight: 600; + } +` + +const DetailsContainer = styled(Flex)` + flex-direction: column; + + ${Text} { + font-size: 1.4rem; + margin-top: 1.6rem; + + @media ${device.tabletL} { + margin-top: 1rem; + } + } +` +const AmericasDetails = () => ( + + + {localize( + 'Each of these indices replicates the performance of top publicly traded companies in a segment of the US economy.', + )} + + + ]} + /> + + + ]} + /> + + + ]} + /> + + +) +const AsiaOceaniaDetails = () => ( + + + {localize( + 'Each of these indices replicates the performance of top publicly traded companies in a financial market in the Asia/Oceania region.', + )} + + + ]} + /> + + + ]} + /> + + + ]} + /> + + +) +const EuropeDetails = () => ( + + + {localize( + 'Each of these indices replicates the performance of top publicly traded companies in a financial market in Europe.', + )} + + + ]} + /> + + + ]} + /> + + + ]} + /> + + + ]} + /> + + + ]} + /> + + + ]} + /> + + +) +const DigitalOptions = () => { + return ( + + + + + {localize( + 'Options trading allows for payouts from predicting market movements, without needing to buy an underlying asset. Trade digital options on stock indices.', + )} + + + + + {localize('Option trades available on stock indices')} + + + + + } + svg={RiseFall} + content={ + ]} + /> + } + /> + + + ]} + /> + } + /> + + + + + } + svg={EbEo} + content={ + ]} + /> + } + /> + + + ]} + /> + } + /> + + + + + } + content={ + + } + /> + + + + + {localize('Instruments available for options trading')} + + + ( + + + Codestin Search App + + + + + + )} + renderDetails={AmericasDetails} + /> + ( + + + Codestin Search App + + + + + + )} + renderDetails={AsiaOceaniaDetails} + /> + ( + + + Codestin Search App + + + + + + )} + renderDetails={EuropeDetails} + /> + + + + ) +} + +export default DigitalOptions diff --git a/src/pages/trade-types/multiplier/_margin.js b/src/pages/trade-types/multiplier/_margin.js new file mode 100644 index 00000000000..b7e5e20a5f5 --- /dev/null +++ b/src/pages/trade-types/multiplier/_margin.js @@ -0,0 +1,140 @@ +import React from 'react' +import styled from 'styled-components' +import AvailablePlatforms from '../../markets/_available-platforms.js' +import MarketsAccordion from '../../markets/_markets_accordion.js' +import { Text } from 'components/elements' +import { SectionContainer, Flex, CssGrid } from 'components/containers' +import { localize } from 'components/localization' +import { OTCGERMAN } from 'components/elements/symbols.js' +import device from 'themes/device' + +const Descriptions = styled.div` + padding-bottom: 4rem; + border-bottom: 1px solid var(--color-grey-22); +` +const Col = styled(Flex)` + max-width: 12.9rem; + + @media ${device.tabletL} { + max-width: 10rem; + } +` +const Row = styled(Flex)`` +const StyledText = styled(Text)` + @media ${device.tabletL} { + font-size: 2rem; + text-align: left; + } +` +const Symbol = styled(Flex)` + width: fit-content; + + img { + width: 32px; + height: 32px; + margin-right: 0.8rem; + } + ${Text} { + font-weight: normal; + font-size: var(--text-size-xs); + line-height: 1.14; + } +` +const MarketsList = styled(CssGrid)` + border-left: 1px solid var(--color-grey-22); + border-right: 1px solid var(--color-grey-22); + grid-template-columns: repeat(1, 1fr); + width: 100%; + padding: 2.4rem; + grid-row-gap: 1.6rem; + + @media ${device.tabletL} { + grid-template-columns: repeat(1, 1fr); + + img { + width: 16px; + height: 16px; + margin-right: 4px; + } + ${Text} { + font-size: 1.5rem; + line-height: 1.5; + } + } +` + +const Title = styled(Text)` + text-align: center; + + @media ${device.tabletL} { + max-width: 8rem; + font-weight: 600; + } +` +const MarketsWrapper = styled(Flex)` + flex-direction: column; + + > div { + margin-top: 2.4rem; + } +` +const DetailsContainer = styled(Flex)` + flex-direction: column; + + ${Text} { + font-size: 1.4rem; + margin-top: 1.6rem; + + @media ${device.tabletL} { + margin-top: 1rem; + } + } +` +const EuropeDetails = () => ( + + + {localize( + 'The German Index follows the stock performance of the 30 major listed companies in Germany.', + )} + + +) +const Margin = () => { + return ( + + + + + {localize( + 'Margin trading allows you to purchase larger units of an asset at a fraction of the cost while amplifying your potential profit, but similarly increasing your potential loss.', + )} + + + + + {localize('Instruments available for margin trading')} + + + ( + + + Codestin Search App + + + + + {localize('German Index')} + + + + )} + renderDetails={EuropeDetails} + /> + + + + ) +} + +export default Margin From c1c35349934dfb54efd331999a0cb8ef039991c7 Mon Sep 17 00:00:00 2001 From: suthesan Date: Wed, 30 Dec 2020 14:23:35 +0800 Subject: [PATCH 2/3] added forex and synthetic tabs in multiplier page --- .../multiplier/_available-trades.js | 88 ++--- .../multiplier/_available_instruments.js | 16 - .../multiplier/_digital-options.js | 347 ------------------ src/pages/trade-types/multiplier/_margin.js | 123 ++----- .../multiplier/_synthetic-indices.js | 181 +++++++++ .../multiplier/_what-are-multipliers.js | 8 + 6 files changed, 252 insertions(+), 511 deletions(-) delete mode 100644 src/pages/trade-types/multiplier/_available_instruments.js delete mode 100644 src/pages/trade-types/multiplier/_digital-options.js create mode 100644 src/pages/trade-types/multiplier/_synthetic-indices.js diff --git a/src/pages/trade-types/multiplier/_available-trades.js b/src/pages/trade-types/multiplier/_available-trades.js index 6b85407c855..bbe601b3178 100644 --- a/src/pages/trade-types/multiplier/_available-trades.js +++ b/src/pages/trade-types/multiplier/_available-trades.js @@ -6,20 +6,13 @@ import { Localize } from 'components/localization' import { Header } from 'components/elements' import device from 'themes/device' //SVG -import MarginIcon from 'images/svg/margin.svg' -import OptionsIcon from 'images/svg/options.svg' -import MultipliersIcon from 'images/svg/multipliers.svg' +import ForexIcon from 'images/svg/market-forex.svg' +import SyntheticIcon from 'images/svg/market-synthetic-indices.svg' const StyledSection = styled(SectionContainer)` padding: 5rem 0; ` -const StyledHeader = styled(Header)` - @media ${device.tabletL} { - max-width: 35.75rem; - font-size: 4rem; - margin: 0 auto; - } -` + const StyledContainer = styled(Container)` margin-top: 2.8rem; @@ -55,7 +48,7 @@ const CardWrapper = styled(Flex)` const CardContainer = styled(Flex)` position: relative; width: fit-content; - min-width: 29rem; + min-width: 36rem; height: 7.72rem; padding: 0; margin: 0 -0.6rem; @@ -74,7 +67,7 @@ const CardContainer = styled(Flex)` } h4 { color: ${(props) => - props.active_tab === props.name ? 'var(--color-red)' : 'var(--color-black-3)'}; + props.active_tab === props.name ? 'var(--color-red)' : 'var(--color-black-3)'}; opacity: ${(props) => (props.active_tab === props.name ? '1' : '0.56')}; } @media ${device.tabletL} { @@ -106,12 +99,12 @@ const CardContainer = styled(Flex)` transform-origin: bottom left; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); ${(props) => { - if (props.active_tab === props.name) - return css` + if (props.active_tab === props.name) + return css` background-color: #ffffff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); ` - }} + }} } @media ${device.tabletL} { width: 100%; @@ -138,15 +131,7 @@ const TabOptionIcon = styled.img` ` }} ` -const TabMultiplierIcon = styled.img` - min-width: 16px; - ${(props) => { - if (props.active_tab === props.name) - return css` - margin-left: 16px; - ` - }} -` + const ContentWrapper = styled.div` width: 100%; max-width: 99.6rem; @@ -162,36 +147,29 @@ const ContentWrapper = styled.div` const CardHeader = styled(Header)` @media ${device.tabletL} { font-size: 1.75rem; + line-height: 16px; } ` const Card = ({ display_name, active_tab, onTabChange, name }) => { return ( onTabChange(name)}> - {active_tab === 'Margin' && ( + {active_tab === 'Forex' && ( )} - {active_tab === 'Options' && ( + {active_tab === 'Synthetic Indices' && ( )} - {active_tab === 'Multipliers' && ( - - )} {display_name} @@ -209,47 +187,38 @@ Card.propTypes = { class AvailableTrades extends React.Component { state = { - active_tab: 'Margin', + active_tab: 'Forex', } handleTabChange = (new_tab) => { if (new_tab === this.state.active_tab) return this.setState({ active_tab: new_tab }) } render() { - const { Margin, DigitalOptions, Multipliers} = this.props + const { Forex, SyntheticIndices } = this.props return ( - {Margin && ( - } - onTabChange={() => this.handleTabChange('Margin')} - active_tab={this.state.active_tab} - /> - )} - {DigitalOptions && ( + {Forex && ( } - onTabChange={() => this.handleTabChange('Options')} + name="Forex" + display_name={} + onTabChange={() => this.handleTabChange('Forex')} active_tab={this.state.active_tab} /> )} - {Multipliers && ( + {SyntheticIndices && ( } - onTabChange={() => this.handleTabChange('Multipliers')} + name="Synthetic Indices" + display_name={} + onTabChange={() => this.handleTabChange('Synthetic Indices')} active_tab={this.state.active_tab} /> )} - {this.state.active_tab === 'Margin' && } - {this.state.active_tab === 'Options' && } - {this.state.active_tab === 'Multipliers' && } + {this.state.active_tab === 'Forex' && } + {this.state.active_tab === 'Synthetic Indices' && } @@ -258,10 +227,9 @@ class AvailableTrades extends React.Component { } AvailableTrades.propTypes = { - DigitalOptions: PropTypes.func, display_title: PropTypes.object, - Margin: PropTypes.func, - Multipliers: PropTypes.func, + Forex: PropTypes.func, + SyntheticIndices: PropTypes.func, } export default AvailableTrades diff --git a/src/pages/trade-types/multiplier/_available_instruments.js b/src/pages/trade-types/multiplier/_available_instruments.js deleted file mode 100644 index 84bd6269a69..00000000000 --- a/src/pages/trade-types/multiplier/_available_instruments.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import Loadable from '@loadable/component' -import Margin from './_margin.js' -import DigitalOptions from './_digital-options.js' -const AvailableTrades = Loadable(() => import('./_available-trades.js')) - -const AvailableInstruments = () => { - return ( - - ); -} - -export default AvailableInstruments \ No newline at end of file diff --git a/src/pages/trade-types/multiplier/_digital-options.js b/src/pages/trade-types/multiplier/_digital-options.js deleted file mode 100644 index 2ca6c8583d2..00000000000 --- a/src/pages/trade-types/multiplier/_digital-options.js +++ /dev/null @@ -1,347 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { Americas, AsiaOceania, Europe } from '../../markets/sub-markets/_submarkets.js' -import AvailableOptions from '../../markets/_available-options.js' -import MarketsAccordion from '../../markets/_markets_accordion.js' -import AvailablePlatforms from '../../markets/_available-platforms.js' -import { Text } from 'components/elements' -import { SectionContainer, Flex, CssGrid } from 'components/containers' -import { localize, Localize } from 'components/localization' -import device from 'themes/device' -//SVG -import RiseFall from 'images/svg/options/rise-fall.svg' -import HigherLower from 'images/svg/options/higher-lower.svg' -import EbEo from 'images/svg/options/eb-eo.svg' -import SbGo from 'images/svg/options/sb-go.svg' -import TNT from 'images/svg/options/tnt.svg' - -const Descriptions = styled.div` - padding-bottom: 4rem; - border-bottom: 1px solid var(--color-grey-21); -` -const Col = styled(Flex)` - max-width: 13.2rem; - - @media ${device.tabletL} { - max-width: 10rem; - } -` -const Row = styled(Flex)`` - -const MarketsWrapper = styled(Flex)` - flex-direction: column; - - > div { - margin-top: 2.4rem; - } -` -const MarketsList = styled(CssGrid)` - border-left: 1px solid var(--color-grey-22); - border-right: 1px solid var(--color-grey-22); - width: 100%; - padding: 2.4rem 1.6rem; - grid-row-gap: 1.6rem; - - @media ${device.tabletL} { - grid-template-columns: repeat(1, 1fr); - - img { - width: 16px; - height: 16px; - margin-right: 4px; - } - ${Text} { - font-size: 1.5rem; - line-height: 1.5; - } - } -` -const Options = styled(Descriptions)` - margin-top: 2.4rem; - - ${Row} { - margin-top: 4rem; - border: unset; - justify-content: space-between; - - @media ${device.tabletL} { - flex-direction: column; - } - - ${Col} { - max-width: 38.4rem; - } - } - div:first-child { - margin-top: 0; - } -` -const StyledText = styled(Text)` - @media ${device.tabletL} { - font-size: 2rem; - text-align: left; - } -` -const Title = styled(Text)` - text-align: center; - - @media ${device.tabletL} { - max-width: 8rem; - font-weight: 600; - } -` - -const DetailsContainer = styled(Flex)` - flex-direction: column; - - ${Text} { - font-size: 1.4rem; - margin-top: 1.6rem; - - @media ${device.tabletL} { - margin-top: 1rem; - } - } -` -const AmericasDetails = () => ( - - - {localize( - 'Each of these indices replicates the performance of top publicly traded companies in a segment of the US economy.', - )} - - - ]} - /> - - - ]} - /> - - - ]} - /> - - -) -const AsiaOceaniaDetails = () => ( - - - {localize( - 'Each of these indices replicates the performance of top publicly traded companies in a financial market in the Asia/Oceania region.', - )} - - - ]} - /> - - - ]} - /> - - - ]} - /> - - -) -const EuropeDetails = () => ( - - - {localize( - 'Each of these indices replicates the performance of top publicly traded companies in a financial market in Europe.', - )} - - - ]} - /> - - - ]} - /> - - - ]} - /> - - - ]} - /> - - - ]} - /> - - - ]} - /> - - -) -const DigitalOptions = () => { - return ( - - - - - {localize( - 'Options trading allows for payouts from predicting market movements, without needing to buy an underlying asset. Trade digital options on stock indices.', - )} - - - - - {localize('Option trades available on stock indices')} - - - - - } - svg={RiseFall} - content={ - ]} - /> - } - /> - - - ]} - /> - } - /> - - - - - } - svg={EbEo} - content={ - ]} - /> - } - /> - - - ]} - /> - } - /> - - - - - } - content={ - - } - /> - - - - - {localize('Instruments available for options trading')} - - - ( - - - Codestin Search App - - - - - - )} - renderDetails={AmericasDetails} - /> - ( - - - Codestin Search App - - - - - - )} - renderDetails={AsiaOceaniaDetails} - /> - ( - - - Codestin Search App - - - - - - )} - renderDetails={EuropeDetails} - /> - - - - ) -} - -export default DigitalOptions diff --git a/src/pages/trade-types/multiplier/_margin.js b/src/pages/trade-types/multiplier/_margin.js index b7e5e20a5f5..0389e93d9f8 100644 --- a/src/pages/trade-types/multiplier/_margin.js +++ b/src/pages/trade-types/multiplier/_margin.js @@ -1,55 +1,30 @@ import React from 'react' import styled from 'styled-components' +import { MajorPairs } from '../../markets/sub-markets/_submarkets.js' import AvailablePlatforms from '../../markets/_available-platforms.js' -import MarketsAccordion from '../../markets/_markets_accordion.js' import { Text } from 'components/elements' import { SectionContainer, Flex, CssGrid } from 'components/containers' import { localize } from 'components/localization' -import { OTCGERMAN } from 'components/elements/symbols.js' import device from 'themes/device' -const Descriptions = styled.div` - padding-bottom: 4rem; - border-bottom: 1px solid var(--color-grey-22); -` const Col = styled(Flex)` max-width: 12.9rem; - - @media ${device.tabletL} { - max-width: 10rem; - } -` -const Row = styled(Flex)`` -const StyledText = styled(Text)` - @media ${device.tabletL} { - font-size: 2rem; - text-align: left; - } + padding: 0 0.4rem; ` -const Symbol = styled(Flex)` - width: fit-content; - - img { - width: 32px; - height: 32px; - margin-right: 0.8rem; - } - ${Text} { - font-weight: normal; - font-size: var(--text-size-xs); - line-height: 1.14; - } +const Row = styled(Flex)` + border: 1px solid var(--color-grey-22); + margin-top: 2.4rem; + border-radius: 8px; ` const MarketsList = styled(CssGrid)` border-left: 1px solid var(--color-grey-22); - border-right: 1px solid var(--color-grey-22); - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(5, 1fr); width: 100%; padding: 2.4rem; grid-row-gap: 1.6rem; @media ${device.tabletL} { - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(3, 1fr); img { width: 16px; @@ -61,77 +36,49 @@ const MarketsList = styled(CssGrid)` line-height: 1.5; } } -` + @media ${device.mobileL} { + grid-template-columns: repeat(2, 1fr); + } +` +const StyledText = styled(Text)` + @media ${device.tabletL} { + font-size: 2rem; + text-align: left; + } +` const Title = styled(Text)` text-align: center; @media ${device.tabletL} { - max-width: 8rem; font-weight: 600; } ` -const MarketsWrapper = styled(Flex)` - flex-direction: column; - > div { - margin-top: 2.4rem; - } +const StyledTitle = styled(Text)` + text-align: left; + font-weight: bold; ` -const DetailsContainer = styled(Flex)` - flex-direction: column; - - ${Text} { - font-size: 1.4rem; - margin-top: 1.6rem; - @media ${device.tabletL} { - margin-top: 1rem; - } - } -` -const EuropeDetails = () => ( - - - {localize( - 'The German Index follows the stock performance of the 30 major listed companies in Germany.', - )} - - -) const Margin = () => { return ( - - - {localize( - 'Margin trading allows you to purchase larger units of an asset at a fraction of the cost while amplifying your potential profit, but similarly increasing your potential loss.', - )} - - - - - {localize('Instruments available for margin trading')} + + {localize('Major Pairs')} + + + {localize('Buy one currency and sell another using all major currency pairs on Forex.')} - - ( - - - Codestin Search App - - - - - {localize('German Index')} - - - - )} - renderDetails={EuropeDetails} - /> - + + + Codestin Search App + + + + + + ) diff --git a/src/pages/trade-types/multiplier/_synthetic-indices.js b/src/pages/trade-types/multiplier/_synthetic-indices.js new file mode 100644 index 00000000000..30208120c16 --- /dev/null +++ b/src/pages/trade-types/multiplier/_synthetic-indices.js @@ -0,0 +1,181 @@ +import React from 'react' +import styled from 'styled-components' +import { CrashBoom, ContinuousIndices } from '../../markets/sub-markets/_submarkets.js' +import MarketsAccordion from '../../markets/_markets_accordion.js' +import AvailablePlatforms from '../../markets/_available-platforms.js' +import { Text } from 'components/elements' +import { SectionContainer, Flex, CssGrid, Show } from 'components/containers' +import { localize, Localize } from 'components/localization' +import device from 'themes/device' + +const Col = styled(Flex)` + max-width: 13.2rem; + + @media ${device.tabletL} { + max-width: 12rem; + } +` +const Row = styled(Flex)`` + +const MarketsWrapper = styled(Flex)` + flex-direction: column; + + > div { + margin-top: 2.4rem; + } +` +const MarketsList = styled(CssGrid)` + border-left: 1px solid var(--color-grey-22); + border-right: 1px solid var(--color-grey-22); + width: 100%; + padding: 2.4rem 0.7rem; + grid-row-gap: 1.6rem; + grid-template-columns: repeat(3, 1fr); + + @media ${device.tabletL} { + grid-template-columns: repeat(2, 1fr); + + img { + width: 16px; + height: 16px; + margin-right: 4px; + } + ${Text} { + font-size: 1.5rem; + line-height: 1.5; + } + } + + @media ${device.tabletS} { + grid-template-columns: repeat(1, 1fr); + } +` +const StyledText = styled(Text)` + @media ${device.tabletL} { + font-size: 2rem; + text-align: left; + } +` +const Title = styled(Text)` + text-align: center; + + @media ${device.tabletL} { + font-weight: 600; + } +` + +const StyledTitle = styled(Text)` + text-align: left; + font-weight: bold; +` + +const DetailsContainer = styled(Flex)` + flex-direction: column; + + ${Text} { + font-size: 1.4rem; + margin-top: 1.6rem; + + @media ${device.tabletL} { + margin-top: 1rem; + } + } +` + +const CrashBoomDetails = () => ( + + + ]} + /> + + +) + +const ContinuousIndicesDetails = () => ( + + + {localize( + 'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.', + )} + + + ]} + /> + + + ]} + /> + + +) + +const SyntheticIndices = () => { + return ( + + + + {localize('Crash & Boom')} + + + {localize('The Crash and Boom Index allows you to amplify your trades up to 400x without risking more than your stake with multipliers. Exclusive to Deriv, Crash and Boom can be traded 24/7 on DTrader.')} + + + ( + + + + Codestin Search App + + + Codestin Search App + + + + + + + )} + renderDetails={CrashBoomDetails} + /> + + + + + {localize('Continuous Indices')} + + + ( + + + Codestin Search App + + + + + + )} + renderDetails={ContinuousIndicesDetails} + /> + + + + + + ) +} + +export default SyntheticIndices diff --git a/src/pages/trade-types/multiplier/_what-are-multipliers.js b/src/pages/trade-types/multiplier/_what-are-multipliers.js index aadff28eed4..e52306f8cf3 100644 --- a/src/pages/trade-types/multiplier/_what-are-multipliers.js +++ b/src/pages/trade-types/multiplier/_what-are-multipliers.js @@ -1,7 +1,10 @@ import React from 'react' import styled from 'styled-components' import { graphql, useStaticQuery } from 'gatsby' +import Loadable from '@loadable/component' import { SmallContainer, Grid, WhyTradeItem } from '../components/_style' +import Margin from './_margin.js' +import SyntheticIndices from './_synthetic-indices.js' import device from 'themes/device' import { SectionContainer, Flex } from 'components/containers' import { Header, Text, QueryImage } from 'components/elements' @@ -14,6 +17,7 @@ import ResponsivePlatform from 'images/svg/trade-types/responsive-platform.svg' import FriendlySupport from 'images/svg/trade-types/friendly-support.svg' import Seven from 'images/svg/trade-types/seven.svg' import CrashBoom from 'images/svg/trade-types/crash-boom.svg' +const AvailableTrades = Loadable(() => import('./_available-trades.js')) const StyledHeader = styled(Header)` @media ${device.tablet} { @@ -242,6 +246,10 @@ const WhatAreOptions = () => { +
From 0f5e9433fa4cff47f20ff70d7027042e86a9ea2a Mon Sep 17 00:00:00 2001 From: suthesan Date: Tue, 5 Jan 2021 11:39:27 +0800 Subject: [PATCH 3/3] updated content for available trades for multipliers section --- .../multiplier/_available-trades.js | 21 ++++++--- src/pages/trade-types/multiplier/_margin.js | 23 +++++----- .../multiplier/_synthetic-indices.js | 44 ++++++++----------- .../multiplier/_what-are-multipliers.js | 1 + src/themes/variables.js | 1 + 5 files changed, 48 insertions(+), 42 deletions(-) diff --git a/src/pages/trade-types/multiplier/_available-trades.js b/src/pages/trade-types/multiplier/_available-trades.js index bbe601b3178..37d3e2e0232 100644 --- a/src/pages/trade-types/multiplier/_available-trades.js +++ b/src/pages/trade-types/multiplier/_available-trades.js @@ -9,6 +9,14 @@ import device from 'themes/device' import ForexIcon from 'images/svg/market-forex.svg' import SyntheticIcon from 'images/svg/market-synthetic-indices.svg' +const StyledHeader = styled(Header)` + @media ${device.tabletL} { + max-width: 35.75rem; + font-size: 32px; + margin: 0 auto; + } +` + const StyledSection = styled(SectionContainer)` padding: 5rem 0; ` @@ -74,7 +82,7 @@ const CardContainer = styled(Flex)` width: 100%; height: 100%; justify-content: flex-start; - padding: 10px 44px 0 0; + padding: 10px 44px 0; img { width: 16px; @@ -94,14 +102,14 @@ const CardContainer = styled(Flex)` z-index: -1; border-bottom: none; border-radius: 10px 30px 0 0; - background: #f3f3f3; + background: var(--color-grey-36); transform: perspective(14px) rotateX(1.4deg); transform-origin: bottom left; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); ${(props) => { if (props.active_tab === props.name) return css` - background-color: #ffffff; + background-color: var(--color-white); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); ` }} @@ -136,7 +144,7 @@ const ContentWrapper = styled.div` width: 100%; max-width: 99.6rem; display: block; - background: #ffffff; + background: var(--color-white); border-radius: 0.15em; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); @@ -194,9 +202,12 @@ class AvailableTrades extends React.Component { this.setState({ active_tab: new_tab }) } render() { - const { Forex, SyntheticIndices } = this.props + const { display_title, Forex, SyntheticIndices } = this.props return ( + + {display_title} + {Forex && ( diff --git a/src/pages/trade-types/multiplier/_margin.js b/src/pages/trade-types/multiplier/_margin.js index 0389e93d9f8..523ae48a16e 100644 --- a/src/pages/trade-types/multiplier/_margin.js +++ b/src/pages/trade-types/multiplier/_margin.js @@ -7,6 +7,12 @@ import { SectionContainer, Flex, CssGrid } from 'components/containers' import { localize } from 'components/localization' import device from 'themes/device' +const StyledText = styled(Text)` + @media ${device.tabletL} { + text-align: left; + } +` + const Col = styled(Flex)` max-width: 12.9rem; padding: 0 0.4rem; @@ -41,12 +47,7 @@ const MarketsList = styled(CssGrid)` grid-template-columns: repeat(2, 1fr); } ` -const StyledText = styled(Text)` - @media ${device.tabletL} { - font-size: 2rem; - text-align: left; - } -` + const Title = styled(Text)` text-align: center; @@ -62,14 +63,14 @@ const StyledTitle = styled(Text)` const Margin = () => { return ( - + + + {localize('Trade Forex with multipliers for high leverage, tight spreads and benefit from multiple opportunities to trade on world events.')} + - {localize('Major Pairs')} + {localize('Forex pairs available for Multipliers trading')} - - {localize('Buy one currency and sell another using all major currency pairs on Forex.')} - Codestin Search App diff --git a/src/pages/trade-types/multiplier/_synthetic-indices.js b/src/pages/trade-types/multiplier/_synthetic-indices.js index 30208120c16..c0ce6403c3e 100644 --- a/src/pages/trade-types/multiplier/_synthetic-indices.js +++ b/src/pages/trade-types/multiplier/_synthetic-indices.js @@ -8,6 +8,12 @@ import { SectionContainer, Flex, CssGrid, Show } from 'components/containers' import { localize, Localize } from 'components/localization' import device from 'themes/device' +const StyledText = styled(Text)` + @media ${device.tabletL} { + text-align: left; + } +` + const Col = styled(Flex)` max-width: 13.2rem; @@ -15,7 +21,6 @@ const Col = styled(Flex)` max-width: 12rem; } ` -const Row = styled(Flex)`` const MarketsWrapper = styled(Flex)` flex-direction: column; @@ -41,7 +46,7 @@ const MarketsList = styled(CssGrid)` margin-right: 4px; } ${Text} { - font-size: 1.5rem; + font-size: 12px; line-height: 1.5; } } @@ -50,12 +55,7 @@ const MarketsList = styled(CssGrid)` grid-template-columns: repeat(1, 1fr); } ` -const StyledText = styled(Text)` - @media ${device.tabletL} { - font-size: 2rem; - text-align: left; - } -` + const Title = styled(Text)` text-align: center; @@ -64,11 +64,6 @@ const Title = styled(Text)` } ` -const StyledTitle = styled(Text)` - text-align: left; - font-weight: bold; -` - const DetailsContainer = styled(Flex)` flex-direction: column; @@ -117,18 +112,18 @@ const ContinuousIndicesDetails = () => ( const SyntheticIndices = () => { return ( - + - - {localize('Crash & Boom')} - - - {localize('The Crash and Boom Index allows you to amplify your trades up to 400x without risking more than your stake with multipliers. Exclusive to Deriv, Crash and Boom can be traded 24/7 on DTrader.')} + + {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('Synthetics indices available for Multipliers trading')} + ( - + @@ -144,20 +139,17 @@ const SyntheticIndices = () => { <MarketsList> <CrashBoom /> </MarketsList> - </Row> + </Flex> )} renderDetails={CrashBoomDetails} /> </MarketsWrapper> <AvailablePlatforms dtrader /> - <StyledTitle mt='20px'> - {localize('Continuous Indices')} - </StyledTitle> <MarketsWrapper direction="column"> <MarketsAccordion renderTitle={() => ( - <Row jc="flex-start" ai="center"> + <Flex jc="flex-start" ai="center"> <Col> <Title weight="bold" align="center"> {localize('Continuous indices')} @@ -166,7 +158,7 @@ const SyntheticIndices = () => { <MarketsList> <ContinuousIndices /> </MarketsList> - </Row> + </Flex> )} renderDetails={ContinuousIndicesDetails} /> diff --git a/src/pages/trade-types/multiplier/_what-are-multipliers.js b/src/pages/trade-types/multiplier/_what-are-multipliers.js index e52306f8cf3..090a0132a7a 100644 --- a/src/pages/trade-types/multiplier/_what-are-multipliers.js +++ b/src/pages/trade-types/multiplier/_what-are-multipliers.js @@ -247,6 +247,7 @@ const WhatAreOptions = () => { </SmallContainer> </StyledSectionContainer> <AvailableTrades + display_title={localize('Instruments available to trade on Multipliers')} Forex={Margin} SyntheticIndices={SyntheticIndices} /> diff --git a/src/themes/variables.js b/src/themes/variables.js index 70ffc3eb1f0..594528be577 100644 --- a/src/themes/variables.js +++ b/src/themes/variables.js @@ -53,6 +53,7 @@ const Variables = css` --color-grey-33: #8e9190; --color-grey-34: #e7e7e7; --color-grey-35: #f5f7f9; + --color-grey-36: #f3f3f3; --color-green: #85acb0; --color-blue: #4c76be; --color-blue-2: #365899;