Implementing Frontend VI - Buy Listing

Building the NFT Marketplace Index Page with Buy Functionality

In this video, we implemented the Index Page of our NFT marketplace. This page displays all the listed NFTs available for sale, including their metadata and a “Buy” button to allow users to purchase NFTs directly from the marketplace.

1. Index Page Overview

The index page is designed to:

• Display listed NFTs in a grid layout
• Show each NFT’s image, name, description, and price
• Include a "Buy" button for eligible listings

We use the ListingCard component to render each NFT listing dynamically.

2. Fetching Marketplace Listings

To load active listings:

• We use getMarketplaceContract() to retrieve the contract instance.
• Then, we call useContract with the Marketplace V3 identifier.
• We query only valid listings using pagination (start: 0, count: 100).

const { contract: marketplace } = useContract(getMarketplaceAddress(), "marketplace-v3");

• We check if listings are loading and conditionally display a loading message.
• Once available, we map over the listings and render ListingCard components with relevant NFT data.

3. Displaying NFT Metadata

Each ListingCard displays:

• Image from nft.asset.image
• Name from nft.asset.name
• Description from nft.asset.description
• Price and symbol from nft.currencyValuePerToken.displayValue and nft.currencyValuePerToken.symbol

We use a custom image tag and format values manually for a responsive layout.

4. Implementing the "Buy" Button Logic

Unlike other interactions, buying an NFT does not have a dedicated Thirdweb hook, so we handle it manually.

Steps:

Retrieve the listing using the marketplace contract:

const listing = await marketplace.directListings.getListing(nft.asset.id);

1. Prevent users from buying their own NFTs by comparing the listing creator address to the connected wallet address.

Handle the buying process with:

await marketplace.directListings.buyFromListing(listing.id, 1);

Wrap everything in a try-catch block to manage errors gracefully:

try {
  setMessage("Buying...");
  const result = await buyFunction();
  if (result.receipt) {
    setMessage("Bought!");
  }
} catch (error) {
  console.error(error);
  setMessage("Error buying!");
}

1. Display user feedback via the message state throughout the transaction process.

5. Managing Loading and Error States

We show:

• "Buying..." during the transaction
• "Bought!" if successful
• "Error buying!" if it fails
• "Already yours!" if a user tries to buy their own listing

This enhances the user experience and prevents broken flows.

6. Summary

In this implementation:

• We fetched valid marketplace listings
• Rendered detailed NFT cards with buy functionality
• Implemented a custom buy interaction using Thirdweb’s SDK
• Managed state and UI for errors, success, and invalid cases

With the Index Page now functional, users can view and purchase NFTs seamlessly from the decentralized marketplace.