refactor: rename phase1flag to nftflag (#4414)

* rename phase1flag to nftflag

* add new flag file
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
-import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
+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'
@@ -166,10 +166,10 @@ export default function FeatureFlagModal() {
       </Header>
       <FlagGroupName>Phase 1</FlagGroupName>
       <FeatureFlagOption
-        variants={Object.values(Phase1Variant)}
-        value={usePhase1Flag()}
-        featureFlag={FeatureFlag.phase1}
-        label="All Phase 1 changes (nft features)."
+        variants={Object.values(NftVariant)}
+        value={useNftFlag()}
+        featureFlag={FeatureFlag.nft}
+        label="NFTs"
       />
       <FlagGroupName>Phase 0</FlagGroupName>
       <FeatureFlagOption

src/components/NavBar/MobileSidebar.tsx

 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
-import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column, Row } from 'nft/components/Flex'
@@ -135,7 +135,7 @@ export const MobileSideBar = () => {
   const togglePrivacyPolicy = useTogglePrivacyPolicy()
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
   const { pathname } = useLocation()
-  const phase1Flag = usePhase1Flag()
+  const nftFlag = useNftFlag()
   const isPoolActive =
     pathname.startsWith('/pool') ||
     pathname.startsWith('/add') ||
@@ -164,7 +164,7 @@ export const MobileSideBar = () => {
                 <NavLinkRow href="/tokens" close={toggleOpen} isActive={pathname.startsWith('/tokens')}>
                   Tokens
                 </NavLinkRow>
-                {phase1Flag === Phase1Variant.Enabled && (
+                {nftFlag === NftVariant.Enabled && (
                   <NavLinkRow href="/nfts" close={toggleOpen} isActive={pathname.startsWith('/nfts')}>
                     NFTs
                   </NavLinkRow>

src/components/NavBar/Navbar.tsx

 import Web3Status from 'components/Web3Status'
-import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { useWindowSize } from 'hooks/useWindowSize'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
@@ -63,7 +63,7 @@ const MobileNavbar = () => {
 const Navbar = () => {
   const { width: windowWidth } = useWindowSize()
   const { pathname } = useLocation()
-  const phase1Flag = usePhase1Flag()
+  const nftFlag = useNftFlag()
 
   if (windowWidth && windowWidth < breakpoints.desktopXl) {
     return <MobileNavbar />
@@ -90,7 +90,7 @@ const Navbar = () => {
             <MenuItem href="/tokens" isActive={pathname.startsWith('/explore')}>
               Tokens
             </MenuItem>
-            {phase1Flag === Phase1Variant.Enabled && (
+            {nftFlag === NftVariant.Enabled && (
               <MenuItem href="/nfts" isActive={pathname.startsWith('/nfts')}>
                 NFTs
               </MenuItem>

src/featureFlags/flags/phase1.ts → src/featureFlags/flags/nft.ts

 import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
 
-export function usePhase1Flag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.phase1)
+export function useNftFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.nft)
 }
 
-export { BaseVariant as Phase1Variant }
+export { BaseVariant as NftVariant }

src/featureFlags/index.tsx

@@ -56,7 +56,7 @@ export enum BaseVariant {
 export enum FeatureFlag {
   navBar = 'navBar',
   wallet = 'wallet',
-  phase1 = 'phase1',
+  nft = 'nfts',
   redesign = 'redesign',
   tokens = 'tokens',
   tokenSafety = 'tokenSafety',

src/pages/App.tsx

@@ -5,7 +5,7 @@ import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
-import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { lazy, Suspense, useEffect } from 'react'
@@ -109,7 +109,7 @@ export default function App() {
   const isLoaded = useFeatureFlagsIsLoaded()
   const tokensFlag = useTokensFlag()
   const navBarFlag = useNavBarFlag()
-  const phase1Flag = usePhase1Flag()
+  const nftFlag = useNftFlag()
 
   const { pathname } = useLocation()
   const currentPage = getCurrentPageFromLocation(pathname)
@@ -210,7 +210,7 @@ export default function App() {
 
                   <Route path="*" element={<RedirectPathToSwapOnly />} />
 
-                  {phase1Flag === Phase1Variant.Enabled && (
+                  {nftFlag === NftVariant.Enabled && (
                     <Route path="/nfts/collection/:contractAddress" element={<Collection />} />
                   )}
                 </Routes>