feat: add statsig feature gate for widget (#6011)

* feat: add statsig feature gate for widget

* feat: move statsig check into featureFlag infra

* fix: move statsig check deeper into feature flag code

* Update src/featureFlags/flags/featureFlags.ts
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/featureFlags/flags/dummyFeatureGate.ts
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

---------
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -3,11 +3,10 @@ import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { NATIVE_CHAIN_ID } from 'constants/tokens'
-import { FeatureGate } from 'featureFlags/flags/featureFlags'
+import { useDummyGateEnabled } from 'featureFlags/flags/dummyFeatureGate'
 import { CHAIN_ID_TO_BACKEND_NAME } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
-import { useGate } from 'statsig-react'
 import styled from 'styled-components/macro'
 import { StyledInternalLink } from 'theme'
 
@@ -89,7 +88,7 @@ export default function MobileBalanceSummaryFooter({ token }: { token: Currency
   const formattedBalance = formatCurrencyAmount(balance, NumberType.TokenNonTx)
   const formattedUsdValue = formatCurrencyAmount(useStablecoinValue(balance), NumberType.FiatTokenStats)
   const chain = CHAIN_ID_TO_BACKEND_NAME[token.chainId].toLowerCase()
-  const { value: isDummyGateFlagEnabled } = useGate(FeatureGate.DUMMY)
+  const isDummyGateFlagEnabled = useDummyGateEnabled()
 
   return (
     <Wrapper>

src/featureFlags/flags/dummyFeatureGate.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+function useDummyGateFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.statsigDummy)
+}
+
+export function useDummyGateEnabled(): boolean {
+  return useDummyGateFlag() === BaseVariant.Enabled
+}

src/featureFlags/flags/featureFlags.ts

+/**
+ * The value here must match the value in the statsig dashboard, if you plan to use statsig.
+ */
 export enum FeatureFlag {
   traceJsonRpc = 'traceJsonRpc',
   permit2 = 'permit2',
   payWithAnyToken = 'payWithAnyToken',
-  swapWidget = 'swapWidget',
+  swapWidget = 'swap_widget_replacement_enabled',
   gqlRouting = 'gqlRouting',
-}
-
-export enum FeatureGate {
-  DUMMY = 'web_dummy_gate_amplitude_id',
+  statsigDummy = 'web_dummy_gate_amplitude_id',
 }

src/featureFlags/index.tsx

 import { atomWithStorage, useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { createContext, ReactNode, useCallback, useContext } from 'react'
+import { useGate } from 'statsig-react'
 export { FeatureFlag } from './flags/featureFlags'
 
 interface FeatureFlagsContextType {
@@ -56,7 +57,12 @@ export enum BaseVariant {
 }
 
 export function useBaseFlag(flag: string, defaultValue = BaseVariant.Control): BaseVariant {
-  switch (useFeatureFlagsContext().flags[flag]) {
+  const { value: statsigValue } = useGate(flag) // non-existent gates return false
+  const featureFlagsContext = useFeatureFlagsContext()
+  if (statsigValue) {
+    return BaseVariant.Enabled
+  }
+  switch (featureFlagsContext.flags[flag]) {
     case 'enabled':
       return BaseVariant.Enabled
     case 'control':