## What are we building?🤔

We’ll be building and shipping a full stack app which takes in prompts from user and generates art using stable diffusion and mint this generated art on the blockchain for free.

We are going to use [hugging face](https://huggingface.co/) to use the stable diffusion model and generate the art via an api and mint this generated art on the blockchain using the [NFTport](https://nftport.xyz/) api to mint the NFT gasless, i.e. for free.

---

## 👀 Prerequisites

No prerequisites for this project, this is beginner friendly project and anyone can build this:)

---

## ⚙️ Let’s setup our react app

Feel free to skip this part if you already know how to create a new react app, you can also clone the starter template from here → [https://github.com/0xblocktrain/ai-art-gasless-mint/tree/starter](https://github.com/0xblocktrain/ai-art-gasless-mint/tree/starter)

We’ll be setting up our **react app** with **tailwind css** and a few other dependencies that we’ll use later.

```bash
npx create-react-app ai-art-gasless-mint
```

Run this command in your terminal, this will create a react app with the folder name `ai-art-gasless-mint` you can name it with whatever you want it to be.

Now let’s cd(change directory) into the app and then install the [tailwind css](https://tailwindcss.com/)

```bash
cd ai-art-gasless-mint
```

For installing tailwind you can follow this step-by-step guide given by tailwind to install it → [Guide](https://tailwindcss.com/docs/guides/create-react-app)

If you were successful in installing the tailwind CSS, let’s next clean up our folder structure.

![https://i.imgur.com/v4scFBf.png](https://i.imgur.com/v4scFBf.png)

Delete these two files as we won’t be needing this and also delete **`App.css`** and also clean up our **`App.js`** and remove the boilerplate code which comes with React App.

Now open your terminal again and start the react app

![https://i.imgur.com/aVSPN6Q.png](https://i.imgur.com/aVSPN6Q.png)

Viola, we’ve got our react app working.

Next what we do is give the user an ability to write a prompt and generate an image using the stable diffusion model for which we’ll be using [huggingface](https://huggingface.co/)

---

## 🖼️ Generating AI art based on prompts

Let’s go to hugging face first and create a new account in order to get our API key.

![https://i.imgur.com/4eLSIqb.png](https://i.imgur.com/4eLSIqb.png)

Go over to [Huggingface/join](https://huggingface.co/join) and then add your email, password and then verify the email address in order to get the API key or access token.

Once you have your email verified you should see this screen

![https://i.imgur.com/OHoR1SO.png](https://i.imgur.com/OHoR1SO.png)

We’ll be using [https://huggingface.co/runwayml/stable-diffusion-v1-5](https://huggingface.co/runwayml/stable-diffusion-v1-5) this model to generate our AI art based on the prompts you can even try this on the hugging face website itself

![https://i.imgur.com/21KDcpO.png](https://i.imgur.com/21KDcpO.png)

The first load might take time as the model needs to be loaded first.

Let’s generate an access token next for us to generate images on our Frontend instead of everytime using the Huggingface for generating image, we need the access token/api key for using the hugging face interference api, you can read more about it over here → [https://huggingface.co/docs/api-inference/index](https://huggingface.co/docs/api-inference/index)

Click on the top right corner where you have your avatar and click on Settings

![https://i.imgur.com/PFxWJ38.png](https://i.imgur.com/PFxWJ38.png)

Now click on Access token on the left sidebar and generate a new token

![https://i.imgur.com/xpbTGfD.png](https://i.imgur.com/xpbTGfD.png)

![https://i.imgur.com/hRPNNan.png](https://i.imgur.com/hRPNNan.png)

Now copy the token and then open your react codebase on any editor you like, I’ll go ahead with visual studio code.

![https://i.imgur.com/sJ0mgIH.png](https://i.imgur.com/sJ0mgIH.png)

Now create a **`.env`** file at the root of your app and create a new React environment variable to store the hugging face access token.(remember REACT_APP prefix is mandatory when using env variables in react)

![https://i.imgur.com/xejo5A5.png](https://i.imgur.com/xejo5A5.png)

Now let’s create two states in our **`App.js`** one to store the input from the user and one to store the image data fetched from the API, but in order to fetch from the API we need `axios` package first let’s go back to our terminal and install it using the npm

```bash
npm install axios
```

Once we have our axios installed let’s go ahead and code in our `App.js`

1. Create an input box in the middle and next button beside it.
2. Create a state that will store the input text.
3. Write a function to generate the ai image by calling hugging face api
4. Store the response from API in a new state

This will be our workflow.

```
import { useState } from "react";
import axios from 'axios'

function App() {

  const [prompt, setPrompt] = useState("")

  console.log(prompt)

  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-4">
      <h1 className="text-4xl font-extrabold">AI Art Gasless mints</h1>
      {/* Create an input box and button saying next beside it */}
      <div className="flex items-center justify-center gap-4">
        <input
          className="border-2 border-black rounded-md p-2"
          onChange={(e) => setPrompt(e.target.value)}
          type="text"
          placeholder="Enter a prompt"
        />
        <button className="bg-black text-white rounded-md p-2">Next</button>
      </div>
    </div>
  );
}

export default App;
```

Here we use onchange on the input to keep track of the text entered by the user

![https://i.imgur.com/FkITt2O.png](https://i.imgur.com/FkITt2O.png)

You can see that our text get’s logged here, what we do next is create a function to call the hugging face api and then store the response data in a state so that we can display the image to be minted by the user.

The endpoint for the api is in the hugging face docs→ https://huggingface.co/docs/api-inference/quicktour

![https://i.imgur.com/NS72LU3.png](https://i.imgur.com/NS72LU3.png)

The model ID is on the models page → [https://huggingface.co/runwayml/stable-diffusion-v1-5](https://huggingface.co/runwayml/stable-diffusion-v1-5)

![https://i.imgur.com/mHQvE8E.png](https://i.imgur.com/mHQvE8E.png)

This entire text is our model id.

Now let’s write a function to call the api and get the response.

```jsx
const generateArt = async () => {
		try {
			const response = await axios.post(
				`https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5`,
				{
					headers: {
						Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE}}`,
					},
					method: "POST",
					inputs: prompt,
				},
				{ responseType: "blob" }
			);
			const url = URL.createObjectURL(response.data)
			console.log(url)
		} catch (err) {
			console.log(err);
		}
	};
```

We call the API with the prompt as input and then get the blob from the response, now let’s create a URL from the blob so that we can use this as a source for our image tag.

Now let’s create a new state and store the blob in the state

```jsx
const [imageBlob, setImageBlob] = useState(null)

const generateArt = async () => {
	try {
		const response = await axios.post(
			`https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5`,
			{
				headers: {
					Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE}}`,
				},
				method: "POST",
				inputs: prompt,
			},
			{ responseType: "blob" }
		);
		console.log(response);
		const url = URL.createObjectURL(response.data)
		// console.log(url)
		console.log(url)
		// Set state for image
    setImageBlob(url)
	} catch (err) {
		console.log(err);
	}
};
```

Let’s use this image blob in the UI

```jsx
return (
	<div className="flex flex-col items-center justify-center min-h-screen gap-4">
		<h1 className="text-4xl font-extrabold">AI Art Gasless mints</h1>
    <div className="flex flex-col items-center justify-center">
      {/* Create an input box and button saying next beside it */}
      <div className="flex items-center justify-center gap-4">
        <input
          className="border-2 border-black rounded-md p-2"
          onChange={(e) => setPrompt(e.target.value)}
          type="text"
          placeholder="Enter a prompt"
        />
        <button className="bg-black text-white rounded-md p-2">Next</button>
      </div>
      {
        imageBlob && <img src={imageBlob} alt="AI generated art" />
      }
    </div>
	</div>
);
```

Before testing this out we need to add `onClick` to our button and map the `generateArt` function to it.

```jsx
return (
	<div className="flex flex-col items-center justify-center min-h-screen gap-4">
		<h1 className="text-4xl font-extrabold">AI Art Gasless mints</h1>
    <div className="flex flex-col items-center justify-center">
      {/* Create an input box and button saying next beside it */}
      <div className="flex items-center justify-center gap-4">
        <input
          className="border-2 border-black rounded-md p-2"
          onChange={(e) => setPrompt(e.target.value)}
          type="text"
          placeholder="Enter a prompt"
        />
        <button onClick={generateArt} className="bg-black text-white rounded-md p-2">Next</button>
      </div>
      {
        imageBlob && <img src={imageBlob} alt="AI generated art" />
      }
    </div>
	</div>
);
```

Viola🎉 here we have our AI art being generated

![https://i.imgur.com/bLSRgNg.png](https://i.imgur.com/bLSRgNg.png)

Now let’s create a flow to let user’s mint their AI generated image.

---

## 📈 Upload our AI generated art to IPFS

Before we mint our AI generated art as NFTs we’ll need to upload it somewhere so that our NFT’s metadata points to it, we’ll be storing our AI generated image on IPFS, IPFS is interplanetary file storage system which is actually a peer to peer protocol used for saving data, you can think of it as Torrent. You can read more about how it works over here → [ipfs.tech/#how](https://ipfs.tech/#how)

We’ll be using [NFT.storage](https://nft.storage) for storing our files on IPFS.

Go over to [Nft.storage/login](https://nft.storage/login) and sign in using either github or your email.

![https://i.imgur.com/NvN7lS5.png](https://i.imgur.com/NvN7lS5.png)

Once you are logged in, click on the API keys tab on the top

![https://i.imgur.com/Cw4RgkS.png](https://i.imgur.com/Cw4RgkS.png)

Next create a new key and copy the key and store it in our `.env` file at the root of the project with name `REACT_APP_NFT_STORAGE`

![https://i.imgur.com/7Dd655w.png](https://i.imgur.com/7Dd655w.png)

Now go back to our terminal and install nft.storage package.

```bash
npm i nft.storage
```

Now let’s go ahead and create a function that uploads the file to IPFS, if you want to figure this out yourself feel free to read the docs of [nft.storage](http://nft.storage) → [https://nft.storage/docs/#using-the-javascript-api](https://nft.storage/docs/#using-the-javascript-api)

Remember we convert our image to a blob url in order to display it in the UI in the **`generateArt`** function, we’ll need to convert that blob to a file type before converting it to a blob url and store it in a state so that we can use it in our **`uploadArtToIPFS`** function. Let’s create a new state called file and update our **`generateArt`** function.

```bash
const [file, setFile] = useState(null)

const generateArt = async () => {
	try {
		const response = await axios.post(
			`https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5`,
			{
				headers: {
					Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE}}`,
				},
				method: "POST",
				inputs: prompt,
			},
			{ responseType: "blob" }
		);
		// convert blob to a image file type
		const file = new File([response.data], "image.png", {
			type: "image/png",
		});
		// saving the file in a state
		setFile(file);
		const url = URL.createObjectURL(response.data);
		// console.log(url)
		console.log(url);
		setImageBlob(url);
	} catch (err) {
		console.log(err);
	}
};
```

Now that we have our image file let’s create a function to upload this to IPFS

```jsx
import { NFTStorage } from "nft.storage";

const uploadArtToIpfs = async () => {
  try {

    const nftstorage = new NFTStorage({
			token: process.env.REACT_APP_NFT_STORAGE,
		})

    const store = await nftstorage.store({
      name: "AI NFT",
      description: "AI generated NFT",
      image: file
    })

    console.log(store)

  } catch(err) {
    console.log(err)
  }
}
```

We first need to import the [NFT.storage](http://NFT.storage) package at the top and then initialize it in the function itself with the API key that we created earlier on the portal.

Next we use the **store** function from the [NFT.storage](http://NFT.storage) package and use it to store the files, then we just console log it for now.

Now let’s map this function to a button.

```jsx
{imageBlob && (
	<div className="flex flex-col gap-4 items-center justify-center">
		<img src={imageBlob} alt="AI generated art" />
		<button
			onClick={uploadArtToIpfs}
			className="bg-black text-white rounded-md p-2"
		>
			Upload to IPFS
		</button>
	</div>
)}
```

We’ll display it right beneath our generated image.

![https://i.imgur.com/oOhIIzi.png](https://i.imgur.com/oOhIIzi.png)

Now that we have our image being uploaded to IPFS and we are also getting it’s CID, CID is nothing but an content identifier for our file on the IPFS network, a quick google search might help you understand it better.

We’ll return IPFS CID from this function and next let’s mint our AI generated art as an NFT, but if you see the `href` generated it’s in the form `ipfs://` which is not an actual url but we need an actual https url to mint the NFT, let’s use one of the IPFS gateways to create a url, we’ll write a function to replace `ipfs://` with one of the IPFS gateways.

```jsx
const cleanupIPFS = (url) => {
  if(url.includes("ipfs://")) {
    return url.replace("ipfs://", "https://ipfs.io/ipfs/")
  }
}
```

IPFS gateways are in the form 

```jsx
https://ipfs.io/ipfs/<YOUR-IPFS-HASH>

https://cf-ipfs.com/ipfs/<YOUR-IPFS-HASH>
```

There are multiple different gateways, a quick google search might help you understand more about this.

Now let’s use the `cleanupIPFS` function before returning the url

```jsx
const uploadArtToIpfs = async () => {
  try {

    const nftstorage = new NFTStorage({
			token: process.env.REACT_APP_NFT_STORAGE,
		})

    const store = await nftstorage.store({
      name: "AI NFT",
      description: "AI generated NFT",
      image: file
    })

    return cleanupIPFS(store.data.image.href)

  } catch(err) {
    console.log(err)
    return null
  }
}
```

---

## ⚒️ Let’s mint our AI generated art for free

Let’s go to [NFTport.xyz](http://NFTport.xyz) and get our free API key first

![https://i.imgur.com/axAjFfv.png](https://i.imgur.com/axAjFfv.png)

You’ll get a email verification link verify it, and you’ll find a link to your dashboard in the email itself which contains the API key

![https://i.imgur.com/FR6u8UM.png](https://i.imgur.com/FR6u8UM.png)

Now let’s copy the API key and store it in our `.env` file at the root of the project with the name `REACT_APP_NFT_PORT`.

Now let’s write our function to mint NFTs for free on the **`Polygon Network`** , we’ll use NFTport’s easy mint API to mint our NFT’s you can read more about it on their docs → [https://docs.nftport.xyz/reference/easy-minting-urls](https://docs.nftport.xyz/reference/easy-minting-urls)

![https://i.imgur.com/Tuxzuxm.png](https://i.imgur.com/Tuxzuxm.png)

Now we’ll use axios to call this API with all our data and mint the NFT, let’s write a function for this:

```jsx
const mintNft = async () => {
	try {
		const imageURL = await uploadArtToIpfs();

		// mint as an NFT on nftport
		const response = await axios.post(
			`https://api.nftport.xyz/v0/mints/easy/urls`,
			{
				file_url: imageURL,
				chain: "polygon",
				name: "Sample NFT",
				description: "Build with NFTPort!",
				mint_to_address: "0x40808d4730aeAAfb44465c507499CB8EE690497b",
			},
      {
        headers: {
          Authorization: process.env.REACT_APP_NFT_PORT,
        }
      }
		);
		const data = await response.data;
		console.log(data);
	} catch (err) {
		console.log(err);
	}
};
```

Instead of uploading the file to IPFS manually using a button we’ll call it directly before minting the NFT and get the image url.

Now let’s post a req with our API key and the required data to NFTPort.

Here, give a random name, description and give a wallet address that you currently have on the metamask.

Let’s map this function to a button, let’s convert the upload to ipfs button to a mint button as we already upload it while minting.

Once the NFT get’s minted you’ll get it logged in the console

![https://i.imgur.com/XXWIVvh.png](https://i.imgur.com/XXWIVvh.png)

Now head over to [opensea.io](https://opensea.io) and connect your wallet and go to your profile and then hidden tab

![https://i.imgur.com/Mdl16ij.png](https://i.imgur.com/Mdl16ij.png)

![https://i.imgur.com/jrDNovT.png](https://i.imgur.com/jrDNovT.png)

![https://i.imgur.com/rAxFaTr.png](https://i.imgur.com/rAxFaTr.png)

Viola there you go we have our AI generated image minted as an NFT on Polygon network for free without paying a gas, you might be wondering why is this in the hidden tab, Opensea by default puts all the NFTs minted on polygon chain in the hidden tab you can remove it from the hidden and showcase it in your profile.

---

## 🏁 Wrap up

Give yourself a pat on your back if you’ve reached this far, there are a few challenges ahead that I would like you to take up on

1. After the art is generated give the user option to input a name, description, and address.
2. Add loader screens when art is being generated.
3. Add error screens if the art is not generated due to model being loaded.
4. Give a minted confirmation

You can try out the live version here → [https://ai-gasless-mint.vercel.app/](https://ai-gasless-mint.vercel.app/)

It should look something like this

![https://i.imgur.com/2Ye5tRn.png](https://i.imgur.com/2Ye5tRn.png)

![https://i.imgur.com/TBIJUv6.png](https://i.imgur.com/TBIJUv6.png)

![https://i.imgur.com/Bu0qWil.png](https://i.imgur.com/Bu0qWil.png)

If you’ve tried this haven’t been succefull then feel free to checkout the Github repo for the solution → [https://github.com/0xblocktrain/ai-art-gasless-mint](https://github.com/0xblocktrain/ai-art-gasless-mint)

Also if you’ve reach this far do tag us on twitter and let us know the amazing work you’ve done!

Have fun building and shipping!

Build a full stack AI NFT app with Next JS, IPFS, NFT storage, Open AI to mint AI generated images

Build an AI NFT minting app 

Build a full stack Todo Web3 app with Next JS, Solidity, Ethers JS, and Hardhat.

Build a full stack ERC 20 dapp

## Introduction

This contract allows for the purchase of NFTs with added royalties. When a user buys an NFT, the contract calculates the royalty amount based on the NFT price and the specified royalty percentage, and then transfers the NFT to the buyer and the royalty amount to the royalty recipient for the NFT. The contract also allows the contract owner to set the royalty recipient for each NFT. This allows the contract to distribute royalties to the appropriate parties when NFTs are bought.

```
pragma solidity ^0.5.0;

import "https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/token/ERC721/ERC721.sol";

contract RoyaltiesNFTs {
    // Address of the contract owner
    address public owner;

    // ERC721 contract for the NFTs
    ERC721 public nftContract;

    // Royalty percentage for the NFTs
    uint public royaltyPercentage;

    // Mapping from NFT ID to royalty recipient
    mapping (uint => address) public royaltyRecipients;

    // Function to initialize the contract
    function initialize(address _nftContract, uint _royaltyPercentage) public {
        // Set the contract owner to the msg.sender
        owner = msg.sender;

        // Set the ERC721 contract for the NFTs
        nftContract = ERC721(_nftContract);

        // Set the royalty percentage for the NFTs
        royaltyPercentage = _royaltyPercentage;
    }

    // Function to set the royalty recipient for a given NFT ID
    function setRoyaltyRecipient(uint _id, address _recipient) public {
        // Require the caller to be the contract owner
        require(msg.sender == owner, "Only the contract owner can set the royalty recipient.");

        // Set the royalty recipient for the NFT
        royaltyRecipients[_id] = _recipient;
    }

    // Function to buy an NFT
    function buyNFT(uint _id) public payable {
        // Get the NFT price
        uint price = nftContract.tokenMetadata(_id).price;

        // Calculate the royalty amount
        uint royaltyAmount = price * royaltyPercentage / 100;

        // Transfer the NFT to the buyer
        nftContract.safeTransferFrom(nftContract.ownerOf(_id), msg.sender, _id);

        // Transfer the royalty amount to the royalty recipient
        royaltyRecipients[_id].transfer(royaltyAmount);
    }
}

```

Learn how royalties are added in the NFT smart contract

NFT royalty smart contract

## 👻 What are Soulbound tokens(SBT)?

Soulbound tokens are basically tokens that are attached to your account, as in they are non-transferrable tokens, the only thing that you can do is either burn the token or revoke the token meaning sending the token back to the sender.

The logic behind soulbound originates from the popular online game World of Warcraft. Players cannot sell or transfer soulbound items. Once picked up, soulbound items are forever “bound” to the player’s “soul.”

The purpose of soulbound token is to turn NFTs into something beyond just flipping jpegs, making money, showing status but to have a token that is both one-of-a-kind and also non-transferable. 

Although there’s no actual monetary value of SBTs but it represents a person or it’s entity’s reputation.

---

## 🧪 What’s the need for Soulbound tokens(SBTs)?

There are plenty of use-cases for Soulbound tokens, some of the examples that can be implemented in every-day life can be:

- Proof of work - You get certificates on completion of a course, degrees.
- Proof of identification - Licenses or KYC stuff which is user specific
- Exclusive membership
- Credit verification
- Proof of attendance - [POAPs](https://poap.xyz/) are the best example

I’ve just showed you the tip of the iceberg but the use-cases are endless, If you want to understand more about here’s an excellent blog by the king himself [Vitalik Buterin](https://vitalik.eth.limo/general/2022/01/26/soulbound.html)

The only difference between our traditional NFTs and SBTs are that SBTs are non-transferrable as the whole purpose of SBTs are to create an individual’s digital identity so that they can be verified on-chain as data on-chain can’t be tampered and also that they don’t hold any monetary value because of the fact that they are non-transferrable so you can’t trade.

---

## What are we hacking today?🤔

Today we’ll be writing and deploying a NFT smart contract which is EIP4973 complaint i.e. Soulbound/Account bound token and we as the owner can mint and send the tokens to eligible people so that they can view it on **Opensea**, or any other marketplace.

For this we’ll first create an ERC721 NFT smart contract and then modify it along the way to make it EIP4973 compliant.

Let’s get started.

---

## 👀 Prerequisites

- Basics of Solidity
- Basic understanding of NFTs
- Little curiosity

---

## 📝Writing a basic ERC721 contract

Before creating our Soulbound token, we’ll need a contract from which will act as our base contract and we’ll modify this to make this our Soulbound/Account bound NFT smart contract, don’t worry if you don’t know how to write smart contracts, we already have in-detail projects on NFT smart contracts like [Getting started with NFT development](https://www.blocktrain.info/blog/get-started-with-nft-development) and [how to create an NFT contract with on-chain metadata](https://www.blocktrain.info/blog/create-an-nft-collection-with-on-chain-metadata), [Create an ERC1155 NFT contract with multiple editions](https://www.blocktrain.info/course/nft-development-course/hc5E7XV0hzoThZ0N4c6W),  [Create a music NFT collection](https://www.blocktrain.info/course/nft-development-course/q5AeG8v0lLrP1MI9jwaa) these might be a good starting place if you’re looking to understand about NFT smart contracts also stay tuned cause we are going to drop a lot of projects soon👀

Let’s go over to [Openzeppelin Wizard](https://docs.openzeppelin.com/contracts/4.x/wizard) and get a contract boilerplate

![https://i.imgur.com/ENiSiGl.png](https://i.imgur.com/ENiSiGl.png)

- Here we add the **name** and **symbol** of the contract first, this will be used as an identifier on etherscan and NFT marketplaces
- Next is base URI, to understand how to upload files on **ipfs** and get their hash you can go to our [Music NFT Tutorial](https://www.blocktrain.info/course/nft-development-course/q5AeG8v0lLrP1MI9jwaa) where we have explained this in detail. For now you can use my hosted ipfs link: `ipfs://bafkreidwx6v4vb4tkhhcjdjnmpndxqqcxp6bnowtkzehmncpknx3x2rfhi/` but just remember that this is a reference to our NFTs, this contains our NFT metadata and looks something like this when opened with an dedicated gateway - [link](https://ipfs.io/ipfs/bafkreidwx6v4vb4tkhhcjdjnmpndxqqcxp6bnowtkzehmncpknx3x2rfhi)
    
    ![https://i.imgur.com/8SkGU4U.png](https://i.imgur.com/8SkGU4U.png)
    
- Next are features and we’ll select **Mintable** which will allow users to mint, **Auto-increment Ids** which will be used to increment tokenIds of NFTs everytime a new one is minted.

Now let’s open this up in **Remix**, which is an online-ide to compile and deploy smart contracts.

We’ll just make a few changes in the contract, the final contract should look something like this:

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "@openzeppelin/contracts@4.7.3/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts@4.7.3/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts@4.7.3/access/Ownable.sol";
import "@openzeppelin/contracts@4.7.3/utils/Counters.sol";

contract BlocktrainSoulbound is ERC721, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;

    Counters.Counter private _tokenIdCounter;

    constructor() ERC721("BlocktrainSoulbound", "BST") {}

    function _baseURI() internal pure override returns (string memory) {
        return "ipfs://bafkreidwx6v4vb4tkhhcjdjnmpndxqqcxp6bnowtkzehmncpknx3x2rfhi";
    }

    function safeMint(address to) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
    }

    // The following functions are overrides required by Solidity.

    function _burn(uint256 tokenId) internal override(ERC721, ERC721URIStorage) {
        super._burn(tokenId);
    }

    function tokenURI(uint256)
        public
        pure
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return _baseURI();
    }
}
```

Here we’ve just changed the `safeMint()` and `tokenURI()` function

- In `safeMint` we have removed the URI from functions args and removed the `_setTokenURI`
- In `tokenURI` we instead of appending **tokenId** at the end of the URI we want the same NFT metadata for all NFTs in the collection, as this is just for demo purpose so I just return the `_baseURI()` which returns the `URI`.

Now just compile your contract on Remix and deploy it over there itself and test if it works:

You need to press `Ctrl+S` to compile your contract

![https://i.imgur.com/CcZaFNF.png](https://i.imgur.com/CcZaFNF.png)

Once deployed test it using all the functions available:

![https://i.imgur.com/fb7wyBE.png](https://i.imgur.com/fb7wyBE.png)

---

## 🥷 Understanding EIP4973

According to **ERC4973 Interface** there are 5 things needed in order to create a Soulbound/Account bound token.

![https://i.imgur.com/gFJOSrN.png](https://i.imgur.com/gFJOSrN.png)

- **Event Attest** - This event is emitted whenever a new token is issued and sent or bounded to an account.
- **Event Revoke** - Revoke is emitted whenever a user sends the token back to the owner or burns it.
- The `balanceOf`, `ownerOf` and `burn` are already available in ERC721

For metadata standard we’ll follow ERC721 metadata as mentioned in the EIP.

You can read the [EIP4973 official proposal](https://eips.ethereum.org/EIPS/eip-4973), also remember that it is still in review purpose and might change in future but the main fundamental concepts won’t change.

---

## ⚒️ Modify contract to make it EIP4973 compatible

Now the first step that we need to do is to make our **ERC721** base contract non-transferrable, for this what we just need to do is override 2 functions `_beforeTokenTransfer` and `_afterTokenTransfer` which are present in ERC721 contract and can be found on [Openzepplin contracts](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC721/ERC721.sol)

![https://i.imgur.com/wOVviEK.png](https://i.imgur.com/wOVviEK.png)

These functions act as hook, that runs before or after the transfer. 

Just copy these two functions and paste it in our contract on Remix, something like this:

```solidity
....

function _beforeTokenTransfer(
    address from,
    address to,
    uint256 tokenId
) internal override virtual {}

function _afterTokenTransfer(
    address from,
    address to,
    uint256 firstTokenId
) internal override virtual {}
```

Remember to add override so that it overrides the function present in base contract which is ERC721.

Now for `_beforeTransferToken` we need to check if the user is either receiving the token of burning the token then only we move ahead, and this can be done by checking the `from` address and `to` address, if `from` address is `address(0)` then it means the user is receiving the token and it `to` address is `address(0)` then the user is burning the token, we need to add a `require` statement for this:

```solidity
function _beforeTokenTransfer(
    address from,
    address to,
    uint256 /* TokenId */
) internal override virtual {
    require(from == address(0) || to == address(0), "You cannot transfer this token");
}
```

Now `_afterTokenTransfer` will only be called when the token is either issued or burned so we need to call the two events mentioned in the **EIP4973, Attest and Revoke** according to the transfer.

```solidity
function _afterTokenTransfer(
    address from,
    address to,
    uint256 firstTokenId
) internal override virtual {
    if(from == address(0)) {
        emit Attest(to, firstTokenId);
    } else if (to == address(0)) {
        emit Revoke(to, firstTokenId);
    }
}
```

**Attest** will be emitted when the `from` address is `address(0)` as it means that token is issued, while ************Revoke************ will be emitted when the `to` address is `address(0)` which means that token is burned.

We don’t have these two Event’s initialized or inherited so let’s pick them from the EIP and paste it in our code at the top above the `constructor`

```solidity
event Attest(address indexed to, uint256 indexed tokenId);
event Revoke(address indexed to, uint256 indexed tokenId);
```

Now we have our non-transferrable NFT smart contract done, we have a few things more to modify. 

First is the `_burn` function inherited from **ERC721**, it is an internal function, according to EIP4973 we need an external `burn`  and only the owner of the tokenId can call the burn function:

```solidity
function burn(uint256 tokenId) external {
    require(ownerOf(tokenId) == msg.sender, "You are not the owner of the tokenId");
    _burn(tokenId);
}
```

Last and final thing that’s left is to let the issuer or creator of the NFT to take back/burn the Soulbound token.

```solidity
function revoke(uint256 tokenId) external onlyOwner {
    _burn(tokenId);
}
```

It is a `onlyOwner` function which let’s the creator of the contract to burn any token he wants.

Viola🎉🍾 we have our Soulbound token NFT contract done, which makes sure that tokens are non-transferrable, and user can only burn the token

Entire contract should look something like this:

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract BlocktrainSoulbound is ERC721, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;

    Counters.Counter private _tokenIdCounter;

    event Attest(address indexed to, uint256 indexed tokenId);
    event Revoke(address indexed to, uint256 indexed tokenId);

    constructor() ERC721("BlocktrainSoulbound", "BST") {}

    function _baseURI() internal pure override returns (string memory) {
        return "ipfs://bafkreidwx6v4vb4tkhhcjdjnmpndxqqcxp6bnowtkzehmncpknx3x2rfhi";
    }

    function safeMint(address to) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
    }

    // The following functions are overrides required by Solidity.

    function _burn(uint256 tokenId) internal override(ERC721, ERC721URIStorage) {
        super._burn(tokenId);
    }

    function burn(uint256 tokenId) external {
        require(ownerOf(tokenId) == msg.sender, "You are not the owner of the tokenId");
        _burn(tokenId);
    }

    function revoke(uint256 tokenId) external onlyOwner {
        _burn(tokenId);
    }

    function tokenURI(uint256)
        public
        pure
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return _baseURI();
    }

    function _beforeTokenTransfer(
        address from,
        address to,
        uint256 /* TokenId */
    ) internal override virtual {
        require(from == address(0) || to == address(0), "You cannot transfer this token");
    }

    function _afterTokenTransfer(
        address from,
        address to,
        uint256 firstTokenId
    ) internal override virtual {
        if(from == address(0)) {
            emit Attest(to, firstTokenId);
        } else if (to == address(0)) {
            emit Revoke(to, firstTokenId);
        }
    }
}
```

Now it’s time to deploy it on Goerli testnet and test it out ourselves.

---

## ⛽ Deploy our contract on Goerli Testnet

In order to deploy the contract on Goerli Testnet we’ll need some testnet ether first, let’s go and get some on [goerlifaucet](https://goerlifaucet.com/) which is run by [Alchemy](https://www.alchemy.com/)

Just go to [goerlifaucet.com](http://goerlifaucet.com) and add your address over there and click on send me funds

![https://i.imgur.com/0UnAk7V.png](https://i.imgur.com/0UnAk7V.png)

Once the transaction goes through you should be able to see some testnet ether in your metamask wallet when you switch the network to goerli, if you can't find goerli in your metamask a quick google search might help:)

![https://i.imgur.com/UaqzewL.png](https://i.imgur.com/UaqzewL.png)

Once we have funds in our wallet, let’s go back to remix and deploy the contract, Click on the last tab on the left and change the network to **Injected Provider - Metamask** in the dropdown, a popup should open to connect your wallet, just click confirm and connect.

Once you have your wallet connected just make sure that you are on **Goerli Testnet** and then click deploy once the transaction goes through you should be able to see your contracts on the bottom left where it says deployed contracts.

![https://i.imgur.com/0kfyNdZ.png](https://i.imgur.com/0kfyNdZ.png)

Just copy the address by clicking on the button beside the name of the contract and paste it on [goerli.etherscan.io](https://goerli.etherscan.io), you should be able to see something like this:

![https://i.imgur.com/sisKDxa.png](https://i.imgur.com/sisKDxa.png)

---

## ⛏️ Mint NFTs through Remix

Now the first thing I’ll test is trying to mint the NFTs from a different metamask account for this just change the wallet in metamask and click on `mint function`

You’ll get this prompt from **Remix**, which says that `caller is not the owner` which means only the owner of the contract can mint the NFTs

![https://i.imgur.com/4LgWRgu.png](https://i.imgur.com/4LgWRgu.png)

Now let’s try minting one from original account to my secondary account, it will open up metamask for confirming the transaction as it will cost some gas to mint

![https://i.imgur.com/41KbmdL.png](https://i.imgur.com/41KbmdL.png)

Now that we have our NFT minted let’s take a look at it on Opensea

---

## 🤩 Checkout our tokens on Opensea

Now copy your contract address from Remix which we used earlier to lookup on **Goerli Etherscan**, and paste it on [testnets.opensea.io](https://testnets.opensea.io/).

This is how my contract is looking

![https://i.imgur.com/e5xdJ3O.png](https://i.imgur.com/e5xdJ3O.png)

And this is how the individual NFT is looking

![https://i.imgur.com/lfuaLnf.png](https://i.imgur.com/lfuaLnf.png)

Now let’s test it, I’ll login on Opensea with the wallet that holds this NFT and try to transfer it to some wallet, let’s see what happens.

Click on the airplane icon on the right top once logged in through the wallet that holds the NFT

![https://i.imgur.com/PmG141z.png](https://i.imgur.com/PmG141z.png)

Once you click on it Opensea will take you to this page

![https://i.imgur.com/vjmhGuZ.png](https://i.imgur.com/vjmhGuZ.png)

Add a wallet address of one of your spare accounts or some random 40 character prefixing with 0x and click on the **Transfer** button.

![https://i.imgur.com/224Xg40.png](https://i.imgur.com/224Xg40.png)

Haha the transaction get’s reverted, this means that you can’t transfer the NFT to that random address.

---

## 🔥 Burn the tokens

For allowing user to burn the token you can either send the token to `address(0)` or create a button on your minting website which has a button that triggers the burn function for the user

Let’s for now burn the tokens using Remix just change your wallet in metamask to the one holding the NFT and go to Remix, add the tokenId in the burn function argument and press burn, it will prompt you for an transaction which is small gas fees that you need to pay in order to burn the token.

![https://i.imgur.com/hBqFlPE.png](https://i.imgur.com/hBqFlPE.png)

Done you’ve successfully burned the token, i.e. it belongs to the `address(0)` now, you can verify this on opensea or etherscan. let’s take a look at opensea 

If you scroll down a little bit on the individual NFT page, you’ll find **Item Activity**, you’ll see that the NFT has been sent from my address to address(0), check mine over here - [Link](https://testnets.opensea.io/assets/goerli/0x0dc5bdc911a6659d106ed6f69d3cde3e7d3e3c30/0)

![https://i.imgur.com/4OPJkhj.png](https://i.imgur.com/4OPJkhj.png)

---

## 🍾 All done!

Oof this was a lot, give a pat to yourself on the back if you’ve reached this far.

I hope you’ve learned something new and interesting in this tutorial as it won’t be much time before Soulbound/Accountbound tokens become mainstream and people start using it in daily life, so make sure you get on the train before everyone else does and build cool sh*t.

Also stay tuned as we are going to drop more of such amazing tutorials with some intermediate and advance level🚀

Don’t forget to tag us on [Twitter/@0xblocktrain](https://twitter.com/0xblocktrain)

Build a soulbound NFT smart contract to create and mint NFTs with ease.

Build a soulbound NFT contract

Why do we need blockchain?

How does a blockchain work?

Introduction to EVM and Non-EVM

Introduction to ERC protocol

Introduction to Web3 full stack apps

Introduction to smart contracts and remix IDE

CRUD operations in Solidity

Introduction to Dapps

Variables, structs, mapping

Loop and break statement

Constructor, require keyword and modifiers

Create your coin with solidity

Create a bank in Solidity

Create a Vault with Solidity

Send crypto tokens with solidity

Built in keywords

Storage in Solidity

Events in Solidity

Variables and functions in Solidity

Multiple Smart contracts

Handling errors in Solidity

Smart contract factory

Get started with Solidity, Hardhat and Etherjs

Chainlink Data feeds in Solidity

Complete Smart contracts guide

Build a simple NFT minting dapp

Complete Solidity course

Mempool, Polyscan, Etherscan

Blockchain nodes and protocols explained

Security and hashing in blockchain

Complete Blockchain guide

Introduction to protocols and layers

Introduction to crypto wallets

ERC20 vs ERC721 vs ERC1155

Templates for blockchain development

Introduction to DAOs

Connect Web3 wallet to your Dapp

Connect your smart contract to the frontend

Frontend libraries for Web3 apps

Compile and deploy smart contracts

Auction smart contract

Simple game smart contract

Supply chain smart contract

Simple wallet smart contract

Fundraiser smart contract

Election smart contract

DEX smart contract

Insurance smart contract

Subscription smart contract

Introduction to NFTs

Introduction to IPFS

Get started with NFT development

NFTs for developers

Behind the scenes of an NFT

How to buy and sell NFTs

Create a music NFT collection

Create an ERC1155 NFT contract with multiple editions

Airdrop NFT tutorial

Create a soulbound NFT contract

Create a simple NFT minting website

Build NFT Marketplace using Thirdweb

Create an NFT collection with on-chain metadata

Create a complete NFT explorer website

Complete Frontend guide

Create a fundraising app with Hardhat, Ethereum, Web3 JS

Full stack TODO Web3 app

Smart contract auditing

Hacking smart contracts

Introduction to bridges

Introduction to Zkproof and Zksnark

Introduction to Solana

Introduction to Super fluid

Introduction to Neon Labs

Resume and internship guide

Find a job in the blockchain world

Blockchain Developer course

Understand Blockchain and cryptocurrency

Smart contracts explained

Introduction to Oracles

Wrapped and Cross chain tokens

Stable coins

Defi applications and topics

CEX vs DEX difference explained

CEX in the crypto world

Various types of DEXs

AMMs explained

Frontrunning explained

Aggregators explained

Borrowing explained

Lending explained

Yield farming explained

Summary of borrow, lend, yield

Flash loans explained

Margin trading explained

Insurance explained

Custody explained

Introduction to Defi development

Complete DEFI Course

Complete Projects guide

Design principles and OOD

Advanced developer guide

React Chakra UI guide

Complete Angular guide

Complete Flask guide

Complete Firebase guide

Complete Backend guide

JS, Node, Express guide

Complete Python guide

Complete React native guide

Complete Flutter guide

Full stack App with Flask and React

Complete NFT guide

Decentralized File storage app

Full stack development course

Interview questions to help you become a better frontend developer and get jobs

React and Next JS interview questions

## Margin padding

Here is an example of how to use margin and padding in CSS:

```css
.element {
  margin: 10px; /* Adds a 10px margin around the element */
  padding: 20px; /* Adds a 20px padding inside the element */
}
```

You can also specify different values for the top, right, bottom, and left sides of an element's margin or padding. For example:

```css
.element {
  margin: 10px 20px 30px 40px; /* Adds a 10px top margin, a 20px right margin, a 30px bottom margin, and a 40px left margin */
  padding: 5px 10px 15px 20px; /* Adds a 5px top padding, a 10px right padding, a 15px bottom padding, and a 20px left padding */
}
```

In the above example, the values are specified in the order: top, right, bottom, left. You can also specify the values using the keywords "top", "right", "bottom", and "left", like this:

```css
.element {
  margin: 10px 20px 30px 40px;
  padding: 5px 10px 15px 20px;
}
```

Margin and padding can be used to add space around elements and help to separate them from other elements on the page. They are an important part of the layout and design of a webpage.

## Flexbox stuff

Best website for this: [https://css-tricks.com/guides/](https://css-tricks.com/guides/) 

![](https://user-images.githubusercontent.com/31454667/209457547-528095be-fca3-4ec4-af1b-90d99f06a52e.png)

Flexbox is a layout module in CSS that makes it easier to design flexible and responsive layouts. It allows you to align elements in a flexible and dynamic way, and to control the layout of elements on the page.

Here are a few examples of how to use flexbox in your CSS:

- To create a flex container and make its children flex items, you can use the following CSS:

```css
.container {
  display: flex; /* Creates a flex container */
}
```

```html
<div class="container">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
```

- To align the flex items horizontally, you can use the **`justify-content`** property:

```css
.container {
  display: flex;
  justify-content: space-between; /* Aligns the flex items horizontally with equal space between them */
}
```

- To align the flex items vertically, you can use the **`align-items`** property:

```css
.container {
  display: flex;
  align-items: center; /* Aligns the flex items vertically at the center */
}
```

- To wrap the flex items onto multiple lines, you can use the **`flex-wrap`** property:

```css
.container {
  display: flex;
  flex-wrap: wrap; /* Wraps the flex items onto multiple lines */
}
```

These are just a few examples of how you can use flexbox in your CSS. Flexbox provides a lot of other features and properties that you can use to control the layout of your page.

## Children - Parent

To add CSS styles to the children of an element, you can use the child selector (">") in your CSS rules.

For example, let's say you have the following HTML structure:

```css
<div class="parent">
  <p>Child element 1</p>
  <p>Child element 2</p>
</div>
```

To apply a style to the **`p`** elements that are children of the **`div`** element, you can use the following CSS:

```css
.parent > p {
  /* CSS styles for the child elements go here */
}
```

This will apply the styles only to the **`p`** elements that are direct children of the **`div`** element with a class of "parent".

You can also use the child selector to apply styles to specific child elements. For example:

```css
.parent > p:first-child {
  /* CSS styles for the first child element go here */
}

.parent > p:last-child {
  /* CSS styles for the last child element go here */
}
```

This will apply the styles only to the first and last **`p`** elements that are children of the **`div`** element.

Note that the child selector will only select direct children of an element, not all descendants. If you want to apply styles to all descendants of an element, you can use the descendant selector (a space) instead of the child selector.

For example:

```css
.parent p {
  /* CSS styles for all p elements that are descendants of the parent element go here */
}
```

## Media queries - conditionals

There are a few ways to add conditionals to your CSS, depending on the type of condition you want to create.

- Media queries: Media queries allow you to apply different styles based on the characteristics of the device or viewport. For example, you can use a media query to apply different styles for different screen sizes or orientations.

```css
/* Apply these styles for screens that are wider than 480px */
@media (min-width: 480px) {
  /* CSS styles go here */
}

/* Apply these styles for screens that are narrower than 480px */
@media (max-width: 480px) {
  /* CSS styles go here */
}
```

- Feature queries: Feature queries allow you to apply different styles based on the support for a specific CSS feature. For example, you can use a feature query to apply different styles for browsers that do or do not support a particular property.

```css
@supports (display: flex) {
  /* Apply these styles if the browser supports the flex layout */
}

@supports not (display: flex) {
  /* Apply these styles if the browser does not support the flex layout */
}
```

- The **`:has`** pseudo-class: The **`:has`** pseudo-class is a proposed feature of CSS that allows you to apply styles based on the presence of a specific element or attribute.

```css
/* Apply these styles if the element has a child element with a class of "warning" */
.element:has(.warning) {
  /* CSS styles go here */
}
```

Note that the **`:has`** pseudo-class is not yet widely supported by browsers, so you may want to consider using other methods for adding conditionals to your CSS.

## Responsive design

To add responsive design to your CSS, you can use media queries. Media queries allow you to apply different styles based on the characteristics of the device or viewport, such as the width or height of the screen.

Here is an example of how to use media queries to create a responsive design:

```css
/* Apply these styles for screens that are wider than 480px */
@media (min-width: 480px) {
  /* CSS styles for larger screens go here */
}

/* Apply these styles for screens that are narrower than 480px */
@media (max-width: 480px) {
  /* CSS styles for smaller screens go here */
}
```

In the above example, the styles within the first media query will be applied for screens that are wider than 480px, while the styles within the second media query will be applied for screens that are narrower than 480px.

You can use media queries to create responsive designs for different screen sizes and orientations. For example, you might have separate styles for screens that are in landscape orientation, or for screens that are used with high-density displays.

In addition to media queries, there are other techniques you can use to create responsive designs, such as using flexible layout methods like flexbox and grid, or using responsive design frameworks like Bootstrap or Foundation.

## CSS gradients

CSS gradients allow you to create smooth transitions between two or more colors. You can use gradients as backgrounds for elements, or as borders.

Here is an example of how to add a linear gradient as a background for an element:

```css
.element {
  background: linear-gradient(to right, red, yellow); /* Creates a linear gradient from red to yellow */
}
```

You can also specify multiple color stops and angles for your gradient. For example:

```css
.element {
  background: linear-gradient(45deg, red, yellow, green); /* Creates a linear gradient from red to yellow to green at a 45 degree angle */
}
```

To create a radial gradient, you can use the **`radial-gradient`** function:

```css
.element {
  background: radial-gradient(red, yellow); /* Creates a radial gradient from red to yellow */
}
```

You can also specify the size and position of the gradient using keywords like **`closest-side`**, **`farthest-side`**, **`closest-corner`**, and **`farthest-corner`**, or by using lengths and percentages.

```css
.element {
  background: radial-gradient(closest-side, red, yellow); /* Creates a radial gradient from red to yellow, with the center of the gradient at the point closest to the side of the element */
}
```

These are just a few examples of how you can use CSS gradients. There are many other options and techniques you can use to create more complex and custom gradients.

## Resources

1. W3Schools: W3Schools is a website that offers a range of tutorials and references for web technologies, including CSS. It provides clear and concise explanations of different CSS concepts and techniques, along with interactive examples that you can try out.
2. MDN Web Docs: MDN Web Docs is a comprehensive resource for web developers, maintained by the Mozilla Foundation. It includes detailed documentation and guides on CSS, as well as other web technologies.
3. CSS Tricks: CSS Tricks is a blog and resource site for web developers and designers, with a focus on CSS. It includes a range of articles, tutorials, and tips on different CSS techniques and approaches.
4. Codecademy: Codecademy is an online platform that offers interactive courses and exercises for learning a range of programming languages and technologies, including CSS. It provides step-by-step instructions and challenges to help you learn and practice CSS concepts.
5. The Complete CSS Course 2021: From Zero to Hero: This is an online course on Udemy that covers a range of CSS concepts and techniques, from the basics to advanced topics. The course includes video lectures, exercises, and projects to help you learn CSS and build practical skills.

Introduction to the major topics in CSS that you will need.

Complete CSS guide

Learn about designing different products with object oriented models

Start your Web development journey with Angular

BlockTrain

Profile

BlockTrain

BLOCKCHAIN

SIMPLIFIED

Join the top 1%

Learn from the best

Top 1%

Certification

Learning

Trending Courses

Complete Solidity course

Blockchain Developer course

Complete DEFI Course

Full stack development course

Short Courses

Short Courses

Explore Guides

React and Next JS interview questions

Complete CSS guide

Design principles and OOD

Complete Angular guide

Build Projects

Build an AI NFT minting app

Build a full stack ERC 20 dapp

NFT royalty smart contract

Build a soulbound NFT contract

BlockTrain

Stay connected with BlockTrain