diff --git a/src/Context/ExperimentFlagsContext.js b/src/Context/ExperimentFlagsContext.js
new file mode 100644
index 00000000000..6f16607e875
--- /dev/null
+++ b/src/Context/ExperimentFlagsContext.js
@@ -0,0 +1,34 @@
+import { useLDClient } from 'gatsby-plugin-launchdarkly'
+import React, { createContext, useContext, useEffect, useState } from 'react'
+
+const ExperimentFlagsContext = createContext({
+ experimentFlags: {},
+})
+
+export const useExperimentFlags = () => useContext(ExperimentFlagsContext)
+
+export const ExperimentFlagsProvider = ({ children }) => {
+ const [experimentFlags, setExperimentFlags] = useState('')
+ const ldClient = useLDClient()
+
+ useEffect(() => {
+ if (!ldClient) {
+ return
+ }
+
+ const init = async () => {
+ await ldClient.waitUntilReady()
+ const flagsValue = ldClient.allFlags()
+ setExperimentFlags(flagsValue)
+ ldClient.flush()
+ }
+
+ init()
+ }, [ldClient])
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/ClientSideWrapper/Wrapper.js b/src/components/ClientSideWrapper/Wrapper.js
index d02e0893efd..c0ddc51ce98 100644
--- a/src/components/ClientSideWrapper/Wrapper.js
+++ b/src/components/ClientSideWrapper/Wrapper.js
@@ -4,6 +4,7 @@ import ContextClientSide from '../../Context/ContextClientSide'
import MetaMaskContextProvider from '../../Context/MetaMaskContextProvider'
import { DEFAULT_LOCALE, LOCALES_TRANSLATE } from '../../lib/config.mjs'
import { useLocation } from '@reach/router'
+import { ExperimentFlagsProvider } from '../../Context/ExperimentFlagsContext'
const ClientSideWrapper = ({ children }) => {
const location = useLocation()
@@ -47,9 +48,11 @@ const ClientSideWrapper = ({ children }) => {
}
return (
-
- {children}
-
+
+
+ {children}
+
+
)
}
diff --git a/src/components/Contentful/ContentfulModuleContainer.js b/src/components/Contentful/ContentfulModuleContainer.js
index 66b7a1dd6e7..93efff1f6d6 100644
--- a/src/components/Contentful/ContentfulModuleContainer.js
+++ b/src/components/Contentful/ContentfulModuleContainer.js
@@ -54,7 +54,7 @@ const ContentfulModuleContainer = props => {
const showLocaleProvidersOnBuyCryptoPage = useFeatureFlag({
componentName: 'PopupRegionSelector',
componentId: contentful_id,
- flagName: 'showLocaleProvidersOnBuyCryptoPage',
+ flagName: 'show-locale-providers-on-buy-crypto-page',
elementRef,
})
diff --git a/src/components/Header.js b/src/components/Header.js
index 153d46b18c1..1b7819cbf34 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -68,7 +68,7 @@ const StyledHeader = props => {
const showLanguageSelector = useFeatureFlag({
componentName: 'Header',
componentId: contentfulId,
- flagName: 'showLanguageSelector',
+ flagName: 'show-language-selector',
elementRef: languageSelectorRef,
})
diff --git a/src/hooks/useFeatureFlag.js b/src/hooks/useFeatureFlag.js
index cd7153c1f14..7f36b988124 100644
--- a/src/hooks/useFeatureFlag.js
+++ b/src/hooks/useFeatureFlag.js
@@ -1,5 +1,6 @@
-import { useFlags, useLDClient } from 'gatsby-plugin-launchdarkly'
+import { useLDClient } from 'gatsby-plugin-launchdarkly'
import { useEffect, useRef, useState } from 'react'
+import { useExperimentFlags } from '../Context/ExperimentFlagsContext'
export const useFeatureFlag = ({
componentName,
@@ -13,7 +14,7 @@ export const useFeatureFlag = ({
componentId,
}
- const flags = useFlags()
+ const { experimentFlags } = useExperimentFlags()
const ldClient = useLDClient()
const hasDataLayerUpdatedRef = useRef(false)
const [flagValue, setFlagValue] = useState(null)
@@ -47,10 +48,10 @@ export const useFeatureFlag = ({
}
useEffect(() => {
- if (!ldClient) return
-
- setFlagValue(flags[flagName])
- }, [ldClient])
+ if (experimentFlags?.[flagName]) {
+ setFlagValue(experimentFlags[flagName])
+ }
+ }, [experimentFlags, flagName])
useEffect(() => {
if (!ldClient) return
@@ -79,5 +80,5 @@ export const useFeatureFlag = ({
}
}, [ldClient, flagValue])
- return flags[flagName]
+ return experimentFlags?.[flagName]
}