diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 71f754a774..89cbf0ddc3 100644
--- a/src/components/NavBar/index.tsx
+++ b/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 = () => {
- {isNftPage && }
+ {isNftPage && (!isNftListV2 || sellPageState !== ProfilePageStateType.LISTING) && }
{!isNftPage && (
diff --git a/src/nft/components/profile/list/ListModal.tsx b/src/nft/components/profile/list/ListModal.tsx
new file mode 100644
index 0000000000..90d5376976
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ )
+}
diff --git a/src/nft/components/profile/list/ListPage.tsx b/src/nft/components/profile/list/ListPage.tsx
index 8aee315228..9af9b1c804 100644
--- a/src/nft/components/profile/list/ListPage.tsx
+++ b/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 (
-
+
{
@@ -215,6 +224,11 @@ export const ListPage = () => {
)}
+ {isNftListV2 && showListModal && (
+ <>
+
+ >
+ )}
)
}
diff --git a/src/nft/pages/profile/profile.tsx b/src/nft/pages/profile/profile.tsx
index 7083748397..1f6eff8a4b 100644
--- a/src/nft/pages/profile/profile.tsx
+++ b/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 (
@@ -50,7 +54,18 @@ const ProfileContent = () => {
Genie | Sell
*/}
{account ? (
-
+
{sellPageState === ProfilePageStateType.VIEWING ? : }
) : (