chore: updated dtrader page

binary-com · Mar 4, 2024 · fb4bc3c · fb4bc3c
1 parent 439d3dd
commit fb4bc3c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 54 deletions.
diff --git a/themes/gatsby-theme-deriv/src/components/custom/_dhero.tsx b/themes/gatsby-theme-deriv/src/components/custom/_dhero.tsx
@@ -12,9 +12,9 @@ import useHandleSignup from 'components/hooks/use-handle-signup'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import { LinkButton } from 'components/form'
 import { Localize, localize } from 'components/localization'
-import useRegion from 'components/hooks/use-region'
 import { Container } from 'components/containers'
 import { useIsRtl } from 'components/hooks/use-isrtl'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 type DHeroProps = {
     is_live_demo?: boolean
@@ -157,7 +157,7 @@ const StyledContainer = styled(Container)`
 const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
     const getLinkType = () => (image_name === 'dbot' ? 'dbot' : 'deriv_app')
     const { is_mobile } = useBreakpoints()
-    const { is_eu } = useRegion()
+    const {region} = useBuildVariant()
     const handleSignup = useHandleSignup()
     const [is_logged_in] = useAuthCheck()
     const is_rtl = useIsRtl()
@@ -217,7 +217,7 @@ const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
                     <Shape angle={is_mobile ? 101 : 193} width="60%">
                         <ImageWrapper>
                             <ImageStyle>
-                                {is_eu ? (
+                                {region === "eu" ? (
                                     <StaticImage
                                         src="../../images/common/dtrader/hero-image-eu.png"
                                         loading="eager"

diff --git a/themes/gatsby-theme-deriv/src/pages/dtrader/_our-platforms.tsx b/themes/gatsby-theme-deriv/src/pages/dtrader/_our-platforms.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import mt5Icon from '../../images/svg/dtrader/mt5.svg'
 import goIcon from '../../images/svg/custom/rebranding/deriv-go-icon.svg'
-import ezIcon from '../../images/svg/dtrader/ez-icon.svg'
 import dxIcon from '../../images/svg/custom/rebranding/deriv-x-icon.svg'
 import dbIcon from '../../images/svg/dtrader/db-icon.svg'
 import GenericCarousel, { TRenderableData } from 'components/custom/carousel/_platforms-carousel'

diff --git a/themes/gatsby-theme-deriv/src/pages/dtrader/_steps_section.tsx b/themes/gatsby-theme-deriv/src/pages/dtrader/_steps_section.tsx
@@ -1,16 +1,15 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import styled from 'styled-components'
 import { graphql, useStaticQuery } from 'gatsby'
 import { Localize, localize } from 'components/localization'
-import useRegion from 'components/hooks/use-region'
 import StepperView from 'components/custom/_stepper_view'
-import device, { size } from 'themes/device'
-import { isBrowser } from 'common/utility'
+import device from 'themes/device'
 import { Container, SectionContainer } from 'components/containers'
 import CommonHeaderSection from 'components/elements/common-header-section'
 import { LinkButton } from 'components/form'
 import useBreakpoints from 'components/hooks/use-breakpoints'
 import { QueryImage } from 'components/elements'
+import useBuildVariant from 'features/hooks/use-build-variant'
 
 const query = graphql`
     query {
@@ -66,19 +65,9 @@ const GotoLiveWrapper = styled.div`
 `
 
 const DtraderEasySteps = () => {
-    const [is_mobile, setMobile] = useState(false)
-    const { is_row } = useRegion()
+    const { region } = useBuildVariant()
     const { is_mobile_or_tablet } = useBreakpoints()
 
-    const handleResizeWindow = () => {
-        setMobile(isBrowser() ? window.screen.width <= size.mobileL : false)
-    }
-
-    useEffect(() => {
-        setMobile(isBrowser() ? window.screen.width <= size.mobileL : false)
-        window.addEventListener('resize', handleResizeWindow)
-    })
-
     const data = useStaticQuery(query)
 
     const stepsData: React.ComponentProps<typeof StepperView>['items'] = useMemo(
@@ -87,7 +76,7 @@ const DtraderEasySteps = () => {
                 title: () => '_t_Select an asset_t_',
                 image: () => (
                     <QueryImage
-                        data={data[is_row ? 'step_1' : 'step_1_eu']}
+                        data={data[region === "row" ? 'step_1' : 'step_1_eu']}
                         alt={localize('_t_Select an asset_t_')}
                     />
                 ),
@@ -96,7 +85,7 @@ const DtraderEasySteps = () => {
                 title: () => '_t_Monitor the chart_t_',
                 image: () => (
                     <QueryImage
-                        data={data[is_row ? 'step_2' : 'step_2_eu']}
+                        data={data[region === "row" ? 'step_2' : 'step_2_eu']}
                         alt={localize('_t_Monitor the chart_t_')}
                     />
                 ),
@@ -105,13 +94,13 @@ const DtraderEasySteps = () => {
                 title: () => '_t_Place a trade_t_',
                 image: () => (
                     <QueryImage
-                        data={data[is_row ? 'step_3' : 'step_3_eu']}
+                        data={data[region === "row" ? 'step_3' : 'step_3_eu']}
                         alt={localize('_t_Place a trade_t_')}
                     />
                 ),
             },
         ],
-        [data, is_row],
+        [data, region],
     )
 
     return (

diff --git a/themes/gatsby-theme-deriv/src/pages/dtrader/index.tsx b/themes/gatsby-theme-deriv/src/pages/dtrader/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Loadable from '@loadable/component'
 import DtraderEasySteps from './_steps_section'
 import DtraderGetApps from './_get-app-section'
@@ -8,7 +8,6 @@ import Layout from 'components/layout/layout'
 import { WithIntl } from 'components/localization'
 import DHero from 'components/custom/_dhero'
 import DNumber, { TDNumbersItem } from 'components/custom/_dnumbers'
-import useRegion from 'components/hooks/use-region'
 import { TradingType } from 'components/custom/_dtrading'
 import { TGatsbyHead } from 'features/types'
 
@@ -82,36 +81,23 @@ const trading_eu: TradingType[] = [
     },
 ]
 
-const Dtrader = () => {
-    const { is_eu, is_row } = useRegion()
-    const [is_loaded, setLoaded] = useState(false)
+const Dtrader = ({ pageContext }: TGatsbyHead) => {
+    const { region } = pageContext
 
-    useEffect(() => {
-        setLoaded(true)
-    }, [])
-
-    if (is_loaded) {
-        return (
-            <Layout>
-                <DHero
-                    join_us_for_free
-                    is_live_demo
-                    image_name={is_eu ? 'dtrader_eu' : 'dtrader'}
-                />
-                {is_row && <DNumber items={items} justify="space-around" />}
-                {is_eu && <DNumber items={itemsEU} justify="space-around" />}
-
-                <DtraderEasySteps />
-                {is_row && <DTrading trading={trading} spacing={1} />}
-                {is_eu && <DTrading trading={trading_eu} spacing={1} />}
-
-                <DtraderGetApps />
-                {is_row && <OurPlatforms />}
-            </Layout>
-        )
-    }
-
-    return <React.Fragment></React.Fragment>
+    return (
+        <Layout region={region}>
+            <DHero
+                join_us_for_free
+                is_live_demo
+                image_name={region === "eu" ? 'dtrader_eu' : 'dtrader'}
+            />
+            <DNumber items={region === "row" ? items : itemsEU} justify="space-around" />
+            <DtraderEasySteps />
+            <DTrading trading={region === "row" ? trading : trading_eu} spacing={1} />
+            <DtraderGetApps />
+            {region === "row" && <OurPlatforms />}
+        </Layout>
+    )
 }
 
 export default WithIntl()(Dtrader)