chore: new homepage

gatsby-node.js

@@ -3,39 +3,12 @@ const language_config = require(`./i18n-config.js`)
 const language_config_en = require(`./i18n-config-en.js`)
 const path = require('path')
 const { copyLibFiles } = require('@builder.io/partytown/utils')
-const { exec } = require('child_process')
-const translations_cache = {}
-
-function OSFunction() {
-    this.execCommand = function (cmd, callback) {
-        exec(cmd, (error, stdout) => {
-            if (error) {
-                console.error(`exec error: ${error}`)
-                return
-            }
-
-            callback(stdout)
-        })
-    }
-}
 
-const fetchTrustpilotData = () => {
-    // Trustpilot on-build data fetching
-    const os = new OSFunction()
-
-    os.execCommand('node scripts/trustpilot.js', (returnvalue) => {
-        console.log(returnvalue)
-    })
-}
+const translations_cache = {}
 
 exports.onPreBuild = async () => {
     await copyLibFiles(path.join(__dirname, 'static', '~partytown'))
 }
-exports.onPreInit = () => {
-    // Update truspilot.json file with latest data
-    fetchTrustpilotData()
-}
-
 // Based upon https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n
 
 const BuildPage = (page, actions) => {
@@ -376,48 +349,40 @@ const BuildPage = (page, actions) => {
 exports.onCreatePage = ({ page, actions }) => {
     const { deletePage } = actions
     const isProduction = process.env.GATSBY_ENV === 'production'
-    const pagesToBuild = process.env.GATSBY_BUILD_PAGES || 'all'
-
-    // First delete the incoming page that was automatically created by Gatsby
-    // So everything in src/pages/
-    deletePage(page)
-
-    const pagesCategory = {
-        all: [''],
-        'no-affiliates': ['signup-affiliates', 'landing', 'ctrader', 'partners'],
-        'no-help-centre': ['help-centre'],
-        'no-tools': ['trader-tools'],
-        fast: [
-            'signup-affiliates',
-            'landing',
-            'ctrader',
-            'partners',
-            'help-centre',
-            'trader-tools',
-            'careers',
-            // 'markets',
-            // 'trade-types' Note: Feel free to adjust pages you want to skip building for faster local development
-        ],
-    }
-
-    const disallowedPages = pagesCategory[pagesToBuild] || []
-
-    const regex = new RegExp(`/${disallowedPages.join('|') + '|'}/g`)
+    const pagesToBuild = process.env.GATSBY_BUILD_PAGES
+    if (pagesToBuild) {
+        const pages_loaded = pagesToBuild.split(',')
+        const allowed_pages = ['', pages_loaded]
+
+        const pages = allowed_pages.reduce((result, Item) => {
+            if (Array.isArray(Item)) {
+                // Flatten the nested array and add the '/' prefix
+                const nested_array = Item.map((subItem) => `/${subItem}/`)
+                return result.concat(nested_array)
+            } else {
+                // Add the '/' prefix for the root item
+                return result.concat(`/${Item}`)
+            }
+        }, [])
 
-    const isMatch = regex.test(page.path)
+        console.log('pages', pages)
 
-    if (isProduction) {
-        return BuildPage(page, actions)
-    } else {
-        if (!isMatch || pagesToBuild === 'all') {
-            console.log(`\x1b[32mcreating\x1b[0m [${pagesToBuild}] ${page.path}`)
+        deletePage(page)
+        if (isProduction) {
             return BuildPage(page, actions)
+        } else {
+            if (pages.includes(page.path)) {
+                return BuildPage(page, actions)
+            }
         }
+    } else {
+        return BuildPage(page, actions)
     }
 }
 
 const StylelintPlugin = require('stylelint-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
+
 const style_lint_options = {
     files: 'src/**/*.js',
     emitErrors: false,

package.json

@@ -6,14 +6,14 @@
     "dependencies": {
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv-com/blocks": "^0.66.0",
-        "@deriv-com/components": "^0.37.0",
+        "@deriv-com/blocks": "^0.79.0",
+        "@deriv-com/components": "^0.48.0",
         "@deriv-com/hooks": "^0.10.0",
         "@deriv-com/providers": "^0.10.0",
         "@deriv/analytics": "^1.4.4",
         "@deriv/deriv-api": "^1.0.13",
         "@deriv/quill-design": "^1.3.2",
-        "@deriv/quill-icons": "^1.1.5",
+        "@deriv/quill-icons": "^1.17.0",
         "@hookform/resolvers": "^3.3.2",
         "@livechat/customer-sdk": "^3.1.5",
         "@loadable/component": "^5.15.3",

src/features/pages/home/cta/index.tsx

@@ -34,8 +34,9 @@ const CTA = () => {
     const { is_eu } = useRegion()
     return (
         <Footer.CTABlock padding image={is_eu ? EUImage : RowImage}>
-            <div className="flex h-full flex-col items-start justify-center gap-gap-3xl max-w-[328px] lg:max-w-none">
-                <Heading.H2 className="text-solid-slate-50">
+            <div className="flex h-full flex-col items-start gap-gap-3xl lg:justify-center justify-end">
+                <Heading.H2 className="text-solid-slate-50 sm:max-w-[320px] max-w-[260px] xl:max-w-[480px]">
+                    {' '}
                     <Localize translate_text="_t_Join over 2.5 million online traders_t_" />
                 </Heading.H2>
                 <TradersHubCtaButton className="hidden lg:block" />

src/features/pages/home/live-pricing-migration/cards/index.tsx

@@ -5,7 +5,6 @@ import {
     MarketForexEurusdIcon,
     MarketForexGbpjpyIcon,
     MarketForexGbpusdIcon,
-    MarketForexUsdcadIcon,
     MarketCryptocurrencyAdausdIcon,
     MarketCryptocurrencyBtcusdIcon,
     MarketCryptocurrencyDogusdIcon,
@@ -14,6 +13,19 @@ import {
     MarketCommoditySilverusdIcon,
     MarketCommodityGoldusdIcon,
     MarketCommodityCopperusdIcon,
+    MarketStocksAppleIcon,
+    MarketStocksWaltDisneyIcon,
+    MarketStocksTeslaIcon,
+    MarketIndicesUsTech100Icon,
+    MarketDerivedCrash1000Icon,
+    MarketDerivedEurusdDfx10Icon,
+    MarketDerivedRangeBreak200Icon,
+    MarketIndicesUs500Icon,
+    MarketDerivedJump50Icon,
+    MarketDerivedBoom300Icon,
+    MarketDerivedCrash300Icon,
+    MarketDerivedVolatility1501sIcon,
+    MarketDerivedVolatility2501sIcon,
     // eslint-disable-next-line import/no-unresolved
 } from '@deriv/quill-icons/Markets'
 import useLiveData from '../data-provider/useLiveData'
@@ -22,17 +34,46 @@ import { percentToDecimal, swiperOption } from '../utils'
 import { handleRedirectToTradersHub } from 'components/custom/utils'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import useHandleSignup from 'components/hooks/use-handle-signup'
+import { Localize } from 'components/localization'
 
 const IconsMapper = {
+    // Forex Icons
     AUDUSD: <MarketForexAudusdIcon />,
     EURUSD: <MarketForexEurusdIcon />,
     GBPJPY: <MarketForexGbpjpyIcon />,
     GBPUSD: <MarketForexGbpusdIcon />,
-    USDCAD: <MarketForexUsdcadIcon />,
+
+    // Derived Indices
+    Crash_1000_Index: <MarketDerivedCrash1000Icon />,
+    EURUSD_DFX_10_Index: <MarketDerivedEurusdDfx10Icon />,
+    Jump_50_Index: <MarketDerivedJump50Icon />,
+    Range_Break_200_Index: <MarketDerivedRangeBreak200Icon />,
+
+    // Derived Indices EU
+    Boom_300_Index: <MarketDerivedBoom300Icon />,
+    Crash_300_Index: <MarketDerivedCrash300Icon />,
+    'Volatility_150_(1s)_Index': <MarketDerivedVolatility1501sIcon />,
+    'Volatility_250_(1s)_Index': <MarketDerivedVolatility2501sIcon />,
+
+    // Etf's
+    EEM_US: <MarketIndicesUs500Icon />,
+    GDX_US: <MarketIndicesUs500Icon />,
+    SPY_US: <MarketIndicesUs500Icon />,
+    UNG_US: <MarketIndicesUs500Icon />,
+
+    // Stock and indices
+    AAPL: <MarketStocksAppleIcon />,
+    DIS: <MarketStocksWaltDisneyIcon />,
+    TSLA: <MarketStocksTeslaIcon />,
+    US_100: <MarketIndicesUsTech100Icon />,
+
+    // Cryptocurrencies
     ADAUSD: <MarketCryptocurrencyAdausdIcon />,
     BTCUSD: <MarketCryptocurrencyBtcusdIcon />,
     DOGUSD: <MarketCryptocurrencyDogusdIcon />,
     DSHUSD: <MarketCryptocurrencyDshusdIcon />,
+
+    // Commodities
     WTI_OIL: <EnergyWtiOilusIcon />,
     XAGUSD: <MarketCommoditySilverusdIcon />,
     XAUUSD: <MarketCommodityGoldusdIcon />,
@@ -67,8 +108,14 @@ const LiveMarketCard = <T extends MarketName>({
             bidPrice: `${data[key].bid}`,
             askPrice: `${data[key].ask}`,
             spread: `${data[key].sprd}`,
+            mid: data[key].mid,
             onClickBuyButton: is_logged_in ? handleRedirectToTradersHub : handleSignup,
             onClickSellButton: is_logged_in ? handleRedirectToTradersHub : handleSignup,
+            bidContent: <Localize translate_text="_t_Bid_t_" />,
+            askContent: <Localize translate_text="_t_Ask_t_" />,
+            spreadContent: <Localize translate_text="_t_Spread_t_" />,
+            buyContent: <Localize translate_text="_t_Buy_t_" />,
+            sellContent: <Localize translate_text="_t_Sell_t_" />,
         }))
     }, [data, is_logged_in, handleSignup])
 
@@ -77,8 +124,8 @@ const LiveMarketCard = <T extends MarketName>({
             <CardSlider
                 variant="LiveMarketCard"
                 swiperData={swiperOption}
-                slideClasses="max-w-[296px]"
-                className="w-screen !mr-[calc((-100vw+100%)/2)] lg:w-full lg:!mr-auto"
+                slideClasses="max-w-[296px] !mr-gap-none !ml-gap-none"
+                className="w-screen lg:w-full [&>*:nth-child(1)]:!gap-gap-lg"
                 cards={livePriceData.slice(0, 4)}
             />
             <div className="flex items-center flex-col">{children}</div>

src/features/pages/home/years/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Features } from '@deriv-com/blocks'
+import { swiperOption } from '../live-pricing-migration/utils'
 import { cards } from './data'
 import { Localize } from 'components/localization'
 
@@ -8,7 +9,9 @@ const TwentyYearsStrong = () => {
         <Features.ContentSlider
             title={<Localize translate_text="_t_We're 24+ years strong_t_" />}
             cardSliderProps={{
-                slideClasses: 'max-w-[296px] !h-auto',
+                swiperData: swiperOption,
+                slideClasses: 'max-w-[296px] !h-auto !mr-gap-none !ml-gap-none',
+                className: 'w-screen lg:w-full [&>*:nth-child(1)]:!gap-gap-lg ',
                 variant: 'ContentBottom',
                 cards: cards,
             }}