From 8cb63fdf6bfcb1d4431c766bf81135fa3008637e Mon Sep 17 00:00:00 2001 From: Hasan Mobarak <126637868+hasan-deriv@users.noreply.github.com> Date: Wed, 6 Mar 2024 11:35:33 +0800 Subject: [PATCH] Hasan/DPROD-3320/multiple build for business pages (#7222) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Pr 00 workflow fix 4 (#7182) * chore: test workflow * chore: removed * chore: test * chore: test * chore: fixed preview link workflow * Agrim/DPROD-3557/Translation 3557 footer change (#7158) * text: updating footer text * text: updating the text in the footer for EU and CPA * text: terms and conditions edit of text * text: edit the text * text: formatting the text * fix: changes in the text links * fix: fixing t&c, risk disclosure, secure links * auto-pull-translation * auto-pull-translation * fix: modifications in footer * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: changes in the text links * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * Agrim/DPROD-3441/Set disclaimer on trade specifications (#7095) * text: disclaimer on trade specifications * auto-pull-translation * fix: resolve conflict * fix: fixing the error * fix: resolve conflicts * auto-pull-translation * fix: resolve conflict * fix: fixing the error * fix: resolve conflict * auto-pull-translation * fix: resolve conflict * fix: fixing the error * fix: resolve conflict * auto-pull-translation * fix: resolve conflict * fix: fixing the error * text: updating footer text * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * fix: resolve conflict * fix: resolve conflict * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: resolve conflict * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * fix: resolve conflict * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch --------- Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: prince-deriv * Agrim/DPROD-3025/Replace the spanish row pdf's with english to spanish pdf's (#7128) * fix: replacing the spanish row pdf's with english to spanish pdf's * fix: remove spaces from pdf name * behnaz/DPROD-3359/Feb trading data (#7060) * chorn: fx row * chorn: derived row * chorn: derived coma row * chorn: derived add quet row * chorn: derived add quet2 row * chorn: stock row * chorn: stock GBP row * chorn: etfs row * chorn: etfs remove extra 1 row * chorn: crypto row * chorn: crypto base row * chorn: comod row * chorn: comod EU * chorn: fx EU * chorn: derived EU * chorn: stock EU * chorn: etfs EU * chorn: crypto EU * mayuran/DPROD-2759/ws_improvements (#7070) * fix: wip * fix: dummy initial * fix: check socket * fix: added conditionsa * fix: ws call * fix: ws reconnect * fix: check api manager * chore: trigger vercel * fix: ws socket calls * fix: session storage * fix: window added * fix: addded window * fix: remove unwanted code * fix: check * fix: kogs * fix: ready state * fix: code clear * fix: added logs * fix: minor issue in reconnect * fix: loading changed logic * fix: remove session storage * Revert "fix: remove session storage" This reverts commit abb84c361efe20f79f67375458db6c0619c3981b. * fix: remove session storage * fix: improvement of use WS * fix: remove console logs (#7201) * Update smoketests.yml - change e2e skip term (#7194) * Update smoketests.yml - change e2e skip term If the term 'skipsm' is specified in the branch name then skip the e2e tests (used to be 'quill'). This is because the dev knows they are making radical change which will need the tests to be modified at a later date. * Update smoketests.yml - Modified to use DRAFT param Skip smoket test if the PR is in Draft mode. * Update generate-preview-link.yml - Add DRAFT param (#7198) We need to store a new param to GH storage, DRAFT. So that the smoketest.yml can use it to ignore a test run. * Fasih/DPROD-3590/integrate firebase feature flag for third party items (#7149) * feat: implement json which contain items name * feat: adding flag on third party packages * feat: implemented flag on trade platfrom apps * feat: removed unsued code * feat: made some items value false * feat: enabled all items * feat: add condition for derivgo footer badge * feat: updated keys * feat: interated api and hook * feat: updated hook with importing function * feat: updated hook and filtered footer icon data * feat: remvoed hotjar and gtm from flags * feat: removed unused code * feat: made every item true * feat: updated other layout files * feat: updated the condition --------- Co-authored-by: fasihali-deriv Co-authored-by: Muhammad Fasih Ali Naqvi * chore: update multiple build action yml (#7210) * chore: update multiple build action yml * chore: update action with To DO * Update smoketests.yml - Mod to draft param (#7217) * Update smoketests.yml - Mod to draft param The draft param wasn't being interpretted correctly. * Update smoketests.yml * chore: updated help center * chore: updated trader tools * chore: updated the config url (#7223) Co-authored-by: Muhammad Fasih Ali Naqvi * chore: updated payment methods * chore: updated dmt5 trading signals * chore: updated dbot page * chore: updated dbot page * chore: updated dmt5 page * chore: updated derivx page * chore: updated ctrader page * chore: updated dtrader page * chore: updated deriv go page * chore: updated cfds page * chore: updated multiplier page * chore: fixed ctrader page * chore: updated accumulators page * chore: removed unused data from principles data * chore: removed unused margin dir * chore: updated accumulators page * chore: updated asians page * chore: updated digital options page * chore: updated turbo options page * chore: updated vanilla options page * chore: updated ctrader login page * chore: updated check email page * chore: updated ctrader check email page * chore: updated ctrader manage pages * chore: updated ctrader signup pages * chore: updated endpoint page * chore: updated responsible page * chore: updated signup page * chore: updated signup affiliates page * chore: updated signup success page * chore: updated tnc page * chore: updated trading specification page * chore: updated unsubscribe page * chore: updated landing home page * chore: updated landing mt5 page * chore: updated landing ebook page * chore: updated landing forex trading page * chore: updated landing jump indices page * chore: updated landing signup page * chore: updated landing stocks page * chore: updated landing trade forex page * chore: updated landing weekend trading page * chore: updated rest component * chore: updated layouts * chore: fixed external link * chore: fixed footer description * chore: fixed ctrader signup * chore: updated help center * chore: updated trader tools * chore: updated payment methods * chore: updated dmt5 trading signals * chore: updated dbot page * chore: updated dbot page * chore: updated dmt5 page * chore: updated derivx page * chore: updated ctrader page * chore: updated dtrader page * chore: updated deriv go page * chore: updated cfds page * chore: updated multiplier page * chore: fixed ctrader page * chore: updated accumulators page * chore: removed unused data from principles data * chore: removed unused margin dir * chore: updated accumulators page * chore: updated asians page * chore: updated digital options page * chore: updated turbo options page * chore: updated vanilla options page * chore: updated ctrader login page * chore: updated check email page * chore: updated ctrader check email page * chore: updated ctrader manage pages * chore: updated ctrader signup pages * chore: updated endpoint page * chore: updated responsible page * chore: updated signup page * chore: updated signup affiliates page * chore: updated signup success page * chore: updated tnc page * chore: updated trading specification page * chore: updated unsubscribe page * chore: updated landing home page * chore: updated landing mt5 page * chore: updated landing ebook page * chore: updated landing forex trading page * chore: updated landing jump indices page * chore: updated landing signup page * chore: updated landing stocks page * chore: updated landing trade forex page * chore: updated landing weekend trading page * chore: updated rest component * chore: updated layouts * chore: fixed external link * chore: fixed footer description * chore: fixed ctrader signup * Quill pr 3317 setup monorep config (#7215) * chore: create themes and sites dir * chore: created row and eu sites directiory * chore: created gatsby-theme-deriv directory * chore: moved src into deriv theme directory * chore: moved types into deriv theme directory * chore: moved static and gatsby files into deriv theme directory * chore: moved storybook and favicons files into deriv theme directory * chore: added eslint to theme * chore: added typescript to theme * chore: added workspaces * chore: added eslint script * chore: added stylelint script * chore: added prettier script * chore: added prettier and git ignore * chore: udpated jest configure * chore: fixed checkbox test * chore: added codegen script * chore: added storybook script * chore: added react packages * chore: moved packages to theme * chore: added theme config and options * chore: added row script * chore: moved i18 files to theme * chore: updated favicon path in gatsby config * chore: moved babel tailwind and js config file to theme * chore: added clean script * chore: updated eslint and tsconfig to fix alias import error * chore: added theme to sites * chore: fixed sass classnames issue * chore: updated tailwind config * chore: fixed env issue * chore: fixed eslint issues * chore: added build script * chore: fixed html minification issue * chore: fixed html minification issue * chore: updated partytown scripts * chore: updated serve scripts * chore: updated htaccess script * chore: updated translation scripts * chore: updated link generate workflow * chore: updated link generate workflow * chore: added new workflow * chore: removed workflow * empty: 🚀 to redeploy and trigger build * feat: added region conditions on home and header nav * chore: test workflow * chore: merge cleanup * chore: added region based data for homepage * chore: added a different port to eu serve * chore: test workflow * empty: 🚀 to redeploy and trigger build * empty: 🚀 to redeploy and trigger build * empty: 🚀 to redeploy and trigger build * chore: test workflow * chore: test workflow * chore: removed * empty: 🚀 to redeploy and trigger build * chore: removed workflow * Pr 00 workflow fix 4 (#7182) * chore: test workflow * chore: removed * chore: test * chore: test * chore: fixed preview link workflow * chore: test workflow * chore: test * empty: 🚀 to redeploy and trigger build * chore: testing eu domain utility * Agrim/DPROD-3557/Translation 3557 footer change (#7158) * text: updating footer text * text: updating the text in the footer for EU and CPA * text: terms and conditions edit of text * text: edit the text * text: formatting the text * fix: changes in the text links * fix: fixing t&c, risk disclosure, secure links * auto-pull-translation * auto-pull-translation * fix: modifications in footer * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: changes in the text links * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * Agrim/DPROD-3441/Set disclaimer on trade specifications (#7095) * text: disclaimer on trade specifications * auto-pull-translation * fix: resolve conflict * fix: fixing the error * fix: resolve conflicts * auto-pull-translation * fix: resolve conflict * fix: fixing the error * fix: resolve conflict * auto-pull-translation * fix: resolve conflict * fix: fixing the error * fix: resolve conflict * auto-pull-translation * fix: resolve conflict * fix: fixing the error * text: updating footer text * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * fix: resolve conflict * fix: resolve conflict * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: resolve conflict * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * fix: to redeploy and trigger build * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * fix: resolve conflict * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch --------- Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: prince-deriv * Agrim/DPROD-3025/Replace the spanish row pdf's with english to spanish pdf's (#7128) * fix: replacing the spanish row pdf's with english to spanish pdf's * fix: remove spaces from pdf name * behnaz/DPROD-3359/Feb trading data (#7060) * chorn: fx row * chorn: derived row * chorn: derived coma row * chorn: derived add quet row * chorn: derived add quet2 row * chorn: stock row * chorn: stock GBP row * chorn: etfs row * chorn: etfs remove extra 1 row * chorn: crypto row * chorn: crypto base row * chorn: comod row * chorn: comod EU * chorn: fx EU * chorn: derived EU * chorn: stock EU * chorn: etfs EU * chorn: crypto EU * chore: updated eu domains list * mayuran/DPROD-2759/ws_improvements (#7070) * fix: wip * fix: dummy initial * fix: check socket * fix: added conditionsa * fix: ws call * fix: ws reconnect * fix: check api manager * chore: trigger vercel * fix: ws socket calls * fix: session storage * fix: window added * fix: addded window * fix: remove unwanted code * fix: check * fix: kogs * fix: ready state * fix: code clear * fix: added logs * fix: minor issue in reconnect * fix: loading changed logic * fix: remove session storage * Revert "fix: remove session storage" This reverts commit abb84c361efe20f79f67375458db6c0619c3981b. * fix: remove session storage * fix: improvement of use WS * chore: updated extract translations * chore: updated extract translations * chore: removed old preview link action * chore: updated who we are page * fix: remove console logs (#7201) * Update smoketests.yml - change e2e skip term (#7194) * Update smoketests.yml - change e2e skip term If the term 'skipsm' is specified in the branch name then skip the e2e tests (used to be 'quill'). This is because the dev knows they are making radical change which will need the tests to be modified at a later date. * Update smoketests.yml - Modified to use DRAFT param Skip smoket test if the PR is in Draft mode. * Update generate-preview-link.yml - Add DRAFT param (#7198) We need to store a new param to GH storage, DRAFT. So that the smoketest.yml can use it to ignore a test run. * Fasih/DPROD-3590/integrate firebase feature flag for third party items (#7149) * feat: implement json which contain items name * feat: adding flag on third party packages * feat: implemented flag on trade platfrom apps * feat: removed unsued code * feat: made some items value false * feat: enabled all items * feat: add condition for derivgo footer badge * feat: updated keys * feat: interated api and hook * feat: updated hook with importing function * feat: updated hook and filtered footer icon data * feat: remvoed hotjar and gtm from flags * feat: removed unused code * feat: made every item true * feat: updated other layout files * feat: updated the condition --------- Co-authored-by: fasihali-deriv Co-authored-by: Muhammad Fasih Ali Naqvi * chore: fixed regulatory type * chore: updated regulatory page * chore: updated contact us and careers page * chore: updated locations page * chore: updated partners page * chore: update multiple build action yml (#7210) * chore: update multiple build action yml * chore: update action with To DO * chore: updated deriv prime page * chore: updated affiliate ib page * chore: updated 404 page * chore: updated payment agent page * chore: test workflow * chore: test * empty: 🚀 to redeploy and trigger build --------- Co-authored-by: fasihali-deriv Co-authored-by: Agrim Jain <157685219+agrim-deriv@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: prince-deriv Co-authored-by: behnaz Co-authored-by: mayuran-deriv <129507167+mayuran-deriv@users.noreply.github.com> Co-authored-by: markodonnell-deriv <144238191+markodonnell-deriv@users.noreply.github.com> Co-authored-by: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com> Co-authored-by: Muhammad Fasih Ali Naqvi Co-authored-by: Habib Deriv <88178645+habib-deriv@users.noreply.github.com> * chore: update yml file for cf pages (#7228) * chore: update row deployment * chore: update eu and row deployment * chore: update eu and row deployment * chore: update path to deploy * chore: update decodeURI component * Fasih/DPROD-3321/Multiple build for market pages (#7218) * chore: create themes and sites dir * chore: created row and eu sites directiory * chore: created gatsby-theme-deriv directory * chore: moved src into deriv theme directory * chore: moved types into deriv theme directory * chore: moved static and gatsby files into deriv theme directory * chore: moved storybook and favicons files into deriv theme directory * chore: added eslint to theme * chore: added typescript to theme * chore: added workspaces * chore: added eslint script * chore: added stylelint script * chore: added prettier script * chore: added prettier and git ignore * chore: udpated jest configure * chore: fixed checkbox test * chore: added codegen script * chore: added storybook script * chore: added react packages * chore: moved packages to theme * chore: added theme config and options * chore: added row script * chore: moved i18 files to theme * chore: updated favicon path in gatsby config * chore: moved babel tailwind and js config file to theme * chore: added clean script * chore: updated eslint and tsconfig to fix alias import error * chore: added theme to sites * chore: fixed sass classnames issue * chore: updated tailwind config * chore: fixed env issue * chore: fixed eslint issues * chore: added build script * chore: fixed html minification issue * chore: fixed html minification issue * chore: updated partytown scripts * chore: updated serve scripts * chore: updated htaccess script * chore: updated translation scripts * chore: updated link generate workflow * chore: updated link generate workflow * chore: added new workflow * chore: removed workflow * empty: 🚀 to redeploy and trigger build * feat: added region conditions on home and header nav * chore: test workflow * chore: merge cleanup * chore: added region based data for homepage * chore: added a different port to eu serve * chore: test workflow * empty: 🚀 to redeploy and trigger build * empty: 🚀 to redeploy and trigger build * empty: 🚀 to redeploy and trigger build * chore: test workflow * chore: test workflow * chore: removed * empty: 🚀 to redeploy and trigger build * chore: removed workflow * feat: added conditions * feat: added more eu conditions * feat: added eu preview link file * feat: udpated region condition * feat: remove use effect and add normal conditions * feat: removed unsued code --------- Co-authored-by: hasan-deriv Co-authored-by: fasihali-deriv Co-authored-by: Hasan Mobarak <126637868+hasan-deriv@users.noreply.github.com> Co-authored-by: Muhammad Fasih Ali Naqvi * chore: updated help center * chore: updated trader tools * chore: updated payment methods * chore: updated dmt5 trading signals * chore: updated dbot page * chore: updated dbot page * chore: updated dmt5 page * chore: updated derivx page * chore: updated ctrader page * chore: updated dtrader page * chore: updated deriv go page * chore: updated cfds page * chore: updated multiplier page * chore: fixed ctrader page * chore: updated accumulators page * chore: removed unused data from principles data * chore: removed unused margin dir * chore: updated accumulators page * chore: updated asians page * chore: updated digital options page * chore: updated turbo options page * chore: updated vanilla options page * chore: updated ctrader login page * chore: updated check email page * chore: updated ctrader check email page * chore: updated ctrader manage pages * chore: updated ctrader signup pages * chore: updated endpoint page * chore: updated responsible page * chore: updated signup page * chore: updated signup affiliates page * chore: updated signup success page * chore: updated tnc page * chore: updated trading specification page * chore: updated unsubscribe page * chore: updated landing home page * chore: updated landing mt5 page * chore: updated landing ebook page * chore: updated landing forex trading page * chore: updated landing jump indices page * chore: updated landing signup page * chore: updated landing stocks page * chore: updated landing trade forex page * chore: updated landing weekend trading page * chore: updated rest component * chore: updated layouts * chore: fixed external link * chore: fixed footer description * chore: fixed ctrader signup * chore: updated help center * chore: updated dmt5 page * chore: fixed ctrader page * chore: fixed conflicts * chore: fixed rest row and eu * chore: fixed footer description * chore: fixed footer nav * chore: fixed social media url hook * chore: fixed hero image css * empty: 🚀 to redeploy and trigger build * chore: fixed hero image css --------- Co-authored-by: Agrim Jain <157685219+agrim-deriv@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: prince-deriv Co-authored-by: behnaz Co-authored-by: mayuran-deriv <129507167+mayuran-deriv@users.noreply.github.com> Co-authored-by: markodonnell-deriv <144238191+markodonnell-deriv@users.noreply.github.com> Co-authored-by: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com> Co-authored-by: fasihali-deriv Co-authored-by: Muhammad Fasih Ali Naqvi Co-authored-by: Habib Deriv <88178645+habib-deriv@users.noreply.github.com> Co-authored-by: habib-deriv --- .github/workflows/generate-preview-link.yml | 190 +++++++++++++++++ .github/workflows/smoketests.yml | 2 +- crowdin/messages.json | 138 +++++------- package-lock.json | 10 + package.json | 1 + .../src/components/custom/_banner-alert.tsx | 6 +- .../src/components/custom/_dbanner.tsx | 8 +- .../src/components/custom/_dhero-dmt5.tsx | 6 +- .../src/components/custom/_dhero.tsx | 6 +- .../src/components/custom/_signup-new.tsx | 6 +- .../src/components/custom/other-platforms.tsx | 33 ++- .../elements/off-canvas-menu-career.tsx | 6 +- .../components/elements/off-canvas-menu.tsx | 18 +- .../src/components/hooks/use-pricing-feed.tsx | 33 --- .../components/hooks/use-social-media-url.tsx | 6 +- .../hooks/use-third-party-flags.tsx | 3 +- .../src/components/layout/layout.tsx | 24 +-- .../localization/localized-link.tsx | 6 +- .../components/atoms/link/external.tsx | 7 +- .../cfd-warning-banner/index.tsx | 6 +- .../molecules/protected-route/index.tsx | 17 +- .../navigation/nav-card-items/index.tsx | 10 +- .../nav-sections-container/index.tsx | 10 +- .../nav-sections-container/section-column.tsx | 10 +- .../cfd-warning-banner/index.tsx | 6 +- .../components/quill/quill-layout/index.tsx | 36 ++-- .../components/quill/shared-link/external.tsx | 6 +- .../banners/blade-shape-banner/index.tsx | 25 ++- .../digital-options-layout/index.tsx | 6 +- .../templates/footer/deriv-go-banner.tsx | 13 +- .../templates/footer/description.tsx | 10 +- .../components/templates/footer/index.tsx | 9 +- .../templates/help-centre/index.tsx | 6 +- .../components/templates/layout/index.tsx | 24 +-- .../navigation/partners-nav/index.tsx | 13 +- .../navigation/partners-nav/nav.buttons.tsx | 8 +- .../tab-nav-without-border/index.tsx | 8 +- .../template/desktop-menu/desktop.items.tsx | 6 +- .../navigation/template/nav-context/index.tsx | 10 +- .../templates/options-layout/index.tsx | 6 +- .../src/features/pages/check-email/index.tsx | 5 +- .../pages/ctrader-check-email/index.tsx | 5 +- .../features/pages/ctrader-login/index.tsx | 5 +- .../pages/ctrader-login/login-success.tsx | 5 +- .../pages/ctrader-manage/add-account.tsx | 4 +- .../ctrader-manage/add-more-accounts.tsx | 4 +- .../features/pages/ctrader-manage/cashier.tsx | 4 +- .../pages/ctrader-manage/change-password.tsx | 4 +- .../pages/ctrader-manage/close-account.tsx | 4 +- .../ctrader-manage/ctrader-manage-data.tsx | 2 +- .../pages/ctrader-manage/ctrader-manage.tsx | 8 +- .../features/pages/ctrader-signup/index.tsx | 10 +- .../ctrader-signup/signup-credentials.tsx | 5 +- .../pages/ctrader-signup/signup-success.tsx | 5 +- .../features/pages/deriv-ctrader/index.tsx | 14 +- .../deriv-ctrader/other-platforms/index.tsx | 20 +- .../features/pages/home/hero/hero-image.tsx | 4 +- .../pages/home/live-pricing/index.tsx | 49 ----- .../live-pricing-section.module.scss | 8 - .../live-pricing/market-tabs/market-tab.tsx | 71 ------- .../market-tabs/tab-style.module.scss | 26 --- .../home/live-pricing/market-tabs/utils.tsx | 70 ------ .../table-component/live-market-table.tsx | 128 ----------- .../table-component/live-pricing.module.scss | 122 ----------- .../table-component/symbol-icon.tsx | 14 -- .../pages/home/live-pricing/types.tsx | 23 -- .../home/live-pricing/use-live-columns.tsx | 163 -------------- .../pages/options/accumulator/index.tsx | 4 +- .../pages/options/digital/asians/index.tsx | 5 +- .../pages/options/digital/digits/index.tsx | 5 +- .../pages/options/digital/high-low/index.tsx | 5 +- .../pages/options/digital/in-out/index.tsx | 5 +- .../pages/options/digital/lookbacks/index.tsx | 5 +- .../digital/only-ups-only-downs/index.tsx | 5 +- .../options/digital/reset-call/index.tsx | 5 +- .../options/digital/touch-no-touch/index.tsx | 5 +- .../pages/options/digital/up-down/index.tsx | 5 +- .../features/pages/options/turbo/index.tsx | 4 +- .../features/pages/options/vanilla/index.tsx | 4 +- .../src/features/pages/principles/data.tsx | 79 +------ .../features/pages/signup-success/index.tsx | 7 +- .../pages/signup/form-container/index.tsx | 6 +- .../src/features/pages/signup/index.tsx | 5 +- .../src/pages/check-email/index.tsx | 5 +- .../src/pages/ctrader-check-email/index.tsx | 6 +- .../src/pages/ctrader-login/index.tsx | 7 +- .../src/pages/ctrader-login/login-success.tsx | 7 +- .../src/pages/ctrader-manage/add-account.tsx | 7 +- .../ctrader-manage/add-more-accounts.tsx | 7 +- .../src/pages/ctrader-manage/cashier.tsx | 7 +- .../pages/ctrader-manage/change-password.tsx | 7 +- .../pages/ctrader-manage/close-account.tsx | 7 +- .../src/pages/ctrader-signup/credentials.tsx | 7 +- .../src/pages/ctrader-signup/index.tsx | 7 +- .../pages/ctrader-signup/signup-success.tsx | 7 +- .../src/pages/dbot/index.tsx | 37 ++-- .../src/pages/deriv-ctrader/index.tsx | 12 +- .../src/pages/deriv-go/_footer-banner.tsx | 1 - .../src/pages/deriv-go/_other-apps.tsx | 1 - .../src/pages/deriv-go/index.tsx | 44 ++-- .../src/pages/derivx/_other-apps.tsx | 2 +- .../src/pages/derivx/index.tsx | 42 ++-- .../dmt5-trading-signals/_signal-steps.tsx | 6 +- .../src/pages/dmt5-trading-signals/index.tsx | 5 +- .../src/pages/dmt5/_dbanner.tsx | 2 +- .../src/pages/dmt5/_flexibility.tsx | 12 +- .../src/pages/dmt5/_interest_free_trading.tsx | 6 +- .../src/pages/dmt5/_margin_calculator.tsx | 15 +- .../src/pages/dmt5/_numbers.tsx | 13 +- .../src/pages/dmt5/_other-platforms.tsx | 1 - .../src/pages/dmt5/_start-trader.tsx | 8 +- .../src/pages/dmt5/_why-trade-dmt5.tsx | 9 +- .../src/pages/dmt5/index.tsx | 44 ++-- .../src/pages/dtrader/_our-platforms.tsx | 1 - .../src/pages/dtrader/_steps_section.tsx | 27 +-- .../src/pages/dtrader/index.tsx | 48 ++--- .../src/pages/endpoint/index.tsx | 9 +- .../help-centre/components/_answer-card.tsx | 8 +- .../pages/help-centre/components/_derived.tsx | 12 +- .../pages/help-centre/components/_list.tsx | 7 +- .../components/_questions-section.tsx | 4 - .../components/_questions-template.tsx | 11 +- .../src/pages/help-centre/data/_hooks.tsx | 10 +- .../src/pages/help-centre/deriv-bot.tsx | 11 +- .../src/pages/help-centre/deriv-p2p.tsx | 11 +- .../src/pages/help-centre/deriv-x.tsx | 11 +- .../src/pages/help-centre/index.tsx | 5 +- .../src/pages/home/_hero.tsx | 15 +- .../src/pages/home/_platform-slideshow.tsx | 24 +-- .../src/pages/home/_trade.tsx | 13 +- .../src/pages/home/_what-our-clients-say.tsx | 6 +- .../src/pages/landing/dmt5/index.tsx | 5 +- .../landing/ebooks/components/_get-ebook.tsx | 20 +- .../src/pages/landing/ebooks/crypto.tsx | 5 +- .../src/pages/landing/ebooks/forex.tsx | 8 +- .../src/pages/landing/ebooks/stocks.tsx | 5 +- .../src/pages/landing/forex-trading/index.tsx | 5 +- .../src/pages/landing/index.tsx | 5 +- .../src/pages/landing/jump-indices/index.tsx | 5 +- .../src/pages/landing/signup/index.tsx | 5 +- .../pages/landing/stocks/_footerBanner.tsx | 6 +- .../src/pages/landing/stocks/index.tsx | 11 +- .../src/pages/landing/trade-forex/index.tsx | 5 +- .../pages/landing/weekend-trading/index.tsx | 5 +- .../components/sections/_other-markets.tsx | 14 +- .../instruments/_crash-boom-multipliers.tsx | 6 +- .../pages/markets/instruments/_crash-boom.tsx | 13 +- .../pages/markets/instruments/_markets.tsx | 18 +- .../instruments/_volatility-indices.tsx | 13 +- .../partners/_partnership-opportunities.tsx | 1 - .../pages/partners/affiliate-ib/_faq-data.tsx | 16 +- .../src/pages/payment-methods/index.tsx | 22 +- .../regulatory/_financial_commission.tsx | 8 +- .../src/pages/reset-password/index.tsx | 5 +- .../src/pages/responsible/_trading-limits.tsx | 10 +- .../responsible/_trading-responsibly.tsx | 10 +- .../src/pages/responsible/index.tsx | 13 +- .../components/_account-plan.tsx | 6 +- .../src/pages/signup-affiliates/index.tsx | 5 +- .../src/pages/signup-success/index.tsx | 5 +- .../src/pages/signup/index.tsx | 5 +- .../terms-and-conditions/_business-grid.tsx | 37 ++-- .../terms-and-conditions/_clients-grid.tsx | 12 +- .../src/pages/terms-and-conditions/index.tsx | 5 +- .../accumulators/_accumulators-to-trade.tsx | 118 ---------- .../accumulators/_how-accumulators-works.tsx | 201 ------------------ .../accumulators/_markets-available.tsx | 138 ------------ .../accumulators/_what-are-accumulators.tsx | 63 ------ .../pages/trade-types/accumulators/index.tsx | 121 ----------- .../trade-types/cfds/_available-markets.tsx | 12 +- .../pages/trade-types/cfds/_start-trading.tsx | 8 +- .../cfds/_trading-cfd-increases.tsx | 14 +- .../pages/trade-types/cfds/_what_is_cfd.tsx | 13 +- .../src/pages/trade-types/cfds/index.tsx | 13 +- .../trade-types/margin/_available-markets.tsx | 148 ------------- .../trade-types/margin/_why-trade-margin.tsx | 90 -------- .../multiplier/_how-options-works.tsx | 16 +- .../multiplier/_markets-available.tsx | 8 +- .../multiplier/_things-in-mind.tsx | 8 +- .../multiplier/_what-are-options.tsx | 10 +- .../pages/trade-types/multiplier/index.tsx | 5 +- .../trade-types/options/_start-trading.tsx | 50 ----- .../options/accumulator-options/index.tsx | 11 +- .../options/digital-options/asians/index.tsx | 11 +- .../options/digital-options/digits/index.tsx | 11 +- .../digital-options/high-low-ticks/index.tsx | 11 +- .../options/digital-options/in-out/index.tsx | 11 +- .../digital-options/lookbacks/index.tsx | 11 +- .../only-ups-only-downs/index.tsx | 11 +- .../reset-call-reset-put/index.tsx | 11 +- .../digital-options/touch-no-touch/index.tsx | 11 +- .../digital-options/up-and-down/index.tsx | 11 +- .../options/turbo-options/index.tsx | 11 +- .../options/vanilla-options/index.tsx | 11 +- .../src/pages/trader-tools/index.tsx | 5 +- .../components/_available-platform.tsx | 16 +- .../components/_elements.tsx | 11 +- .../components/_trading_spec_table.tsx | 17 +- .../src/pages/trading-specification/index.tsx | 5 +- .../src/pages/unsubscribe/index.tsx | 5 +- 200 files changed, 1095 insertions(+), 2710 deletions(-) create mode 100644 .github/workflows/generate-preview-link.yml delete mode 100644 themes/gatsby-theme-deriv/src/components/hooks/use-pricing-feed.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/index.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/live-pricing-section.module.scss delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/market-tab.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/tab-style.module.scss delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/utils.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-market-table.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-pricing.module.scss delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/symbol-icon.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/types.tsx delete mode 100644 themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/use-live-columns.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_accumulators-to-trade.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_how-accumulators-works.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_markets-available.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_what-are-accumulators.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/index.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/margin/_available-markets.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/margin/_why-trade-margin.tsx delete mode 100644 themes/gatsby-theme-deriv/src/pages/trade-types/options/_start-trading.tsx diff --git a/.github/workflows/generate-preview-link.yml b/.github/workflows/generate-preview-link.yml new file mode 100644 index 00000000000..95cc8f0d3c7 --- /dev/null +++ b/.github/workflows/generate-preview-link.yml @@ -0,0 +1,190 @@ +name: Generate preview link + +on: + pull_request_target: + types: [opened, synchronize] + branches: + - '**' + +env: + NODE_OPTIONS: '--max-old-space-size=8192' + +concurrency: + group: cloudflare-pages-build-${{github.head_ref}} + cancel-in-progress: true + +jobs: + build_to_cloudflare_pages: + runs-on: Ubuntu-latest + permissions: + checks: write + pull-requests: write + steps: + - name: Verify user + uses: 'deriv-com/shared-actions/.github/actions/verify_user_in_organization@v1' + with: + username: ${{github.event.pull_request.user.login}} + token: ${{ secrets.PREVIEW_LINK_TOKEN }} + + - name: Checkout to repo + uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 + with: + ref: ${{ github.event.pull_request.head.sha }} + + - name: 'Generate action link comment' + id: generate_action_url + uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736 + with: + github-token: ${{ github.token }} + script: | + const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}" + const comment = [ + '| Name | Result |', + '| :--- | :------ |', + `| **Build status** | Building 🔨 |`, + `| **Action URL** | [Visit Action](${action_url}) |`, + '' + ].join('\n') + core.setOutput("comment", comment); + + - name: Post Cloudflare Pages Preview comment + uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd + with: + header: Cloudflare Pages Preview Comment + number: ${{github.event.pull_request.user.login}} + message: ${{steps.generate_action_url.outputs.comment}} + recreate: true + + - name: Setup node + uses: actions/setup-node@7c12f8017d5436eb855f1ed4399f037a36fbd9e8 + + - name: Create npmrc file + shell: bash + run: echo "@deriv-com:registry=https://npm.pkg.github.com" >> .npmrc + + - name: Setup install read-only token for deriv-com org + shell: bash + run: echo '//npm.pkg.github.com/:_authToken=${{ secrets.READ_DERIV_COM_ORG_PACKAGES }}' >> .npmrc + + - name: Get build output from master cache + uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c + with: + key: master-cache-public + restore-keys: | + master-cache-public-replica + path: | + .cache + public + - name: Get cached dependencies + id: cache-npm + uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c + with: + path: node_modules + key: npm-${{ hashFiles('**/package-lock.json') }} + + - name: Install dependencies + if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }} + run: npm ci + + - name: Build project + id: build-project + env: + GATSBY_ENV: staging + GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }} + GATSBY_GROWTHBOOK_DECRYPTION_KEY: ${{ secrets.GATSBY_GROWTHBOOK_DECRYPTION_KEY }} + GATSBY_RUDDERSTACK_STAGING_KEY: ${{ secrets.GATSBY_RUDDERSTACK_STAGING_KEY }} + GATSBY_RUDDERSTACK_PRODUCTION_KEY: ${{ secrets.GATSBY_RUDDERSTACK_PRODUCTION_KEY }} + GATSBY_STRAPI_TOKEN: ${{ secrets.GATSBY_STRAPI_TOKEN }} + GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }} + GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }} + GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }} + + run: npm run build + + - name: Retrieve PR information + env: + EVENT_NUMBER: ${{ github.event.number }} + EVENT_USERNAME: ${{ github.event.pull_request.user.login }} + HEAD_REF: ${{ github.head_ref }} + DRAFT: ${{ github.event.pull_request.draft }} + run: | + mkdir -p .pr + echo "$EVENT_NUMBER" > .pr/NR + echo "$EVENT_USERNAME" > .pr/USERNAME + echo "$HEAD_REF" > .pr/BRANCHNAME + echo "$DRAFT" > .pr/DRAFT + + - name: Publish to Cloudflare Pages + id: publish-to-pages + env: + CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_TEST_LINKS_API_TOKEN }} + CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_TEST_LINKS_ACCOUNT_ID }} + HEAD_BRANCH: ${{ github.head_ref }} + run: | + echo "Installing Wrangler CLI" + npm i -g wrangler + echo "Deploying build to Cloudflare Pages" + directory='public' + projectName='deriv-com-preview-links' + branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/') + cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?) + echo "------" + preview_url=https://$branch.deriv-com-preview-links.pages.dev + cat log.txt + if grep -q "Deployment complete" log.txt; then + echo "preview_url=$preview_url" >> "$GITHUB_OUTPUT" + echo $preview_url > .pr/PREVIEW_URL + else + echo "Deployment to Cloudflare Pages failed." + exit 1 + fi + + - name: 'Generate preview link comment' + if: success() + id: generate_preview_url + uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736 + with: + github-token: ${{ github.token }} + script: | + const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}" + const preview_url = "${{steps.publish-to-pages.outputs.preview_url}}" + const comment = [ + `**Preview Link**: ${preview_url}`, + '| Name | Result |', + '| :--- | :------ |', + `| **Build status** | Completed ✅ |`, + `| **Preview URL** | [Visit Preview](${preview_url}) |`, + `| **Action URL** | [Visit Action](${action_url}) |`, + '' + ].join('\n') + core.setOutput("comment", comment); + - name: 'Generate failure comment' + if: failure() + id: generate_failure_comment + uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736 + with: + github-token: ${{ github.token }} + script: | + const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}" + const comment = [ + '| Name | Result |', + '| :--- | :------ |', + `| **Build status** | Failed ❌ |`, + `| **Action URL** | [Visit Action](${action_url}) |`, + '' + ].join('\n') + core.setOutput("comment", comment); + - name: Post Cloudflare Pages Preview comment + if: success() || failure() + uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd + with: + header: Cloudflare Pages Preview Comment + number: ${{github.event.number}} + message: ${{steps.generate_preview_url.outputs.comment || steps.generate_failure_comment.outputs.comment }} + recreate: true + + - name: Upload PR information to artifact + uses: actions/upload-artifact@82c141cc518b40d92cc801eee768e7aafc9c2fa2 + with: + name: 'pr-${{github.run_id}}' + path: .pr diff --git a/.github/workflows/smoketests.yml b/.github/workflows/smoketests.yml index 2cbef283107..1b81633cedb 100644 --- a/.github/workflows/smoketests.yml +++ b/.github/workflows/smoketests.yml @@ -88,4 +88,4 @@ jobs: header: Smoke tests status update number: ${{ steps.pr_information.outputs.issue_number }} message: '${{ steps.set_msg.outputs.msg }}' - recreate: true + recreate: true \ No newline at end of file diff --git a/crowdin/messages.json b/crowdin/messages.json index d268276ad33..712dd330427 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -27,6 +27,7 @@ "26480598": "General", "26596220": "Finance", "27830635": "Deriv (V) Ltd", + "28675270": "Chief Financial Officer", "28681430": "Join great marketing minds at Deriv’s office in Ciudad del Este, Paraguay. Be part of a vibrant team that develops the company’s growth in the region.", "29394238": "<0> 280,000", "33219178": "We'll pay your IB commission into your MT5 (Derived account daily).", @@ -39,6 +40,7 @@ "39595561": "See how your bot is performing as it executes each trade and receive notifications via Telegram.", "41078219": "Get into the Deriv Trader experience", "41570825": "Are High/Low Ticks options available on Deriv Trader?", + "48132512": "Join and grow with us.", "48235639": "The potential payout and loss (your initial stake) amounts are clearly displayed before you open the trade.", "48469443": "Complete <0>this form, and we'll get in touch with you in a couple of days.
You'll need a real Deriv trading account, too. If you don't have one, sign up <1>here.", "48763975": "What if I am unhappy with the outcome of my complaint?", @@ -81,6 +83,7 @@ "71535160": "Calculate the overnight fees for holding any open positions. The fees can be positive or negative depending on your swap rate.", "71630191": "Do not share your account information and other personal details with anyone via Telegram.", "71650838": "Speak simply and plainly, and not hide behind ambiguity", + "73765361": "Chief Audit Executive", "74138086": "Take control of your trades on Deriv MT5", "74593350": "3. Select Real account or Demo account.", "76083876": "<0>A social media admin
Promote our products and services on your social media pages, and earn commission when you convert your audience into traders.", @@ -88,7 +91,6 @@ "79497287": "Exchange-traded funds", "80411232": "Keep your login details secure and <0>enable two-factor authentication to prevent unauthorised usage of your account.", "80429744": "Fast and stable", - "83428444": "Start trading accumulators on Deriv", "84123624": "Partnership Programme | Deriv", "84402478": "Where do I find the blocks I need?", "84605906": "The Deriv MT5 Financial account offers you leverage to trade contracts for difference (CFDs) on forex, stocks, stock indices, commodities, synthetic indices, and cryptocurrencies.", @@ -120,7 +122,6 @@ "110140669": "If you are a professional trader, the MT5 trading signals service allows you to share your strategies with other traders for free or a subscription fee that you determine. When traders subscribe to your signal, your deals are automatically replicated on their accounts each time you place a trade.", "111464658": "<0>5 lots traded with DL on <0>BTC/USD is split between:", "113378532": "ETH/USD", - "114014970": "Trade now", "115911783": "Of course, this list isn’t complete. Every day, impersonators come up with new ways to try to steal your information and money.", "117174749": "Can I close an open position before expiry?", "117273069": "<0>Wall Street 30 follows the stock performance of the top 30 listed companies in the US.", @@ -263,7 +264,6 @@ "259593484": "real account", "260003723": "Example 2", "261878007": "If you select 'Matches', you receive the payout if the last digit of the exit price is the same as your prediction.", - "262590832": "Open long and short positions, depending on your preferred trading strategy.", "263232709": "1 - 2 working days", "263938952": "If the reset spot is beneficial based on your market prediction, it replaces your original entry price (or strike price). For it to be beneficial, the reset spot needs to be:", "264391901": "Enjoy synthetic markets that emulate the excitement of real-world markets without unpredictable real-world disruptions.", @@ -362,6 +362,7 @@ "357273365": "For DEX Indices, a deal of 3 lots of the DEX 600 DOWN Index for a price of USD 6000 will pay out USD 0.5 in commission based on the following formula:", "358257887": "Once your submitted document has been approved, go to Cashier > DP2P to register your Deriv P2P account.", "358369253": "Can I close In/Out options before the end of the trade duration?", + "358838306": "Vice President of Customer Support", "360357815": "High/Low ticks | Digital options contract | Deriv", "361051814": "Let’s say you want to calculate the take profit level and pip value when you want to sell 3 lots of Volatility 50 Index priced at 249.5961 USD with a take profit amount of 84 USD.", "364422126": "Available 24/7 with varying levels of volatility, our synthetic indices are priced based on algorithms that are audited for fairness by an independent third party.", @@ -402,6 +403,7 @@ "396323780": "DEX Indices", "396992773": "Deriv is the best broker in the world so far in terms of the assets they offer, ease of withdrawals and deposits, plus other services. Keep on giving us the best, Deriv!", "399056226": "How can I recognise phishing websites?", + "400968378": "locations", "401039438": "Have consistent, regular sign ups via your referral link", "401450104": "> 3 - 5 billion", "401498558": "Deriv (FX) Ltd (Company No. LL13394), incorporated on the 18th January 2017, is registered in the Federal Territory of Labuan (Malaysia) with its registered office located at Unit No. 3A-16, Level 3A, Labuan Times Square, Jalan Merdeka, 87000, Federal Territory of Labuan, Malaysia. Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority <0>(view licence) and is a member of the <1>Labuan Fintech Association.", @@ -418,7 +420,6 @@ "413762216": "Can I exit an open Reset Call/Reset Put contract before expiry?", "415028859": "Local currency", "415543200": "This depends on the margin required for each asset. You’ll be able to see the required margin for each asset before opening your position.", - "416296716": "Maximum payout", "417690017": "Touch / No Touch", "417855021": "Name is required", "418173024": "Markets available for CFD trading", @@ -435,7 +436,6 @@ "428153715": "Brand new synthetic indices are now available on DTrader and Deriv MT5", "429395367": "Guide and tutorial for DBot", "429483909": "<0>2 lots with 100 leverage:", - "430936420": "Access over 50 assets and also trade with up to 1:1000 leverage and zero commission on trades.", "431284069": "Your net profit will depend on how much the spot price falls below the barrier, with the maximum potential gains growing if the underlying price falls significantly. Your losses are limited to the initial stake required to purchase the short turbo option.", "432518896": "Client trust is our highest priority, and that’s why millions of users choose us. Here are some of the things that make us a leading online trading service provider.", "432775041": "Get Trading", @@ -482,8 +482,9 @@ "469222213": "Click on the <0>My Statistics tab and select your signal provider.", "469552854": "Want to know more about CFD trading conditions for the instruments we offer?", "469798381": "Years of service", - "470277541": "Maximum duration", "472630909": "It will take 1-3 working days for your application to be reviewed.", + "472915014": "Deriv is one of the world’s largest online brokers. We offer CFDs and other derivatives on forex, stocks & indices, cryptocurrencies, commodities, and derived indices to millions of registered users across the globe.", + "473760456": "We speak plainly to avoid ambiguity, disclose the terms of all contracts, and are clear about the risks of trading and how we make money.", "474616293": "The trading platform to fit your style", "475611258": "Help centre | Frequently asked questions | About Deriv | Deriv", "476241116": "Provide expert tips and opinions on online trading via a website, blog, YouTube channel, webinars, or other forms of digital media.", @@ -523,7 +524,6 @@ "504465748": "We'll email you a verification link. Click that link and set a new password for your Deriv account.", "506442463": "What is the onboarding procedure?", "506797447": "<0>EUR Basket measures the value of the Euro against a basket of five global currencies (USD, AUD, GBP, JPY, CAD), each weighted by 20%.", - "508640915": "Why trade accumulators on Deriv", "509964491": "Trade even when most financial markets are closed", "510416775": "Turbo options allow you to earn a potentially high payout if your market predictions are right and if the spot price does not touch or breach a predetermined barrier.", "510912921": "If the selected condition is not met or if the exit price is equal to either barrier, your stake is lost.", @@ -558,6 +558,7 @@ "535867011": "Sign up in minutes and explore Trader’s Hub — all your trading needs, in one place.", "538228086": "Close-Low", "539261300": "OS icon", + "539645627": "We aim to deliver market-leading products that are trusted around the world.", "540538076": "40+ stocks", "541218901": "Full name*", "541543954": "<0>Revenue share
Earn commission of up to 45% based on the monthly net revenue generated by your clients. The higher their net revenue, the higher your commission payout.", @@ -631,7 +632,6 @@ "602265590": "Stop loss works slightly differently in Crash/Boom/Range break indices. This is because sudden fluctuations in market price from one tick to the next can sometimes surpass the stop loss you have set. When the market price exceeds your stop loss amount, your contract will be automatically closed at that point, instead of exactly at the stop loss level.", "603094883": "However, it is important to note that the availability of early exit may vary depending on the specific trade type. Some trade types may have restrictions or it may only be available within a certain timeframe.", "604031157": "A software developer with your own trading platform that can be linked to Deriv’s API. Head to the <0>Deriv API page for more info on how our API works.", - "604863126": "The frequency of tick generation differs between indices, with some generating ticks every second and others generating them every two seconds.", "605798512": "There is a minimum of USD 0.01 if you would like to transfer funds to another platform.", "606371596": "How to trade the forex market", "607535944": "5 - 30 minutes", @@ -668,6 +668,7 @@ "636857983": "Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of the world's most popular cryptocurrencies.", "636968212": "If you encounter any issues with a transaction on Deriv P2P, first try to resolve it with the trader you’re dealing with. If they’re not willing to help, please let us know via <0>live chat, and we’ll help you resolve it.", "637013579": "Our classic \"drag-and-drop\" tool for creating trading bots, featuring pop-up trading charts, for advanced users.", + "640307277": "Vice President of Engineering", "640979467": "<0>IWM.US The iShares Russell 2000 ETF tracks the investment results of an index of small-capitalisation US equities.", "642995056": "Email", "643714136": "Binary bot for creating trading bot", @@ -741,6 +742,7 @@ "706717249": "5 - 800", "706931524": "When you purchase a 'High-Close' contract, your payout will be equal to the difference between the highest price and the exit price over the duration of the contract multiplied by the multiplier.", "710137133": "Apply now", + "712547410": "total trade turnover", "714321435": "laptop mt5", "714478782": "<0>AUD Basket measures the value of the Australian dollar against a basket of five global currencies (USD, EUR, GBP, JPY, CAD), each weighted by 20%.", "715753532": "Find your role with us by browsing Deriv job opportunities in Cyberjaya, Malaysia.", @@ -796,6 +798,7 @@ "762926186": "A quick strategy is a ready-made strategy that you can use in Deriv Bot. There are 3 quick strategies you can choose from: Martingale, D'Alembert, and Oscar's Grind.", "763072092": "MT5 trading signals subscriptions expire automatically after one month. To renew or cancel a subscription, follow these steps.", "763514492": "Get integrated help", + "764856444": "We have a huge mission, an incredible team, and rapid growth.", "764879840": "GLD.US", "764958509": "Trade on global financial markets and multiply your potential profit without losing more than your stake.", "768795461": "Start trading cryptocurrencies on Deriv in 3 simple steps", @@ -806,7 +809,6 @@ "774654899": "DMT5 trading platform at Deriv", "775706054": "Do you sell trading bots?", "775826029": "In the Copy tab of your Deriv cTrader account, search for strategy providers. Pick your favourite strategies, allocate funds, and start copy trading.", - "777072220": "Click the Buy button to open your trade.", "777203273": "Trade CFDs, Options, and Multipliers", "778624300": "Take advantage of Deriv's trading calculators that help you to calculate your swap, pip, profit, and losses for the CFD and multiplier trading.", "779522948": "Ipoh | Our office – Malaysia | Deriv", @@ -837,6 +839,7 @@ "803547668": "paid out since inception", "803989222": "The Synthetics account allows you to trade on Deriv’s proprietary synthetic indices that are available 24/7 and simulate real-world market movements.", "806165583": "Australia 200", + "808426886": "We don’t practise hard-selling, offer financial or trading advice, nor make promises of guaranteed returns. We don’t encourage vulnerable people to trade and implement controls to prevent any unlawful activity.", "809146176": "Not applicable", "809414451": "<0>Forex at your fingertips. Currency trading with major and minor pairs.", "809480545": "If you'd like to log in using your email address instead, follow these steps:", @@ -869,9 +872,9 @@ "831164350": "Let’s say you want to calculate the stop loss level and pip value when you want to buy a lot of EUR/USD priced at 1.17524 USD with a stop loss amount of 24 USD.", "831282685": "Drop us an email", "831784233": "Close-Low Icon", + "832324110": "Our locations", "832827564": "This plan is not available for IBs who promote to clients residing in the EU.", "833547634": "Currency weight", - "835328271": "accumulators take profit", "835766128": "Check performance of your bot", "836171053": "Partnership opportunity", "836198432": "Benefits of subscribing to MT5 signals", @@ -910,7 +913,6 @@ "868499940": "Start trading with Deriv", "869176308": "Do not worry, if you encounter any issue along the process, please reach out to our support through <0>Live Chat for further assistance.", "870239780": "What markets can I trade on Deriv Trader?", - "871462332": "Take advantage of high leverage and low spreads on Deriv MT5 and Deriv X.", "872087592": "For Rise/Fall, contract durations range from 1 tick and 365 days.", "874881951": "Browse job opportunities available at our Dubai office. Find your role in IT, marketing, and human resources.", "875101277": "If I close my web browser, will Deriv Bot continue to run?", @@ -968,7 +970,6 @@ "917922170": "- Select the underlying asset you want to trade.", "918181729": "call to action background", "918587905": "Are you sure you want to delete your account?", - "918634571": "When you open a position, barriers are created around the asset’s price. The upper and lower barriers are automatically calculated for every tick based on your chosen asset and accumulator value. If you close your position before either of the barriers is reached, you will make a profit.", "920363635": "Frequently asked questions - IB programme", "920654544": "Currently, you can only buy Long and Short turbo options contracts on Deriv.", "922601177": "CPA", @@ -1064,7 +1065,6 @@ "1023972728": "<0>Swap charge = volume × contract size × point value × swap rate", "1024366221": "The page you are looking for does not exist.", "1024756670": "Trade on multiple markets", - "1025026772": "Jump indices correspond to simulated markets with large, sudden price changes. They have constant volatilities ranging from 10% to 100%.", "1025032938": "Do I have to pay any fees to become a payment agent for Deriv?", "1026344937": "Please contact our Customer Support team via <0>live chat if you have doubts or concerns.", "1026845997": "Endpoint", @@ -1195,6 +1195,7 @@ "1149190992": "Trade selected derived and financial assets without overnight charges.", "1150115412": "1. Please log in to your account and go to the “Manage account settings”.", "1150953111": "Tight spreads", + "1151456638": "We value team players that collaborate freely across departments with humility and ambition.", "1153826782": "A sub-affiliate earns USD 200 from their Revenue Share plan. The same sub-affiliate earns USD 100 from their IB programme. Here is how we calculate their total commissions:", "1155361880": "Need help? Please <0>contact us via live chat.", "1155971726": "Click <0>here to close your account.", @@ -1223,10 +1224,8 @@ "1178409440": "The time period during which an asset or market is available for trading.", "1179997681": "When making a complaint, make sure to include your full name, account number, a clear description of the problem, important dates, and any proof or documents that support your complaint. The more specific and detailed your complaint, the better our team can help you.", "1181506313": "Deriv P2P is a great app, I love it!", - "1181734082": "accumulators trade type", "1182027402": "app store logo", "1182198798": "For example, if you close your position at a certain point, your equity is the total of your account balance plus the profit or loss at that point. If the ratio of this to your currently used margin is lower than Deriv’s stop out level, stop out may be applied.", - "1182470294": "Don't have a Deriv.com account yet?", "1183868384": "Is Deriv regulated?", "1184301560": "Explore Deriv’s partnership programme and get a chance to be a partner with a trusted pioneer. All our programmes are free of charge with no hidden fees.", "1185518626": "Enjoy trading a wide range of offerings that mimic characteristics of financial markets.", @@ -1235,6 +1234,7 @@ "1187487273": "Volatility 15 (1s) Index", "1189346909": "To withdraw from your Deriv account into your personal account, go to Cashier, click \"Withdrawal\", and follow the instructions on the screen. You’ll need to verify your withdrawal request and confirm your withdrawal amount.", "1189875009": "Proven track record", + "1190588251": "We treat all customers equitably, handle complaints with integrity, and offer competitive prices with no hidden costs and no artificial barriers on customer withdrawals.", "1191311301": "How do I set an investor password for my Deriv MT5 account?", "1191789799": "Password should be more than 8 characters including 1 uppercase and 1 number", "1192961783": "Licence and regulatory information | Deriv", @@ -1242,7 +1242,6 @@ "1195268336": "A chart illustrating the loss of a contract if the Reset Call exit price is below the entry price", "1196310280": "Intel", "1197939158": "Don't accept", - "1197965598": "Accumulators (or accumulator options) allow you to heighten your potential profit exponentially without risking more than your stake. Your potential profit will increase regardless of market movement, as long as the price moves within the trade barriers.", "1198529439": "Please enter a valid street", "1198781410": "We’ve designed a customer-centric and intuitive trading experience for Deriv that’s optimised to convert visitors into clients. We’ll also provide you with the tools and creative materials you need to drive traffic to Deriv.", "1199693297": "20 - 800", @@ -1326,7 +1325,6 @@ "1274309337": "DOG/USD", "1274713580": "Get your funds quickly and easily. We support a variety of withdrawal options.", "1275474387": "Quick", - "1275674402": "Go long and short", "1277672291": "Yes, you are allowed to enter multiple High/Low Ticks contracts at the same time.", "1277917401": "If you choose an Only Downs contract, you will win a potential payout if the price only decreases during the selected time period.", "1278262646": "168M+", @@ -1376,6 +1374,7 @@ "1319030942": "Signup failed", "1320418221": "Estimate the margin you need to hold your positions. The result depends on leverage, volume lot, and your Deriv MT5 account balance.", "1323941798": "Short", + "1324376913": "Our values are the fabric of our culture", "1325181938": "Street*", "1326142154": "high-low option trade", "1326235397": "These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.", @@ -1396,7 +1395,6 @@ "1339067509": "banner information", "1344216985": "We can’t deliver the email to this address (usually because of firewalls or filtering).", "1345965490": "- lower than the entry price for a Reset Call contract, or", - "1346204508": "Take profit", "1349080073": "Please enter only alphabetic characters", "1349233664": "Ask", "1351421019": "Where can I trade Asian options?", @@ -1448,7 +1446,6 @@ "1393006010": "The basics of CFD trading", "1393234525": "400,000", "1393602451": "Click <0>Yes to confirm the cancellation. Your funds will be returned to your Deriv account, and your account balance will be updated accordingly.", - "1394086167": "Open a demo account on Deriv and practise with an unlimited amount of virtual funds.", "1394564425": "Please enter the 8 character verification code that was sent to {{email}} to activate your account.", "1396179592": "Commission", "1396296688": "How do I identify a scam social media account?", @@ -1467,6 +1464,7 @@ "1403848854": "The Deriv MT5 Standard account offers new and experienced traders high leverage and variable spreads for maximum flexibility.", "1404594106": "Swap short (Daily points)", "1405194573": "Locate the live chat widget on our website or app at the bottom right corner of the screen.", + "1405237333": "Head of People Management", "1405929527": "Your IB commissions earned from Deriv X are credited directly into your Deriv account daily.", "1406209174": "Trade with a regulated industry pioneer trusted by traders for more than 20 years.", "1406360927": "Minor pairs", @@ -1538,7 +1536,6 @@ "1470207808": "Latvia", "1472787414": "Stocks and stock indices: the basics", "1473143391": "software testing department", - "1475851225": "On average, there is an equal probability of an up or down jump every 20 minutes, and the jump size is around 30 times the normal price movement.", "1476598931": "The lowest possible spread obtainable with the current trading conditions.", "1478263443": "Do note that the specific rules and limitations on the number of contracts you can enter simultaneously may vary depending on trade type. Some may have restrictions on the number of contracts you can open, while others may have other specific conditions that may allow for greater flexibility.", "1478423964": "Deriv's proprietary synthetics are free of market and liquidity risks. Enjoy 24/7 synthetic trading on Deriv MT5, DTrader, and our other platforms.", @@ -1605,7 +1602,6 @@ "1533284111": "What is a floating exchange rate?", "1533452395": "Earn based on each contract's payout probability or client's trade. <0>Learn more", "1535175777": "Make deposits and withdrawals through your local bank in real-time.", - "1536955851": "Options trading | Trading types | Deriv", "1537212469": "Spot price", "1539984821": "The Deriv support team is available via live chat 24/7 – even on weekends. You can also find answers at our <0>Help centre and get help from fellow traders in <1>Community.", "1540432357": "Client trades with a stake of USD 10 and a payout of USD 15. Payout probability = 10/15 x 100 = 66.67%", @@ -1676,7 +1672,6 @@ "1588439646": "Our profit and loss calculator for multipliers helps to determine the stop loss and take profit level in your trades to minimise losses and maximise gains.", "1588850507": "<0>USD Basket measures the value of the US dollar against a basket of five global currencies (EUR, GBP, JPY, CAD, AUD), each weighted by 20%.", "1589165958": "Try “Trade”", - "1589206610": "Open your trade", "1591242575": "How we use and protect the information you give us", "1591498220": "Do I need a Deriv account to use Deriv P2P?", "1591811733": "Deriv cTrader is not available in your country", @@ -1783,6 +1778,7 @@ "1673505406": "An impersonator’s main goal is to steal your sensitive information and funds.", "1673824550": "Minimum stake", "1674164323": "<0>With a x500 multiplier, if the market goes down 2%, you'll <1>lose only $100. An automatic stop out kicks in if your loss reaches your stake amount.", + "1674363165": "traders worldwide", "1674798397": "Trade multipliers on our mobile app.", "1676292946": "Forex trading gives you the chance to profit from changes in the relative values of currencies on the forex market.", "1677027187": "Forex", @@ -1795,7 +1791,6 @@ "1680490573": "Terms and ethical standards for all our affiliates, introducing brokers, API users, and payment agents", "1680831768": "To change your payment method, please contact us via livechat.", "1681876785": "Age-verify your account by submitting <0>proof of identity.", - "1682675914": "High leverage, low spreads", "1682843058": "Up/Down | Digital options contract | Deriv", "1682903370": "We have the following commission plan:", "1686378613": "DBot is a web-based strategy builder for trading digital options. It’s a platform where you can build your own trading bot using drag-and-drop 'blocks'.", @@ -1803,7 +1798,6 @@ "1688556728": "European indices", "1690730424": "Only Latin and Alphabet characters", "1691701175": "Stock & indices", - "1691844143": " Based on the number of ticks and the accumulator value, your potential profit may exceed your set amount multiple times.", "1692056155": "Unsubscribe | Emails | Deriv", "1692148560": "Measures the value of gold against a basket of five global currencies (EUR, GBP, JPY, AUD, USD), each weighted by 20%.", "1693556143": "This is to protect you from losing your money when using deal cancellation. With deal cancellation, you are allowed to reclaim your full stake amount (minus a small fee) if you cancel your contract within an hour of opening the position. Stop loss, on the other hand, will close your contract at a loss if the market moves against your position. However, once the deal cancellation expires, you can set a stop loss level on the open contract.", @@ -1813,7 +1807,6 @@ "1696396625": "google", "1698515050": "Create partner account", "1700291683": "It’s completely free of charge to join the IB programme.", - "1701577545": "The maximum duration for every contract is limited and differs according to the chosen accumulator value. When the maximum duration is reached, the contract will be automatically closed.", "1702295087": "Make easy deposits and withdrawals using Vietnam's famous banks.", "1702860224": "You can use debit and credit cards, e-wallets, cryptocurrency wallets, Deriv P2P, online banking, fiat onramp, and payment agents for deposits and withdrawals (see our <0>Payment methods page for a detailed list). Once you log in to your Deriv account, you’ll be able to see payment methods available in your country on the <1>Cashier page.", "1703673631": "No, you cannot change the tick duration for High/Low Ticks. This contract type is always based on the next 5 price ticks after the contract is open. This is fixed across all instruments that can be traded with this contract type.", @@ -1844,7 +1837,7 @@ "1733606989": "0.50", "1733660945": "Funds available as soon as confirmed", "1734026582": "This plan is available exclusively for affiliates who promote to clients residing in EU.", - "1736625026": "What are accumulators?", + "1734683614": "Chief Executive Officer", "1737371600": "Where can I trade vanilla options on Deriv?", "1739086943": "Wall Street 30", "1739322571": "XLE.US", @@ -1883,7 +1876,6 @@ "1767992960": "Sounds great. Let's get started.", "1768089459": "Paris | Our office – France | Deriv", "1769159485": "Yes, you can open multiple Reset Call/Reset Put contracts with different durations and different stake amounts or desired potential payouts at the same time.", - "1771323174": "rise fall", "1771364541": "5. You'll be taken to the Change password screen. Enter a new password and click Create.", "1771672206": "The <0>DEX 900UP has frequent small drops and occasional major spikes, which occur <0>every 900 seconds on average.", "1772047578": "Why are my Deriv MT5 login details different from my Deriv login details?", @@ -1896,7 +1888,6 @@ "1784343675": "Please <0>contact us via live chat immediately, and we'll help to disable 2FA on your account. When you have a new phone, please <1>re-enable 2FA.", "1784507274": "Affiliates residing in the EU may sign up for the Revenue share plan. However, only clients residing outside of the EU can be referred under this plan.", "1784680288": "You'll always be informed of the margin impact on your account before every trade.", - "1786089908": "Learn about options trading on Deriv. Earn payouts by correctly predicting price movements in forex, synthetic indices, and other popular financial markets.", "1786590725": "1 - 5 working days", "1786747559": "Our regulators require us to verify your account in accordance with anti-money laundering (AML) and Know Your Customer (KYC) laws. If we have prompted you to upload your documents to verify your account, it means that you'll only be able to continue using our services after your account is verified.", "1787584197": "Gave incorrect email ID", @@ -2045,7 +2036,6 @@ "1905702565": "Client money protection", "1906101554": "You’ll earn a payout based on the volume of your clients' trades. Find out more <0>here.", "1906507843": "Step 4 : Subscription plan (4 of 5)", - "1906568376": "There was an error fetching the live pricing data", "1907226338": "Coca-Cola", "1907562333": "You will receive a payout if the spot price remains below a predetermined barrier throughout the entire trade duration. If the spot price touches or breaches the barrier at any time before the contract expires, the initial stake (premium) is lost.", "1908121069": "Learn more about Deriv P2P", @@ -2185,13 +2175,11 @@ "2027881275": "CPA (EU only)", "2028060161": "These indices correspond to simulated markets where asset prices spike or drop due to news events. Small movements are quite frequent, with occasional major spikes or drops.", "2028163119": "EOS/USD", - "2028685334": "These indices are characterised by an average of one crash or boom in a series of 1000, 500, or 300 ticks.", "2029388799": "20–39.999%", "2032245485": "Digits | Digital options contract | Deriv", "2032401971": "Let’s say you want to calculate the stop loss amount when you want to open a position for Volatility 100 Index priced at 3376.24 USD with a stake amount of 10 USD, a multiplier value of x100, and a stop loss level of 3400 in Down direction.", "2032565787": "How to plan your trading activities without spending hours each day analysing the world market", "2032603277": "Payout per point indicates the potential payout you will receive at the contract’s expiry for every point above or below your predetermined barrier.", - "2032869486": "With each tick, your payout will increase based on the accumulator value you select, as long as the price change is within the barrier.", "2034083038": "signal-subscriber", "2035207280": "5 - 1,000", "2035670983": "Fewer distractions", @@ -2228,7 +2216,6 @@ "2062902293": "To open a Up/Down contract, you'll need to:", "2062903400": "Set a limit", "2063623452": "status", - "2064152905": "Maximize Potential Profit", "2064273783": "Cashier limits", "2064293002": "You can’t set a take profit level when you purchase a multipliers contract with deal cancellation. However, once the deal cancellation expires, you can set a take profit level on the open contract.", "2065278286": "Spread", @@ -2314,6 +2301,7 @@ "2139905716": "In addition to their simplicity to understand, the main reason traders choose to trade vanilla options is because they offer potentially high profit as they do not have a fixed payout, while losses are strictly limited to the initial stake amount.", "2142042461": "Trading CFDs increases both potential profit and loss", "2142117024": "Take profit amount in Up direction", + "2143477659": "We settle all contracts fairly, process all deposits and withdrawals promptly, and provide reliable support and a high-quality trading experience to all our customers.", "2143762194": "Create your Deriv account now and start trading!", "2144015434": "On Deriv, trading CFDs on leverage lets you pay only a small fraction of the contract’s value and amplify your potential profit, similarly increasing your potential loss.", "2144113378": "A chart illustrating a losing Rise trade type contract", @@ -3258,12 +3246,6 @@ "-1997639312": "<0>Ride the crypto waves. 24/7 trading on the price of popular cryptocurrencies.", "-989885046": "See all cryptocurrencies", "-2118030379": "<0>Mine for commodities. Trade the price of precious metals and oil.", - "-1722031734": "Check trading specs", - "-61718257": "Speculate on the price movements of popular exchange-traded funds (ETFs). Diversify your portfolio with assets that track bonds, commodities, and indices, without the high cost of owning the underlying assets.", - "-777850431": "View all >", - "-1384760133": "Bid price", - "-1882694284": "Ask price", - "-1293060532": "Daily % change", "-626244619": "Try any trade, on any platform with a zero-risk, demo trading account.", "-230284900": "3. Trade with confidence", "-1936142548": "Fund your account and start trading with round-the-clock support.", @@ -3283,6 +3265,7 @@ "-1615451408": "Our professional multilingual team is here for you anytime.", "-441234786": "We're 25 years strong", "-1863708031": "Exchange-traded funds (ETFs) allow you to diversify your portfolio with assets that track bonds, commodities, and indices, without the high cost of owning the underlying assets.", + "-1722031734": "Check trading specs", "-1542166394": "<0>AGG.US The iShares Core US Aggregate Bond ETF tracks an index of US investment-grade bonds.", "-1968382000": "<0>ARKK.US The ARK Innovation ETF invests in domestic and foreign equity securities of companies that rely on or benefit from developments in artificial intelligence, automation, DNA technologies, energy storage, fintech, and robotics.", "-603147794": "<0>DIA.US The SPDR Dow Jones Industrial Average ETF Trust tracks the Dow Jones Industrial Average index.", @@ -3400,13 +3383,6 @@ "-1356010780": "Implement policies to prevent vulnerable persons from trading", "-1186213423": "We will refuse underage persons’ access and implement processes to identify customers who are trading beyond their financial capacity.", "-220003669": "We will implement know-your-customer (KYC) controls and prevent money laundering and other unlawful activities on our platforms.", - "-1339404877": "Be reliable", - "-1849043145": "We provide secure and robust systems so you can trade with confidence. Whether settling contracts promptly, processing transactions efficiently, or offering responsive 24/7 customer support, we strive to be reliable at every step of your trading experience.", - "-1972583435": "Be fair", - "-781301270": "We champion equal treatment for everyone, which is why we're dedicated to providing transparent and unbiased services. We’re here to resolve your concerns with integrity and provide competitive prices with no hidden fees or access restrictions.", - "-955173076": "We provide clear, accessible information about our platforms and processes so we can build trust and strong client relationships. Through detailed product descriptions and open communication, we aim to make it easier for you to make informed trading decisions.", - "-2032112598": "Be responsible", - "-35673135": "We build our services and platforms on a foundation of trust, honesty, and ethical practices. By proactively implementing policies and controls to prevent unlawful activities, we ensure a fair and secure environment for our trading community.", "-2125275828": "Unique trade types. Hundreds of instruments. Financial and derived markets.", "-154889447": "Ready to join over 2.5 million traders who have chosen Deriv as their trusted broker? Enter your email address to create a free demo account.", "-323355149": "deriv careers", @@ -3988,7 +3964,10 @@ "-1095901299": "Stock market | Indices trading | Deriv", "-506783240": "Trade on asset prices derived from simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite.", "-917592239": "Synthetic indices | Volatility indices | Deriv", + "-1339404877": "Be reliable", + "-1972583435": "Be fair", "-1306637437": "We aim to be competitive on pricing for all our products and services.", + "-2032112598": "Be responsible", "-223886724": "Our principles", "-586716383": "Our principles | Deriv", "-141169956": "Deriv P2P – peer-to-peer deposit and withdrawal service", @@ -4383,34 +4362,6 @@ "-924881302": "This is where you’ll find information about our legal policies and how they apply to you. The documents linked below collectively form our standard terms of use (the “Terms”). It’s important that you make yourself aware of these Terms and agree to them before using any of our websites, products, or services.", "-1532421724": "FOR BUSINESS PARTNERS", "-488793705": "Terms and conditions | Legal policies | Deriv", - "-739489985": "Crash/Boom indices mimic markets with sudden price movements, either a sharp drop (crash) or a spike (boom) in prices.", - "-2038780348": "higher lower", - "-920892393": "Volatility indices correspond to markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.", - "-997554537": "How accumulators contracts work", - "-1143096984": "You can set a take profit or payout level. Your position will automatically close when your profit exceeds or reaches this amount.", - "-2002768605": "The maximum payout for every contract is limited and differs per asset. When the maximum payout is reached, the contract will be automatically closed.", - "-972221740": "How to buy your first accumulators contract on Deriv Trader", - "-995291168": "Define your position", - "-1713583554": "Choose an asset from the list of markets.", - "-1637411871": "accumulators market", - "-216727857": "Choose accumulators from the list of trade types", - "-1410249058": "3. Growth percentage", - "-1940159778": "Select the growth rate of your choice. Your potential profit will grow by this percentage at every tick throughout your contract duration.", - "-262631598": "accumulators duration", - "-1784561307": "4. Stake", - "-1432641230": "accumulators stake", - "-1797452525": "5. Take profit", - "-950576869": "6. Trade", - "-70734399": "Markets available for options trading", - "-665093371": "Take part in the world’s largest financial market. Trade digital options and Call/Put Spreads on major, minor, and smart forex pairs.", - "-197524598": "Trade digital options, lookbacks, and Call/Put Spreads 24/7 on our synthetics that are free from real-world disruptions.", - "-236676606": "Trade digital options on stocks & indices and profit from the price movements in our competitively priced asset baskets.", - "-1192024363": "Speculate on the price movements of the world's major commodities – silver, gold, oil, and energy.", - "-239170576": "Learn about options trading on Deriv. Earn payouts by correctly predicting price movements without needing to buy the underlying assets.", - "-135132536": "Open a real account, make a deposit, and start trading accumulators for real.", - "-963994159": "Options trading | Trade digital options on Deriv", - "-1640776435": "Options trading | Trade types | Deriv", - "-1302287224": "Explore what are options on Deriv. Learn how to start trading options with forex, synthetics, stocks & indices, and baskets.", "-1573631881": "forex", "-79919115": "Access over 50 currency pairs and trade with leverage up to 1:1000 to increase your market exposure.", "-52578265": "Access over 30 currency pairs and trade with leverage up to 1:30 to increase your market exposure.", @@ -4456,17 +4407,8 @@ "-172868994": "Swap-free MT5 account", "-501519580": "Leave your trades open overnight with no additional charges.", "-2146727212": "Swap free", - "-544150655": "Markets available for margin trading", - "-867909844": "Access over 30 assets and also trade with up to 1:30 leverage and zero commission on trades.", - "-309438223": "Trade synthetic indices on margin 24/7 without being affected by natural events and liquidity risks.", - "-192849229": "Speculate on the price movements of silver, gold, oil, and more and use margin to amplify your possible profits.", - "-309512492": "Why trade on margin with Deriv", - "-1967811351": "Take advantage of high leverage and low spreads on Deriv MT5.", - "-947407631": "Synthetic Indices", - "-163876262": "All favourite markets available", - "-687600215": "Trade on all popular markets plus our proprietary synthetic indices that are available 24/7.", - "-1815149921": "Friendly Support", "-1970235035": "Define your target", + "-995291168": "Define your position", "-1496517473": "Select the market you want to trade and set other essential parameters including trade type, stake amount, and multiplier value.", "-574297320": "Set parameters", "-136787663": "Set optional parameters", @@ -4479,6 +4421,7 @@ "-316417045": "4. Multiplier value", "-969520824": "Your profit or loss is multiplied by the multiplier value, which depending on the asset you trade, can be from 1 to 30. Your loss will never be more than your stake.", "-951435001": "Enter the multiplier value of your choice. Your profit or loss will be multiplied by this amount.", + "-1797452525": "5. Take profit", "-1261042587": "This feature allows you to set the amount of loss you are willing to take in case the market moves against your position. Once the amount is reached, your contract will be closed automatically.", "-1557162974": "Set stop loss", "-120955727": "7. Deal cancellation", @@ -4504,7 +4447,6 @@ "-1244549672": "<0>With a x500 multiplier, if the market goes up by 2%, you'll gain 2% * $100 * 500 = <1>$1,000 profit.", "-1303172083": "Why trade multipliers on Deriv", "-756921141": "Multipliers trading | Trade multipliers on Deriv", - "-345016047": "Open a demo account and get unlimited virtual funds to practice on our platforms – DTrader, SmartTrader, and DBot.", "-659039661": "Accumulator options | Trade options | Deriv", "-615241025": "Open a digital options contract with a Lookbacks trade type on Deriv’s trading platforms and earn payouts with accurate market predictions.", "-1225084394": "Open a digital options contract with an Only ups/Only downs trade type on Deriv’s trading platforms and earn payouts with accurate market predictions.", @@ -4684,5 +4626,31 @@ "-594286125": "Practise trading with Deriv as long as you like. No risk, no hidden fees.", "-1773685845": "All markets and platforms", "-661813412": "Enjoy full access to all our markets and platforms.", - "-1520902282": "No credit card needed" + "-1520902282": "No credit card needed", + "-2022759357": "Make trading accessible to anyone, anywhere", + "-77779780": "From inception, our goal was to break free of the high commissions and clunky products offered by traditional brokers. Also, we aim to deliver a first-class experience to digitally inclined traders, regardless of the size of their accounts.", + "-1321496264": "In a journey spanning 25 years, we have grown to over 2.5 million customers worldwide. But our mission has remained the same:", + "-554746075": "Integrity", + "-1917169640": "We serve our customers with fairness and transparency. We settle all contracts by the book and speak plainly and truthfully.", + "-1679427554": "Customer focus", + "-411750591": "We put the customer first and strive to build products that deliver the best customer experience.", + "-611750993": "Competence", + "-1566641642": "We value colleagues with the ability to use good judgement and an aptitude to learn and grow.", + "-1111451256": "Teamwork", + "-418008452": "Our principles are the framework for our decisions", + "-3618456": "Learn more about our principles", + "-1855417261": "Our leadership", + "-1277783292": "Chief Operating Officer", + "-1369524546": "Chief Information Officer", + "-2049472334": "Chief Risk & Compliance Officer", + "-216767904": "Chief Administrative Officer", + "-197772643": "Head of Marketing & Global Partnerships", + "-290006480": "Vice President of Product", + "-871474425": "Vice President of IT Operations", + "-864130274": "Head of Accounts", + "-275117592": "withdrawals last month", + "-608807773": "trades last month", + "-1165835520": "employees", + "-651384976": "nationalities", + "-1033881248": "See our open positions" } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 23860e6a583..1771ac1a211 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@testing-library/user-event": "^14.5.1", "@types/jest": "^29.5.10", "@types/js-cookie": "^3.0.6", + "@types/loadable__component": "^5.13.9", "@types/lodash.isequal": "^4.5.8", "@types/node": "^20.10.0", "@types/react": "^18.2.38", @@ -17167,6 +17168,15 @@ "@types/node": "*" } }, + "node_modules/@types/loadable__component": { + "version": "5.13.9", + "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.13.9.tgz", + "integrity": "sha512-QWOtIkwZqHNdQj3nixQ8oyihQiTMKZLk/DNuvNxMSbTfxf47w+kqcbnxlUeBgAxdOtW0Dh48dTAIp83iJKtnrQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/lodash": { "version": "4.14.202", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", diff --git a/package.json b/package.json index 5c797118ad3..086f6777716 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@testing-library/user-event": "^14.5.1", "@types/jest": "^29.5.10", "@types/js-cookie": "^3.0.6", + "@types/loadable__component": "^5.13.9", "@types/lodash.isequal": "^4.5.8", "@types/node": "^20.10.0", "@types/react": "^18.2.38", diff --git a/themes/gatsby-theme-deriv/src/components/custom/_banner-alert.tsx b/themes/gatsby-theme-deriv/src/components/custom/_banner-alert.tsx index 87e389a3409..1cfbd821cc0 100644 --- a/themes/gatsby-theme-deriv/src/components/custom/_banner-alert.tsx +++ b/themes/gatsby-theme-deriv/src/components/custom/_banner-alert.tsx @@ -12,6 +12,7 @@ import { useUserBrowser } from 'components/hooks/use-user-browser' import { useIsRtl } from 'components/hooks/use-isrtl' import useRegion from 'components/hooks/use-region' import useBreakpoints from 'components/hooks/use-breakpoints' +import useBuildVariant from 'features/hooks/use-build-variant' type TProps = { bannerType: string @@ -134,12 +135,13 @@ const OverlayContainer = styled.div<{ is_rtl: boolean }>` ` const BannerAlert = ({ bannerType }: TProps) => { + const {region} = useBuildVariant() const cookie = useCookieBanner() const cookie_browser_update = new CookieStorage(cookie_key) const [is_visible, setIsVisible] = useState(false) const { is_outdated } = useUserBrowser(browsers_minimum_required_version) const is_rtl = useIsRtl() - const { is_eu, is_cpa_plan } = useRegion() + const { is_cpa_plan } = useRegion() const { is_mobile } = useBreakpoints() //cookie banner @@ -219,7 +221,7 @@ const BannerAlert = ({ bannerType }: TProps) => { {/* //tablet && cfd conditions we need to add broweser banner in top of CFD banner */} - {(is_eu || is_cpa_plan) && is_mobile ? ( + {(region === "eu" || is_cpa_plan) && is_mobile ? ( { + const { region } = useBuildVariant() const handleSignup = useHandleSignup() - const { is_eu, is_row } = useRegion() const is_rtl = useIsRtl() const [is_logged_in] = useAuthCheck() @@ -142,14 +142,14 @@ const DBanner = ({ title, data, background_pattern, image_alt }: DBannerProps) = - {is_row && ( + {region === "row" && ( )} - {is_eu && ( + {region === "eu" && ( { const { is_mobile } = useBreakpoints() const handleSignup = useHandleSignup() const [is_logged_in] = useAuthCheck() - const { is_eu } = useRegion() + const { region } = useBuildVariant() const is_rtl = useIsRtl() return ( @@ -174,7 +174,7 @@ const DCommonBanner = () => { > - {is_eu ? ( + {region === "eu" ? ( { 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) => { - {is_eu ? ( + {region === "eu" ? ( { const [is_checked, setChecked] = useState(false) - const { is_eu } = useRegion() + const { region } = useBuildVariant() const handleChange = (event) => { setChecked(event.currentTarget.checked) @@ -209,7 +209,7 @@ const SignupNew = ({ components={[ { + const { region } = useBuildVariant() const excludetoLowerCase = exclude.toLowerCase() - const { is_row, is_eu } = useRegion() - const [header_text, setHeaderText] = useState('_t_Check out our other platforms_t_') - const [show_row_content, setShowRowContent] = useState(true) - - useEffect(() => { - if (is_eu) setHeaderText('_t_Check out our other platform_t_') - if (!is_row) setShowRowContent(false) - }, [is_eu, is_row]) + const header_text = region === "row" ? '_t_Check out our other platforms_t_' : '_t_Check out our other platform_t_' return ( @@ -303,16 +297,16 @@ export const OtherPlatform = ({ )} {excludetoLowerCase !== 'dtrader' && } - {show_row_content && <>{excludetoLowerCase !== 'dbot' && }} + {region === "row" && <>{excludetoLowerCase !== 'dbot' && }} {excludetoLowerCase !== 'dmt5' && } - {show_row_content && <>{excludetoLowerCase !== 'derivx' && }} + {region === "row" && <>{excludetoLowerCase !== 'derivx' && }} ) } export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }: NavPlatformProps) => { - const { is_row, is_eu } = useRegion() + const { region } = useBuildVariant() const getDtraderText = () => ( - {is_row && ( + {region === "row" && ( ( @@ -409,7 +403,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }: NavPlatformPro onClick={onClick} to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'} /> - {is_row && ( + {region === "row" && ( <> )} - {is_eu && <>{getDtraderText()}} + {region === "eu" && <>{getDtraderText()}} - {is_row && ( + {region === "row" && ( <> @@ -513,7 +507,8 @@ const derived_text_row: TString = '_t_Enjoy trading asset prices derived from real-world or simulated markets._t_' export const NavMarket = ({ onClick }: NavMarketProps) => { - const { is_eu } = useRegion() + const {region} = useBuildVariant() + return ( { height="32" /> )} - content={is_eu ? derived_text_eu : derived_text_row} + content={region === "eu" ? derived_text_eu : derived_text_row} title="_t_Derived_t_" onClick={onClick} to="/markets/synthetic/" diff --git a/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu-career.tsx b/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu-career.tsx index 46d55c04550..a3849c3d822 100644 --- a/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu-career.tsx +++ b/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu-career.tsx @@ -4,7 +4,7 @@ import React, { useRef, useEffect } from 'react' import styled from 'styled-components' import { Header } from './typography' import { LocalizedLinkText } from 'components/elements' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const OffCanvasMenuCareer = styled.section` position: fixed; @@ -41,7 +41,7 @@ type OffCanvasMenuWrapperCareerProps = { } export const OffCanvasMenuWrapperCareer = (props: OffCanvasMenuWrapperCareerProps) => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const canvas = useRef() const handleArrowClick = () => { @@ -65,7 +65,7 @@ export const OffCanvasMenuWrapperCareer = (props: OffCanvasMenuWrapperCareerProp diff --git a/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu.tsx b/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu.tsx index d128cc11914..faf2ae6824c 100644 --- a/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu.tsx +++ b/themes/gatsby-theme-deriv/src/components/elements/off-canvas-menu.tsx @@ -52,7 +52,7 @@ import Story from 'images/svg/menu/story.svg' import Terms from 'images/svg/menu/terms.svg' import Trade from 'images/svg/custom/trader-tool-nav.svg' import Signals from 'images/svg/menu/signals.svg' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' type OffCanvasMenuWrapperProps = { closeOffCanvasMenu?: () => void @@ -156,7 +156,7 @@ const derived_text_row: TString = '_t_Enjoy trading asset prices derived from real-world
or simulated markets._t_' export const OffCanvasMenuWrapper = (props: OffCanvasMenuWrapperProps) => { - const { is_row } = useRegion() + const { region } = useBuildVariant() const canvas = useRef() const handleArrowClick = () => { @@ -198,7 +198,7 @@ export const OffCanvasMenuWrapper = (props: OffCanvasMenuWrapperProps) => { to="/trade-types/cfds/" /> - {is_row && ( + {region === "row" && ( { to={props.is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'} /> - {is_row && ( + {region === "row" && ( <> { to="/dtrader/" /> - {is_row && ( + {region === "row" && ( <> { height="32" /> )} - content={is_row ? derived_text_row : derived_text_eu} + content={region === "row" ? derived_text_row : derived_text_eu} title="_t_Derived_t_" onClick={handleArrowClick} to="/markets/synthetic/" @@ -767,7 +767,7 @@ export const OffCanvasMenuWrapper = (props: OffCanvasMenuWrapperProps) => { - {is_row && ( + {region === "row" && (
{ const canvas = useRef() - const { is_row } = useRegion() + const { region } = useBuildVariant() const is_rtl = useIsRtl() const handleArrowClick = () => { @@ -865,7 +865,7 @@ export const OffCanvasMenuPartner = (props: OffCanvasMenuPartnerProps) => { - {is_row && ( + {region === "row" && (
{ - const [data, setData] = useState(null) - const [error, setError] = useState(null) - const { is_eu } = useRegion() - - useEffect(() => { - const app = initializeApp(firebaseConfig) - const db = getDatabase(app) - - const commoditiesRef = ref(db, is_eu ? 'eu/mkt' : 'row/mkt') - const unsubscribe = onValue( - commoditiesRef, - (snapshot) => { - setData(snapshot.val()) - }, - (err) => { - setError(err) - }, - ) - - return unsubscribe - }, [is_eu]) - - return [error, data] -} - -export default usePricingFeed diff --git a/themes/gatsby-theme-deriv/src/components/hooks/use-social-media-url.tsx b/themes/gatsby-theme-deriv/src/components/hooks/use-social-media-url.tsx index f2f86954716..27e21e7cf60 100644 --- a/themes/gatsby-theme-deriv/src/components/hooks/use-social-media-url.tsx +++ b/themes/gatsby-theme-deriv/src/components/hooks/use-social-media-url.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { getLanguage, getLocationPathname } from 'common/utility' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const social_media_urls = { twitter: { @@ -44,13 +44,13 @@ type TSocialMediaUrl = { } export const useSocialMediaUrl = (): TSocialMediaUrl => { + const { region } = useBuildVariant() const [social_media, setSocialMedia] = useState({ fb_url: '', instagram_url: '', twitter_url: '', linkedin_url: '', }) - const { is_eu } = useRegion() const language = getLanguage() const current_path = getLocationPathname() const is_career_page = current_path === '/careers/' @@ -59,7 +59,7 @@ export const useSocialMediaUrl = (): TSocialMediaUrl => { const special_language_url = special_language_urls[language]?.[type] const current_url = is_career_page ? social_media_urls[type]?.url_career - : (is_eu && social_media_urls[type].eu_url) || social_media_urls[type].non_eu_url + : (region === "eu" && social_media_urls[type].eu_url) || social_media_urls[type].non_eu_url return { [type]: special_language_url || current_url } }) diff --git a/themes/gatsby-theme-deriv/src/components/hooks/use-third-party-flags.tsx b/themes/gatsby-theme-deriv/src/components/hooks/use-third-party-flags.tsx index bc2e84f6713..557e58cfdc4 100644 --- a/themes/gatsby-theme-deriv/src/components/hooks/use-third-party-flags.tsx +++ b/themes/gatsby-theme-deriv/src/components/hooks/use-third-party-flags.tsx @@ -1,11 +1,10 @@ import { useState, useEffect } from 'react' import { initializeApp } from 'firebase/app' import { getDatabase, ref, onValue } from 'firebase/database' -// import useRegion from 'components/hooks/use-region' import featuresConfig from '../../../static/appConfig' const thirdPartyFlagsConfig = { - databaseURL: 'https://app-config-staging.firebaseio.com', + databaseURL: 'https://app-config-prod.firebaseio.com', } const useThirdPartyFlags = (featurePath) => { diff --git a/themes/gatsby-theme-deriv/src/components/layout/layout.tsx b/themes/gatsby-theme-deriv/src/components/layout/layout.tsx index f0912f14196..ae7d321857b 100644 --- a/themes/gatsby-theme-deriv/src/components/layout/layout.tsx +++ b/themes/gatsby-theme-deriv/src/components/layout/layout.tsx @@ -142,14 +142,14 @@ const Layout = ({ ) } return ( - - - - + + + + {Navs[type]} {show_footer && } - - - - + + + + ) } diff --git a/themes/gatsby-theme-deriv/src/components/localization/localized-link.tsx b/themes/gatsby-theme-deriv/src/components/localization/localized-link.tsx index cdc8e30e5e8..3ca8eb06163 100644 --- a/themes/gatsby-theme-deriv/src/components/localization/localized-link.tsx +++ b/themes/gatsby-theme-deriv/src/components/localization/localized-link.tsx @@ -14,7 +14,7 @@ import { replaceLocale, } from 'common/utility' import { usePageLoaded } from 'components/hooks/use-page-loaded' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' type InternalLinkProps = { aria_label?: string @@ -231,12 +231,12 @@ const ExternalLink = ({ type, ...props }: ExternalLinkProps) => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const { setModalPayload, toggleModal } = useContext(LocationContext) const { affiliate_lang } = language_config[locale] const url = replaceLocale(getURLFormat(type, locale, to, affiliate_lang)) const show_modal = - is_eu && + region === "eu" && !is_mail_link && !affiliate_links.includes(type) && !deriv_app_links.includes(type) && diff --git a/themes/gatsby-theme-deriv/src/features/components/atoms/link/external.tsx b/themes/gatsby-theme-deriv/src/features/components/atoms/link/external.tsx index 6722b85e9e7..fcbf55a044c 100644 --- a/themes/gatsby-theme-deriv/src/features/components/atoms/link/external.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/atoms/link/external.tsx @@ -4,7 +4,6 @@ import language_config from '../../../../../i18n-config.js' import { TypographyLinkProps } from '../typography/link' import Typography from '../typography' import Alert from '../alert' -import useRegion from 'components/hooks/use-region' import { ExternalLinkType, ExternalURLNames } from 'features/types' import { localized_link_url } from 'common/constants' import { @@ -13,6 +12,7 @@ import { getThaiExcludedLocale, TradersHubURL, } from 'common/utility' +import useBuildVariant from 'features/hooks/use-build-variant' export type ProductLinkGenerator = (config: { language: string @@ -65,15 +65,14 @@ export interface ExternalLinkProps extends TypographyLinkProps { const ExternalLink = ({ url, onClick, link_target, link_rel, ...rest }: ExternalLinkProps) => { const [is_redirect_modal_visible, setIsRedirectModalVisible] = useState(false) - - const { is_eu } = useRegion() + const { region } = useBuildVariant() const { i18n } = useTranslation() const { language } = i18n const locale = i18n.language ?? 'en' const { affiliate_lang } = language_config[locale] - const show_modal = is_eu && url?.type === 'non-company' && url?.show_eu_modal + const show_modal = region === "eu" && url?.type === 'non-company' && url?.show_eu_modal const href = useMemo(() => { if (url.type === 'company') { diff --git a/themes/gatsby-theme-deriv/src/features/components/molecules/layout-overlay/cfd-warning-banner/index.tsx b/themes/gatsby-theme-deriv/src/features/components/molecules/layout-overlay/cfd-warning-banner/index.tsx index cf86d6d3aea..058fdad949f 100644 --- a/themes/gatsby-theme-deriv/src/features/components/molecules/layout-overlay/cfd-warning-banner/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/molecules/layout-overlay/cfd-warning-banner/index.tsx @@ -4,10 +4,12 @@ import MobileText from './mobile-text' import DesktopText from './desktop-text' import useRegion from 'components/hooks/use-region' import usePpc from 'features/hooks/use-ppc' +import useBuildVariant from 'features/hooks/use-build-variant' const CfdWarningBanner = () => { + const { region } = useBuildVariant() const { is_ppc } = usePpc() - const { is_eu, is_cpa_plan } = useRegion() + const { is_cpa_plan } = useRegion() const data = useStaticQuery(graphql` query { strapiCfdWarningBanner { @@ -16,7 +18,7 @@ const CfdWarningBanner = () => { } `) const loss_percent = data?.strapiCfdWarningBanner?.loss_percent - if (is_ppc || is_eu || is_cpa_plan) { + if (is_ppc || region === "eu" || is_cpa_plan) { return ( <> diff --git a/themes/gatsby-theme-deriv/src/features/components/molecules/protected-route/index.tsx b/themes/gatsby-theme-deriv/src/features/components/molecules/protected-route/index.tsx index 9b498d19d59..473d34dc2ff 100644 --- a/themes/gatsby-theme-deriv/src/features/components/molecules/protected-route/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/molecules/protected-route/index.tsx @@ -1,27 +1,22 @@ import React from 'react' -import Layout from 'features/components/templates/layout' import PageNotFound from 'features/pages/404' -import InitialLoader from 'components/elements/dot-loader' +import { BuildVariantContextType } from 'features/contexts/build-variant/build-variant.context' interface ProtectedRouteProps { - is_page_visible: boolean + region: BuildVariantContextType["region"] component: React.ReactNode - is_loading: boolean + is_page_visible: boolean } const ProtectedRoute = ({ is_page_visible, component, - is_loading = false, + region }: ProtectedRouteProps) => { - return is_loading ? ( - - - - ) : is_page_visible ? ( + return is_page_visible ? ( <>{component} ) : ( - + ) } diff --git a/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-card-items/index.tsx b/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-card-items/index.tsx index 501385e4aa7..67c234c946b 100644 --- a/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-card-items/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-card-items/index.tsx @@ -1,31 +1,31 @@ import React, { useMemo } from 'react' import NavigationCard from '../../../molecules/nav-card' -import useRegion from 'components/hooks/use-region' import useVisibleContent from 'components/hooks/use-visible-content' import usePpc from 'features/hooks/use-ppc' import { NavConfig, SmartNavContent } from 'features/components/templates/navigation/types' import { useNavContext } from 'features/components/templates/navigation/template/nav-context' import useBreakpoints from 'components/hooks/use-breakpoints' +import useBuildVariant from 'features/hooks/use-build-variant' interface NavCardItemsProps { items: SmartNavContent[] } const NavCardItems = ({ items }: NavCardItemsProps) => { + const { region } = useBuildVariant() const { is_ppc, is_ppc_redirect } = usePpc() - const { is_row, is_eu } = useRegion() const { onCloseMenu } = useNavContext() const { is_mobile_or_tablet } = useBreakpoints() const filter_config: NavConfig = useMemo(() => { return { - is_eu, + is_eu: region === "eu", is_ppc, is_ppc_redirect, - is_row, + is_row: region === "row", is_mobile: is_mobile_or_tablet, } - }, [is_eu, is_ppc, is_ppc_redirect, is_row, is_mobile_or_tablet]) + }, [region, is_ppc, is_ppc_redirect, is_mobile_or_tablet]) const content = useVisibleContent({ config: filter_config, content: items }) diff --git a/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/index.tsx b/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/index.tsx index c5e1586877c..1a1edf9f4cf 100644 --- a/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/index.tsx @@ -1,26 +1,26 @@ import React, { useMemo } from 'react' import NavSectionColumn from './section-column' -import useRegion from 'components/hooks/use-region' import useVisibleContent from 'components/hooks/use-visible-content' import usePpc from 'features/hooks/use-ppc' import { NavConfig, SmartNavSectionColumns } from 'features/components/templates/navigation/types' import Flex from 'features/components/atoms/flex-box' import useBreakpoints from 'components/hooks/use-breakpoints' +import useBuildVariant from 'features/hooks/use-build-variant' const NavSectionContainer = ({ items }: { items: SmartNavSectionColumns[] }) => { + const { region } = useBuildVariant() const { is_ppc, is_ppc_redirect } = usePpc() - const { is_row, is_eu } = useRegion() const { is_mobile_or_tablet } = useBreakpoints() const filter_config: NavConfig = useMemo(() => { return { - is_eu, + is_eu: region === "eu", is_ppc, is_ppc_redirect, - is_row, + is_row: region === "row", is_mobile: is_mobile_or_tablet, } - }, [is_eu, is_ppc, is_ppc_redirect, is_row, is_mobile_or_tablet]) + }, [region, is_ppc, is_ppc_redirect, is_mobile_or_tablet]) const data = useVisibleContent({ config: filter_config, content: items }) diff --git a/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/section-column.tsx b/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/section-column.tsx index f725cd27c3f..ee6e6411367 100644 --- a/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/section-column.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/organisms/navigation/nav-sections-container/section-column.tsx @@ -6,26 +6,26 @@ import Typography from 'features/components/atoms/typography' import { NavConfig, SmartNavSectionColumns } from 'features/components/templates/navigation/types' import { Localize } from 'components/localization' import usePpc from 'features/hooks/use-ppc' -import useRegion from 'components/hooks/use-region' import useVisibleContent from 'components/hooks/use-visible-content' import dclsx from 'features/utils/dclsx' +import useBuildVariant from 'features/hooks/use-build-variant' interface NavSectionColumnProps { item: SmartNavSectionColumns } const NavSectionColumn = ({ item }: NavSectionColumnProps) => { + const { region } = useBuildVariant() const { is_ppc, is_ppc_redirect } = usePpc() - const { is_row, is_eu } = useRegion() const filter_config: NavConfig = useMemo(() => { return { - is_eu, + is_eu: region === "eu", is_ppc, is_ppc_redirect, - is_row, + is_row: region === "row", } - }, [is_eu, is_ppc, is_ppc_redirect, is_row]) + }, [region, is_ppc, is_ppc_redirect]) const content = useVisibleContent({ config: filter_config, content: item.data.section }) diff --git a/themes/gatsby-theme-deriv/src/features/components/quill/layout-overlay/cfd-warning-banner/index.tsx b/themes/gatsby-theme-deriv/src/features/components/quill/layout-overlay/cfd-warning-banner/index.tsx index 2e6233b7cb9..3d0e5d874c0 100644 --- a/themes/gatsby-theme-deriv/src/features/components/quill/layout-overlay/cfd-warning-banner/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/quill/layout-overlay/cfd-warning-banner/index.tsx @@ -4,10 +4,12 @@ import MobileText from './mobile-text' import DesktopText from './desktop-text' import useRegion from 'components/hooks/use-region' import usePpc from 'features/hooks/use-ppc' +import useBuildVariant from 'features/hooks/use-build-variant' const CfdWarningBanner = () => { + const { region } = useBuildVariant() const { is_ppc } = usePpc() - const { is_eu, is_cpa_plan } = useRegion() + const { is_cpa_plan } = useRegion() const data = useStaticQuery(graphql` query { @@ -18,7 +20,7 @@ const CfdWarningBanner = () => { `) const loss_percent = data?.strapiCfdWarningBanner?.loss_percent - if (is_ppc || is_eu || is_cpa_plan) { + if (is_ppc || region === "eu" || is_cpa_plan) { return ( <> diff --git a/themes/gatsby-theme-deriv/src/features/components/quill/quill-layout/index.tsx b/themes/gatsby-theme-deriv/src/features/components/quill/quill-layout/index.tsx index 3cf75ecc268..a02e348f517 100644 --- a/themes/gatsby-theme-deriv/src/features/components/quill/quill-layout/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/quill/quill-layout/index.tsx @@ -65,29 +65,29 @@ const QuillLayout = ({ } return ( - - - - - - - + + + + + + +
{children}
{!hide_layout_overlay && } - - - - - - - + + + + + + + ) } diff --git a/themes/gatsby-theme-deriv/src/features/components/quill/shared-link/external.tsx b/themes/gatsby-theme-deriv/src/features/components/quill/shared-link/external.tsx index fb2a7cb1b0d..721f163f0af 100644 --- a/themes/gatsby-theme-deriv/src/features/components/quill/shared-link/external.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/quill/shared-link/external.tsx @@ -1,15 +1,15 @@ import React, { ComponentProps, useState } from 'react' import Alert from '../alert' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' export type ExternalLinkProps = ComponentProps<'a'> & { show_eu_modal?: boolean } const ExternalLink = ({ href, onClick, target, show_eu_modal, ...rest }: ExternalLinkProps) => { + const { region } = useBuildVariant() const [is_redirect_modal_visible, setIsRedirectModalVisible] = useState(false) - const { is_eu } = useRegion() - const show_modal = is_eu && show_eu_modal + const show_modal = region === "eu" && show_eu_modal const handleCancel = () => { setIsRedirectModalVisible(false) diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/banners/blade-shape-banner/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/banners/blade-shape-banner/index.tsx index d3d6d93e4ad..1566b0a7122 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/banners/blade-shape-banner/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/banners/blade-shape-banner/index.tsx @@ -3,7 +3,6 @@ import * as styles from './blade-shape-banner.module.scss' import { BannerType } from './types' import Container from 'features/components/atoms/container' import Flex from 'features/components/atoms/flex-box' -import FlexBox from 'features/components/atoms/flex-box' import Image from 'features/components/atoms/image' import Typography from 'features/components/atoms/typography' import Link from 'features/components/atoms/link' @@ -31,20 +30,20 @@ const BladeShapeBanner = ({ data }: { data: BannerType }) => { md={{ direction: 'row', align: 'center' }} > - - + _t_banner information_t_ - - + { {data?.extra_info && ( - { components={[]} /> - + )} - - + + { md={{ basis: '5-12', align: 'end' }} >
- { width={64} height={64} /> - + @@ -118,8 +117,8 @@ const BladeShapeBanner = ({ data }: { data: BannerType }) => { } /> - - + + {data.os_apps .filter((item) => is_appgallery_supported || item.id !== 2) diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/digital-options-layout/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/digital-options-layout/index.tsx index 3d8e83dcf91..6bba5d68f69 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/digital-options-layout/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/digital-options-layout/index.tsx @@ -3,10 +3,14 @@ import OptionsLayout from '../options-layout' import { AvailableDigitalOptionsData } from './data' import Flex from 'features/components/atoms/flex-box' import AvailableOptions from 'features/components/organisms/available-options' +import { BuildVariantType } from 'features/types' -const DigitalOptionsLayout = ({ children }: React.PropsWithChildren) => { +type DigitalOptionsLayoutProps = React.PropsWithChildren & BuildVariantType + +const DigitalOptionsLayout = ({ children, region }: DigitalOptionsLayoutProps) => { return ( diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/footer/deriv-go-banner.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/footer/deriv-go-banner.tsx index 55d9ba0ab40..e5887ec52ce 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/footer/deriv-go-banner.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/footer/deriv-go-banner.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { CaptionText, Heading, Text } from '@deriv/quill-design' // eslint-disable-next-line import/no-unresolved import { DerivProductDerivGoBrandLightLogoHorizontalIcon } from '@deriv/quill-icons/Logo' @@ -7,27 +7,22 @@ import DownloadBadges from './download' import { footer_qr_box } from './styles.module.scss' import derivGoQR from 'images/common/migration/footer/deriv-go-qr.svg' import { Localize, localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' import useThirdPartyFlags from 'components/hooks/use-third-party-flags' +import useBuildVariant from 'features/hooks/use-build-variant' export const DerivGoBanner = () => { - const { is_row } = useRegion() + const { region } = useBuildVariant() const deriv_go_apps_app_gallery = useThirdPartyFlags('deriv_go_apps.app_gallery') const deriv_go_apps_android = useThirdPartyFlags('deriv_go_apps.android') const deriv_go_apps_app_store = useThirdPartyFlags('deriv_go_apps.app_store') const showQR = deriv_go_apps_app_gallery && deriv_go_apps_android && deriv_go_apps_app_store - const [show_content, setShowContent] = useState(true) - - useEffect(() => { - if (!is_row) setShowContent(false) - }, [is_row]) const deriv_go = 'Deriv GO' return (
- {show_content && ( + {region === "row" && (
diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/footer/description.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/footer/description.tsx index 6cbfe531e1a..870b490227b 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/footer/description.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/footer/description.tsx @@ -4,6 +4,7 @@ import clsx from 'clsx' import { Localize } from 'components/localization' import useRegion from 'components/hooks/use-region' import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider' +import useBuildVariant from 'features/hooks/use-build-variant' const sharedClasses = 'inline font-bold underline hover:text-typography-prominent' @@ -161,14 +162,15 @@ export const DescriptionContentCPA = () => { } export const DescriptionContent = () => { - const { is_eu, is_cpa_plan } = useRegion() + const { region } = useBuildVariant() + const { is_cpa_plan } = useRegion() const { exitRef } = useFloatingCtaContext() - const [content, setContent] = useState() + const descriptionContent = (region === "row" && ) || (region === "eu" && ); + const [content, setContent] = useState(descriptionContent) useEffect(() => { - if (is_eu) setContent() if (is_cpa_plan) setContent() - }, [is_eu, is_cpa_plan]) + }, [is_cpa_plan]) return
{content}
} diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx index 82afd36880c..421ba982868 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx @@ -13,18 +13,17 @@ import { import { DerivGoBanner } from './deriv-go-banner' import { IIPAward } from './iip-award' import { DescriptionContent } from './description' -import useBuildVariant from 'features/hooks/use-build-variant' -import { getLocationPathname } from 'common/utility' import useRegion from 'components/hooks/use-region' +import { getLocationPathname } from 'common/utility' import useThirdPartyFlags from 'components/hooks/use-third-party-flags' +import useBuildVariant from 'features/hooks/use-build-variant' -const MainFooter = () => { - const {region} = useBuildVariant(); +export const MainFooter = () => { + const { region } = useBuildVariant() const { is_cpa_plan } = useRegion() const [is_career, setIsCareer] = useState(false) const [social_buttons, setSocialButtons] = useState(socialButtonsROW) const [warn_text, setWarnText] = useState(warnText) - const region_buttons = region === "eu" ? socialButtonsEU : socialButtonsROW useEffect(() => { const current_path = getLocationPathname() diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/help-centre/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/help-centre/index.tsx index ecef08b8ecf..12ff5f1129b 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/help-centre/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/help-centre/index.tsx @@ -6,11 +6,11 @@ import { getLocationPathname } from 'common/utility' import Image from 'features/components/atoms/image' import Link from 'features/components/atoms/link' import useVisibleContent from 'components/hooks/use-visible-content' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const HelpCentreSocialIcons = () => { + const { region } = useBuildVariant() const [is_career, setIsCareer] = useState(false) - const { is_eu } = useRegion() const { i18n } = useTranslation() const { language } = i18n @@ -23,7 +23,7 @@ const HelpCentreSocialIcons = () => { const config = { is_career_page: is_career, - is_eu, + is_eu: region === "eu", is_ar: language === 'ar', is_es: language === 'es', } diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/layout/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/layout/index.tsx index 9fcf7ee6501..1f9325b05fa 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/layout/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/layout/index.tsx @@ -64,21 +64,21 @@ const Layout = ({ } return ( - - - - + + + +
{children}
{!hide_layout_overlay && } - - - - + + + + ) } diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/index.tsx index a8828736de0..729e6fd2968 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { NavigationBlock } from '@deriv-com/blocks' // eslint-disable-next-line import/no-unresolved import { SubBrandDerivPartnersBrandLightIcon } from '@deriv/quill-icons/Logo' @@ -6,15 +6,10 @@ import { CustomLink } from '@deriv-com/components' import TopNavigation from './top-navigation' import { partnersItems, partnersEUItems } from './data' import PartnersNavButtons from './nav.buttons' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const PartnersNav = () => { - const { is_eu } = useRegion() - const [items, setItems] = useState(partnersItems) - - useEffect(() => { - if (is_eu) setItems(partnersEUItems) - }, [is_eu]) + const { region } = useBuildVariant() return ( { )} - items={items} + items={region === "row" ? partnersItems : partnersEUItems} /> ) } diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx index 39358ce91c0..da892d29bb8 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx @@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react' import { MobileNavToggle } from '@deriv-com/blocks' import { Button } from '@deriv/quill-design' import { getLocationPathname } from 'common/utility' -import useRegion from 'components/hooks/use-region' import { Localize, LocalizedLink } from 'components/localization' import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link' +import useBuildVariant from 'features/hooks/use-build-variant' const AffiliateButtons = () => { const { affiliate_signup_link } = useAffiliateSignupLink() @@ -50,7 +50,7 @@ const PaymentAgentButtons = () => { } const PartnersNavButtons = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const path_name = getLocationPathname() const [show_affiliate_btns, setShowAffiliateBtns] = useState(false) const [show_payment_btns, setShowPaymentBtns] = useState(false) @@ -60,8 +60,8 @@ const PartnersNavButtons = () => { }, [path_name]) useEffect(() => { - setShowPaymentBtns(path_name.includes('payment-agent') && !is_eu) - }, [is_eu, path_name]) + setShowPaymentBtns(path_name.includes('payment-agent') && region !== "eu") + }, [region, path_name]) return (
diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/tab-nav-without-border/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/tab-nav-without-border/index.tsx index d346ca030f6..03a86e224de 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/tab-nav-without-border/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/tab-nav-without-border/index.tsx @@ -1,22 +1,16 @@ import React, { useEffect, useState, useRef } from 'react' -import { SwiperSlide, Swiper } from 'swiper/react' +import { SwiperSlide } from 'swiper/react' import SwiperCore, { Navigation } from 'swiper' import NavigationTabMenu from '../../tabs/navigation-menu' import { swiper_wrapper, - swiper_button_next, - swiper_button_disabled, - swiper_height, swiper_slide, } from './styles.module.scss' import { OptionNavigationType } from './types' import Container from 'features/components/atoms/container' -import Image from 'features/components/atoms/image' import Flex from 'features/components/atoms/flex-box' import { getLocationPathname } from 'common/utility' -import ArrowNext from 'images/svg/arrow-next.svg' import useBreakpoints from 'components/hooks/use-breakpoints' -import dclsx from 'features/utils/dclsx' // Import the required Swiper modules SwiperCore.use([Navigation]) diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/desktop-menu/desktop.items.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/desktop-menu/desktop.items.tsx index a25e3d4b0af..b8d19174f6b 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/desktop-menu/desktop.items.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/desktop-menu/desktop.items.tsx @@ -4,8 +4,8 @@ import { SmartNavDropItems } from '../../types' import NavDropItems from '../nav-drop-items' import { Localize } from 'components/localization' import Typography from 'features/components/atoms/typography' -import useRegion from 'components/hooks/use-region' import dclsx from 'features/utils/dclsx' +import useBuildVariant from 'features/hooks/use-build-variant' interface DesktopItemsProps { item: SmartNavDropItems @@ -19,8 +19,8 @@ const NavDesktopItem = ({ item, active }: DesktopItemsProps) => { } } - const { is_row } = useRegion() - const has_scroll_menu = active === '_t_Trade_t_' && is_row + const { region } = useBuildVariant() + const has_scroll_menu = active === '_t_Trade_t_' && region === "row" return ( diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/nav-context/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/nav-context/index.tsx index c680d6347d1..3d9ffa9f00b 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/nav-context/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/navigation/template/nav-context/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useContext, useState, useEffect } from 'react' +import React, { ReactNode, useContext, useState, useEffect, createContext } from 'react' import { NavItem, SmartMultiColumnItems, @@ -6,8 +6,8 @@ import { SmartSingleItem, } from '../../types' import useBreakpoints from 'components/hooks/use-breakpoints' -import useRegion from 'components/hooks/use-region' import useVisibleContent from 'components/hooks/use-visible-content' +import useBuildVariant from 'features/hooks/use-build-variant' interface NavContextProps { is_menu_open: boolean @@ -15,7 +15,7 @@ interface NavContextProps { link_items?: SmartSingleItem[] drop_items?: (SmartSingleColumnItems | SmartMultiColumnItems)[] } -export const NavContext = React.createContext({ is_menu_open: false }) +export const NavContext = createContext({ is_menu_open: false }) interface NavProviderProps extends NavContextProps { children: ReactNode @@ -31,8 +31,8 @@ export const isSingleItem = (item: NavItem): item is SmartSingleItem => { } export const NavProvider = ({ is_menu_open, onCloseMenu, children, items }: NavProviderProps) => { + const { region } = useBuildVariant() const { is_mobile_or_tablet } = useBreakpoints() - const { is_eu, is_row } = useRegion() const [link_items, setLinkItems] = useState([]) const [drop_items, setDropItems] = useState<(SmartSingleColumnItems | SmartMultiColumnItems)[]>( [], @@ -40,7 +40,7 @@ export const NavProvider = ({ is_menu_open, onCloseMenu, children, items }: NavP const visible_items = useVisibleContent({ content: items, - config: { is_mobile: is_mobile_or_tablet, is_eu, is_row }, + config: { is_mobile: is_mobile_or_tablet, is_eu: region === "eu", is_row: region === "row" }, }) useEffect(() => { diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/options-layout/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/options-layout/index.tsx index 3f6bd537b97..7801222b51b 100644 --- a/themes/gatsby-theme-deriv/src/features/components/templates/options-layout/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/components/templates/options-layout/index.tsx @@ -8,8 +8,9 @@ import WhyTradeOptions from 'features/components/templates/why-trade-options' import { TString } from 'types/generics' import OptionsTopTab from 'features/components/organisms/options-top-tab' import WhatAreDigitalOptions from 'features/components/organisms/what-are-digital-options' +import { BuildVariantType } from 'features/types' -interface OptionsLayoutProps { +interface OptionsLayoutProps extends BuildVariantType{ children?: ReactNode heading: TString description: TString @@ -21,9 +22,10 @@ const OptionsLayout = ({ description, children, is_coming_soon = false, + region }: OptionsLayoutProps) => { return ( - + { +const CheckEmailContainer = ({region}: BuildVariantType) => { return ( - + { +const CtraderCheckEmail = ({region}: BuildVariantType) => { return ( - + { +const CtraderLogin = ({region}: BuildVariantType) => { const url_params = new URLSearchParams((isBrowser() && window.location.search) || '') const token = url_params.get('token1') const { account_error, create_account_error } = useDerivAuth('ctrader', token, 'login') return ( - + {account_error || create_account_error ? ( diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-login/login-success.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-login/login-success.tsx index 36d82270150..92c7d782622 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-login/login-success.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-login/login-success.tsx @@ -9,13 +9,14 @@ import Typography from 'features/components/atoms/typography' import Image from 'features/components/atoms/image' import CtraderSuccessImage from 'images/common/ctrader/ctrader-success.png' import LinkButton from 'features/components/atoms/link-button' +import { BuildVariantType } from 'features/types' -const CtraderLoginSuccess = () => { +const CtraderLoginSuccess = ({region}: BuildVariantType) => { const url_params = new URLSearchParams((isBrowser() && window.location.search) || '') const token = url_params.get('token') return ( - + { +const AddAccount = ({ region }: BuildVariantType) => { const { title, button_url, image_url, image_url_mobile, steps, paragraph, button_text } = ctrader_manage_data.add_account return ( @@ -14,6 +15,7 @@ const AddAccount = () => { steps={steps} paragraph={paragraph} button_text={button_text} + region={region} /> ) } diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/add-more-accounts.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/add-more-accounts.tsx index 7c060c4a895..c46b6231e3e 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/add-more-accounts.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/add-more-accounts.tsx @@ -1,8 +1,9 @@ import React from 'react' import { ctrader_manage_data } from './ctrader-manage-data' import CtraderManage from './ctrader-manage' +import { BuildVariantType } from 'features/types' -const AddMoreAccounts = () => { +const AddMoreAccounts = ({ region }: BuildVariantType) => { const { title, button_url, image_url, image_url_mobile, steps, paragraph, button_text } = ctrader_manage_data.add_more_accounts return ( @@ -14,6 +15,7 @@ const AddMoreAccounts = () => { steps={steps} paragraph={paragraph} button_text={button_text} + region={region} /> ) } diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/cashier.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/cashier.tsx index ca756e4457a..1d5536ae177 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/cashier.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/cashier.tsx @@ -1,8 +1,9 @@ import React from 'react' import { ctrader_manage_data } from './ctrader-manage-data' import CtraderManage from './ctrader-manage' +import { BuildVariantType } from 'features/types' -const Cashier = () => { +const Cashier = ({ region }: BuildVariantType) => { const { title, button_url, paragraph, button_text } = ctrader_manage_data.cashier return ( { button_url={button_url} paragraph={paragraph} button_text={button_text} + region={region} /> ) } diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/change-password.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/change-password.tsx index 4382d5bbd21..87cbf449cea 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/change-password.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/change-password.tsx @@ -1,8 +1,9 @@ import React from 'react' import { ctrader_manage_data } from './ctrader-manage-data' import CtraderManage from './ctrader-manage' +import { BuildVariantType } from 'features/types' -const ChangePassword = () => { +const ChangePassword = ({ region }: BuildVariantType) => { const { title, button_url, paragraph, button_text } = ctrader_manage_data.change_password return ( { button_url={button_url} paragraph={paragraph} button_text={button_text} + region={region} /> ) } diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/close-account.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/close-account.tsx index 6be410d83ce..5fbe9af4458 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/close-account.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/close-account.tsx @@ -1,8 +1,9 @@ import React from 'react' import { ctrader_manage_data } from './ctrader-manage-data' import CtraderManage from './ctrader-manage' +import { BuildVariantType } from 'features/types' -const CloseAccount = () => { +const CloseAccount = ({ region }: BuildVariantType) => { const { title, button_url, paragraph, button_text } = ctrader_manage_data.close_account return ( { button_url={button_url} paragraph={paragraph} button_text={button_text} + region={region} /> ) } diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage-data.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage-data.tsx index 1401d504c82..0a01484e873 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage-data.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage-data.tsx @@ -14,7 +14,7 @@ type ParagraphType = { type CtraderManageDataType = { [page: string]: CtraderManageProps } -export type CtraderManageProps = { +export type CtraderManageProps = { title: TString paragraph: ParagraphType steps?: ParagraphType[] diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage.tsx index 34ff6da4764..41d5b0fa4ba 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-manage/ctrader-manage.tsx @@ -6,6 +6,9 @@ import LinkButton from 'features/components/atoms/link-button' import CtraderWrapper from 'features/components/templates/ctrader/ctrader-wrapper' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' +import { BuildVariantType } from 'features/types' + +type CtraderManagePageProps = CtraderManageProps & BuildVariantType const CtraderManage = ({ title, @@ -15,9 +18,10 @@ const CtraderManage = ({ paragraph, button_url, button_text, -}: CtraderManageProps) => { + region +}: CtraderManagePageProps) => { return ( - + { - const { is_eu } = useRegion() - - const security_pdf_link = `/tnc${is_eu ? '/eu' : ''}/security-and-privacy.pdf` +const CtraderSignup = ({region}: BuildVariantType) => { + const security_pdf_link = `/tnc${region === "eu" ? '/eu' : ''}/security-and-privacy.pdf` getLanguage() return ( - + diff --git a/themes/gatsby-theme-deriv/src/features/pages/ctrader-signup/signup-credentials.tsx b/themes/gatsby-theme-deriv/src/features/pages/ctrader-signup/signup-credentials.tsx index 7e8bb9dc3ea..baac5cfb38d 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/ctrader-signup/signup-credentials.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/ctrader-signup/signup-credentials.tsx @@ -12,15 +12,16 @@ import Button from 'features/components/atoms/button' import Link from 'features/components/atoms/link' import { useResidenceList } from 'features/hooks/use-residence-list' import Image from 'features/components/atoms/image' +import { BuildVariantType } from 'features/types' -const CtraderSignupCredentials = () => { +const CtraderSignupCredentials = ({region}: BuildVariantType) => { const [show_check_email, setShowCheckEmail] = useState(true) const url_params = new URLSearchParams((isBrowser() && window.location.search) || '') const email = url_params.get('email')?.replaceAll(' ', '+') const [residence_list] = useResidenceList() return ( - + { +const CtraderSignupSuccess = ({region}: BuildVariantType) => { const url_params = new URLSearchParams((isBrowser() && window.location.search) || '') const token = url_params.get('token') return ( - + { +const DerivCTrader = ({region}: BuildVariantType) => { const is_ctrader = false return ( - + @@ -28,11 +28,7 @@ const DerivCTrader = () => { - {is_ctrader && ( - <> - - - )} + {is_ctrader && } @@ -41,4 +37,4 @@ const DerivCTrader = () => { ) } -export default WithIntl()(DerivCTrader) +export default DerivCTrader diff --git a/themes/gatsby-theme-deriv/src/features/pages/deriv-ctrader/other-platforms/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/deriv-ctrader/other-platforms/index.tsx index 8c70ab4a293..3e8c44e8b95 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/deriv-ctrader/other-platforms/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/deriv-ctrader/other-platforms/index.tsx @@ -1,23 +1,13 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { carousel_data } from './data' import PlatformsCarousel from 'features/components/templates/trade-platform/other-platforms' const OtherPlatforms = () => { - const [is_loaded, setLoaded] = useState(false) - - useEffect(() => { - setLoaded(true) - }, []) - return ( - <> - {is_loaded ? ( - - ) : null} - + ) } diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/hero/hero-image.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/hero/hero-image.tsx index 9f89e0070c3..ae37333e3fb 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/home/hero/hero-image.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/home/hero/hero-image.tsx @@ -1,7 +1,7 @@ import React from 'react' import { StaticImage } from 'gatsby-plugin-image' import clsx from 'clsx' -import { hero_img } from './styles.module.scss' +import { hero_img, hero_img_eu } from './styles.module.scss' import useBuildVariant from 'features/hooks/use-build-variant' const HeroImage = () => { @@ -22,7 +22,7 @@ const HeroImage = () => { } if (region === 'eu') { return ( -
+
{ - const [is_logged_in] = useAuthCheck() - const handleLogin = useHandleLogin() - - return ( - - - - - - - - - - - - - ) -} - -export default LivePricing diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/live-pricing-section.module.scss b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/live-pricing-section.module.scss deleted file mode 100644 index 5c0a5c332e6..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/live-pricing-section.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; - -.button_table { - inline-size: 90%; - @include breakpoints(tablet) { - inline-size: auto; - } -} \ No newline at end of file diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/market-tab.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/market-tab.tsx deleted file mode 100644 index 85048c54bb9..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/market-tab.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useState } from 'react' -import { TAvailableLiveMarkets } from '../types' -import LiveMarketTable from '../table-component/live-market-table' -import { market_buttons } from './utils' -import { tab_container, markets_menu_tab_item } from './tab-style.module.scss' -import { Localize } from 'components/localization' -import Typography from 'features/components/atoms/typography' -import Container from 'features/components/atoms/container' -import Flex from 'features/components/atoms/flex-box' -import TabMenu from 'features/components/templates/tabs/menu' -import { PathType } from 'features/types' - -const MarketTab = () => { - const [selected_market, setSelectedMarket] = useState('fx') - const [tab_name, setTabName] = useState('Forex') - const [linkToMarketPage, setLinkToMarketPage] = useState('/markets/forex/') - const onMarketButtonClick = (selected) => { - setSelectedMarket(selected) - } - - return ( - - - {market_buttons.map((market_item) => ( - { - onMarketButtonClick(market_item.market_name) - setLinkToMarketPage(market_item.to) - }} - > - - - ))} - - {market_buttons.map( - (market_item) => - market_item.market_name === selected_market && ( - - - - ), - )} - - - - ) -} - -export default MarketTab diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/tab-style.module.scss b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/tab-style.module.scss deleted file mode 100644 index 7d2d0791334..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/tab-style.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; -@import 'features/styles/theme/variables'; - -.tab_container { - overflow: scroll; - &::-webkit-scrollbar { - display: none; - } - - @include breakpoints(tablet) { - overflow-x: auto; - } -} - -.markets_menu_tab_item { - padding: 1rem 3.2rem; - @include breakpoints(tablet) { - font-size: 2rem; - min-inline-size: 20rem; - min-block-size: 6.4rem; - padding: 1.7rem 2rem; - &.navigation-tabs { - min-inline-size: 14rem; - } - } -} diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/utils.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/utils.tsx deleted file mode 100644 index 15e96ea1195..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/market-tabs/utils.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { TMarketButtons } from '../types' -import Forex from 'images/svg/home/ts_fx_icon.svg' -import Derived from 'images/svg/home/ts_derived_icon.svg' -import Stocks from 'images/svg/home/ts_stocks_icon.svg' -import ETFS from 'images/svg/home/ts_etfs.svg' -import Crypto from 'images/svg/home/ts_crypto_icon.svg' -import Commodities from 'images/svg/home/ts_commodities_icon.svg' -import SelectedForex from 'images/svg/home/selected_ts_fx_icon.svg' -import SelectedDerived from 'images/svg/home/selected_ts_derived_icon.svg' -import SelectedStocks from 'images/svg/home/selected_ts_stocks_icon.svg' -import SelectedETFS from 'images/svg/home/selected_etfs.svg' -import SelectedCrypto from 'images/svg/home/selected_ts_crypto_icon.svg' -import SelectedCommodities from 'images/svg/home/selected_ts_commodities_icon.svg' - -export const market_buttons: TMarketButtons[] = [ - { - src: Forex, - selected_src: SelectedForex, - button_text: 'Forex', - market_name: 'fx', - market_description: - '_t_Benefit from round-the-clock trading hours (Monday to Friday), high liquidity, low barriers to entry, a wide range of offerings, and opportunities to trade on world events._t_', - to: '/markets/forex/', - }, - { - src: Derived, - selected_src: SelectedDerived, - button_text: 'Derived indices', - market_name: 'der', - market_description: - '_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_', - to: '/markets/synthetic/', - }, - { - src: Stocks, - selected_src: SelectedStocks, - button_text: 'Stocks & indices', - market_name: 'ind', - market_description: - '_t_Trade global stocks of your favourite household brands and international stock market indices on Deriv. Expand your trading opportunities with access to a wide range of stocks and indices at competitive prices, and the convenience to trade indices beyond standard market hours._t_', - to: '/markets/stock/', - }, - { - src: ETFS, - selected_src: SelectedETFS, - button_text: 'ETFs', - market_name: 'etfs', - market_description: - '_t_Speculate on the price movements of popular exchange-traded funds (ETFs). Diversify your portfolio with assets that track bonds, commodities, and indices, without the high cost of owning the underlying assets._t_', - to: '/markets/exchange-traded-funds/', - }, - { - src: Crypto, - selected_src: SelectedCrypto, - button_text: 'Cryptocurrencies', - market_name: 'cry', - market_description: - "_t_Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of world's most popular cryptocurrencies._t_", - to: '/markets/cryptocurrencies/', - }, - { - src: Commodities, - selected_src: SelectedCommodities, - button_text: 'Commodities', - market_name: 'com', - market_description: - '_t_Speculate on the price movements of silver, gold, oil and more. Profit from the price difference when the market moves in the direction that you have predicted._t_', - to: '/markets/commodities/', - }, -] diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-market-table.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-market-table.tsx deleted file mode 100644 index 9ead8bfddda..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-market-table.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React, { useMemo } from 'react' -import { - flexRender, - getCoreRowModel, - getSortedRowModel, - useReactTable, -} from '@tanstack/react-table' -import type { SortingState } from '@tanstack/react-table' -import { TAvailableLiveMarkets } from '../types' -import useLiveColumns from '../use-live-columns' -import * as styles from './live-pricing.module.scss' -import Flex from 'features/components/atoms/flex-box' -import Link from 'features/components/atoms/link' -import { Localize } from 'components/localization' -import usePricingFeed from 'components/hooks/use-pricing-feed' -import Typography from 'features/components/atoms/typography' -import InitialLoader from 'components/elements/dot-loader' -import { PathType } from 'features/types' - -export type TLiveMarketTableProps = { - selected_market: TAvailableLiveMarkets - link_to: PathType -} - -const LoaderView = ( - - - -) -const ErrorView = ( - - - - - -) - -const LiveMarketTable = ({ selected_market, link_to }: TLiveMarketTableProps) => { - const [error, rawMarketsData] = usePricingFeed() - const TABLE_VISIBLE_ROWS = 5 - const [sorting, setSorting] = React.useState([]) - - const markets_data = useMemo(() => { - if (rawMarketsData) { - const stocks = rawMarketsData['stk'] - const indices = rawMarketsData['ind'] - const stocks_indices = { ...stocks, ...indices } - const res = { ...rawMarketsData, ind: stocks_indices } - - if (res[selected_market]) { - return Object.values(res[selected_market]) - } - } - return [] - }, [rawMarketsData, selected_market]) - - const columns = useLiveColumns() - const table = useReactTable({ - data: markets_data, - columns, - state: { - sorting, - }, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), - onSortingChange: setSorting, - }) - - const rows = table.getRowModel().rows.slice(0, TABLE_VISIBLE_ROWS) - - if (!rawMarketsData) return LoaderView - if (error) return ErrorView - - return ( - <> - - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- - - - - - - - - ) -} - -export default LiveMarketTable diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-pricing.module.scss b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-pricing.module.scss deleted file mode 100644 index 327b3eac476..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/live-pricing.module.scss +++ /dev/null @@ -1,122 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; -@import 'features/styles/theme/variables'; - -.table_row_header { - background-color: $color-white-1; - border-start-start-radius: 16px; - border-start-end-radius: 16px; - display: flex; - justify-content: center; - align-items: center; - min-block-size: 7.5rem; - th { - padding-block: 0; - inline-size: 7.3rem; - &:nth-child(1) { - inline-size: 11rem; - } - &:nth-child(2) { - inline-size: 2rem; - } - &:nth-child(5) { - display: none; - } - } - @include breakpoints(phone) { - padding: 2rem; - - th { - inline-size: 12rem; - &:nth-child(1) { - inline-size: 18rem; - } - &:nth-child(2) { - inline-size: 7rem; - } - &:nth-child(5) { - display: block; - } - } - } - @include breakpoints(laptop) { - padding: 2rem; - - th { - inline-size: 17rem; - &:nth-child(1) { - inline-size: 32rem; - } - &:nth-child(2) { - inline-size: 1rem; - } - &:nth-child(5) { - display: block; - } - } - } -} -.table_row_data { - display: flex; - justify-content: center; - border-block-end: 2px solid var(--color-grey-8); - align-items: center; - gap: 1rem; - - td { - padding-block: 1rem; - display: flex; - justify-content: center; - inline-size: 6.9rem; - - &:nth-child(1) { - inline-size: 2rem; - } - &:nth-child(2) { - justify-content: flex-start; - inline-size: 8.2rem; - } - &:nth-child(5) { - display: none; - } - } - @include breakpoints(phone) { - gap: 0; - td { - justify-content: flex-start; - inline-size: 12rem; - - &:nth-child(1) { - inline-size: 3.4rem; - } - &:nth-child(2) { - inline-size: 21.2rem; - } - &:nth-child(5) { - display: block; - } - } - } - @include breakpoints(laptop) { - padding: 1rem; - gap: 0; - td { - justify-content: flex-start; - inline-size: 17rem; - - &:nth-child(1) { - inline-size: 3.4rem; - } - &:nth-child(2) { - inline-size: 30rem; - } - &:nth-child(5) { - display: block; - } - } - } -} - - - - - diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/symbol-icon.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/symbol-icon.tsx deleted file mode 100644 index 0f5e68f2d7b..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/table-component/symbol-icon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/*eslint import/namespace: ['error', { allowComputed: true }]*/ -import React from 'react' -import * as icons from 'components/elements/symbols-shortcode' -import Image from 'features/components/atoms/image' - -const SymbolIcon = ({ icon_src, alt }: { icon_src: string; alt?: string }) => { - if (icon_src === 'Volatility_150_(1s)_Index') - return {alt} - if (icon_src === 'Volatility_250_(1s)_Index') - return {alt} - else return {alt} -} - -export default SymbolIcon diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/types.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/types.tsx deleted file mode 100644 index f44185a49d4..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/types.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { PathType } from 'features/types' -import { TString } from 'types/generics' - -export type TMarketData = { - ask: number - bid: number - chng: number - mkt: string - sprd: number - sym: string - code: string -} - -export type TAvailableLiveMarkets = 'fx' | 'der' | 'ind' | 'cry' | 'com' | 'etfs' - -export type TMarketButtons = { - src: string - selected_src: string - button_text: string - market_name: TAvailableLiveMarkets - market_description: TString - to: PathType -} diff --git a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/use-live-columns.tsx b/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/use-live-columns.tsx deleted file mode 100644 index cc9c91fa888..00000000000 --- a/themes/gatsby-theme-deriv/src/features/pages/home/live-pricing/use-live-columns.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { createColumnHelper } from '@tanstack/react-table' -import React, { useMemo } from 'react' -import { TMarketData } from './types' -import SymbolIcon from './table-component/symbol-icon' -import Flex from 'features/components/atoms/flex-box' -import { Localize } from 'components/localization' -import useBreakpoints from 'components/hooks/use-breakpoints' -import Typography from 'features/components/atoms/typography' - -const liveMarketColumnHelper = createColumnHelper() - -const useLiveColumns = () => { - const { is_mobile } = useBreakpoints() - const columns = useMemo(() => { - return [ - liveMarketColumnHelper.accessor('code', { - header: () => ( - - - - - - ), - cell: (info) => ( - - {info.row.original.mkt !== 'etfs' ? ( - - ) : ( - - )} - - ), - }), - liveMarketColumnHelper.accessor('sym', { - header: () => ( - -

Symbol

- - ), - cell: (info) => ( - - - {info.getValue()} - - - ), - }), - liveMarketColumnHelper.accessor('bid', { - header: () => ( - - - - - - ), - cell: (info) => ( - - - {info.getValue()} - - - ), - }), - liveMarketColumnHelper.accessor('ask', { - header: () => ( - - - - - - ), - cell: (info) => ( - - - {info.getValue()} - - - ), - }), - liveMarketColumnHelper.accessor('sprd', { - header: () => ( - - - - - - ), - cell: (info) => ( - - - {info.getValue()} - - - ), - }), - liveMarketColumnHelper.accessor('chng', { - header: () => ( - - - - - - ), - cell: (info) => { - const value_in_integer = info.getValue().replace(/[% ]/g, '') - const color = - (value_in_integer > 0 && 'profit') || - (value_in_integer < 0 && 'brand') || - 'primary' - const percentage_change = - value_in_integer == 0.0 - ? info.getValue().replace(/[-, + ]/g, '') - : info.getValue() - - return ( - - - {percentage_change} - - - ) - }, - }), - ] - }, []) - - return columns -} - -export default useLiveColumns diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/accumulator/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/accumulator/index.tsx index 91b29dcb877..40011c2ee39 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/accumulator/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/accumulator/index.tsx @@ -12,11 +12,13 @@ import OptionsContent from 'features/components/templates/options-content' import AvailableMarketPlatforms from 'features/components/organisms/available-markets-platforms' import OptionsFaq from 'features/components/templates/options-faq' import Flex from 'features/components/atoms/flex-box' +import { BuildVariantType } from 'features/types' -const AccumulatorsOptions = () => { +const AccumulatorsOptions = ({region}: BuildVariantType) => { return ( <> diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/digital/asians/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/digital/asians/index.tsx index 13de93aaeb8..0f54f57f7fa 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/digital/asians/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/digital/asians/index.tsx @@ -4,10 +4,11 @@ import AvailableMarketPlatforms from 'features/components/organisms/available-ma import DigitalOptionsLayout from 'features/components/templates/digital-options-layout' import OptionsContent from 'features/components/templates/options-content' import OptionsFaq from 'features/components/templates/options-faq' +import { BuildVariantType } from 'features/types' -const AsiansDigitalOptionsPage = () => { +const AsiansDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/digital/digits/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/digital/digits/index.tsx index 48104739bb9..02d73c2eb83 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/digital/digits/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/digital/digits/index.tsx @@ -9,10 +9,11 @@ import AvailableMarketPlatforms from 'features/components/organisms/available-ma import DigitalOptionsLayout from 'features/components/templates/digital-options-layout' import OptionsContent from 'features/components/templates/options-content' import OptionsFaq from 'features/components/templates/options-faq' +import { BuildVariantType } from 'features/types' -const DigitDigitalOptionsPage = () => { +const DigitDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + { +const HighAndLowDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + { +const InOutDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/digital/lookbacks/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/digital/lookbacks/index.tsx index d42d57ff8a1..d4458cd8a4b 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/digital/lookbacks/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/digital/lookbacks/index.tsx @@ -7,10 +7,11 @@ import OptionsFaq from 'features/components/templates/options-faq' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' import Flex from 'features/components/atoms/flex-box' +import { BuildVariantType } from 'features/types' -const LookbacksDigitalOptionsPage = () => { +const LookbacksDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/digital/only-ups-only-downs/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/digital/only-ups-only-downs/index.tsx index 18742723a50..916ceb1f3c4 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/digital/only-ups-only-downs/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/digital/only-ups-only-downs/index.tsx @@ -9,10 +9,11 @@ import AvailableMarketPlatforms from 'features/components/organisms/available-ma import DigitalOptionsLayout from 'features/components/templates/digital-options-layout' import OptionsContent from 'features/components/templates/options-content' import OptionsFaq from 'features/components/templates/options-faq' +import { BuildVariantType } from 'features/types' -const OnlyUpAndOnlyDownDigitalOptionsPage = () => { +const OnlyUpAndOnlyDownDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + { +const ResetCallDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + { +const TouchAndNoTouchDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + { +const UpAndDownDigitalOptionsPage = ({region}: BuildVariantType) => { return ( - + diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/turbo/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/turbo/index.tsx index 9b2b7e56896..4f8793b3e0f 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/turbo/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/turbo/index.tsx @@ -9,10 +9,12 @@ import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' import dclsx from 'features/utils/dclsx' +import { BuildVariantType } from 'features/types' -const TurboOptions = () => { +const TurboOptions = ({region}: BuildVariantType) => { return ( diff --git a/themes/gatsby-theme-deriv/src/features/pages/options/vanilla/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/options/vanilla/index.tsx index fe58f1f2fcf..91e05270249 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/options/vanilla/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/options/vanilla/index.tsx @@ -9,10 +9,12 @@ import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' import dclsx from 'features/utils/dclsx' +import { BuildVariantType } from 'features/types' -const VanillaOptions = () => { +const VanillaOptions = ({region}: BuildVariantType) => { return ( diff --git a/themes/gatsby-theme-deriv/src/features/pages/principles/data.tsx b/themes/gatsby-theme-deriv/src/features/pages/principles/data.tsx index 0f382b7ce85..2af89f2ea41 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/principles/data.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/principles/data.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react' +import React from 'react' import { CardContent } from '@deriv-com/components' import { StandaloneCircleOneRegularIcon, @@ -8,16 +8,8 @@ import { StandaloneCircleFiveRegularIcon, // eslint-disable-next-line import/no-unresolved } from '@deriv/quill-icons' -import { StaticImage } from 'gatsby-plugin-image' import { Localize } from 'components/localization' -export type ContentImageType = { - id: number - header?: ReactNode - description?: ReactNode - image?: ReactNode -} - export const ReliableSteps: CardContent[] = [ { id: 1, @@ -251,71 +243,4 @@ export const ResponsibleSteps: CardContent[] = [ align: 'start', color: 'gray', }, -] - -export const ContentImage: ContentImageType[] = [ - { - id: 1, - header: , - description: ( - - ), - image: ( - - ), - }, - { - id: 2, - header: , - description: ( - - ), - image: ( - - ), - }, - { - id: 3, - header: , - description: ( - - ), - image: ( - - ), - }, - { - id: 4, - header: , - description: ( - - ), - image: ( - - ), - }, -] +] \ No newline at end of file diff --git a/themes/gatsby-theme-deriv/src/features/pages/signup-success/index.tsx b/themes/gatsby-theme-deriv/src/features/pages/signup-success/index.tsx index d1452604adf..2f12b95d7c8 100644 --- a/themes/gatsby-theme-deriv/src/features/pages/signup-success/index.tsx +++ b/themes/gatsby-theme-deriv/src/features/pages/signup-success/index.tsx @@ -8,14 +8,15 @@ import { Localize } from 'components/localization' import SignupImage from 'images/common/sign-up/response-email.png' import Image from 'features/components/atoms/image' import Link from 'features/components/atoms/link' +import { BuildVariantType } from 'features/types' -type SignupProps = { +type SignupProps = BuildVariantType & { email?: string } -const SignUpSuccessContainer = ({ email }: SignupProps) => { +const SignUpSuccessContainer = ({ email, region }: SignupProps) => { return ( - + { - const { is_eu } = useRegion() + const { region } = useBuildVariant() - const security_pdf_link = `/tnc${is_eu ? '/eu' : ''}/security-and-privacy.pdf` + const security_pdf_link = `/tnc${region === "eu" ? '/eu' : ''}/security-and-privacy.pdf` return ( { +const SignUp = ({region}: BuildVariantType) => { const analyticsData: Parameters[1] = { form_source: isBrowser() && window.location.hostname, form_name: 'default_diel_deriv', @@ -19,7 +20,7 @@ const SignUp = () => { }, []) return ( - + { - return +const CheckEmail = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + return } export default WithIntl()(CheckEmail) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-check-email/index.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-check-email/index.tsx index aab070880b7..acf292b6513 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-check-email/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-check-email/index.tsx @@ -1,7 +1,11 @@ import React from 'react' import { WithIntl } from 'components/localization' import CtraderCheckEmail from 'features/pages/ctrader-check-email' +import { TGatsbyHead } from 'features/types' -const CtraderCheckEmailPage = () => +const CtraderCheckEmailPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + return +} export default WithIntl()(CtraderCheckEmailPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-login/index.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-login/index.tsx index 1f742d7b5c3..8cb48d8e7a5 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-login/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-login/index.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import CtraderLogin from 'features/pages/ctrader-login' +import { TGatsbyHead } from 'features/types' -const CtraderLoginPage = () => +const CtraderLoginPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CtraderLoginPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-login/login-success.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-login/login-success.tsx index d93ee93dcdd..5cb888332e6 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-login/login-success.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-login/login-success.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import CtraderLoginSuccess from 'features/pages/ctrader-login/login-success' +import { TGatsbyHead } from 'features/types' -const CtraderLoginSuccessPage = () => +const CtraderLoginSuccessPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CtraderLoginSuccessPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-account.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-account.tsx index 3cee9324afa..34d34ee3c65 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-account.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-account.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import AddAccount from 'features/pages/ctrader-manage/add-account' +import { TGatsbyHead } from 'features/types' -const AddAccountPage = () => +const AddAccountPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(AddAccountPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-more-accounts.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-more-accounts.tsx index 166af860769..27b1d7df7b6 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-more-accounts.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/add-more-accounts.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import AddMoreAccounts from 'features/pages/ctrader-manage/add-more-accounts' +import { TGatsbyHead } from 'features/types' -const AddMoreAccountsPage = () => +const AddMoreAccountsPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(AddMoreAccountsPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/cashier.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/cashier.tsx index 3d0f36b6dd9..a8b3f98e887 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/cashier.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/cashier.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import Cashier from 'features/pages/ctrader-manage/cashier' +import { TGatsbyHead } from 'features/types' -const CashierPage = () => +const CashierPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CashierPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/change-password.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/change-password.tsx index 7b6754ca185..b956a13a3d5 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/change-password.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/change-password.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import ChangePassword from 'features/pages/ctrader-manage/change-password' +import { TGatsbyHead } from 'features/types' -const ChangePasswordPage = () => +const ChangePasswordPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(ChangePasswordPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/close-account.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/close-account.tsx index 946f75f8f5a..cdd45067e67 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-manage/close-account.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-manage/close-account.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import CloseAccount from 'features/pages/ctrader-manage/close-account' +import { TGatsbyHead } from 'features/types' -const CloseAccountPage = () => +const CloseAccountPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CloseAccountPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-signup/credentials.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-signup/credentials.tsx index 7ff1e5c49a1..7043c008706 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-signup/credentials.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-signup/credentials.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import CtraderSignupCredentials from 'features/pages/ctrader-signup/signup-credentials' +import { TGatsbyHead } from 'features/types' -const CtraderSignupCredentialsPage = () => +const CtraderSignupCredentialsPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CtraderSignupCredentialsPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-signup/index.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-signup/index.tsx index c80fc312a5c..628248b806c 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-signup/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-signup/index.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import CtraderSignup from 'features/pages/ctrader-signup' +import { TGatsbyHead } from 'features/types' -const CtraderSignupPage = () => +const CtraderSignupPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CtraderSignupPage) diff --git a/themes/gatsby-theme-deriv/src/pages/ctrader-signup/signup-success.tsx b/themes/gatsby-theme-deriv/src/pages/ctrader-signup/signup-success.tsx index 89159281a4e..171c636c9d5 100644 --- a/themes/gatsby-theme-deriv/src/pages/ctrader-signup/signup-success.tsx +++ b/themes/gatsby-theme-deriv/src/pages/ctrader-signup/signup-success.tsx @@ -1,7 +1,12 @@ import React from 'react' import { WithIntl } from 'components/localization' import CtraderSignupSuccess from 'features/pages/ctrader-signup/signup-success' +import { TGatsbyHead } from 'features/types' -const CtraderSignupSuccessPage = () => +const CtraderSignupSuccessPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + return +} export default WithIntl()(CtraderSignupSuccessPage) diff --git a/themes/gatsby-theme-deriv/src/pages/dbot/index.tsx b/themes/gatsby-theme-deriv/src/pages/dbot/index.tsx index 74367aa37c8..a96646a4dcb 100644 --- a/themes/gatsby-theme-deriv/src/pages/dbot/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dbot/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import Loadable from '@loadable/component' import DCommonBanner from './_hero' import PageNotFound from 'features/pages/404' @@ -6,7 +6,6 @@ import { SEO, TMetaAttributes } from 'components/containers' import Layout from 'components/layout/layout' import { WithIntl } from 'components/localization' 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' @@ -75,33 +74,23 @@ const trading: TradingType[] = [ }, ] -const Dbot = () => { - const { is_eu, is_row } = useRegion() - const [is_loaded, setLoaded] = useState(false) +const Dbot = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext - useEffect(() => { - setLoaded(true) - }, []) + if(region === "eu") return - if (is_loaded) { + if (region === "row") { return ( - <> - {is_row && ( - - - - - - - - - )} - {is_eu && } - + + + + + + + + ) } - - return } export default WithIntl()(Dbot) diff --git a/themes/gatsby-theme-deriv/src/pages/deriv-ctrader/index.tsx b/themes/gatsby-theme-deriv/src/pages/deriv-ctrader/index.tsx index a654d0b6c02..f63746040b5 100644 --- a/themes/gatsby-theme-deriv/src/pages/deriv-ctrader/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/deriv-ctrader/index.tsx @@ -1,17 +1,15 @@ import React from 'react' import PageNotFound from '../404' import DerivCTrader from 'features/pages/deriv-ctrader' -import useRegion from 'components/hooks/use-region' import { WithIntl, localize } from 'components/localization' import SEO from 'components/containers/seo' import { TGatsbyHead } from 'features/types' -const CTraderPage = () => { - const { is_row } = useRegion() - if (is_row) { - return - } - return +const CTraderPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + + if (region === "row") return + return } export default WithIntl()(CTraderPage) diff --git a/themes/gatsby-theme-deriv/src/pages/deriv-go/_footer-banner.tsx b/themes/gatsby-theme-deriv/src/pages/deriv-go/_footer-banner.tsx index 16195df0493..78f1e1b96b2 100644 --- a/themes/gatsby-theme-deriv/src/pages/deriv-go/_footer-banner.tsx +++ b/themes/gatsby-theme-deriv/src/pages/deriv-go/_footer-banner.tsx @@ -19,7 +19,6 @@ import { deriv_go_ios_url, } from 'common/constants' import DownloadColumn, { TDownloadColumnItem } from 'components/custom/_multi-width-column-download' -import { localize } from 'components/localization' import useThirdPartyFlags from 'components/hooks/use-third-party-flags' const ContentWrapper = styled.div<{ is_rtl: boolean }>` diff --git a/themes/gatsby-theme-deriv/src/pages/deriv-go/_other-apps.tsx b/themes/gatsby-theme-deriv/src/pages/deriv-go/_other-apps.tsx index 9a7a847d7f6..ad848532759 100644 --- a/themes/gatsby-theme-deriv/src/pages/deriv-go/_other-apps.tsx +++ b/themes/gatsby-theme-deriv/src/pages/deriv-go/_other-apps.tsx @@ -1,7 +1,6 @@ import React from 'react' import mt5Icon from '../../images/svg/deriv-go/mt5.svg' import dtIcon from '../../images/svg/deriv-go/dt-icosn.svg' -import ezIcon from '../../images/svg/deriv-go/ez-icon.svg' import dxIcon from '../../images/svg/custom/rebranding/deriv-x-icon.svg' import dbIcon from '../../images/svg/deriv-go/db-icon.svg' import GenericCarousel, { TRenderableData } from 'components/custom/carousel/_platforms-carousel' diff --git a/themes/gatsby-theme-deriv/src/pages/deriv-go/index.tsx b/themes/gatsby-theme-deriv/src/pages/deriv-go/index.tsx index f70d675ee17..a440c47c1ee 100644 --- a/themes/gatsby-theme-deriv/src/pages/deriv-go/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/deriv-go/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { DerivGoContent, FooterBanner, StartDerivGo } from './_lazy-load' import Banner from './_banner' import OtherApps from './_other-apps' @@ -7,7 +7,6 @@ import WhyTradeDerivGo from './_why-trade-deriv-go' import PageNotFound from 'features/pages/404' import { SEO } from 'components/containers' import Roadmap, { TPortal } from 'components/elements/roadmap' -import useRegion from 'components/hooks/use-region' import Layout from 'components/layout/layout' import { WithIntl } from 'components/localization' import { ContentType } from 'pages/landing/_types' @@ -52,35 +51,26 @@ const derivGoPortalData: TPortal = { link: 'https://portal.productboard.com/gfueayjjwpmfhdysrrn3n3wn', } -const DerivGo = () => { - const { is_row } = useRegion() - const [is_loaded, setLoaded] = useState(false) +const DerivGo = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const deriv_go_management_board = useThirdPartyFlags('deriv_go_management_board') - useEffect(() => { - setLoaded(true) - }, []) - - if (is_loaded) { - if (is_row) { - return ( - - - - - - - {deriv_go_management_board && } - - - - ) - } - - return + if (region === "row") { + return ( + + + + + + + {deriv_go_management_board && } + + + + ) } - return + return } export default WithIntl()(DerivGo) diff --git a/themes/gatsby-theme-deriv/src/pages/derivx/_other-apps.tsx b/themes/gatsby-theme-deriv/src/pages/derivx/_other-apps.tsx index bce347b7e80..415e608a4ae 100644 --- a/themes/gatsby-theme-deriv/src/pages/derivx/_other-apps.tsx +++ b/themes/gatsby-theme-deriv/src/pages/derivx/_other-apps.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { MT5Icon, DTIcon, EZIcon, DGoIcon, DBIcon } from '../../images/svg/deriv-x' +import { MT5Icon, DTIcon, DGoIcon, DBIcon } from '../../images/svg/deriv-x' import GenericCarousel, { TRenderableData } from 'components/custom/carousel/_platforms-carousel' const carouselData: TRenderableData[] = [ diff --git a/themes/gatsby-theme-deriv/src/pages/derivx/index.tsx b/themes/gatsby-theme-deriv/src/pages/derivx/index.tsx index c48487714ac..40aa250b420 100644 --- a/themes/gatsby-theme-deriv/src/pages/derivx/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/derivx/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' import Hero from './_hero' import WhatIsDeriv from './_what-is-derivx' import SellingPoints from './_selling-points' @@ -10,36 +10,26 @@ import PageNotFound from 'features/pages/404' import { SEO } from 'components/containers' import Layout from 'components/layout/layout' import { WithIntl } from 'components/localization' -import useRegion from 'components/hooks/use-region' import { TGatsbyHead } from 'features/types' -const DerivX = () => { - const { is_row } = useRegion() - const [is_loaded, setLoaded] = useState(false) +const DerivX = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext - useEffect(() => { - setLoaded(true) - }, []) - - if (is_loaded) { - if (is_row) { - return ( - - - - - - - - - - ) - } - - return + if (region === "row") { + return ( + + + + + + + + + + ) } - return + return } export default WithIntl()(DerivX) diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5-trading-signals/_signal-steps.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5-trading-signals/_signal-steps.tsx index 0f37399ad9e..d2950b74e71 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5-trading-signals/_signal-steps.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5-trading-signals/_signal-steps.tsx @@ -6,9 +6,9 @@ import { Mobile, Desktop } from '../../components/containers' import { usePageLoaded } from 'components/hooks/use-page-loaded' import { QueryImage, LocalizedLinkText } from 'components/elements' import device from 'themes/device' -import useRegion from 'components/hooks/use-region' import { TString } from 'types/generics' import { localize } from 'components/localization' +import useBuildVariant from 'features/hooks/use-build-variant' type TContent = { header: TString @@ -215,13 +215,13 @@ type SignalStepsProps = { } const SignalSteps = ({ active_tab }: SignalStepsProps) => { + const { region } = useBuildVariant() const data = useStaticQuery(query) const [is_mounted] = usePageLoaded() // needed to fix tab highlighting not being rerendered during first load const [signal_subscriber, signal_provider] = [ active_tab === 'signal-subscriber', active_tab === 'signal-provider', ] - const { is_eu } = useRegion() return ( <> @@ -239,7 +239,7 @@ const SignalSteps = ({ active_tab }: SignalStepsProps) => { { +const DMT5TradingSignals = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [active_tab, setActiveTab] = useTabStateQuery(['signal-subscriber', 'signal-provider']) const [is_mounted] = usePageLoaded() //needs to fix bug with hightlight of the 1st loading const [signal_subscriber, signal_provider] = [ @@ -107,7 +108,7 @@ const DMT5TradingSignals = () => { ] return ( - +
diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_dbanner.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_dbanner.tsx index 670975b699a..1df1d8f1877 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_dbanner.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_dbanner.tsx @@ -12,7 +12,7 @@ import { handleGetTrading } from 'components/custom/utils' import { TString } from 'types/generics' type DBannerProps = { - image_alt: TString + image_alt?: TString title: TString data?: string is_ppc?: boolean diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_flexibility.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_flexibility.tsx index b6edd84e299..c649d38f249 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_flexibility.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_flexibility.tsx @@ -8,8 +8,8 @@ import SwapFreeIcon from 'images/svg/dmt5/swap-free-platform.svg' import DerivedIcon from 'images/svg/dmt5/derived.svg' import CFDsIcon from 'images/svg/dmt5/cfds.svg' import device from 'themes/device' -import useRegion from 'components/hooks/use-region' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' type ContentType = { header: TString @@ -127,8 +127,8 @@ const StyledText = styled(Text)` ` const Flexibility = () => { - const { is_eu } = useRegion() - const chosen_content = is_eu ? eucontent : content + const { region } = useBuildVariant() + const chosen_content = region === "eu" ? eucontent : content return (
@@ -142,7 +142,7 @@ const Flexibility = () => { > { {chosen_content.map((item, idx) => { return ( - ((is_eu && item.show_eu) || - (!is_eu && !item.show_eu) || + ((region === "eu" && item.show_eu) || + (region !== "eu" && !item.show_eu) || item.show_always) && ( {item.icon} diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_interest_free_trading.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_interest_free_trading.tsx index 51b9e31cbaa..b9578d9cc3d 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_interest_free_trading.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_interest_free_trading.tsx @@ -4,11 +4,11 @@ import { Flex } from 'components/containers' import { CardStyle, Header, Text } from 'components/elements' import { LinkButton } from 'components/form' import { Localize, localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' import Checkmark from 'images/svg/dmt5/checkmark.svg' import ZeroPercent from 'images/svg/dmt5/zero_percent.svg' import device from 'themes/device' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' type CheckedTextProps = { content: TString @@ -152,8 +152,8 @@ const CheckedText = ({ content }: CheckedTextProps) => ( ) const InterestFreeTrading = () => { - const { is_eu } = useRegion() - const commission = is_eu + const { region } = useBuildVariant() + const commission = region === "eu" ? '_t_Enjoy zero commission trading on all assets._t_' : '_t_Enjoy zero commission trading on all assets. Plus, pay no swap charges on overnight positions for selected derived indices and financial assets._t_' diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_margin_calculator.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_margin_calculator.tsx index c1af16169ab..5d1822172ff 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_margin_calculator.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_margin_calculator.tsx @@ -6,9 +6,9 @@ import { Carousel, CarouselProps, Header, LinkText, QueryImage, Text } from 'com import { LinkButton } from 'components/form' import { Localize, localize } from 'components/localization' import device from 'themes/device' -import useRegion from 'components/hooks/use-region' import { useLangDirection } from 'components/hooks/use-lang-direction' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' type CalculatorProps = { children?: React.ReactNode @@ -193,8 +193,8 @@ const CalculatorCard = ({ name, text, }: CalculatorProps) => { + const { region } = useBuildVariant() const data = useStaticQuery(query) - const { is_eu } = useRegion() return ( @@ -207,14 +207,14 @@ const CalculatorCard = ({ { + const { region } = useBuildVariant() const lang_direction = useLangDirection() const settings: CarouselProps = { @@ -275,8 +276,6 @@ const MarginCalculator = () => { }, } - const { is_eu } = useRegion() - return ( @@ -286,7 +285,7 @@ const MarginCalculator = () => { - {is_eu && ( + {region === "eu" && ( { ]} /> )} - {!is_eu && ( + {region !== "eu" && ( { - const { is_eu } = useRegion() - const [contents, setContents] = useState(numbers_content) + const { region } = useBuildVariant() - useEffect(() => { - if (is_eu) setContents(numbers_content_eu) - }, [is_eu]) - - return + return } export default Numbers diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_other-platforms.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_other-platforms.tsx index 35fcf328eab..72158651269 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_other-platforms.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_other-platforms.tsx @@ -1,7 +1,6 @@ import React from 'react' import dxIcon from '../../images/svg/custom/rebranding/deriv-x-icon.svg' import dtIcon from '../../images/svg/custom/rebranding/dtrader-icon.svg' -import ezIcon from '../../images/svg/dmt5/ez-icon.svg' import dGoIcon from '../../images/svg/custom/rebranding/deriv-go-icon.svg' import dbIcon from '../../images/svg/dmt5/db-icon.svg' import GenericCarousel, { TRenderableData } from 'components/custom/carousel/_platforms-carousel' diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_start-trader.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_start-trader.tsx index dfaf6b83de3..b9372fa3189 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_start-trader.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_start-trader.tsx @@ -8,8 +8,8 @@ import { localize, Localize, LocalizedLink } from 'components/localization' import device from 'themes/device' import useHandleSignup from 'components/hooks/use-handle-signup' import useHandleLogin from 'components/hooks/use-handle-login' -import useRegion from 'components/hooks/use-region' import useBreakpoints from 'components/hooks/use-breakpoints' +import useBuildVariant from 'features/hooks/use-build-variant' type TabProps = { active?: boolean @@ -158,6 +158,7 @@ const StyledLocalizedLink = styled(LocalizedLink)<{ id?: string }>` ` const StartTrader = () => { + const { region } = useBuildVariant() const { is_mobile_or_tablet } = useBreakpoints() const data = useStaticQuery(query) @@ -170,7 +171,6 @@ const StartTrader = () => { const handleLogin = useHandleLogin() const handleSignup = useHandleSignup() - const { is_eu } = useRegion() const isDemo = tab === 'Demo' const isReal = tab === 'Real' @@ -370,8 +370,8 @@ const StartTrader = () => { [data, is_mobile_or_tablet, handleLogin], ) - const demo = is_eu ? eu_demo : row_demo - const real = is_eu ? eu_real : row_real + const demo = region === "eu" ? eu_demo : row_demo + const real = region === "eu" ? eu_real : row_real return (
diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/_why-trade-dmt5.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/_why-trade-dmt5.tsx index d7593c9e7cd..749538c0d0f 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/_why-trade-dmt5.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/_why-trade-dmt5.tsx @@ -7,10 +7,10 @@ import TwentyFourSeven from 'images/svg/dmt5/twenty-four-seven.svg' import SwapFree from 'images/svg/dmt5/swap-free-icon.svg' import { Localize } from 'components/localization' import { Header } from 'components/elements' -import useRegion from 'components/hooks/use-region' import { Flex, SectionContainer } from 'components/containers' import device from 'themes/device' import BoxStyledFlex, { TItem } from 'components/custom/_box-styled-flex' +import useBuildVariant from 'features/hooks/use-build-variant' const card_data: TItem[] = [ { @@ -78,7 +78,8 @@ const StyledHeader = styled(Header)` ` const WhyTrader = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() + return (
@@ -86,8 +87,8 @@ const WhyTrader = () => {
diff --git a/themes/gatsby-theme-deriv/src/pages/dmt5/index.tsx b/themes/gatsby-theme-deriv/src/pages/dmt5/index.tsx index 482196edb75..c2ef19ceb5f 100644 --- a/themes/gatsby-theme-deriv/src/pages/dmt5/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/dmt5/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { WhyTrader, StartTrader, @@ -14,7 +14,6 @@ import DHero from 'components/custom/_dhero-dmt5' import Layout from 'components/layout/layout' import { SEO, TMetaAttributes } from 'components/containers' import { WithIntl } from 'components/localization' -import useRegion from 'components/hooks/use-region' import { TGatsbyHead } from 'features/types' const meta_attributes: TMetaAttributes = { @@ -23,32 +22,23 @@ const meta_attributes: TMetaAttributes = { '_t_DMT5 is developed to give you the best CFD trading experience. You can access our MT5 trader through desktop and even mobile._t_', } -const DMT5 = () => { - const { is_row } = useRegion() - const [is_loaded, setLoaded] = useState(false) +const DMT5 = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext - useEffect(() => { - setLoaded(true) - }, []) - - if (is_loaded) { - return ( - - - - - - - - - - - {is_row && } - - ) - } - - return + return ( + + + + + + + + + + + {region === "row" && } + + ) } export default WithIntl()(DMT5) diff --git a/themes/gatsby-theme-deriv/src/pages/dtrader/_our-platforms.tsx b/themes/gatsby-theme-deriv/src/pages/dtrader/_our-platforms.tsx index bf172a0a179..0c61f828bb7 100644 --- 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 index 523a398b0af..e29705bf936 100644 --- 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['items'] = useMemo( @@ -87,7 +76,7 @@ const DtraderEasySteps = () => { title: () => '_t_Select an asset_t_', image: () => ( ), @@ -96,7 +85,7 @@ const DtraderEasySteps = () => { title: () => '_t_Monitor the chart_t_', image: () => ( ), @@ -105,13 +94,13 @@ const DtraderEasySteps = () => { title: () => '_t_Place a trade_t_', image: () => ( ), }, ], - [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 index b139b46b4bb..6a7e8cd0600 100644 --- 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 ( - - - {is_row && } - {is_eu && } - - - {is_row && } - {is_eu && } - - - {is_row && } - - ) - } - - return + return ( + + + + + + + {region === "row" && } + + ) } export default WithIntl()(Dtrader) diff --git a/themes/gatsby-theme-deriv/src/pages/endpoint/index.tsx b/themes/gatsby-theme-deriv/src/pages/endpoint/index.tsx index 158d2285fa2..f0228bad2bf 100644 --- a/themes/gatsby-theme-deriv/src/pages/endpoint/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/endpoint/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { Form, Formik } from 'formik' import device from 'themes/device' @@ -95,10 +95,11 @@ const endpointValidation = (values: ValuesType) => { return errors } -const Endpoint = () => { +const Endpoint = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [server_url, setServerUrl] = useLocalStorageState(default_server_url, 'config.server_url') const [app_id, setAppId] = useLocalStorageState(getAppId(), 'config.app_id') - const [reset_loading, setResetLoading] = React.useState(false) + const [reset_loading, setResetLoading] = useState(false) const { website_status, setWebsiteStatus } = useWebsiteStatus() const STATUS_TIMEOUT_DELAY = 1500 const RESET_TIMEOUT_DELAY = 500 @@ -141,7 +142,7 @@ const Endpoint = () => { } return ( - +
Change API endpoint diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_answer-card.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_answer-card.tsx index 075b9c4486f..45bf83832ca 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_answer-card.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_answer-card.tsx @@ -1,17 +1,15 @@ import React, { ReactNode } from 'react' import styled from 'styled-components' -import { isMobile } from 'react-device-detect' import { TAnswer } from '../data/_data-types' import ImageCard from './_image-card' import TranslationComponents from './_translation-components' import List from './_list' -import { Container, Flex } from 'components/containers' import device from 'themes/device' import { Header } from 'components/elements' import { Localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' import { TString } from 'types/generics' import useBreakpoints from 'components/hooks/use-breakpoints' +import useBuildVariant from 'features/hooks/use-build-variant' type AnswerCardType = { label: string @@ -38,7 +36,7 @@ export const Wrapper = styled.div` ` const AnswerCard = ({ question, answer, renderProp, margin, flex }: AnswerCardType) => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const { is_mobile } = useBreakpoints() return ( @@ -59,7 +57,7 @@ const AnswerCard = ({ question, answer, renderProp, margin, flex }: AnswerCardTy size, }) => { const text = - is_eu && eu_translation_text ? eu_translation_text : translation_text + region === "eu" && eu_translation_text ? eu_translation_text : translation_text const component = translation_components && TranslationComponents(translation_components) diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_derived.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_derived.tsx index eb56afe98ef..bc24ec39792 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_derived.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_derived.tsx @@ -2,11 +2,11 @@ import React from 'react' import TranslationComponents from './_translation-components' import { Header } from 'components/elements' import { Localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const Derived = () => { - const { is_row, is_eu } = useRegion() - const first_paragraph = is_eu + const { region } = useBuildVariant() + const first_paragraph = region === "eu" ? '_t_Derived in the EU consist of synthetic indices whose prices are generated using a random number generator with no influence from real-world events._t_' : '_t_Derived indices consist of asset prices generated from real-world and simulated markets and indices, with little to no influence from real-world events. You can trade from a variety of derived indices, including synthetic indices, derived FX indices, and baskets._t_' @@ -17,10 +17,10 @@ const Derived = () => {
- {is_eu && ( + {region === "eu" && ( )} - {is_row && ( + {region === "row" && ( { /> )}
- {is_row && ( + {region === "row" && ( <>
diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_list.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_list.tsx index 226969dfbb8..c22ad7b58c5 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_list.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_list.tsx @@ -4,7 +4,7 @@ import { TListStyle, TList } from '../data/_data-types' import ImageCard from './_image-card' import TranslationComponents from './_translation-components' import { Localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' type TStyledList = { list_style: TListStyle @@ -41,7 +41,8 @@ const List = ({ items, size, }: TList) => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() + return ( {items.map( @@ -53,7 +54,7 @@ const List = ({ img, }) => { const text = - is_eu && eu_translation_text !== undefined + region === "eu" && eu_translation_text !== undefined ? eu_translation_text : translation_text return ( diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-section.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-section.tsx index 2ef7ccce0eb..53b6a27fbf1 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-section.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-section.tsx @@ -7,7 +7,6 @@ import { Header } from 'components/elements' import device from 'themes/device' import { Localize } from 'components/localization' import { TString } from 'types/generics' -import { usePageLoaded } from 'components/hooks/use-page-loaded' type TQuestionsSection = { data: TQuestionsData[] @@ -59,9 +58,6 @@ const Wrapper = styled.div` const QuestionsSection = ({ data, section_name }: TQuestionsSection) => { const filtered_data = useFilteredCategory(data) - const [is_mounted] = usePageLoaded() - - if (!is_mounted) return null return (
diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-template.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-template.tsx index c08ba62323f..c9ecc8572d6 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-template.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/components/_questions-template.tsx @@ -7,14 +7,14 @@ import AnswerCard from './_answer-card' import { Community, DidntFindYourAnswerBanner } from './_lazy-load' import Layout from 'components/layout/layout' import { Localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' import { StyledLink } from 'components/elements' import { Container } from 'components/containers' import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param' import { useIsRtl } from 'components/hooks/use-isrtl' import { usePageLoaded } from 'components/hooks/use-page-loaded' +import { BuildVariantType } from 'features/types' -type TQuestionsTemplate = { +type TQuestionsTemplate = BuildVariantType & { data: TQuestionsData } @@ -22,13 +22,12 @@ const ContactContainer = styled.div` margin-top: 4rem; ` -const QuestionsTemplate = ({ data }: TQuestionsTemplate) => { +const QuestionsTemplate = ({ data, region }: TQuestionsTemplate) => { const { platform, has_platform } = usePlatformQueryParam() const is_rtl = useIsRtl() const { questions, category } = data const filtered_questions = useFilteredQuestions(questions) const { is_deriv_go } = usePlatformQueryParam() - const { is_eu } = useRegion() const [is_mounted] = usePageLoaded() React.useEffect(() => { @@ -38,7 +37,7 @@ const QuestionsTemplate = ({ data }: TQuestionsTemplate) => { if (!is_mounted) return null return ( - + { { - const { is_eu } = useRegion() + const { region } = useBuildVariant() return data.filter(({ hide_for_eu, hide_for_non_eu }) => - is_eu ? !hide_for_eu : !hide_for_non_eu, + region === "eu" ? !hide_for_eu : !hide_for_non_eu, ) } export const useFilteredCategory = (data: TQuestionsData[]) => { - const { is_eu, is_p2p_allowed_country } = useRegion() - const hide_eu_data = data.filter((item) => (is_eu ? !item.hide_for_eu : item)) + const { region } = useBuildVariant() + const { is_p2p_allowed_country } = useRegion() + const hide_eu_data = data.filter((item) => (region === "eu" ? !item.hide_for_eu : item)) return hide_eu_data.filter((item) => (!is_p2p_allowed_country ? !item.hide_non_p2p : item)) } diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-bot.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-bot.tsx index af661c20c28..79e73e6edaa 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-bot.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-bot.tsx @@ -4,17 +4,16 @@ import dbot from './data/_dbot' import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -import useRegion from 'components/hooks/use-region' import ProtectedRoute from 'features/components/molecules/protected-route' -const DBot = () => { - const { is_eu, is_region_loading } = useRegion() +const DBot = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-p2p.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-p2p.tsx index 2411f0215a0..669735fbae3 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-p2p.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-p2p.tsx @@ -5,16 +5,15 @@ import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' -const DerivP2P = () => { - const { is_eu, is_region_loading } = useRegion() +const DerivP2P = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + is_page_visible={region !== "eu"} + region={region} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-x.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-x.tsx index e98c48ae816..50c66dc1376 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-x.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/deriv-x.tsx @@ -4,17 +4,16 @@ import derivx from './data/_deriv-x' import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -import useRegion from 'components/hooks/use-region' import ProtectedRoute from 'features/components/molecules/protected-route' -const DerivX = () => { - const { is_eu, is_region_loading } = useRegion() +const DerivX = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + is_page_visible={region !== "eu"} + region={region} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/help-centre/index.tsx b/themes/gatsby-theme-deriv/src/pages/help-centre/index.tsx index d9669c1d59a..8cde5e99f56 100644 --- a/themes/gatsby-theme-deriv/src/pages/help-centre/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/help-centre/index.tsx @@ -11,13 +11,14 @@ import { WithIntl } from 'components/localization' import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param' import { TGatsbyHead } from 'features/types' -const HelpCentre = () => { +const HelpCentre = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const { is_deriv_go } = usePlatformQueryParam() const general_questions = getQuestionsBySection(GENERAL) const platforms_questions = getQuestionsBySection(PLATFORMS) return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/home/_hero.tsx b/themes/gatsby-theme-deriv/src/pages/home/_hero.tsx index 03336a39b8e..6edfe990bdf 100644 --- a/themes/gatsby-theme-deriv/src/pages/home/_hero.tsx +++ b/themes/gatsby-theme-deriv/src/pages/home/_hero.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import styled from 'styled-components' import { StaticImage } from 'gatsby-plugin-image' import VerticalCarousel from './_vertical-carousel' @@ -14,6 +14,7 @@ import { Localize, localize } from 'components/localization' import useHandleSignup from 'components/hooks/use-handle-signup' import { TString } from 'types/generics' import { handleGetTrading } from 'components/custom/utils' +import useBuildVariant from 'features/hooks/use-build-variant' type HeroProps = { is_ppc?: boolean @@ -65,14 +66,10 @@ const HeroHeader = ({ text }: { text: TString }) => { } const Hero = ({ is_ppc }: HeroProps) => { - const { is_region_loading, is_eu } = useRegion() + const { region } = useBuildVariant() + const { is_region_loading } = useRegion() const [is_logged_in, is_auth_checked] = useAuthCheck() const handleSignup = useHandleSignup() - const [show_eu_content, setShowEuContent] = useState(false) - - useEffect(() => { - if (is_eu) setShowEuContent(true) - }, [is_eu]) return ( @@ -139,10 +136,10 @@ const Hero = ({ is_ppc }: HeroProps) => { min_height="auto" weight="normal" > - {show_eu_content && ( + {region === "eu" && ( )} - {!show_eu_content && ( + {region !== "eu" && ( )}
diff --git a/themes/gatsby-theme-deriv/src/pages/home/_platform-slideshow.tsx b/themes/gatsby-theme-deriv/src/pages/home/_platform-slideshow.tsx index 1f8cecfc0e8..9f43e274ce4 100644 --- a/themes/gatsby-theme-deriv/src/pages/home/_platform-slideshow.tsx +++ b/themes/gatsby-theme-deriv/src/pages/home/_platform-slideshow.tsx @@ -2,17 +2,7 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react' import styled from 'styled-components' import { eu_images, row_images } from './_data' import { Flex } from 'components/containers' -import device from 'themes/device' -import useRegion from 'components/hooks/use-region' - -const ImagePlaceHolder = styled.div` - width: 690px; - - @media ${device.tablet} { - width: 100%; - height: 360px; - } -` +import useBuildVariant from 'features/hooks/use-build-variant' const ImageWrapper = styled.div<{ $is_hidden: boolean }>` opacity: ${({ $is_hidden }) => ($is_hidden ? '0' : '1')}; @@ -35,13 +25,9 @@ const SlideContainer = styled(Flex)` ` const PlatformSlideshow = () => { + const { region } = useBuildVariant() const [active_index, setActiveIndex] = useState(0) - const { is_eu, is_region_loading } = useRegion() - const [slide_images, setSlideImages] = useState(row_images) - - useEffect(() => { - if (is_eu) setSlideImages(eu_images) - }, [is_eu]) + const slide_images = region === "row" ? row_images : eu_images const intervalRef = useRef(null) @@ -61,10 +47,6 @@ const PlatformSlideshow = () => { return () => clearInterval(intervalRef.current) }, [slide_images]) - if (is_region_loading) { - return - } - return ( { - const { is_non_eu } = useRegion() + const { region } = useBuildVariant() const data = useStaticQuery(query) // one option always has to be selected const [selected, setSelected] = useState(null) - const [show_non_eu_content, setShowNonEuContent] = useState(true) - - useEffect(() => { - if (!is_non_eu) setShowNonEuContent(false) - }, [is_non_eu]) return ( @@ -108,7 +103,7 @@ const Trade = ({ is_ppc_redirect }: TradeProps) => { >
- {show_non_eu_content && ( + {region !== "eu" && (
setSelected(platforms.bot)} onMouseLeave={() => setSelected('')} diff --git a/themes/gatsby-theme-deriv/src/pages/home/_what-our-clients-say.tsx b/themes/gatsby-theme-deriv/src/pages/home/_what-our-clients-say.tsx index 87978821218..255b7bb0e19 100644 --- a/themes/gatsby-theme-deriv/src/pages/home/_what-our-clients-say.tsx +++ b/themes/gatsby-theme-deriv/src/pages/home/_what-our-clients-say.tsx @@ -6,8 +6,8 @@ import { Localize } from 'components/localization' import { Container, Flex } from 'components/containers' import device from 'themes/device' import Quote from 'images/svg/testimonials/quote.svg' -import useRegion from 'components/hooks/use-region' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' declare global { interface Window { @@ -223,7 +223,7 @@ const ClientSlide = ({ quote, name }: ClientSideProps) => ( ) const WhatOurClientsSay = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const ref = useRef() useEffect(() => { @@ -294,7 +294,7 @@ const WhatOurClientsSay = () => { > {( - (is_eu && filtered_testimonial(unavailable_testimonial_eu)) || + (region === "eu" && filtered_testimonial(unavailable_testimonial_eu)) || testimonial_slides ).map(({ name, quote }) => ( diff --git a/themes/gatsby-theme-deriv/src/pages/landing/dmt5/index.tsx b/themes/gatsby-theme-deriv/src/pages/landing/dmt5/index.tsx index b94c65eef03..86012439a05 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/dmt5/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/dmt5/index.tsx @@ -24,7 +24,8 @@ const query = graphql` } ` -const DMT5 = () => { +const DMT5 = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [is_mobile, setMobile] = useState(false) useEffect(() => { @@ -40,7 +41,7 @@ const DMT5 = () => { const data = useStaticQuery(query) return ( - + { - const [is_checked, setChecked] = React.useState(false) - const [email, setEmail] = React.useState('') - const [is_submitting, setIsSubmitting] = React.useState(false) - const [submit_status, setSubmitStatus] = React.useState('') - const [email_error_msg, setEmailErrorMsg] = React.useState('') - const [submit_error_msg, setSubmitErrorMsg] = React.useState('') - const { is_eu } = useRegion() + const [is_checked, setChecked] = useState(false) + const [email, setEmail] = useState('') + const [is_submitting, setIsSubmitting] = useState(false) + const [submit_status, setSubmitStatus] = useState('') + const [email_error_msg, setEmailErrorMsg] = useState('') + const [submit_error_msg, setSubmitErrorMsg] = useState('') + const { region } = useBuildVariant() const handleChange = (event) => { setChecked(event.currentTarget.checked) @@ -271,7 +271,7 @@ const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }: Ge }) } - const security_pdf_link = `/tnc${is_eu ? '/eu' : ''}/security-and-privacy.pdf` + const security_pdf_link = `/tnc${region === "eu" ? '/eu' : ''}/security-and-privacy.pdf` return submit_status === 'success' ? ( diff --git a/themes/gatsby-theme-deriv/src/pages/landing/ebooks/crypto.tsx b/themes/gatsby-theme-deriv/src/pages/landing/ebooks/crypto.tsx index 52a3154b34c..012b5024229 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/ebooks/crypto.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/ebooks/crypto.tsx @@ -51,13 +51,14 @@ const query = graphql` } ` -const StocksEbook = ({ language }: StocksEbookProps) => { +const StocksEbook = ({ language, pageContext }: StocksEbookProps) => { + const { region } = pageContext const ebook_languages = ['es', 'fr', 'pt'] const ebook_image = ebook_languages.includes(language) ? `_${language}` : '' const data = useStaticQuery(query) return ( - + { - const { language } = props +const ForexEbook = ({language, pageContext}: StocksEbookProps) => { + const { region } = pageContext let lng = language if (lng != 'es') { lng = 'en' @@ -58,7 +58,7 @@ const ForexEbook = (props: StocksEbookProps) => { const data = useStaticQuery(query) return ( - + { +const StocksEbook = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const data = useStaticQuery(query) return ( - + { +const ForexTrading = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [is_mounted] = usePageLoaded() // needed to fix the second Hero-component during page's loading return ( - + {is_mounted && ( <> { +const Home = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/landing/jump-indices/index.tsx b/themes/gatsby-theme-deriv/src/pages/landing/jump-indices/index.tsx index 3a99973de6a..f5580d32634 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/jump-indices/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/jump-indices/index.tsx @@ -8,9 +8,10 @@ import Layout from 'components/layout/layout' import { WithIntl } from 'components/localization' import { TGatsbyHead } from 'features/types' -const JumpIndices = () => { +const JumpIndices = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/landing/signup/index.tsx b/themes/gatsby-theme-deriv/src/pages/landing/signup/index.tsx index d7351324506..c73fb618071 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/signup/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/signup/index.tsx @@ -55,7 +55,8 @@ const StyledGraph = styled.img` } ` -const NewSignup = () => { +const NewSignup = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [submit_state, setSubmitState] = useState('') const [email, setEmail] = useState('') @@ -68,7 +69,7 @@ const NewSignup = () => { } return ( - + {submit_state !== 'success' && ( diff --git a/themes/gatsby-theme-deriv/src/pages/landing/stocks/_footerBanner.tsx b/themes/gatsby-theme-deriv/src/pages/landing/stocks/_footerBanner.tsx index e2a053a81fe..de10a2f3b1d 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/stocks/_footerBanner.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/stocks/_footerBanner.tsx @@ -5,9 +5,9 @@ import { Container, Flex } from 'components/containers' import { Header, QueryImage } from 'components/elements' import { LinkButton } from 'components/form' import { Localize, localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' import device from 'themes/device' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' const BannerWrapper = styled(Flex)` overflow: hidden; @@ -154,8 +154,8 @@ const FooterBanner = ({ small_title, title, }: FooterBannerProps) => { - const { is_eu } = useRegion() - const stocks_display = is_eu ? 'stocks_banner_eu' : 'stocks_banner' + const { region } = useBuildVariant() + const stocks_display = region === "eu" ? 'stocks_banner_eu' : 'stocks_banner' return ( diff --git a/themes/gatsby-theme-deriv/src/pages/landing/stocks/index.tsx b/themes/gatsby-theme-deriv/src/pages/landing/stocks/index.tsx index 480b4fde1e2..9cc6dd9ce08 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/stocks/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/stocks/index.tsx @@ -6,7 +6,6 @@ import Layout from 'components/layout/layout' import { Desktop, Mobile, SEO } from 'components/containers' import { WithIntl } from 'components/localization' import { size } from 'themes/device' -import useRegion from 'components/hooks/use-region' import { isBrowser } from 'common/utility' import ExtendedTimeSVG from 'images/svg/stock-indices/stocks-extended-time.svg' import NoCommisionSVG from 'images/svg/stock-indices/stocks-no-commission.svg' @@ -132,9 +131,9 @@ const blueChips: ContentType[] = [ }, ] -const Stocks = () => { +const Stocks = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [is_mobile, setMobile] = useState(false) - const { is_row } = useRegion() const handleResizeWindow = () => { setMobile(isBrowser() ? window.screen.width <= size.mobileL : false) @@ -146,10 +145,10 @@ const Stocks = () => { }, []) const data = useStaticQuery(query) - const display_items = is_row ? WhyTradeWithUsArr : WhyTradeWithUsArr_eu + const display_items = region === "row" ? WhyTradeWithUsArr : WhyTradeWithUsArr_eu return ( - + @@ -167,7 +166,7 @@ const Stocks = () => { background_pattern={is_mobile ? '' : BackgroundFooterStocksPattern} title="_t_All this is available on our Deriv MT5 platform_t_" small_title={ - is_row + region === "row" ? '_t_Enjoy high leverage and low spreads on our Deriv MT5 platform, now offering a range of stocks and stock indices from the brands you love._t_' : '_t_Enjoy low spreads on our Deriv MT5 platform, now offering a range of stocks and stock indices from the brands you love._t_' } diff --git a/themes/gatsby-theme-deriv/src/pages/landing/trade-forex/index.tsx b/themes/gatsby-theme-deriv/src/pages/landing/trade-forex/index.tsx index 643002ef47e..d3e6df08ceb 100644 --- a/themes/gatsby-theme-deriv/src/pages/landing/trade-forex/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/landing/trade-forex/index.tsx @@ -13,11 +13,12 @@ import { TGatsbyHead } from 'features/types' const IconTextRow = Loadable(() => import('./components/_icon-text-row')) -const TradeForex = () => { +const TradeForex = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [is_mounted] = usePageLoaded() // needed to fix the second Hero-component during page's loading return ( - + {is_mounted && ( <> { +const WeekenLP = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/markets/components/sections/_other-markets.tsx b/themes/gatsby-theme-deriv/src/pages/markets/components/sections/_other-markets.tsx index 106c4149897..05c43f72649 100644 --- a/themes/gatsby-theme-deriv/src/pages/markets/components/sections/_other-markets.tsx +++ b/themes/gatsby-theme-deriv/src/pages/markets/components/sections/_other-markets.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { Flex, Desktop, Mobile } from 'components/containers' import { Carousel, CarouselProps, Header, ImageWithDireciton, Text } from 'components/elements' @@ -10,10 +10,10 @@ import Cryptocurrencies from 'images/svg/markets/cryptocurrencies.svg' import Forex from 'images/svg/markets/forex-new.svg' import StockIndices from 'images/svg/markets/stock-new.svg' import DerivedFX from 'images/svg/markets/derived-fx.svg' -import useRegion from 'components/hooks/use-region' import device from 'themes/device' import { useLangDirection } from 'components/hooks/use-lang-direction' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' type MarketType = { id: string @@ -239,9 +239,9 @@ const StyledCarousel = styled.div` ` const Card = ({ market }: CardProps) => { - const [button_visibility, setButtonVisibility] = React.useState('false') + const [button_visibility, setButtonVisibility] = useState('false') const Icon = markets_type[market].icon - const { is_eu } = useRegion() + const { region } = useBuildVariant() return ( { @@ -304,7 +304,7 @@ const MobileCard = ({ market }: CardProps) => { } const OtherMarkets = ({ except }: OtherMarketsProps) => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const markets = ['', 'forex', 'derived', 'stock_indices', 'cryptocurrencies', 'commodities', ''] const eu_markets = [ '', @@ -316,7 +316,7 @@ const OtherMarkets = ({ except }: OtherMarketsProps) => { '', ] - const filteredMarkets = (is_eu ? eu_markets : markets).filter((market) => market !== except) + const filteredMarkets = (region === "eu" ? eu_markets : markets).filter((market) => market !== except) const lang_direction = useLangDirection() const settings: CarouselProps = { diff --git a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom-multipliers.tsx b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom-multipliers.tsx index f5c11151221..c6602fb5095 100644 --- a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom-multipliers.tsx +++ b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom-multipliers.tsx @@ -1,14 +1,14 @@ import React from 'react' import Symbol from '../components/helper/_symbol' import { crash_boom_multipliers, crash_boom_trade_type_eu } from '../static/content/_market-symbols' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const CrashBoomMultipliers = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() return ( <> - {is_eu ? ( + {region === "eu" ? ( <> {crash_boom_trade_type_eu.map((symbol, index) => ( diff --git a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom.tsx b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom.tsx index fb4e3aa0432..27dd9222e24 100644 --- a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom.tsx +++ b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_crash-boom.tsx @@ -1,26 +1,21 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import Symbol from '../components/helper/_symbol' import { crash_boom, crash_boom_ctrader, crash_boom_trade_type_eu, } from '../static/content/_market-symbols' -import useRegion from 'components/hooks/use-region' import { Localize } from 'components/localization' import Typography from 'features/components/atoms/typography' import dclsx from 'features/utils/dclsx' +import useBuildVariant from 'features/hooks/use-build-variant' const CrashBoom = () => { - const { is_eu } = useRegion() - const [show_eu_content, setShowEuContent] = useState(false) - - useEffect(() => { - if (is_eu) setShowEuContent(true) - }, [is_eu]) + const { region } = useBuildVariant() return ( <> - {show_eu_content ? ( + {region === "eu" ? ( <> {crash_boom_trade_type_eu.map((symbol, index) => ( diff --git a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_markets.tsx b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_markets.tsx index fbcc4360957..310859a1b6e 100644 --- a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_markets.tsx +++ b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_markets.tsx @@ -30,7 +30,7 @@ import { volatility_indices, volatility_indices_trade_type_eu, } from './_market-symbols' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' export const AmericanIndices = () => @@ -47,13 +47,13 @@ export const ContinuousIndices = () => export const CrashBoomMultipliers = () => { - const { is_eu } = useRegion() - return + const { region } = useBuildVariant() + return } export const CrashBoom = () => { - const { is_eu } = useRegion() - return + const { region } = useBuildVariant() + return } export const CryptocurrenciesCFDs = () => { @@ -83,8 +83,8 @@ export const JumpIndices = () => export const MajorPairs = () => export const MetalsOptions = () => { - const { is_row } = useRegion() - return is_row ? : <> + const { region } = useBuildVariant() + return region === "row" ? : <> } export const MicroPairs = () => @@ -98,8 +98,8 @@ export const SwapFreePairs = () => export const VolatilityIndicesEU = () => export const VolatilityIndices = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() return ( - + ) } diff --git a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_volatility-indices.tsx b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_volatility-indices.tsx index 68f2b06fb37..9ab3c7aad64 100644 --- a/themes/gatsby-theme-deriv/src/pages/markets/instruments/_volatility-indices.tsx +++ b/themes/gatsby-theme-deriv/src/pages/markets/instruments/_volatility-indices.tsx @@ -1,26 +1,21 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import Symbol from '../components/helper/_symbol' import { volatility_indices, volatility_indices_c_trader, volatility_indices_trade_type_eu, } from '../static/content/_market-symbols' -import useRegion from 'components/hooks/use-region' import { Localize } from 'components/localization' import Typography from 'features/components/atoms/typography' import dclsx from 'features/utils/dclsx' +import useBuildVariant from 'features/hooks/use-build-variant' const VolatilityIndices = () => { - const { is_eu } = useRegion() - const [show_eu_content, setShowEuContent] = useState(false) - - useEffect(() => { - if (is_eu) setShowEuContent(true) - }, [is_eu]) + const { region } = useBuildVariant() return ( <> - {show_eu_content ? ( + {region === "eu" ? ( <> {volatility_indices_trade_type_eu.map((symbol, index) => ( diff --git a/themes/gatsby-theme-deriv/src/pages/partners/_partnership-opportunities.tsx b/themes/gatsby-theme-deriv/src/pages/partners/_partnership-opportunities.tsx index 655e9d44c6e..66ba02dda7f 100644 --- a/themes/gatsby-theme-deriv/src/pages/partners/_partnership-opportunities.tsx +++ b/themes/gatsby-theme-deriv/src/pages/partners/_partnership-opportunities.tsx @@ -10,7 +10,6 @@ import { ReactComponent as PartnerPaymentAgent } from 'images/svg/partners/partn import { ReactComponent as DeveloperProgramme } from 'images/svg/partners/developer-programme.svg' import { ReactComponent as PartnerDerivPrime } from 'images/svg/partners/deriv-prime.svg' import device from 'themes/device' -import useRegion from 'components/hooks/use-region' import useBuildVariant from 'features/hooks/use-build-variant' type ClientCardProps = { diff --git a/themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/_faq-data.tsx b/themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/_faq-data.tsx index 251126926b3..f0a0809e8ce 100644 --- a/themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/_faq-data.tsx +++ b/themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/_faq-data.tsx @@ -4,8 +4,8 @@ import { Localize, LocalizedLink } from 'components/localization' import { Header, LinkText, LiveChatLinkText, Text } from 'components/elements' import { affiliate_reset_password_link, deriv_api_url } from 'common/constants' import { isBrowser } from 'common/utility' -import useRegion from 'components/hooks/use-region' import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link' +import useBuildVariant from 'features/hooks/use-build-variant' type StyledLinkProps = { href: string @@ -46,7 +46,7 @@ const LocalizedLinkText = styled((props) => )` ` const AffiliateGeneral = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const { affiliate_signup_link } = useAffiliateSignupLink() return ( @@ -54,7 +54,7 @@ const AffiliateGeneral = () => {
- {is_eu ? ( + {region === "eu" ? ( <>
@@ -104,7 +104,7 @@ const AffiliateGeneral = () => {
- {!is_eu && ( + {region !== "eu" && (
  • @@ -135,7 +135,7 @@ const AffiliateGeneral = () => {
    - {is_eu ? ( + {region === "eu" ? (
    @@ -145,7 +145,7 @@ const AffiliateGeneral = () => {
    )} - {!is_eu && ( + {region !== "eu" && ( <>
  • @@ -165,7 +165,7 @@ const AffiliateGeneral = () => {
    • - {is_eu ? ( + {region === "eu" ? (
    {
    - {is_eu ? ( + {region === "eu" ? (
    diff --git a/themes/gatsby-theme-deriv/src/pages/payment-methods/index.tsx b/themes/gatsby-theme-deriv/src/pages/payment-methods/index.tsx index f0f8ef02d26..0feffdd7c00 100644 --- a/themes/gatsby-theme-deriv/src/pages/payment-methods/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/payment-methods/index.tsx @@ -15,6 +15,7 @@ import useWS from 'components/hooks/useWS' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { TGatsbyHead } from 'features/types' +import useBuildVariant from 'features/hooks/use-build-variant' const ExpandList = Loadable(() => import('./_expanded-list')) @@ -123,7 +124,8 @@ export type PaymentMethodsProps = { pd?: PaymentDataProps } const DisplayAccordion = ({ locale }: PaymentMethodsProps) => { - const { is_p2p_allowed_country, is_eu, is_region_loading } = useRegion() + const {region} = useBuildVariant() + const { is_p2p_allowed_country, is_region_loading } = useRegion() const [is_mobile] = useBrowserResize(992) const { data, send } = useWS('crypto_config') const [payment_method_data, setPaymentMethodData] = useState(payment_data) @@ -136,7 +138,7 @@ const DisplayAccordion = ({ locale }: PaymentMethodsProps) => { useEffect(() => { // First we check if the `data` exists or not, Then we manipulate the local data with the response from the server. - if (is_eu) { + if (region === "eu") { setPaymentMethodData( payment_method_data.filter((payment_method) => payment_method.is_eu), ) @@ -163,7 +165,7 @@ const DisplayAccordion = ({ locale }: PaymentMethodsProps) => { setPaymentMethodData(updated_payment_data) } } - }, [data, is_eu]) + }, [data, region]) const content_style = { background: 'var(--color-white)', @@ -202,16 +204,16 @@ const DisplayAccordion = ({ locale }: PaymentMethodsProps) => { paddingBottom: pdata.note ? '5rem' : '3.8rem', boxShadow: 'rgba(195, 195, 195, 0.31) 0px 20px 15px 0px', } - if (pdata.is_row && is_eu) { + if (pdata.is_row && region === "eu") { return [] } - if (pdata.is_eu && !is_eu) { + if (pdata.is_eu && region !== "eu") { return [] } - if (pdata.is_crypto && is_eu) { + if (pdata.is_crypto && region === "eu") { return [] } - if (pdata.is_fiat_onramp && is_eu) { + if (pdata.is_fiat_onramp && region === "eu") { return [] } else if (pdata.is_dp2p && !is_p2p_allowed_country) { return null @@ -439,10 +441,12 @@ const PaymentMethodSection = ({ locale }: PaymentMethodsProps) => { ) } -const PaymentMethods = () => { +const PaymentMethods = ({ pageContext }: TGatsbyHead) => { const { is_p2p_allowed_country } = useRegion() + const { region } = pageContext + return ( - + { - const { is_eu, is_non_eu } = useRegion() + const {region} = useBuildVariant(); const [is_livechat_interactive, LC_API] = useLivechat() return ( <> {is_livechat_interactive && (
    - {is_eu && ( + {region === "eu" && ( { /> )} - {is_non_eu && ( + {region !== "eu" && ( { +const ResetPassword = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [apiError, setApiError] = useState('') const initialValues: EmailType = { email: '' } @@ -88,7 +89,7 @@ const ResetPassword = () => { } return ( - +
    diff --git a/themes/gatsby-theme-deriv/src/pages/responsible/_trading-limits.tsx b/themes/gatsby-theme-deriv/src/pages/responsible/_trading-limits.tsx index 759d10a0b55..0878ae8bbcf 100644 --- a/themes/gatsby-theme-deriv/src/pages/responsible/_trading-limits.tsx +++ b/themes/gatsby-theme-deriv/src/pages/responsible/_trading-limits.tsx @@ -5,7 +5,7 @@ import { Header, LocalizedLinkText, Text } from 'components/elements' import { Localize } from 'components/localization' import { TimelineTick } from 'components/elements/timeline' import device from 'themes/device' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const ContentWrapper = styled(Flex)` justify-content: center; @@ -79,7 +79,7 @@ const StyledSubHeader = styled(Header)` ` const TradingLimits = () => { - const { is_non_eu, is_eu } = useRegion() + const { region } = useBuildVariant() return ( @@ -146,7 +146,7 @@ const TradingLimits = () => {
    - {is_non_eu && ( + {region !== "eu" && ( @@ -161,7 +161,7 @@ const TradingLimits = () => { )} - {is_eu && ( + {region === "eu" && ( @@ -199,7 +199,7 @@ const TradingLimits = () => { )}
    - {is_non_eu && ( + {region !== "eu" && ( { - const { is_eu, is_non_eu } = useRegion() + const { region } = useBuildVariant() return ( @@ -143,16 +143,16 @@ const TradingResponsibly = () => { {localize('_t_Trade - {is_eu && ( + {region === "eu" && ( )} - {is_non_eu && ( + {region !== "eu" && ( )} - {is_eu && ( + {region === "eu" && ( import('./_trading-responsibly')) const TradingLimits = Loadable(() => import('./_trading-limits')) @@ -33,13 +32,13 @@ const StyledHeader = styled(Header)` } ` -const ResponsibleTrading = () => { - const show_eu_content = useShowEuContent() +const ResponsibleTrading = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - +
    - + { - {show_eu_content && ( + {region === "eu" && ( )} - {!show_eu_content && ( + {region !== "eu" && ( )} diff --git a/themes/gatsby-theme-deriv/src/pages/signup-affiliates/components/_account-plan.tsx b/themes/gatsby-theme-deriv/src/pages/signup-affiliates/components/_account-plan.tsx index 0d682ded58a..310b2e6d399 100644 --- a/themes/gatsby-theme-deriv/src/pages/signup-affiliates/components/_account-plan.tsx +++ b/themes/gatsby-theme-deriv/src/pages/signup-affiliates/components/_account-plan.tsx @@ -8,6 +8,7 @@ import useRegion from 'components/hooks/use-region' import Revenue from 'images/svg/signup-affiliates/revenue.svg' import Turnover from 'images/svg/signup-affiliates/turnover.svg' import CPA from 'images/svg/signup-affiliates/cpa.svg' +import useBuildVariant from 'features/hooks/use-build-variant' const getPlans = (is_eu: boolean, is_cpa_plan: boolean): AccountCardProps[] => { const plans: AccountCardProps[] = [ @@ -43,10 +44,11 @@ const AccountPlan = ({ updateData, onValidate, }: WizardStepProps<'account_plan'>) => { + const { region } = useBuildVariant() const [account_plan, setAccountPlan] = useState(affiliate_account.account_plan) - const { is_eu, is_cpa_plan } = useRegion() + const { is_cpa_plan } = useRegion() const is_rtl = useIsRtl() - const plans = getPlans(is_eu, is_cpa_plan) + const plans = getPlans(region === "eu", is_cpa_plan) useEffect(() => { updateData(account_plan) diff --git a/themes/gatsby-theme-deriv/src/pages/signup-affiliates/index.tsx b/themes/gatsby-theme-deriv/src/pages/signup-affiliates/index.tsx index 8fb84f60e2b..811f48544f6 100644 --- a/themes/gatsby-theme-deriv/src/pages/signup-affiliates/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/signup-affiliates/index.tsx @@ -46,7 +46,8 @@ const StyledContainer = styled(Container)` } ` -const AffiliateSignup = () => { +const AffiliateSignup = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [show_wizard, setShowWizard] = useState(false) const [is_online, setIsOnline] = useState(isBrowser() && navigator.onLine) const [signup_status, setSignupStatus] = useState('') @@ -145,7 +146,7 @@ const AffiliateSignup = () => { } return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/signup-success/index.tsx b/themes/gatsby-theme-deriv/src/pages/signup-success/index.tsx index 230ded296b9..dabf958572e 100644 --- a/themes/gatsby-theme-deriv/src/pages/signup-success/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/signup-success/index.tsx @@ -8,7 +8,8 @@ import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const SignupSuccess = () => { +const SignupSuccess = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [registeredEmail, setRegisteredEmail] = useState('') const analyticsData: Parameters[1] = { form_source: isBrowser() && window.location.hostname, @@ -32,7 +33,7 @@ const SignupSuccess = () => { } }, []) - return + return } export default WithIntl()(SignupSuccess) diff --git a/themes/gatsby-theme-deriv/src/pages/signup/index.tsx b/themes/gatsby-theme-deriv/src/pages/signup/index.tsx index 18eccb23b3d..d2bbb5f7035 100644 --- a/themes/gatsby-theme-deriv/src/pages/signup/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/signup/index.tsx @@ -4,8 +4,9 @@ import { TGatsbyHead } from 'features/types' import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' -const Signup = () => { - return +const Signup = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + return } export default WithIntl()(Signup) diff --git a/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_business-grid.tsx b/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_business-grid.tsx index a23c780515a..f0464fc7977 100644 --- a/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_business-grid.tsx +++ b/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_business-grid.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { StyledGrid, StyledContainer, IconWrapper, GridCol, Cta } from './_terms-conditions-style' import { Header, Text } from 'components/elements' import { localize, Localize } from 'components/localization' @@ -14,7 +14,7 @@ import BugBounty from 'images/svg/terms/bug-bounty.svg' import BugBountyRow from 'images/svg/terms/bug-bounty-row.svg' import IG from 'images/svg/terms/important-guidelines.svg' import PDF from 'images/svg/regulatory/pdf-icon-black.svg' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' type ColProps = { Icon: string @@ -67,26 +67,23 @@ const BusinessGrid = () => { const payment_agents_url = `/tnc/[ES]_business-partners-payment-agents-R23_12_1.pdf` const api_user_url = `/tnc/[ES]_business-partners-api-user-R23_12_1.pdf` const bug_bounty_url = `/tnc/[ES]_business-partners-bug-bounty-R23_12_1.pdf` - const { is_row } = useRegion() + + const { region } = useBuildVariant() const language = getLanguage() - const [show_row_content, setShowRowContent] = useState(true) - const general_terms_url_region = is_row + + const general_terms_url_region = region === "row" ? '/tnc/business-partners-general-terms.pdf' : '/tnc/business-partners-general-terms-eu.pdf' - const affiliate_brokers_url_region = is_row + const affiliate_brokers_url_region = region === "row" ? '/tnc/business-partners-affiliates-and-introducing-brokers-row.pdf' : '/tnc/business-partners-affiliates-and-introducing-brokers-eu.pdf' - const api_user_url_region = is_row + const api_user_url_region = region === "row" ? '/tnc/business-partners-api-user.pdf' : '/tnc/business-partners-api-user-eu.pdf' - const bug_bounty_url_region = is_row + const bug_bounty_url_region = region === "row" ? '/tnc/business-partners-bug-bounty.pdf' : '/tnc/business-partners-bug-bounty-eu.pdf' - useEffect(() => { - if (!is_row) setShowRowContent(false) - }, [is_row]) - return ( { Icon={General} title="_t_General terms of use_t_" content="_t_Terms and ethical standards for all our affiliates, introducing brokers, API users, and payment agents_t_" - url={is_row && language === 'es' ? general_terms_url : general_terms_url_region} + url={region === "row" && language === 'es' ? general_terms_url : general_terms_url_region} link_title="_t_General terms of use_t_" /> { title="_t_Affiliates & introducing brokers (IBs)_t_" content="_t_Additional terms for our affiliates and introducing brokers_t_" url={ - is_row && language === 'es' + region === "row" && language === 'es' ? affiliate_brokers_url : affiliate_brokers_url_region } @@ -117,13 +114,13 @@ const BusinessGrid = () => { /> - {show_row_content && ( + {region === "row" && ( { /> )} diff --git a/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_clients-grid.tsx b/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_clients-grid.tsx index 848aaab7331..eba0bcdece0 100644 --- a/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_clients-grid.tsx +++ b/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/_clients-grid.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { StyledGrid, StyledContainer, IconWrapper, GridCol, Cta } from './_terms-conditions-style' import { Header, Text } from 'components/elements' import { Localize, localize } from 'components/localization' @@ -10,8 +10,8 @@ import Security from 'images/svg/terms/security-privacy-tc.svg' import Risk from 'images/svg/terms/risk-tc.svg' import PDF from 'images/svg/regulatory/pdf-icon-black.svg' import BFX from 'images/svg/terms/bfx-tc.svg' -import useRegion from 'components/hooks/use-region' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' type ColProps = { Icon: string @@ -27,12 +27,8 @@ type Link = { } const Col = ({ Icon, content, title, eu_links, non_eu_links }: ColProps) => { - const { is_eu } = useRegion() - const [links, setLinks] = useState(non_eu_links) - - useEffect(() => { - if (is_eu) setLinks(eu_links) - }, [is_eu, eu_links]) + const { region } = useBuildVariant() + const links = region === "eu" ? eu_links : non_eu_links return ( diff --git a/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/index.tsx b/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/index.tsx index 238f278eba0..b85d1bbfab5 100644 --- a/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/terms-and-conditions/index.tsx @@ -12,9 +12,10 @@ const Section = styled(SectionContainer)` background-color: transparent; ` -const TermsAndConditions = () => { +const TermsAndConditions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - +
    diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_accumulators-to-trade.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_accumulators-to-trade.tsx deleted file mode 100644 index 70158b05c85..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_accumulators-to-trade.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react' -import { SmallContainer, OptionGrid } from '../components/_style' -import { Flex, SectionContainer } from 'components/containers' -import { Text } from 'components/elements' -import CommonHeaderSection from 'components/elements/common-header-section' -import { Localize, localize } from 'components/localization' -// SVG -import CrashBoom from 'images/svg/options/crash-boom.svg' -import JumpIndices from 'images/svg/options/jump-indices.svg' -import VolatilityIndices from 'images/svg/options/volatility-indices.svg' -import useRegion from 'components/hooks/use-region' -import { useBrowserResize } from 'components/hooks/use-browser-resize' - -const AccumulatorsToTrade = () => { - const { is_eu } = useRegion() - const [is_mobile] = useBrowserResize() - - return ( - - - - - - {is_eu && ( - - - - )} - - - ) -} - -const IndicesGrid = () => { - const [is_mobile] = useBrowserResize() - - return ( - - -
    - {localize('_t_rise -
    - - -     - -
    - {localize('_t_higher -
    - - - -     - -
    - {localize('_t_higher -
    - - - -     -     - ) -} - -export default AccumulatorsToTrade diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_how-accumulators-works.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_how-accumulators-works.tsx deleted file mode 100644 index 5a871eded30..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_how-accumulators-works.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import React from 'react' -import { StaticImage } from 'gatsby-plugin-image' -import styled from 'styled-components' -import { SmallContainer } from '../components/_style' -import SideTab from '../components/_tabs' -import CommonHeaderSection from 'components/elements/common-header-section' -import { SectionContainer, Container } from 'components/containers' -import { localize } from 'components/localization' -import { useBrowserResize } from 'components/hooks/use-browser-resize' - -const StyledContainer = styled(Container)` - width: 100% !important; - display: flex; - align-items: start; - justify-content: start; -` - -const HowAccumulatorsWork = () => { - const [is_mobile] = useBrowserResize() - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default HowAccumulatorsWork diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_markets-available.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_markets-available.tsx deleted file mode 100644 index ca2bf1d5c55..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_markets-available.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import MarketsCarousel from '../components/_markets-carousel' -import LearnMore from '../components/_learn-more' -import { SmallContainer, Card, MarketsItem } from '../components/_style' -import { SectionContainer, Flex } from 'components/containers' -import { Header, Text } from 'components/elements' -import { localize, Localize } from 'components/localization' -import Forex from 'images/svg/trade-types/forex.svg' -import Commodities from 'images/svg/trade-types/commodities.svg' -import Derived from 'images/svg/trade-types/derived.svg' -import StockIndices from 'images/svg/trade-types/stock-indices.svg' - -const MobileCardHeader = styled(Flex)` - margin-bottom: 0.8rem; - flex-direction: column; - height: auto; - - @media (max-width: 680px) { - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - - > img { - width: 48px; - height: 48px; - } - } -` -const StyledText = styled(Text)` - margin-top: 1.6rem; - - @media (max-width: 680px) { - font-size: 18px; - margin-top: 0; - } -` - -const MarketsAvailable = () => { - return ( - - -
    - -
    -     - - - - - - {localize('_t_Forex_t_')} - - - - - - - - - - - - - - - - {localize('_t_Synthetic - - - - - - - - - - - - - - - - {localize('_t_Stocks - - - - - - - - - - - - - - - - - {localize('_t_Commodities_t_')} - - - - - - - - - - - - -     - ) -} - -export default MarketsAvailable diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_what-are-accumulators.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_what-are-accumulators.tsx deleted file mode 100644 index 9632708998a..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/_what-are-accumulators.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react' -import { SmallContainer } from '../components/_style' -import accumulator_content from '../content/static/_accumulator' -import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn' -import { SectionContainer } from 'components/containers' -import CommonHeaderSection from 'components/elements/common-header-section' -import { StyledBox } from 'pages/markets/static/style/_markets-style' -import { useBrowserResize } from 'components/hooks/use-browser-resize' -import { localize } from 'components/localization' - -const WhatAreAccumulators = () => { - const [is_mobile] = useBrowserResize() - - return ( - <> - - - - - - - } - button_text="_t_Create free demo account_t_" - multiple_row - gap="7rem" - > - {accumulator_content.map((content, index) => ( - - } - > - ))} - - - ) -} - -export default WhatAreAccumulators diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/index.tsx deleted file mode 100644 index 92a991dd588..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/accumulators/index.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import React, { useEffect, useState } from 'react' -import Loadable from '@loadable/component' -import styled from 'styled-components' -import { Hero } from '../components/_style' -import WhatAreAccumulators from './_what-are-accumulators' -import PageNotFound from 'features/pages/404' -import { SEO, SmallContainer, TMetaAttributes } from 'components/containers' -import Layout from 'components/layout/layout' -import Button from 'components/custom/_button' -import CommonHeaderSection from 'components/elements/common-header-section' -import OptionsNavTab from 'pages/markets/components/sections/_options-nav-tab' -import { WithIntl } from 'components/localization' -import { StepperView } from 'components/elements' -import useHandleSignup from 'components/hooks/use-handle-signup' -import useRegion from 'components/hooks/use-region' -import { useBrowserResize } from 'components/hooks/use-browser-resize' -import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param' -import { TString } from 'types/generics' -import { TGatsbyHead } from 'features/types' - -const HowAccumulatorsWork = Loadable(() => import('./_how-accumulators-works')) -const AccumulatorsToTrade = Loadable(() => import('./_accumulators-to-trade')) - -const meta_attributes: TMetaAttributes = { - og_title: '_t_Options trading | Trading types | Deriv_t_', - og_description: - '_t_Learn about options trading on Deriv. Earn payouts by correctly predicting price movements without needing to buy the underlying assets._t_', -} - -const ButtonContainer = styled.div` - margin-bottom: 16.4rem; -` - -const Accumulators = () => { - const { is_row } = useRegion() - const [is_mobile] = useBrowserResize() - const [is_loaded, setLoaded] = useState(false) - const { is_accumulators_released } = usePlatformQueryParam() - - const handleSignup = useHandleSignup() - - useEffect(() => { - setLoaded(true) - }, []) - - const AccumulatorsItems: { title: TString; subtitle: TString }[] = [ - { - title: '_t_Practise_t_', - subtitle: - '_t_Open a demo account on Deriv and practise with an unlimited amount of virtual funds._t_', - }, - { - title: '_t_Trade_t_', - subtitle: - '_t_Open a real account, make a deposit, and start trading accumulators for real._t_', - }, - { - title: '_t_Withdraw_t_', - subtitle: - '_t_Conveniently withdraw your funds through any of our supported withdrawal methods._t_', - }, - ] - - if (is_loaded) { - return is_accumulators_released && is_row ? ( - - - - - - - - - - - - -
    {/* TODO: refactor to make it more DRY */} - {is_row && ( + {region === "row" && ( {available_markets.map( ({ @@ -170,7 +170,7 @@ const AvailableMarkets = () => { - {is_eu && eu_description ? ( + {region !== "row" && eu_description ? ( ) : ( @@ -188,7 +188,7 @@ const AvailableMarkets = () => { )} )} - {is_eu && ( + {region === "eu" && ( {eu_available_markets.map( ({ @@ -217,7 +217,7 @@ const AvailableMarkets = () => { - {is_eu && eu_description ? ( + {region === "eu" && eu_description ? ( ) : ( diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_start-trading.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_start-trading.tsx index 4659ad127f5..9427bb27ee7 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_start-trading.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_start-trading.tsx @@ -4,10 +4,10 @@ import { SmallContainer } from '../components/_style' import CommonHeaderSection from 'components/elements/common-header-section' import Button from 'components/custom/_button' import { StepperView } from 'components/elements' -import useRegion from 'components/hooks/use-region' import useHandleSignup from 'components/hooks/use-handle-signup' import { useBrowserResize } from 'components/hooks/use-browser-resize' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' const ButtonContainer = styled.div` margin-left: -1rem; @@ -17,19 +17,19 @@ const StepperContainer = styled.div` ` const StartTrading = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const [is_mobile] = useBrowserResize() const handleSignup = useHandleSignup() const CfdItems: { title: TString; subtitle: TString }[] = [ { title: '_t_Practise_t_', - subtitle: is_eu + subtitle: region === "eu" ? '_t_Open a demo CFDs account and practise with an unlimited amount of virtual funds._t_' : '_t_Open a demo Deriv MT5, Deriv X, or Deriv cTrader account and practise with an unlimited amount of virtual funds._t_', }, { title: '_t_Trade_t_', - subtitle: is_eu + subtitle: region === "eu" ? '_t_Trade with a real CFDs account. Get access to leverage and trade positions larger than your existing capital._t_' : '_t_Trade with a real Deriv MT5, Deriv X, or Deriv cTrader account and get access to high leverage to trade positions larger than your existing capital._t_', }, diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_trading-cfd-increases.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_trading-cfd-increases.tsx index efe6fa6349c..0e35a9ab20e 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_trading-cfd-increases.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/_trading-cfd-increases.tsx @@ -6,10 +6,10 @@ import { SectionContainer, Desktop, Mobile } from 'components/containers' import Button from 'components/custom/_button' import { Header, Text, QueryImage } from 'components/elements' import { LinkButton } from 'components/form' -import useRegion from 'components/hooks/use-region' import { Localize, localize } from 'components/localization' import device from 'themes/device' import { useBrowserResize } from 'components/hooks/use-browser-resize' +import useBuildVariant from 'features/hooks/use-build-variant' const query = graphql` query { @@ -88,7 +88,7 @@ const StyledSectionContainer = styled(SectionContainer)` const TradingCFDIncreases = () => { const data = useStaticQuery(query) - const { is_eu } = useRegion() + const { region } = useBuildVariant() const [is_mobile] = useBrowserResize() return ( @@ -112,21 +112,21 @@ const TradingCFDIncreases = () => {     - {is_eu ? ( + {region === "eu" ? ( ) : ( )} - {is_eu ? ( + {region === "eu" ? ( ) : ( )} - {is_eu ? ( + {region === "eu" ? ( ) : ( @@ -136,7 +136,7 @@ const TradingCFDIncreases = () => { - {is_eu ? ( + {region === "eu" ? ( { )} - {is_eu ? ( + {region === "eu" ? ( { - const { is_eu } = useRegion() - const [show_eu_content, setShowEuContent] = useState(false) - - useEffect(() => { - if (is_eu) setShowEuContent(true) - }, [is_eu]) + const { region } = useBuildVariant() return ( @@ -22,7 +17,7 @@ const WhatIsCFD = () => { - {show_eu_content ? ( + {region === "eu" ? ( diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/index.tsx index 8a39d30c851..2e0e009f3d8 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/cfds/index.tsx @@ -10,19 +10,18 @@ import { Localize, WithIntl, localize } from 'components/localization' import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn' import { StyledBox } from 'pages/markets/static/style/_markets-style' import { TGatsbyHead } from 'features/types' -import { useShowEuContent } from 'components/hooks/use-show-eu-content' const TradingCFDIncreases = Loadable(() => import('./_trading-cfd-increases')) const StartTrading = Loadable(() => import('./_start-trading')) const ThingsToKeep = Loadable(() => import('./_mind-when-trading')) const AvailableMarkets = Loadable(() => import('./_available-markets')) -const CFD = () => { - const show_eu_content = useShowEuContent() - const content = show_eu_content ? cfd_content : cfd_content.concat(non_eu_cfd_content) +const CFD = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext + const content = region === "eu" ? cfd_content : cfd_content.concat(non_eu_cfd_content) return ( - +
    @@ -44,9 +43,9 @@ const CFD = () => { } /> ))} diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/margin/_available-markets.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/margin/_available-markets.tsx deleted file mode 100644 index f8f1be577f3..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/margin/_available-markets.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import MarketsCarousel from '../components/_markets-carousel' -import LearnMore from '../components/_learn-more' -import { SmallContainer, Card, MarketsItem } from '../components/_style' -import { SectionContainer, Flex } from 'components/containers' -import { Header, Text } from 'components/elements' -import { localize, Localize } from 'components/localization' -import Forex from 'images/svg/trade-types/forex.svg' -import Commodities from 'images/svg/trade-types/commodities.svg' -import SyntheticIndices from 'images/svg/trade-types/synthetic-indices.svg' -import StockIndices from 'images/svg/trade-types/stock-indices.svg' -import useRegion from 'components/hooks/use-region' - -const MobileCardHeader = styled(Flex)` - margin-bottom: 0.8rem; - flex-direction: column; - height: auto; - - @media (max-width: 680px) { - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - - > img { - width: 48px; - height: 48px; - } - } -` -const StyledText = styled(Text)` - margin-top: 1.6rem; - - @media (max-width: 680px) { - font-size: 18px; - margin-top: 0; - } -` - -const AvailableMarkets = () => { - const { is_eu } = useRegion() - - return ( - - -
    - -
    -     - - - - - - {localize('_t_Forex_t_')} - - - - - - - {is_eu ? ( - - ) : ( - - )} - - - - - - - - - - {localize('_t_Synthetic - - - - - - - - - - - - - - - - - {localize('_t_Commodities_t_')} - - - - - - - - - - - - - - - - - {localize('_t_Stock - - - - - - - - - - - - - -     - ) -} - -export default AvailableMarkets diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/margin/_why-trade-margin.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/margin/_why-trade-margin.tsx deleted file mode 100644 index 54669f02226..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/margin/_why-trade-margin.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react' -import { SmallContainer, Grid, WhyTradeItem } from '../components/_style' -import { SectionContainer } from 'components/containers' -import { Header, Text } from 'components/elements' -import { Localize, localize } from 'components/localization' -import FriendlySupport from 'images/svg/trade-types/friendly-support.svg' -import HighLeverge from 'images/svg/trade-types/high-leverage.svg' -import MaximizePotentialProfit from 'images/svg/trade-types/maximize-potential-profit.svg' -import InstantAccess from 'images/svg/trade-types/instant-access.svg' -import SyntheticIndices from 'images/svg/trade-types/synthetic-indices.svg' -import { Button } from 'components/form' -import useHandleSignup from 'components/hooks/use-handle-signup' -import useRegion from 'components/hooks/use-region' - -const WhyTradeMargin = () => { - const { is_eu } = useRegion() - const handleSignup = useHandleSignup() - - return ( - - -
    - -
    - - - {localize('_t_High - - - - - {is_eu ? ( - - ) : ( - - )} - - - - {localize('_t_Synthetic - - - - - - - - - {localize('_t_Maximize - - - - - - - - - {localize('_t_Friendly - - - - - - - - - {localize('_t_Instant - - - - - - - - - - - - -     -     - ) -} - -export default WhyTradeMargin diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_how-options-works.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_how-options-works.tsx index bb038c7a224..dd77bdda716 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_how-options-works.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_how-options-works.tsx @@ -10,7 +10,7 @@ import device from 'themes/device' import DefinePosition from 'images/svg/trade-types/define-your-position.svg' import SetOptionalParameters from 'images/svg/trade-types/set-optional-parameters.svg' import PurchaseContract from 'images/svg/trade-types/purchase-your-contract.svg' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const OptionGrid = styled(Grid)` grid-gap: 2.4rem; @@ -55,7 +55,7 @@ const StyledSectionContainer = styled(SectionContainer)` ` const HowOptionsWorks = () => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() return ( @@ -127,7 +127,7 @@ const HowOptionsWorks = () => { label="_t_1. Market_t_" description="_t_Choose an asset from the list of markets offered on Deriv._t_" > - {is_eu ? ( + {region === "eu" ? ( { tabID="trade-type-tab" label="_t_2. Trade type_t_" description={ - is_eu + region === "eu" ? "_t_Choose 'Multipliers'_t_" : '_t_Choose ‘Multipliers’ from the list of trade types._t_' } > - {is_eu ? ( + {region === "eu" ? ( { tabID="multiplier-value-tab" label="_t_4. Multiplier value_t_" description={ - is_eu + region === "eu" ? '_t_Your profit or loss is multiplied by the multiplier value, which depending on the asset you trade, can be from 1 to 30. Your loss will never be more than your stake._t_' : '_t_Enter the multiplier value of your choice. Your profit or loss will be multiplied by this amount._t_' } > - {is_eu ? ( + {region === "eu" ? ( { tabID="deal-cancellation-tab" label="_t_7. Deal cancellation_t_" description={ - is_eu + region === "eu" ? "_t_This feature allows you to cancel your contract within one hour of buying it, without losing your stake amount. We charge a small non-refundable fee for this service. Deal cancellation isn't available for Crash and Boom indices or cryptocurrency pairs._t_" : '_t_This feature allows you to cancel your contract within one hour of buying it, without losing your stake amount. We charge a small non-refundable fee for this service._t_' } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_markets-available.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_markets-available.tsx index d3be3da1557..98b89c5c44e 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_markets-available.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_markets-available.tsx @@ -8,8 +8,8 @@ import { Header, Text } from 'components/elements' import { localize, Localize } from 'components/localization' import Forex from 'images/svg/trade-types/forex.svg' import Derived from 'images/svg/trade-types/derived.svg' -import useRegion from 'components/hooks/use-region' import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' type TAvailableMarkets = { name: string @@ -86,7 +86,7 @@ const eu_available_markets = available_markets.filter( ) const MarketsAvailable = () => { - const { is_eu, is_row } = useRegion() + const { region } = useBuildVariant() return ( @@ -96,7 +96,7 @@ const MarketsAvailable = () => {
    {/* TODO: refactor to make it more DRY */} - {is_row && ( + {region === "row" && ( {available_markets.map( ({ description, img_alt, img_src, learn_more_path, name, text }) => { @@ -132,7 +132,7 @@ const MarketsAvailable = () => { )} - {is_eu && ( + {region === "eu" && ( {eu_available_markets.map( ({ eu_description, img_alt, img_src, learn_more_path, name, text }) => { diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_things-in-mind.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_things-in-mind.tsx index c7b32dcdfe8..c8a60ed7cc2 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_things-in-mind.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_things-in-mind.tsx @@ -3,14 +3,14 @@ import { SmallContainer } from '../components/_style' import { SectionContainer } from 'components/containers' import { Header, Text } from 'components/elements' import { Localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const ThingsInMind = () => { - const { is_eu } = useRegion() - const deal_cancellation_text = is_eu + const { region } = useBuildVariant() + const deal_cancellation_text = region === "eu" ? "_t_Deal cancellation isn't available for Crash and Boom indices or cryptocurrency pairs. The stop out feature will close your contract automatically when your loss reaches or exceeds a percentage of your stake. The stop out percentage is shown below your stake on Deriv Trader and varies according to your chosen multiplier._t_" : '_t_Deal cancellation isn’t available for Crash and Boom indices. The stop-out feature will close your contract automatically when your loss reaches or exceeds a percentage of your stake. The stop-out percentage is shown below your stake on Deriv Trader and varies according to your chosen multiplier._t_' - const protect_text = is_eu + const protect_text = region === "eu" ? '_t_This is to protect you from losing your money when using deal cancellation. With deal cancellation, you are allowed to reclaim your full stake amount (minus a small fee) if you cancel your contract within an hour of opening the position. Stop loss, on the other hand, will close your contract at a loss if the market moves against your position. However, once the deal cancellation expires, you can set a stop loss level on the open contract._t_' : '_t_This is to protect you from losing your money when using deal cancellation. With deal cancellation, you are allowed to reclaim your full stake amount if you cancel your contract within an hour of opening the position. Stop loss, on the other hand, will close your contract at a loss if the market moves against your position. However, once the deal cancellation expires, you can set a stop loss level on the open contract._t_' diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_what-are-options.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_what-are-options.tsx index da476ff73fa..50bd2b614b3 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_what-are-options.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/_what-are-options.tsx @@ -9,7 +9,7 @@ import { Header, Text, QueryImage } from 'components/elements' import { localize, Localize } from 'components/localization' import { StyledBox } from 'pages/markets/static/style/_markets-style' import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const StyledHeader = styled(Header)` @media ${device.tablet} { @@ -133,7 +133,7 @@ const query = graphql` const WhatAreOptions = () => { const data = useStaticQuery(query) - const { is_eu } = useRegion() + const { region } = useBuildVariant() return ( <> @@ -148,7 +148,7 @@ const WhatAreOptions = () => { - {is_eu ? ( + {region === "eu" ? ( @@ -354,8 +354,8 @@ const WhatAreOptions = () => { ({ alt, item_title, src, text, item_title_eu, text_eu }) => ( } > ), diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/index.tsx index e63ce62d634..79a58bef56a 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/multiplier/index.tsx @@ -27,9 +27,10 @@ const StyledHeader = styled(Header)` } ` -const Multipliers = () => { +const Multipliers = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/_start-trading.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/_start-trading.tsx deleted file mode 100644 index 8be205a9b27..00000000000 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/_start-trading.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import Timeline from '../components/_timeline' -import { SmallContainer } from '../components/_style' -import { SectionContainer } from 'components/containers' -import { Header } from 'components/elements' -import { Button } from 'components/form' -import { Localize } from 'components/localization' -import Pattern from 'images/common/trade-types/pattern-section.png' -import useHandleSignup from 'components/hooks/use-handle-signup' - -const PatternContainer = styled(SectionContainer)` - background: url(${Pattern}); - background-size: cover; -` - -const FixTimeline = styled(Timeline)` - margin-left: 1.2rem; - margin-bottom: 5rem; -` - -const StartTrading = () => { - const handleSignup = useHandleSignup() - - return ( - - -
    - -
    - - - - - - - - - - - - -     -     - ) -} - -export default StartTrading diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/accumulator-options/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/accumulator-options/index.tsx index f3ab41f541a..c1ac1ef586a 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/accumulator-options/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/accumulator-options/index.tsx @@ -2,18 +2,17 @@ import React from 'react' import AccumulatorsOptions from 'features/pages/options/accumulator' import { faq_schema } from 'features/pages/options/accumulator/_faq-schema' import { WithIntl } from 'components/localization' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import ProtectedRoute from 'features/components/molecules/protected-route' import { TGatsbyHead } from 'features/types' -const AccumulatorsOptionsPage = () => { - const { is_row, is_region_loading } = useRegion() +const AccumulatorsOptionsPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/asians/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/asians/index.tsx index f47701b8584..c5a86d0ecda 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/asians/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/asians/index.tsx @@ -3,17 +3,16 @@ import ProtectedRoute from 'features/components/molecules/protected-route' import { WithIntl } from 'components/localization' import AsiansDigitalOptionsPage from 'features/pages/options/digital/asians' import { faq_schema } from 'features/pages/options/digital/asians/_faq-schema' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const DigitalOptionsAsians = () => { - const { is_row, is_region_loading } = useRegion() +const DigitalOptionsAsians = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/digits/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/digits/index.tsx index 80aead0b438..57d6a6d12ed 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/digits/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/digits/index.tsx @@ -3,17 +3,16 @@ import { WithIntl } from 'components/localization' import DigitDigitalOptionsPage from 'features/pages/options/digital/digits' import { faq_schema } from 'features/pages/options/digital/digits/_faq-schema' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const DigitDigitalOptions = () => { - const { is_row, is_region_loading } = useRegion() +const DigitDigitalOptions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/high-low-ticks/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/high-low-ticks/index.tsx index 70bce4bdc62..6f14ade7419 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/high-low-ticks/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/high-low-ticks/index.tsx @@ -3,17 +3,16 @@ import HighLowDigitalOptionsPage from 'features/pages/options/digital/high-low' import { faq_schema } from 'features/pages/options/digital/high-low/_faq-schema' import { WithIntl } from 'components/localization' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const HighLowDigitalOptions = () => { - const { is_row, is_region_loading } = useRegion() +const HighLowDigitalOptions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/in-out/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/in-out/index.tsx index 8dbdbde79be..97d49c7e04c 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/in-out/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/in-out/index.tsx @@ -3,17 +3,16 @@ import { WithIntl } from 'components/localization' import InOutDigitalOptionsPage from 'features/pages/options/digital/in-out' import { faq_schema } from 'features/pages/options/digital/in-out/_faq-schema' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const DigitalOptionsInOut = () => { - const { is_row, is_region_loading } = useRegion() +const DigitalOptionsInOut = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/lookbacks/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/lookbacks/index.tsx index 065dd821b2d..c538b8b8f7c 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/lookbacks/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/lookbacks/index.tsx @@ -3,17 +3,16 @@ import { WithIntl } from 'components/localization' import LookbacksDigitalOptionsPage from 'features/pages/options/digital/lookbacks' import { faq_schema } from 'features/pages/options/digital/lookbacks/_faq-schema' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const LookBacksOptions = () => { - const { is_row, is_region_loading } = useRegion() +const LookBacksOptions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/only-ups-only-downs/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/only-ups-only-downs/index.tsx index a4fc1f208a1..32ddef4be14 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/only-ups-only-downs/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/only-ups-only-downs/index.tsx @@ -2,18 +2,17 @@ import React from 'react' import { WithIntl } from 'components/localization' import OnlyUpsOnlyDowns from 'features/pages/options/digital/only-ups-only-downs' import { faq_schema } from 'features/pages/options/digital/only-ups-only-downs/_faq-schema' -import useRegion from 'components/hooks/use-region' import ProtectedRoute from 'features/components/molecules/protected-route' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const OnlyUpsAndOnlyDowns = () => { - const { is_row, is_region_loading } = useRegion() +const OnlyUpsAndOnlyDowns = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/reset-call-reset-put/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/reset-call-reset-put/index.tsx index dec4935930c..35807f2916f 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/reset-call-reset-put/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/reset-call-reset-put/index.tsx @@ -2,18 +2,17 @@ import React from 'react' import ResetCallOptionsPage from 'features/pages/options/digital/reset-call' import { faq_schema } from 'features/pages/options/digital/reset-call/_faq-schema' import { WithIntl } from 'components/localization' -import useRegion from 'components/hooks/use-region' import ProtectedRoute from 'features/components/molecules/protected-route' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const ResetCallDigitalOptions = () => { - const { is_row, is_region_loading } = useRegion() +const ResetCallDigitalOptions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/touch-no-touch/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/touch-no-touch/index.tsx index 49162b5346f..a6b1e8903cb 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/touch-no-touch/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/touch-no-touch/index.tsx @@ -3,17 +3,16 @@ import TouchNoTouchDigitalOptionsPage from 'features/pages/options/digital/touch import { faq_schema } from 'features/pages/options/digital/touch-no-touch/_faq-schema' import { WithIntl } from 'components/localization' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const TouchNoTouchDigitalOptions = () => { - const { is_row, is_region_loading } = useRegion() +const TouchNoTouchDigitalOptions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/up-and-down/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/up-and-down/index.tsx index d15d74dfedd..1d5faa40e2c 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/up-and-down/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/digital-options/up-and-down/index.tsx @@ -4,18 +4,17 @@ import { WithIntl } from 'components/localization' import UpAndDownDigitalOptionsPage from 'features/pages/options/digital/up-down' import { faq_schema } from 'features/pages/options/digital/up-down/_faq-schema' import ProtectedRoute from 'features/components/molecules/protected-route' -import useRegion from 'components/hooks/use-region' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const DigitalOptions = () => { - const { is_row, is_region_loading } = useRegion() +const DigitalOptions = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/turbo-options/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/turbo-options/index.tsx index 50e5249066a..21aea7a55f1 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/turbo-options/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/turbo-options/index.tsx @@ -2,18 +2,17 @@ import React from 'react' import TurboOptions from 'features/pages/options/turbo' import { faq_schema } from 'features/pages/options/turbo/_faq-schema' import { WithIntl } from 'components/localization' -import useRegion from 'components/hooks/use-region' import ProtectedRoute from 'features/components/molecules/protected-route' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const TurboOptionsPage = () => { - const { is_row, is_region_loading } = useRegion() +const TurboOptionsPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trade-types/options/vanilla-options/index.tsx b/themes/gatsby-theme-deriv/src/pages/trade-types/options/vanilla-options/index.tsx index dc81848b723..ecc80d7a5a8 100644 --- a/themes/gatsby-theme-deriv/src/pages/trade-types/options/vanilla-options/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trade-types/options/vanilla-options/index.tsx @@ -2,18 +2,17 @@ import React from 'react' import VanillaOptions from 'features/pages/options/vanilla' import { faq_schema } from 'features/pages/options/vanilla/_faq-schema' import { WithIntl } from 'components/localization' -import useRegion from 'components/hooks/use-region' import ProtectedRoute from 'features/components/molecules/protected-route' import { SEO } from 'components/containers' import { TGatsbyHead } from 'features/types' -const VanillaOptionsPage = () => { - const { is_row, is_region_loading } = useRegion() +const VanillaOptionsPage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( } - is_loading={is_region_loading} + region={region} + is_page_visible={region === "row"} + component={} /> ) } diff --git a/themes/gatsby-theme-deriv/src/pages/trader-tools/index.tsx b/themes/gatsby-theme-deriv/src/pages/trader-tools/index.tsx index 4d3559ba144..041869ca68c 100644 --- a/themes/gatsby-theme-deriv/src/pages/trader-tools/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trader-tools/index.tsx @@ -65,9 +65,10 @@ const tools: ToolsType = [ }, ] -const TraderTools = () => { +const TraderTools = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - +
    diff --git a/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_available-platform.tsx b/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_available-platform.tsx index 620bb8fdaac..4a783c44317 100644 --- a/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_available-platform.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_available-platform.tsx @@ -1,13 +1,12 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import styled from 'styled-components' -import useRegion from 'components/hooks/use-region' import { Flex } from 'components/containers' import DerivMT5 from 'images/common/markets/mt5.svg' import DerivX from 'images/svg/trading-specification/deriv-x.svg' -import { Localize, LocalizedLink, localize } from 'components/localization' +import { Localize, LocalizedLink } from 'components/localization' import device from 'themes/device' import { Header } from 'components/elements' -import { TString } from 'types/generics' +import useBuildVariant from 'features/hooks/use-build-variant' const StyledHeader = styled(Header)` font-family: 'Ubuntu'; @@ -66,12 +65,7 @@ const deriv_mt5 = 'Deriv MT5' const deriv_x = 'Deriv X' const AvailablePlatform = () => { - const { is_row } = useRegion() - const [show_row_content, setShowRowContent] = useState(true) - - useEffect(() => { - if (!is_row) setShowRowContent(false) - }, [is_row]) + const { region } = useBuildVariant() return ( <> @@ -83,7 +77,7 @@ const AvailablePlatform = () => { - {show_row_content ? ( + {region === "row" ? ( <> diff --git a/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_elements.tsx b/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_elements.tsx index 6eba6bc2d71..794d98304f6 100644 --- a/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_elements.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_elements.tsx @@ -9,11 +9,11 @@ import device from 'themes/device' import { Button } from 'components/form' import { Flex } from 'components/containers' import * as icons from 'components/elements/symbols' -import useRegion from 'components/hooks/use-region' import dl from 'images/svg/trading-specification/dl.svg' import swf from 'images/svg/trading-specification/swf.svg' import { TString } from 'types/generics' import { Localize } from 'components/localization' +import useBuildVariant from 'features/hooks/use-build-variant' type TableRowProps = { bg?: string @@ -239,15 +239,10 @@ type TTableCellGroup = { market?: TAvailableLiveMarkets } export const TableCellGroup = ({ data, market }: TTableCellGroup) => { - const { is_row } = useRegion() + const { region } = useBuildVariant() const { symbol, instrument: text, dl_icon, swf_icon } = data const [show_popUp, setShowPopUp] = useState(false) const [popup_type, setPopupType] = useState() - const [show_row_content, setShowRowContent] = useState(true) - - useEffect(() => { - if (!is_row) setShowRowContent(false) - }, [is_row]) useEffect(() => { document.body.style.overflow = show_popUp ? 'hidden' : 'scroll' @@ -278,7 +273,7 @@ export const TableCellGroup = ({ data, market }: TTableCellGroup) => { {text} - {show_row_content ? ( + {region === "row" ? ( <> {dl_icon && getStyledImg('24px', dl, 'dl')} {swf_icon && getStyledImg('30px', swf, 'swf')} diff --git a/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_trading_spec_table.tsx b/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_trading_spec_table.tsx index 16bb2d56793..6096bd9dcdb 100644 --- a/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_trading_spec_table.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trading-specification/components/_trading_spec_table.tsx @@ -28,10 +28,10 @@ import { Flex } from 'components/containers' import { Localize, localize } from 'components/localization' import { Header } from 'components/elements' import { sanitize } from 'common/utility' -import useRegion from 'components/hooks/use-region' import device from 'themes/device' import { TString } from 'types/generics' import { useIsRtl } from 'components/hooks/use-isrtl' +import useBuildVariant from 'features/hooks/use-build-variant' export type TLiveMarketTableProps = { market: TAvailableLiveMarkets @@ -110,33 +110,32 @@ const DisclaimerText = styled(Header)` ` const TradingSpecificationTable = ({ market }: TLiveMarketTableProps) => { - const { is_eu } = useRegion() + const { region } = useBuildVariant() const [markets_data, setMarketsData] = useState(forex_specification.data) const [filtered_data, setFilteredData] = useState(forex_specification.data) - const [disclaimer, setDisclaimer] = useState(row_disclaimer) + const disclaimer = region === "row" ? row_disclaimer : eu_disclaimer; const is_rtl = useIsRtl() useEffect(() => { - if (is_eu) { + if (region === "eu") { setMarketsData(forex_specification.eu_data) setFilteredData(forex_specification.eu_data) - setDisclaimer(eu_disclaimer) } - }, [is_eu]) + }, [region]) useEffect(() => { market_specification.map((specification) => { if (specification.market === market) { - const specification_data = is_eu ? specification.eu_data : specification.data + const specification_data = region === "eu" ? specification.eu_data : specification.data setMarketsData(specification_data) setFilteredData(specification_data) } }) - }, [market]) + }, [market, region]) const [search_value, setSearchValue] = useState('') const [globalFilter, setGlobalFilter] = useState('') - const [sorting, setSorting] = React.useState([]) + const [sorting, setSorting] = useState([]) const columns = useLiveColumns(market) const table = useReactTable({ diff --git a/themes/gatsby-theme-deriv/src/pages/trading-specification/index.tsx b/themes/gatsby-theme-deriv/src/pages/trading-specification/index.tsx index 6d04f28929d..1181c715539 100644 --- a/themes/gatsby-theme-deriv/src/pages/trading-specification/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/trading-specification/index.tsx @@ -13,9 +13,10 @@ const StyledHeader = styled(Header)` font-family: 'Ubuntu'; ` -const TradingSpecification = () => { +const TradingSpecification = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext return ( - + diff --git a/themes/gatsby-theme-deriv/src/pages/unsubscribe/index.tsx b/themes/gatsby-theme-deriv/src/pages/unsubscribe/index.tsx index 0d11e1a89d3..353505193a0 100644 --- a/themes/gatsby-theme-deriv/src/pages/unsubscribe/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/unsubscribe/index.tsx @@ -123,7 +123,8 @@ const Spinner = () => ( ) -const UnsubscribePage = () => { +const UnsubscribePage = ({ pageContext }: TGatsbyHead) => { + const { region } = pageContext const [loading, setLoading] = useState(false) const [error, setError] = useState() const [data, setData] = useState() @@ -155,7 +156,7 @@ const UnsubscribePage = () => { }, [binary_user_id, checksum]) return ( - + {loading ? (