Build your First NFT Dapp

With Shyft's API you can create applications to mint NFTs.

Last updated 2 years ago

Was this helpful?

Build your First NFT Dapp

With Shyft's API you can create applications to mint NFTs.

In this tutorial we will build a simple dapp that allows you to create an NFT on Solana blockchain, using Shyft APIs. At the end of this tutorial your newly minted NFT will be available in your own wallet.

Pre-requisites

To get started first thing first, let's install a browser extension of Phantom Wallet from below links:

Once installed, open Phantom in your browser, and follow the on-screen steps to create a new wallet. Refer to this , if you need help. Now, you have a public-private key pair that serves as an identity on blockchain.

Install nodeJs and npxx (node package executor)

Steps for mac:

//type the following commands on your terminal:
$ brew update
$ brew install node

//once completed, check if installed properly:
$ node -v
v18.0.0    // if installed properly, should output the node installed version

// install npx:
$ npm i -g npx

Setup

Alright, now we are all set to create our first NFT minting dapp. We will use ReactJs to build a simple front end to allow you to interactively create a NFT. We will use VS Code to walk through the tutorial.

Authentication: Get your Shyft API key

Setup react project

$ npx create-react-app my-first-nft-dapp

This creates the boilerplate code for your dapp, and file structure looks like below:

Let's dive into code

Let's create a new form for accepting all the details(parameters) we will require to create a new NFT. We have created a new component for the form, but you can also put this code directly under App.js

  const [file, setfile] = useState();
  const [network, setnetwork] = useState("devnet");
  const [publicKey, setPublicKey] = useState(''); //your wallet's public key
  const [name, setName] = useState();
  const [symbol, setSymbol] = useState();
  const [desc, setDesc] = useState();
  const [attr, setAttr] = useState();
  const [extUrl, setExtUrl] = useState();
  const [maxSup, setMaxSup] = useState(0);
  const [roy, setRoy] = useState(1);
  
  const [status, setStatus] = useState("Awaiting Upload");
  const [dispResponse, setDispResp] = useState("");
  
  return (
    <div className="App">
      <form>
        <label htmlFor="file">Select File</label>
        <input name="file" type="file" onChange={(e) => {
          setfile(e.target.files[0]));
        }} />
        <br />

        <label htmlFor="network">
          Network <span>(network: string)</span>
        </label>
        <select name="network" onChange={(e) => { setnetwork(e.target.value) }}>
          <option value="devnet">Devnet</option>
          <option value="testnet">Testnet</option>
          <option value="mainnet-beta">Mainnet Beta</option>
        </select>
        <br />

        <label>Public Key (wallet:string)</label>
        <input type="text" value={publicKey} onChange={(e) => setPublicKey(e.target.value)} required />
        <br />

        <label htmlFor="name">Name (name:string)</label>
        <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} required />
        <br />

        <label htmlFor="symbol">Symbol (symbol:string)</label>
        <input type="text" name="symbol" value={symbol} onChange={(e) => setSymbol(e.target.value)} required />
        <br />

        <label htmlFor="desc">Description (description:string)</label>
        <textarea name="desc" value={desc} onChange={(e) => setDesc(e.target.value)} required></textarea>
        <br />

        <label htmlFor="attributes">Attributes (attributes:string)</label>
        <textarea name="attributes" value={attr} onChange={(e) => setAttr(e.target.value)} required></textarea>
        <br />

        <label htmlFor="external_url">External Url (external_url:string)</label>
        <input type="text" name="external_url" value={extUrl} onChange={(e) => setExtUrl(e.target.value)} />
        <br />

        <label htmlFor="max_supply">Max Supply (max_supply:number)</label>
        <input type="number" name="max_supply" value={maxSup} onChange={(e) => { setMaxSup(e.target.value) }} required />
        <br />

        <label htmlFor="royalty">Royalty (royalty:number)</label>
        <input type="number" name="royalty" value={roy} onChange={(e) => { setRoy(e.target.value) }} required />
        <br />

        <button type="submit" onClick={mintNow}>
          Submit
        </button>
      </form>

      <textarea
        className="form-control"
        name=""
        value={JSON.stringify(dispResponse)}
        id=""
        cols="30"
        rows="10"
      ></textarea>
    </div>
  );

This is a simple form with takes in the following parameters:

Choose an image file that you want to mint as an NFT
Select the network (testnet, devnet, mainnet-beta)
Your phantom wallet's public key
NFT Name
NFT symbol
NFT description
External_Url, this can be link to any website that you want to put in. This will be visible in the phantom wallet account for navigation.
Number of editions of one particular NFT that can be minted. can be set to zero, if you want to create an one-of-a-kind NFT.
Royalty percentage of the NFT creator. Can be any value between 0 - 100.
Attributes associated to the NFT. It's a json array string, don't forget to Stringify as done in below code snippet.

let attrib = [{"trait_type": "speed", "value": 100},
{"trait_type": "aggression", "value": "crazy"},
{"trait_type": "energy", "value": "very high"}];

let paramsToPass = JSON.stringify(attrib);

//Here we have created 3 attributes for our NFT, namely:
//1. speed = 100
//2. aggression = "crazy"
//3. energy = "very high"

Making the API call

Once we have the data, we are ready to make the API call. For this tutorial, we have used the axios package to make the API call, but you can use any other methods including JavaScript's very own fetch.

"dependencies": {
    ...
    "axios": "^0.27.2"
    ....
  },

axios will allow your react application to make http request to Shyft's server and create your NFT.

Now, let's create a function for making the API call using the data we have collected using the form we created in this tutorial.

const mintNow = (e) => {
e.preventDefault();
setStatus("Loading");
let formData = new FormData();
formData.append("network", network);
formData.append("wallet", publicKey);
formData.append("name", name);
formData.append("symbol", symbol);
formData.append("description", desc);
formData.append("attributes", JSON.stringify(attr));
formData.append("external_url", extUrl);
formData.append("max_supply", maxSup);
formData.append("royalty", roy);
formData.append("file", file);

axios({
	// Endpoint to send files
	url: "https://api.shyft.to/sol/v1/nft/create_detach",
	method: "POST",
	headers: {
		"Content-Type": "multipart/form-data",
		"x-api-key": "Your-api-key",
		Accept: "*/*",
		"Access-Control-Allow-Origin": "*",
	},

	// Attaching the form data
	data: formData,
})
	// Handle the response from backend here
	.then(async (res) => {
		console.log(res);
		if(res.data.success === true)
		{
			setStatus("success: Transaction Created. Signing Transactions. Please Wait.");
			const transaction = res.data.result.encoded_transaction; //encoded transaction
			setSaveMinted(res.data.result.mint);
			const ret_result = await signAndConfirmTransactionFe(network,transaction,callback); //signing the encoded transaction
    			console.log(ret_result);
			setDispResp(res.data);
			
		}
	})

	// Catch errors if any
	.catch((err) => {
		console.warn(err);
		setStatus("success: false");
	});

}

The API Endpoint used:

POST https://api.shyft.to/sol/v1/nft/create_detach

Signing the Encoded Transaction

Now you are all set to mint your first NFT. Please note that this API does not require the private key, instead it uses the public key to sign the transaction required for the create operation.

Head over to the terminal and start the react app, by running:

npm run start

Your basic app will look like this:

All you have to do is enter the information in the fields and hit submit button.

Response :

{
  "success": true,
  "message": "NFT create request generated successfully",
  "result": {
    "encoded_transaction": "AgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1sWheB4cuv/Q2+0jo6buiunKcPGhvFP0MkPZKAqEaKsIdRPXcFkiLuiIa/pyUVrKUczLjr1Hs9QG5Y5iDBksMAgAFChjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8Vvb/IjgDJjQVC1f/ryBRhD4ahT7Q1HBYM6DpJ0WUTWn4RAfrhLTPnJMqAy/QLpEQpZFP+r95vFI1kPxccS3tj+xQxDOha6hFwbvC1+bl1KPipyhIpii09w/bWfkdcNqLoa6h4uighckbsoxU8cDYR7skYHVwb90kZsVS8bPEVzOEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIyXJY9OJInxuz0QKRSODYMLWhOZ2v8QhASOe9jb6fhZC3BlsePRfEU4nVJ/awTDzVi4bHMaoP21SbbRvAP4KUYGp9UXGSxcUSGMyUw9SvF/WNruCJuh/UTj29mKAAAAAAbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpOUrCSjEODK7K+JCY0PfeMucSKkHyBEhkHVSHEcaSI5MGBQIAATQAAAAAYE0WAAAAAABSAAAAAAAAAAbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpCQIBCEMAABjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8VARjKn1HFRx7tvpclOYMfcFNqxsZNjaEl7aHTEnXr/g8VBgcAAwABBQkIAAkDAQMACQcBAAAAAAAAAAcHAgEAAAAFCJ0BEAkAAABmaXNoIGV5ZXMDAAAARllFWAAAAGh0dHBzOi8vbmZ0c3RvcmFnZS5saW5rL2lwZnMvYmFma3JlaWVmamF6cnhpcGpwYmFwNjZkejQ3ZW80ZWdkdzdscHUzY2tvZW43NXZhdGhvaTRtaWszM2n0AQEBAAAAGMqfUcVHHu2+lyU5gx9wU2rGxk2NoSXtodMSdev+DxUBZAAAAQcJBAEAAAACCQUIChEBAQAAAAAAAAA=",
    "mint": "Pmhfos1S2sipnz3UPgAjHQeeYzFn1pbEqpdissS2fZbj"
  }
}

Once we receive the encoded_transaction in the response, the last and final step is to sign the transaction. We can sign encoded_transactionin two ways, either using the wallet from the frontend, or by using the wallet's private key from the backend.

To check, if the NFT is created on the blockchain.

Paste the mint value (the on-chain address of your token) returned in the response in the search bar, you should get the details of the created NFT.
Details of the transaction can be checked by pasting txnId from the response in the previous search bar on Solana explorer.

By now, NFT has already been received in your wallet!! Go to Your Collectibles tab of your phantom wallet, and you should see the newly created NFT.

Ending Notes

I hope you enjoyed this tutorial and are excited to dive deep into web3 awesomeness. Stay tuned for more such tutorials. If you want the complete code for this project with good looking UI, please checkout/fork and play with the code at this Repository.:

Resources

Last updated 2 years ago

Was this helpful?