binary-com · Jan 21, 2022 · Jan 4, 2022 · Jan 4, 2022 · Jan 5, 2022 · Jan 19, 2022
@@ -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: React.ReactNode
+    title: string
+}
+
+type HeroProps = {
+    content: React.ReactNode
+    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
@@ -1,13 +1,40 @@
 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'
 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: P2PType
+    reverse: boolean
+    two_title?: string
+}
+
+type ContentProps = {
+    margin_right: string
+}
+
+type ImageWrapperProps = {
+    margin_right: string
+}
+
+type RowProps = {
+    flex_direction: string
+}
+
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px;
@@ -18,7 +45,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 +69,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 +91,7 @@ const StyledText = styled(Text)`
         line-height: 30px;
     }
 `
-const Row = styled.div`
+const Row = styled.div<RowProps>`
     justify-content: space-around;
     flex-direction: ${(props) => props.flex_direction};
     width: 85%;
@@ -94,7 +121,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,9 +137,9 @@ 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}>
+                        <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}
@@ -145,10 +172,4 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
     )
 }
 
-ImageTextSwitching.propTypes = {
-    P2P: PropTypes.array,
-    reverse: PropTypes.bool,
-    two_title: PropTypes.bool,
-}
-
 export default ImageTextSwitching
@@ -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