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 ? : } ) : (