feat: add info site migration feature flags (#7228)

* feat: add info site migration feature flags

* feat: feature flag modal improvements

* scrollbar padding

* button padding

src/components/FeatureFlagModal/FeatureFlagModal.tsx

+import Column from 'components/Column'
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { useCurrencyConversionFlag } from 'featureFlags/flags/currencyConversion'
 import { useForceUniswapXOnFlag } from 'featureFlags/flags/forceUniswapXOn'
 import { useFotAdjustmentsFlag } from 'featureFlags/flags/fotAdjustments'
+import { useInfoExploreFlag } from 'featureFlags/flags/infoExplore'
+import { useInfoLiveViewsFlag } from 'featureFlags/flags/infoLiveViews'
+import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage'
+import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP'
 import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { UniswapXVariant, useUniswapXFlag } from 'featureFlags/flags/uniswapx'
@@ -14,6 +19,7 @@ import { X } from 'react-feather'
 import { useModalIsOpen, useToggleFeatureFlags } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components'
+import { BREAKPOINTS } from 'theme'
 
 const StyledModal = styled.div`
   position: fixed;
@@ -25,7 +31,7 @@ const StyledModal = styled.div`
   height: fit-content;
   color: ${({ theme }) => theme.neutral1};
   font-size: 18px;
-  padding: 20px;
+  padding: 20px 0px;
   background-color: ${({ theme }) => theme.surface2};
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.surface3};
@@ -33,12 +39,26 @@ const StyledModal = styled.div`
   flex-direction: column;
   gap: 8px;
   border: 1px solid ${({ theme }) => theme.surface3};
+
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    max-height: 100vh;
+  }
 `
 
 function Modal({ open, children }: { open: boolean; children: ReactNode }) {
   return open ? <StyledModal>{children}</StyledModal> : null
 }
 
+const FlagsColumn = styled(Column)`
+  max-height: 600px;
+  overflow-y: auto;
+  padding: 0px 20px;
+
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    max-height: unset;
+  }
+`
+
 const Row = styled.div`
   display: flex;
   justify-content: space-between;
@@ -108,6 +128,7 @@ const FlagInfo = styled.div`
 const SaveButton = styled.button`
   border-radius: 12px;
   padding: 8px;
+  margin: 0px 20px;
   background: ${({ theme }) => theme.surface3};
   font-weight: 535;
   font-size: 16px;
@@ -202,6 +223,7 @@ export default function FeatureFlagModal() {
 
   return (
     <Modal open={open}>
+      <FlagsColumn>
         <Header>
           Feature Flag Settings
           <CloseButton onClick={toggle}>
@@ -256,6 +278,32 @@ export default function FeatureFlagModal() {
           featureFlag={FeatureFlag.fotAdjustedmentsEnabled}
           label="Enable fee-on-transfer UI and slippage adjustments"
         />
+        <FeatureFlagGroup name="Info Site Migration">
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useInfoExploreFlag()}
+            featureFlag={FeatureFlag.infoExplore}
+            label="Info site migration - Updating Token Explore Page"
+          />
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useInfoTDPFlag()}
+            featureFlag={FeatureFlag.infoTDP}
+            label="Info site migration - Updating Token Details Page"
+          />
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useInfoPoolPageFlag()}
+            featureFlag={FeatureFlag.infoPoolPage}
+            label="Info site migration - Adding Pool Details Page"
+          />
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useInfoLiveViewsFlag()}
+            featureFlag={FeatureFlag.infoLiveViews}
+            label="Info site migration - Support live view graphs"
+          />
+        </FeatureFlagGroup>
         <FeatureFlagGroup name="Debug">
           <FeatureFlagOption
             variant={TraceJsonRpcVariant}
@@ -264,6 +312,7 @@ export default function FeatureFlagModal() {
             label="Enables JSON-RPC tracing"
           />
         </FeatureFlagGroup>
+      </FlagsColumn>
       <SaveButton onClick={() => window.location.reload()}>Reload</SaveButton>
     </Modal>
   )

src/components/NavBar/MenuDropdown.tsx

@@ -209,7 +209,12 @@ export const MenuDropdown = () => {
                   <Trans>Legal & Privacy</Trans> ↗
                 </SecondaryLinkedText>
                 {(isDevelopmentEnv() || isStagingEnv()) && (
-                  <SecondaryLinkedText onClick={openFeatureFlagsModal}>
+                  <SecondaryLinkedText
+                    onClick={() => {
+                      toggleOpen()
+                      openFeatureFlagsModal()
+                    }}
+                  >
                     <Trans>Feature Flags</Trans>
                   </SecondaryLinkedText>
                 )}

src/featureFlags/flags/infoExplore.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useInfoExploreFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.infoExplore)
+}

src/featureFlags/flags/infoLiveViews.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useInfoLiveViewsFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.infoLiveViews)
+}

src/featureFlags/flags/infoPoolPage.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useInfoPoolPageFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.infoPoolPage)
+}

src/featureFlags/flags/infoTDP.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useInfoTDPFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.infoTDP)
+}

src/featureFlags/index.tsx

@@ -18,6 +18,10 @@ export enum FeatureFlag {
   multichainUX = 'multichain_ux',
   currencyConversion = 'currency_conversion',
   fotAdjustedmentsEnabled = 'fot_adjustments_enabled',
+  infoExplore = 'info_explore',
+  infoTDP = 'info_tdp',
+  infoPoolPage = 'info_pool_page',
+  infoLiveViews = 'info_live_views',
 }
 
 interface FeatureFlagsContextType {