chore: remove listv2 feature flag (#6009)

* remove listv2 feature flag

* no longer used styles and icons

* missed one

---------
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { GqlRoutingVariant, useGqlRoutingFlag } from 'featureFlags/flags/gqlRouting'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { PayWithAnyTokenVariant, usePayWithAnyTokenFlag } from 'featureFlags/flags/payWithAnyToken'
 import { Permit2Variant, usePermit2Flag } from 'featureFlags/flags/permit2'
 import { SwapWidgetVariant, useSwapWidgetFlag } from 'featureFlags/flags/swapWidget'
@@ -212,12 +211,6 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.permit2}
         label="Permit 2 / Universal Router"
       />
-      <FeatureFlagOption
-        variant={NftListV2Variant}
-        value={useNftListV2Flag()}
-        featureFlag={FeatureFlag.nftListV2}
-        label="NFT Listing Page v2"
-      />
       <FeatureFlagOption
         variant={PayWithAnyTokenVariant}
         value={usePayWithAnyTokenFlag()}

src/components/NavBar/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
@@ -82,7 +81,6 @@ export const PageTabs = () => {
 const Navbar = () => {
   const isNftPage = useIsNftPage()
   const sellPageState = useProfilePageState((state) => state.state)
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const navigate = useNavigate()
 
   return (
@@ -124,7 +122,7 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {isNftPage && (!isNftListV2 || sellPageState !== ProfilePageStateType.LISTING) && <Bag />}
+              {isNftPage && sellPageState !== ProfilePageStateType.LISTING && <Bag />}
               {!isNftPage && (
                 <Box display={{ sm: 'none', lg: 'flex' }}>
                   <ChainSelector />

src/featureFlags/flags/featureFlags.ts

 export enum FeatureFlag {
   traceJsonRpc = 'traceJsonRpc',
   permit2 = 'permit2',
-  nftListV2 = 'nftListV2',
   payWithAnyToken = 'payWithAnyToken',
   swapWidget = 'swapWidget',
   gqlRouting = 'gqlRouting',

src/featureFlags/flags/nftListV2.ts

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

src/nft/components/bag/Bag.tsx

@@ -3,7 +3,6 @@ import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { NFTEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { GqlRoutingVariant, useGqlRoutingFlag } from 'featureFlags/flags/gqlRouting'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { useNftRouteLazyQuery } from 'graphql/data/__generated__/types-and-hooks'
 import { useIsNftDetailsPage, useIsNftPage, useIsNftProfilePage } from 'hooks/useIsNftPage'
 import { BagFooter } from 'nft/components/bag/BagFooter'
@@ -139,7 +138,6 @@ const Bag = () => {
   const isDetailsPage = useIsNftDetailsPage()
   const isNFTPage = useIsNftPage()
   const isMobile = useIsMobile()
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const usingGqlRouting = useGqlRoutingFlag() === GqlRoutingVariant.Enabled
 
   const sendTransaction = useSendTransaction((state) => state.sendTransaction)
@@ -425,7 +423,7 @@ const Bag = () => {
                 color="white"
                 textAlign="center"
                 onClick={() => {
-                  ;(isMobile || isNftListV2) && toggleBag()
+                  toggleBag()
                   setProfilePageState(ProfilePageStateType.LISTING)
                   sendAnalyticsEvent(NFTEventName.NFT_PROFILE_PAGE_START_SELL, {
                     list_quantity: sellAssets.length,

src/nft/components/bag/profile/ListingButton.tsx

-import { Plural, t } from '@lingui/macro'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import { Plural, t, Trans } from '@lingui/macro'
 import ms from 'ms.macro'
 import { Box } from 'nft/components/Box'
-import { Row } from 'nft/components/Flex'
-import { ArrowRightIcon, HazardIcon, LoadingIcon, XMarkIcon } from 'nft/components/icons'
 import { BelowFloorWarningModal } from 'nft/components/profile/list/Modal/BelowFloorWarningModal'
-import { bodySmall } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
 import { useNFTList, useSellAsset } from 'nft/hooks'
 import { Listing, ListingStatus, WalletAsset } from 'nft/types'
 import { pluralize } from 'nft/utils/roundAndPluralize'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTheme } from 'styled-components/macro'
 import shallow from 'zustand/shallow'
 
@@ -64,15 +58,9 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
     }),
     shallow
   )
-
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const [showWarning, setShowWarning] = useState(false)
   const [canContinue, setCanContinue] = useState(false)
   const theme = useTheme()
-  const warningRef = useRef<HTMLDivElement>(null)
-  useOnClickOutside(warningRef, () => {
-    !isNftListV2 && setShowWarning(false)
-  })
 
   useEffect(() => {
     const [newCollectionsToApprove, newListings] = getListings(sellAssets)
@@ -126,7 +114,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
       }
     }
     // set number of issues
-    if (isNftListV2) {
+
     const foundIssues =
       Number(missingExpiration) +
       Number(overMaxExpiration) +
@@ -137,7 +125,6 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
     // Only show Resolve Issue text if there was a user submitted error (ie not when page loads with no prices set)
     if ((missingExpiration || overMaxExpiration || listingsAboveSellOrderFloor.length) && !showResolveIssues)
       toggleShowResolveIssues()
-    }
 
     const continueCheck = listingsBelowFloor.length === 0 && listingsAboveSellOrderFloor.length === 0
     setCanContinue(continueCheck)
@@ -151,7 +138,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
       listingsAboveSellOrderFloor,
       invalidPrices,
     ]
-  }, [isNftListV2, sellAssets, setIssues, showResolveIssues, toggleShowResolveIssues])
+  }, [sellAssets, setIssues, showResolveIssues, toggleShowResolveIssues])
 
   const [disableListButton, warningMessage] = useMemo(() => {
     const disableListButton =
@@ -220,7 +207,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
 
   const warningWrappedClick = () => {
     if ((!disableListButton && canContinue) || showWarningOverride) {
-      if (issues && isNftListV2) !showResolveIssues && toggleShowResolveIssues()
+      if (issues) !showResolveIssues && toggleShowResolveIssues()
       else if (listingsBelowFloor.length) setShowWarning(true)
       else onClick()
     } else addWarningMessages()
@@ -229,49 +216,6 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
   return (
     <>
       <Box position="relative">
-        {!showWarningOverride && showWarning && warningMessage.length > 0 && (
-          <Row
-            className={`${bodySmall} ${styles.warningTooltip}`}
-            transition="250"
-            onClick={() => setShowWarning(false)}
-            color="textSecondary"
-            zIndex="3"
-            borderRadius="4"
-            backgroundColor="backgroundSurface"
-            height={!disableListButton ? '64' : '36'}
-            maxWidth="276"
-            position="absolute"
-            left="24"
-            bottom="52"
-            flexWrap={!disableListButton ? 'wrap' : 'nowrap'}
-            style={{ maxWidth: !disableListButton ? '225px' : '' }}
-            ref={warningRef}
-          >
-            <HazardIcon />
-            <Box marginLeft="4" marginRight="8">
-              {warningMessage}
-            </Box>
-            {disableListButton ? (
-              <Box paddingTop="6">
-                <XMarkIcon fill={themeVars.colors.textSecondary} height="20" width="20" />
-              </Box>
-            ) : (
-              <Row
-                marginLeft="72"
-                cursor="pointer"
-                color="accentAction"
-                onClick={() => {
-                  setShowWarning(false)
-                  setCanContinue(true)
-                  onClick()
-                }}
-              >
-                Continue
-                <ArrowRightIcon height="20" width="20" />
-              </Row>
-            )}
-          </Row>
-        )}
         <Box
           as="button"
           border="none"
@@ -294,27 +238,18 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
                 : 1,
           }}
         >
-          {listingStatus === ListingStatus.SIGNING || listingStatus === ListingStatus.PENDING ? (
-            isNftListV2 ? (
-              listingStatus === ListingStatus.PENDING ? (
-                'Pending'
-              ) : (
-                'Proceed in wallet'
-              )
-            ) : (
-              <Row gap="8">
-                <LoadingIcon stroke="backgroundSurface" height="20" width="20" />
-                {listingStatus === ListingStatus.PENDING ? 'Pending' : 'Proceed in wallet'}
-              </Row>
-            )
+          {listingStatus === ListingStatus.SIGNING ? (
+            <Trans>Proceed in wallet</Trans>
+          ) : listingStatus === ListingStatus.PENDING ? (
+            <Trans>Pending</Trans>
           ) : listingStatus === ListingStatus.APPROVED ? (
-            'Complete!'
+            <Trans>Complete!</Trans>
           ) : listingStatus === ListingStatus.PAUSED ? (
-            'Paused'
+            <Trans>Paused</Trans>
           ) : listingStatus === ListingStatus.FAILED ? (
-            'Try again'
+            <Trans>Try again</Trans>
           ) : listingStatus === ListingStatus.CONTINUE ? (
-            'Continue'
+            <Trans>Continue</Trans>
           ) : showResolveIssues ? (
             <Plural value={issues !== 1 ? 2 : 1} _1="Resolve issue" other={t`Resolve ${issues} issues`} />
           ) : (

src/nft/components/icons.tsx

@@ -337,16 +337,6 @@ export const ApprovedCheckmarkIcon = (props: SVGProps) => (
   </svg>
 )
 
-export const HazardIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="8.57227" y="6.66669" width="2.85714" height="8.57143" fill="white" />
-    <path
-      d="M5.14158 15.7143H14.8489C15.8017 15.7143 16.4294 15.0318 16.4294 14.1977C16.4294 13.9377 16.3509 13.6885 16.2052 13.4502L11.3516 5.05483C11.0489 4.53486 10.5221 4.28571 9.99523 4.28571C9.46839 4.28571 8.93034 4.53486 8.6389 5.05483L3.78524 13.4502C3.63952 13.6885 3.57227 13.9377 3.57227 14.1977C3.57227 15.0318 4.18878 15.7143 5.14158 15.7143ZM9.99523 11.4245C9.56928 11.4245 9.25542 11.1428 9.24421 10.7312L9.15453 7.71969C9.14332 7.24305 9.49081 6.90724 9.99523 6.90724C10.5109 6.90724 10.8584 7.23222 10.8471 7.71969L10.7575 10.7312C10.7351 11.1428 10.4324 11.4245 9.99523 11.4245ZM9.99523 14.0677C9.43477 14.0677 8.98639 13.6452 8.98639 13.1036C8.98639 12.5728 9.43477 12.1503 9.99523 12.1503C10.5669 12.1503 11.0153 12.5836 11.0153 13.1036C11.0041 13.6452 10.5669 14.0677 9.99523 14.0677Z"
-      fill="#F95E14"
-    />
-  </svg>
-)
-
 export const FailedListingIcon = (props: SVGProps) => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path

src/nft/components/profile/list/ListPage.tsx

@@ -4,11 +4,9 @@ import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import Column from 'components/Column'
 import Row from 'components/Row'
-import { SMALL_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { ListingButton } from 'nft/components/bag/profile/ListingButton'
 import { approveCollectionRow, getListingState, getTotalEthValue, verifyStatus } from 'nft/components/bag/profile/utils'
-import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
+import { useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
 import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from 'nft/pages/profile/shared'
 import { looksRareNonceFetcher } from 'nft/queries'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
@@ -16,7 +14,7 @@ import { fetchPrice, formatEth, formatUsdPrice } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { useEffect, useMemo, useReducer, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 import shallow from 'zustand/shallow'
@@ -81,20 +79,11 @@ const ButtonsWrapper = styled(Row)`
   width: min-content;
 `
 
-const MarketWrap = styled.section<{ isNftListV2: boolean }>`
+const MarketWrap = styled.section`
   gap: 48px;
   margin: 0px auto;
   width: 100%;
   max-width: 1200px;
-  ${({ isNftListV2 }) => !isNftListV2 && v1Padding}
-`
-
-const v1Padding = css`
-  padding: 0px 16px;
-
-  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    padding: 0px 44px;
-  }
 `
 
 const ListingHeaderRow = styled(Row)`
@@ -112,15 +101,6 @@ const GridWrapper = styled.div`
   margin-bottom: 48px;
 `
 
-const MobileListButtonWrapper = styled.div`
-  display: flex;
-  margin: 14px 16px 32px 16px;
-
-  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
-
 const FloatingConfirmationBar = styled(Row)<{ issues: boolean }>`
   padding: 12px 12px 12px 32px;
   border: 1px solid;
@@ -195,9 +175,7 @@ const EthValueWrapper = styled.span<{ totalEthListingValue: boolean }>`
 export const ListPage = () => {
   const { setProfilePageState: setSellPageState } = useProfilePageState()
   const { provider } = useWeb3React()
-  const toggleBag = useBag((s) => s.toggleBag)
   const isMobile = useIsMobile()
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const trace = useTrace({ modal: InterfaceModalName.NFT_LISTING })
   const { setGlobalMarketplaces, sellAssets, issues } = useSellAsset(
     ({ setGlobalMarketplaces, sellAssets, issues }) => ({
@@ -308,7 +286,7 @@ export const ListPage = () => {
 
   return (
     <Column>
-      <MarketWrap isNftListV2={isNftListV2}>
+      <MarketWrap>
         <ListingHeader>
           <Row>
             <ArrowContainer>
@@ -332,8 +310,7 @@ export const ListPage = () => {
           <NFTListingsGrid selectedMarkets={selectedMarkets} />
         </GridWrapper>
       </MarketWrap>
-      {isNftListV2 && (
-        <>
+
       <FloatingConfirmationBar issues={!!issues}>
         {BannerText}
         <ProceedsAndButtonWrapper>
@@ -353,18 +330,8 @@ export const ListPage = () => {
         </ProceedsAndButtonWrapper>
       </FloatingConfirmationBar>
       <Overlay />
-        </>
-      )}
-      {!isNftListV2 && (
-        <MobileListButtonWrapper>
-          <ListingButton onClick={toggleBag} buttonText="Continue listing" />
-        </MobileListButtonWrapper>
-      )}
-      {isNftListV2 && showListModal && (
-        <>
-          <ListModal overlayClick={toggleShowListModal} />
-        </>
-      )}
+
+      {showListModal && <ListModal overlayClick={toggleShowListModal} />}
     </Column>
   )
 }

src/nft/pages/profile/profile.tsx

+import { Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { ButtonPrimary } from 'components/Button'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { XXXL_BAG_WIDTH } from 'nft/components/bag/Bag'
 import { ListPage } from 'nft/components/profile/list/ListPage'
 import { ProfilePage } from 'nft/components/profile/view/ProfilePage'
@@ -26,17 +26,17 @@ const ProfilePageWrapper = styled.div`
   }
 `
 
-const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isOnV2ListPage: boolean }>`
+const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isListingNfts: boolean }>`
   width: calc(
     100% -
-      ${({ cartExpanded, isOnV2ListPage }) =>
-        isOnV2ListPage ? LIST_PAGE_MARGIN * 2 : cartExpanded ? XXXL_BAG_WIDTH : 0}px
+      ${({ cartExpanded, isListingNfts }) =>
+        isListingNfts ? LIST_PAGE_MARGIN * 2 : cartExpanded ? XXXL_BAG_WIDTH : 0}px
   );
-  margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN : 0)}px;
+  margin: 0px ${({ isListingNfts }) => (isListingNfts ? LIST_PAGE_MARGIN : 0)}px;
 
   @media screen and (max-width: ${BREAKPOINTS.sm}px) {
-    width: calc(100% - ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE * 2 : 0)}px);
-    margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE : 0)}px;
+    width: calc(100% - ${({ isListingNfts }) => (isListingNfts ? LIST_PAGE_MARGIN_MOBILE * 2 : 0)}px);
+    margin: 0px ${({ isListingNfts }) => (isListingNfts ? LIST_PAGE_MARGIN_MOBILE : 0)}px;
   }
 `
 
@@ -85,25 +85,23 @@ const ProfileContent = () => {
     }
   }, [account, resetSellAssets, setSellPageState, clearCollectionFilters])
   const cartExpanded = useBag((state) => state.bagExpanded)
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const isListingNfts = sellPageState === ProfilePageStateType.LISTING
-  const isOnV2ListPage = isNftListV2 && isListingNfts
 
   return (
     <Trace page={InterfacePageName.NFT_PROFILE_PAGE} shouldLogImpression>
       <ProfilePageWrapper>
         {account ? (
-          <LoadedAccountPage cartExpanded={cartExpanded} isOnV2ListPage={isOnV2ListPage}>
+          <LoadedAccountPage cartExpanded={cartExpanded} isListingNfts={isListingNfts}>
             {!isListingNfts ? <ProfilePage /> : <ListPage />}
           </LoadedAccountPage>
         ) : (
           <Center>
             <ThemedText.HeadlineMedium lineHeight="36px" color="textSecondary" fontWeight="600" marginBottom="24px">
-              No items to display
+              <Trans>No items to display</Trans>
             </ThemedText.HeadlineMedium>
             <ConnectWalletButton onClick={toggleWalletModal}>
               <ThemedText.SubHeader color="white" lineHeight="20px">
-                Connect Wallet
+                <Trans>Connect Wallet</Trans>
               </ThemedText.SubHeader>
             </ConnectWalletButton>
           </Center>