refactor: remove useFeatureFlagContext (#1660)

gatsby-browser.js

@@ -17,7 +17,6 @@ import {
 
 import { IntlProvider } from "react-intl"
 import AuthProvider from 'decentraland-gatsby/dist/context/Auth/AuthProvider'
-import FeatureFlagProvider from 'decentraland-gatsby/dist/context/FeatureFlag/FeatureFlagProvider'
 import segment from 'decentraland-gatsby/dist/utils/segment/segment'
 import Layout from './src/components/Layout/Layout'
 import Segment from "decentraland-gatsby/dist/components/Development/Segment"
@@ -31,7 +30,7 @@ const queryClient = new QueryClient()
 export const wrapRootElement = ({ element }) => {
   return (
     <AuthProvider sso={SSO_URL}>
-      <FeatureFlagProvider applicationName={["dao", "dapps"]}>{element}</FeatureFlagProvider>
+      {element}
       {SEGMENT_KEY && <Segment key="segment" segmentKey={SEGMENT_KEY} />}
     </AuthProvider>
   )

package.json

@@ -53,6 +53,7 @@
   },
   "homepage": "https://github.com/decentraland/governance#readme",
   "dependencies": {
+    "@dcl/feature-flags": "^1.2.0",
     "@dcl/schemas": "^9.11.1",
     "@dcl/ui-env": "1.3.0",
     "@jparnaudo/react-crypto-icons": "^1.0.5",

src/components/Layout/Layout.tsx

@@ -12,7 +12,6 @@ import {
   DROPDOWN_MENU_SIGN_OUT_EVENT,
 } from 'decentraland-dapps/dist/containers/Navbar/constants'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
-import useFeatureFlagContext from 'decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext'
 import useTrackContext from 'decentraland-gatsby/dist/context/Track/useTrackContext'
 import useTrackLinkContext from 'decentraland-gatsby/dist/context/Track/useTrackLinkContext'
 import { fetchManaBalance } from 'decentraland-gatsby/dist/utils/loader/manaBalance'
@@ -24,7 +23,9 @@ import type { PageProps } from 'gatsby'
 import { isEmpty } from 'lodash'
 
 import { getSupportedChainIds } from '../../helpers'
+import useDclFeatureFlags from '../../hooks/useDclFeatureFlags'
 import useDclProfile from '../../hooks/useDclProfile'
+import { FeatureFlags } from '../../utils/features'
 import ExternalLinkWarningModal from '../Modal/ExternalLinkWarningModal'
 import { LinkDiscordModal } from '../Modal/LinkDiscordModal/LinkDiscordModal'
 import WalletSelectorModal from '../Modal/WalletSelectorModal'
@@ -39,7 +40,7 @@ export type LayoutProps = Omit<PageProps, 'children'> & {
 export default function Layout({ children }: LayoutProps) {
   const [user, userState] = useAuthContext()
   const track = useTrackContext()
-  const [ff] = useFeatureFlagContext()
+  const { isFeatureFlagEnabled } = useDclFeatureFlags()
 
   const handleClickUserMenuOption = useTrackLinkContext(function (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
@@ -79,7 +80,7 @@ export default function Layout({ children }: LayoutProps) {
 
   const { profile, isLoadingDclProfile } = useDclProfile(user)
   const chainId = userState.chainId
-  const isAuthDappEnabled = ff.enabled('dapps-auth-dapp')
+  const isAuthDappEnabled = isFeatureFlagEnabled(FeatureFlags.AuthDapp)
 
   const { data: manaBalances } = useQuery({
     queryKey: [`manaBalances#${user}`],

src/components/Layout/LogIn.tsx

@@ -1,13 +1,13 @@
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
-import { DappsFeatureFlags } from 'decentraland-gatsby/dist/context/FeatureFlag/types'
-import useFeatureFlagContext from 'decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Container } from 'decentraland-ui/dist/components/Container/Container'
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
 import { SignIn } from 'decentraland-ui/dist/components/SignIn/SignIn'
 
 import { DCL_META_IMAGE_URL } from '../../constants'
+import useDclFeatureFlags from '../../hooks/useDclFeatureFlags'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import { FeatureFlags } from '../../utils/features'
 import locations, { navigate } from '../../utils/locations'
 import Text from '../Common/Typography/Text'
 
@@ -30,9 +30,9 @@ function handleBack() {
 function LogIn({ title, description }: Props) {
   const [, accountState] = useAuthContext()
   const t = useFormatMessage()
-  const [ff] = useFeatureFlagContext()
   const isMobile = useMobileMediaQuery()
-  const isAuthDappEnabled = ff.enabled(DappsFeatureFlags.AuthDappEnabled)
+  const { isFeatureFlagEnabled } = useDclFeatureFlags()
+  const isAuthDappEnabled = isFeatureFlagEnabled(FeatureFlags.AuthDapp)
 
   if (isMobile) {
     return (

src/hooks/useDclFeatureFlags.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react'
+
+import { FeatureFlagOptions, fetchFlags } from '@dcl/feature-flags'
+import { useQuery } from '@tanstack/react-query'
+
+export default function useFeatureFlags(options = { applicationName: ['dao', 'dapps'] }) {
+  const { data } = useQuery({
+    queryKey: ['featureFlags'],
+    queryFn: async () => {
+      const ff = await fetchFlags(options as FeatureFlagOptions)
+      return ff
+    },
+    refetchOnWindowFocus: false,
+  })
+
+  const isFeatureFlagEnabled = useCallback(
+    (value: string) => {
+      return !!data?.flags && !!data?.flags[value]
+    },
+    [data]
+  )
+
+  return {
+    data,
+    isFeatureFlagEnabled,
+  }
+}

src/pages/submit/update.tsx

@@ -3,8 +3,6 @@ import { SubmitHandler } from 'react-hook-form'
 
 import { useLocation } from '@reach/router'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
-import { DappsFeatureFlags } from 'decentraland-gatsby/dist/context/FeatureFlag/types'
-import useFeatureFlagContext from 'decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Container } from 'decentraland-ui/dist/components/Container/Container'
 import { SignIn } from 'decentraland-ui/dist/components/SignIn/SignIn'
@@ -29,12 +27,14 @@ import {
   UpdateSubmissionDetails,
 } from '../../entities/Updates/types'
 import { getLatestUpdate, getReleases } from '../../entities/Updates/utils'
+import useDclFeatureFlags from '../../hooks/useDclFeatureFlags'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import usePreventNavigation from '../../hooks/usePreventNavigation'
 import useProposal from '../../hooks/useProposal'
 import useProposalUpdate from '../../hooks/useProposalUpdate'
 import useProposalUpdates from '../../hooks/useProposalUpdates'
 import useVestingContractData from '../../hooks/useVestingContractData'
+import { FeatureFlags } from '../../utils/features'
 import locations, { navigate } from '../../utils/locations'
 
 import './submit.css'
@@ -84,7 +84,6 @@ export default function Update({ isEdit }: Props) {
 
   const [formDisabled, setFormDisabled] = useState(false)
   const location = useLocation()
-  const [ff] = useFeatureFlagContext()
   const params = useMemo(() => new URLSearchParams(location.search), [location.search])
   const updateId = params.get('id')
   const [isPreviewMode, setPreviewMode] = useState(false)
@@ -101,7 +100,8 @@ export default function Update({ isEdit }: Props) {
   const [csvInputField, patchCsvInputField] = useState<string | undefined>()
   const [validationState, patchValidationState] = useState<UpdateValidationState>(intialValidationState)
   const isValidToSubmit = Object.values(validationState).every((valid) => valid)
-  const isAuthDappEnabled = ff.enabled(DappsFeatureFlags.AuthDappEnabled)
+  const { isFeatureFlagEnabled } = useDclFeatureFlags()
+  const isAuthDappEnabled = isFeatureFlagEnabled(FeatureFlags.AuthDapp)
 
   usePreventNavigation(true)
 

src/utils/features.ts

@@ -1,6 +1,3 @@
 export enum FeatureFlags {
-  // Grant = 'dao-enabled-grants', @deprecateed
-  // Polygon = 'dao-enabled-polygon',
-  Ens = 'dao-enabled-ens',
-  Delegation = 'dao-enabled-delegation',
+  AuthDapp = 'dapps-auth-dapp',
 }