Skip to main content

Marketplace

Learn how to interact with your Marketplace contract in the SDK.

Create a Marketplace Contract​

Deploys a new Marketplace contract 
const sdk = useSDK();

const contractAddress = await sdk.deployer.deployMarketplace({
  name: "My Marketplace",
  primary_sale_recipient: "your-address",
});
View in React SDK Documentation

Getting the contract in your application​

To start using your Marketplace contract inside your application, you'll need to use its contract address. You can get the contract address from the dashboard.

import { useContract } from '@thirdweb-dev/react'

export default function Component() {
  const { contract } = useContract("<YOUR-CONTRACT-ADDRESS>", "marketplace")

  // Now you can use the marketplace contract in the rest of the component
}

Creating Listings​

Creating a new Direct Listing​

Create Direct Listing 
// Data of the listing you want to create
const listing = {
  // address of the contract the asset you want to list is on
  assetContractAddress: "0x...",
  // token ID of the asset you want to list
  tokenId: "0",
  // when should the listing open up for offers
  startTimestamp: new Date(),
  // how long the listing will be open for
  listingDurationInSeconds: 86400,
  // how many of the asset you want to list
  quantity: 1,
  // address of the currency contract that will be used to pay for the listing
  currencyContractAddress: NATIVE_TOKEN_ADDRESS,
  // how much the asset will be sold for
  buyoutPricePerToken: "1.5",
}

const tx = await contract.direct.createListing(listing);
const receipt = tx.receipt; // the transaction receipt
const id = tx.id; // the id of the newly created listing
View in React SDK Documentation

Creating a new Auction Listing​

Create Auction 
// Data of the auction you want to create
const auction = {
  // address of the contract the asset you want to list is on
  assetContractAddress: "0x...",
  // token ID of the asset you want to list
  tokenId: "0",
 // when should the listing open up for offers
  startTimestamp: new Date(),
  // how long the listing will be open for
  listingDurationInSeconds: 86400,
  // how many of the asset you want to list
  quantity: 1,
  // address of the currency contract that will be used to pay for the listing
  currencyContractAddress: NATIVE_TOKEN_ADDRESS,
  // how much people would have to bid to instantly buy the asset
  buyoutPricePerToken: "10",
  // the minimum bid that will be accepted for the token
  reservePricePerToken: "1.5",
}

const tx = await contract.auction.createListing(auction);
const receipt = tx.receipt; // the transaction receipt
const id = tx.id; // the id of the newly created listing
View in React SDK Documentation

Viewing Listings​

One Listing​

Convenience function to get either a direct or auction listing 
const listingId = 0; // the listing id to check
const { data: listing, isLoading, error } = useListing(contract, listingId);
View in React SDK Documentation

All Listings​

Get all the listings 
const { data: listings, isLoading, error } = useListings(contract, { start: 0, count: 100 });
View in React SDK Documentation

Active Listings​

Get all active listings 
const { data: listings, isLoading, error } = useActiveListings(contract, { seller: "{{wallet_adress}}", tokenContract: "0x...", tokenId: 1, start: 0, count: 100 });
View in React SDK Documentation

Creating Offers / Bids​

Direct Listings​

Offers are made on direct listings.

const sdk = useSDK();

import { ChainId, NATIVE_TOKENS } from "@thirdweb-dev/sdk";

// The listing ID of the asset you want to offer on
const listingId = 0;
// The price you are willing to offer per token
const pricePerToken = 1;
// The quantity of tokens you want to receive for this offer
const quantity = 1;
// The address of the currency you are making the offer in (must be ERC-20)
const currencyContractAddress = NATIVE_TOKENS[ChainId.Rinkeby].wrapped.address

await contract.direct.makeOffer(
  listingId,
  quantity,
  currencyContractAddress,
  pricePerToken
);
View in React SDK Documentation

Auction Listings​

Bids are made on auction listings.

  • Once a bid is made, it cannot be withdrawn.
  • Bids must be higher than either the reserve price, OR if there is an existing bid, it must be higher than the current bid by a certain percentage - (see Auction Bid Buffers).
  • The previous highest bid is refunded automatically when a higher bid is made.
const Component = () => {
  const { contract } = useContract("{{contract_address}}");
  const {
    mutate: makeBid,
    isLoading,
    error,
  } = useMakeBid(contract);

  if (error) {
    console.error("failed to make a bid", error);
  }

  return (
    <button
      disabled={isLoading}
      onClick={() => makeBid({ listingId: 1, bid: 2 })}
    >
      Bid!
    </button>
  );
};
View in React SDK Documentation

Buying an NFT from a Listing​

Buying a listing is the same for both direct listings and auction listings.

When a buyout is made, the NFT is transferred to the buyer, and the seller receives the funds immediately.

// The listing ID of the asset you want to buy
const listingId = 0;
// Quantity of the asset you want to buy
const quantityDesired = 1;

await contract.buyoutListing(listingId, quantityDesired);
View in React SDK Documentation

Accept Offers (Direct Only)​

Offers can only be accepted on direct listings.

// The listing ID of the asset you want to bid on
const listingId = 0;
// The price you are willing to bid for a single token of the listing
const offeror = "0x...";

await contract.direct.acceptOffer(listingId, offeror);
View in React SDK Documentation

Cancel a Listing​

Direct Listing​

Cancel Direct Listing 
// The listing ID of the direct listing you want to cancel
const listingId = "0";

await contract.direct.cancelListing(listingId);
View in React SDK Documentation

Auction Listing​

Auction listings cannot be canceled after a bid has been made.

// The listing ID of the auction listing you want to cancel
const listingId = "0";

await contract.auction.cancelListing(listingId);
View in React SDK Documentation

Close a Listing (Auction Only)​

When an auction is finished, the closeAuction needs to be called for both the buyer and the seller.

The closeAuction function takes in a closeFor parameter.

  • When the closeFor value is the address of the buyer, they are transferred the funds from the highest bid.

  • When the closeFor value is the address of the seller, the NFT is transferred to them.

// The listing ID of the auction listing you want to close
const listingId = "0";
await contract.auction.closeListing(listingId);
View in React SDK Documentation

View Auction Bidding Info​

Winning Bid​

Get Highest Bid 
const listingId = 0;
const { data: winningBid, isLoading, error } = useWinningBid(contract, listingId);
View in React SDK Documentation

Auction Winner​

Get Auction Winner 
// The listing ID of the auction that closed
const listingId = 0;

contract.auction.
  .getWinner(listingId)
  .then((auctionWinner) => console.log(auctionWinner))
  .catch((err) => console.error(err));
View in React SDK Documentation

Auction Bid Buffers​

We made a few important considerations for auctions in our smart contract.

  • When someone makes a bid in an auction, the time until the auction is finished is extended by a set amount you can configure to avoid users not bidding at the last possible second to win the auction.
  • The user must bid a certain percentage higher than the current highest bid to prevent users from bidding minuscule amounts above the previous bid.

Set Time Buffer​

Set the Auction Time buffer: 
// the time buffer in seconds
const bufferInSeconds = 60;
await contract.setTimeBufferInSeconds(bufferInSeconds);
View in React SDK Documentation

Set Bid Buffer​

Set the Auction bid buffer 
// the bid buffer in basis points
const bufferBps = 5_00; // 5%
await contract.setBidBufferBps(bufferBps);
View in React SDK Documentation