Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 3, 2022 08:51 pm GMT

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, well learn how we can build a zero gas fee Polygon supercharged NFT Minter(enter the URL here)

https://cdn-images-1.medium.com/max/1600/1*xo-VqkJw2jRuYfgruWh9mg.png

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 dont 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

  • 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!

Create a new API Key

Setting up the Folder Structure

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

https://cdn-images-1.medium.com/max/1600/1*1Gn20WalgB1KHD6oTUvstg.png

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.

https://cdn-images-1.medium.com/max/1600/1*iU6RNB6UmUh8xYgTJRmCSQ.png

  • Following this create a WalletAuthenticate function as shown

https://cdn-images-1.medium.com/max/1600/1*uVkGddsY4mprt-l9ylZsgg.png

Yeaaah , Wallet is now connected.

Uploading Image toIPFS

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.

https://cdn-images-1.medium.com/max/1600/1*PQYI4TnQaTT7u-xY7QEPfw.png

Minting NFTs

To mint NFTs, First, youll 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 youve 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.

https://cdn-images-1.medium.com/max/1600/1*Q6jkiQY-LIJKg1GehttMDg.png

Checking status of theNFT Mint

To check the Mint status youll 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 https://polygonscan.com/ 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 .

https://cdn-images-1.medium.com/max/1600/1*p_3EFISb7gpgG4uLYiLMCQ.png

Tadah! the minting stuffs 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 onecdots docs), the largest NFT marketplace. With zero gas fees and removing the hassle of writing your smart contractsand 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-NAAShttps://api.onec.in/docs/

Onec-SDKhttps://www.npmjs.com/package/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


Original Link: https://dev.to/onecdotin/build-your-own-nft-minter-on-polygon-in-less-than-an-hour-56de

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To