Develop a Friendly User Interface for Minting Cardano NFT

6 min readJun 29, 2021

Overview

In my last 2 articles (Building an NFT Platform on Cardano — Part I & Part II) , I talked about developing an NFT platform on Cardano. In this one, I would like to share more on the NFT minting part. It basically involves the following steps:

Step 1: User uploads information of the NFT

Step 2: System generates wallet address for receiving ADA from users

Step 3: System checks if enough ADA is received from the user

Step 4: System mints NFT on Cardano

Step 5: System sends the minted NFT to the user

Let’s dive in how I implement each step technically.

Step 1. Develop User Interface

Simple user Interface for user to input/upload information for NFT

To address to the general public, the user interface should be as simple as possible. It’s a single web form that allows users to upload an image file and fill in other NFT information.

There are several .js libraries that make the “drag & drop” feature possible. Dropzone.js is one of the options. We may add other new information when new standards of Cardano NFT become available. But we think it’s good for now.

Step 2. Generate an Address for receiving ADA

This step involves getting ADA from users used for minting the NFT token as well as our service fee.

We have generated a Cardano wallet (root.prv) specifically for this service. Each time, when we want to receive ADA from a user, we will generate a new address from this wallet. To achieve this, we need to use 3 tools provided by IOHK.

1.) cardano-address used for:

generate child key (payment.prv) from the root key (root.prv)

2.) cardano-wallet used for:

generate the child public key (payment.pub) from child private key (payment.prv)

3.) cardano-cli used for:

generate the payment signing key (payment.skey) from payment private key (payment.prv)
generate the payment verification key (payment.vkey) from payment signing key (payment.skey)
generate the payment address (payment.addr) from payment public key (payment.pub)

A more detail description of the generation steps and commands can be found in this article.

Step 3. Check if Ada is Received

Once the payment step is triggered, we have to check periodically if enough ADA is received by the payment address (payment.address) before we start the minting process.

For this step, the only tool needed is cardano-wallet to list the transactions for the payment address (payment.address).

To uniquely identify the sender, we intentionally set the ADA amount to have the 6 decimal numbers as a random number (e.g. 5.894603₳). If we can find a transaction that payment.address received an ADA amount of 5.89460₳, we can be pretty sure that the sender (sender.address) is the one who wants to mint the token.

Detail spec of the “cardano-wallet transaction” command can be found here.

Step 4. Minting Cardano NFT

This is the core step for NFT minting:

1.) Prepare the minting policy

generate the policy signing key (policy.skey) & verification key (policy.vkey) using command “cardano-cli address key-gen”
generate the keyhash from the policy verification key (policy.vkey) using command “cardano-cli address key-hash”
calculate the slot value when the NFT can’t be minted (validBeforeSlot) using command “cardano-cli query tip”
prepare the policy script (policy.script) using the above values (keyhash, validBeforeSlot). Sample as below:

{
  "type": "all",
  "scripts": [
    {
      "keyHash": "64dc298f2f99f153e0a4932f085e6f410fcc0b8b957ef62d67c0444c",
      "type": "sig"
    },
    {
      "type": "before",
      "slot": 30240171
    }
  ]
}

This sample implies that the token has to be signed by “all” keys with “keyhash” stated. Also, the NFT can’t be minted after slot “30240171” (that means the token is actually an NFT since it can’t be minted again after certain time)

prepare the policy ID (policy.id) based on the policy script (policy.script) using command “cardano-cli transaction policyid”

2.) Prepare the metadata file

metadata file (metadata.json) contains all information of the NFT. There is so far no agreed standard for the format or what contents it should contain. Sample can be like:

{
  "721": {
    "f84eae138dbd844f65524cd47bc81456c66a68b583532af61ca7dd4b": {
      "sampleNFT": {
        "name": "sampleNFT #1",
        "image": "ipfs://QmRVaBbbC4YYz9drxo8moR6foHCP8WsKtiEMaZhUVFoMVW",
        "description": "sampleNFT Coin no. 1"
      }
    }
  }
}

Please note that the image file of the NFT is stored in IPFS instead of an ordinary web server. This is done so that if 1 (or even several) server is down, the image file is still accessible. There are many companies in the market that offer IFPS services. The one we used is blockfrost.

3.) build the raw transaction data

get the utxo and ADA balance of the payment address (payment.address) using “cardano-cli query utxo”
build the temp raw data (tmp.raw) with tx-in & tx-out of utxo, policy.id, policy.script, metadata.json using command “cardano-cli transaction build-raw”

4.) calculate the transaction fee of the transaction

calculate the minimum transaction fee required using command “cardano-cli transaction calculate-min-fee” based on the temp raw file (tmp.raw)

5.) sign the transaction

prepare the signed raw file (matx.signed) using the command “cardano-cli transaction sign” based on the payment signing key (payment.skey) and policy signing key (policy.skey)

6.) submit the transaction

finally submit the transaction to the Cardano network using the command “cardano-cli transaction submit” with the signed raw file (matx.signed)
If everything fine, should return with a successful message. Otherwise will receive an error code that can be used for debug purpose.

For command details, please refer to this.

Step 5. Send the NFT to the Customer

As seen above, the owner of the NFT at this stage is still payment.address. As the last step, we have to send the minted the NFT to the user (sender.address). The sending of NFT is the same as sending ADA. But we need to note that all UTXO outputs have to come with ADA besides the native token (i.e. sending NFT to sender.address only without ADA included is not allowed). This is intended as requiring some amount of ADA to be included in every UTxO limits the maximum total size taken up by UTxO entries on the ledger at a given time. A detail explanation can be found on Cardano’s official page.

As usual, we have to go through the following steps:

build the raw transaction data by including the tx-in & tx-out of utxo’s
calculate the transaction fee of the transaction
sign the transaction using payment signing key (payment.skey)
submit the transaction

Detail cardano-cli commands can be found here.

As the NFT minting and sending processes need time to confirm, we can tell the user to check their wallet after 5min. NFT can be found on Daedalus wallet or pool.pm.

And if NFT still can’t be found after 5min, users can contact us to follow up.

Conclusion

NFT minting is the most important feature of our Cardano NFT platform. With this in place, our users can mint their own tokens by going through some simple steps.

And to complete the development of our website, we have to proceed with other features like NFT gallery, sales and auctions, etc. We expect that would be easy as most of the underlying API’s have already been done.

As mentioned before, changes may be needed when Cardano smart contract is ready. We will keep you updated. Stay tuned.