Create an NFT Auction Marketplace using Express Protocol SDK

Even after tremendous growth in the NFT space, many NFT holders are still struggling to get the desired price for their NFTs. This makes them furious & perplexed about how to sell NFTs for a whooping amount?. No worries, Express Protocol has got you covered with NFT Auction Marketplace that will help you find a potential buyer for your NFTs in no time. So be ready to earn more money from NFTs with Express NFT Auction Marketplace.

Here’s the detailed guide on, how to create an NFT Auction Marketplace using Express Protocol?

Prerequisites to build an NFT Auction Marketplace

1. NodeJS version > 16.0.0
2. NPM version > 6.0.0
3. Metamask Browser Extension
4. Parcel Bundler(For bundling Javascript)

Steps to develop your own NFT Auction Marketplace

1. First, you need to create an empty folder in your favorite editor. Here, we are using VScode.

2. The next step involves the installation of SDK. Once you have installed the SDK make sure to run it in the terminal.

npm init

npm i pandora-express

 npm install -g parcel-bundler 

3. Then build the UI and make the index.html file to paste the following codes.

Here we have five sections for the frontends:

A. The first one is to create an item section where you can mint NFTs.

B. The second is the auction section where you can put your NFTs on auction. Also, it has three fields:

• For Token ID
• For Setting Base Price of NFT
• For TimeSpan in which the auction will end.

C. The third section is for bidders who want to bid on the auctioned NFT. The user has to enter the sale ID and the Bid offer he/she wants to make for the NFT.

D. Next, there’s a bid section through which the NFT owner can accept the bid made by the bidders.

E. After that, there is a withdrawal bid section where bidders can withdraw the bid they have made. For that, the bidder needs to provide the Sale ID and Bid ID in the present field.

F. Lastly, there’s a cancel sell section. Here, NFT owners can cancel the auction of their NFTs by only entering the Sale ID.

Now run the app with a liver server.

After pasting all the codes, your NFT Auction Marketplace will look something like this!

4. Use SDK code with javascript logic

Here follow all the below steps to auction your NFTs:-

• Make a javascript and name it main.js. Once you have created a file, import all the SDK functions in your Dapps and make a connection with blockchain using metamask. Paste the codes mentioned below in the main.js file.

  //Import createPandoraExpressSDK from SDK
  const { createPandoraExpressSDK } = require(“pandora-express”);
  const pandoraSDK = createPandoraExpressSDK();//Connecting with Metamask wallet.
  const init = async () => {
  //check if metamask is present
    if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    await window.ethereum.enable();
    console.log(“Connected”);
    } else {
    alert(“Metamask not found”);
    }
  };
            

• Next, you need to define the Mint function to ensure it mints your NFTs using Express SDK.

  const mintNft = async () => {
  //get current account address
  const accounts = await web3.eth.getAccounts();
  //Get ChainID of current account
  const chainId = await web3.eth.net.getId();
  //Mint NFT using SDK erc721 nft mint
  await pandoraSDK.erc721.nft.mint(web3, chainId, accounts[0], itemURI.value, [
  [accounts[0], 100],
  ]);
  }
            

• Once you have minted the NFTs, you can then upload the NFTs in the auction using the sellNFTByBid function.

  const auctionNft = async () => {
  const accounts = await web3.eth.getAccounts();
  const chainId = await web3.eth.net.getId();
  console.log(chainId);
  await pandoraSDK.erc721.order.sellNFTByBid(
  web3,
  chainId,
  auctionItemTokenId.value,//Token ID
  auctionItemPrice.value,// Base Price of Token
  accounts[0],
  auctionItemTime.value// Time of Auction
  );
  }
            

• Here define the NFT Auction function with PandoraSDK.erc721.order.sellNFTByBid function.

  const bid = async () => {
  const accounts = await web3.eth.getAccounts();
  const chainId = await web3.eth.net.getId();
  console.log(chainId);
  await pandoraSDK.erc721.order.bid(
  web3,
  chainId,
  BidItemSaleId.value, //Sale ID of Token
  accounts[0],
  BidItemPrice.value // Price offered by the Bidder
  );
  };
            

• Here, You have successfully uploaded your NFT items on Auction. Now anyone can make a bid on the token by providing more price than the base price of the token or by making the highest bid than the previous highest bid.

• You can implement the bid function in your App using the PandoraSDK.erc721.order.bid function.

  const executeBid = async () => {
  const accounts = await web3.eth.getAccounts();
  const chainId = await web3.eth.net.getId();
  console.log(chainId);
  await pandoraSDK.erc721.order.acceptBid(
  web3,
  chainId,
  ExecuteSaleId.value, //Sale ID of the token on Auction
  ExecuteBidId.value, //Bid ID of the Bid offering
  accounts[0]
  );
  };
              

• Here, you can accept the bid using PandoraSDK.erc721.order.acceptBid function. To do so, first, define the function that you will use to accept the offer.

• Also, you can implement the Bid withdrawal function using pandoraSDK.erc721.order.withdrawBid(). So, a bidder can withdraw their bid after the auction if it wasn’t accepted by the auction holder.

  const withdrawBidMoney = async () => {
  const accounts = await web3.eth.getAccounts();
  const chainId = await web3.eth.net.getId();
  console.log(chainId);
  await pandoraSDK.erc721.order.withdrawBid(
  web3,
  chainId,
  WithdrawSaleId.value,
  WithdrawBidId.value,
  accounts[0]
  );
  }
              

• You can also implement the function of canceling the auction using pandoraSDK.erc721.order.cancelSale().

  const cancelSale = async () => {
  const accounts = await web3.eth.getAccounts();
  const chainId = await web3.eth.net.getId();
  console.log(chainId);
  await pandoraSDK.erc721.order.cancelSale(
  web3,
  chainId,
  accounts[0],
  CancelSaleId.value
  );
  }
              

5. Finally, get the function parameters using javascript DOM and use the codes written below in main.js.

const itemURI = document.getElementById(“txtCreateItemURI”);const createItemButton = document.getElementById(“btnCreateItem”);
createItemButton.onclick = mintNft;const itemURI1 = document.getElementById(“txtCreateItemURI1”);
const itemURI2 = document.getElementById(“txtCreateItemURI2”);const auctionItemTokenId = document.getElementById(“numAuctionItemTokenId”);
const auctionItemPrice = document.getElementById(“numAuctionItemPrice”);
const auctionItemTime = document.getElementById(“numAuctionItemTime”);const auctionItemButton = document.getElementById(“btnAuctionItem”);
auctionItemButton.onclick = auctionNft;const BidItemSaleId = document.getElementById(“numBidItemSaleId”);
const BidItemPrice = document.getElementById(“numBidItemPrice”);const BidItemButton = document.getElementById(“btnBidItem”);
BidItemButton.onclick = bid;const ExecuteSaleId = document.getElementById(“numExecuteSaleId”);
const ExecuteBidId = document.getElementById(“numExecuteBidId”);const ExecuteBidItemButton = document.getElementById(“btnExecuteBidItem”);
ExecuteBidItemButton.onclick = executeBid;const WithdrawSaleId = document.getElementById(“numWithdrawSaleId”);
const WithdrawBidId = document.getElementById(“numWithdrawBidId”);const WithdrawBidItemButton = document.getElementById(“btnWithdrawBidItem”);
WithdrawBidItemButton.onclick = withdrawBidMoney;const CancelSaleId = document.getElementById(“numCancelSaleId”);const CancelItemSaleButton = document.getElementById(“btnCancelItemSale”);
CancelItemSaleButton.onclick = cancelSale;init();
      

Now, you’re all ready to run it in the terminal.

parcel index.html
      

Congratulations! You have created your own NFT Trading Marketplace and listed your first Token in the Marketplace as well! So from now, don’t hesitate to actualize your NFT Projects because Express Protocol simplifies everything with its easy-to-use Express SDK that helps you create NFT storefronts in minutes and allows you to enjoy the increased inflow of liquidity within the NFT ecosystem.