feat: [NFTListV2] convert old bag to modal (#5838)

* hide bag on list page

* use feature flag

* maxWidth

* convert existing bag to modal'

* add new file

* add overlay

* only show old padding with flag off

* set margin const

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

src/components/NavBar/index.tsx

@@ -1,11 +1,14 @@
 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'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
+import { useProfilePageState } from 'nft/hooks'
+import { ProfilePageStateType } from 'nft/types'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
@@ -79,6 +82,8 @@ export const PageTabs = () => {
 
 const Navbar = () => {
   const isNftPage = useIsNftPage()
+  const sellPageState = useProfilePageState((state) => state.state)
+  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const navigate = useNavigate()
 
   return (
@@ -120,7 +125,7 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {isNftPage && <Bag />}
+              {isNftPage && (!isNftListV2 || sellPageState !== ProfilePageStateType.LISTING) && <Bag />}
               {!isNftPage && (
                 <Box display={{ sm: 'none', lg: 'flex' }}>
                   <ChainSelector />

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

@@ -0,0 +1,30 @@
+import ListingModal from 'nft/components/bag/profile/ListingModal'
+import { Portal } from 'nft/components/common/Portal'
+import { Overlay } from 'nft/components/modals/Overlay'
+import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
+
+const ListModalWrapper = styled.div`
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 420px;
+  z-index: ${Z_INDEX.modalOverTooltip};
+  background: ${({ theme }) => theme.backgroundSurface};
+  border-radius: 20px;
+  border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  padding: 0px 12px 4px;
+`
+
+export const ListModal = ({ overlayClick }: { overlayClick: () => void }) => {
+  return (
+    <Portal>
+      <ListModalWrapper>
+        <ListingModal />
+      </ListModalWrapper>
+      <Overlay onClick={overlayClick} />
+    </Portal>
+  )
+}

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

@@ -9,14 +9,16 @@ import { BackArrowIcon } from 'nft/components/icons'
 import { headlineLarge, headlineSmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
+import { LIST_PAGE_MARGIN } from 'nft/pages/profile/profile'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
 import { fetchPrice, formatEth, formatUsdPrice } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
-import { useEffect, useMemo, useState } from 'react'
-import styled from 'styled-components/macro'
+import { useEffect, useMemo, useReducer, useState } from 'react'
+import styled, { css } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 
+import { ListModal } from './ListModal'
 import { NFTListingsGrid } from './NFTListingsGrid'
 import { SelectMarketplacesDropdown } from './SelectMarketplacesDropdown'
 import { SetDurationModal } from './SetDurationModal'
@@ -37,12 +39,16 @@ const ButtonsWrapper = styled(Row)`
   width: min-content;
 `
 
-const MarketWrap = styled.section`
+const MarketWrap = styled.section<{ isNftListV2: boolean }>`
   gap: 48px;
   margin: 0px auto;
-  padding: 0px 16px;
-  max-width: 1200px;
   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;
@@ -87,8 +93,10 @@ const FloatingConfirmationBar = styled(Row)`
   background: ${({ theme }) => theme.backgroundSurface};
   position: fixed;
   bottom: 32px;
-  margin: 0px 156px;
-  width: calc(100vw - 312px);
+  width: calc(100vw - ${LIST_PAGE_MARGIN * 2}px);
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1200px;
   z-index: ${Z_INDEX.under_dropdown};
 `
 
@@ -130,6 +138,7 @@ export const ListPage = () => {
   const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])
   const anyListingsMissingPrice = useMemo(() => !!listings.find((listing) => !listing.price), [listings])
   const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
+  const [showListModal, toggleShowListModal] = useReducer((s) => !s, false)
 
   useEffect(() => {
     fetchPrice().then((price) => {
@@ -158,7 +167,7 @@ export const ListPage = () => {
 
   return (
     <Column>
-      <MarketWrap>
+      <MarketWrap isNftListV2={isNftListV2}>
         <ListingHeader>
           <TitleWrapper>
             <BackArrowIcon
@@ -201,7 +210,7 @@ export const ListPage = () => {
               </ProceedsWrapper>
               <ListingButtonWrapper>
                 <ListingButton
-                  onClick={toggleBag}
+                  onClick={isNftListV2 ? toggleShowListModal : toggleBag}
                   buttonText={anyListingsMissingPrice ? t`Set prices to continue` : t`Start listing`}
                 />
               </ListingButtonWrapper>
@@ -215,6 +224,11 @@ export const ListPage = () => {
           <ListingButton onClick={toggleBag} buttonText="Continue listing" />
         </MobileListButtonWrapper>
       )}
+      {isNftListV2 && showListModal && (
+        <>
+          <ListModal overlayClick={toggleShowListModal} />
+        </>
+      )}
     </Column>
   )
 }

src/nft/pages/profile/profile.tsx

@@ -1,6 +1,7 @@
 import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
+import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { Box } from 'nft/components/Box'
 import { Center, Column } from 'nft/components/Flex'
 import { ListPage } from 'nft/components/profile/list/ListPage'
@@ -14,6 +15,8 @@ import { useToggleWalletModal } from 'state/application/hooks'
 
 import * as styles from './profile.css'
 
+export const LIST_PAGE_MARGIN = 156
+
 const SHOPPING_BAG_WIDTH = 360
 
 const ProfileContent = () => {
@@ -42,6 +45,7 @@ const ProfileContent = () => {
     }
   }, [account, resetSellAssets, setSellPageState, clearCollectionFilters])
   const cartExpanded = useBag((state) => state.bagExpanded)
+  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
 
   return (
     <Trace page={InterfacePageName.NFT_PROFILE_PAGE} shouldLogImpression>
@@ -50,7 +54,18 @@ const ProfileContent = () => {
           <title>Genie | Sell</title>
         </Head> */}
         {account ? (
-          <Box style={{ width: `calc(100% - ${cartExpanded ? SHOPPING_BAG_WIDTH : 0}px)` }}>
+          <Box
+            style={{
+              width: `calc(100% - ${
+                cartExpanded && (!isNftListV2 || sellPageState === ProfilePageStateType.VIEWING)
+                  ? SHOPPING_BAG_WIDTH
+                  : isNftListV2
+                  ? LIST_PAGE_MARGIN * 2
+                  : 0
+              }px)`,
+              margin: isNftListV2 ? `0px ${LIST_PAGE_MARGIN}px` : 'unset',
+            }}
+          >
             {sellPageState === ProfilePageStateType.VIEWING ? <ProfilePage /> : <ListPage />}
           </Box>
         ) : (