Merge pull request #386 from MetaMask/improve-ld-support

fix: use an experiment flags context and evaluate it only once and fl…

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 (
+    <ExperimentFlagsContext.Provider value={{ experimentFlags }}>
+      {children}
+    </ExperimentFlagsContext.Provider>
+  )
+}

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 (
     <MetaMaskContextProvider>
-      <ContextClientSide.Provider value={valueContext}>
-        {children}
-      </ContextClientSide.Provider>
+      <ExperimentFlagsProvider>
+        <ContextClientSide.Provider value={valueContext}>
+          {children}
+        </ContextClientSide.Provider>
+      </ExperimentFlagsProvider>
     </MetaMaskContextProvider>
   )
 }

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,
   })
 

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,
   })
 

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