feat: Placeholder NFT Details and NFT Sell Pages (#4431)

* add placeholder pages for nft sell and nft details

* feature flag link in navbar dropdown
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/MenuDropdown.tsx

 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -9,6 +10,7 @@ import {
   EllipsisIcon,
   GithubIconMenu,
   GovernanceIcon,
+  ThinTagIcon,
   TwitterIconMenu,
 } from 'nft/components/icons'
 import { body, bodySmall } from 'nft/css/common.css'
@@ -114,6 +116,7 @@ export const MenuDropdown = () => {
   const [isOpen, toggleOpen] = useReducer((s) => !s, false)
   const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
+  const nftFlag = useNftFlag()
 
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
@@ -129,6 +132,14 @@ export const MenuDropdown = () => {
           <NavDropdown top={60}>
             <Column gap="12">
               <Column paddingX="16" gap="4">
+                {nftFlag === NftVariant.Enabled && (
+                  <PrimaryMenuRow to="/nft/sell" close={toggleOpen}>
+                    <Icon>
+                      <ThinTagIcon width={24} height={24} />
+                    </Icon>
+                    <PrimaryMenuRow.Text>Sell NFTs</PrimaryMenuRow.Text>
+                  </PrimaryMenuRow>
+                )}
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIcon width={24} height={24} />

src/components/NavBar/MobileSidebar.tsx

@@ -12,6 +12,7 @@ import {
   GithubIconMenuMobile,
   GovernanceIconMobile,
   HamburgerIcon,
+  ThinTagIconMobile,
   TwitterIconMenuMobile,
 } from 'nft/components/icons'
 import { themeVars } from 'nft/css/sprinkles.css'
@@ -175,6 +176,14 @@ export const MobileSideBar = () => {
               </Column>
               <Seperator />
               <Column gap="4">
+                {nftFlag === NftVariant.Enabled && (
+                  <ExtraLinkRow to="/nft/sell" close={toggleOpen}>
+                    <Icon>
+                      <ThinTagIconMobile width={24} height={24} />
+                    </Icon>
+                    Sell NFTs
+                  </ExtraLinkRow>
+                )}
                 <ExtraLinkRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIconMobile width={24} height={24} />

src/nft/pages/asset/Asset.tsx

+const Asset = () => {
+  return <div>NFT Details Page</div>
+}
+
+export default Asset

src/nft/pages/sell/sell.tsx

+const Sell = () => {
+  return <div>Sell NFTs</div>
+}
+
+export default Sell

src/pages/App.tsx

@@ -44,6 +44,8 @@ import Tokens from './Tokens'
 const TokenDetails = lazy(() => import('./TokenDetails'))
 const Vote = lazy(() => import('./Vote'))
 const Collection = lazy(() => import('nft/pages/collection'))
+const Sell = lazy(() => import('nft/pages/sell/sell'))
+const Asset = lazy(() => import('nft/pages/asset/Asset'))
 
 const AppWrapper = styled.div`
   display: flex;
@@ -211,7 +213,11 @@ export default function App() {
                   <Route path="*" element={<RedirectPathToSwapOnly />} />
 
                   {nftFlag === NftVariant.Enabled && (
+                    <>
                       <Route path="/nfts/collection/:contractAddress" element={<Collection />} />
+                      <Route path="/nft/sell" element={<Sell />} />
+                      <Route path="/nft/asset/:contractAddress/:tokenId" element={<Asset />} />
+                    </>
                   )}
                 </Routes>
               ) : (