binary-com · Jan 17, 2022 · Jan 5, 2022 · Jan 6, 2022 · Jan 6, 2022 · Jan 6, 2022
@@ -71,7 +71,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect, is_eu_country }) => {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                {localize('BinaryBot')}
+                                {localize('Binary Bot')}
                             </Link>
                         </LinkWrapper>
                     </LinksCol>

@@ -1,7 +1,7 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import styled from 'styled-components'
-import Tabs from '../trade-types/components/_side-tab'
+import Tabs from '../trade-types/components/_tabs'
 import { Show } from '../../components/containers'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { Localize } from 'components/localization'

@@ -11,7 +11,7 @@ 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 Cryptocurrencies from 'images/svg/trade-types/cryptocurrencies.svg'
-import { DerivStore } from 'store'
+import { DerivStore, DerivStoreType } from 'store'
 
 const MobileCardHeader = styled(Flex)`
     margin-bottom: 0.8rem;
@@ -39,7 +39,7 @@ const StyledText = styled(Text)`
 `
 
 const AvailableMarkets = () => {
-    const { is_eu_country } = React.useContext(DerivStore)
+    const { is_eu_country } = React.useContext<DerivStoreType>(DerivStore)
 
     return (
         <SectionContainer background="white" padding="8rem 0" position="relative">

@@ -4,11 +4,11 @@ import { SmallContainer, StartTradingBg } from '../components/_style'
 import { localize, Localize } from 'components/localization'
 import { LinkButton } from 'components/form'
 import { Header } from 'components/elements'
-import { DerivStore } from 'store'
+import { DerivStore, DerivStoreType } from 'store'
 import { Show } from 'components/containers'
 
 const StartTrading = () => {
-    const { is_eu_country } = React.useContext(DerivStore)
+    const { is_eu_country } = React.useContext<DerivStoreType>(DerivStore)
     return (
         <>
             <StartTradingBg>

@@ -20,8 +20,11 @@ const query = graphql`
         }
     }
 `
+type ExampleImageType = {
+    center?: string
+}
 
-const ExampleImage = styled(QueryImage)`
+const ExampleImage = styled(QueryImage)<ExampleImageType>`
     margin: ${(props) => (props.center ? '0 auto' : 'unset')};
     width: 792px;
     height: 453px;

@@ -3,10 +3,10 @@ import { SmallContainer } from '../components/_style'
 import { SectionContainer } from 'components/containers'
 import { Header, Text } from 'components/elements'
 import { localize, Localize } from 'components/localization'
-import { DerivStore } from 'store'
+import { DerivStore, DerivStoreType } from 'store'
 
 const WhatIsCFD = () => {
-    const { is_eu_country } = React.useContext(DerivStore)
+    const { is_eu_country } = React.useContext<DerivStoreType>(DerivStore)
     return (
         <SectionContainer background="white" padding="8rem 0 1.2rem">
             <SmallContainer direction="column" ai="flex-start">

@@ -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 WhyTradeCFD = () => {
-    const { is_eu_country } = React.useContext(DerivStore)
+    const { is_eu_country } = React.useContext<DerivStoreType>(DerivStore)
 
     return (
         <SectionContainer background="rgba(245, 247, 250, 0.64)" padding="4rem 0 4rem">

@@ -9,7 +9,7 @@ import { localize, WithIntl } from 'components/localization'
 const WhyTradeCFD = Loadable(() => import('./_why-trade-cfd'))
 const TradingCFDIncreases = Loadable(() => import('./_trading-cfd-increases'))
 const StartTrading = Loadable(() => import('./_start-trading'))
-const ThingsToKeep = Loadable(() => import('./_things-to-keep'))
+const ThingsToKeep = Loadable(() => import('./_mind-when-trading'))
 const AvailableMarkets = Loadable(() => import('./_available-markets'))
 
 const CFD = () => {

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Text } from 'components/elements'
@@ -37,8 +37,12 @@ const Link = styled(LocalizedLink)`
         text-decoration: underline;
     }
 `
+type LearnMoreProps = {
+    text: string | ReactNode
+    to: string
+}
 
-const LearnMore = ({ text, to }) => {
+const LearnMore = ({ text, to }: LearnMoreProps) => {
     return (
         <Wrapper className="learn-more">
             <Link to={to}>

@@ -57,7 +57,11 @@ Item.propTypes = {
     children: PropTypes.node,
 }
 
-const MarketsCarousel = ({ children }) => {
+type MarketsCarouselProps = {
+    children: React.ReactNode[]
+}
+
+const MarketsCarousel = ({ children }: MarketsCarouselProps) => {
     const carousel_props = {
         options: {
             align: 'start',

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Flex } from 'components/containers'
@@ -20,7 +20,11 @@ const StyledNote = styled(Flex)`
     }
 `
 
-const Notes = ({ text }) => {
+type NotesProps = {
+    text: string | ReactNode
+}
+
+const Notes = ({ text }: NotesProps) => {
     return (
         <StyledNote ai="center" jc="flex-start">
             <div>

@@ -14,7 +14,11 @@ const TabContent = styled.div`
 
 // `
 
-const TabButton = styled.div`
+type TabButtonType = {
+    selected: boolean
+}
+
+const TabButton = styled.div<TabButtonType>`
     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<TabListType>`
     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,14 +128,16 @@ const StyledText = styled(Text)`
 `
 
 const TabPanel = ({ children, className }) => (
-    <TabContent className={className} role="tabpanel" tabindex="0">
+    <TabContent className={className} role="tabpanel" tabIndex={0}>
         {children}
     </TabContent>
 )
 
 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 }) => {

@@ -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<DerivStoreType>(DerivStore)
     return (
         <>
             <SectionContainer background="white" padding="8rem 0" position="relative">

@@ -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<DerivStoreType>(DerivStore)
 
     return (
         <>