Implementing Frontend V - List/Delist NFT on Marketplace

Implementing NFT Listing and Cancelation with Thirdweb

In this video, we complete the core logic for our NFT Marketplace application by implementing the functionality for listing NFTs for sale and canceling active listings using Thirdweb’s tools.

1. Overview of Listing and Canceling Cards

Previously, we set up the UI components:

• SellNFTCard: Allows users to input a price and list an NFT.
• CancelListingCard: Displays when an NFT is already listed, providing an option to cancel the listing.

In this video, we implement the logic behind both features.

2. Selling an NFT (Listing on the Marketplace)

To list an NFT:

We retrieve the Marketplace and NFT contract using:

getMarketplaceContract()
getNFTContract()

• NFTs must grant approval to the marketplace to allow it to transfer tokens on the user's behalf. This is essential because the marketplace is a separate contract.

Granting Role to Marketplace

We use Thirdweb’s useGrantRole hook:

const { mutate: grantRole, error: roleError } = useGrantRole(nftContract);

This allows us to assign the admin role to the marketplace address.

Creating the Direct Listing

We then use:

const { mutate: createDirectListing, isLoading: listingLoading, error: listError } = useCreateDirectListing(marketplace);

The listing details are structured using a utility function createListingFromPriceId(price, tokenId) that encapsulates all required listing parameters (except the user-set price and token ID).

Once structured, we execute:

createDirectListing(listing);

3. Handling Errors and Loading States

We manage UI feedback using conditional checks:

• Display error messages if roleError or listError exist.
• Show a loading message when listingLoading is true:

{listingLoading && <div className="text-center mt-4">Listing in progress...</div>}

4. Canceling an Active Listing

Canceling a listing is simpler since we’re directly interacting with the marketplace contract.

Using useCancelDirectListing

const { mutate: cancelListing, isLoading, error } = useCancelDirectListing(marketplace);

When the user clicks the cancel button, we execute:

cancelListing({ listingId });

This function is triggered inside a try-catch block to handle any runtime errors.

5. UI State Handling for Canceling

Just like with listing, we handle:

• Displaying errors if any occur
• A loading message when the cancellation is in progress:

{isLoading && <div className="text-center mt-4">Canceling listing...</div>}

6. Wrapping Up

With this video, we’ve completed:

• Full logic for listing NFTs for sale on a marketplace
• Logic for canceling an active listing
• Integration with Thirdweb hooks to interact securely and reliably with smart contracts

The NFT Marketplace application is now fully functional, supporting wallet authentication, viewing NFT metadata, dynamic listing controls, and real-time marketplace management.