Create NFT-Drop Dapp with Express SDK in just a matter of minutes!
A buzz around digital collectables is invoking a desire in the heart of NFT creators to create & list their own NFT collectables. However, the major challenge NFT creators are facing is — they can neither upload nor mint hundred or thousands of NFTs at once. This fragility has been becoming a setback for most NFT creators.
To solve this, Express Protocol has come up with Express SDK: your one-stop solution for creating, minting, auctioning NFTs & much more. Its Multichain Data-Rich functionality allows you to create, upload & mint thousands of NFTs at once. So, leverage the power of Express SDK to create your NFT-Drop Dapp without getting intimidated by the time it takes to engineer.
Curious to know, how to create NFT-Drop Dapp using Express Protocol? Here, we’re unravelling the secret to simplify the creation process for you!
Steps for building your own NFT-Drop Dapp!
Some of the prerequisites you require before building the project:
- NodeJS version > 16.0.0
- NPM version > 6.0.0
- Metamask Browser Extension
- Parcel Bundler(For bundling Javascript)
Here are the following steps to create your own NFT-Drop Dapp in just a matter of time:
1. First, you need to create an empty folder in your favourite editor.
2. Then, you need to install the SDK to run it in the terminal.
npm init
npm i pandora-express
npm install -g parcel-bundler
3. The next step is to build the UI and make the index.html file to write the following codes mentioned below.
Here we have made three sections for creating the collection:
- To create a smart contract for the NFT collection, you need to fill the input field for the Collection’s Name, Symbol, Description, and Royalties.
- Next is an NFT Ticket Minting Section, where you can mint ERC1155 in the smart contract you made earlier. For this, we have created three inputs for you to enter the collection address, Token URI, and Royalties that you’ll share with other people.
- Lastly, there’s a sell NFT Ticket section, where you can use the sell ticket function to fill the input field of collection address, Token Id, and price of the token.
Now, run the app with a liver server.
After pasting all the codes mentioned above, your NFT-Drop Frontend will look something like this!
4. Use SDK code with javascript logic
Follow the steps mentioned below:
- Create a javascript file and name it main.js. Now here, import SDK functions in your Dapp and make a connection with blockchain using Metamask. Don’t forget to write the codes mentioned below in your 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”);
}
};
- Now, you have to define the Create Collection function that will create an ERC721 smart contract, through which you can mint the end number of NFTs.
const createCollection = async () => {
const accounts = await web3.eth.getAccounts();
const chainId = await web3.eth.net.getId();
console.log(chainId);
await pandoraSDK.erc721.collection.createCollection(
web3,
chainId,
accounts[0],
collectionName.value, //Name of Collection
collectionSymbol.value, // Symbol of Collection
collectionDescription.value, // Description of Collection
[[accounts[0], collectionRoyalties.value]] // Royalities
);
};
- After creating a collection, you can mint your NFTs using pandoraSDK.erc721.collection.mint() function.
const mintInCollection = async () => {
const accounts = await web3.eth.getAccounts();
const chainId = await web3.eth.net.getId();
console.log(chainId);
await pandoraSDK.erc721.collection.mint(
web3,
collectionAddress.value, //Address of collection Contract
tokenURI.value, // URI of token
accounts[0], // Account to mint NFT
[[accounts[0], collectionRoyalties.value]] // Royalities
);
}
- After completing NFT Minting, you can also put your NFTs on sale using pandoraSDK.erc721.collection.sellNFT() function.
const sellInCollection = async () => {
const accounts = await web3.eth.getAccounts();
const chainId = await web3.eth.net.getId();
console.log(chainId);
await pandoraSDK.erc721.collection.sellNFT(
web3,
chainId,
sellCollectionAddress.value, // Collection Address
sellTokenId.value, // Token ID
sellPrice.value, // Base price to sell
accounts[0]
);
};
- 5. After defining all the functions, you are only one step away from building your own NFT-Drop Dapp. To complete this process, you need to get function parameters using javascript DOM and paste the below-mentioned codes in your main.
const collectionName = document.getElementById(“collectionName”);
const collectionSymbol = document.getElementById(“collectionSymbol”);
const collectionDescription = document.getElementById(“collectionDescription”);
const collectionRoyalties = document.getElementById(“collectionRoyalties”);const CollectionButton = document.getElementById(“btnCreateCollection”);
CollectionButton.onclick = createCollection;const collectionAddress = document.getElementById(“collectionAddress”);
const tokenURI = document.getElementById(“tokenURI”);
const royalties = document.getElementById(“royalties”);const btnMintInCollection = document.getElementById(“btnMintInCollection”);
btnMintInCollection.onclick = mintInCollection;const sellCollectionAddress = document.getElementById(“sellCollectionAddress”);
const sellTokenId = document.getElementById(“sellTokenId”);
const sellPrice = document.getElementById(“sellPrice”);const btnSellInCollection = document.getElementById(“btnSellInCollection”);
btnSellInCollection.onclick = sellInCollection;init();
Now run in terminal
parcel index.html
Congratulations! You have successfully created your first NFT-Drop and minted as well as listed your first Token for sale in the Marketplace. Now just enjoy the benefit of interoperability & increased liquidity with Express SDK.