chore: rename flag explore -> tokens (#4386)

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
-import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
+import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode, useState } from 'react'
@@ -184,10 +184,10 @@ export default function FeatureFlagModal() {
         label="NavBar"
       />
       <FeatureFlagOption
-        variants={Object.values(ExploreVariant)}
-        value={useExploreFlag()}
-        featureFlag={FeatureFlag.explore}
-        label="Explore"
+        variants={Object.values(TokensVariant)}
+        value={useTokensFlag()}
+        featureFlag={FeatureFlag.tokens}
+        label="Tokens"
       />
       <FeatureFlagOption
         variants={Object.values(TokenSafetyVariant)}

src/components/Header/index.tsx

@@ -3,7 +3,7 @@ import useScrollPosition from '@react-hook/window-scroll'
 import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
+import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
 import { NavLink, useLocation } from 'react-router-dom'
@@ -245,7 +245,7 @@ const StyledExternalLink = styled(ExternalLink)`
 `
 
 export default function Header() {
-  const exploreFlag = useExploreFlag()
+  const tokensFlag = useTokensFlag()
 
   const { account, chainId } = useWeb3React()
 
@@ -292,8 +292,8 @@ export default function Header() {
         <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
           <Trans>Swap</Trans>
         </StyledNavLink>
-        {exploreFlag === ExploreVariant.Enabled && (
-          <StyledNavLink id={`explore-nav-link`} to={'/tokens'}>
+        {tokensFlag === TokensVariant.Enabled && (
+          <StyledNavLink id={`tokens-nav-link`} to={'/tokens'}>
             <Trans>Tokens</Trans>
           </StyledNavLink>
         )}

src/components/NavBar/Navbar.tsx

@@ -83,8 +83,8 @@ const Navbar = () => {
             <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
               Swap
             </MenuItem>
-            <MenuItem href="/explore" isActive={pathname.startsWith('/explore')}>
-              Explore
+            <MenuItem href="/tokens" isActive={pathname.startsWith('/explore')}>
+              Tokens
             </MenuItem>
             <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
               Pool

src/featureFlags/flags/explore.ts → src/featureFlags/flags/tokens.ts

 import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
 
-export function useExploreFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.explore)
+export function useTokensFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.tokens)
 }
 
-export { BaseVariant as ExploreVariant }
+export { BaseVariant as TokensVariant }

src/featureFlags/index.tsx

@@ -54,10 +54,10 @@ export enum BaseVariant {
 }
 
 export enum FeatureFlag {
-  explore = 'explore',
   navBar = 'navBar',
   phase1 = 'phase1',
   redesign = 'redesign',
+  tokens = 'tokens',
   tokenSafety = 'tokenSafety',
 }
 

src/pages/App.tsx

@@ -4,9 +4,9 @@ import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
-import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
+import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { lazy, Suspense, useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
@@ -107,7 +107,7 @@ const LazyLoadSpinner = () => (
 
 export default function App() {
   const isLoaded = useFeatureFlagsIsLoaded()
-  const exploreFlag = useExploreFlag()
+  const tokensFlag = useTokensFlag()
   const navBarFlag = useNavBarFlag()
   const phase1Flag = usePhase1Flag()
 
@@ -156,7 +156,7 @@ export default function App() {
             <Suspense fallback={<Loader />}>
               {isLoaded ? (
                 <Routes>
-                  {exploreFlag === ExploreVariant.Enabled && (
+                  {tokensFlag === TokensVariant.Enabled && (
                     <>
                       <Route path="/tokens" element={<Explore />} />
                       <Route path="/tokens/:tokenAddress" element={<TokenDetails />} />