fix: flag NetworkFilter (#4442)

feat: flag token table network filter

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -4,6 +4,7 @@ import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
+import { TokensNetworkFilterVariant, useTokensNetworkFilterFlag } from 'featureFlags/flags/tokensNetworkFilter'
 import { useWalletFlag, WalletVariant } from 'featureFlags/flags/wallet'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode, useState } from 'react'
@@ -190,6 +191,12 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.tokens}
         label="Tokens"
       />
+      <FeatureFlagOption
+        variants={Object.values(TokensNetworkFilterVariant)}
+        value={useTokensNetworkFilterFlag()}
+        featureFlag={FeatureFlag.tokensNetworkFilter}
+        label="Tokens Network Filter"
+      />
       <FeatureFlagOption
         variants={Object.values(TokenSafetyVariant)}
         value={useTokenSafetyFlag()}

src/featureFlags/flags/tokensNetworkFilter.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useTokensNetworkFilterFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.tokensNetworkFilter)
+}
+
+export { BaseVariant as TokensNetworkFilterVariant }

src/featureFlags/index.tsx

@@ -59,6 +59,7 @@ export enum FeatureFlag {
   nft = 'nfts',
   redesign = 'redesign',
   tokens = 'tokens',
+  tokensNetworkFilter = 'tokensNetworkFilter',
   tokenSafety = 'tokenSafety',
 }
 

src/pages/Tokens/index.tsx

@@ -8,6 +8,7 @@ import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
 import SearchBar from 'components/Tokens/TokenTable/SearchBar'
 import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
 import TokenTable from 'components/Tokens/TokenTable/TokenTable'
+import { TokensNetworkFilterVariant, useTokensNetworkFilterFlag } from 'featureFlags/flags/tokensNetworkFilter'
 import useExplorePageQuery from 'hooks/useExplorePageQuery'
 import { useAtomValue, useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
@@ -60,6 +61,7 @@ const FiltersWrapper = styled.div`
 `
 
 const Tokens = () => {
+  const tokensNetworkFilterFlag = useTokensNetworkFilterFlag()
   const favoriteTokens = useAtomValue<string[]>(favoritesAtom)
   const { data, error, loading } = useExplorePageQuery(favoriteTokens)
   const resetFilterString = useResetAtom(filterStringAtom)
@@ -78,7 +80,7 @@ const Tokens = () => {
         </TitleContainer>
         <FiltersWrapper>
           <FiltersContainer>
-            <NetworkFilter />
+            {tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && <NetworkFilter />}
             <FavoriteButton />
             <TimeSelector />
           </FiltersContainer>