From c0d886a2032eb5e3ccf4a7a4ee5ece8a3a7564f4 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Thu, 25 Jan 2024 06:38:07 +0400 Subject: [PATCH] chore: new homepage --- gatsby-node.js | 87 ++++++------------- package-lock.json | 24 ++--- package.json | 6 +- src/features/pages/home/cta/index.tsx | 5 +- .../live-pricing-migration/cards/index.tsx | 55 +++++++++++- src/features/pages/home/years/index.tsx | 5 +- 6 files changed, 99 insertions(+), 83 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 9f47409fa3b..db24332ffee 100644 --- a/gatsby-node.js +++ b/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, diff --git a/package-lock.json b/package-lock.json index f4951566c02..6a4f1004d14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,14 +11,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", @@ -3009,14 +3009,14 @@ } }, "node_modules/@deriv-com/blocks": { - "version": "0.66.0", - "resolved": "https://npm.pkg.github.com/download/@deriv-com/blocks/0.66.0/1f7dbb4bb03dcf0f1fd4f6a5225dd1b9db069f10", - "integrity": "sha512-0w8eBFlEV72pmumTV9nHjcBpeym3gvgbbBq5XCNDCz025l5uDbjKx/V8gxw8jiRNvqfWsq0KpCxfZ3Knxpt7hw==" + "version": "0.79.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/blocks/0.79.0/1166183b94e815f521c6862d8e78d2b309ea8a3f", + "integrity": "sha512-fcZcY/aKYLvqVqoqXcGYcaDAkXdx7+gegBsU1kMDit4M9/vAqa0QOoP/NG37PiXLxMaTUUxARTDhgom4kzGSlQ==" }, "node_modules/@deriv-com/components": { - "version": "0.37.0", - "resolved": "https://npm.pkg.github.com/download/@deriv-com/components/0.37.0/6bc9cc289ed7471e58639e164dc3723dd091361d", - "integrity": "sha512-nPFy1cNaS66fzNko7AGPCm81qoi91KJEdF4rSXL+/HWHnlyCv9IxI02C6gGM52pd2OuaDRsFhzUM3V9dbFVw/A==" + "version": "0.48.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/components/0.48.0/4e489524e1605618ee60dc3ccbb51e6b3356e7b3", + "integrity": "sha512-OTheRNDHh2BsQiu07YLeSTQczdUZRG5sfDAsC4BQLiP2ut0ABPUVZksr9h9P7uN6inHhmy0JLCSLOYEuOe9RjQ==" }, "node_modules/@deriv-com/hooks": { "version": "0.10.0", @@ -3089,9 +3089,9 @@ } }, "node_modules/@deriv/quill-icons": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.1.5.tgz", - "integrity": "sha512-Ze5qr9ZG3UGb+99612HV2gyscE/42Kg6UiHoXQxqWqhqKEzfisiDydiVO9e0yalQ4X/YTgELXTurff8lxH6WJQ==", + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.17.0.tgz", + "integrity": "sha512-xCGHsc8cmIL3aPEVzubqgcdyzKPAem8lUDnjfWJFeKZtDgd9096Z3VTUVibOKS06HyZQKTxMXdt2FSAkrmomSQ==", "peerDependencies": { "react": ">= 16", "react-dom": ">= 16" diff --git a/package.json b/package.json index 97ea7f8915b..ce10ef7a82f 100644 --- a/package.json +++ b/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", diff --git a/src/features/pages/home/cta/index.tsx b/src/features/pages/home/cta/index.tsx index 9bfe06c0fc2..0c496476878 100644 --- a/src/features/pages/home/cta/index.tsx +++ b/src/features/pages/home/cta/index.tsx @@ -34,8 +34,9 @@ const CTA = () => { const { is_eu } = useRegion() return ( -
- +
+ + {' '} diff --git a/src/features/pages/home/live-pricing-migration/cards/index.tsx b/src/features/pages/home/live-pricing-migration/cards/index.tsx index 225d06eeabd..6ccb1106de9 100644 --- a/src/features/pages/home/live-pricing-migration/cards/index.tsx +++ b/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: , EURUSD: , GBPJPY: , GBPUSD: , - USDCAD: , + + // Derived Indices + Crash_1000_Index: , + EURUSD_DFX_10_Index: , + Jump_50_Index: , + Range_Break_200_Index: , + + // Derived Indices EU + Boom_300_Index: , + Crash_300_Index: , + 'Volatility_150_(1s)_Index': , + 'Volatility_250_(1s)_Index': , + + // Etf's + EEM_US: , + GDX_US: , + SPY_US: , + UNG_US: , + + // Stock and indices + AAPL: , + DIS: , + TSLA: , + US_100: , + + // Cryptocurrencies ADAUSD: , BTCUSD: , DOGUSD: , DSHUSD: , + + // Commodities WTI_OIL: , XAGUSD: , XAUUSD: , @@ -67,8 +108,14 @@ const LiveMarketCard = ({ 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: , + askContent: , + spreadContent: , + buyContent: , + sellContent: , })) }, [data, is_logged_in, handleSignup]) @@ -77,8 +124,8 @@ const LiveMarketCard = ({
{children}
diff --git a/src/features/pages/home/years/index.tsx b/src/features/pages/home/years/index.tsx index 2f3942b5368..5735461a4bd 100644 --- a/src/features/pages/home/years/index.tsx +++ b/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 = () => { } 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, }}