Guide to creating your own NFT with Javascript & Solidity – UPDATED to include video guide – 👾(Part 2 of 3)

Gary George

Follow

Published in

Coinmonks

6 min readSep 9, 2021

--

In Part 1[LINK] we were introduced to the core concepts of NFTs and how to create your own contract, now its time to interact with your new contract.

Interacting with your contract 💻

Once your contract has been deployed you will need some way of interacting with it (Remember to review [this] video if you need help deploying).

To interact you need to connect your website to the blockchain, this is not as scary as it sounds. To connect your website you need to use a library called [WEB3JS].

As you should now be aware, once you successfully compile and migrate your contract with [Truffle] you will have an ABI file in JSON format for your contract.

It is the abi.json file that you will use to connect to your contract, The ABI file contains every piece of information about your contract , One important piece of information it has, is its address on the blockchain.

Without knowing the address there is no way of interacting.

Web3 JS

Here is a ready to go example of connecting to your contract using [Web3] from a React based website. ( Once again if you are feeling really lost refer to [this] video ) .

I like to use [Web3Modal] in conjunction with Web3 JS, this allows us to easily connect a users wallet to our site.

Below is a snippet for a React project using Hooks.
I have commented the code where it is important

import React, { useEffect} from "react";
import Web3 from "web3";
import Web3Modal from "web3modal";
import Contract from "../truffle/abis/NFT.json";const loadWeb3 = async()=>{ //THIS ALLOWS YOU TALK TO BLOCKCHAIN
  const web3Modal = new Web3Modal({
    network: "mainnet", // optional
    cacheProvider: true, // optional
    providerOptions: {}, // required
  });
  const provider = await web3Modal.connect();
  const web3 = new Web3(provider);
  const netId = await web3.eth.net.getId();  //THIS WILL LOAD YOUR CONTRACT FROM BLOCKCHAIN
  const contract = new web3.eth.Contract(
    Contract.abi,
    Contract.networks[netId].address
  );  // FROM HERE YOU CAN NOW QUERY YOUR CONTRACT FOR DATA
  // HERE ARE A FEW EXAMPLES  // THE TOKEN ID YOU WANT TO QUERY
  const tokenID = 1;  // GET THE AMOUNT OF NFTs MINTED 
  const totalSupply = await contract.methods.totalSupply().call();  // GET THE TOKEN URI
  // THE URI IS THE LINK TO WHERE YOUR JSON DATA LIVES
  const uri = await contract.methods.tokenURI(tokenID).call();  // GET THE OWNER OF A SPECIFIC TOKEN
  const owner = await contract.methods.ownerOf(tokenID).call();  // CHECK IF A SPECIFIC TOKEN IS SOLD
  const sold = await contract.methods.sold(tokenID).call();  // GET PRICE OF A SPECIFIC TOKEN
  const price = await contract.methods.price(tokenID).call();}const ExampleComponent = ()=>{useEffect(()=>{
    loadWeb3();
},[])return (<p>My component</p>)}export default ExampleComponent

IPFS?

“IPFS is a peer-to-peer (p2p) storage network. Content is accessible through peers located anywhere in the world, that might relay information, store it, or do both. IPFS knows how to find what you ask for using its content address rather than its location.”

Ok so you now have the code for interacting with your contract 👆, but at the moment you don’t have any tokens minted, or any items ready for minting.

I like to use [ipfs-http-client] when i wish to add items to IPFS, Its really simple to use.

After successfully adding an item to IPFS it will return a CID, the CID is your unique hash and allows you to find your image on IPFS. You can optionally pin your CIDs , this stops your uploads being garbage collected and removed from IPFS

The best practice for NFTs is :

add your image to IPFS
create a basic JSON file which contains at least 3 keys (name , description, image)
The image key will be the full URL to the item you added to IPFS
add your meta data file to IPFS
Pin the CIDs for your image and metadata uploads
Mint the path to the meta data file (A common misconception is that you mint the image file path)

What is Minting?

“Minting basically refers to the process of turning digital art into a part of the Ethereum blockchain as a public ledger. … NFTs ensure representation for your digital artwork. At the same time, it also ensures that the artwork can be flexibly traded or purchased in the market.”

You must mint your NFTs in order to be able to sell them / transfer ownership .

For more information on minting see [HERE].

The Metadata file 📝

As mentioned above Minting is pretty much a 3 step process

1- You upload your image to IPFS

2- You create and upload a metadata JSON file to IPFS

3- You pin the CID that is returned for each of these

I stated that your meta data file will contain 3 keys but it can actually be as many as you like, however you must have the 3 required keys.

Here is a real world valid example of a metadata file that i have minted to an NFT contract on the Polygon Mainnet blockchain.

{
  "name":"Stupid Schaefer",
  "description":"number 1 of the series 1 low collection",       "image":"https://ipfs.infura.io/ipfs/QmPAMRJhbEKSjf6dwM65wqWmw5Jtmwi4jCS5Y78TUZ7YPW",
  "uid":"0-4-5-29-25-29-59-59-64-86-194-48",
  "timestamp":1629664820425
}

As you can see above i have name, description and image, however i also have uid and timestamp.

Its important to understand the function of the 3 required keywords so here is a break down.

1- Name: This is the name that will be displayed for your unique token on places such as [Opensea]

2- Description: This is the description that will be displayed for your unique token on places such as [Opensea]

3- Image: The image will allow your tokens image to be displayed in a users wallet and on places such as [Opensea]

Any further keys added can be used for your own purpose, there is no limit to amount of keys you can add.

Free Video [Code Walkthrough]

I have recorded a video walking through the boilerplate code [LINK]. I really hope this helps other developers out who are looking to go into Blockchain development.

Crypto Ghoulz

For research into this topic i created my own blockchain based website on the polygon network, which allows users to purchase NFTs, check it out and if your feeling spicy purchase one of my NFTs. https://cryptoghoulz.com .

If you have any questions surrounding Crypto Ghoulz get in touch via twitter.