Build an NFT Minter Dapp on Shardeum

This guide will walk you through the process of building a simple NFT minter dapp application that uses React JS for the front-end, IPFS for decentralized storage, and deploys a Solidity smart contract on the Shardeum testnet. This application allows users to mint NFTs with custom metadata like name, description, and image/gif. 

1. Setting up our Project

Let’s start with creating an empty project file and initializing npm.

mkdir shardeum-nft-minter
cd shardeum-nft-minter
npm init

2. Smart Contract & Hardhat Setup

We will use Hardhat – A Development framework to deploy, test & debug smart contracts. 

i) Now, let’s install hardhat as a dev-dependency; choose ‘Create an empty hardhat.config.js’ and install the Openzeppelin Contracts Library. Also, let’s install all the other needed hardhat libraries.

npm install --save-dev hardhat
npx hardhat
npm install @openzeppelin/contracts
npm install --save ethers@5.7.2 hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
ii) Create a ‘contracts’ and ‘scripts’ folder. In the contracts folder, add the following code to NftMinter.sol file:

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.3;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract NFTMinter is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    constructor() ERC721("Shardeum Dev NFTMinter, "SNFT") {}
    function mintNFT(address recipient, string memory tokenURI) public returns (uint256) {
        _tokenIds.increment();
        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);
        return newItemId;
    }
}
The contract above inherits from the ERC721URIStorage contract from OpenZeppelin, making most of the needed functionalities of an ERC721 available to us. You can customize the constructor and rename the ERC721 Token name and Symbol as you like. We are also defining a minNFT function in which we keep track of tokenIDs and set the tokenURI which stores the metadata of that token. That’s it, this one smart contract is enough for our minter application.

iii) Create a deploy.js file in your scripts folder and add the following deployment script:

const { ethers } = require("hardhat");

async function main() {
    const NFTMinter = await ethers.getContractFactory("NFTMinter");
    const nftMinter = await NFTMinter.deploy();
    await nftMinter.deployed();
    console.log("NFTMinter deployed to:", nftMinter.address);
  }

    main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });
iv) Now, let’s add the needed code for deploying on Shardeum testnet.

require("@nomiclabs/hardhat-waffle");
module.exports = {
  networks: {
    hardhat: {
    },
    liberty: {
      url: "https://liberty20.shardeum.org/",
      accounts:[``] // Add private key here
    },
    sphinx: {
        url: "https://sphinx.shardeum.org/",
        accounts: [``] // Add private key here
        }
  },
  solidity: "0.8.3",
};
Add your private key in the accounts variable and make sure your account has enough Shardeum testnet tokens.

v) Now, let’s deploy our smart contracts on the Shardeum Liberty 2.X for this example.

npx hardhat run scripts/deploy.js --network liberty
The deploy script will deploy the smart contract on the Shardeum Testnet and output the deployed smart contract address. You will need this address later, so keep it saved.