feat: Details List CTAs correctly routes users to the list page with asset selected (#5204)

* start routing fn

* file renaming

* properly load NFtBalance data

* lazy load asset details

* extend useLoadNftBalance

* working go to list

* reset assets before routing

* reset state when entering via profile button

* remove cancel listing button
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -8,6 +8,8 @@ import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import useStablecoinPrice from 'hooks/useStablecoinPrice'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
+import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useMemo } from 'react'
 import { Copy, ExternalLink, Power } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
@@ -112,6 +114,10 @@ const AuthenticatedHeader = () => {
   const navigate = useNavigate()
   const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
 
+  const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
+  const resetSellAssets = useSellAsset((state) => state.reset)
+  const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
+
   const unclaimedAmount: CurrencyAmount<Token> | undefined = useUserUnclaimedAmount(account)
   const isUnclaimed = useUserHasAvailableClaim(account)
   const connectionType = getConnection(connector).type
@@ -133,6 +139,9 @@ const AuthenticatedHeader = () => {
   }, [balanceString, nativeCurrencyPrice])
 
   const navigateToProfile = () => {
+    resetSellAssets()
+    setSellPageState(ProfilePageStateType.VIEWING)
+    clearCollectionFilters()
     navigate('/nfts/profile')
     closeModal()
   }

src/nft/components/details/AssetPriceDetails.tsx

 import { useWeb3React } from '@web3-react/core'
 import { OpacityHoverState } from 'components/Common'
+import { useNftBalanceQuery } from 'graphql/data/nft/NftBalance'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import { CancelListingIcon, MinusIcon, PlusIcon } from 'nft/components/icons'
-import { useBag } from 'nft/hooks'
-import { CollectionInfoForAsset, GenieAsset, TokenType } from 'nft/types'
+import { useBag, useProfilePageState, useSellAsset } from 'nft/hooks'
+import { CollectionInfoForAsset, GenieAsset, ProfilePageStateType, TokenType, WalletAsset } from 'nft/types'
 import { ethNumberStandardFormatter, formatEthPrice, getMarketplaceIcon, timeLeft, useUsdPrice } from 'nft/utils'
 import { shortenAddress } from 'nft/utils/address'
 import { useMemo } from 'react'
@@ -178,12 +179,26 @@ const OwnerInformationContainer = styled.div`
 `
 
 export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
+  const navigate = useNavigate()
+  const USDPrice = useUsdPrice(asset)
+  const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
+  const selectSellAsset = useSellAsset((state) => state.selectSellAsset)
+  const resetSellAssets = useSellAsset((state) => state.reset)
+  const { account } = useWeb3React()
+  const assetsFilter = [{ address: asset.address, tokenId: asset.tokenId }]
+  const { walletAssets: ownerAssets } = useNftBalanceQuery(account ?? '', [], assetsFilter, 1)
+  const walletAsset: WalletAsset = useMemo(() => ownerAssets[0], [ownerAssets])
+
   const listing = asset.sellorders && asset.sellorders.length > 0 ? asset.sellorders[0] : undefined
   const cheapestOrder = asset.sellorders && asset.sellorders.length > 0 ? asset.sellorders[0] : undefined
   const expirationDate = cheapestOrder ? new Date(cheapestOrder.endAt) : undefined
-  const USDPrice = useUsdPrice(asset)
 
-  const navigate = useNavigate()
+  const goToListPage = () => {
+    resetSellAssets()
+    navigate('/nfts/profile')
+    selectSellAsset(walletAsset)
+    setSellPageState(ProfilePageStateType.LISTING)
+  }
 
   return (
     <Container>
@@ -216,17 +231,14 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
           <ThemedText.BodySecondary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary>
         )}
         {!listing ? (
-          <BuyNowButton assetInBag={false} margin={true} useAccentColor={true} onClick={() => navigate('/profile')}>
+          <BuyNowButton assetInBag={false} margin={true} useAccentColor={true} onClick={goToListPage}>
             <ThemedText.SubHeader lineHeight={'20px'}>List</ThemedText.SubHeader>
           </BuyNowButton>
         ) : (
           <>
-            <BuyNowButton assetInBag={false} margin={true} useAccentColor={false} onClick={() => navigate('/profile')}>
+            <BuyNowButton assetInBag={false} margin={true} useAccentColor={false} onClick={goToListPage}>
               <ThemedText.SubHeader lineHeight={'20px'}>Adjust listing</ThemedText.SubHeader>
             </BuyNowButton>
-            <BuyNowButton assetInBag={true} margin={false} useAccentColor={false} onClick={() => navigate('/profile')}>
-              <ThemedText.SubHeader lineHeight={'20px'}>Cancel listing</ThemedText.SubHeader>
-            </BuyNowButton>
           </>
         )}
       </BestPriceContainer>

src/nft/pages/asset/Asset.tsx

 import { Trace } from '@uniswap/analytics'
 import { PageName } from '@uniswap/analytics-events'
+import { useWeb3React } from '@web3-react/core'
 import { useDetailsQuery, useLoadDetailsQuery } from 'graphql/data/nft/Details'
+import { useLoadNftBalanceQuery } from 'graphql/data/nft/NftBalance'
 import { AssetDetails } from 'nft/components/details/AssetDetails'
 import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
 import { AssetPriceDetails } from 'nft/components/details/AssetPriceDetails'
@@ -63,7 +65,9 @@ const Asset = () => {
 
 const AssetPage = () => {
   const { tokenId, contractAddress } = useParams()
+  const { account } = useWeb3React()
   useLoadDetailsQuery(contractAddress, tokenId)
+  useLoadNftBalanceQuery(account, contractAddress, tokenId)
 
   return (
     <Suspense fallback={<AssetDetailsLoading />}>

src/nft/pages/profile/profile.tsx

@@ -12,11 +12,11 @@ import { buttonMedium, headlineMedium, headlineSmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useNFTList, useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
-import { Suspense, useEffect } from 'react'
+import { Suspense, useEffect, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useToggleWalletModal } from 'state/application/hooks'
 
-import * as styles from './sell.css'
+import * as styles from './profile.css'
 
 const SHOPPING_BAG_WIDTH = 360
 
@@ -35,12 +35,16 @@ const ProfileContent = () => {
   }, [removeAllMarketplaceWarnings, sellPageState, setListingStatus])
 
   const { account } = useWeb3React()
+  const accountRef = useRef(account)
   const toggleWalletModal = useToggleWalletModal()
 
   useEffect(() => {
-    resetSellAssets()
-    setSellPageState(ProfilePageStateType.VIEWING)
-    clearCollectionFilters()
+    if (accountRef.current !== account) {
+      accountRef.current = account
+      resetSellAssets()
+      setSellPageState(ProfilePageStateType.VIEWING)
+      clearCollectionFilters()
+    }
   }, [account, resetSellAssets, setSellPageState, clearCollectionFilters])
   const cartExpanded = useBag((state) => state.bagExpanded)