feat: add main nft sell page (#4609)

* add main nft sell page

* remove background

* more precise naming
Co-authored-by: Charlie <charlie@uniswap.org>
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

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

+export const ListPage = () => {
+  return <div>List your NFTs</div>
+}

src/nft/components/sell/select/SelectPage.tsx

+export const SelectPage = () => {
+  return <div>Select NFTs to list</div>
+}

src/nft/hooks/index.ts

-export * from './useCart'
+export * from './useBag'
 export * from './useCollectionFilters'
 export * from './useFiltersExpanded'
 export * from './useGenieList'

src/nft/hooks/useCart.ts → src/nft/hooks/useBag.ts

 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
-interface CartState {
-  cartExpanded: boolean
-  toggleCart: () => void
+interface BagState {
+  bagExpanded: boolean
 }
 
-export const useCart = create<CartState>()(
+export const useBag = create<BagState>()(
   devtools(
     (set) => ({
-      cartExpanded: false,
-      toggleCart: () =>
-        set(({ cartExpanded }) => ({
-          cartExpanded: !cartExpanded,
+      bagExpanded: false,
+      toggleBag: () =>
+        set(({ bagExpanded }) => ({
+          bagExpanded: !bagExpanded,
         })),
     }),
-    { name: 'useCart' }
+    { name: 'useBag' }
   )
 )

src/nft/hooks/useGenieList.ts

+import { CollectionRow, ListingRow, ListingStatus } from 'nft/types'
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
-interface GenieListState {
+interface NFTListState {
   looksRareNonce: number
+  listingStatus: ListingStatus
+  listings: ListingRow[]
+  collectionsRequiringApproval: CollectionRow[]
   setLooksRareNonce: (nonce: number) => void
   getLooksRareNonce: () => number
+  setListingStatus: (status: ListingStatus) => void
+  setListings: (listings: ListingRow[]) => void
+  setCollectionsRequiringApproval: (collections: CollectionRow[]) => void
 }
 
-export const useGenieList = create<GenieListState>()(
+export const useNFTList = create<NFTListState>()(
   devtools((set, get) => ({
     looksRareNonce: 0,
+    listingStatus: ListingStatus.DEFINED,
+    listings: [],
+    collectionsRequiringApproval: [],
     setLooksRareNonce: (nonce) =>
       set(() => {
         return { looksRareNonce: nonce }
@@ -17,5 +27,17 @@ export const useGenieList = create<GenieListState>()(
     getLooksRareNonce: () => {
       return get().looksRareNonce
     },
+    setListingStatus: (status) =>
+      set(() => {
+        return { listingStatus: status }
+      }),
+    setListings: (listings) =>
+      set(() => {
+        return { listings }
+      }),
+    setCollectionsRequiringApproval: (collections) =>
+      set(() => {
+        return { collectionsRequiringApproval: collections }
+      }),
   }))
 )

src/nft/pages/sell/sell.css.ts

+import { style } from '@vanilla-extract/css'
+import { sprinkles } from 'nft/css/sprinkles.css'
+
+export const NAVBAR_HEIGHT = '72px'
+
+export const section = style([
+  sprinkles({
+    paddingLeft: { sm: '16', lg: '0' },
+    paddingRight: { sm: '16', lg: '0' },
+  }),
+  { maxWidth: '1000px', margin: '0 auto' },
+])
+
+export const notConnected = style({
+  height: '70vh',
+})
+
+export const mobileSellWrapper = style([
+  sprinkles({
+    position: { sm: 'fixed', md: 'static' },
+    top: { sm: '0', md: 'unset' },
+    zIndex: { sm: '3', md: 'auto' },
+    height: { sm: 'full', md: 'auto' },
+    width: { sm: 'full', md: 'auto' },
+    overflowY: 'scroll',
+  }),
+])
+
+export const mobileSellHeader = style([
+  sprinkles({
+    display: { sm: 'flex', md: 'none' },
+    paddingY: '24',
+    paddingX: '16',
+  }),
+  {
+    height: NAVBAR_HEIGHT,
+  },
+])

src/nft/pages/sell/sell.tsx

+import { useWeb3React } from '@web3-react/core'
+import { Box } from 'nft/components/Box'
+import { Center, Column, Row } from 'nft/components/Flex'
+import { ChevronLeftIcon, XMarkIcon } from 'nft/components/icons'
+import { ListPage } from 'nft/components/sell/list/ListPage'
+import { SelectPage } from 'nft/components/sell/select/SelectPage'
+import { buttonMedium, header2, headlineSmall } from 'nft/css/common.css'
+import { themeVars } from 'nft/css/sprinkles.css'
+import { useBag, useNFTList, useSellAsset, useSellPageState, useWalletCollections } from 'nft/hooks'
+import { ListingStatus, SellPageStateType } from 'nft/types'
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useToggleWalletModal } from 'state/application/hooks'
+
+import * as styles from './sell.css'
+
+const SHOPPING_BAG_WIDTH = 324
+
 const Sell = () => {
-  return <div>Sell NFTs</div>
+  const sellPageState = useSellPageState((state) => state.state)
+  const setSellPageState = useSellPageState((state) => state.setSellPageState)
+  const removeAllMarketplaceWarnings = useSellAsset((state) => state.removeAllMarketplaceWarnings)
+  const resetSellAssets = useSellAsset((state) => state.reset)
+  const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
+  const setListingStatus = useNFTList((state) => state.setListingStatus)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    removeAllMarketplaceWarnings()
+    setListingStatus(ListingStatus.DEFINED)
+  }, [removeAllMarketplaceWarnings, sellPageState, setListingStatus])
+
+  const { account } = useWeb3React()
+  const toggleWalletModal = useToggleWalletModal()
+
+  useEffect(() => {
+    resetSellAssets()
+    setSellPageState(SellPageStateType.SELECTING)
+    clearCollectionFilters()
+  }, [account, resetSellAssets, setSellPageState, clearCollectionFilters])
+  const cartExpanded = useBag((state) => state.bagExpanded)
+
+  const exitSellFlow = () => {
+    navigate(-1)
+  }
+
+  return (
+    <Box className={styles.mobileSellWrapper}>
+      {/* <Head> TODO: figure out metadata tagging
+          <title>Genie | Sell</title>
+        </Head> */}
+      <Row className={styles.mobileSellHeader}>
+        {sellPageState === SellPageStateType.LISTING && (
+          <Box marginRight="4" onClick={() => setSellPageState(SellPageStateType.SELECTING)}>
+            <ChevronLeftIcon height={28} width={28} />
+          </Box>
+        )}
+        <Box className={headlineSmall} paddingBottom="4" style={{ lineHeight: '28px' }}>
+          {sellPageState === SellPageStateType.SELECTING ? 'Select NFTs' : 'Create Listing'}
+        </Box>
+        <Box cursor="pointer" marginLeft="auto" marginRight="0" onClick={exitSellFlow}>
+          <XMarkIcon height={28} width={28} fill={themeVars.colors.blackBlue} />
+        </Box>
+      </Row>
+      {account != null ? (
+        <Box style={{ width: `calc(100% - ${cartExpanded ? SHOPPING_BAG_WIDTH : 0}px)` }}>
+          {sellPageState === SellPageStateType.SELECTING ? <SelectPage /> : <ListPage />}
+        </Box>
+      ) : (
+        <Column as="section" gap="60" className={styles.section}>
+          <div style={{ minHeight: '70vh' }}>
+            <Center className={styles.notConnected} flexDirection="column">
+              <Box as="span" className={header2} color="darkGray" marginBottom="24" display="block">
+                No items to display
+              </Box>
+              <Box as="button" className={buttonMedium} onClick={toggleWalletModal}>
+                Connect Wallet
+              </Box>
+            </Center>
+          </div>
+        </Column>
+      )}
+    </Box>
+  )
 }
 
 export default Sell