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] }