Create your own auction with TypeScript

Create your own marketplace to sell your own NFTs with TypeScript

In this guide we'll create an auction on our own marketplace with the TypeScript SDK! In a marketplace you can list your tokens, like NFT's, for sale. Opensea is an example of a marketplace. Did you know you can do both! We will list an NFT from the NFT Collection module. If you don't have any NFTs minted, check out this guide to mint some nfts.

By the way we also need to connect a wallet. So if you don't have a wallet, make sure to sign up with MetaMask or CoinWallet. If don't have a wallet, you can follow this guide to create one.

Alright without further ado, let's create our marketplace!

The first thing we need to do is head over to the dashboard and create a project and a Marketplace module. if you don't know how to do this, check out this guide.

Once you've created the module, it's time to list our first NFT, but we don't need the dashboard for that! I mean we could, but why use GUI if we can use TypeScript!?

Go ahead and create a new TypeScript file. Let's call it index.ts and open it in your favorite code editor. We'll use Visual Studio code.

Next up use we'll install the ThirdWeb SDK using npm!

• @3rdweb/sdk - thirdweb TypeScript SDK.
• ethers - will give us very useful utils.
• dotenv - to hide our private key.
• typescript - since this is a TypeScript project
• @types/node - typing for node as a dev dependency.
• tslib - utility package

Copy codenpm init -y
npm install @3rdweb/sdk ethers dotenv
npm install --save-dev typescript @types/node ts-node tslib

In order to make use of our SDK, you need to establish a connection to a blockchain. Click here to learn how to connect to the blockchain and instantiate our SDK.

For this guide, you will need to instantiate the SDK following these steps, using your own signer with thirdweb.

Now we need to define which module we want to use. This is the module we just created inside our project Minting NFTs with TypeScript. We called the module 'Marketplace written in TypeScript'. This module has an address. We need to pass the address here. You can find the address here, under 'Marketplace written in TypeScript':

In our index.ts file we include the following code. First we define a variable market_smart_contract_address and store our module address in here.

Then we create an object that uses the market module inside the SDK with our address.

Copy code// Initialize market module by passing in contract address
const market = sdk.getMarketModule("0xC06adC34097afa2085324D4192fbE9206059f8e0");

// Declaring the nft smart contract address
const nftSmartContractAddress = "0xdd25FAEE772FbB1bcB7ba0b2cEE6387A8F82f032"

// Declaring the token module contract if you want to use your own tokens
const currencySmartContractAddress =
    "0x0d5fb8942eEa62093944F3e91C6Ac4e584336741";

We are using the NFT that we created in our previous guide. Each NFT has token_id. We will pass that the following parameters to the '.list' method:

Copy code// the listingId of the listing you want to fetch data for
const tokenId = "1";
const tokenIdOffer = 1

market.createAuctionListing({
      assetContractAddress: nftSmartContractAddress,
      buyoutPricePerToken: ethers.utils.parseUnits("10"),
      currencyContractAddress: currencySmartContractAddress,
      startTimeInSeconds: Math.floor(Date.now() / 1000),
      listingDurationInSeconds: 60 * 60 * 24,
      tokenId: 1,
      quantity: 1,
      reservePricePerToken: 1,
    });

So the only thing left is to run our code! Open a terminal and paste the following:

Copy code# Runs the typescript file
npx ts-node index.ts

Now that you've placed your first auction on your marketplace, someone can make a bid on it! Check out the method below, that allows a user to make a bid!

Copy codemarket.makeAuctionListingBid({
        listingId: 0,
        pricePerToken: 1,
      });

Congratulations! You have created your own marketplace and listed your first auction! If you want to use this functionality today in your app, check out this Github repo, which gives you a plug and play react component.