DEV Community: dhanush

Build an AI NFT minting app

dhanush — Thu, 14 Sep 2023 12:36:02 +0000

What are we building?🤔

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

We are going to use hugging face to use the stable diffusion model and generate the art via an API and mint this generated art on the blockchain using the NFTport API to mint the NFT gasless, i.e. for free.

👀 Prerequisites

No prerequisites for the 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

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

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

cd ai-art-gasless-mint

For installing tailwind you can follow this step-by-step guide given by tailwind to install it → Guide

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

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

Viola, we’ve got our React app working.

Next what we do is give the user the ability to write a prompt and generate an image using the stable diffusion model for which we’ll be using hugging face

🖼️ 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.

Go over to Huggingface/join and then add your email, and password and 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

We’ll be using 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

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

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

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

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

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)

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

npm install axios

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

Create an input box in the middle and next button beside it.
Create a state that will store the input text.
Write a function to generate the ai image by calling hugging face api
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 on change on the input to keep track of the text entered by the user

You can see that our text gets 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

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

This entire text is our model id.

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

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

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

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.

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

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

We’ll be using NFT.storage for storing our files on IPFS.

Go over to Nft.storage/login and sign in using either github or your email.

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

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

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

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 → 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.

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

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 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 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.

{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.

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.

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

IPFS gateways are in the form

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

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 and get our free API key first

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

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

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

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

Now head over to opensea.io and connect your wallet and go to your profile and then hidden tab

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

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

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

It should look something like this

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

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 soulbound NFT contract

dhanush — Wed, 13 Sep 2023 15:16:23 +0000

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 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

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 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 and how to create an NFT contract with on-chain metadata 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 and get a contract boilerplate

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 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
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:

// 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

Once deployed test it using all the functions available:

🥷 Understanding EIP4973

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

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, 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

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:

....

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:

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.

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

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:

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.

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:

// 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 which is run by Alchemy

Just go to goerlifaucet.com and add your address over there and click on send me funds

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:)

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.

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

⛏️ 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

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

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.

This is how my contract is looking

And this is how the individual NFT is looking

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

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

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

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.

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

🍾 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🚀

Code Documentation: A Comprehensive Guide to Clear and Effective Documentation

dhanush — Wed, 13 Sep 2023 08:29:41 +0000

In the realm of software development, writing code is just one part of the process. Equally important is documenting that code. Proper documentation ensures that the software can be understood, maintained, and scaled by others in the future. In this guide, we'll delve into the importance of code documentation, its different forms, and best practices to follow. Let's dive in!

What is Code Documentation?

Simple Explanation: Code documentation is like a user manual for your code. It explains what the code does, how it does it, and why certain decisions were made, making it easier for others (and your future self) to understand and work with the code.

Why is Code Documentation Important?

Knowledge Sharing: It ensures that knowledge about the codebase isn't confined to a single developer.
Onboarding: Helps new team members understand the codebase faster.
Maintainability: Facilitates easier debugging, updating, and scaling of the software in the future.
Reduced Overhead: Minimizes the time spent deciphering what a piece of code does.

Types of Code Documentation

1. Source Code Comments

Simple Explanation: These are notes directly in the code, explaining parts of it.

Code Snippet:

def calculate_area(radius):
    """Calculate the area of a circle."""
    return 3.14159 * radius * radius  # Use Pi to compute the area

2. API Documentation

Simple Explanation: This is a detailed description of how to use a software component, often automatically generated.

Code Snippet:

def add(a, b):
    """
    Add two numbers together.

    Parameters:
    - a (int): The first number.
    - b (int): The second number.

    Returns:
    int: The sum of a and b.
    """
    return a + b

3. READMEs and Wikis

Simple Explanation: These are high-level overviews and instructions, often found in the root of a repository.

Code Snippet:

# My Project

## Introduction
This project is a simple calculator.

## Installation
1. Clone the repository.
2. Run `pip install -r requirements.txt`.

4. Tutorials and How-Tos

Simple Explanation: Step-by-step guides to achieve specific tasks with the software.

Code Snippet:

# How to Use the Calculator

1. Start the application.
2. Enter the first number.
3. Choose an operation (add, subtract, etc.).
4. Enter the second number.
5. Press "Calculate".

Best Practices for Effective Code Documentation

Stay Updated: Ensure that documentation is updated alongside code changes.
Be Clear and Concise: Avoid unnecessary jargon. Aim for clarity.
Use Consistent Formatting: Whether it's comment style or structure, consistency makes documentation easier to follow.
Document Decisions: Instead of just the 'what' and 'how', also document the 'why'—the rationale behind decisions.
Automate Where Possible: Use tools like Doxygen or JSDoc to automatically generate documentation from comments.
Peer Review: Just as code is reviewed, documentation should be too. Another set of eyes can catch ambiguities or errors.

Conclusion

Code documentation is an integral part of software development. While it might seem tedious, the long-term benefits in terms of maintainability, collaboration, and productivity are immense. Remember, good code with poor documentation becomes a "black box" that few will dare to touch. Aim to make your codebase a well-documented treasure trove of knowledge.

I hope this guide has been helpful in understanding the significance of code documentation and how to approach it effectively. Happy documenting!

The Fundamentals of Data Encryption: A Simple Yet Comprehensive Guide

dhanush — Sat, 09 Sep 2023 03:06:01 +0000

Data encryption is like the secret handshake of the digital world. It's a way to ensure that your data remains confidential and secure, whether it's stored on your computer or transmitted over the Internet. But how does it work? And why is it so important? In this blog post, we'll break down the fundamentals of data encryption, explore its key components, and even dive into some code snippets to help you understand the magic behind the curtain.

What is Data Encryption?

Data encryption is the process of converting readable data, known as plaintext, into an unreadable format, called ciphertext. The idea is to make the data unintelligible to unauthorized users while allowing authorized users to easily decrypt it back into its original form.

Why is Encryption Important?

Imagine sending a postcard through the mail. Anyone who handles it can read your message. Now, imagine if you could lock that message in a box, and only the recipient has the key. That's essentially what encryption does for digital data. It's crucial for:

Confidentiality: Keeps sensitive information private.
Integrity: Ensures that data is not tampered with during transmission.
Authentication: Verifies the identity of the parties involved in data exchange.

Symmetric vs Asymmetric Encryption

Symmetric Encryption

In symmetric encryption, the same key is used for both encryption and decryption. Think of it as a shared secret between the sender and the receiver.

Example Code Snippet in Python using AES (Advanced Encryption Standard):

from Crypto.Cipher import AES
from Crypto.Random import get_random_bytes

# Generate a random key
key = get_random_bytes(16)

# Initialize AES cipher
cipher = AES.new(key, AES.MODE_EAX)

# Encrypt plaintext
plaintext = "Hello, world!"
ciphertext = cipher.encrypt(plaintext.encode())

# Decrypt ciphertext
decipher = AES.new(key, AES.MODE_EAX, nonce=cipher.nonce)
decrypted_text = decipher.decrypt(ciphertext).decode()

print(f"Decrypted text: {decrypted_text}")

Asymmetric Encryption

In asymmetric encryption, two different keys are used: a public key for encryption and a private key for decryption. This eliminates the need to share a secret key.

Example Code Snippet in Python using RSA:

from Crypto.PublicKey import RSA
from Crypto.Cipher import PKCS1_OAEP

# Generate key pair
key = RSA.generate(2048)
private_key = key.export_key()
public_key = key.publickey().export_key()

# Encrypt plaintext
recipient_key = RSA.import_key(public_key)
cipher_rsa = PKCS1_OAEP.new(recipient_key)
ciphertext = cipher_rsa.encrypt("Hello, world!".encode())

# Decrypt ciphertext
private_key = RSA.import_key(private_key)
cipher_rsa = PKCS1_OAEP.new(private_key)
decrypted_text = cipher_rsa.decrypt(ciphertext).decode()

print(f"Decrypted text: {decrypted_text}")

Hashing vs Encryption

Hashing is often confused with encryption, but they serve different purposes. Hashing is a one-way function, meaning you can't reverse it to get the original data. It's commonly used for storing passwords and verifying data integrity.

When to Use What?

Symmetric Encryption: Fast and efficient, best for encrypting large data sets.
Asymmetric Encryption: Secure but slower, often used for securely exchanging keys.
Hashing: For verifying data integrity and storing passwords.

Conclusion

Data encryption is not just a buzzword; it's a fundamental aspect of modern cybersecurity. Whether you're a developer, a business owner, or just someone who cares about their digital privacy, understanding the basics of encryption can go a long way in keeping your data secure.

So, the next time you're sending a "digital postcard," make sure it's locked in a secure box, not just floating around for anyone to read. Happy encrypting!