useCreateDirectListing

Hook for creating a new direct listing on a Marketplace or MarketplaceV3 smart contract.

Direct listings require the user to approve the marketplace to transfer the NFTs on their behalf as part of the listing creation process. This is because the marketplace needs permission to execute sales and transfer the NFTs to the buyer when a sale is made.

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

const { mutateAsync, isLoading, error } = useCreateDirectListing(contract);

Usage

Provide your marketplace contract as the argument.

Then, provide the information about the listing you want to create as the argument to the mutation.

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

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

function App() {
  const { contract } = useContract(contractAddress, "marketplace-v3");
  const {
    mutateAsync: createDirectListing,
    isLoading,
    error,
  } = useCreateDirectListing(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        createDirectListing({
          assetContractAddress: "{{asset_contract_address}}",
          tokenId: "{{token_id}}",
          pricePerToken: "{{price_per_token}}",
          currencyContractAddress: "{{currency_contract_address}}",
          isReservedListing: false,
          quantity: "{{quantity}}",
          startTimestamp: new Date(),
          endTimestamp: new Date(
            new Date().getTime() + 7 * 24 * 60 * 60 * 1000,
          ),
        })
      }
    >
      Create Direct Listing
    </Web3Button>
  );
}

Configuration

assetContractAddress

assetContractAddress (required)

The address of the NFT smart contract that you want to list.

tokenId

tokenId (required)

The token ID of the NFT that you want to list.

pricePerToken

pricePerToken (required)

The price to buy each token in the listing.

• For ERC721 NFTs, this is the price to buy the NFT outright.
• For ERC1155 NFTs, this is the price to 1 quantity of the NFT.

currencyContractAddress

currencyContractAddress (optional)

The address of the currency you want users to pay with and make bids in.

You likely want to use the token native to the chain you are on, e.g. Ether on Ethereum.

To do that, you can import the NATIVE_TOKEN_ADDRESS constant from @thirdweb-dev/sdk.

The default value is NATIVE_TOKEN_ADDRESS.

import {
  useCreateDirectListing,
  useContract,
  Web3Button,
} from "@thirdweb-dev/react";
import { NATIVE_TOKEN_ADDRESS } from "@thirdweb-dev/sdk";

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

function App() {
  const { contract } = useContract(contractAddress, "marketplace-v3");
  const {
    mutateAsync: createDirectListing,
    isLoading,
    error,
  } = useCreateDirectListing(contract);

  if (error) {
    console.error("failed to create direct listing", error);
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        createDirectListing({
          assetContractAddress: "{{asset_contract_address}}",
          tokenId: "{{token_id}}",
          pricePerToken: "{{price_per_token}}",
          currencyContractAddress: NATIVE_TOKEN_ADDRESS,
          isReservedListing: false,
          quantity: "{{quantity}}",
          startTimestamp: new Date(),
          endTimestamp: new Date(
            new Date().getTime() + 7 * 24 * 60 * 60 * 1000,
          ),
        })
      }
    >
      Create Direct Listing
    </Web3Button>
  );
}

isReservedListing

isReservedListing (optional)

When set to true, the seller must explicitly approve which wallet addresses can buy the NFT.

quantity

quantity (optional)

How many tokens to include in the listing.

• For ERC721 NFTs, this is always 1.
• For ERC1155 NFTs, this is the quantity of tokens to include in the listing.

startTimestamp

startTimestamp (optional)

A Date object for the start time of the listing.

The default value is new Date(), which is the current time.

endTimestamp

endTimestamp (optional)

A Date object for the end time of the listing (when the listing will expire).