useActiveListings

Hook for fetching all active listings from a Marketplace contract. "Active" means the listing is not canceled, expired, or sold.

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

Usage

Provide your marketplace contract as the argument to the hook.

The returned data contains 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);
}

Configuration

filter (optional)

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)
    },
  );
}

Return Value

The hook's data property, once loaded, returns an array containing both AuctionListing and DirectListing objects. Use the type property to determine which type of listing each one is.

(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;
}