diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml index abac3c78820..b5491ab0ab9 100644 --- a/.github/workflows/production.yml +++ b/.github/workflows/production.yml @@ -50,7 +50,8 @@ jobs: - run: npm run format - run: npm run test - run: npm run build - + - run: echo $GIT_TAG_NAME > public/version.txt + - name: Remove Storybook uses: JesseTG/rm@v1.0.2 with: diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml index 6df6ee9734f..408d8dadde3 100644 --- a/.github/workflows/staging.yml +++ b/.github/workflows/staging.yml @@ -52,6 +52,8 @@ jobs: # - run: npm run test - run: npm run build # - run: npm run build:storybook + - run: echo $GITHUB_SHA > public/version.txt + - uses: olegtarasov/get-tag@v2.1 id: tagName # For using same tag for staging and production we need to uncomment these two below lines: diff --git a/crowdin/messages.json b/crowdin/messages.json index 16132c0d718..9ce1137d5dd 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -534,6 +534,7 @@ "517286342": "

To place a vanilla options contract, you’ll need to:

", "517833647": "Volatility 50 (1s) Index", "517844699": "Alibaba Group Holding Ltd", + "518861708": "Open a demo Deriv MT5 or demo Deriv X account and practise with an unlimited amount of virtual funds.", "518906831": "Can I use the same address to make a cryptocurrency deposit?", "519988278": "Fox Corp Class B", "520136698": "Boom 500 Index", @@ -587,7 +588,6 @@ "564216330": "<0>1 lot with 300 leverage:", "566274201": "1. Market", "567322404": "Antivirus", - "567501407": "Currently available on demo accounts only", "567739189": "Why do my Deriv MT5 positions always start with a loss?", "568729968": "responsive platform", "570656160": "You can use your Deriv MT5 demo account for as long as you want. However, if your account is inactive for 30 days, we'll deactivate it automatically.", @@ -933,6 +933,7 @@ "888978991": "Each of these indices replicates the performance of top publicly traded companies in financial markets in Europe.", "890646842": "White architecture building in Ipoh", "890667695": "45%", + "891650376": "Tiktok", "893607771": "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.", "893980632": "Have more questions? Check out the <0>FAQ section on the MQL5 website.", "894402947": "Fee per million", @@ -1908,6 +1909,7 @@ "1822982010": "<0>EFA.US The iShares MSCI EAFE ETF tracks an index of large- and mid-capitalisation developed market equities outside of the US and Canada.", "1823119628": "the Vanuatu Financial Services Commission", "1823770507": "DOT/USD", + "1823821664": "Available on Demo accounts only", "1824094317": "24x7 trading", "1826550764": "Why choose us", "1826719972": "stock indices", @@ -4155,6 +4157,9 @@ "-2121510827": "Sweden", "-1357648282": "For fair resolution of any complaints, please <0>chat with us. To learn more, see our <1>complaint policy.", "-1838458999": "For fair resolution of any complaints, please <0>chat with us.", + "-1131400885": "Deriv Investments (Europe) Limited", + "-1231248751": "Deriv Investments (Europe) Limited (Company No. C 70156), incorporated on the 22nd April 2015, is registered in Malta with its registered office located at Level 3, W Business Centre, Triq Dun Karm, Birkirkara BKR9033, Malta. Deriv Investments (Europe) Ltd is licensed in Malta and regulated by the Malta Financial Services Authority under the Investments Services Act <0>(view licence) to provide investment services.", + "-2051445931": "Clients in the European Union who wish to trade financial instruments can have accounts under Deriv Investments (Europe) Limited.", "-1446148261": "CFDs - Forex", "-1121949345": "CFDs - Stock indices", "-33096025": "CFDs - Cryptocurrencies", @@ -4162,9 +4167,6 @@ "-1238176624": "CFDs - Synthetics: Volatility 250 (1s) Index", "-1076679821": "Multipliers - Cryptocurrencies", "-812435767": "Multipliers - Synthetics: Crash 300 Index", - "-1131400885": "Deriv Investments (Europe) Limited", - "-1231248751": "Deriv Investments (Europe) Limited (Company No. C 70156), incorporated on the 22nd April 2015, is registered in Malta with its registered office located at Level 3, W Business Centre, Triq Dun Karm, Birkirkara BKR9033, Malta. Deriv Investments (Europe) Ltd is licensed in Malta and regulated by the Malta Financial Services Authority under the Investments Services Act <0>(view licence) to provide investment services.", - "-2051445931": "Clients in the European Union who wish to trade financial instruments can have accounts under Deriv Investments (Europe) Limited.", "-112814932": "Deriv (FX) Ltd", "-1269257733": "Clients in the rest of the world (except for restricted countries such as the USA, Canada, and Hong Kong) who wish to trade CFDs on forex and cryptocurrencies can have MT5 Financial STP accounts under Deriv (FX) Ltd.", "-2019617323": "Deriv (BVI) Ltd", @@ -4254,9 +4256,6 @@ "-943253121": "The term ‘margin’ refers to the deposit needed to open a leveraged position, which is a position larger than your capital investment and leads to increased market exposure.", "-339497727": "Trade types margin market", "-1009744297": "Use our margin calculator to calculate the margin required to increase your market exposure (the market value of your position) on Deriv’s CFD trading platforms.", - "-1603400333": "Open a demo CFDs account and practise with an unlimited amount of virtual funds.", - "-446423672": "Open a demo Deriv MT5, Deriv X, or Deriv cTrader account and practise with an unlimited amount of virtual funds.", - "-1978157334": "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.", "-1207172200": "Start trading CFDs on Deriv", "-1703690406": "When you trade CFDs on margin, you increase your market exposure, thus amplifying both your potential profit and potential loss.", "-843831637": "Stop loss", @@ -4293,6 +4292,8 @@ "-894512007": "favourite markets icon", "-252740007": "instant access icon", "-1156092900": "flexible icon", + "-1603400333": "Open a demo CFDs account and practise with an unlimited amount of virtual funds.", + "-1242544018": "Trade with a real Deriv MT5 or real Deriv X account and get access to high leverage to trade positions larger than your existing capital.", "-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.", diff --git a/gatsby-browser.js b/gatsby-browser.js index 0013d3a2736..daf40fd50f9 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,5 +1,4 @@ import React from 'react' -import { createRoot } from 'react-dom/client' import Cookies from 'js-cookie' import { isMobile } from 'react-device-detect' import { Analytics } from '@deriv/analytics' @@ -165,11 +164,4 @@ export const onRouteUpdate = ({ location }) => { }, 1500) } -export const replaceHydrateFunction = () => { - return (element, container) => { - const root = createRoot(container) - root.render(element) - } -} - export const wrapPageElement = WrapPagesWithLocaleContext diff --git a/src/components/elements/stepper-view.tsx b/src/components/elements/stepper-view.tsx index 4b858baab37..d7abd753ea3 100644 --- a/src/components/elements/stepper-view.tsx +++ b/src/components/elements/stepper-view.tsx @@ -2,8 +2,8 @@ import React from 'react' import styled, { css } from 'styled-components' import { useIsRtl } from 'components/hooks/use-isrtl' import CommonHeaderSection from 'components/elements/common-header-section' -import { TString } from 'types/generics' import { useBrowserResize } from 'components/hooks/use-browser-resize' +import { TString } from 'types/generics' const Checkmark = styled.span<{ is_rtl: boolean }>` display: inline-block; @@ -79,11 +79,16 @@ type StepperViewTickProps = { color?: string } +type StepperType = { + id: number + data: { + title: TString + subtitle: TString + } +} + type StepperViewProps = { - items: { - title?: TString - subtitle?: TString - }[] + items: StepperType[] } & Pick const handleLastBorder = (index, items) => { @@ -98,14 +103,14 @@ const StepperView = ({ pb, items }: StepperViewProps) => { return ( <> - {items.map((item, index) => ( -
+ {items.map(({ data: { title, subtitle } }, index) => ( +
> { @@ -27,11 +27,16 @@ function useDynamicVisibleContent>({ config, content, }: IUseDynamicVisibleContent): T[] { + const [items, setItems] = useState([]) const visible_items = useMemo(() => { return filterDynamicVisibleContent(content, config) }, [content, config]) - return visible_items + useEffect(() => { + setItems(visible_items) + }, [visible_items.length]) + + return items } export default useDynamicVisibleContent diff --git a/src/components/hooks/use-visible-content.tsx b/src/components/hooks/use-visible-content.tsx index d6c1c9e110d..2e33edf3c8a 100644 --- a/src/components/hooks/use-visible-content.tsx +++ b/src/components/hooks/use-visible-content.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { useEffect, useMemo, useState } from 'react' import { TSmartContent } from 'types/generics' export interface IUseVisibleContent> { @@ -23,11 +23,16 @@ function useVisibleContent>({ config, content, }: IUseVisibleContent): T[] { + const [items, setItems] = useState([]) const visible_items = useMemo(() => { return filterVisibleContent(content, config) }, [content, config]) - return visible_items + useEffect(() => { + setItems(visible_items) + }, [visible_items.length]) + + return items } export default useVisibleContent diff --git a/src/features/components/atoms/suspense-helper/index.tsx b/src/features/components/atoms/suspense-helper/index.tsx new file mode 100644 index 00000000000..9c200ea2172 --- /dev/null +++ b/src/features/components/atoms/suspense-helper/index.tsx @@ -0,0 +1,15 @@ +import React, { ReactNode, Suspense } from 'react' +import { usePageLoaded } from 'components/hooks/use-page-loaded' + +type SuspenseHelperProps = { + fallback?: ReactNode + children: ReactNode +} + +const SuspenseHelper = ({ fallback, children }: SuspenseHelperProps) => { + const [is_mounted] = usePageLoaded() + + return {!is_mounted ? fallback : children} +} + +export default SuspenseHelper diff --git a/src/features/components/molecules/layout-overlay/index.tsx b/src/features/components/molecules/layout-overlay/index.tsx index 66f001b891f..b3e47f89029 100644 --- a/src/features/components/molecules/layout-overlay/index.tsx +++ b/src/features/components/molecules/layout-overlay/index.tsx @@ -1,17 +1,30 @@ -import React, { Suspense, lazy } from 'react' +import React, { lazy, useEffect, useState } from 'react' import pMinDelay from 'p-min-delay' import loadable from '@loadable/component' import { overlay_container } from './layout-overlay.module.scss' -import CfdWarningBanner from './cfd-warning-banner' import Flex from 'features/components/atoms/flex-box' import { useIsRtl } from 'components/hooks/use-isrtl' +import { getLocationPathname, getLanguage } from 'common/utility' +import SuspenseHelper from 'features/components/atoms/suspense-helper' const LiveChatButton = loadable(() => pMinDelay(import('./live-chat-button'), 5000)) const WhatsappButton = loadable(() => pMinDelay(import('./whats-app-button'), 5000)) -const CookieBanner = lazy(() => pMinDelay(import('./cookie-banner'), 5000)) +const CookieBanner = lazy(() => import('./cookie-banner')) +const CfdWarningBanner = lazy(() => import('./cfd-warning-banner')) const LayoutOverlay = () => { const is_rtl = useIsRtl() + const [is_home, setIsHome] = useState(false) + + const isHomePage = () => { + const currentPath = getLocationPathname() + const language = getLanguage() + + return currentPath === `/${language}/` || currentPath === '/' + } + useEffect(() => { + setIsHome(isHomePage()) + }, []) return ( { align="end" > - }> + }> - + - + {is_home && ( + }> + + + )} ) } diff --git a/src/features/components/organisms/what-are-digital-options/index.tsx b/src/features/components/organisms/what-are-digital-options/index.tsx index d83af3bc82f..fc5b479553a 100644 --- a/src/features/components/organisms/what-are-digital-options/index.tsx +++ b/src/features/components/organisms/what-are-digital-options/index.tsx @@ -27,7 +27,9 @@ const WhatAreDigitalOptions = ({ gap={'8x'} className={options_heading_section} > - {is_coming_soon &&