Mint an NFT with React.js and XRPL

React Code Challenge

Challenge:
Open the sandbox below and create your own fork of the NFT application. Once you have minted an NFT, edit the app code and change the NFT transfer fee to 20% with a taxon of 1 and mint a second NFT on your account.

Hint:
You’ll need to look in the app components to make the changes you need. You can check the console of the code sandbox to see the metadata and transaction details to check if your NFT transfer fees and taxon changes are correct.

NFTs on the XRPL have a couple of necessary fields to note:
NFTokenTaxon – An arbitrary id used to group NFTs issued by the same account. If you’re creating a collection of similar assets, you can show them the same NFTokenTaxon.
URI – This optional field lets you link to more information related to your NFT.  Some people use this to link to the asset the NFT is representing, and others use this to link to additional metadata to help parse the NFT in marketplaces or other applications.

Get started with the NFT sandbox

1. Open the sandbox by using the ‘Open Sandbox’ link on the right side of the code window.
2. Wait for the wallets to be funded.
3. Customize your NFT by adding a link, or small amount of text to the URI field.
   – This field accepts a maximum of 256 bytes to keep the data stored on the ledger to a reasonable size.
   – This typically is where links to digital content or metadata would be stored.
4. Click the Send button to mint your NFT, and wait for your NFTokenMint transaction to be validated by the XRPL.
5. If it succeeds, you should see a token ID in your account, along with the URI you included.
   – You can repeat this using different URIs to see more NFTs get added to your account.