refactor: separate files for feature flags, use `BaseVariant` (#4278)

* flag file structure update

* move

* switch

* update imports

* imports

src/featureFlags/flags/phase0.ts

+import { BaseVariant, useBaseFlag } from '../index'
+
+export function usePhase0Flag(): BaseVariant {
+  return useBaseFlag('phase0')
+}
+
+export { BaseVariant as Phase0Variant }

src/featureFlag/index.tsx → src/featureFlags/index.tsx

@@ -33,34 +33,17 @@ export function useFeatureFlagsIsLoaded(): boolean {
   return useFeatureFlagsContext().isLoaded
 }
 
-// feature flag hooks
-
-export enum Phase0Variant {
-  Control = 'Control',
-  Enabled = 'Enabled',
-}
-
-export function usePhase0Flag(): Phase0Variant {
-  switch (useFeatureFlagsContext().flags['phase0']) {
-    case 'enabled':
-      return Phase0Variant.Enabled
-    case 'control':
-    default:
-      return Phase0Variant.Control
-  }
-}
-
-enum Phase1Variant {
+export enum BaseVariant {
   Control = 'Control',
   Enabled = 'Enabled',
 }
 
-export function usePhase1Flag(): Phase1Variant {
-  switch (useFeatureFlagsContext().flags['phase1']) {
+export function useBaseFlag(flag: string): BaseVariant {
+  switch (useFeatureFlagsContext().flags[flag]) {
     case 'enabled':
-      return Phase1Variant.Enabled
+      return BaseVariant.Enabled
     case 'control':
     default:
-      return Phase1Variant.Control
+      return BaseVariant.Control
   }
 }

src/index.tsx

@@ -3,7 +3,7 @@ import 'inter-ui'
 import 'polyfills'
 import 'components/analytics'
 
-import { FeatureFlagsProvider } from 'featureFlag'
+import { FeatureFlagsProvider } from 'featureFlags'
 import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
 import { MulticallUpdater } from 'lib/state/multicall'
 import { StrictMode } from 'react'

src/pages/App.tsx

@@ -4,7 +4,7 @@ import { CUSTOM_USER_PROPERTIES, EventName, PageName } from 'components/Amplitud
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
-import { useFeatureFlagsIsLoaded } from 'featureFlag'
+import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { lazy, Suspense } from 'react'
 import { useEffect } from 'react'

src/theme/index.tsx

-import { Phase0Variant, usePhase0Flag } from 'featureFlag'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import React, { useMemo } from 'react'
 import { Text, TextProps as TextPropsOriginal } from 'rebass'
 import styled, {