Web3 Pro

web3pro

How To Build a Decentralized Betting Platform With Solidity and React.js

Launch a Token on Rootstock: Leverage Bitcoin's Security with Smart Contracts

Are you ready to ride the Ethereum 2.0 wave and start earning validator rewards? If so, you've come to the right place. In a previous article, I discussed how we can set up the Ethereum 1.0 node, check it out . We'll walk you through the process of setting up an Ethereum 2.0 node and validator account using Docker Swarm. By the end of this guide, you'll be a pro at contributing to the Ethereum 2.0 network and earning rewards in no time. So, grab your favorite drink, buckle up, and let's get started! here 😎 🚀 ⚙️️Getting Started Before we dive into the setup, make sure you've got the following tools and resources ready: Docker and Docker Swarm installed on your computer. If you need help, follow the official installation guide: https://docs.docker.com/get-docker/ At least 32 ETH to stake for your validator account. 🐳 Step 2: Creating the Docker Compose File Now that Docker is ready, let's create the docker-compose.yml file that will define our Ethereum 2.0 node and validator setup. Choose or create a directory on your computer where you'd like to store the project files. This could be any location that's easy for you to access. For example, you can create a new directory called in your home folder. Open the terminal and run: eth2-node mkdir ~/eth2-node cd ~/eth2-node Next, create a new file named docker-compose.yml using a text editor of your choice. For instance, on the terminal, you can use the nano text editor: nano docker-compose.yml Once the file is open in your text editor, copy and paste the following contents: docker-compose.yml version: '3.9' services: beacon-node: image: gcr.io/prysmaticlabs/prysm/beacon-chain:latest volumes: - ./data:/data command: --datadir=/data --http-web3provider=<YOUR_ETH1_NODE_URL> networks: - eth2 validator: image: gcr.io/prysmaticlabs/prysm/validator:latest depends_on: - beacon-node volumes: - ./validator:/validator command: --wallet-dir=/validator --beacon-rpc-provider=beacon-node:4000 networks: - eth2 networks: eth2: Make sure to replace with your Ethereum 1.0 node URL. <YOUR_ETH1_NODE_URL> 🏦 Step 3: Creating a Validator Account Before we deploy our setup, we need to create a validator account. To do this, download and install the Eth2.0 Deposit CLI tool from . https://github.com/ethereum/eth2.0-deposit-cli Follow the instructions to generate a validator key pair and deposit data file. Store the keys in the directory, which you'll need to create within your eth2-node project folder: ./validator mkdir ~/eth2-node/validator 💰Step 4: Staking 32 ETH Now it's time to stake your 32 ETH! Head over to the Ethereum Launchpad at . Follow the steps on the website and deposit 32 ETH using the deposit data file generated in Step 3. Make sure to save the transaction hash for future reference. https://launchpad.ethereum.org/ 🚢Step 5: Deploying the Setup with Docker Swarm With your deposit sent, it's time to deploy your Ethereum 2.0 node and validator setup using Docker Swarm. Run the following command in your terminal: docker stack deploy -c docker-compose.yml eth 2 This command will create the beacon node and validator containers. 📝Step 6: Checking the Status of Your Containers To check the status of your containers, you can use the command, which will list all your running containers, including your Ethereum 2.0 node and validator. docker container ls 🌐Step 7: Syncing the Beacon Node It might take some time for the beacon node to sync with the Ethereum 2.0 network. You can monitor the progress using the following command: docker logs -f < beacon_node_container_id > Once your beacon node is fully synced, your validator will begin validating blocks and earning rewards! 👁️‍🗨️Step 8: Monitoring Your Validator's Performance To keep tabs on your validator's performance, you can use Beaconcha.in ( ) or Etherscan ( ). Enter your validator's public key on either website to track its status, rewards, and penalties. https://beaconcha.in https://etherscan.io 🔐Security Best Practices As a validator, it's crucial to keep your validator keys safe. If you lose these keys, you won't be able to withdraw your staked ETH and rewards. Additionally, avoid running multiple instances of the same validator, as this could result in slashing penalties. And... that's a wrap! 🥳Congratulations! You've successfully set up an Ethereum 2.0 node and validator account using Docker Swarm. You're now actively contributing to the network's security and earning rewards in the process. The Ethereum 2.0 ecosystem is continually growing, so stay up-to-date with the latest developments, tools, and applications. Connect with the Ethereum 2.0 community on forums, Discord, and GitHub to exchange ideas and knowledge. Happy staking!

How to Set Up an Ethereum 2.0 Node & Validator Using Docker Swarm: A Step-by-Step Guide

ডকার সোয়ার্ম ব্যবহার করে কীভাবে একটি ইথেরিয়াম 2.0 নোড এবং যাচাইকারী সেট আপ করবেন: একটি ধাপে ধাপে নির্দেশিকা

So richten Sie einen Ethereum 2.0-Knoten und -Validator mit Docker Swarm ein: Eine Schritt-für-Schritt-Anleitung

Cómo configurar un nodo y un validador de Ethereum 2.0 mediante Docker Swarm: una guía paso a paso

Comment configurer un nœud et un validateur Ethereum 2.0 à l'aide de Docker Swarm : un guide étape par étape

डॉकर झुंड का उपयोग करके एथेरियम 2.0 नोड और सत्यापनकर्ता कैसे सेट करें: एक चरण-दर-चरण मार्गदर्शिका

Docker Swarm を使用して Ethereum 2.0 ノードとバリデーターをセットアップする方法: ステップバイステップ ガイド

Docker Swarm을 사용하여 Ethereum 2.0 노드 및 유효성 검사기를 설정하는 방법: 단계별 가이드

Como configurar um nó e validador Ethereum 2.0 usando o Docker Swarm: um guia passo a passo

Docker Swarm Kullanarak Ethereum 2.0 Düğümü ve Doğrulayıcı Nasıl Kurulur: Adım Adım Kılavuz

Cách thiết lập Nút Ethereum 2.0 & Trình xác thực bằng Docker Swarm: Hướng dẫn từng bước

如何使用 Docker Swarm 设置以太坊 2.0 节点和验证器：分步指南

Building an Ethical Text-to-Image AI-Art Site That Pays Royalties to Original Creators

How to Create an NFT (Digital Collectible) for Thanking Fans

🌈🦄  Building Your Own AI-Generated Art NFT DApp With Bacalhau

🌈🦄 বাকালহাউ দিয়ে আপনার নিজস্ব AI-জেনারেটেড আর্ট NFT DApp তৈরি করুন

🌈🦄 Erstellen Sie mit Bacalhau Ihre eigene KI-generierte Kunst-NFT-DApp

🌈🦄 Creando tu propia DApp Art NFT generada por IA con Bacalhau

🌈🦄 Construisez votre propre DApp NFT Art généré par l'IA avec Bacalhau

🌈🦄 बकलहाऊ के साथ अपनी खुद की एआई-जेनरेटेड आर्ट एनएफटी डीएपी का निर्माण

🌈🦄 Bacalhau を使用して独自の AI 生成アート NFT DApp を構築する

🌈🦄 Bacalhau를 사용하여 나만의 AI 생성 예술 NFT DApp 구축

🌈🦄 Construindo sua própria arte NFT DApp gerada por IA com Bacalhau

🌈🦄 Bacalhau ile Kendi Yapay Zeka ile Üretilmiş Sanat NFT DApp'inizi Oluşturma

🌈🦄 Xây dựng DApp NFT nghệ thuật do AI tạo ra của riêng bạn với Bacalhau

🌈🦄 使用 Bacalhau 构建您自己的 AI 生成艺术 NFT DApp

I’ve started to deal with the technology of zero-knowledge proofs because I was curious if it was possible to create an . anonymous voting system on the blockchain Paper-based voting (like the US Presidental Election) is a very expensive way of voting. I have no exact data, but it costs , and it is always in the air that somebody cheated it. billions of dollars A blockchain-based system costs only a fraction of this price, and it is super secure because the blockchain is public and everybody can track everything on it. The only thing that is untrackable is that who voted to which party thanks to the zero-knowledge proof (for a more detailed explanation, please read my ). So, blockchain-based voting seems like the holy grail of voting. previous article In my previous article, I promised a simple proof of concept. It is now completed and available on . I will show you how it works in this article. GitHub The method that I’m using is the same as what is used by . Tornado Cash is a non-custodial Ethereum and ERC20 privacy solution based on zkSNARKs. Tornado Cash The main component of it is a smart contract where you can deposit your money with a commitment that you can withdraw later by a nullifier. One commitment is assigned to only one nullifier, but nobody knows which nullifier is assigned to which commitment. This is also usable for anonymous voting because everybody should vote only once, but nobody should know which vote is assigned to which voter. (I have a about the topic.) full article My voting app is an Ethereum dApp. It is a static page with JavaScript without any backend (the backend is the smart contract on Ethereum). Because of this, it is very hard to attack the system, because on the blockchain, there is no single point of failure. If you want to test it locally, the easiest way is to run a local blockchain by: npx hardhat node and . We will use the first 2 accounts. set up the accounts in MetaMask In the first step, clone the repo, deploy the smart contracts, and start the app: git clone https://github.com/TheBojda/zktree-vote
cd zktree-vote
npm i
npm run prepare (optional, npm i should run it)
npm run deploy
npm start The dApp uses MetaMask to communicate the blockchain, so if you use it from your desktop browser, MetaMask has to be installed, and if you use it from your mobile phone, open it in the MetaMask application’s embedded browser. When you open you will see the menu of the app: http://localhost:1234/ Click on the registration to vote to open the registration page. When you open the page, it automatically generates the commitment and the nullifier in the background, and stores it in the browser's local storage. The validation of the voter can be done in person at the voting place, or online by using a video conferencing system, etc. The validator can use the “Validator tool” for it: To make it easy, I have added a QR reader to the page, so sending the commitment to the validator can be done by scanning the voter’s QR code, or the voter can copy it and send it in the chat (online validation). When the validator checked the voter’s identity by checking her identity card, etc., he sends the commitment to the blockchain with a unique hash that can be the hash of the user’s ID card or any unique identifier. This ensures that one voter will be registered only once with one commitment, which means she can vote only once. The voting process is easy. You choose one option and send it to the blockchain. The app will use the nullifier that is generated in the background. On the last page, you can check the results of the voting in real-time. That’s it. Simple and very comfortable way of voting, but it has all of the advantages of paper-based voting without all of the disadvantages. After this short intro, let’s see some code. To develop this voting dApp, I’ve used my library. It is a JavaScript library that uses Tornado Cash’s zkSNARK-based method and hides all of the complexity of zero-knowledge proofs. zk-merkle-tree I plan to write a full article about this library, so in this article, I won't write about it in more detail. The smart contract of the voting system looks like this: // SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;

import "zk-merkle-tree/contracts/ZKTree.sol";

contract ZKTreeVote is ZKTree {
    address public owner;
    mapping(address => bool) public validators;
    mapping(uint256 => bool) uniqueHashes;
    uint numOptions;
    mapping(uint => uint) optionCounter;

    constructor(
        uint32 _levels,
        IHasher _hasher,
        IVerifier _verifier,
        uint _numOptions
    ) ZKTree(_levels, _hasher, _verifier) {
        owner = msg.sender;
        numOptions = _numOptions;
        for (uint i = 0; i <= numOptions; i++) optionCounter[i] = 0;
    }

    function registerValidator(address _validator) external {
        require(msg.sender == owner, "Only owner can add validator!");
        validators[_validator] = true;
    }

    function registerCommitment(
        uint256 _uniqueHash,
        uint256 _commitment
    ) external {
        require(validators[msg.sender], "Only validator can commit!");
        require(
            !uniqueHashes[_uniqueHash],
            "This unique hash is already used!"
        );
        _commit(bytes32(_commitment));
        uniqueHashes[_uniqueHash] = true;
    }

    function vote(
        uint _option,
        uint256 _nullifier,
        uint256 _root,
        uint[2] memory _proof_a,
        uint[2][2] memory _proof_b,
        uint[2] memory _proof_c
    ) external {
        require(_option <= numOptions, "Invalid option!");
        _nullify(
            bytes32(_nullifier),
            bytes32(_root),
            _proof_a,
            _proof_b,
            _proof_c
        );
        optionCounter[_option] = optionCounter[_option] + 1;
    }

    function getOptionCounter(uint _option) external view returns (uint) {
        return optionCounter[_option];
    }
} The smart contract is inherited from ZKTree (from the zk-merkle-tree library) and uses its _commit and _nullify methods. The _commit method stores the commitment, and the _nullify method stores the nullifier and verifies the zero-knowledge proof for it. The owner can add the validators by calling the registerValidator method. Only validators can send a commitment to the smart contract after checking the voter's identity. The last method is getOptionCounter which you can use to query the result of the voting in real time. That’s all. Thanks to zk-merkle-tree, the voting contract is super simple, every complexity is hidden behind the library. The dApp itself is a vue.js single-page application. The commitment and the nullifier are generated in the VoterRegistration component by using the generateCommitment from zk-merkle-tree and stored in the local storage. this.commitment = JSON.parse(
      localStorage.getItem("zktree-vote-commitment")
    );
    if (!this.commitment) {
      this.commitment = await generateCommitment();
      localStorage.setItem(
        "zktree-vote-commitment",
        JSON.stringify(this.commitment)
      );
    } The ValidatorTool component is used by the validator to send the commitment to the blockchain. It reads the contract address from the contracts.json (generated by the deployment process) and sends the commitment with the unique hash to the voting contract. const abi = [
      "function registerCommitment(uint256 _uniqueHash, uint256 _commitment)",
    ];
    const provider = new ethers.providers.Web3Provider(
      (window as any).ethereum
    );
    await provider.send("eth_requestAccounts", []);
    const signer = provider.getSigner();
    const contracts = await (await fetch("contracts.json")).json();
    const contract = new ethers.Contract(contracts.zktreevote, abi, signer);
    try {
      await contract.registerCommitment(this.uniqueHash, this.commitment);
    } catch (e) {
      alert(e.reason);
    } The Vote component is used by the voter for voting. It generates the ZK proof by using the calculateMerkleRootAndZKProof method from zk-merkle-tree and sends it to the blockchain with the nullifier. const commitment = JSON.parse(
      localStorage.getItem("zktree-vote-commitment")
    );

    const abi = [
      "function vote(uint _option,uint256 _nullifier,uint256 _root,uint[2] memory _proof_a,uint[2][2] memory _proof_b,uint[2] memory _proof_c)",
    ];
    const provider = new ethers.providers.Web3Provider(
      (window as any).ethereum
    );
    await provider.send("eth_requestAccounts", []);
    const signer = provider.getSigner();
    const contracts = await (await fetch("contracts.json")).json();
    const contract = new ethers.Contract(contracts.zktreevote, abi, signer);
    const cd = await calculateMerkleRootAndZKProof(
      contracts.zktreevote,
      signer,
      TREE_LEVELS,
      commitment,
      "verifier.zkey"
    );
    try {
      await contract.vote(
        this.option,
        cd.nullifierHash,
        cd.root,
        cd.proof_a,
        cd.proof_b,
        cd.proof_c
      );
    } catch (e) {
      alert(e.reason);
    } As you can see, the code is really simple, because all of the complexity of ZKP is hidden by the zk-merkle-tree library. Based on this code, you can easily build your own voting system. Possible improvements: You can build a Merkle tree from the unique hashes of the voters before voting, and check the voter's existence in it when the validator sends the commitment. It prevents using fake identities. Voter whitelisting. If there are thousands of validators, then a Merkle tree is a better way to batch-register them. If voters and validators are divided into districts, then you can generate separate Merkle trees for districts, and assign the validators to these trees. Better validator management. The only way to cheat in this system is if somebody uses a fake identity for voting. This is why validation is very important. There are more methods to prevent malicious validators. For example, the system can randomly choose 2 or 3 validators for one voter. It has very little chance that all of them are malicious. Or it can record the validation process, and other validators randomly check the recorded videos. Cheating on voting is a crime, so it has a very high risk for the validator to be malicious. Better validation method. Sending the commitment, and the whole validation process can be very easy if the video conferencing system is integrated. Voters can fill out a form with their data and send it before the validation. The validator has to only check the ID card through the camera, and if everything is well, he can send the commitment and the unique hash to the blockchain with a button click. Integration of video conferencing systems like . Jitsi Meet If the voter has a digital ID card that can be used for digitally signing the commitment, then the whole validation process can be skipped. This method is super cheap because no human resource is needed, so it can be used frequently, and voters can be more involved in decision-making. Digital ID card support. , and Web3 and blockchain-based anonymous voting are the holy grail of it. Democracy is the most important aspect of blockchain I hope this short article and the zk-merkle-tree library can be a good starting point for others to make their own systems that will be used in the real-world one day.

How I Built an Anonymous Voting System on the Ethereum Blockchain Using Zero-Knowledge Proof

The Essential Guide to Building an NFT Auction Site with React, Solidity, and CometChat

How to Build a Blockchain Voting System with React, Solidity, and CometChat

We will create from scratch ERC-721 smartcontract, deploy it to Ethereum Goerli network using Hardhat + Solidity. For minting we will use NextJs + WalletConnect + Web3Modal Before we start, I would like to mention, that you can use any network you want. With the help of this article, you can deploy to Mainnet also. Smartcontract repo (erc721): https://github.com/gapon2401/erc721 Mint page repo (erc721-mint): https://github.com/gapon2401/erc721-mint Smartcontract: Etherscan Goerli link We need to go through the following steps to reach our goal: Creating NFT (ERC-721) smartcontract Configure hardhat.config.ts and .env Create deploy function Create tests Gas price for deployment and minting the smartcontract Creating images and metadata for NFT Deploy and verify smartcontract Create demo website for minting (optional) Deep dive and customize Step 1. Creating NFT (ERC-721) smartcontract Create new project and install — Ethereum development environment. Let’s call this project . https://hardhat.org erc721 In command line run npx hardhat Select . Create a Typescript project In order to continue you will be asked to install some dependencies. The text may vary on the hardhat version. I will run the following, because I will use : yarn yarn add -D hardhat@^2.10.2 @nomicfoundation/hardhat-toolbox@^1.0.1 We will use template for ERC-721 smartcontract, where all necessary functions have been implemented. You can take a look on it: https://www.openzeppelin.com/ https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC721/ERC721.sol Install openzeppelin packages and dotenv: yarn add -D @openzeppelin/contracts dotenv Remove everything from the folder and create a file with the contents: contracts ERC721Contract.sol https://gist.github.com/gapon2401/d6bf2f0eef9b7e6721b98028f890004e If you have any difficulties with the code above, feel free to read more about the . Here is the summary: Solidity — on deployment we will set the base URI for all tokens, name and a symbol to the token collection. constructor — is our function, which will create new NFT’s for us. Only owner of the contract can call it. mintByOwner — public mint. mint — owner of the contract can change the base URI for tokens setBaseURI —owner can call this function to transfer money from the contract to it’s own wallet address withdraw All other necessary functions are inhereted in this contract from openzeppelin. The price of the tokens will be 0.1 ETH: uint256 public constant PRICE = 100000000000000000; Configure hardhat.config.ts and .env Step 2. Install the following dependencies in order to escape the errors in developing 😲 yarn add -D ethers @nomiclabs/hardhat-etherscan @typechain/hardhat hardhat-gas-reporter solidity-coverage @types/chai @types/mocha typescript ts-node @nomicfoundation/hardhat-chai-matchers chai @nomicfoundation/hardhat-network-helpers typechain @nomiclabs/hardhat-waffle @typechain/ethers-v5 @nomiclabs/hardhat-ethers Now configure your : hardhat.config.ts https://gist.github.com/gapon2401/4bd368815c075954f7cac6b43e1cd687 What do we have here: — we specified the settings and enabled optimization solidity — networks, that we are going to use networks — will show us gas units, that we need to spend for deployment or calling the functions gasReporter — plugin for integration with Etherscan’s contract verification service etherscan The next step is to create file in project root. You have to create 5 variables: .env — the private key of the wallet, that wil be the owner of the contract PRIVATE_KEY -etherscan key. Register on and on the page create and copy your key: ETHERSCAN_API_KEY https://etherscan.io https://etherscan.io/myapikey — Are we going to use gas reporter or not. We will use it REPORT_GAS=1 and — use or for getting the urls. GOERLI_URL MAINNET_URL https://infura.io/ https://www.alchemy.com/ For instance, infura URL for : MAINNET_URL Infura URL for : GOERLI_URL Now compile the code with the command: npx hardhat compile After that command some new folders will appear: , , . artifacts cache typechain-types Step 3. Create deploy function It’s time to write deploy function, we will use tasks for it. Remove folder , we don’t need it. scripts Create the folder and the file inside it: tasks deploy.ts https://gist.github.com/gapon2401/6dbb24a1308479d934897abf743c32e1 In this task we get smartcontract and deploy it. After the deployment in console we will see the address of the contract. We will come back to that function later. Create tests Step 4. We will write the tests for every exteral/public function. Clear the folder and create inside it with the contents: test index.ts https://gist.github.com/gapon2401/47162e377dde919f06108905ecdb847f Run . npx hardhat test You should get similar to that: All tests passed successfully! Gas price for deployment and minting the smartcontract Step 5. For determine the price of deployment and minting functions we have used module . It was enabled by default in , that’s why after all tests were passed, we got the table: hardhat-gas-reporter hardhat.config.ts In the table we can see the gas consumption for methods and deployment. This is the units of gas we need to deploy the contract. How much it will cost in ETH? Use the formula: (gas units) * (gas price per unit) = gas fee in gwei In this formula we don’t know the amount of . gas price per unit You can use or any other website to find this information. At the moment of writing this article, gas price is 17. https://ethgasstation.info/ The value can change greatly depending on the time of day. It may be 2 or 10 or 50 🙃. Be careful. So, the average cost will be: Deployment = 1 697 092 * 17 = 28 850 564 gwei = 0,028850564 ETH
mint = 88 753 * 17 = 1 508 801 gwei = 0,001508801 ETH
mintByOwner = 91 060 * 17 = 1 548 020 gwei = 0,001548020 ETH
setBaseURI = 32 153 * 17 = 546 601 gwei = 0,000546601 ETH
withdraw = 30 421 * 17 = 517 157 gwei = 0,000517157 ETH Now the ETH/USD price is $1 592, it means that deployment to mainnet will cost about $46 and calling a function will cost about $2.4. mint Creating images and metadata for NFT Step 6. Images and metadata for NFTs can be stored on your server or in . IPFS We will cover the first case. Assume, that you have a domain https://my-domain.com All NFT images will store here: https://my-domain.com/collection/assets/ All metadata here: https://my-domain.com/collection/metadata/ So, the base URI for our smartcontract will be https://my-domain.com/collection/metadata/ In our smartcontract by default all token URI’s will be counted from 0. Therefore, files for metadata should be like this: 0.json
1.json
....
1234.json If you use function, then you can change the name of the file for specific NFT, and it can be like this: mintByOwner custom.json Upload NFT images on your server. They should be available by links: https://my-domain.com/collection/assets/0.png
https://my-domain.com/collection/assets/1.png
https://my-domain.com/collection/assets/2.png Now create metadata for NFT’s. Here is an example of one file : 0.json {
    "name": "Test NFT #0",
    "image": "https://my-domain.com/collection/assets/0.png"
} Pay attention, that in we have defined the link to the image, which has been upoaded to the server. image about opensea metadata and available values in it. Read more Upload your metadata files, so they should be available by links: https://my-domain.com/collection/metadata/0.json
https://my-domain.com/collection/metadata/1.json
https://my-domain.com/collection/metadata/2.json Step 7. Deploy and verify smartcontract Everything is ready for deployment. Take a look on our , we’ve specified as tasks/deploy.ts baseUri https://my-domain.com/collection/metadata/ This is because all our metadata is available by this address. Here you can change the and the of the collection. name symbol In command line run: npx hardhat deploy --network goerli This command will deploy smartcontract to Goerli network. If you want to deploy to mainnet, you can run: npx hardhat deploy --network mainnet All these networks were described on file. hardhat.config.ts After the deployment you will get the following in your console: My smartcontract address is: 0xc191B6505B16EBe5D776fb30EFbfe41A9252023a From now, it is available on etherscan testnet: https://goerli.etherscan.io/address/0xc191B6505B16EBe5D776fb30EFbfe41A9252023a We need to verify our smartcontract, so everyone can check the code. Wait about 5 minutes and try to verify it. If you get an error while verifying, don’t worry, just try to wait more time. In Mainnet I was waiting for 10–15 minutes. In general verify function looks like this: npx hardhat verify --network <YOUR_NETWORK> <DEPLOYED_CONTRACT_ADDRESS> <arg1> <arg2> <argn> Let’s try to determine, what to specify in our verify function: <YOUR_NETWORK> - goerli <DEPLOYED_CONTRACT_ADDRESS> will be my contract address 0xc191B6505B16EBe5D776fb30EFbfe41A9252023a <arg1> — this is our base URI. You will find it in tasks/deploy.ts "https://my-domain.com/collection/metadata/" <arg2> — name of the token collection, that was specified in deployment: "My ERC721 name" <arg3> — symbol of the token collection, that was specified in deployment: "MyERC721Symbol" Arguments should be the same, that were in !!! tasks/deploy.ts So, in command line I will run: npx hardhat verify --network goerli 0xc191B6505B16EBe5D776fb30EFbfe41A9252023a "https://my-domain.com/collection/metadata/" "My ERC721 name" "MyERC721Symbol" The result should be the next: On you can check the code of deployed smartcontract. this page 🥳We have finished with the smartcontract. Here is the , where you can find all the code. repo Step 8. Create demo website for minting This will be our second project . erc721-mint For demo website I will use . NextJS To speed up the development clone my repository: https://github.com/gapon2401/erc721-mint Install all dependencies: yarn install Open file and fill in the variables: .env — address of your smartcontract from the paragraph Deploy and verify smartcontract. NEXT_PUBLIC_SMARTCONTRACT_ADDRESS — the network, where your smartcontract was deployed. We need this to switch the network. Specify , because we have deployed our smartcontact there. NEXT_PUBLIC_SMARTCONTRACT_NETWORK goerli — network endpoint. You can use to get the url. NEXT_PUBLIC_SMARTCONTRACT_INFURA_URL https://infura.io Go to your dashboard, select your project and copy : Api Key In our first smartcontract project open the file: erc721 artifacts/contracts/ERC721Contract.sol/ERC721Contract.json Copy : abi In current project open the file: erc721-mint src/components/smartcontract.ts Replace the value. abi Everything is done! 🎉 You can run the project and try to use it! yarn dev In the next section I will cover the main components. Step 9 (optional). Deep dive and customize Take a look on main components: src/components/smartcontract.ts Contains information about the smartcontract. It's better to dynamically load this file from the server, because we want our web page loads as soon as possible. In this demo mint form appears after the page loads.
2. This component communicates with blockchain. There are some functions and variables stored in React Context: src/components/Web3Provider.tsx - has user connected the wallet or not connected - the state of reconnecting isConnecting - function for connecting to network connect() – function for reconnecting. Cached provider will be used, that was selected by user at the last time reconnect() – function for disconnecting network – selected by user disconnect() : goerli, mainnet etc network – provider for communicating with the wallet: metamask, ledger, tokenary, etc provider - the owner of the wallet signer – ID of the selected network chainId – your wallet address accountId - error message for web3Modal error This component displays form for minting.
Function is called after the user clicks on the mint button.
Now look at the code: src/components/MintForm.tsx mint() const transactionResponse = await Contract.mint({ 
  value: ethers.utils.parseEther('0.1'), 
}) We are calling function from the smartcontract and send 0.1 ETH to it, because this function requires exactly that value. mint What if we want to call mintByOwner ? We can do it like this: const transactionResponse = await Contract.mintByOwner( '0x01234566', 'token_uri' ) But pay attention, that this function can be called only by the owner of the contract. Why? We have used modifier in smartcontract: onlyOwner function mintByOwner(address to, string calldata tokenUri) external onlyOwner A few more words about that function. - this is the address, for which you want to mint token. Make sure to write full address. 0x01234566 - this is custom token URI. In our deployed smartcontract the full address to token metadata looks like: token_uri ${baseUri + token_uri}.json Remember, we have specified : baseUri https://my-domain.com/collection/metadata/ So, the full address to metadata with token URI equals will be: token_url https://my-domain.com/collection/metadata/token_url.json Also, we don't need to pay for this transaction, except gas price. Function . prepareNetwork() On first connection this function can propose to change the network. In this function are used only and networks. You can change it, if you need, here: goerli mainnet chainId: smartContract.network === 'goerli' ? '0x5' : '0x1', Function . getBalanceOf This function checks is it enough money on the wallet to make a transaction. In the file you may find commented code in two places: /* reconnect ,*/ and /* Reconnect to the wallet */ 
// useEffect(() => {
 //   ;(async () => {
 //     await reconnect()
 //   })()
 // }, [reconnect]) Uncomment it to make reconnections every time the page reloads. Thank you for reading! ❤

Create, Deploy and Mint Smart Contract (ERC-721) with NodeJS + Hardhat + Walletconnect + Web3modal

Stories, News & Mentions about WEB3PRO

Web3pro’s Stories on HackerNoon