From f66e81a8690ffe237f4dd4fe986cad4595d1cb92 Mon Sep 17 00:00:00 2001
From: mohammad-rework <mohammad.hashemi@re-work.dev>
Date: Tue, 4 Jan 2022 17:17:17 +0330
Subject: [PATCH 1/4] Convert landing-forex-trading to TS

---
 .../components/{_hero.js => _hero.tsx}        | 27 ++++++------
 .../{_icon-text-row.js => _icon-text-row.tsx} |  0
 ...switching.js => _image-text-switching.tsx} | 44 +++++++++++++------
 .../{_table-btn.js => _table-btn.tsx}         | 13 +++---
 .../forex-trading/{index.js => index.tsx}     |  0
 5 files changed, 50 insertions(+), 34 deletions(-)
 rename src/pages/landing/forex-trading/components/{_hero.js => _hero.tsx} (90%)
 rename src/pages/landing/forex-trading/components/{_icon-text-row.js => _icon-text-row.tsx} (100%)
 rename src/pages/landing/forex-trading/components/{_image-text-switching.js => _image-text-switching.tsx} (85%)
 rename src/pages/landing/forex-trading/components/{_table-btn.js => _table-btn.tsx} (93%)
 rename src/pages/landing/forex-trading/{index.js => index.tsx} (100%)

diff --git a/src/pages/landing/forex-trading/components/_hero.js b/src/pages/landing/forex-trading/components/_hero.tsx
similarity index 90%
rename from src/pages/landing/forex-trading/components/_hero.js
rename to src/pages/landing/forex-trading/components/_hero.tsx
index 6f8f885c726..78d21b90a84 100644
--- a/src/pages/landing/forex-trading/components/_hero.js
+++ b/src/pages/landing/forex-trading/components/_hero.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import { Flex, Container, Show } from 'components/containers'
 import { Header } from 'components/elements'
@@ -9,6 +8,17 @@ import { Background } from 'components/elements/background-image'
 import { LinkButton } from 'components/form'
 import device from 'themes/device.js'
 
+type HeroComponentProps = {
+    background_data: string
+    content: string
+    title: string
+}
+
+type HeroProps = {
+    content: string
+    title: string
+}
+
 const BackgroundWrapper = styled(Background)`
     background-size: cover;
     background-position: bottom right;
@@ -87,7 +97,7 @@ const TryButton = styled(LinkButton)`
     }
 `
 
-const HeroComponent = ({ title, content, background_data }) => {
+const HeroComponent = ({ title, content, background_data }: HeroComponentProps) => {
     return (
         <BackgroundWrapper data={background_data}>
             <Wrapper p="0" justify="space-between" height="63rem">
@@ -127,7 +137,7 @@ const query = graphql`
     }
 `
 
-const Hero = ({ title, content }) => {
+const Hero = ({ title, content }: HeroProps) => {
     const data = useStaticQuery(query)
 
     return (
@@ -150,15 +160,4 @@ const Hero = ({ title, content }) => {
     )
 }
 
-HeroComponent.propTypes = {
-    background_data: PropTypes.any,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    title: PropTypes.string,
-}
-
-Hero.propTypes = {
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    title: PropTypes.string,
-}
-
 export default Hero
diff --git a/src/pages/landing/forex-trading/components/_icon-text-row.js b/src/pages/landing/forex-trading/components/_icon-text-row.tsx
similarity index 100%
rename from src/pages/landing/forex-trading/components/_icon-text-row.js
rename to src/pages/landing/forex-trading/components/_icon-text-row.tsx
diff --git a/src/pages/landing/forex-trading/components/_image-text-switching.js b/src/pages/landing/forex-trading/components/_image-text-switching.tsx
similarity index 85%
rename from src/pages/landing/forex-trading/components/_image-text-switching.js
rename to src/pages/landing/forex-trading/components/_image-text-switching.tsx
index 5ff96b93f26..89eb71fdf48 100644
--- a/src/pages/landing/forex-trading/components/_image-text-switching.js
+++ b/src/pages/landing/forex-trading/components/_image-text-switching.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import device from 'themes/device'
 import { Container, SectionContainer, Show } from 'components/containers'
@@ -8,6 +7,28 @@ import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 import { isIndexEven } from 'common/utility'
 
+type ImageTextSwitchingProps = {
+    P2P: {
+        title: string
+        subtitle1: string
+        subtitle_mobile1: string
+        second_title: string
+        second_subtitle1: string
+        image_alt: string
+        image_name: string
+    }[]
+    reverse: boolean
+    two_title: boolean
+}
+
+type ContentProps = {
+    margin_right: string
+}
+
+type ImageWrapperProps = {
+    margin_right: string
+}
+
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px;
@@ -18,7 +39,8 @@ const StyledContainer = styled(Container)`
         width: 100%;
     }
 `
-const Content = styled.div`
+
+const Content = styled.div<ContentProps>`
     width: 45%;
     display: flex;
     flex-direction: column;
@@ -41,8 +63,7 @@ const Content = styled.div`
         margin: 0 auto;
     }
 `
-
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<ImageWrapperProps>`
     width: 40%;
     margin-right: ${(props) => props.margin_right};
 
@@ -64,7 +85,10 @@ const StyledText = styled(Text)`
         line-height: 30px;
     }
 `
-const Row = styled.div`
+type RowProps = {
+    flex_direction: string
+}
+const Row = styled.div<RowProps>`
     justify-content: space-around;
     flex-direction: ${(props) => props.flex_direction};
     width: 85%;
@@ -94,7 +118,7 @@ const query = graphql`
         }
     }
 `
-const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
+const ImageTextSwitching = ({ P2P, reverse, two_title }: ImageTextSwitchingProps) => {
     const data = useStaticQuery(query)
     return (
         <StyledSection background="var(--color-white)" padding="10rem 0">
@@ -110,7 +134,7 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
                 </StyledText>
 
                 {P2P.map((item, index) => {
-                    let is_even = isIndexEven(index, reverse)
+                    const is_even = isIndexEven(index, reverse)
                     return (
                         <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={item.title}>
                             <Content margin_right={!is_even ? '12.6rem' : '0'}>
@@ -145,10 +169,4 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
     )
 }
 
-ImageTextSwitching.propTypes = {
-    P2P: PropTypes.array,
-    reverse: PropTypes.bool,
-    two_title: PropTypes.bool,
-}
-
 export default ImageTextSwitching
diff --git a/src/pages/landing/forex-trading/components/_table-btn.js b/src/pages/landing/forex-trading/components/_table-btn.tsx
similarity index 93%
rename from src/pages/landing/forex-trading/components/_table-btn.js
rename to src/pages/landing/forex-trading/components/_table-btn.tsx
index 5827c9587de..ff3e4170bb9 100644
--- a/src/pages/landing/forex-trading/components/_table-btn.js
+++ b/src/pages/landing/forex-trading/components/_table-btn.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import MarketInstruments from '../../../markets/components/sections/_market_instruments.js'
 import { SwapFreePairs } from '../../../markets/instruments/_submarkets.js'
 import device from 'themes/device'
@@ -9,6 +8,11 @@ import { Localize } from 'components/localization'
 import { Text } from 'components/elements'
 import { LinkButton } from 'components/form'
 
+type TablebtnProps = {
+    btnlabel: string
+    text: string
+}
+
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px;
@@ -38,7 +42,7 @@ const TryButton = styled(LinkButton)`
     }
 `
 
-const Tablebtn = ({ btnlabel, text }) => {
+const Tablebtn = ({ btnlabel, text }: TablebtnProps) => {
     const swap_free_pairs = {
         markets_list: {
             col: 4,
@@ -78,9 +82,4 @@ const Tablebtn = ({ btnlabel, text }) => {
     )
 }
 
-Tablebtn.propTypes = {
-    btnlabel: PropTypes.string,
-    text: PropTypes.string,
-}
-
 export default Tablebtn
diff --git a/src/pages/landing/forex-trading/index.js b/src/pages/landing/forex-trading/index.tsx
similarity index 100%
rename from src/pages/landing/forex-trading/index.js
rename to src/pages/landing/forex-trading/index.tsx

From e37d925cbb544e4e52d7d6c6aacb6de75bbefa9d Mon Sep 17 00:00:00 2001
From: mohammad-rework <mohammad.hashemi@re-work.dev>
Date: Tue, 4 Jan 2022 17:35:02 +0330
Subject: [PATCH 2/4] move type to top of the code

---
 .../forex-trading/components/_image-text-switching.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/landing/forex-trading/components/_image-text-switching.tsx b/src/pages/landing/forex-trading/components/_image-text-switching.tsx
index 89eb71fdf48..35a1d32d1d3 100644
--- a/src/pages/landing/forex-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/forex-trading/components/_image-text-switching.tsx
@@ -29,6 +29,10 @@ type ImageWrapperProps = {
     margin_right: string
 }
 
+type RowProps = {
+    flex_direction: string
+}
+
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px;
@@ -85,9 +89,6 @@ const StyledText = styled(Text)`
         line-height: 30px;
     }
 `
-type RowProps = {
-    flex_direction: string
-}
 const Row = styled.div<RowProps>`
     justify-content: space-around;
     flex-direction: ${(props) => props.flex_direction};

From 70d4d2d62b6633e228b2bb8e9ac961984d152d89 Mon Sep 17 00:00:00 2001
From: mohammad-rework <mohammad.hashemi@re-work.dev>
Date: Wed, 5 Jan 2022 11:35:55 +0330
Subject: [PATCH 3/4] fix errors and separate p2p type

---
 .../forex-trading/components/_hero.tsx        |  4 ++--
 .../components/_image-text-switching.tsx      | 24 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/pages/landing/forex-trading/components/_hero.tsx b/src/pages/landing/forex-trading/components/_hero.tsx
index 78d21b90a84..8766f0264b5 100644
--- a/src/pages/landing/forex-trading/components/_hero.tsx
+++ b/src/pages/landing/forex-trading/components/_hero.tsx
@@ -10,12 +10,12 @@ import device from 'themes/device.js'
 
 type HeroComponentProps = {
     background_data: string
-    content: string
+    content: React.ReactNode
     title: string
 }
 
 type HeroProps = {
-    content: string
+    content: React.ReactNode
     title: string
 }
 
diff --git a/src/pages/landing/forex-trading/components/_image-text-switching.tsx b/src/pages/landing/forex-trading/components/_image-text-switching.tsx
index 35a1d32d1d3..c35106d5bff 100644
--- a/src/pages/landing/forex-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/forex-trading/components/_image-text-switching.tsx
@@ -7,18 +7,20 @@ import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 import { isIndexEven } from 'common/utility'
 
+type P2PType = {
+    title: React.ReactNode
+    subtitle1: React.ReactNode
+    subtitle_mobile1: React.ReactNode
+    second_title?: string
+    second_subtitle1?: string
+    image_alt: string
+    image_name: string
+}[]
+
 type ImageTextSwitchingProps = {
-    P2P: {
-        title: string
-        subtitle1: string
-        subtitle_mobile1: string
-        second_title: string
-        second_subtitle1: string
-        image_alt: string
-        image_name: string
-    }[]
+    P2P: P2PType
     reverse: boolean
-    two_title: boolean
+    two_title?: string
 }
 
 type ContentProps = {
@@ -137,7 +139,7 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }: ImageTextSwitchingProps
                 {P2P.map((item, index) => {
                     const is_even = isIndexEven(index, reverse)
                     return (
-                        <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={item.title}>
+                        <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
                             <Content margin_right={!is_even ? '12.6rem' : '0'}>
                                 <StyledHeader type="heading-3" mb="1rem">
                                     {item.title}

From 8ec4f44eeaabf0db2224b3b70f06f0840b6369a8 Mon Sep 17 00:00:00 2001
From: Mohammad Hashemi <mohammad.hashemi@re-work.dev>
Date: Wed, 19 Jan 2022 11:42:48 +0330
Subject: [PATCH 4/4] update binary bot in footer