DEV Community: Aayush Gupta

How to Build an NFT Gallery Using QuickNode's GraphQL NFT API

Aayush Gupta — Fri, 17 Mar 2023 11:10:17 +0000

A step-by-step tutorial on building an interactive NFT Gallery using QuickNode's GraphQL NFT API, icy.tools, JavaScript, Next.js, and Tailwind CSS

What Are We Building

In this tutorial, we will be building an NFT Gallery using QuickNode's GraphQL NFT API, Icy.tools, React, JavaScript, Next.js, Vercel, and TailwindCSS. The React web app will provide a user interface that displays a grid view of all the NFTs held by any given Ethereum Name Service (ENS). NFT data was fetched using icy-nft-tools.

What is QuickNode?

QuickNode is a blockchain platform that provides infrastructure for developers to build and scale decentralized applications (DApps). It offers a suite of tools and services, including a developer API, to make it easier for developers to build, test, and deploy DApps on multiple blockchain networks. QuickNode aims to simplify the building process on blockchain and make it more accessible for developers while also providing high-performance infrastructure to support the growing demand for decentralized applications.

What is QuickNode's GraphQL NFT API?

Sign up for the free GraphQL NFT API!

The GraphQL NFT API is a set of tools and services that allow developers to interact with NFT platforms using the GraphQL query language. This API provides a convenient way for developers to discover, track, and analyze NFTs with real-time floor and volume data, historical charts and trend data, NFT portfolio values on any wallet, and more. This service also allows fetching the NFTs owned by a specified address. In this tutorial, we will explore how to use this feature.

Explore QuickNode Marketplace!

Besides its GraphQL NFT API, QuickNode offers many more tools and solutions for Web3 developers in its marketplace. This includes a gas price estimator, crossmint NFT API, GoPlus anti-fraud API, and a massive library of expert-crafted guides, tutorials, documentation, and other developer resources.

Note: QuickNode recently acquired Icy.tools and we will use the icy-nft-hooks library to access GraphQL NFT API.

By the end of this tutorial, you will be able to:

Install, set up, and initialize the icy-nft-hooks.
Create a new Next.js project and learn how to use the icy-nft-hooks to interact with QuickNode GraphQl NFT APIs for data retrieval.
Fetch and store NFT data retrieved for a wallet address into a state variable and display the results to the user interface.

The Functionalities

Users will be able to input Ethereum Name Service (ENS) into the "Ethereum Name Service" field.
The app will interact with the provider API endpoints and fetch the NFT data using Icy.tools.
The app returns a gallery grid view of all the NFTs held by the wallet address to the user interface.

The Tech Stack

CSS Framework: TailwindCSS
RPC Provider: QuickNode
JavaScript Libraries: Icy-nft-hooks, React
Frontend/Framework: JavaScript, Next.js

Let's BUIDL

The Prerequisites

Have Git, Yarn, TailwindCSS, and Node.js installed on your machine
Basic understanding of JavaScript, React, and TailwindCSS

Step 1: Create Next.js Project

We will set up our environment and install the necessary dependencies. Open a terminal on your machine and navigate to the directory location where you would like to store your Next.js project. Then, run the following command:

yarn create next-app .

This command creates a new Next.js starter project in the directory specified. Now, start the local development server by running the following command:

yarn dev

The above command sets up your local development environment. Copy and paste http://localhost:3000 into your web browser to launch the Next.js starter project. Here's what your web browser should look like:

The current app only contains the starter code provided by Next.js, which we will modify throughout this tutorial to create the custom frontend UI for our NFT market dashboard.

Now, let's install Tailwind CSS and its necessary dependencies using npm by running the following command in the terminal:

npm install -D tailwindcss postcss autoprefixer

Run the init command to generate both tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

In your tailwind.config.js file, add the paths to all your template files by updating the code with the following:

File ./tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now add the @tailwind directives for each of Tailwind's layers to your globals.css file. The top of your globals.css file should look like this:

File ./styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

...

Step 02: Installing the icy-nft-hooks Library

For creating the NFT market dashboard, we need real-time data, and we will fetch this data using the GraphQL NFT API. We will install and set up icy-nft-hooksa React hook library that acts as a wrapper for the icy.tools GraphQL API. This library enables us to fetch real-time NFT market data, such as the floor price, sales, average price, volume, market cap, etc.

Install the icy-nft-hooks with the following command:

yarn add @quicknode/icy-nft-hooks
yarn add @apollo/client graphql

In the pages directory, navigate to the _app.js file. Copy and paste the following code into _app.js file.

File: ./pages/_app.js

import "../styles/globals.css";
import { IcyProvider } from "@quicknode/icy-nft-hooks";

export default function App({ Component, pageProps }) {
  return (
    <IcyProvider apiKey={process.env.QUICKNODE_NFT_API_KEY}>
      <Component {...pageProps} />
    </IcyProvider>
  );
}

We are importing the IcyProvider hook from the icy-nft-hooks package and wrapping the entire web app with the IcyProvider hook.

Step 03: Getting an NFT API Key

As you can see in the above code, we will need an API key to fetch real-time NFT market data. To get the API key, follow these steps:

Open Icy tools link and click on the "Sign Up" button.

Enter the details and click on the "Sign Up" button

You'll land on the "Explore" page of icy.tools, where you will see something like this:

Click on the "Settings" button on the left side. You will see the API key.

Step 04: Installing the dotenv Package

I recommend storing sensitive information, such as API keys, in environment variables instead of hardcoding them in the code. We will use dotenv package for storing sensitive information. Run the following command to install the dotenv package:

yarn add --dev dotenv

Create a .env file in the root folder. Add environment variable

QUICKNODE_NFT_API_KEY = "c34kndhiflmln-API-KEY"

Step 05: Fetching the NFT

In this section, we'll create the WalletNFTs function that accepts the ENS as the user input and returns the collection of NFTs owned by the input address. @quicknode/icy-nft-hook library provides us with the getNFTsByOwner method that we will implement and utilize inside of our WalletNFTs function. The NFT Gallery dapp will accept input for Ethereum wallet addresses.

Create a new file WalletNFTs.js and Copy the below code.

File: ./pages/WalletNFTs.js

import { useWalletNFTs } from "@quicknode/icy-nft-hooks";
import { useState } from "react";

function WalletNFTs() {
  const [ensName, setEnsName] = useState("vitalik.eth"); //vitalik.eth
  const [cursor, setCursor] = useState("");
  const { nfts, isSearchValid, pageInfo } = useWalletNFTs({
    ensName,
    first: 12,
    after: cursor,
  });

  return (
    <div className="p-10 flex flex-col items-center">
      <div className="w-full h-full flex flex-col justify-start gap-5 items-center">
        <h1 className="text-7xl font-bold">NFT Gallery</h1>
        <h3 className="text-xl font-semibold">
          Powered by{" "}
          <a
            className="underline"
            href="https://developers.icy.tools/?utm_source=quicknode&utm_campaign=quicknode-header"
          >
            QuickNode's GraphQL NFT API
          </a>
        </h3>
      </div>
      <div className="flex-left flex-col mt-4">
        <label
          className="text-white text-2xl font-extrabold pb-2"
          htmlFor="wallet-address"
        >
          &nbsp; Ethereum Name Service &nbsp;
        </label>
        <div className="search">
          <input
            className="px-3 py-2 rounded-md"
            type="text"
            value={ensName}
            onChange={(e) => setEnsName(e.target.value)}
            style={{
              outlineColor:
                !isSearchValid && ensName.length > 0 ? "red" : undefined,
            }}
          />
        </div>
      </div>

      <div className="grid grid-cols-4 mt-8 gap-4">
        {console.log(nfts)}
        {nfts.map((nft) => {
          const contract = nft.contract;
          console.log(contract);
          const imageUrl = nft.images.find((i) => !!i.url)?.url;

          return (
            <div
              className="flex flex-col rounded border p-4"
              key={`${nft.tokenId}${nft.contract.address}`}
            >
              <div className="w-full h-full rounded shadow flex justify-center items-center">
                <img
                  className="w-full h-full"
                  src={imageUrl ?? "/web3.png"}
                  alt="awesome nft"
                />
              </div>
              <div>
                <h1 className="font-bold">{contract.name}</h1>
                <h2 className="truncate">
                  {contract.symbol}#{nft.tokenId}
                </h2>
              </div>
            </div>
          );
        })}
      </div>

      {pageInfo?.hasNextPage && (
        <div
          style={{
            alignItems: "flex-end",
            width: "100%",
            justifyContent: "flex-end",
            display: "flex",
          }}
        >
          <button
            onClick={() => {
              setCursor(pageInfo.endCursor ?? undefined);
            }}
          >
            Next
          </button>
        </div>
      )}
    </div>
  );
}

export default WalletNFTs;

Interestingly, some NFTs do not have images associated with them. To address this, a default image has been added to the grid as a placeholder in case an NFT does not have its own image.

You can find the image here.

Step 06: Display NFT Gallery

We're almost done with our NFT Gallery. In this step, we will import the WalletNFTs component from the WalletNFTs.js file and use it in index.js file.

file: ./pages/index.js

import Head from "next/head";
import WalletNFTs from "./WalletNFTs";

export default function Home() {
  return (
    <>
      <Head>
        <title> Quicknode NFT Gallery </title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <WalletNFTs />
    </>
  );
}

Now open the http://localhost:3000 in your browser. You have created an interactive NFT Gallery.

Step 07: Deploy NFT Gallery

Now let's deploy our Next.js app with Vercel by following the steps below:

Go to Vercel and sign in with your GitHub account.
Click the New Project button and select your project repo.
Select the Framework as Next.js.
Enter the environment variables, with the name set to 'QUICKNODE_NFT_API_KEY' and the value set to your API Key.
Click Deploy and now your NFT Gallery is live!

Congrats on successfully completing this tutorial! Give yourself a pat on the back. You should now see a gallery grid view of all the NFTs owned by the input wallet address returned to the user interface.

Full Code Base

GitHub repository of the complete project: NFT Gallery

Website Link: NFT Gallery Website

Additional Resources

https://blog.developerdao.com/how-to-build-an-nft-market-dashboard-using-quicknodes-graphql-nft-api

https://github.com/AAYUSH-GUPTA-coder/nft-gallery-quicknode-tutorial

https://docs.icy.tools/developer-api/api-reference

🎉BOOM 🎉

You have completed the whole tutorial. Give yourself a big pat on the back. You have learned about the following:

QuickNode Node Provider
Setting up a Next.js app and integrating Tailwind CSS
Icy.tools NFT Hooks: icy-nft-hooks
Getting icy.tools API
Setting and using dotenv package
Fetching and displaying NFTs owned by the address

I hope you learned something new or solved a problem. Thanks for reading. Have fun!

You can follow me on Twitter, GitHub, and Linkedin. Keep your suggestions and comments coming!

What is RPC Node? Navigating the World of RPC Nodes and Node Providers

Aayush Gupta — Fri, 17 Mar 2023 10:54:19 +0000

If you're new to blockchain development, one question always arises: what is an RPC node? It is sometimes referred to as a Blockchain Node, Blockchain API Key, RPC URL, or Blockchain Endpoint. You may already know that RPCs are essential tools used by blockchain developers to build decentralized apps. But what exactly are they, and why are they so important in blockchain technology? In the following article, we will learn about this in detail. It will be a long article, but I assure you that if you stay with it, you will learn all you need to know about RPC nodes and node providers to get started as a web3 developer.

What is an RPC node in blockchain?

To begin, let's cover the fundamentals. An RPC node is a program that runs on a computer and facilitates connectivity with the broader blockchain network. It communicates with other nodes, exchanging information and verifying the validity of transactions between parties. Additionally, it stores crucial data regarding the current state of the blockchain.

RPC (Remote Procedure Call) is a type of API (Application Programming Interface) that enables developers to execute code on servers remotely. When developers build dApps that utilize RPC, the dApp can link user requests to information from blockchains. For instance, when users access an NFT collection, play a P2E game, or initiate transactions with MetaMask, the dApp leverages an RPC to connect them with nodes that hold blockchain data.

Finally, It's worth emphasizing that information on a blockchain can only be accessed via a node; there's simply no other way to do it. In many respects, an RPC node can be thought of as a browser for the blockchain, acting as a gateway between the user and the decentralized network of nodes that uphold the blockchain's integrity.

Use Cases For RPCs

1. Creating Decentralized Applications

RPC is widely used for developing dApps that can interact with one or multiple blockchains. Developers use RPC nodes to test and deploy smart contracts on networks. Decentralized applications are powered by smart contracts that enable functionalities like the automatic execution of crypto trades. They also offer user interfaces that make them accessible to a wide audience. The inclusion of an RPC layer in dApps allows these distinct software applications to communicate seamlessly with one another.

2. Simplifying the Process of Building Dapps

The RPC layer provides developers with a simplified approach to building decentralized applications. For example, if you were developing a DeFi liquidity farming site and wanted users to view their external wallet's crypto balance, you wouldn't need to create a wallet from scratch. Instead, you could build an API that can communicate with the external wallet to retrieve user holdings. Furthermore, the wallet software can include API-enabling code that facilitates interoperability with various other DeFi protocols.

3. Querying blockchain data

When building, developers also need access to a variety of information like block numbers, node connections, transactions, and historical blockchain data. They can make “requests” to their desired blockchain in JSON (JavaScript Object Notation) and receive replies with the info they need.

4. Run calls to retrieve vast amounts of data.

Developers can use RPC to execute tasks like encrypting wallets, creating multi-signature addresses, finding the current block size, producing human-readable JSON objects, and much more. These tasks provide critical information that builders need to create their blockchain platforms and services. With free, readily available, and reliable RPC access, developers can build faster and create more efficient applications.

5. Developing WebSockets for Real-Time Transaction Data Viewing

WebSockets are programming interfaces that enable continuous information exchange between a client and a server. By maintaining open and persistent communication, there is no need to establish a new connection for every message sent. They are particularly valuable for high-volume applications that require the transmission of substantial amounts of data, such as those found in Internet of Things (IoT) systems.

Now that you understand what RPC Node is and why we need it in Blockchain development. Let’s discuss how we can actually use or get RPC Node. We (Web3 developers) have two choices for accessing the node infrastructure necessary for building and operating dApps.

Running our own Node: Set up a node ourselves and take on the DevOps responsibility of equipment maintenance and server problem-solving, which is a very difficult task.
RPC Node Providers: Use services from RPC Node Providers like QuickNode via an RPC layer.

Why is running a node difficult?

There are a few things that make developing on your own node connected to the network particularly annoying. Let's discuss some reasons:

Setting up nodes can take a long time, sometimes up to weeks!

Developers often find it frustrating to spend significant time setting up a tool that does not directly add value to what they are trying to create and setting up nodes can be especially time-consuming and tedious.

There are typically two major categories of nodes

Light Nodes: sync just the block headers and requests from full nodes for many queries.
Full Nodes: Full nodes keep the entire state of a blockchain - every transaction that's ever been created

Although most queries can be handled by light nodes, full nodes are essential for serving most information and are the backbone of the blockchain. While light nodes have become relatively simpler in the past, they still require the installation of the node program, setting configuration variables, downloading block headers, and checking ports and health to ensure they're running correctly.

Full nodes are even worse as they require downloading every block from 0 to the latest one from scratch, and manually replaying every block and transaction ever submitted. For Ethereum mainnet, this amounts to over 10 million blocks and billions of transactions, which can take weeks to sync.

Nodes have to be managed - by you!

The biggest challenge to running your own node is that you have to manage it yourself, which can be a daunting DevOps project. Here's a quick summary of what's involved:

Nodes need to be upgraded regularly, typically every few weeks, and sometimes even rebuilt from scratch due to hard forks or node client upgrades.
Since most nodes were not designed with reliability in mind, certain queries (such as eth_getLogs) may require processing millions of blocks and transactions, often resulting in timeouts or node crashes.
Individual nodes can fall behind the network due to various issues, such as peering and connection problems, being stranded on outdated branches, or internal state problems. If your node falls behind, your users may be served stale data without realizing it, leading to a poor user experience. There are many other reasons why running your node can be time-consuming and unpleasant.

To save ourselves from all this unnecessary hard work, we can simply use RPC node providers. I understand that this article is lengthy, but please bear with me. You have already learned all about RPC nodes to get started. Now, let's learn about NODE PROVIDER.

What is a Node Provider?

In an ideal world, everyone would run their own node. Unfortunately, we don't live in an ideal world, which is why we have node providers. Node providers are essentially teams or companies (like QuickNode) that offer a way to access information on a blockchain without having to run your own node! Instead of sending your requests to a local node, you can send them over the internet to a provider offering an identical API that is running fully synced, up-to-date nodes available 24/7. A solid node provider will offer, at the very minimum:

Access to light and full nodes with regularly updated nodes and alerts so that you don't have to worry about forks or network changes.
Access to archive nodes for historical transaction data.
Scalability and reliability: nodes should be available whenever you want them and as much as you want them.
Consistency: Node Providers handle tricky edge cases.

In summary, you can access all the capabilities of an RPC node without any hassle by using node providers, but you will need to pay a fee for their services. By now, you have also understood the reasons why using node providers is preferable to running your own node.

Why you should use QuickNode as a Node Provider

QuickNode is an affordable, globally-distributed, multi-chain, multi-client, premium Web3 infrastructure provider. QuickNode powers industry leaders like Coinbase, 1inch, MagicEden, Exodus, and Nansen, to name a few and serves around 7 billion API requests per day (at the time of writing this article). Here's why businesses choose QuickNode for Web3 infrastructure!

Also, QuickNode is not only a node provider but an ecosystem in itself with a full suite of blockchain APIs — Core API, Token API, NFT API, Icy GraphQL NFT API — and the first of its kind, blockchain API Marketplace.

For Web3 to gain mass adoption, the UX needs to be pushed to the next level. And that could only happen with highly-performant applications powered by the finest infrastructure and service — nothing short of the best!

As evidenced by the data, we can conclude that QuickNode is the fastest and most stable node provider. QuickNode's motto is "do your stuff — build — and let us take care of the rest!" Here's Justifying Quick in QuickNode: A Response Time Comparison of Blockchain Node Providers! You can read this article to fully understand why QuickNode is the fastest.

🎉BOOM 🎉

You have completed the whole tutorial. Give yourself a big pat on the back. You have learned about:

What is RPC Node
Uses cases of RPC Node
Difficulties with running your own Node
Node Providers
Why you should use QuickNode

I hope you learned something new. Thanks for reading. Have fun!

You can follow me on Twitter, GitHub, and LinkedIn. Keep your suggestions and comments coming!

How to build your first DataDAO Factory on FVM

Aayush Gupta — Fri, 23 Dec 2022 09:08:03 +0000

This tutorial will enable you to program the Filecoin deal market and create multiple FVM Data DAOs.

What is FVM

Let's start by understanding what is FVM. FVM stands for Filecoin Virtual machine. As a web3 developer, you may already know that filecoin is a decentralized storage provider in most layman's terms (or a peer-to-peer network that stores files, with built-in economic incentives to ensure files are stored reliably over time, to be exact). Now think of adding a computational layer on the top of filecoin, that FVM for you.

The FVM unlocks boundless possibilities, ranging from programmable storage primitives (such as storage bounties, auctions, and more), to cross-chain interoperability bridges (e.g. trustlessly connecting Filecoin with Ethereum, Solana, NEAR, and more), to data-centric Decentralized Autonomous Organizations (DAOs), to Layer 2 solutions (such as reputation systems, data availability sampling, computation fabrics, and incentive-aligned Content Delivery Networks), and more.

What is Storage Deal

Before moving ahead, let us get a quick insight into how the cycle between storage provider, storage, client, and marketplace revolves.

Storage deals refer to the stored data that is picked up by a Storage Provider in the Filecoin network. A deal is initiated with the Storage Client to store the data. The deal’s details and metadata of the stored data are then uploaded onto the Filecoin blockchain. FVM/FEVM allows interaction with this metadata, effectively computing over the state.

Building Data DAO contract

This tutorial would be based on this repo.

Now, let's write smart contracts and understand the logic inside them.

DataDAO.sol

This contract enables the storage provider to add the CID to store data with the Filecoin built-in deal market. The process of adding the CID has to go through a policy check where the CID needs to be approved by DAO members via a voting mechanism.

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.13;

// import {StdStorage} from "../lib/forge-std/src/Components.sol";
import {specific_authenticate_message_params_parse, specific_deal_proposal_cbor_parse} from "./CBORParse.sol";

contract MockMarket {

    DataDAO client;

    constructor(address _client) {
        client = DataDAO(_client);
    }

    function publish_deal(bytes calldata raw_auth_params, uint256 proposalID) public {
        // calls standard filecoin receiver on message authentication api method number
        client.handle_filecoin_method(0, 2643134072, raw_auth_params, proposalID);
    }

}

contract DataDAO {
    uint64 constant public AUTHORIZE_MESSAGE_METHOD_NUM = 2643134072; 
    // number of proposals currently in DAO
    uint256 public proposalCount;
    // mapping to check whether the cid is set for voting 
    mapping(bytes => bool) public cidSet;
    // storing the size of the cid
    mapping(bytes => uint) public cidSizes;

    mapping(bytes => mapping(bytes => bool)) public cidProviders;

    // address of the owner of DataDAO
    address public immutable owner;

    struct Proposal {
        uint256 proposalID;
        address storageProvider;
        bytes cidraw;
        uint size;
        uint256 upVoteCount;
        uint256 downVoteCount;
        uint256 proposedAt;
        uint256 proposalExpireAt;
    }

    // mapping to keep track of proposals
     mapping(uint256 => Proposal) public proposals;

    // mapping array to track whether the user has voted for the proposal
    mapping(address => mapping(uint256 => bool)) public hasVotedForProposal;

/**
 * @dev constructor: to set the owner address
 */
constructor(address _owner) {
     require(_owner != address(0), "invalid owner!");
     owner = _owner;
}

/***
 * @dev function to create new proposal
 */
    function createCIDProposal(bytes calldata cidraw, uint size) public {
        proposalCount++;
        Proposal memory proposal = Proposal(proposalCount, msg.sender, cidraw, size, 0, 0, block.timestamp, block.timestamp + 1 hours);
        proposals[proposalCount] = proposal;
        cidSet[cidraw] = true;
        cidSizes[cidraw] = size;
    }

    /**
     * @dev function to vote in favour of proposal
     */
    function upvoteCIDProposal(uint256 proposalID) public {
        require(!isCallerSP(proposalID), "Storage Provider cannot vote his own proposal");
        require(!hasVotedForProposal[msg.sender][proposalID], "Already Voted");
        require(isVotingOn(proposalID), "Voting Period Finished");
        proposals[proposalID].upVoteCount = proposals[proposalID].upVoteCount + 1;
        hasVotedForProposal[msg.sender][proposalID] = true;
    }

    /**
     * @dev function to vote in favour of proposal
     */
    function downvoteCIDProposal(uint256 proposalID) public {
        require(!isCallerSP(proposalID), "Storage Provider cannot vote his own proposal");
        require(!hasVotedForProposal[msg.sender][proposalID], "Already Voted");
        require(isVotingOn(proposalID), "Voting Period Finished");
        proposals[proposalID].downVoteCount = proposals[proposalID].downVoteCount + 1;
        hasVotedForProposal[msg.sender][proposalID] = true;
    }

    /**
     * @dev function to check whether the policy is accepted or not
     */
    function policyOK(uint256 proposalID) public view returns (bool) {
        require(proposals[proposalID].proposalExpireAt > block.timestamp, "Voting in On");
        return proposals[proposalID].upVoteCount > proposals[proposalID].downVoteCount;
    }

    /**
     * @dev function to authorizedata and store on filecoin
     */
    function authorizeData(uint256 proposalID, bytes calldata cidraw, bytes calldata provider, uint size) public {
        require(cidSet[cidraw], "CID must be added before authorizing");
        require(cidSizes[cidraw] == size, "Data size must match expected");
        require(policyOK(proposalID), "Deal failed policy check: Was the CID proposal Passed?");
        cidProviders[cidraw][provider] = true;
    }

    /**
     * @dev function to handle filecoin
     */
    function handle_filecoin_method(uint64, uint64 method, bytes calldata params, uint256 proposalID) public {
        // dispatch methods
        if (method == AUTHORIZE_MESSAGE_METHOD_NUM) {
            bytes calldata deal_proposal_cbor_bytes = specific_authenticate_message_params_parse(params);
            (bytes calldata cidraw, bytes calldata provider, uint size) = specific_deal_proposal_cbor_parse(deal_proposal_cbor_bytes);
            cidraw = bytes(bytes(cidraw));
            authorizeData(proposalID, cidraw, provider, size);
        } else {
            revert("The Filecoin method that was called is not handled");
        }
    }

    // getter function also used in require statement

    /**
     * @dev function to get the storage provider address
     */
     function getSP(uint256 proposalID) view public returns(address) {
        return proposals[proposalID].storageProvider;
    }

    /**
     * @dev function to check whether the function caller is the storage provider
     */
    function isCallerSP(uint256 proposalID) view public returns(bool) {
       return getSP(proposalID) == msg.sender;
    }

    /**
     * @dev function to check whether users can start voting on the proposal
     */
    function isVotingOn(uint256 proposalID) view public returns(bool) {
       return proposals[proposalID].proposalExpireAt > block.timestamp;
    }

    /**
     * @dev get the address of this contract
     */
    function getAddressOfContract() public view returns (address) {
        return address(this);
    }
}

Let’s now go step by step. The storage provider can create a proposal to add his CID using createCIDProposal function.

As FEVM is pre-launch to Filecoin’s mainnet, FEVM actors as of today, cannot yet interact easily with storage deals on the Filecoin network.

To simulate this for the hack, we have sample CID-related data. These deals are built into the Wallaby test network and your actor can interact with them.

Sample Test Data

testCID = "0x000181E2039220206B86B273FF34FCE19D6B804EFF5A3F5747ADA4EAA22F1D49C01E52DDB7875B4B";
testSize = 2048
testProvider = "0x0066";
testmessageAuthParams = "0x8240584c8bd82a5828000181e2039220206b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b190800f4420068420066656c6162656c0a1a0008ca0a42000a42000a42000a";

DataDaoFactory.sol

Now let's write the Factory contract to interact with this DataDAO smart contract and create multiple versions of it according to our needs.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.9;

import "./DataDAO.sol";

contract DataDoaFactory{
    // factory contract owner
    address public immutable dataDaoFactoryOwner;

    // number of DataDAO created
    uint256 public numOfDataDao;

    // struct to store all the data of dataDao and dataDaoFactory contract
    struct dataDaoFactoryStruct {
        address dataDaoOwner;
        address dataDaoFactoryOwner;
    }

    // searching the struct data of DataDao and DataDoaFactory using owner address
    mapping(address => dataDaoFactoryStruct) public allDataDaos;

    // owner address will be used check which address own/create a new dataDAO
    // mapping(ownerAddress => smart contract address)
    mapping(address => address) public searchByAddress;

    /**
     * @dev constructor to get the owner address of this contract factory
     */
    constructor(address _dataDaoFactoryOwner) {
        dataDaoFactoryOwner = _dataDaoFactoryOwner;
    }

    /**
     * @dev function to create the contract DATADAO
     */
    function createDataDao(address _dataDaoOwner) public {
        DataDAO dataDao = new DataDAO(
            _dataDaoOwner
        );
        // Increment the number of DataDao
        numOfDataDao++;

        // Add the new DataDAO to the mapping
        allDataDaos[_dataDaoOwner] = (
            dataDaoFactoryStruct(
                _dataDaoOwner, // address of dataDAO owner 
                address(this)
            )
        );

        // search the profile by using owner address
       searchByAddress[_dataDaoOwner].push(address(dataDao));
    }



    // get the balance of the contract
    function getContractBalance() public view returns (uint256) {
        return address(this).balance;
    }

    // get the address of this contract
    function getAddressOfContract() public view returns (address) {
        return address(this);
    }

     // function to withdraw the fund from contract factory
    function withdraw(uint256 amount) external payable {
        require(msg.sender == dataDaoFactoryOwner, "ONLY_ONWER_CAN_CALL_FUNCTION");
        // sending money to contract owner
        require(address(this).balance >= amount, "not_enough_funds");
        (bool success, ) = dataDaoFactoryOwner.call{value: amount}("");
        require(success, "TRANSFER_FAILED");
    }

    // get the address of DataDaoFactory contract owner
    function getAddressOfDataDaoFactoryOwner() public view returns (address) {
        return dataDaoFactoryOwner;
    }

    // receive function is used to receive Ether when msg.data is empty
    receive() external payable {}

    // Fallback function is used to receive Ether when msg.data is NOT empty
    fallback() external payable {}
}

Now compile the DataDaoFactory smart contract and deploy it on Wallaby- Testnet for Filecoin.

Now let's create a new Data DAO using our DataDaoFactory contract.

Let us create an add CID proposal, using the above test data.

Once you have created the proposal, you would be able to see all the basic data related to that proposal

Now, it's time for the DAO members to vote on that proposal before the voting period ends. If the total count of upvotes is greater than the total count of downvotes then the proposal would be passed else it would be considered rejected. This contract uses a simple DAO mechanism, you can frame and implement your own rules and make it more interesting and secure.

Note: Only members apart from the storage provider would be able to cast a vote and each member can vote only once.

Enough said. It’s time to vote! To keep it simple, I would be upvoting and passing this proposal. You can always play around with this.

If you go back and check the details of the proposal the count of upvotes would have been incremented to 1 whereas the downvotes would be still zero.

Note: This voting process should be completed within 1 hour from the creation of the proposal. You can make changes to the contract and increase or decrease the timer accordingly.

Okay. All done with the voting part !!

Now that we have passed the proposal, now it's time to publish our deal. In case the DAO failed the proposal, the storage provider won’t be able to publish his deal.

We have a mock marketplace contract, let's deploy that first. This contract takes the contract address of our DAO contract i.e the client contract inside its constructor.

Let us publish the deal, this function takes two inputs the message auth param which you can get from the test data, and the respective proposal ID.

If the proposal was passed, this function would get executed successfully else, it would fail.

That’s it! This was a quick guide as to how you can play around with the basic client contract.

This project is made by an amazing team of Harsh Ghodkar, Suvraneel Bhuin and Aayush Gupta

Reference

https://medium.com/@rvk_rishikesh/build-your-first-datadao-on-fvm-6ed38b940103

🎉BOOM 🎉

You have completed the whole tutorial. Give yourself a pat on the back. You have learned about:

Filecoin Virtual Machine (FVM)
Build your own DataDAO smart contract
Build DataDaoFactory contract to build multiple versions of DataDAO.
Publish a deal using MockMarket Contract

💥 Simply WOW 💥

If you learn and enjoy this article. Please share this article with your friends. I hope you learned something new or maybe even solved a problem. Thanks for reading, and have fun!

You can follow me on Twitter, GitHub, and LinkedIn. Keep your suggestions/comments coming!

WAGMI 🚀🚀

Create NFT Smart Contract with thirdweb and Chainlink

Aayush Gupta — Fri, 16 Dec 2022 06:36:21 +0000

In this Tutorial, we will build a custom ERC-721 NFT Collection using Thirdweb and Chainlink. Thirdweb ContractKit is used for the ERC-721 token standard, thirdweb deploy is used to deploy our smart contract to mumbai testnetwork, and Chainlink Data Feeds is used to fetch the real-time price of Matic, to set the base price for minting NFT. Basically, we will build and deploy a smart contract that allows users to mint NFT. The user has to pay at least $1 in Matic to mint the NFT. We get the real price conversion using Chainlink Data Feeds.

Overview

ERC-721 is the common standard for creating NFTs. Every major marketplace lists new tokens as an ERC-1155 standard. We will use Thirdweb ContractKit to build our smart contract along with some custom logic. We allow users to mint as many NFTs as they wanted to mint with only one condition that they have to pay a minimum of $1 to mint the NFT. We get the real price conversion using Chainlink Data Feeds.

Why Use ContractKit?

Each feature you implement in your smart contracts unlocks functionality in both the thirdweb dashboard and SDK to help you build applications on top of them.

For example, if you implement the ERC721Base contract, you'll unlock the mint button in the dashboard and can use the mint function in the SDK; which automatically uploads and pins your metadata to IPFS!

What is ERC-721?

ERC-721 is a free, open standard that describes how to build non-fungible or unique tokens on the Ethereum blockchain. While most tokens are fungible (every token is the same as every other token), ERC-721 tokens are all unique.

The ERC-721 introduces a standard for NFT, in other words, this type of Token is unique and can have a different value than another Token from the same Smart Contract, maybe due to its age, rarity, or even something else like its visual. Wait, visual?

Yes! All NFTs have a uint256 variable called tokenId, so for any ERC-721 Contract, the pair contract address, uint256 tokenId must be globally unique. That said, a dapp can have a "converter" that uses the tokenId as input and outputs an image of something cool, like zombies, weapons, skills, or amazing kitties!

What is Chainlink Data Feeds ?

Chainlink is a decentralized network of oracles that enables smart contracts to securely interact with real-world data and services that exist outside of blockchain networks. With Chainlink, the traditional systems that currently power modern economies can connect to the emerging blockchain industry to generate more security, efficiency, and transparency in business and social processes.

Chainlink Data Feeds are the quickest way to connect your smart contracts to the real-world data such as asset prices, reserve balances, and L2 sequencer health.

Setting up the environment

First of all, we will setup our environment and install dependencies. To get started, run the command below to create a new project by opening the terminal of your preferred IDE.

npx thirdweb create --contract

You will get something like this:

Now enter your preferred details.

After completion, navigate and open the new directory by running the following command.

cd dapp-name

code .

You will see this type of file structure.

Let's BUIDL

Now open the contracts directory and select the contract.sol file. You will see the demo code. Now copy the below smart contract code and replace it with the demo code.

Contract.sol (thirdweb contractKit)

// SPDX-License-Identifier: MIT
/**
* @author Aayush Gupta  Github:AAYUSH-GUPTA-coder   Twitter:Aayush_gupta_ji
* 
* Smart conntract to allow users to mint as many NFTs as they wanted to mint with only one condition that they have to pay a minimum of $1 to mint the NFT. 
* Using `Thirdweb` contractKit and deploy tool. Get real time price conversion using `Chainlink Data Feeds`
*/
pragma solidity ^0.8.0;

// thirdweb contract for ERC-721 token standard
import "@thirdweb-dev/contracts/base/ERC721Base.sol";
// thirdweb contract for counters
import "@thirdweb-dev/contracts/openzeppelin-presets/utils/Counters.sol";
// chainlink data feed
import "./PriceConverter.sol";

contract Contract is ERC721Base {
   using PriceConverter for uint256;

   using Counters for Counters.Counter;
   Counters.Counter private _tokenIdCounter;
   // Minimum price of NFT $1 in MATIC
   uint256 public constant MINIMUM_USD = 1 * 10 ** 18;


   /**
    * @dev ERC721Base library's constructor takes four Parameters
    * _name of the NFT, _symbol of the NFT,
    *  _royaltyRecipient (address) who will get a royalty on secondary sale, _royaltyBps (royality percentage)
    * we don't need to set Royality for the purpose of our smart contract. setting _royaltyBps to Zero
    * @param _name: name of the whole NFT bundle Collection
    * @param _symbol: symbol of the whole NFT bundle Collection
   */
   constructor(
       string memory _name,
       string memory _symbol,
       address _royaltyRecipient,
       uint128 _royaltyBps
   )
       ERC721Base(
           _name,
           _symbol,
           _royaltyRecipient,
           _royaltyBps
       )
   {}

   /**
    * @dev createToken mint the ERC721 Token / NFT with the check that the user have paid $1 to mint the NFT
    */
  function createToken() public payable
   {
       // require statement to check the user have paid $1 to mint the NFT
       require(msg.value.getConversionRate() >= MINIMUM_USD, "SEND_MORE_MATIC");

       // Increment it so next time it's correct when we call .current()
       _tokenIdCounter.increment();

       // Current counter value will be the minted token's token ID.
       uint256 newTokenId = _tokenIdCounter.current();

       // Mint the token
       _mint(msg.sender, newTokenId);

       // Default token Metadata on token minting
       string memory tokenURI = "https://ipfs.io/ipfs/QmVAUVEmr6pxqZq2KtLtjs52d2c91q5sKKhDZweQeqaH7Z";

       // setting default token Metadata 
       _setTokenURI(newTokenId, tokenURI);
   }

   /**
    * @dev function to withdraw funds present in contract address to owner address. In this case, the address that deploy this smart contract
    */
   function withdraw() public onlyOwner(){
       (bool callSuccess, ) = payable(msg.sender).call{value: address(this).balance}("");
       require(callSuccess,"TRANSFER_FUND_FAIL");
   }

   /**
    * @dev view / Getter function to get the balance of the smart contract
    */
   function getContractBalance() public view returns(uint){
       return address(this).balance;
   }

   // A contract receiving Ether must have at least one of the functions

   // receive() is called if msg.data have value
   fallback() external payable {}

   // receive() is called if msg.data is empty
   receive() external payable {}

}

I will explain the code below but before seeing the explanation. I request you to try to understand smart contracts on your own by reading the code and comments.

Let's move to the explanation

Line 1: Specifying SPDX license type, which is added after Solidity version ^0.6.8. Whenever the source code of a smart contract is made available to the public, these licenses can help resolve/avoid copyright issues. If you do not wish to specify any license type, you can use a special value UNLICENSED or skip the whole comment (it will not result in an error, just a warning).

Line 8: Declaring the Solidity version.

Line 11: Importing the thirdweb ERC721Base contract.

Line 13: Importing the thirdweb Counters contract. We will use it to increment and keep track of tokenID of NFTs.

Line 15: importing ./PriceConverter.sol. We will use it to get the real-time price conversion of MATIC/USD.

Line 17: Inheriting the ERC721Base contract in our Contract smart contract. In order to use all the functionalities of ERC721Base contract.

Line 18: Using PriceConverter as uint256 data type.

Line 20: Using Counters as Counters.Counter datatype.

Line 21: Setting up the minimum price of NFT in terms of USD. In our case it will be $1. Also due to the lack of testnet funds.

Line 34: constructor: ERC721Base library's constructor takes four Parameters

_name: name of the NFT

_symbol: symbol of the NFT

_royaltyRecipient: (address) who will get a royalty on a secondary sale

_royaltyBps: royalty percentage on secondary sale. 100 is 1% here.

Line 51: function createToken(): Allow the user to mint the ERC721 Token / NFT with the check that the user has paid $1 to mint the NFT.

Line 54: require to check that the user sends more than $1 in Matic value.

Line 57: _tokenIdCounter.increment() to increment the TokenID. so next time it's correct when we call .current().

Line 60: Current counter value will be the minted token's token ID.

Line 63: _mint Mint the NFT

Line 66: Giving a default NFT Metadata. In our case, we have hardcoded the IPFS link.

Line 69: _setTokenURI function to set URI/Metadata of NFT.

Line 75: function withdraw: function to withdraw funds present in contract address to owner address. In this case, owner is the address that deploy this smart contract.

Line 83: View / Getter function to get the balance of the smart contract.

Line 90: A contract receiving Ether must have at least one of the functions. fallback is called if msg.data have value.

Line 93: receive is called if msg.data is empty.

Woah... That's a long explanation. Now, before moving to deploy our smart contract using thirdweb deploy tool. We have to write PriceConverter.sol contract to get the realtime value of MATIC in USD. We will use Chainlink Data Feeds to get the realtime value. Using chainlink services is extremelly easy. You can refer to official chainlink docs to learn about data feeds in depth Chainlink Docs.

Create a new .sol file in the contracts directory name PriceConverter.sol and copy the below smart contract code.

PriceConverter.sol (Chainlink Data Feeds)

PriceConverter is a smart contract to get real-time price of MATIC / USD using Chainlink Data feeds. We use PriceConverter as a library because we are not sending any Matic to the smart contract. We are only using it to get the value.

// SPDX-License-Identifier: MIT

/**
 * @author Aayush Gupta  Github:AAYUSH-GUPTA-coder   Twitter:Aayush_gupta_ji
 * smart contract to get real time price of MATIC / USD using `Chainlink Data feeds`
 */

pragma solidity ^0.8.8;

import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";

 /**
     * Network: Mumbai
     * Aggregator: MATIC / USD
     * Address: 0xd0D5e3DB44DE05E9F294BB0a3bEEaF030DE24Ada
     */

library PriceConverter {

    /**
     * @dev function to get the Price of MATIC / USD. 
     * The problem with this we get value with 8 float point while Matic/ETH have 18 float point. 
     * Therefore we raise the power of our answer with 10 floating point.
     */
    function getPrice() internal view returns (uint256) {
        AggregatorV3Interface priceFeed = AggregatorV3Interface(
            0xd0D5e3DB44DE05E9F294BB0a3bEEaF030DE24Ada
        );
        (, int256 answer, , , ) = priceFeed.latestRoundData();
        return uint256(answer * 1e10); // 1* 10 ** 10 == 10000000000
    }

    /**
     * @dev function to get eth(matic) in USD. 
     * Will get the actual ETH/USD conversion rate, after adjusting the extra 0s.
     */
    function getConversionRate(uint256 ethAmount)
        internal
        view
        returns (uint256)
    {
        uint256 ethPrice = getPrice();
        uint256 ethAmountInUsd = (ethPrice * ethAmount) / 1e18; // 1 * 10 ** 18 == 1000000000000000000
        // the actual ETH/USD conversion rate, after adjusting the extra 0s.
        return ethAmountInUsd;
    }
}

Again I will explain the code below but before seeing the explanation. I request you to try to understand smart contracts on your own by reading the code and comments.

Let's move to the explanation

Line 1: Specifying SPDX license type.

Line 8: Declaring the Solidity version.

Line 10: Importing the chainlink AggregatorV3Interface.sol contract.

Line 25: function getPrice() function to get the Price of MATIC / USD. The problem with this we get a value with 8 float points while Matic/ETH has 18 float points (i.e 1 ether == 1 ^ 18 wei). Therefore, we raise the power of our answer with 10 floating points.

Line 37: function getConversionRate function to get eth(Matic) in USD. Will get the actual ETH/USD conversion rate, after adjusting the extra 0s.

BOOM You have created our smart contract with custom logic using thirdweb ContractKit and Chainlink Data Feeds.

Deploy our smart contract using thirdweb deploy

Use the CLI to ship our contract directly to any of thirdweb supported networks using their dashboard.

npx thirdweb deploy

Running this command will:

Compile all the contracts in the current directory.
Allow you to select which contract(s) you want to deploy.
Upload your contract source code (ABI) to IPFS.
Open the deploy flow in the dashboard for you to select one of ThirdWeb supported networks to deploy to.
You don't need to write your deploy script. Meaning you don't need your Private Key to deploy your smart contract, which saves you and eliminates any chance to expose your Private Key.

After running the above command, you will get something like this:

Now click on the link. You will open the Deploy dashboard. Enter the details (Name of the NFT, symbol of the NFT, address of Royalty Recipient, percentage of Royalty and network you want to deploy your smart contract) and click on the Deploy Now button.

Congratulations! You have deployed your smart contract on desired testnetwork.

Mint the NFT

Go to Explorer section of your NFT collection Dashboard. You will be seeing all the functions you can perform. For now, let's just focus on our custom createToken function.

Now let's mint the NFT by sending Matic valuing more than $1. Just to keep things simple we will set the value to 2.

Copy your contract address and paste the address on Testnet Opensea to view your NFT with metadata.

You have successfully minted the NFT and viewed it on opensea. You can share link of opensea and brag about NFTs like all web3 native people do 😎.

Check Custom Errors

Enter the Native Token Value to mint the NFT. Now to check whether our code is working, we will try to mint NFT without paying any matic.

As you can see it reverts the transaction with the SEND_MORE_MATIC meaning our custom logic is working.

Getter Function

We have already seen how we can access and use the setter function in thirdWeb. Now we will interact with the getter function. You can access the getter function by scrolling down on the explorer page and clicking on your custom MINIMUM_USD public Variable.

Now let's try to get the smart contract balance by checking the getContractBalance Function.

You can see you are getting the right result.

🎉BOOM 🎉

You have completed the whole tutorial. Give yourself a pat on the back. You have learned about:

ERC-721 token standard

Build your own custom smart contract using thirdweb contractkit
Fetch the real-time price of Matic in USD by using Chainlink Data Feeds
Deploy your smart contract using thirdweb deploy
Mint your NFT and interact with your smart contract using the Explorer section of thirdweb dashboard

💥 Simply WOW 💥

If you learn and enjoy this article. Please share this article with your friends. I hope you learned something new or maybe even solved a problem. Thanks for reading, and have fun!

You can follow me on Twitter, GitHub and LinkedIn. Keep your suggestions/comments coming!

WAGMI 🚀🚀

How to verify Smart Contract with libraries and Constructor Parameters on Polygonscan using Hardhat.

Aayush Gupta — Wed, 07 Dec 2022 10:53:50 +0000

When you deploy code to the public, open, global censorship-resistant Ethereum Blockchain, you expect participants will use the functions and services that your Smart Contract provides all over the world. Therefore, it is important to be a good steward of the blockchain community and help the users of your contract be able to trust that the code will do what you claim it will do.

Why Verify?

Verifying contracts is important because it ensures that the code is exactly what was deployed onto the blockchain
It also allows the public to read and audit your smart contract code
Contracts that are verified are considered to be more trustworthy than the ones which are not
It also gives you an UI interface to interact with the contracts

Build

In this tutorial, we will Verify Smart contract that is already deployed on Polygon Mumbai Test network.

We will also Verify the contract if it has constructor parameters.

Let's now learn how we can leverage HARDHAT for verifying smart contracts with only some lines of code.

Let's goo 🚀🚀🚀

We need to install hardhat-etherscan npm package

npm install --save-dev @nomiclabs/hardhat-etherscan

hardhat-etherscan npm package is the package from hardhat which will help us with etherscan verification.
We will install dotenv package to import the .env file and use it in our config. Open up a terminal and execute this command.

npm install dotenv

Now create a .env file in the folder and add the following lines, use the instructions in the comments to get your ALCHEMY_API_KEY_URL, MUMBAI_PRIVATE_KEY and POLYGONSCAN_KEY .If you don't have Mumbai on MetaMask, you can follow this to add it to your MetaMask, make sure that the account from which you get your mumbai private key is funded with mumbai test matic, you can get some from here.

  // Go to https://www.alchemyapi.io, sign up, create
  // a new App in its dashboard and select the network as Mumbai,   
  and replace "add-the-alchemy-key-url-here" with its key url
  ALCHEMY_API_KEY_URL="add-the-alchemy-key-url-here"

  // Replace this private key with your Mumbai account private key
  // To export your private key from Metamask, open Metamask and
  // go to Account Details > Export Private Key
  // Be aware of NEVER putting real Ether into testing accounts
  MUMBAI_PRIVATE_KEY="add-the-mumbai-private-key-here"

  // Go to https://polygonscan.com/, sign up, on your account 
  // overview page,
  // click on `API Keys`, add a new API key and copy the
  // `API Key Token`
  POLYGONSCAN_KEY="add-the-polygonscan-api-token-here"

If you deployed your dapp using Hardhat, you will already have MUMBAI_PRIVATE_KEY and ALCHEMY_API_KEY_URL Then you just need to add POLYGONSCAN_KEY in .env.
Create a new file named verify.js under the scripts folder. Notice how we are using code to verify the contract.

const { ethers } = require("hardhat");
require("dotenv").config({ path: ".env" });
require("@nomiclabs/hardhat-etherscan");
async function main() {

// Verify the contract after deploying
await hre.run("verify:verify", {
address: "address-of-your-smart-contract",
constructorArguments: [],
});
}
// Call the main function and catch if there is any error
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});

Now if the constructor of the contract has Parameters, then you need to put the value of that parameter in constructorArguments .

const { ethers } = require("hardhat");
require("dotenv").config({ path: ".env" });
require("@nomiclabs/hardhat-etherscan");
async function main() {
// Verify the contract after deploying
await hre.run("verify:verify", {
address: "address-of-your-smart-contract",
constructorArguments: ["parameter1","parameter2"],
// for example, if your constructor argument took an address, do something like constructorArguments: ["0xABCDEF..."],
});
}
// Call the main function and catch if there is any error
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});

To verify, open up a terminal and execute this command.

npx hardhat run scripts/verify.js --network mumbai

It should have printed a link to Mumbai polygonscan, your contract is now verified. Click on polygonscan link and interact with your contract there 🚀🚀🚀

Reference

This tutorial is highly inspired by the LearnWeb3DAO tutorial on Hardhat Etherscan Verification.

You can follow me on Twitter, GitHub, and Linkedin. Keep your suggestions and comments coming!

How to Build custom ERC-1155 NFT Collection using thirdweb

Aayush Gupta — Mon, 07 Nov 2022 05:51:32 +0000

In this Tutorial, we will build a custom ERC-1155 NFT Bundle Collection using Thirdweb ContractKit and Deploy tool. Instead of Minting all the NFTs in one go. We allow users to mint NFT from any NFT bundle Collection one by one. We also set a maximum supply of NFTs; one user can mint only one NFT.

Overview

ERC-1155 has emerged as a gold standard for creating NFTs; every major marketplace lists new tokens as an ERC-1155 standard. We will use Thirdweb ContractKit to build our smart contract along with some custom logic. We allow users to mint only one NFT per NFT Bundle collection.

Why Use ContractKit?

Each feature you implement in your smart contracts unlocks functionality in both the thirdweb dashboard and SDK to help you build applications on top of them.

What is ERC-1155?

ERC1155 is a multi-token standard that allows the creation of fungible, non-fungible, and semi-fungible tokens all in one contract. Before ERC-1155, if a use case needed both ERC-20 (fungible) and ERC-721 (non-fungible) tokens, you would need to create separate contracts to achieve this. ERC1155 also allows for multiple NFT collections to be launched in just one smart contract instead of creating a different contract for each collection; this increases efficiency in smart contract construction and minimizes the transaction count, which is very important as it consumes less blockchain space. With ERC-1155, batch transfer of tokens is possible instead of transferring a token to a single address in previous standards.

A prevalent example of the ERC-1155 application is blockchain-based decentralized games, which need coins and collectibles, so ERC-1155 has become a standard there. ERC1155 has also become a standard in the NFT space.

The previous ERC-721 had a one-to-one mapping of the token id with the address. ERC-1155 has a rather complex mapping where the address in a combination of token ID is mapped to the balance of the token.

Setting up the environment.

First of all, we will setup our environment and install dependencies. To get started, run the command below to create a new project by opening the terminal of your preferred IDE.

npx thirdweb create --contract

You will get something like this:

Now enter your preferred details. For this tutorial, I have selected the below setting

After completion, navigate and open the new directory by running the following command.

cd dapp-name

code .

You will see this type of file structure.

Now open the contracts directory and select the contract.sol file. You will see the demo code. Now copy the below smart contract code and replace it with the demo code.

// SPDX-License-Identifier: MIT

/** @author Aayush gupta
 * `TravelQuest` is a POV (Proof-of-visit) dapp that allow user to mint 1 NFT per collection
 * using `ERC1155LazyMint` library of `ThirdWeb`.
 */
pragma solidity ^0.8.0;


/**
 * Importing `ERC1155LazyMint` library of `ThirdWeb`.
 */
import "@thirdweb-dev/contracts/base/ERC1155LazyMint.sol";

/**
 * @title TravelQuest
 * @dev inherite and using `ERC1155LazyMint` in the our smart contract
 *  
 */
contract TravelQuest is ERC1155LazyMint{ 
    // Total number of NFTs per Bundle Collection
    uint256[] private supplies = [50,50];
    // Total number of NFTs minted
    uint256[] private minted = [0,0];

    // nested mapping to check user can mint only one NFT per NFT Collection
    mapping(uint256 => mapping(address => bool)) public member;

    /**
     * @dev ERC1155LazyMint library's constructor takes four Parameters
     * _name of the NFT, _symbol of the NFT,
     *  _royaltyRecipient (address) who will get a royalty on secondary sale, _royaltyBps (royality percentage)
     * we don't need to set Royality for the purpose of our smart contract. setting _royaltyBps to Zero
     * @param _name: name of the whole NFT bundle Collection
     * @param _symbol: symbol of the whole NFT bundle Collection
     */
    constructor(
        string memory _name,
        string memory _symbol
    ) ERC1155LazyMint (_name, _symbol, msg.sender, 0){}


    /**
     * @dev Mint NFT and also check various conditions
     * 1. One user can mint only one NFT per Bundle Collection
     * 2. Give error if _tokenId is wrong
     * 3. Check and give error if all the NFTs are Minted
     * 
     * @param _tokenId: tokenId of the NFT Bundle collection 
     */
    function mintNFT(uint256 _tokenId) 
        external
        {
         require(
            !member[_tokenId][msg.sender],
            "You have already claimed this NFT."
        );    
        require(_tokenId <= supplies.length-1,"NFT does not exist");
        uint256 index = _tokenId;

        require (minted[index] + 1 <= supplies[index], "All the NFT have been minted");
        _mint(msg.sender, _tokenId, 1, "");
        // "" is data which is set empty
        minted[index] += 1;
        member[_tokenId][msg.sender] = true;
    }

    /**
     * @dev Give the total number of NFTs minted per NFT Bundle Collection
     * @param _tokenId: tokenId of the NFT Bundle collection 
     */
    function totalNftMinted(uint256 _tokenId) public view returns(uint256){
        return minted[_tokenId];
    }
}

I will explain the code below but before seeing the explanation. I request you to try to understand smart contracts on your own by reading the code and comments.

Let's move to the explanation

Line 7: Declaring the Solidity version.

Line 13: Importing the thirdweb ERC1155LazyMint contract.

Line 20: Inheriting the ERC1155LazyMint contract in our TravelQuest smart contract. In order to use all the functionalities of ERC1155LazyMint contract.

Line 22: supplies is an array that keeps track of the Maximum number of NFT available to mint.

Line 24: minted is an array that keeps track of how many NFTs are already minted.

Line 27: member is a nested mapping to check user can mint only one NFT per NFT Collection

Line 37: constructor: ERC1155LazyMint library's constructor takes four Parameters

_name: name of the NFT

_symbol: symbol of the NFT

_royaltyRecipient (address) who will get a royalty on a secondary sale

_royaltyBps (royalty percentage).

we don't need to set royalties for the purpose of our smart contract. setting _royaltyBps to Zero.

Line 38: string memory _name: name of the whole NFT bundle collection

Line 39: string memory _symbol: symbol of the whole NFT bundle collection

Line 51: function mintNFT : to allow users to mint NFT from our NFT Bundle Collection. One user can only mint 1 NFT of each NFT collection. Also, check various condition

One user can mint only one NFT per Bundle Collection
Give error if _tokenId is wrong
Check and give an error if all the NFTs are Minted _tokenId: tokenId of the NFT Bundle collection

Line 72: function totalNftMinted: is a getter function. Give the total number of NFTs minted per NFT Bundle Collection. _tokenId is the tokenId of the NFT Bundle collection

BOOM You have created our smart contract with custom logic and thirdweb ContractKit.

Deploy our smart contract using thirdweb deploy

Use the CLI to ship our contract directly to any of thirdweb supported networks using their dashboard.

npx thirdweb deploy

Running this command will:

Compile all the contracts in the current directory.
Allow you to select which contract(s) you want to deploy.
Upload your contract source code (ABI) to IPFS.
Open the deploy flow in the dashboard for you to select one of ThirdWeb supported networks to deploy to.
You don't need to write your deploy script. Meaning you don't need your Private Key to deploy your smart contract, which saves you and eliminates any chance to expose your Private Key.

After running the above command, you will get something like this:

Now click on the link. You will open the Deploy dashboard. Enter the details (Name of the NFT, symbol of the NFT, and network you want to deploy your smart contract) and Click on the Deploy Now button.

After the deployment of your smart contract. You will be navigated to your NFT Collection Dashboard.

Click on the Single Upload to upload the metadata of our NFT. You can also use Batch Upload, but for this tutorial. Let's stick to the Single Upload.

Add the details as shown above and click on Lazy Mint NFT button.

Similarly, let's add metadata for another NFT.

After the addition of Metadata, your NFTs section on the dashboard will look like this.

Now that we have our NFT collection along with Metadata on order. Let's mint some NFTs.

Mint the NFT

Go to Explorer section of your NFT collection Dashboard. You will be seeing all the functions you can perform. For now, let's just focus on our custom mintNFT function.

Enter the _tokenId (either 0 or 1) and click on Mint button. You will mint the NFT and the dashboard will show all the transaction details.

Copy your contract address and paste the address on Testnet Opensea to view your NFT with metadata.

You have successfully minted the NFT and viewed it on opensea. You can share link of opensea and brag about NFTs like all web3 native people do 😎.

Check Custom Errors

You can have successfully minted the NFT. Now let's check the custom errors we added in our smart contract.

Wrong TokenID

Enter any wrong _tokenId in mintNFT function.

You will see this well-defined custom error with all details.

Already Claimed

Try to mint the same NFT with the same wallet address.

Again, you will see this well-defined custom error with all details.

Getter Function

We have already seen how we can access and use the setter function in ThirdWeb. Now we will interact with the getter function. You can access the getter function by scrolling down on the explorer page and clicking on your custom totalSupply function.

You see you are getting the right result.

🎉BOOM 🎉

You have completed the whole tutorial. Give yourself a pat on the back.
You have learned about:

ERC-1155 token standard
Build your own custom smart contract using thirdweb contractkit
Deploy your smart contract using thirdweb deploy
Store your NFTs metadata in IPFS using thirdweb dashboard
Mint your NFT and interact with your smart contract using the Explorer section of thirdweb dashboard

Simply WOW

If you learn and enjoy this article. Please share this article with your friends. I hope you learned something new or maybe even solved a problem. Thanks for reading, and have fun!

You can follow me on Twitter and LinkedIn. Keep your suggestions/comments coming!

WAGMI 🚀🚀

What is RPC Node? Why we should use Decentralized Node Providers?

Aayush Gupta — Mon, 07 Nov 2022 05:50:43 +0000

If you're new to blockchain development, the one question always arises: what is an RPC node?, sometimes refer as Blockchain Node, Blockchain API Key, or Blockchain Endpoint . You may know that RPCs are essential tools that blockchain developers used to build decentralized apps. But what exactly are they? And why are they so important in blockchain technology? We will learn about that in the following article. It will be a long article but I ensure you that if you stay with this article you will learn all you need to know about RPC nodes and node providers.

What is an RPC node in blockchain?

Let's start from the basics! An RPC node is essentially a program running on a single computer that allows you to connect with the rest of the blockchain network. It connects with other nodes to send information back and forth, checks that transactions sent between people are valid, and stores important information about the state of the blockchain.

RPC (Remote Procedure Call) could be classified as a type of API (application programming interface) that allows developers to run code that can be executed on servers remotely. And when developers build dApps with RPC capabilities, the dapp will connect users’ requests to information from blockchains. For instance, when users access an NFT Collection, play P2E Game or use MetaMask to make transactions, their requests go through an RPC to connect them with the nodes that hold the data from blockchains.

Finally, it's important to note that there's no way to access the information on a blockchain without using a node. Can't be done. Think of it like the browser for the blockchain.

Use Cases For RPCs

1. Creating decentralized applications

One of the major use cases for RPC is building dApps that have the capability to interact with one or more blockchains. Decentralized applications are based on smart contracts that enable features like minting NFTs, automatic execution of a crypto trade, and Raffle Game. They also have a user interface that makes it usable for everyone.

2. Querying blockchain data without access to your own node

3. Simplifying the building process

The RPC layer is also useful when building applications because it simplifies the job of developers. For instance, if you wanted users to view their external wallet’s crypto balance within your new DeFi dApp, you wouldn’t need to build a wallet from scratch — you would just need to build an API that can ask to communicate with the wallet to find what the user holds. At the same time, the software that forms the crypto wallet can contain API-enabling code that allows interoperability with many other DeFi protocols.

4. Creating WebSockets to view real-time transactions data

WebSockets are APIs that allow for a constant exchange of information between a client and a server. Since it keeps the communication open and flowing, there is no need to establish a connection every time a message is sent. These are extremely useful for high-throughput applications, such as Internet of Things (IoT) capabilities that need to send and receive large amounts of data.

5. Run calls to access a massive amount of information.

Developers can run calls to execute tasks like encrypting wallets, producing a human-readable JSON object, finding current block size, creating multi-signature addresses, and much more. These are critical pieces of information that builders need to create their own blockchain platforms and services. With access to a free, readily available, and reliable RPC, developers will be able to build faster and make more efficient applications.

Now that you understand what RPC Node is and why we need it in Blockchain development. Let’s discuss how we can actually use RPC Node. We (Web3 developers) have two choices for accessing the node infrastructure necessary for building and operating dApps.

Running our own Node: Set up a node ourselves and take on the DevOps of equipment maintenance and solving server problems, which is a very difficult task.
RPC Node Providers: Use services from RPC Node Providers like Ankr, Alchemy, Infura via an RPC layer.

Why is running a node difficult?

There are a few things that make developing on your own node connected to the network particularly annoying. Let's cover some reasons:

Nodes take a long time to set up - up to weeks!

The bane of any developer is spending a lot of time setting up a tool that doesn't directly contribute to what they're trying to build, and nodes are among the worst offenders.

There are typically two major categories of nodes

Light Nodes: sync just the block headers and requests from full nodes for many queries.
Full Nodes: Full nodes keep the entire state of a blockchain - every transaction that's ever been created

Most queries work with light nodes, but full nodes are the backbone of the blockchain - they’re necessary to serve most information.
Light nodes have gotten relatively more simple in the past, but still require installing the node program, setting configuration variables, downloading block headers, and checking ports and health to ensure they're running properly

Full nodes are even worse: the biggest issue is that full nodes need to download every block from 0 to latest from scratch, and manually replay every block and transaction ever submitted by anybody ever. For Ethereum mainnet, that's over 10 million blocks and on the order of billions of transactions. That can literally take weeks of syncing.

Nodes have to be managed - by you!

The biggest Obstacle to running your own node is Nodes have to be managed by You. Get ready for the devOps project from hell. Just a quick overview:

Nodes regularly need to be upgraded every few weeks, and occasionally rebuilt from scratch in the case of hard forks and node client upgrades.
Because most nodes weren't designed with reliability in mind, certain queries (such as eth_getLogs) can involve running through millions of blocks and transactions, and often time out or crash a node
Individual nodes can fall behind the network for various reasons like peering and connection issues, getting stranded on outdated branches, issues with internal state. If they’re behind, your users will get served stale data but not realize it, which can be a dangerously terrible experience.
There are various others reasons why running your node is time consuming and hideous.

To save ourselves from all this necessary Hardwork. We can simply use RPC Node Providers. I understand this article is lengthy but bear with me. You already learn all about RPC Nodes to get started. Now let’s learn about NODE PROVIDERS.

What is a Node Provider?

Node providers are essentially teams, companies (like ANKR, Alchemy) that offer a way to access the information on a blockchain without having to run your own node! Instead of sending your requests to a local node, you can send them over the internet to a provider offering an identical API that is running fully synced, up-to-date nodes available 24/7.
A solid node provider will offer, at the very minimum:

Access to light and full nodes with regularly updated nodes and alerts, so you don't have to worry about forks or network changes.
Access to archive nodes for historical transaction data.
Scalability and Reliability: nodes should be available whenever you want, as much as you want them.
Consistency: providers should handle tricky edge-cases. This is oftentimes an issue when using Infura or other providers.

All and all you get all the capabilities of RPC Node without any hassle but you need to pay some fees for using their services.

You have also understood why should we use Node providers instead of running our own node.

Now let's explore the hidden treasure of Blockchain, Decentralized RPC Node Provider and why should we use them.

Why should we use Decentralized RPC Node Providers?

Now that we know, that a majority of Web3 users do not run their own full node to interact with blockchains, but trust RPC Node Providers. Currently, most of the RPC Node Providers like Alchemy, and Infura are centralized. Now you must be thinking why we are using centralized RPC Node Providers when we building Dapp which literally stands for Decentralized Application. ANKR node provider exactly solving this problem. ANKR is a Decentralized RPC Node Provider that has all the capabilities of the centralized node provider plus is censorship-free. To understand decentralized RPC providers better, we will learn about the benefits of Decentralized RPC Node:

1. Censorship Resistance

Decentralized RPC Provider is censorship-free. Meaning no center authority, not even RPC Provider (like ANKR) can remove or block the RPC request of any dApp like Tornado Cash. We come to see the ill-effect of Centralized RPC Node Providers when the Tornado cash controversy breaks out. Under the Pressure of US Government, they are blocking the RPC Request for Tornado Cash.

With Centralized RPC Node Providers now engaging in censorship, this issue is more clear than ever. We need Decentralized RPC Provider that keeps up our dapps and remains censorship free.

2. Avoid single points of failure

Centralized Web3 providers use AWS data centers only to house their nodes. This limits the global distribution of nodes leading to higher latency and creating a big problem if AWS goes down — all the dApps that depend on these nodes to communicate with the blockchain go down with it.

But the bottom line is that the foundation for Web3 needs to be decentralized. Otherwise, we are just building Web 2.1 — a centralized web with extra steps.

3. The Concentration of Power

Suppose a centralized provider or providers ended up gaining a majority of infrastructure control over a blockchain (or multiple chains) because of the number of nodes they operate. In that case, that could spell disaster for the security and continuity of decentralized systems. Additionally, if services like AWS don’t like a particular dApp, they could effectively shut it down, as they have been doing with Web2 platforms.

4. Gatekeeping and Overpricing

We all want Web3 to be as accessible as possible, so we want fewer paywalls and barriers to entry when it comes to interfacing with node infrastructure. Centralized providers don’t price their services for the communities — they do it to secure as much profit as they can. And for VC-backed providers, prices will more than likely increase every time they seek another round of equity.

Decentralized RPC Node Providers are Better

The necessary evils of Web2 (like centralized mega-providers) are no longer necessary and should be removed at earliest. ANKR is focused on solving this exact problem. By using Decentralized RPC Node Provider (like ANKR), You not only make your dapp truly decentralized but also making help in creating crypto economy. Massive Servers will not run nodes but self-funded DAO’s and Communities will, not VC-backed startups and companies whose sole purpose is to make money. We will have a censor-free environment, Government will not control us. We have a once-in-a-lifetime opportunity to build a new layer of the web that provides autonomy, privacy, censorship resistance, and self-governance without a need for profiteers capitalizing on its use. Decentralized infrastructure is the missing puzzle piece that allows us to build, transact, communicate, and earn rewards on the future web independently.

If you are still with me, I can assure you that you have learned all you need to know about RPC nodes and node providers.

References:
https://medium.com/ankr-network/why-are-rpcs-so-important-in-blockchain-development-5-use-cases-60a16a02c143

https://medium.com/ankr-network/centralized-vs-decentralized-web3-infrastructure-what-should-developers-choose-1a1d5f0715c7

I hope you learned something new and solved the problem. Thanks for reading. Have fun!

You can follow me on Twitter, GitHub and Linkedin. Keep your suggestions and comments coming!

How To Migrate Dapp from Rinkeby to Mumbai

Aayush Gupta — Sun, 04 Sep 2022 05:30:51 +0000

We Web3 Developers are facing, once in a lifetime tragedy. Tragedy, none of us think we will ever face. Saying Good Bye to our favorite and most popular Testnetwork Rinkeby. During this period of Grief. We have to handle, one more humongous task of Migrating our dApps from rinkeby to another testnet. This article will not take away your sorrows of losing Rinkeby but will help you migrate your dApp.

Steps Involve in Migrating

Update the RPC Node
Re-Deploy the Smart Contract
Make adjustments in frontend

1. Update the RPC Node

The first task for migrating your dapp is to get RPC Node of the new Testnetwork, for our example, we will be using Mumbai Testnetwork. You can use any Node Provider to get Mumbai testnetwork RPC Node. I will use Ankr.

Go to their RPC Service section by clicking on this link.

Now Search for Polygon Network in Ankr Endpoint. Click on the "More" Button to view Polygon Mainnet and Polygon Mumbai Testnetwork.

Select Testnet on the network section and Copy the Public RPC Key.

That's it. You get the RPC node. Now that we have RPC Node, we will replace our new Mumbai RPC Node key with old Rinkeby RPC in our dapp. Let's Go.

I am assuming you are using "Hardhat" as a Solidity Development Framework. Most probably if you are following any quality tutorial or documentation. You probably store your RPC Key in .env file. You need to replace it with a new Mumbai RPC node.

As we are using Public RPC Node. You can also simply put your RPC key in your hardhat.config.js.

You can also use this preferred method of storing all your keys like Private Key, PolygonScan key, and RPC key in the .env file and importing them in the hardhat.config.js file. Now in your hardhat.config.js file. Replace rinkeby with mumbai inside the networks section.

2. Re-Deploy the Contract

First, make sure you have some test Matic in our wallet, which you are using for deploying the smart contract. You can use this Mumbai Faucet to get some test Matic. Mumbai Faucet

Run this command to deploy your smart contract.
npx hardhat run scripts/deploy.js --network mumbai
or
npx hardhat run <location of your deploy script> --network mumbai

If everything works according to plan, you will get an updated "Contract Address". If you added console.log in your deploy script, which you should. You will get output like this.

3. Make adjustments in frontend

Update your smart contract address in your Frontend folder or index file.

Set chainId to 80001 like chainId == 80001 and replace the word 'Rinkeby' with 'Mumbai'.

Rinkeby will always be remembered in our hearts and in the stories, we will tell to our future generation.

Don't forget to push your code to GitHub so all the world can see your amazing work.

I hope you learned something new and solved the problem. Thanks for reading. Have fun!

You can follow me on Twitter, GitHub and Linkedin. Keep your suggestions and comments coming!

How to Create and Deploy an ERC-1155 NFT Bundle Collection

Aayush Gupta — Wed, 06 Apr 2022 05:28:51 +0000

In this Tutorial, we will build NFT Bundle Collection using ERC-1155. Instead of Minting all the NFTs in one go. We allow users to mint NFT from any NFT bundle Collection one by one. We also set a maximum supply of NFTs; one user can mint only one NFT.

Overview

ERC-1155 has emerged as a gold standard for creating NFTs; every major marketplace lists new tokens as an ERC-1155 standard. In this guide, we will learn about the ERC-1155 token standard and how to create an ERC-1155 NFT Bundle Collection.

Steps

Create 7 NFT collections
Create and deploy an ERC-1155 contract
Update the contract to be compatible with OpenSea
Deploy our NFT collections

Requirements

Image assets to create NFTs
Metadata of NFTs
MetaMask and some Mumbai test MATIC
Knowledge of the ERC-20 and ERC-721 token standards

What is ERC-1155?

The previous ERC-721 had a one-to-one mapping of token id with the address. ERC-1155 has a rather complex mapping where the address in a combination of token ID is mapped to the balance of the token.

Creating Metadata URI

We will create 7 NFT Bundle collections (Agra, Delhi, Goa, and so on) with a single NFT. We will store the Metadata of NFT to the decentralized storage IPFS because we are building decentralized applications (DApp). We will upload them through PINATA. You can choose some other decentralized storage IPFS of your choice.

Sign in to Pinata and upload your image files for Agra, Delhi, Goa, etc. You should see something like this once you have uploaded them successfully:

Copy the IPFS URL of the image; we will need it for the metadata of each collection.

We will create three JSON metadata files to store information about our NFT collections.

0.json: Agra collection
1.json: Delhi collection
2.json: Goa collection

Our 0.json file will look something like this:

name: Has the name of the NFT.

description: Has the description of the NFT.

image: Has the link to the image we got earlier (IPFS URL).

properties: Has the various properties of NFT

Create the remaining JSON files, 1.json and 2.json, for Delhi and Goa collections, respectively, and so on.

Now Similarly, we will upload our metadata folder in Pinata. Once successfully uploaded, It will look like this:

You should be able to access JSON files by just entering the file name at the end of the URL, for example:

https://ipfs.io/ipfs/QmSCFe5vvoPsSpyHZpGAW78GJ4bAuDcySCV9UnMm7B69iS/0.json

Creating & Deploying the ERC1155 Contract

We will use the OpenZeppelin contracts library to create our ERC1155 contract and deploy it using Ethereum Remix IDE on the Mumbai testnet. Make sure you have some Mumbai test MATIC which you can also get from MUMBAI Faucet.

Please create a new file, traveler.sol, in REMIX and paste the following code:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

import "@openzeppelin/contracts/token/ERC1155/ERC1155.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Strings.sol";

contract TravelQuest is ERC1155, Ownable { 
    uint256[] public supplies = [50,50,50,50,50,50,150];
    uint256[] public minted = [0,0,0,0,0,0,0];
    mapping(uint256 => mapping(address => bool)) public member;

    constructor() ERC1155("ipfs://QmSCFe5vvoPsSpyHZpGAW78GJ4bAuDcySCV9UnMm7B69iS/{id}.json")
        {
        }

    // to Put NFT to Opensea
     function uri(uint256 _tokenId) override public view returns (string memory) {
        require(_tokenId <= supplies.length-1,"NFT does not exist");
        return string(
        abi.encodePacked(
            "ipfs://QmSCFe5vvoPsSpyHZpGAW78GJ4bAuDcySCV9UnMm7B69iS/",
            Strings.toString(_tokenId),
            ".json"
        )
        );
    }

     function mint(uint256 _tokenId) 
        public
        {
         require(
            !member[_tokenId][msg.sender],
            "You have already claimed this NFT."
        );    
        require(_tokenId <= supplies.length-1,"NFT does not exist");
        uint256 index = _tokenId;

        require (minted[index] + 1 <= supplies[index], "All the NFT have been minted");
        _mint(msg.sender, _tokenId, 1, "");
        // "" is data which is set empty
        minted[index] += 1;
        member[_tokenId][msg.sender] = true;
    }

    function totalNftMinted(uint256 _tokenId) public view returns(uint256){
        return minted[_tokenId];
    }
}

Line 2: Declaring the Solidity version.

Line 4: Importing the OpenZeppelin ERC-1155 contract.

Line 10: supplies is an array that keeps track of the Maximum number of NFT available to mint.

Line 11: minted is an array that keeps track of how many NFT
already been minted.

Line 21: function URI to put metadata of NFT to Opensea. We use metadata stored in IPFS.

Line 32: function mint to allow users to mint NFT from our NFT
Bundle Collection. One user can only mint 1 NFT of each NFT collection.

Line 49: function totalNftMinted gives the total number of NFTs minted from each NFT Collection.

Address on which tokens will be minted to, msg.sender here means the deployer of the contract.
Token id, we have already assigned names to token id, so using names here.
Quantity of each token.

Compiling the Smart Contract

Compile the contract, go to the third tab on the left menu, select Injected Web3 as environment and deploy it by choosing the correct contract name:

Approve the transaction from MetaMask. Once the transaction is complete, it will deploy your contract.

Now you can perform functions like mint NFT by entering token id. We can also retrieve the URI of the token by entering the token id.

When you query the contract for URI, it will return a format supported by OpenSea.

Minting an NFT

Enter the token ID of the NFT Bundle Collection you want to mint.

After some time of minting, you can see the NFT on OpenSea.

You will also see the metadata of the NFT.

Conclusion

Congratulations on deploying your ERC-1155 tokens. If you made it here now, you know about the ERC-1155 multi-token standard and how to create and deploy the ERC1155 bundle NFT Collection.

I hope you learned something new or maybe even solved a problem. Thanks for reading, and have fun!

You can follow me on Twitter and LinkedIn. Keep your suggestions/comments coming!