useActiveListings

Hook for fetching active listings from a Marketplace contract.

"Active" means the listing is not cancelled, expired, or sold.

import { useActiveListings } from "@thirdweb-dev/react";

Usage

Provide your marketplace contract as the argument.

Returns both kinds of listings; auctions and direct.

import { useActiveListings, useContract } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress, "marketplace");
  const { data, isLoading, error } = useActiveListings(contract);

  if (error) {
    console.error("failed to fetch active listings", error);
  }

  return (
    <>
      {isLoading && <div>Loading...</div>}
      {data && data.map((listing) => <div key={listing.id}>{listing.id}</div>)}
    </>
  );
}

Configuration

By default, the hook returns all active listings from the marketplace.

You can filter the results by providing a filter object as the second argument.

import { useActiveListings, useContract } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress, "marketplace");

  const { data, isLoading, error } = useActiveListings(
    contract,
    {
      seller: "{{wallet_address}}", // Filter by seller
      tokenContract: "{{contract_address}}", // Filter by token contract
      offeror: "{{wallet_address}}", // Filter by offeror
      tokenId: "{{token_id}}", // Filter by token ID
      count: 10, // Limit the number of results
      start: 0, // Start from the nth result (useful for pagination)
    },
  );

  if (error) {
    console.error("failed to fetch active listings", error);
  }

  return (
    <>
      {isLoading && <div>Loading...</div>}
      {data && data.map((listing) => <div key={listing.id}>{listing.id}</div>)}
    </>
  );
}

Return Value

The hook returns an array containing both AuctionListing and DirectListing objects.

The hook's data property, once loaded, contains the following properties:

(AuctionListing | DirectListing)[]

// Properties available on both listing types below...

AuctionListing {
    // The id of the listing
    id: string;

    // The address of the asset being listed.
    assetContractAddress: string;

    // The ID of the token to list.
    tokenId: BigNumberish;

    // The asset being listed.
    asset: NFTMetadata;

    // The start time of the listing.
    startTimeInEpochSeconds: BigNumberish;

    // Number of seconds until the auction expires.
    endTimeInEpochSeconds: BigNumberish;

    // The quantity of tokens in the listing.
    // For ERC721s, this value should always be 1
    quantity: BigNumberish;

    // The address of the currency to accept for the listing.
    currencyContractAddress: string;

    // The reserve price is the minimum price that a bid must be in order to be accepted.
    reservePrice: BigNumber;

    // The buyout price of the listing.
    buyoutPrice: BigNumber;

    // The `CurrencyValue` of the buyout price listing.
    // Useful for displaying the price information.
    buyoutCurrencyValuePerToken: CurrencyValue;

    // The `CurrencyValue` of the reserve price.
    // Useful for displaying the price information.
    reservePriceCurrencyValuePerToken: CurrencyValue;

    // The address of the seller.
    sellerAddress: string;

    // Listing type Enum
    type: ListingType.Auction;
}


DirectListing {
    // The id of the listing.
    id: string;

    //The address of the asset being listed.
    assetContractAddress: string;

    // The ID of the token to list.
    tokenId: BigNumberish;

    //The asset being listed.
    asset: NFTMetadata;

    //The start time of the listing.
    startTimeInSeconds: BigNumberish;

    //Number of seconds until the listing expires.
    secondsUntilEnd: BigNumberish;

    // The quantity of tokens to include in the listing.
    // For ERC721s, this value should always be 1
    quantity: BigNumberish;

    // The address of the currency to accept for the listing.
    currencyContractAddress: string;

    // The `CurrencyValue` of the listing. Useful for displaying the price information.
    buyoutCurrencyValuePerToken: CurrencyValue;

    // The buyout price of the listing.
    buyoutPrice: BigNumber;

    // The address of the seller.
    sellerAddress: string;

    // Listing type Enum
    type: ListingType.Direct;
}