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

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 { useMarketplace } from '@thirdweb-dev/react'

export default function Component() {
const marketplace = useMarketplace("<YOUR-CONTRACT-ADDRESS>")

// 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

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

Viewing Listings

One Listing

Convenience function to get either a direct or auction listing
const { data: listing, isLoading, error } = useListing(<YourMarketplaceContractInstance>, <listingId>);
View in React SDK Documentation

All Listings

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

Active Listings

Get all active listings
const { data: listings, isLoading, error } = useActiveListings(<YourMarketplaceContractInstance>, { seller: "0x...", 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
);

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 {
mutate: makeBid,
isLoading,
error,
} = useMakeBid(">>YourMarketplaceContractInstance<<");

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

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

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

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

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 Auction Bidding Info

Winning Bid

Get Highest Bid
const { data: winningBid, isLoading, error } = useWinningBid(<YourMarketplaceContractInstance>, <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));

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

Set Bid Buffer

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