chore: remove nft feature flag (#5484)

* chore: remove nft feature flag

* add back wallet modal terms

* unused styles

* rm

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
@@ -202,9 +201,6 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-      <FeatureFlagGroup name="Phase 1">
-        <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
-      </FeatureFlagGroup>
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/NavBar/SearchBar.css.ts

@@ -72,13 +72,6 @@ export const searchBarContainerNft = style([
   },
 ])
 
-export const searchBarContainerNftOpen = style([
-  searchBarContainerNft,
-  {
-    boxShadow: vars.color.cardDropShadow,
-  },
-])
-
 export const searchBar = style([
   baseSearchStyle,
   sprinkles({
@@ -111,16 +104,6 @@ export const searchBarInput = style([
   }),
 ])
 
-export const searchBarDropdown = style([
-  baseSearchStyle,
-  sprinkles({
-    borderBottomLeftRadius: '12',
-    borderBottomRightRadius: '12',
-    height: { sm: 'viewHeight', md: 'auto' },
-    borderTop: 'none',
-  }),
-])
-
 export const searchBarDropdownNft = style([
   baseSearchNftStyle,
   sprinkles({
@@ -244,16 +227,6 @@ export const visible = style([
   }),
 ])
 
-export const searchContentCentered = style({
-  '@media': {
-    [`screen and (min-width: ${breakpoints.lg}px)`]: {
-      transform: `translateX(${DESKTOP_NAVBAR_WIDTH / 4}px)`,
-      transition: `transform ${vars.time[125]}`,
-      transitionTimingFunction: 'ease-out',
-    },
-  },
-})
-
 export const searchContentLeftAlign = style({
   '@media': {
     [`screen and (min-width: ${breakpoints.lg}px)`]: {

src/components/NavBar/SearchBar.tsx

@@ -3,7 +3,6 @@ import { t } from '@lingui/macro'
 import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
 import { BrowserEvent, ElementName, EventName, SectionName } from '@uniswap/analytics-events'
 import clsx from 'clsx'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -47,10 +46,8 @@ export const SearchBar = () => {
   const searchRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const { pathname } = useLocation()
-  const phase1Flag = useNftFlag()
   const isMobile = useIsMobile()
   const isTablet = useIsTablet()
-  const isPhase1 = phase1Flag === NftVariant.Enabled
 
   useOnClickOutside(searchRef, () => {
     isOpen && toggleOpen()
@@ -63,7 +60,7 @@ export const SearchBar = () => {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,
-      enabled: !!debouncedSearchValue.length && isPhase1,
+      enabled: !!debouncedSearchValue.length,
     }
   )
 
@@ -111,8 +108,6 @@ export const SearchBar = () => {
   }, [isOpen])
 
   const isMobileOrTablet = isMobile || isTablet
-  const showCenteredSearchContent =
-    !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet && searchValue.length === 0
 
   const trace = useTrace({ section: SectionName.NAVBAR_SEARCH })
 
@@ -122,12 +117,8 @@ export const SearchBar = () => {
     ...trace,
   }
   const placeholderText = useMemo(() => {
-    return phase1Flag === NftVariant.Enabled
-      ? isMobileOrTablet
-        ? t`Search`
-        : t`Search tokens and NFT collections`
-      : t`Search tokens`
-  }, [phase1Flag, isMobileOrTablet])
+    return isMobileOrTablet ? t`Search` : t`Search tokens and NFT collections`
+  }, [isMobileOrTablet])
 
   const handleKeyPress = useCallback(
     (event: any) => {
@@ -160,12 +151,12 @@ export const SearchBar = () => {
         position={{ sm: 'fixed', md: 'absolute', xl: 'relative' }}
         width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
-        className={isPhase1 ? styles.searchBarContainerNft : styles.searchBarContainer}
+        className={styles.searchBarContainerNft}
         display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
       >
         <Row
           className={clsx(
-            ` ${isPhase1 ? styles.nftSearchBar : styles.searchBar} ${!isOpen && !isMobile && magicalGradientOnHover} ${
+            ` ${styles.nftSearchBar} ${!isOpen && !isMobile && magicalGradientOnHover} ${
               isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)
             } `
           )}
@@ -177,7 +168,7 @@ export const SearchBar = () => {
           onClick={() => !isOpen && toggleOpen()}
           gap="12"
         >
-          <Box className={showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign}>
+          <Box className={styles.searchContentLeftAlign}>
             <Box display={{ sm: 'none', md: 'flex' }}>
               <MagnifyingGlassIcon />
             </Box>
@@ -199,15 +190,13 @@ export const SearchBar = () => {
                 setSearchValue(event.target.value)
               }}
               onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
-              className={`${styles.searchBarInput} ${
-                showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign
-              }`}
+              className={`${styles.searchBarInput} ${styles.searchContentLeftAlign}`}
               value={searchValue}
               ref={inputRef}
-              width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'}
+              width="full"
             />
           </TraceEvent>
-          {!isOpen && isPhase1 && <KeyShortCut>/</KeyShortCut>}
+          {!isOpen && <KeyShortCut>/</KeyShortCut>}
         </Row>
         <Box className={clsx(isOpen ? styles.visible : styles.hidden)}>
           {isOpen && (
@@ -217,7 +206,7 @@ export const SearchBar = () => {
               collections={reducedCollections}
               queryText={debouncedSearchValue}
               hasInput={debouncedSearchValue.length > 0}
-              isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)}
+              isLoading={tokensAreLoading || collectionsAreLoading}
             />
           )}
         </Box>

src/components/NavBar/SearchBarDropdown.tsx

 import { Trans } from '@lingui/macro'
 import { useTrace } from '@uniswap/analytics'
 import { NavBarSearchTypes, SectionName } from '@uniswap/analytics-events'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -116,9 +115,7 @@ export const SearchBarDropdown = ({
   const { pathname } = useLocation()
   const isNFTPage = useIsNftPage()
   const isTokenPage = pathname.includes('/tokens')
-  const phase1Flag = useNftFlag()
   const [resultsState, setResultsState] = useState<ReactNode>()
-  const isPhase1 = phase1Flag === NftVariant.Enabled
 
   const { data: trendingCollectionResults, isLoading: trendingCollectionsAreLoading } = useQuery(
     ['trendingCollections', 'eth', 'twenty_four_hours'],
@@ -157,7 +154,7 @@ export const SearchBarDropdown = ({
     trendingTokenResults?.forEach(updateSearchHistory)
   }, [trendingTokenResults, updateSearchHistory])
 
-  const trendingTokensLength = phase1Flag === NftVariant.Enabled ? (isTokenPage ? 3 : 2) : 4
+  const trendingTokensLength = isTokenPage ? 3 : 2
   const trendingTokens = useMemo(
     () =>
       trendingTokenResults
@@ -231,7 +228,6 @@ export const SearchBarDropdown = ({
         )
 
       const collectionSearchResults =
-        phase1Flag === NftVariant.Enabled ? (
         collections.length > 0 ? (
           <SearchBarDropdownSection
             hoveredIndex={hoveredIndex}
@@ -248,7 +244,6 @@ export const SearchBarDropdown = ({
         ) : (
           <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
         )
-        ) : null
 
       const currentState = () =>
         hasInput ? (
@@ -300,7 +295,7 @@ export const SearchBarDropdown = ({
                 isLoading={trendingTokensAreLoading}
               />
             )}
-            {!isTokenPage && phase1Flag === NftVariant.Enabled && (
+            {!isTokenPage && (
               <SearchBarDropdownSection
                 hoveredIndex={hoveredIndex}
                 startingIndex={shortenedHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
@@ -330,7 +325,6 @@ export const SearchBarDropdown = ({
     trendingTokens,
     trendingTokensAreLoading,
     hoveredIndex,
-    phase1Flag,
     toggleOpen,
     shortenedHistory,
     hasInput,
@@ -343,7 +337,7 @@ export const SearchBarDropdown = ({
   ])
 
   return (
-    <Box className={isPhase1 ? styles.searchBarDropdownNft : styles.searchBarDropdown}>
+    <Box className={styles.searchBarDropdownNft}>
       <Box opacity={isLoading ? '0.3' : '1'} transition="125">
         {resultsState}
       </Box>

src/components/NavBar/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
@@ -56,7 +55,6 @@ const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
 
 const PageTabs = () => {
   const { pathname } = useLocation()
-  const nftFlag = useNftFlag()
   const { chainId: connectedChainId } = useWeb3React()
   const chainName = chainIdToBackendName(connectedChainId)
 
@@ -77,11 +75,9 @@ const PageTabs = () => {
       <MenuItem href={`/tokens/${chainName.toLowerCase()}`} isActive={pathname.startsWith('/tokens')}>
         <Trans>Tokens</Trans>
       </MenuItem>
-      {nftFlag === NftVariant.Enabled && (
       <MenuItem href="/nfts" isActive={isNftPage}>
         <Trans>NFTs</Trans>
       </MenuItem>
-      )}
       <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
         <Trans>Pool</Trans>
       </MenuItem>

src/components/TopLevelModals/index.tsx

 import { useWeb3React } from '@web3-react/core'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
 import NftExploreBanner from 'nft/components/nftExploreBanner/NftExploreBanner'
 import { lazy } from 'react'
@@ -20,7 +19,6 @@ export default function TopLevelModals() {
   const blockedAccountModalOpen = useModalIsOpen(ApplicationModal.BLOCKED_ACCOUNT)
   const { account } = useWeb3React()
   const location = useLocation()
-  const isNftEnabled = useNftFlag() === NftVariant.Enabled
   const pageShowsNftPromoBanner =
     location.pathname.startsWith('/swap') ||
     location.pathname.startsWith('/tokens') ||
@@ -33,13 +31,9 @@ export default function TopLevelModals() {
       <AddressClaimModal isOpen={addressClaimOpen} onDismiss={addressClaimToggle} />
       <ConnectedAccountBlocked account={account} isOpen={open} />
       <Bag />
-      {isNftEnabled && (
-        <>
       <TransactionCompleteModal />
       <AirdropModal />
       {pageShowsNftPromoBanner && <NftExploreBanner />}
     </>
-      )}
-    </>
   )
 }

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -4,7 +4,6 @@ import { useWeb3React } from '@web3-react/core'
 import { getConnection } from 'connection/utils'
 import { getChainInfoOrDefault } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import useStablecoinPrice from 'hooks/useStablecoinPrice'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
@@ -111,7 +110,6 @@ const AuthenticatedHeader = () => {
     nativeCurrency: { symbol: nativeCurrencySymbol },
     explorer,
   } = getChainInfoOrDefault(chainId ? chainId : SupportedChainId.MAINNET)
-  const nftFlag = useNftFlag()
   const navigate = useNavigate()
   const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
 
@@ -179,17 +177,15 @@ const AuthenticatedHeader = () => {
           </Text>
           <USDText>${amountUSD.toFixed(2)} USD</USDText>
         </BalanceWrapper>
-        {nftFlag === NftVariant.Enabled && (
         <ProfileButton onClick={navigateToProfile} size={ButtonSize.medium} emphasis={ButtonEmphasis.medium}>
           <Trans>View and sell NFTs</Trans>
         </ProfileButton>
-        )}
         {isUnclaimed && (
           <UNIButton onClick={openClaimModal} size={ButtonSize.medium} emphasis={ButtonEmphasis.medium}>
             <Trans>Claim</Trans> {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} <Trans>reward</Trans>
           </UNIButton>
         )}
-        {nftFlag === NftVariant.Enabled && isClaimAvailable && (
+        {isClaimAvailable && (
           <UNIButton size={ButtonSize.medium} emphasis={ButtonEmphasis.medium} onClick={openNftModal}>
             <Trans>Claim Uniswap NFT Airdrop</Trans>
           </UNIButton>

src/components/WalletModal/index.tsx

@@ -8,7 +8,6 @@ import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
 import { networkConnection } from 'connection'
 import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import usePrevious from 'hooks/usePrevious'
 import { useCallback, useEffect, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
@@ -25,7 +24,6 @@ import { useModalIsOpen, useToggleWalletModal } from '../../state/application/ho
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink, ThemedText } from '../../theme'
 import AccountDetails from '../AccountDetails'
-import { LightCard } from '../Card'
 import Modal from '../Modal'
 import { CoinbaseWalletOption, OpenCoinbaseWalletOption } from './CoinbaseWalletOption'
 import { InjectedOption, InstallMetaMaskOption, MetaMaskOption } from './InjectedOption'
@@ -155,7 +153,6 @@ export default function WalletModal({
 
   const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets()
 
-  const nftFlagEnabled = useNftFlag() === NftVariant.Enabled
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
   const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account)
 
@@ -314,8 +311,8 @@ export default function WalletModal({
       )
     }
 
-    function getTermsOfService(nftFlagEnabled: boolean, walletView: string) {
-      if (nftFlagEnabled && walletView === WALLET_VIEWS.PENDING) return null
+    function getTermsOfService(walletView: string) {
+      if (walletView === WALLET_VIEWS.PENDING) return null
 
       const content = (
         <Trans>
@@ -324,18 +321,12 @@ export default function WalletModal({
           <ExternalLink href="https://uniswap.org/privacy-policy">Privacy Policy</ExternalLink>.
         </Trans>
       )
-      return nftFlagEnabled ? (
+      return (
         <AutoRow style={{ flexWrap: 'nowrap', padding: '4px 16px' }}>
           <ThemedText.BodySecondary fontSize={16} lineHeight="24px">
             {content}
           </ThemedText.BodySecondary>
         </AutoRow>
-      ) : (
-        <LightCard>
-          <AutoRow style={{ flexWrap: 'nowrap' }}>
-            <ThemedText.DeprecatedBody fontSize={12}>{content}</ThemedText.DeprecatedBody>
-          </AutoRow>
-        </LightCard>
       )
     }
 
@@ -356,7 +347,7 @@ export default function WalletModal({
               />
             )}
             {walletView !== WALLET_VIEWS.PENDING && <OptionGrid data-testid="option-grid">{getOptions()}</OptionGrid>}
-            {!pendingError && getTermsOfService(nftFlagEnabled, walletView)}
+            {!pendingError && getTermsOfService(walletView)}
           </AutoColumn>
         </ContentWrapper>
       </UpperSection>

src/components/Web3Status/index.tsx

@@ -5,7 +5,6 @@ import { useWeb3React } from '@web3-react/core'
 import { IconWrapper } from 'components/Identicon/StatusIcon'
 import WalletDropdown from 'components/WalletDropdown'
 import { getConnection } from 'connection/utils'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { Portal } from 'nft/components/common/Portal'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { getIsValidSwapQuote } from 'pages/Swap'
@@ -99,7 +98,6 @@ const Web3StatusConnectWrapper = styled.div<{ faded?: boolean }>`
 
 const Web3StatusConnected = styled(Web3StatusGeneric)<{
   pending?: boolean
-  isNftActive?: boolean
   isClaimAvailable?: boolean
 }>`
   background-color: ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
@@ -119,19 +117,19 @@ const Web3StatusConnected = styled(Web3StatusGeneric)<{
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
-    width: ${({ isNftActive, pending }) => isNftActive && !pending && '36px'};
+    width: ${({ pending }) => !pending && '36px'};
 
     ${IconWrapper} {
-      margin-right: ${({ isNftActive }) => isNftActive && 0};
+      margin-right: 0;
     }
   }
 `
 
-const AddressAndChevronContainer = styled.div<{ isNftActive?: boolean }>`
+const AddressAndChevronContainer = styled.div`
   display: flex;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
-    display: ${({ isNftActive }) => isNftActive && 'none'};
+    display: none;
   }
 `
 
@@ -212,7 +210,6 @@ function Web3StatusInner() {
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
 
   const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
-  const isNftActive = useNftFlag() === NftVariant.Enabled
 
   const allTransactions = useAllTransactions()
 
@@ -246,7 +243,6 @@ function Web3StatusInner() {
     return (
       <Web3StatusConnected
         data-testid="web3-status-connected"
-        isNftActive={isNftActive}
         onClick={toggleWallet}
         pending={hasPendingTransactions}
         isClaimAvailable={isClaimAvailable}
@@ -260,7 +256,7 @@ function Web3StatusInner() {
             <Loader stroke="white" />
           </RowBetween>
         ) : (
-          <AddressAndChevronContainer isNftActive={isNftActive}>
+          <AddressAndChevronContainer>
             <Text>{ENSName || shortenAddress(account)}</Text>
             {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
           </AddressAndChevronContainer>

src/featureFlags/flags/featureFlags.ts

 export enum FeatureFlag {
   favoriteTokens = 'favoriteTokens',
-  nft = 'nfts',
   traceJsonRpc = 'traceJsonRpc',
   multiNetworkBalances = 'multiNetworkBalances',
   landingPage = 'landingPage',

src/featureFlags/flags/nft.ts

-import { BaseVariant } from '../index'
-
-export function useNftFlag(): BaseVariant {
-  return BaseVariant.Enabled
-}
-
-export { BaseVariant as NftVariant }

src/pages/App.tsx

@@ -3,7 +3,6 @@ import { CustomUserProperties, EventName, getBrowser, PageName } from '@uniswap/
 import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
 import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
@@ -133,7 +132,6 @@ const LazyLoadSpinner = () => (
 
 export default function App() {
   const isLoaded = useFeatureFlagsIsLoaded()
-  const nftFlag = useNftFlag()
 
   const { pathname } = useLocation()
   const currentPage = getCurrentPageFromLocation(pathname)
@@ -169,7 +167,7 @@ export default function App() {
   }, [isExpertMode])
 
   useEffect(() => {
-    const scrollListener = (e: Event) => {
+    const scrollListener = () => {
       setScrolledState(window.scrollY > 0)
     }
     window.addEventListener('scroll', scrollListener)
@@ -247,8 +245,6 @@ export default function App() {
 
                   <Route path="*" element={<RedirectPathToSwapOnly />} />
 
-                  {nftFlag === NftVariant.Enabled && (
-                    <>
                   <Route
                     path="/nfts"
                     element={
@@ -290,8 +286,6 @@ export default function App() {
                       </Suspense>
                     }
                   />
-                    </>
-                  )}
                 </Routes>
               ) : (
                 <Loader />