diff --git a/src/pages/trade-types/components/_style.js b/src/pages/trade-types/components/_style.ts similarity index 100% rename from src/pages/trade-types/components/_style.js rename to src/pages/trade-types/components/_style.ts diff --git a/src/pages/trade-types/components/_side-tab.js b/src/pages/trade-types/components/_tabs.tsx similarity index 92% rename from src/pages/trade-types/components/_side-tab.js rename to src/pages/trade-types/components/_tabs.tsx index 4fb19391a12..8eda435ed95 100644 --- a/src/pages/trade-types/components/_side-tab.js +++ b/src/pages/trade-types/components/_tabs.tsx @@ -14,7 +14,11 @@ const TabContent = styled.div` // ` -const TabButton = styled.div` +type TabButtonType = { + selected: boolean +} + +const TabButton = styled.div` position: relative; z-index: 2; display: flex; @@ -37,17 +41,20 @@ const TabButton = styled.div` margin-bottom: 0; } ` +type TabListType = { + is_reverse: boolean +} + +const right = css` + margin-right: 2.4rem; +` +const left = css` + margin-left: 2.4rem; +` -const TabList = styled.div` +const TabList = styled.div` max-width: 100%; - ${(props) => - props.is_reverse - ? css` - margin-left: 2.4rem; - ` - : css` - margin-right: 2.4rem; - `} + ${(props) => (props.is_reverse ? left : right)} ` const TabListWrapper = styled.div` @@ -121,7 +128,7 @@ const StyledText = styled(Text)` ` const TabPanel = ({ children, className }) => ( - + {children} ) @@ -129,6 +136,8 @@ const TabPanel = ({ children, className }) => ( TabPanel.propTypes = { children: PropTypes.node, className: PropTypes.string, + description: PropTypes.node, + label: PropTypes.node, } const Tabs = ({ children, is_reverse, className, max_width, has_notice, notice_content }) => { diff --git a/src/pages/trade-types/components/_timeline.js b/src/pages/trade-types/components/_timeline.tsx similarity index 100% rename from src/pages/trade-types/components/_timeline.js rename to src/pages/trade-types/components/_timeline.tsx diff --git a/src/pages/trade-types/margin/_available-markets.js b/src/pages/trade-types/margin/_available-markets.tsx similarity index 98% rename from src/pages/trade-types/margin/_available-markets.js rename to src/pages/trade-types/margin/_available-markets.tsx index b47bbe796f9..35d77ba4d2a 100644 --- a/src/pages/trade-types/margin/_available-markets.js +++ b/src/pages/trade-types/margin/_available-markets.tsx @@ -10,7 +10,7 @@ import Forex from 'images/svg/trade-types/forex.svg' import Commodities from 'images/svg/trade-types/commodities.svg' import SyntheticIndices from 'images/svg/trade-types/synthetic-indices.svg' import StockIndices from 'images/svg/trade-types/stock-indices.svg' -import { DerivStore } from 'store' +import { DerivStore, DerivStoreType } from 'store' const MobileCardHeader = styled(Flex)` margin-bottom: 0.8rem; @@ -38,7 +38,7 @@ const StyledText = styled(Text)` ` const AvailableMarkets = () => { - const { is_eu_country } = React.useContext(DerivStore) + const { is_eu_country } = React.useContext(DerivStore) return ( <> diff --git a/src/pages/trade-types/margin/_why-trade-margin.js b/src/pages/trade-types/margin/_why-trade-margin.tsx similarity index 97% rename from src/pages/trade-types/margin/_why-trade-margin.js rename to src/pages/trade-types/margin/_why-trade-margin.tsx index c7d45801e5f..7f0ee457ad7 100644 --- a/src/pages/trade-types/margin/_why-trade-margin.js +++ b/src/pages/trade-types/margin/_why-trade-margin.tsx @@ -9,10 +9,10 @@ import MaximizePotentialProfit from 'images/svg/trade-types/maximize-potential-p import InstantAccess from 'images/svg/trade-types/instant-access.svg' import SyntheticIndices from 'images/svg/trade-types/synthetic-indices.svg' import { LinkButton } from 'components/form' -import { DerivStore } from 'store' +import { DerivStore, DerivStoreType } from 'store' const WhyTradeMargin = () => { - const { is_eu_country } = React.useContext(DerivStore) + const { is_eu_country } = React.useContext(DerivStore) return ( <> diff --git a/src/pages/trade-types/multiplier/_available-trades.js b/src/pages/trade-types/multiplier/_available-trades.tsx similarity index 59% rename from src/pages/trade-types/multiplier/_available-trades.js rename to src/pages/trade-types/multiplier/_available-trades.tsx index fd7b9570dc1..44dab931def 100644 --- a/src/pages/trade-types/multiplier/_available-trades.js +++ b/src/pages/trade-types/multiplier/_available-trades.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import styled, { css } from 'styled-components' import PropTypes from 'prop-types' import { SectionContainer, Flex, Container } from 'components/containers' @@ -54,6 +54,11 @@ const CardWrapper = styled(Flex)` overflow: scroll; } ` +const backgroundAndShadow = css` + background-color: var(--color-white); + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); +` + const CardContainer = styled(Flex)` position: relative; width: fit-content; @@ -118,11 +123,7 @@ 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` - background-color: var(--color-white); - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); - ` + if (props.active_tab === props.name) return backgroundAndShadow }} } @media ${device.tabletL} { @@ -143,22 +144,19 @@ const CardContainer = styled(Flex)` } } ` -const TabCFDIcon = styled.img` - min-width: 16px; - ${(props) => { - if (props.active_tab === props.name) - return css` - margin-left: 16px; - ` - }} +type StyledType = { + active_tab: string + name: string +} + +const marginLeft = css` + margin-left: 16px; ` -const TabOptionIcon = styled.img` + +const TabIcon = styled.img` min-width: 16px; ${(props) => { - if (props.active_tab === props.name) - return css` - margin-left: 16px; - ` + if (props.active_tab === props.name) return marginLeft }} ` @@ -185,18 +183,13 @@ const Card = ({ display_name, active_tab, onTabChange, name }) => { onTabChange(name)}> {active_tab === 'Forex' && ( - + )} {active_tab === 'Synthetic Indices' && ( - + )} {active_tab === 'Cryptocurrencies' && ( - + )} {display_name} @@ -213,57 +206,54 @@ Card.propTypes = { onTabChange: PropTypes.func, } -class AvailableTrades extends React.Component { - state = { - active_tab: 'Forex', - } - handleTabChange = (new_tab) => { - if (new_tab === this.state.active_tab) return - this.setState({ active_tab: new_tab }) - } - render() { - const { display_title, Forex, SyntheticIndices, Cryptocurrencies } = this.props - return ( - - - {display_title} - - - - {Forex && ( - } - onTabChange={() => this.handleTabChange('Forex')} - active_tab={this.state.active_tab} - /> - )} - {SyntheticIndices && ( - } - onTabChange={() => this.handleTabChange('Synthetic Indices')} - active_tab={this.state.active_tab} - /> - )} - {Cryptocurrencies && ( - } - onTabChange={() => this.handleTabChange('Cryptocurrencies')} - active_tab={this.state.active_tab} - /> - )} - - - {this.state.active_tab === 'Forex' && } - {this.state.active_tab === 'Synthetic Indices' && } - {this.state.active_tab === 'Cryptocurrencies' && } - - - - ) +const AvailableTrades = ({ display_title, Forex, SyntheticIndices, Cryptocurrencies }) => { + const [active_tab, setActiveTab] = useState('Forex') + + const handleTabChange = (new_tab: string) => { + if (new_tab === active_tab) return + setActiveTab(new_tab) } + + return ( + + + {display_title} + + + + {Forex && ( + } + onTabChange={() => handleTabChange('Forex')} + active_tab={active_tab} + /> + )} + {SyntheticIndices && ( + } + onTabChange={() => handleTabChange('Synthetic Indices')} + active_tab={active_tab} + /> + )} + {Cryptocurrencies && ( + } + onTabChange={() => handleTabChange('Cryptocurrencies')} + active_tab={active_tab} + /> + )} + + + {active_tab === 'Forex' && } + {active_tab === 'Synthetic Indices' && } + {active_tab === 'Cryptocurrencies' && } + + + + ) } AvailableTrades.propTypes = { diff --git a/src/pages/trade-types/multiplier/_cfds.js b/src/pages/trade-types/multiplier/_cfds.tsx similarity index 100% rename from src/pages/trade-types/multiplier/_cfds.js rename to src/pages/trade-types/multiplier/_cfds.tsx diff --git a/src/pages/trade-types/multiplier/_cryptocurrencies.js b/src/pages/trade-types/multiplier/_cryptocurrencies.tsx similarity index 100% rename from src/pages/trade-types/multiplier/_cryptocurrencies.js rename to src/pages/trade-types/multiplier/_cryptocurrencies.tsx diff --git a/src/pages/trade-types/multiplier/_how-multiplier-works.js b/src/pages/trade-types/multiplier/_how-options-works.tsx similarity index 99% rename from src/pages/trade-types/multiplier/_how-multiplier-works.js rename to src/pages/trade-types/multiplier/_how-options-works.tsx index 48763776a54..d874e9d3576 100644 --- a/src/pages/trade-types/multiplier/_how-multiplier-works.js +++ b/src/pages/trade-types/multiplier/_how-options-works.tsx @@ -2,7 +2,7 @@ import React from 'react' import { graphql, useStaticQuery } from 'gatsby' import styled from 'styled-components' import { SmallContainer, Grid, HowItWorksItem } from '../components/_style' -import SideTab from '../components/_side-tab' +import SideTab from '../components/_tabs' import { SectionContainer, Flex } from 'components/containers' import { Header, Text, QueryImage } from 'components/elements' import { localize, Localize } from 'components/localization' diff --git a/src/pages/trade-types/multiplier/_markets-available.js b/src/pages/trade-types/multiplier/_markets-available.tsx similarity index 100% rename from src/pages/trade-types/multiplier/_markets-available.js rename to src/pages/trade-types/multiplier/_markets-available.tsx diff --git a/src/pages/trade-types/multiplier/_start-trading.js b/src/pages/trade-types/multiplier/_start-trading.tsx similarity index 100% rename from src/pages/trade-types/multiplier/_start-trading.js rename to src/pages/trade-types/multiplier/_start-trading.tsx diff --git a/src/pages/trade-types/multiplier/_synthetic-indices.js b/src/pages/trade-types/multiplier/_synthetic-indices.tsx similarity index 100% rename from src/pages/trade-types/multiplier/_synthetic-indices.js rename to src/pages/trade-types/multiplier/_synthetic-indices.tsx diff --git a/src/pages/trade-types/multiplier/_things-in-mind.js b/src/pages/trade-types/multiplier/_things-in-mind.tsx similarity index 100% rename from src/pages/trade-types/multiplier/_things-in-mind.js rename to src/pages/trade-types/multiplier/_things-in-mind.tsx diff --git a/src/pages/trade-types/multiplier/_what-are-multipliers.js b/src/pages/trade-types/multiplier/_what-are-options.tsx similarity index 99% rename from src/pages/trade-types/multiplier/_what-are-multipliers.js rename to src/pages/trade-types/multiplier/_what-are-options.tsx index dbb4eed1872..91c5ce314a0 100644 --- a/src/pages/trade-types/multiplier/_what-are-multipliers.js +++ b/src/pages/trade-types/multiplier/_what-are-options.tsx @@ -3,9 +3,9 @@ import styled from 'styled-components' import { graphql, useStaticQuery } from 'gatsby' import Loadable from '@loadable/component' import { SmallContainer, Grid, WhyTradeItem } from '../components/_style' -import CFDs from './_cfds.js' -import SyntheticIndices from './_synthetic-indices.js' -import Cryptocurrencies from './_cryptocurrencies.js' +import CFDs from './_cfds' +import SyntheticIndices from './_synthetic-indices' +import Cryptocurrencies from './_cryptocurrencies' import device from 'themes/device' import { SectionContainer, Flex } from 'components/containers' import { Header, Text, QueryImage } from 'components/elements' @@ -21,7 +21,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 AvailableTrades = Loadable(() => import('./_available-trades')) const StyledHeader = styled(Header)` @media ${device.tablet} { @@ -65,7 +65,7 @@ const Row = styled(Flex)` } ` -const RowColumn = styled.div` +const RowColumn = styled.div<{ isHeader?: boolean }>` width: 360px; margin-right: 40px; diff --git a/src/pages/trade-types/multiplier/index.js b/src/pages/trade-types/multiplier/index.tsx similarity index 93% rename from src/pages/trade-types/multiplier/index.js rename to src/pages/trade-types/multiplier/index.tsx index 667a8921f0a..043916de87a 100644 --- a/src/pages/trade-types/multiplier/index.js +++ b/src/pages/trade-types/multiplier/index.tsx @@ -2,13 +2,13 @@ import React from 'react' import styled from 'styled-components' import Loadable from '@loadable/component' import { SmallContainer, Hero } from '../components/_style' -import WhatAreMultiplier from './_what-are-multipliers' +import WhatAreMultiplier from './_what-are-options' import { SEO } from 'components/containers' import { Header } from 'components/elements' import Layout from 'components/layout/layout' import { localize, WithIntl } from 'components/localization' import device from 'themes/device' -const HowMultiplierWorks = Loadable(() => import('./_how-multiplier-works')) +const HowMultiplierWorks = Loadable(() => import('./_how-options-works')) const ThingsInMind = Loadable(() => import('./_things-in-mind')) const StartTrading = Loadable(() => import('./_start-trading')) const MarketsAvailable = Loadable(() => import('./_markets-available')) diff --git a/src/pages/trade-types/options/_how-options-works.js b/src/pages/trade-types/options/_how-options-works.tsx similarity index 99% rename from src/pages/trade-types/options/_how-options-works.js rename to src/pages/trade-types/options/_how-options-works.tsx index c1ac29df181..684afab9ff9 100644 --- a/src/pages/trade-types/options/_how-options-works.js +++ b/src/pages/trade-types/options/_how-options-works.tsx @@ -2,7 +2,7 @@ import React from 'react' import { graphql, useStaticQuery } from 'gatsby' import styled from 'styled-components' import { SmallContainer, Grid, HowItWorksItem } from '../components/_style' -import SideTab from '../components/_side-tab' +import SideTab from '../components/_tabs' import { SectionContainer, Flex, Container } from 'components/containers' import { Header, Text, QueryImage } from 'components/elements' import { localize, Localize } from 'components/localization' diff --git a/src/pages/trade-types/options/_markets-available.js b/src/pages/trade-types/options/_markets-available.tsx similarity index 100% rename from src/pages/trade-types/options/_markets-available.js rename to src/pages/trade-types/options/_markets-available.tsx diff --git a/src/pages/trade-types/options/_options-to-trade.js b/src/pages/trade-types/options/_options-to-trade.tsx similarity index 99% rename from src/pages/trade-types/options/_options-to-trade.js rename to src/pages/trade-types/options/_options-to-trade.tsx index 4f4f93e313e..6b753972854 100644 --- a/src/pages/trade-types/options/_options-to-trade.js +++ b/src/pages/trade-types/options/_options-to-trade.tsx @@ -31,7 +31,7 @@ const MiddleText = styled(Text)` } ` -const WhatAreOptions = () => { +const OptionsToTrade = () => { return ( @@ -456,4 +456,4 @@ const LookbacksGrid = () => { ) } -export default WhatAreOptions +export default OptionsToTrade diff --git a/src/pages/trade-types/options/_start-trading.js b/src/pages/trade-types/options/_start-trading.tsx similarity index 100% rename from src/pages/trade-types/options/_start-trading.js rename to src/pages/trade-types/options/_start-trading.tsx diff --git a/src/pages/trade-types/options/_what-are-options.js b/src/pages/trade-types/options/_what-are-options.tsx similarity index 100% rename from src/pages/trade-types/options/_what-are-options.js rename to src/pages/trade-types/options/_what-are-options.tsx diff --git a/src/pages/trade-types/options/index.js b/src/pages/trade-types/options/index.tsx similarity index 100% rename from src/pages/trade-types/options/index.js rename to src/pages/trade-types/options/index.tsx diff --git a/src/store/index.tsx b/src/store/index.tsx index 96850f56a73..0c11b9361f9 100644 --- a/src/store/index.tsx +++ b/src/store/index.tsx @@ -6,7 +6,18 @@ type DerivProviderProps = { children?: React.ReactNode } -export const DerivStore = React.createContext() +export type DerivStoreType = { + is_eu_country: boolean + is_uk_country: boolean + is_p2p_allowed_country: boolean + crypto_config: boolean + website_status_loading: boolean + website_status: string + setWebsiteStatus: string + user_country: boolean +} + +export const DerivStore = React.createContext(null) export const DerivProvider = ({ children }: DerivProviderProps) => { const [website_status, setWebsiteStatus, website_status_loading] = useWebsiteStatus()