From ce79774de9d63046e1e6b8ead63207cef1483a3a Mon Sep 17 00:00:00 2001 From: Charles Bachmeier Date: Mon, 14 Nov 2022 19:26:10 -0500 Subject: [PATCH] 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 --- .../WalletDropdown/AuthenticatedHeader.tsx | 9 ++++++ .../components/details/AssetPriceDetails.tsx | 30 +++++++++++++------ src/nft/pages/asset/Asset.tsx | 4 +++ .../profile/{sell.css.ts => profile.css.ts} | 0 src/nft/pages/profile/profile.tsx | 14 +++++---- 5 files changed, 43 insertions(+), 14 deletions(-) rename src/nft/pages/profile/{sell.css.ts => profile.css.ts} (100%) diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx index 7e2aee024e..b7aa126031 100644 --- a/src/components/WalletDropdown/AuthenticatedHeader.tsx +++ b/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 | 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() } diff --git a/src/nft/components/details/AssetPriceDetails.tsx b/src/nft/components/details/AssetPriceDetails.tsx index 0999230f70..81e68b09f8 100644 --- a/src/nft/components/details/AssetPriceDetails.tsx +++ b/src/nft/components/details/AssetPriceDetails.tsx @@ -1,9 +1,10 @@ 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 ( @@ -216,17 +231,14 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => { Sale ends: {timeLeft(expirationDate)} )} {!listing ? ( - navigate('/profile')}> + List ) : ( <> - navigate('/profile')}> + Adjust listing - navigate('/profile')}> - Cancel listing - )} diff --git a/src/nft/pages/asset/Asset.tsx b/src/nft/pages/asset/Asset.tsx index bd21d5cd0c..57aca99fc7 100644 --- a/src/nft/pages/asset/Asset.tsx +++ b/src/nft/pages/asset/Asset.tsx @@ -1,6 +1,8 @@ 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 ( }> diff --git a/src/nft/pages/profile/sell.css.ts b/src/nft/pages/profile/profile.css.ts similarity index 100% rename from src/nft/pages/profile/sell.css.ts rename to src/nft/pages/profile/profile.css.ts diff --git a/src/nft/pages/profile/profile.tsx b/src/nft/pages/profile/profile.tsx index e12fb00b42..33ea8496f4 100644 --- a/src/nft/pages/profile/profile.tsx +++ b/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)