Coinmonks
Published in

Coinmonks

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

Interacting with your contract 💻

Web3 JS

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

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

The Metadata file 📝

{
"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
}

Free Video [Code Walkthrough]

Crypto Ghoulz

Project Code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store