Implementing Frontend IV - Interacting with Marketplace

Displaying NFT Details and Integrating Marketplace Logic Using Thirdweb

In this video, we explore how to display individual NFT details and implement the logic required to manage marketplace listings using Thirdweb.

1. Routing to the NFT ID Page

When a user clicks on an NFT they own, they’re directed to a dynamic route ([id] page), where:

• The NFT’s metadata and ownership info are displayed using a custom NFTDetails component.
• Below this, logic is implemented to show one of two UI cards:
• Sell NFT Card if the NFT is not listed.
• Cancel Listing Card if the NFT is already listed.

2. Rendering NFT Details

We use the following approach:

• Retrieve the NFT contract using getNFTContract.
• Extract the NFT ID from the URL using Next.js routing.
• Use Thirdweb's useNFT hook with the contract and ID to fetch the NFT’s metadata and ownership data.
• Display this data using the NFTDetails UI component.

const { data: nft, isLoading: isNftLoading } = useNFT(contract, nftId);

If isNftLoading is true, we show a loading indicator. Otherwise, we render the NFT’s data.

3. Checking Marketplace Listing Status

To determine whether the NFT is listed:

• Use getMarketplaceContract() to access the marketplace contract.
• Call useWalletDirectListings with:
• The marketplace contract
• A filter range (e.g., start at 0, fetch 100 listings)

We then use Array.find() to locate a listing that matches the current NFT’s token ID.

const listedNft = directListings.find(item => item.asset.id === nftId);

If a listing exists, we extract:

• listingId
• price (converted from display value)
• symbol (currency symbol)

These are stored in state variables to control UI behavior.

4. Managing UI Based on Listing Status

We use a conditional check:

• If the NFT is listed:
• Show the CancelListingCard component, passing:
• listingId
• price
• symbol
• If the NFT is not listed:
• Show the SellNFTCard component with:
• nftId
• price input
• An onUpdatePrice handler for setting a new price

This separation ensures a dynamic and context-aware UI experience.

5. Summary and Next Steps

With the NFT detail page now complete, users can:

• View full NFT metadata
• See if their NFT is listed for sale
• Access contextually appropriate marketplace actions