feat: ure flag

.env.base

@@ -24,6 +24,7 @@ REACT_APP_FEATURE_CHATWOOT=false
 REACT_APP_FEATURE_COINBASE_WALLET=true
 REACT_APP_FEATURE_ADVANCED_SLIPPAGE=true
 REACT_APP_FEATURE_WALLET_CONNECT_V2=false
+REACT_APP_FEATURE_FOX_DISCOUNTS=false
 
 # absolute URL prefix
 REACT_APP_ABSOLUTE_URL_PREFIX=https://app.shapeshift.com

.env.dev

@@ -1,6 +1,7 @@
 # feature flags
 REACT_APP_FEATURE_NFT_METADATA=true
 REACT_APP_FEATURE_WALLET_CONNECT_V2=true
+REACT_APP_FEATURE_FOX_DISCOUNTS=true
 
 # logging
 REACT_APP_REDUX_WINDOW=false
@@ -46,4 +47,4 @@ REACT_APP_COSMOS_NODE_URL=https://dev-daemon.cosmos.shapeshift.com
 REACT_APP_THORCHAIN_NODE_URL=https://dev-daemon.thorchain.shapeshift.com
 
 # thorchain
-REACT_APP_MIDGARD_URL=https://dev-indexer.thorchain.shapeshift.com/v2
+REACT_APP_MIDGARD_URL=https://dev-indexer.thorchain.shapeshift.com/v2

src/config.ts

@@ -146,6 +146,7 @@ const validators = {
   REACT_APP_EXPERIMENTAL_CUSTOM_SEND_NONCE: bool({ default: false }),
   REACT_APP_EXPERIMENTAL_MM_SNAPPY_FINGERS: bool({ default: false }),
   REACT_APP_SNAP_ID: str(),
+  REACT_APP_FEATURE_FOX_DISCOUNTS: bool({ default: false }),
 }
 
 function reporter<T>({ errors }: envalid.ReporterOptions<T>) {

src/pages/Trade/Trade.tsx

@@ -3,19 +3,21 @@ import { memo } from 'react'
 import { FeeExplainer } from 'components/FeeExplainer/FeeExplainer'
 import { Main } from 'components/Layout/Main'
 import { MultiHopTrade } from 'components/MultiHopTrade/MultiHopTrade'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { RecentTransactions } from 'pages/Dashboard/RecentTransactions'
 
 const maxWidth = { base: '100%', lg: 'container.sm' }
 const padding = { base: 0, md: 8 }
 
 export const Trade = memo(() => {
+  const foxDiscountsEnabled = useFeatureFlag('FoxDiscounts')
   return (
     <Main pt='4.5rem' mt='-4.5rem' px={0} display='flex' flex={1} width='full' hideBreadcrumbs>
       <Stack alignSelf='stretch' flex={1} minHeight={0} spacing={0}>
         <Container maxWidth={maxWidth} p={padding} position='relative' zIndex='2'>
           <MultiHopTrade />
         </Container>
-        <FeeExplainer />
+        {foxDiscountsEnabled && <FeeExplainer />}
         <Stack flexGrow={1}>
           <RecentTransactions />
         </Stack>

src/state/slices/preferencesSlice/preferencesSlice.ts

@@ -44,6 +44,7 @@ export type FeatureFlags = {
   WalletConnectV2: boolean
   CustomSendNonce: boolean
   Snaps: boolean
+  FoxDiscounts: boolean
 }
 
 export type Flag = keyof FeatureFlags
@@ -105,6 +106,7 @@ const initialState: Preferences = {
     WalletConnectV2: getConfig().REACT_APP_FEATURE_WALLET_CONNECT_V2,
     CustomSendNonce: getConfig().REACT_APP_EXPERIMENTAL_CUSTOM_SEND_NONCE,
     Snaps: getConfig().REACT_APP_EXPERIMENTAL_MM_SNAPPY_FINGERS,
+    FoxDiscounts: getConfig().REACT_APP_FEATURE_FOX_DISCOUNTS,
   },
   selectedLocale: simpleLocale(),
   balanceThreshold: '0',

src/test/mocks/store.ts

@@ -92,6 +92,7 @@ export const mockStore: ReduxState = {
       WalletConnectV2: false,
       CustomSendNonce: false,
       Snaps: false,
+      FoxDiscounts: false,
     },
     selectedLocale: 'en',
     balanceThreshold: '0',