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?
Some of the prerequisites you require before building upon the project:
NodeJS version > 16.0.0NPM version > 6.0.0Metamask Browser ExtensionParcel Bundler(For bundling Javascript)Steps to develop your own NFT Auction Marketplace:
- 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.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>SDK</title>
</head>
<body>
<div id=”createItem”>
<h4>Create Item</h4>
<input
type=”text”
id=”txtCreateItemURI”
required
placeholder=”Enter TokenURI”
/><button id=”btnCreateItem”>Create Item</button>
</div><div id=”auctionItem”>
<h4>Auction Item</h4>
<input
type=”number”
min=”1"
step=”1"
id=”numAuctionItemTokenId”
placeholder=”Enter TokenId”
required
/>
<input
type=”number”
min=”1"
step=”1"
id=”numAuctionItemPrice”
placeholder=”Enter Auction Price”
required
/>
<input
type=”number”
min=”1"
step=”1"
id=”numAuctionItemTime”
placeholder=”Enter Auction Time”
required
/><button id=”btnAuctionItem”>Auction Item</button>
</div><div id=”Bid”>
<h4>Bid</h4>
<input
type=”number”
id=”numBidItemSaleId”
required
placeholder=”Enter SaleId”
/>
<input
type=”number”
id=”numBidItemPrice”
required
placeholder=”Enter Bid Price”
/><button id=”btnBidItem”>Bid</button>
</div><div id=”executeBid”>
<h4>Execute Bid</h4>
<input
type=”number”
id=”numExecuteSaleId”
required
placeholder=”Enter SaleId”
/>
<input
type=”number”
id=”numExecuteBidId”
required
placeholder=”Enter BidId”
/><button id=”btnExecuteBidItem”>Execute Bid</button>
</div><div id=”withdrawBid”>
<h4>Withdraw Bid Money</h4>
<input
type=”number”
id=”numWithdrawSaleId”
required
placeholder=”Enter SaleId”
/>
<input
type=”number”
id=”numWithdrawBidId”
required
placeholder=”Enter BidId”
/><button id=”btnWithdrawBidItem”>Withdraw Bid</button>
</div><div id=”withdrawBid”>
<h4>Cancel Item Sale</h4>
<input
type=”number”
id=”numCancelSaleId”
required
placeholder=”Enter SaleId”
/><button id=”btnCancelItemSale”>Cancel Sale</button>
</div>
<script src=”https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src=”main.js”></script>
</body>
</html>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 h/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.
