Build your own NFT Minter on Polygon in less than an hour.

Getting started with NFT development but don't know where to start?

We at Onecdot are here to help you integrate NFTs into your platform.

To get you started, we've put up step-by-step explanations on how to build your own NFT minter like this in less than an hour.

In this article, we’ll learn how we can build a zero gas fee Polygon supercharged NFT Minter(Github)

Preview NFT Minter on Polygon by Onecdot
Preview NFT Minter on Polygon by Onecdot

Prerequisites knowledge:

  • Web development frameworks and tools like React, TailwindCSS, using SDK etc.
  • Solidity, Web3js, ethers.js etc. ❌ Not required when using Onecdot.

Here's what you'll be using:

⚛️ The JavaScript library used to create user interfaces: React JS

💨 The CSS framework used TailwindCss

🛠️ API and SDK infrastructure for NFTs used Onec Dev Tools

Project Setup

  • Open the terminal and create a react app

    npx create-react-app myapp

  • To take care of the CSS part we would be requiring tailwindcss and you can visit here for installation

  • For notifications, we would be using toast and you can install notistack with

    npm install notistack

  • For minting NFTs, we are using Onec Dev tools 🛠. Go to Onec Dashboard, Login in with your Google account.

🚀 Reasons for using Onec Dev Tools:

  • Developers don’t need prior solidity coding or blockchain experience.

  • Gas fee is maintained on their side. So neither devs nor your users need to worry about getting fiat on-ramp to pay for the transaction cost.

  • The tools are chain agnostic. Currently supporting Ropsten, Polygon-Mumbai and BSC-Testnets.

  • You get custom smart contracts, owned by you.

  • Other additional features that are coming include but are not limited to bridging, meta txns, indexing, metrics etc. are super useful.

  • Create a New project → choose your favourite chain (We choose Polygon💜).

Creating new project
Creating new project
  • Create API Key → Key information → Submit
  • The Key will be displayed only once, for safety purposes. Copy it and keep it save somewhere. MAKE SURE NOT TO PUSH THE KEYS ON GITHUB!
Creating new Key
Creating new Key

Setting up the Folder Structure

Once the project is all set 🆙, here is what your folder structure might look like.

Folder structure after project setup
Folder structure after project setup

Using Onec-SDK to connect metamask wallet

You must know that in Web3, wallets are the primary source of authentication.

For web3 wallet integration, we would be using Onec-SDK.

  • To Install the Onec-SDK use

    npm install onec-sdk

  • To Import it into the application

    import Onec from “onec-sdk”

  • Once you have imported it we would be Creating a button to which once we click on wallets can be connected.

Creating mint button
Creating mint button
  • Following this create a WalletAuthenticate function as shown👇
Using Onec-SDK for Wallet Authentication
Using Onec-SDK for Wallet Authentication

Yeaaah 🥳, Wallet is now connected.

Uploading Image to IPFS

Blockchain cannot store big files, like pictures, videos, gifs, or any other file due to storage capacity constraints. So in web3, these files are stored on distributed storage like IPFS, Filecoin etc. The files uploaded to these distributed storages are stored permanently on a fixed address. The address is then stored on the blockchain to link some data with the file.

Onec-NAAS provides an API function to upload images to IPFS(Interplanetary File System)

  • Next, would be uploading the file to IPFS, Below is a function to upload the Image to IPFS, this function will return the IPFS hash of the uploaded image.*PQYI4TnQaTT7u-xY7QEPfw.png*PQYI4TnQaTT7u-xY7QEPfw.png

Minting NFTs 😎

To mint NFTs, First, you’ll have to deploy your own Contract, you can check the onec docs for the contract deployment and get the contract address and contract type of your type and requirements. Or Follow the Contract deployment guide here.

Below is the sample function that is addressing the inputs to the values. Pass the nft_meta_data, **address, contract_adress (**that you’ve deployed, if not provided NFT will be minted at global contract owned by Onecdot) and contract_type(721 or 1155) .

Now ****this function will return the nft_id which you can use to check the mint status of the NFTs.*Q6jkiQY-LIJKg1GehttMDg.png*Q6jkiQY-LIJKg1GehttMDg.png

Checking status of the NFT Mint

To check the Mint status you’ll have to pass the nft_id that you get from the MintNFT function declared above 👆 and it will return the Status of the NFT, if the status is success then you will get the transaction id and token id, which you can use on to get all the information.

You can use the Token IDs to get the Metadata for the minted NFT, and your NFTs is now Minted 🌈.

Minting code
Minting code

Tadah! the minting stuff’s done. 🚀

So now your NFTs are being minted, and to make it even better, you can see NFTs being minted to your address on opensea (if you follow their metadata standards, refer onecdot’s docs), the largest NFT marketplace. With zero gas fees and removing the hassle of writing your smart contracts and dealing with the blockchain side of things.

Onec invites you to begin building and utilising the power of NFTs and other systems of tools with us.

Check out the products here:

Onec-NAAS 👉

Onec-SDK 👉

Onecdot functions as a LAB where the Developers, Advocates, Product Managers, Marketing people etc. are invited to build and ship cool products and write a great thesis.

Follow us on Twitter | Join Discord | Website

Subscribe to Onecdot
Receive the latest updates directly to your inbox.
This entry has been permanently stored onchain and signed by its creator.