DEV Community: Haardik

Build your own Decentralized Exchange! Use the xy=k AMM curve on Ethereum using Solidity, ethers.js, Next.js, and Web3Modal

Haardik — Sun, 15 May 2022 08:20:37 +0000

DeFi-Exchange

Now its time for you to launch a DeFi Exchange for your Crypto Dev tokens

Requirements

Build an exhange with only one asset pair (Eth <> Crypto Dev)
Your Decentralized Exchange should take a fees of 1% on swaps
When user adds liquidity, they should be given Crypto Dev LP tokens (Liquidity Provider tokens)
CD LP tokens should be given propotional to the Ether user is willing to add to the liquidity

Lets start building 🚀

Prerequisites

You have completed the ICO tutorial
You have completed the Defi Exchange Theory Tutorial
You have completed the Mixed Topics Tutorial

Smart Contract

To build the smart contract we would be using Hardhat.
Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. In simple words you can write your smart contract, deploy them, run tests, and debug your code.

To setup a Hardhat project, Open up a terminal and execute these commands

  mkdir hardhat-tutorial
  cd hardhat-tutorial
  npm init --yes
  npm install --save-dev hardhat

In the same directory where you installed Hardhat run:

  npx hardhat

Select Create a basic sample project
Press enter for the already specified Hardhat Project root
Press enter for the question on if you want to add a .gitignore
Press enter for Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?
- Now you have a hardhat project ready to go!
- If you are not on mac, please do this extra step and install these libraries as well :)

  npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

In the same terminal now install @openzeppelin/contracts as we would be importing Openzeppelin's ERC20 Contract in our Exchange contract

  npm install @openzeppelin/contracts

Create a new file inside the contracts directory called Exchange.sol. In this tutorial we would cover each part of the contract seperately

First lets start by importing ERC20.sol
We imported ERC20.sol because our Exchange needs to mint and create Crypto Dev LP tokens thats why it needs to inherit ERC20.sol

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

  import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

  contract Exchange is ERC20 {
  }

Now lets create a constructor for our contract
It takes the address of the _CryptoDevToken that you deployed in the ICO tutorial as an input param
It then checks if the address is a null address
After all the checks, it assigns the value to the input param to the cryptoDevTokenAddress variable
Constructor also sets the name and symbol for our Crypto Dev LP token

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

  import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

  contract Exchange is ERC20 {

      address public cryptoDevTokenAddress;

      // Exchange is inheriting ERC20, becase our exchange would keep track of Crypto Dev LP tokens
      constructor(address _CryptoDevtoken) ERC20("CryptoDev LP Token", "CDLP") {
          require(_CryptoDevtoken != address(0), "Token address passed is a null address");
          cryptoDevTokenAddress = _CryptoDevtoken;
      }
  }

Time to create a function to get reserves of the Eth and Crypto Dev tokens held by the contract.
Eth reserve as we all know would be equal to the balance of the contract and can be found using address(this).balance so lets just create a function only for getting reserves of the Crypto Dev tokens
We know that the Crypto Dev Token contract that we deployed is an ERC20
So we can just call the balanceOf to check the balance of CryptoDev Tokens that the contract address holds

  /**
  * @dev Returns the amount of `Crypto Dev Tokens` held by the contract
  */
  function getReserve() public view returns (uint) {
      return ERC20(cryptoDevTokenAddress).balanceOf(address(this));
  }

Time to create an addLiquidity function which would add liquidity in the form of Ether and Crypto Dev tokens to our contract
If cryptoDevTokenReserve is zero it means that it is the first time someone is adding Crypto Dev tokens and Ether to the contract
When the user is adding initial liquidity we dont have to maintain any ratio because we dont have any liquidity. So we accept any amount of tokens that user has sent with the initial call
If cryptoDevTokenReserve is not zero, then we have to make sure that when someone adds the liquidity it doesnt impact the price which the market currently has
To ensure this, we maintain a ratio which has to remain constant
Ratio is (cryptoDevTokenAmount user can add/cryptoDevTokenReserve in the contract) = (Eth Sent by the user/Eth Reserve in the contract)
This ratio decides how much Crypto Dev tokens user can supply given a certain amount of Eth
When user adds liquidity, we need to provide him with some LP tokens because we need to keep track of the amount of liquiidty he has supplied to the contract
The amount of LP tokens that get minted to the user are propotional to the Eth supplied by the user
In the inital liquidity case, when there is no liquidity: The amount of LP tokens that would be minted to the user is equal to the Eth balance of the contract (because balance is equal to the Eth sent by the user in the addLiquidity call)
When there is already liquidity in the contract, the amount of LP tokens that get minted is based on a ratio.
The ratio is (LP tokens to be sent to the user (liquidity) / totalSupply of LP tokens in contract) = (Eth sent by the user) / (Eth reserve in the contract)

/**
* @dev Adds liquidity to the exchange.
*/
function addLiquidity(uint _amount) public payable returns (uint) {
    uint liquidity;
    uint ethBalance = address(this).balance;
    uint cryptoDevTokenReserve = getReserve();
    ERC20 cryptoDevToken = ERC20(cryptoDevTokenAddress);
    /*
        If the reserve is empty, intake any user supplied value for
        `Ether` and `Crypto Dev` tokens because there is no ratio currently
    */
    if(cryptoDevTokenReserve == 0) {
        // Transfer the `cryptoDevToken` from the user's account to the contract
        cryptoDevToken.transferFrom(msg.sender, address(this), _amount);
        // Take the current ethBalance and mint `ethBalance` amount of LP tokens to the user.
        // `liquidity` provided is equal to `ethBalance` because this is the first time user
        // is adding `Eth` to the contract, so whatever `Eth` contract has is equal to the one supplied
        // by the user in the current `addLiquidity` call
        // `liquidity` tokens that need to be minted to the user on `addLiquidity` call should always be proportional
        // to the Eth specified by the user
        liquidity = ethBalance;
        _mint(msg.sender, liquidity);
        // _mint is ERC20.sol smart contract function to mint ERC20 tokens
    } else {
        /*
            If the reserve is not empty, intake any user supplied value for
            `Ether` and determine according to the ratio how many `Crypto Dev` tokens
            need to be supplied to prevent any large price impacts because of the additional
            liquidity
        */
        // EthReserve should be the current ethBalance subtracted by the value of ether sent by the user
        // in the current `addLiquidity` call
        uint ethReserve =  ethBalance - msg.value;
        // Ratio should always be maintained so that there are no major price impacts when adding liquidity
        // Ratio here is -> (cryptoDevTokenAmount user can add/cryptoDevTokenReserve in the contract) = (Eth Sent by the user/Eth Reserve in the contract);
        // So doing some maths, (cryptoDevTokenAmount user can add) = (Eth Sent by the user * cryptoDevTokenReserve /Eth Reserve);
        uint cryptoDevTokenAmount = (msg.value * cryptoDevTokenReserve)/(ethReserve);
        require(_amount >= cryptoDevTokenAmount, "Amount of tokens sent is less than the minimum tokens required");
        // transfer only (cryptoDevTokenAmount user can add) amount of `Crypto Dev tokens` from users account
        // to the contract
        cryptoDevToken.transferFrom(msg.sender, address(this), cryptoDevTokenAmount);
        // The amount of LP tokens that would be sent to the user should be propotional to the liquidity of
        // ether added by the user
        // Ratio here to be maintained is ->
        // (LP tokens to be sent to the user (liquidity)/ totalSupply of LP tokens in contract) = (Eth sent by the user)/(Eth reserve in the contract)
        // by some maths -> liquidity =  (totalSupply of LP tokens in contract * (Eth sent by the user))/(Eth reserve in the contract)
        liquidity = (totalSupply() * msg.value)/ ethReserve;
        _mint(msg.sender, liquidity);
    }
     return liquidity;
}

Now lets create a function for removing liquidity from the contract.
The amount of ether that would be sent back to the user would be based on a ratio
Ratio is (Eth sent back to the user) / (current Eth reserve) = (amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
The amount of Crypto Dev tokens that would be sent back to the user would also be based on a ratio
Ratio is (Crypto Dev sent back to the user) / (current Crypto Dev token reserve) = (amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
The amount of LP tokens that user would use to remove liquidity would be burnt

  /** 
  * @dev Returns the amount Eth/Crypto Dev tokens that would be returned to the user
  * in the swap
  */
  function removeLiquidity(uint _amount) public returns (uint , uint) {
      require(_amount > 0, "_amount should be greater than zero");
      uint ethReserve = address(this).balance;
      uint _totalSupply = totalSupply();
      // The amount of Eth that would be sent back to the user is based
      // on a ratio
      // Ratio is -> (Eth sent back to the user) / (current Eth reserve)
      // = (amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
      // Then by some maths -> (Eth sent back to the user)
      // = (current Eth reserve * amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
      uint ethAmount = (ethReserve * _amount)/ _totalSupply;
      // The amount of Crypto Dev token that would be sent back to the user is based
      // on a ratio
      // Ratio is -> (Crypto Dev sent back to the user) / (current Crypto Dev token reserve)
      // = (amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
      // Then by some maths -> (Crypto Dev sent back to the user)
      // = (current Crypto Dev token reserve * amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
      uint cryptoDevTokenAmount = (getReserve() * _amount)/ _totalSupply;
      // Burn the sent LP tokens from the user's wallet because they are already sent to
      // remove liquidity
      _burn(msg.sender, _amount);
      // Transfer `ethAmount` of Eth from user's wallet to the contract
      payable(msg.sender).transfer(ethAmount);
      // Transfer `cryptoDevTokenAmount` of Crypto Dev tokens from the user's wallet to the contract
      ERC20(cryptoDevTokenAddress).transfer(msg.sender, cryptoDevTokenAmount);
      return (ethAmount, cryptoDevTokenAmount);
  }

Next lets implement the swap functionality
Swap would go two ways. One way would be Eth to Crypto Dev tokens and other would be Crypto Dev to Eth
Its important for us to determine: Given x amount of Eth/Crypto Dev token sent by the user, how many Eth/Crypto Dev tokens would he receive from the swap?

So let's create a function which calculates this:

We will charge 1%. This means the amount of input tokens with fees would equal Input amount with fees = (input amount - (1*(input amount)/100)) = ((input amount)*99)/100
We need to follow the concept of XY = K curve
We need to make sure (x + Δx) * (y - Δy) = x * y, so the final formula is Δy = (y * Δx) / (x + Δx);
Δy in our case is tokens to be received, Δx = ((input amount)*99)/100, x = Input Reserve, y = Output Reserve
Input Reserve and Ouput Reserve would depend on which swap we are implementing. Eth to Crypto Dev token or vice versa

/**
* @dev Returns the amount Eth/Crypto Dev tokens that would be returned to the user
* in the swap
*/
function getAmountOfTokens(
    uint256 inputAmount,
    uint256 inputReserve,
    uint256 outputReserve
) public pure returns (uint256) {
    require(inputReserve > 0 && outputReserve > 0, "invalid reserves");
    // We are charging a fee of `1%`
    // Input amount with fee = (input amount - (1*(input amount)/100)) = ((input amount)*99)/100
    uint256 inputAmountWithFee = inputAmount * 99;
    // Because we need to follow the concept of `XY = K` curve
    // We need to make sure (x + Δx) * (y - Δy) = x * y
    // So the final formula is Δy = (y * Δx) / (x + Δx)
    // Δy in our case is `tokens to be received`
    // Δx = ((input amount)*99)/100, x = inputReserve, y = outputReserve
    // So by putting the values in the formulae you can get the numerator and denominator
    uint256 numerator = inputAmountWithFee * outputReserve;
    uint256 denominator = (inputReserve * 100) + inputAmountWithFee;
    return numerator / denominator;
}

Now lets implement a function to swap Ether for Crypto Dev tokens

/** 
* @dev Swaps Eth for CryptoDev Tokens
*/
function ethToCryptoDevToken(uint _minTokens) public payable {
    uint256 tokenReserve = getReserve();
    // call the `getAmountOfTokens` to get the amount of Crypto Dev tokens
    // that would be returned to the user after the swap
    // Notice that the `inputReserve` we are sending is equal to  
    // `address(this).balance - msg.value` instead of just `address(this).balance`
    // because `address(this).balance` already contains the `msg.value` user has sent in the given call
    // so we need to subtract it to get the actual input reserve
    uint256 tokensBought = getAmountOfTokens(
        msg.value,
        address(this).balance - msg.value,
        tokenReserve
    );

    require(tokensBought >= _minTokens, "insufficient output amount");
    // Transfer the `Crypto Dev` tokens to the user
    ERC20(cryptoDevTokenAddress).transfer(msg.sender, tokensBought);
}

Now lets implement a function to swap Crypto Dev tokens to Ether

/** 
* @dev Swaps CryptoDev Tokens for Eth
*/
function cryptoDevTokenToEth(uint _tokensSold, uint _minEth) public {
    uint256 tokenReserve = getReserve();
    // call the `getAmountOfTokens` to get the amount of Eth
    // that would be returned to the user after the swap
    uint256 ethBought = getAmountOfTokens(
        _tokensSold,
        tokenReserve,
        address(this).balance
    );
    require(ethBought >= _minEth, "insufficient output amount");
    // Transfer `Crypto Dev` tokens from the user's address to the contract
    ERC20(cryptoDevTokenAddress).transferFrom(
        msg.sender,
        address(this),
        _tokensSold
    );
    // send the `ethBought` to the user from the contract
    payable(msg.sender).transfer(ethBought);
}

Your final contract should look like this:

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

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract Exchange is ERC20 {

    address public cryptoDevTokenAddress;

    // Exchange is inheriting ERC20, becase our exchange would keep track of Crypto Dev LP tokens
    constructor(address _CryptoDevtoken) ERC20("CryptoDev LP Token", "CDLP") {
        require(_CryptoDevtoken != address(0), "Token address passed is a null address");
        cryptoDevTokenAddress = _CryptoDevtoken;
    }

    /** 
    * @dev Returns the amount of `Crypto Dev Tokens` held by the contract
    */
    function getReserve() public view returns (uint) {
        return ERC20(cryptoDevTokenAddress).balanceOf(address(this));
    }

    /**
    * @dev Adds liquidity to the exchange.
    */
    function addLiquidity(uint _amount) public payable returns (uint) {
        uint liquidity;
        uint ethBalance = address(this).balance;
        uint cryptoDevTokenReserve = getReserve();
        ERC20 cryptoDevToken = ERC20(cryptoDevTokenAddress);
        /* 
            If the reserve is empty, intake any user supplied value for 
            `Ether` and `Crypto Dev` tokens because there is no ratio currently
        */
        if(cryptoDevTokenReserve == 0) {
            // Transfer the `cryptoDevToken` address from the user's account to the contract
            cryptoDevToken.transferFrom(msg.sender, address(this), _amount);
            // Take the current ethBalance and mint `ethBalance` amount of LP tokens to the user.
            // `liquidity` provided is equal to `ethBalance` because this is the first time user 
            // is adding `Eth` to the contract, so whatever `Eth` contract has is equal to the one supplied 
            // by the user in the current `addLiquidity` call
            // `liquidity` tokens that need to be minted to the user on `addLiquidity` call shouls always be proportional
            // to the Eth specified by the user
            liquidity = ethBalance;
            _mint(msg.sender, liquidity);
        } else {
            /* 
                If the reserve is not empty, intake any user supplied value for 
                `Ether` and determine according to the ratio how many `Crypto Dev` tokens
                need to be supplied to prevent any large price impacts because of the additional
                liquidity
            */
            // EthReserve should be the current ethBalance subtracted by the value of ether sent by the user
            // in the current `addLiquidity` call
            uint ethReserve =  ethBalance - msg.value;
            // Ratio should always be maintained so that there are no major price impacts when adding liquidity
            // Ration here is -> (cryptoDevTokenAmount user can add/cryptoDevTokenReserve in the contract) = (Eth Sent by the user/Eth Reserve in the contract);
            // So doing some maths, (cryptoDevTokenAmount user can add) = (Eth Sent by the user * cryptoDevTokenReserve /Eth Reserve);
            uint cryptoDevTokenAmount = (msg.value * cryptoDevTokenReserve)/(ethReserve);
            require(_amount >= cryptoDevTokenAmount, "Amount of tokens sent is less than the minimum tokens required");
            // transfer only (cryptoDevTokenAmount user can add) amount of `Crypto Dev tokens` from users account
            // to the contract
            cryptoDevToken.transferFrom(msg.sender, address(this), cryptoDevTokenAmount);
            // The amount of LP tokens that would be sent to the user should be propotional to the liquidity of
            // ether added by the user
            // Ratio here to be maintained is -> 
            // (lp tokens to be sent to the user (liquidity)/ totalSupply of LP tokens in contract) = (Eth sent by the user)/(Eth reserve in the contract)
            // by some maths -> liquidity =  (totalSupply of LP tokens in contract * (Eth sent by the user))/(Eth reserve in the contract)
            liquidity = (totalSupply() * msg.value)/ ethReserve;
            _mint(msg.sender, liquidity);
        }
         return liquidity;
    }

    /** 
    * @dev Returns the amount Eth/Crypto Dev tokens that would be returned to the user
    * in the swap
    */
    function removeLiquidity(uint _amount) public returns (uint , uint) {
        require(_amount > 0, "_amount should be greater than zero");
        uint ethReserve = address(this).balance;
        uint _totalSupply = totalSupply();
        // The amount of Eth that would be sent back to the user is based
        // on a ratio 
        // Ratio is -> (Eth sent back to the user/ Current Eth reserve)  
        // = (amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
        // Then by some maths -> (Eth sent back to the user) 
        // = (current Eth reserve * amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
        uint ethAmount = (ethReserve * _amount)/ _totalSupply;
        // The amount of Crypto Dev token that would be sent back to the user is based
        // on a ratio 
        // Ratio is -> (Crypto Dev sent back to the user) / (current Crypto Dev token reserve)
        // = (amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
        // Then by some maths -> (Crypto Dev sent back to the user) 
        // = (current Crypto Dev token reserve * amount of LP tokens that user wants to withdraw) / (total supply of LP tokens)
        uint cryptoDevTokenAmount = (getReserve() * _amount)/ _totalSupply;
        // Burn the sent `LP` tokens from the user's wallet because they are already sent to 
        // remove liquidity
        _burn(msg.sender, _amount);
        // Transfer `ethAmount` of Eth from user's wallet to the contract
        payable(msg.sender).transfer(ethAmount);
        // Transfer `cryptoDevTokenAmount` of `Crypto Dev` tokens from the user's wallet to the contract 
        ERC20(cryptoDevTokenAddress).transfer(msg.sender, cryptoDevTokenAmount);
        return (ethAmount, cryptoDevTokenAmount);
    }

    /** 
    * @dev Returns the amount Eth/Crypto Dev tokens that would be returned to the user
    * in the swap
    */
    function getAmountOfTokens(
        uint256 inputAmount,
        uint256 inputReserve,
        uint256 outputReserve
    ) public pure returns (uint256) {
        require(inputReserve > 0 && outputReserve > 0, "invalid reserves");
        // We are charging a fee of `1%`
        // Input amount with fee = (input amount - (1*(input amount)/100)) = ((input amount)*99)/100
        uint256 inputAmountWithFee = inputAmount * 99;
        // Because we need to follow the concept of `XY = K` curve
        // We need to make sure (x + Δx) * (y - Δy) = x * y
        // So the final formula is Δy = (y * Δx) / (x + Δx)
        // Δy in our case is `tokens to be received`
        // Δx = ((input amount)*99)/100, x = inputReserve, y = outputReserve
        // So by putting the values in the formulae you can get the numerator and denominator
        uint256 numerator = inputAmountWithFee * outputReserve;
        uint256 denominator = (inputReserve * 100) + inputAmountWithFee;
        return numerator / denominator;
    }

    /** 
    * @dev Swaps Eth for CryptoDev Tokens
    */
    function ethToCryptoDevToken(uint _minTokens) public payable {
        uint256 tokenReserve = getReserve();
        // call the `getAmountOfTokens` to get the amount of Crypto Dev tokens
        // that would be returned to the user after the swap
        // Notice that the `inputReserve` we are sending is equal to  
        // `address(this).balance - msg.value` instead of just `address(this).balance`
        // because `address(this).balance` already contains the `msg.value` user has sent in the given call
        // so we need to subtract it to get the actual input reserve
        uint256 tokensBought = getAmountOfTokens(
            msg.value,
            address(this).balance - msg.value,
            tokenReserve
        );

        require(tokensBought >= _minTokens, "insufficient output amount");
        // Transfer the `Crypto Dev` tokens to the user
        ERC20(cryptoDevTokenAddress).transfer(msg.sender, tokensBought);
    }


    /** 
    * @dev Swaps CryptoDev Tokens for Eth
    */
    function cryptoDevTokenToEth(uint _tokensSold, uint _minEth) public {
        uint256 tokenReserve = getReserve();
        // call the `getAmountOfTokens` to get the amount of Eth
        // that would be returned to the user after the swap
        uint256 ethBought = getAmountOfTokens(
            _tokensSold,
            tokenReserve,
            address(this).balance
        );
        require(ethBought >= _minEth, "insufficient output amount");
        // Transfer `Crypto Dev` tokens from the user's address to the contract
        ERC20(cryptoDevTokenAddress).transferFrom(
            msg.sender,
            address(this),
            _tokensSold
        );
        // send the `ethBought` to the user from the contract
        payable(msg.sender).transfer(ethBought);
    }
}

Now we would install dotenv package to be able to import the env file and use it in our config. Open up a terminal pointing at hardhat-tutorial directory and execute this command

  npm install dotenv

Now create a .env file in the hardhat-tutorial folder and add the following lines, use the instructions in the comments to get your Alchemy API Key URL and Rinkeby Private Key. Make sure that the account from which you get your Rinkeby private key is funded with Rinkeby Ether.

  // Go to https://www.alchemyapi.io, sign up, create
  // a new App in its dashboard and select the network as Rinkeby, 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 RINKEBY 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
  RINKEBY_PRIVATE_KEY="add-the-rinkeby-private-key-here"

Lets also create a constants folder to keep track of any constants we have. Under the hardhat-tutorial folder create a new folder named constants and under the constants folder create a new file index.js
Inside the index.js file add the following lines of code. Remember to replace ADDRESS-OF-CRYPTO-DEV-TOKEN with the contract address of the Crypto Dev token contract that you deployed in the ICO tutorial

  const CRYPTO_DEV_TOKEN_CONTRACT_ADDRESS = "ADDRESS-OF-CRYPTO-DEV-TOKEN";

  module.exports = { CRYPTO_DEV_TOKEN_CONTRACT_ADDRESS };

Lets deploy the contract to rinkeby network. Create a new file named deploy.js under the scripts folder
Now we would write some code to deploy the contract in deploy.js file.

  const { ethers } = require("hardhat");
  require("dotenv").config({ path: ".env" });
  const { CRYPTO_DEV_TOKEN_CONTRACT_ADDRESS } = require("../constants");

  async function main() {
    const cryptoDevTokenAddress = CRYPTO_DEV_TOKEN_CONTRACT_ADDRESS;
    /*
    A ContractFactory in ethers.js is an abstraction used to deploy new smart contracts,
    so exchangeContract here is a factory for instances of our Exchange contract.
    */
    const exchangeContract = await ethers.getContractFactory("Exchange");

    // here we deploy the contract
    const deployedExchangeContract = await exchangeContract.deploy(
      cryptoDevTokenAddress
    );
    await deployedExchangeContract.deployed();

    // print the address of the deployed contract
    console.log("Exchange Contract Address:", deployedExchangeContract.address);
  }

  // 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 open the hardhat.config.js file, we would add the rinkeby network here so that we can deploy our contract to rinkeby. Replace all the lines in the hardhart.config.js file with the given below lines

  require("@nomiclabs/hardhat-waffle");
  require("dotenv").config({ path: ".env" });

  const ALCHEMY_API_KEY_URL = process.env.ALCHEMY_API_KEY_URL;

  const RINKEBY_PRIVATE_KEY = process.env.RINKEBY_PRIVATE_KEY;

  module.exports = {
    solidity: "0.8.4",
    networks: {
      rinkeby: {
        url: ALCHEMY_API_KEY_URL,
        accounts: [RINKEBY_PRIVATE_KEY],
      },
    },
  };

Compile the contract, open up a terminal pointing at hardhat-tutorial directory and execute this command

  npx hardhat compile

To deploy, open up a terminal pointing athardhat-tutorial directory and execute this command

   npx hardhat run scripts/deploy.js --network rinkeby

Save the Exchange Contract Address that was printed on your terminal in your notepad, you would need it further down in the tutorial.

Website

To develop the website we would be using React and Next Js. React is a javascript framework which is used to make websites and Next Js is built on top of React.
First, You would need to create a new next app. Your folder structure should look something like

     - DeFi-Exchange
         - hardhat-tutorial
         - my-app

To create this my-app, in the terminal point to DeFi-Exchange folder and type

    npx create-next-app@latest

and press enter for all the questions

Now to run the app, execute these commands in the terminal

  cd my-app
  npm run dev

Now go to http://localhost:3000, your app should be running 🤘
Now lets install Web3Modal library(https://github.com/Web3Modal/web3modal). Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc), You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane.
Open up a terminal pointing atmy-app directory and execute this command

    npm install web3modal

In the same terminal also install ethers.js

  npm i ethers

In your public folder, download this image and rename it to cryptodev.svg.
Now go to styles folder and replace all the contents of Home.modules.css file with the following code, this would add some styling to your dapp:

  .main {
    min-height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
  }

  .footer {
    display: flex;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    justify-content: center;
    align-items: center;
  }

  .image {
    width: 70%;
    height: 50%;
    margin-left: 20%;
  }

  .input {
    width: 200px;
    height: 100%;
    padding: 1%;
    margin: 2%;
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
  }

  .title {
    font-size: 2rem;
    margin: 2rem 0;
  }

  .description {
    line-height: 1;
    margin: 2%;
    font-size: 1.2rem;
  }

  .button {
    border-radius: 4px;
    background-color: purple;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 5px;
    width: 100px;
    cursor: pointer;
    margin: 2%;
  }

  .inputDiv {
    width: 200px;
    height: 100%;
    padding: 1%;
    margin: 2%;
    border: lightslategray;
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
  }
  .select {
    border-radius: 4px;
    font-size: 15px;
    padding: 5px;
    width: 175px;
    cursor: pointer;
    margin: 2%;
  }

  .button1 {
    border-radius: 4px;
    background-color: blue;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 5px;
    width: 100px;
    cursor: pointer;
    margin: 2%;
  }
  @media (max-width: 1000px) {
    .main {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

Now lets create a constants folder to keep track of any constants we might have. Create a constants folder under my-app folder and inside the constants folder create a file names index.js
Paste the following code.
- Replace ABI-CRYPTO-DEV-TOKEN-CONTRACT with the abi of the Crypto Dev token contract that you deployed in the ICO tutorial.
- Replace ADDRESS-OF-CRYPTO-DEV-TOKEN-CONTRACT with the address of the Crypto Dev token contract that you deployed in the ICO tutorial
- Replace ABI-EXCHANGE-CONTRACT with the abi of the Exchange Contract. To get the abi for your contract, go to your hardhat-tutorial/artifacts/contracts/Exchange.sol folder and from your Exchange.json file get the array marked under the "abi" key.
- Replace ADDRESS-EXCHANGE-CONTRACT with the address of the exchange contract that you deployed above and saved to your notepad
```
export const TOKEN_CONTRACT_ABI = "ABI-CRYPTO-DEV-TOKEN-CONTRACT";
export const TOKEN_CONTRACT_ADDRESS =
  "ADDRESS-OF-CRYPTO-DEV-TOKEN-CONTRACT";
export const EXCHANGE_CONTRACT_ABI = "ABI-EXCHANGE-CONTRACT";
export const EXCHANGE_CONTRACT_ADDRESS = "ADDRESS-EXCHANGE-CONTRACT";
```
Now we would create some utility files which would help us to better interact with the contract. Create a utils folder inside the my-app folder and inside the folder create 4 files: addLiquidity.js, removeLiquidity.js, getAmounts.js, and swap.js
Lets start by writing some code in getAmounts.js. This file is used to retrieve balances and reserves for assets

  import { Contract } from "ethers";
  import {
    EXCHANGE_CONTRACT_ABI,
    EXCHANGE_CONTRACT_ADDRESS,
    TOKEN_CONTRACT_ABI,
    TOKEN_CONTRACT_ADDRESS,
  } from "../constants";

  /**
   * getEtherBalance: Retrieves the ether balance of the user or the contract
   */
  export const getEtherBalance = async (
    provider,
    address,
    contract = false
  ) => {
    try {
      // If the caller has set the `contract` boolean to true, retrieve the balance of
      // ether in the `exchange contract`, if it is set to false, retrieve the balance
      // of the user's address
      if (contract) {
        const balance = await provider.getBalance(EXCHANGE_CONTRACT_ADDRESS);
        return balance;
      } else {
        const balance = await provider.getBalance(address);
        return balance;
      }
    } catch (err) {
      console.error(err);
      return 0;
    }
  };

  /**
   * getCDTokensBalance: Retrieves the Crypto Dev tokens in the account
   * of the provided `address`
   */
  export const getCDTokensBalance = async (provider, address) => {
    try {
      const tokenContract = new Contract(
        TOKEN_CONTRACT_ADDRESS,
        TOKEN_CONTRACT_ABI,
        provider
      );
      const balanceOfCryptoDevTokens = await tokenContract.balanceOf(address);
      return balanceOfCryptoDevTokens;
    } catch (err) {
      console.error(err);
    }
  };

  /**
   * getLPTokensBalance: Retrieves the amount of LP tokens in the account
   * of the provided `address`
   */
  export const getLPTokensBalance = async (provider, address) => {
    try {
      const exchangeContract = new Contract(
        EXCHANGE_CONTRACT_ADDRESS,
        EXCHANGE_CONTRACT_ABI,
        provider
      );
      const balanceOfLPTokens = await exchangeContract.balanceOf(address);
      return balanceOfLPTokens;
    } catch (err) {
      console.error(err);
    }
  };

  /**
   * getReserveOfCDTokens: Retrieves the amount of CD tokens in the
   * exchange contract address
   */
  export const getReserveOfCDTokens = async (provider) => {
    try {
      const exchangeContract = new Contract(
        EXCHANGE_CONTRACT_ADDRESS,
        EXCHANGE_CONTRACT_ABI,
        provider
      );
      const reserve = await exchangeContract.getReserve();
      return reserve;
    } catch (err) {
      console.error(err);
    }
  };

Lets now write some code for addLiquidity.js.

addLiquidity.js has two functions addLiquidity and calculateCD
addLiquidity is used to call the addLiquidity function in the contract to add liquidity
It also gets the Crypto Dev tokens approved for the contract by the user. The reason why Crypto Dev tokens need approval is because they are an ERC20 token. For the contract to withdraw an ERC20 from a user's account, it needs the approval from the user's account
calculateCD tells you for a given amount of Eth, how many Crypto Dev tokens can be added to the liquidity
We calculate this by maintaining a ratio. The ratio we follow is (amount of Crypto Dev tokens to be added) / (Crypto Dev tokens balance) = (Eth that would be added) / (Eth reserve in the contract)
So by maths we get (amount of Crypto Dev tokens to be added) = (Eth that would be added * Crypto Dev tokens balance) / (Eth reserve in the contract)
The ratio is needed so that adding liquidity doesn't largely impact the price
Note tx.wait() means we are waiting for the transaction to get mined

import { Contract, utils } from "ethers";
import {
  EXCHANGE_CONTRACT_ABI,
  EXCHANGE_CONTRACT_ADDRESS,
  TOKEN_CONTRACT_ABI,
  TOKEN_CONTRACT_ADDRESS,
} from "../constants";

/**
 * addLiquidity helps add liquidity to the exchange,
 * If the user is adding initial liquidity, user decides the ether and CD tokens he wants to add
 * to the exchange. If he is adding the liquidity after the initial liquidity has already been added
 * then we calculate the Crypto Dev tokens he can add, given the Eth he wants to add by keeping the ratios
 * constant
 */
export const addLiquidity = async (
  signer,
  addCDAmountWei,
  addEtherAmountWei
) => {
  try {
    // create a new instance of the token contract
    const tokenContract = new Contract(
      TOKEN_CONTRACT_ADDRESS,
      TOKEN_CONTRACT_ABI,
      signer
    );
    // create a new instance of the exchange contract
    const exchangeContract = new Contract(
      EXCHANGE_CONTRACT_ADDRESS,
      EXCHANGE_CONTRACT_ABI,
      signer
    );
    // Because CD tokens are an ERC20, user would need to give the contract allowance
    // to take the required number CD tokens out of his contract
    let tx = await tokenContract.approve(
      EXCHANGE_CONTRACT_ADDRESS,
      addCDAmountWei.toString()
    );
    await tx.wait();
    // After the contract has the approval, add the ether and cd tokens in the liquidity
    tx = await exchangeContract.addLiquidity(addCDAmountWei, {
      value: addEtherAmountWei,
    });
    await tx.wait();
  } catch (err) {
    console.error(err);
  }
};

/**
 * calculateCD calculates the CD tokens that need to be added to the liquidity
 * given `_addEtherAmountWei` amount of ether
 */
export const calculateCD = async (
  _addEther = "0",
  etherBalanceContract,
  cdTokenReserve
) => {
  // `_addEther` is a string, we need to convert it to a Bignumber before we can do our calculations
  // We do that using the `parseEther` function from `ethers.js`
  const _addEtherAmountWei = utils.parseEther(_addEther);
  // Ratio needs to be maintained when we add liquidty.
  // We need to let the user know for a specific amount of ether how many `CD` tokens
  // he can add so that the price impact is not large
  // The ratio we follow is (amount of Crypto Dev tokens to be added) / (Crypto Dev tokens balance) = (Eth that would be added) / (Eth reserve in the contract)
  // So by maths we get (amount of Crypto Dev tokens to be added) = (Eth that would be added * Crypto Dev tokens balance) / (Eth reserve in the contract)
  const cryptoDevTokenAmount = _addEtherAmountWei
    .mul(cdTokenReserve)
    .div(etherBalanceContract);
  return cryptoDevTokenAmount;
};

Now add some code to removeLiquidity.js

We have two functions here: One is removeLiquidity and the other is getTokensAfterRemove
removeLiquidity calls the removeLiquidity function from the contract, to remove the amount of LP tokens specified by the user
getTokensAfterRemove calulates the amount of Ether and CD tokens that would be sent back to the user after he removes a certain amount of LP tokens from the pool
The amount of Eth that would be sent back to the user after he withdraws the LP token is calculated based on a ratio,
Ratio is -> (amount of Eth that would be sent back to the user / Eth reserve) = (LP tokens withdrawn) / (total supply of LP tokens)
By some maths we get -> (amount of Eth that would be sent back to the user) = (Eth Reserve * LP tokens withdrawn) / (total supply of LP tokens)
Similarly we also maintain a ratio for the CD tokens, so here in our case
Ratio is -> (amount of CD tokens sent back to the user / CD Token reserve) = (LP tokens withdrawn) / (total supply of LP tokens)
Then (amount of CD tokens sent back to the user) = (CD token reserve * LP tokens withdrawn) / (total supply of LP tokens)

import { Contract, providers, utils, BigNumber } from "ethers";
import { EXCHANGE_CONTRACT_ABI, EXCHANGE_CONTRACT_ADDRESS } from "../constants";

/**
* removeLiquidity: Removes the `removeLPTokensWei` amount of LP tokens from
* liquidity and also the calculated amount of `ether` and `CD` tokens
*/
export const removeLiquidity = async (signer, removeLPTokensWei) => {
  // Create a new instance of the exchange contract
  const exchangeContract = new Contract(
    EXCHANGE_CONTRACT_ADDRESS,
    EXCHANGE_CONTRACT_ABI,
    signer
  );
  const tx = await exchangeContract.removeLiquidity(removeLPTokensWei);
  await tx.wait();
};

/**
* getTokensAfterRemove: Calculates the amount of `Eth` and `CD` tokens
* that would be returned back to user after he removes `removeLPTokenWei` amount
* of LP tokens from the contract
*/
export const getTokensAfterRemove = async (
  provider,
  removeLPTokenWei,
  _ethBalance,
  cryptoDevTokenReserve
) => {
  try {
    // Create a new instance of the exchange contract
    const exchangeContract = new Contract(
      EXCHANGE_CONTRACT_ADDRESS,
      EXCHANGE_CONTRACT_ABI,
      provider
    );
    // Get the total supply of `Crypto Dev` LP tokens
    const _totalSupply = await exchangeContract.totalSupply();
    // Here we are using the BigNumber methods of multiplication and division
    // The amount of Eth that would be sent back to the user after he withdraws the LP token
    // is calculated based on a ratio,
    // Ratio is -> (amount of Eth that would be sent back to the user / Eth reserve) = (LP tokens withdrawn) / (total supply of LP tokens)
    // By some maths we get -> (amount of Eth that would be sent back to the user) = (Eth Reserve * LP tokens withdrawn) / (total supply of LP tokens)
    // Similarly we also maintain a ratio for the `CD` tokens, so here in our case
    // Ratio is -> (amount of CD tokens sent back to the user / CD Token reserve) = (LP tokens withdrawn) / (total supply of LP tokens)
    // Then (amount of CD tokens sent back to the user) = (CD token reserve * LP tokens withdrawn) / (total supply of LP tokens)
    const _removeEther = _ethBalance.mul(removeLPTokenWei).div(_totalSupply);
    const _removeCD = cryptoDevTokenReserve
      .mul(removeLPTokenWei)
      .div(_totalSupply);
    return {
      _removeEther,
      _removeCD,
    };
  } catch (err) {
    console.error(err);
  }
};

Now it's time to write code for swap.js our last utils file

It has two functions getAmountOfTokenReceivedFromSwap and swapTokens
swapTokens swaps certain amount of Eth/Crypto Dev tokens with Crypto Dev/Eth tokens
If Eth has been selected by the user from the UI, it means that the user has Eth and he wants to swap it for a certain amount of Crypto Dev tokens
In this case we call the ethToCryptoDevToken function. Note that Eth is sent as a value in the function because the user is paying this Eth to the contract. Eth sent is not an input param value in this case
On the other hand, if Eth is not selected this means that the user wants to swap Crypto Dev tokens for Eth
Here we call the cryptoDevTokenToEth
getAmountOfTokensReceivedFromSwap is a function which calculates, given a certain amount of Eth/Crypto Dev tokens, how many Eth/Crypto Dev tokens would be sent back to the user
If Eth is selected it calls the getAmountOfTokens from the contract which takes in an input reserve and an output reserve. Here, input reserve would be the Eth balance of the contract and output reserve would be the Crypto Dev token reserve. Opposite would be true, if Eth is not selected

import { Contract } from "ethers";
import {
  EXCHANGE_CONTRACT_ABI,
  EXCHANGE_CONTRACT_ADDRESS,
  TOKEN_CONTRACT_ABI,
  TOKEN_CONTRACT_ADDRESS,
} from "../constants";

/*
    getAmountOfTokensReceivedFromSwap:  Returns the number of Eth/Crypto Dev tokens that can be received 
    when the user swaps `_swapAmountWei` amount of Eth/Crypto Dev tokens.
*/
export const getAmountOfTokensReceivedFromSwap = async (
  _swapAmountWei,
  provider,
  ethSelected,
  ethBalance,
  reservedCD
) => {
  // Create a new instance of the exchange contract
  const exchangeContract = new Contract(
    EXCHANGE_CONTRACT_ADDRESS,
    EXCHANGE_CONTRACT_ABI,
    provider
  );
  let amountOfTokens;
  // If `Eth` is selected this means our input value is `Eth` which means our input amount would be
  // `_swapAmountWei`, the input reserve would be the `ethBalance` of the contract and output reserve
  // would be the `Crypto Dev` token reserve
  if (ethSelected) {
    amountOfTokens = await exchangeContract.getAmountOfTokens(
      _swapAmountWei,
      ethBalance,
      reservedCD
    );
  } else {
    // If `Eth` is not selected this means our input value is `Crypto Dev` tokens which means our input amount would be
    // `_swapAmountWei`, the input reserve would be the `Crypto Dev` token reserve of the contract and output reserve
    // would be the `ethBalance`
    amountOfTokens = await exchangeContract.getAmountOfTokens(
      _swapAmountWei,
      reservedCD,
      ethBalance
    );
  }

  return amountOfTokens;
};

/*
  swapTokens: Swaps `swapAmountWei` of Eth/Crypto Dev tokens with `tokenToBeReceivedAfterSwap` amount of Eth/Crypto Dev tokens.
*/
export const swapTokens = async (
  signer,
  swapAmountWei,
  tokenToBeReceivedAfterSwap,
  ethSelected
) => {
  // Create a new instance of the exchange contract
  const exchangeContract = new Contract(
    EXCHANGE_CONTRACT_ADDRESS,
    EXCHANGE_CONTRACT_ABI,
    signer
  );
  const tokenContract = new Contract(
    TOKEN_CONTRACT_ADDRESS,
    TOKEN_CONTRACT_ABI,
    signer
  );
  let tx;
  // If Eth is selected call the `ethToCryptoDevToken` function else
  // call the `cryptoDevTokenToEth` function from the contract
  // As you can see you need to pass the `swapAmount` as a value to the function because
  // it is the ether we are paying to the contract, instead of a value we are passing to the function
  if (ethSelected) {
    tx = await exchangeContract.ethToCryptoDevToken(
      tokenToBeReceivedAfterSwap,
      {
        value: swapAmountWei,
      }
    );
  } else {
    // User has to approve `swapAmountWei` for the contract because `Crypto Dev` token
    // is an ERC20
    tx = await tokenContract.approve(
      EXCHANGE_CONTRACT_ADDRESS,
      swapAmountWei.toString()
    );
    await tx.wait();
    // call cryptoDevTokenToEth function which would take in `swapAmountWei` of `Crypto Dev` tokens and would
    // send back `tokenToBeReceivedAfterSwap` amount of `Eth` to the user
    tx = await exchangeContract.cryptoDevTokenToEth(
      swapAmountWei,
      tokenToBeReceivedAfterSwap
    );
  }
  await tx.wait();
};

Now its time for the final stages of our app, lets add some code to the pages/index.js file which next already gives you. Replace all the contents of the file with the following content

import { BigNumber, providers, utils } from "ethers";
import Head from "next/head";
import React, { useEffect, useRef, useState } from "react";
import Web3Modal from "web3modal";
import styles from "../styles/Home.module.css";
import { addLiquidity, calculateCD } from "../utils/addLiquidity";
import {
  getCDTokensBalance,
  getEtherBalance,
  getLPTokensBalance,
  getReserveOfCDTokens,
} from "../utils/getAmounts";
import {
  getTokensAfterRemove,
  removeLiquidity,
} from "../utils/removeLiquidity";
import { swapTokens, getAmountOfTokensReceivedFromSwap } from "../utils/swap";

export default function Home() {
  /** General state variables */
  // loading is set to true when the transaction is mining and set to false when
  // the transaction has mined
  const [loading, setLoading] = useState(false);
  // We have two tabs in this dapp, Liquidity Tab and Swap Tab. This variable
  // keeps track of which Tab the user is on. If it is set to true this means
  // that the user is on `liquidity` tab else he is on `swap` tab
  const [liquidityTab, setLiquidityTab] = useState(true);
  // This variable is the `0` number in form of a BigNumber
  const zero = BigNumber.from(0);
  /** Variables to keep track of amount */
  // `ethBalance` keeps track of the amount of Eth held by the user's account
  const [ethBalance, setEtherBalance] = useState(zero);
  // `reservedCD` keeps track of the Crypto Dev tokens Reserve balance in the Exchange contract
  const [reservedCD, setReservedCD] = useState(zero);
  // Keeps track of the ether balance in the contract
  const [etherBalanceContract, setEtherBalanceContract] = useState(zero);
  // cdBalance is the amount of `CD` tokens help by the users account
  const [cdBalance, setCDBalance] = useState(zero);
  // `lpBalance` is the amount of LP tokens held by the users account
  const [lpBalance, setLPBalance] = useState(zero);
  /** Variables to keep track of liquidity to be added or removed */
  // addEther is the amount of Ether that the user wants to add to the liquidity
  const [addEther, setAddEther] = useState(zero);
  // addCDTokens keeps track of the amount of CD tokens that the user wants to add to the liquidity
  // in case when there is no initial liquidity and after liquidity gets added it keeps track of the
  // CD tokens that the user can add given a certain amount of ether
  const [addCDTokens, setAddCDTokens] = useState(zero);
  // removeEther is the amount of `Ether` that would be sent back to the user based on a certain number of `LP` tokens
  const [removeEther, setRemoveEther] = useState(zero);
  // removeCD is the amount of `Crypto Dev` tokens that would be sent back to the user based on a certain number of `LP` tokens
  // that he wants to withdraw
  const [removeCD, setRemoveCD] = useState(zero);
  // amount of LP tokens that the user wants to remove from liquidity
  const [removeLPTokens, setRemoveLPTokens] = useState("0");
  /** Variables to keep track of swap functionality */
  // Amount that the user wants to swap
  const [swapAmount, setSwapAmount] = useState("");
  // This keeps track of the number of tokens that the user would receive after a swap completes
  const [tokenToBeReceivedAfterSwap, settokenToBeReceivedAfterSwap] = useState(
    zero
  );
  // Keeps track of whether  `Eth` or `Crypto Dev` token is selected. If `Eth` is selected it means that the user
  // wants to swap some `Eth` for some `Crypto Dev` tokens and vice versa if `Eth` is not selected
  const [ethSelected, setEthSelected] = useState(true);
  /** Wallet connection */
  // Create a reference to the Web3 Modal (used for connecting to Metamask) which persists as long as the page is open
  const web3ModalRef = useRef();
  // walletConnected keep track of whether the user's wallet is connected or not
  const [walletConnected, setWalletConnected] = useState(false);

  /**
   * getAmounts call various functions to retrive amounts for ethbalance,
   * LP tokens etc
   */
  const getAmounts = async () => {
    try {
      const provider = await getProviderOrSigner(false);
      const signer = await getProviderOrSigner(true);
      const address = await signer.getAddress();
      // get the amount of eth in the user's account
      const _ethBalance = await getEtherBalance(provider, address);
      // get the amount of `Crypto Dev` tokens held by the user
      const _cdBalance = await getCDTokensBalance(provider, address);
      // get the amount of `Crypto Dev` LP tokens held by the user
      const _lpBalance = await getLPTokensBalance(provider, address);
      // gets the amount of `CD` tokens that are present in the reserve of the `Exchange contract`
      const _reservedCD = await getReserveOfCDTokens(provider);
      // Get the ether reserves in the contract
      const _ethBalanceContract = await getEtherBalance(provider, null, true);
      setEtherBalance(_ethBalance);
      setCDBalance(_cdBalance);
      setLPBalance(_lpBalance);
      setReservedCD(_reservedCD);
      setReservedCD(_reservedCD);
      setEtherBalanceContract(_ethBalanceContract);
    } catch (err) {
      console.error(err);
    }
  };

  /**** SWAP FUNCTIONS ****/

  /**
   * swapTokens: Swaps  `swapAmountWei` of Eth/Crypto Dev tokens with `tokenToBeReceivedAfterSwap` amount of Eth/Crypto Dev tokens.
   */
  const _swapTokens = async () => {
    try {
      // Convert the amount entered by the user to a BigNumber using the `parseEther` library from `ethers.js`
      const swapAmountWei = utils.parseEther(swapAmount);
      // Check if the user entered zero
      // We are here using the `eq` method from BigNumber class in `ethers.js`
      if (!swapAmountWei.eq(zero)) {
        const signer = await getProviderOrSigner(true);
        setLoading(true);
        // Call the swapTokens function from the `utils` folder
        await swapTokens(
          signer,
          swapAmountWei,
          tokenToBeReceivedAfterSwap,
          ethSelected
        );
        setLoading(false);
        // Get all the updated amounts after the swap
        await getAmounts();
        setSwapAmount("");
      }
    } catch (err) {
      console.error(err);
      setLoading(false);
      setSwapAmount("");
    }
  };

  /**
   * _getAmountOfTokensReceivedFromSwap:  Returns the number of Eth/Crypto Dev tokens that can be received 
   * when the user swaps `_swapAmountWEI` amount of Eth/Crypto Dev tokens.
   */
  const _getAmountOfTokensReceivedFromSwap = async (_swapAmount) => {
    try {
      // Convert the amount entered by the user to a BigNumber using the `parseEther` library from `ethers.js`
      const _swapAmountWEI = utils.parseEther(_swapAmount.toString());
      // Check if the user entered zero
      // We are here using the `eq` method from BigNumber class in `ethers.js`
      if (!_swapAmountWEI.eq(zero)) {
        const provider = await getProviderOrSigner();
        // Get the amount of ether in the contract
        const _ethBalance = await getEtherBalance(provider, null, true);
        // Call the `getAmountOfTokensReceivedFromSwap` from the utils folder
        const amountOfTokens = await getAmountOfTokensReceivedFromSwap(
          _swapAmountWEI,
          provider,
          ethSelected,
          _ethBalance,
          reservedCD
        );
        settokenToBeReceivedAfterSwap(amountOfTokens);
      } else {
        settokenToBeReceivedAfterSwap(zero);
      }
    } catch (err) {
      console.error(err);
    }
  };

  /*** END ***/

  /**** ADD LIQUIDITY FUNCTIONS ****/

  /**
   * _addLiquidity helps add liquidity to the exchange,
   * If the user is adding initial liquidity, user decides the ether and CD tokens he wants to add
   * to the exchange. If he is adding the liquidity after the initial liquidity has already been added
   * then we calculate the crypto dev tokens he can add, given the Eth he wants to add by keeping the ratios
   * constant
   */
  const _addLiquidity = async () => {
    try {
      // Convert the ether amount entered by the user to Bignumber
      const addEtherWei = utils.parseEther(addEther.toString());
      // Check if the values are zero
      if (!addCDTokens.eq(zero) && !addEtherWei.eq(zero)) {
        const signer = await getProviderOrSigner(true);
        setLoading(true);
        // call the addLiquidity function from the utils folder
        await addLiquidity(signer, addCDTokens, addEtherWei);
        setLoading(false);
        // Reinitialize the CD tokens
        setAddCDTokens(zero);
        // Get amounts for all values after the liquidity has been added
        await getAmounts();
      } else {
        setAddCDTokens(zero);
      }
    } catch (err) {
      console.error(err);
      setLoading(false);
      setAddCDTokens(zero);
    }
  };

  /**** END ****/

  /**** REMOVE LIQUIDITY FUNCTIONS ****/

  /**
   * _removeLiquidity: Removes the `removeLPTokensWei` amount of LP tokens from
   * liquidity and also the calculated amount of `ether` and `CD` tokens
   */
  const _removeLiquidity = async () => {
    try {
      const signer = await getProviderOrSigner(true);
      // Convert the LP tokens entered by the user to a BigNumber
      const removeLPTokensWei = utils.parseEther(removeLPTokens);
      setLoading(true);
      // Call the removeLiquidity function from the `utils` folder
      await removeLiquidity(signer, removeLPTokensWei);
      setLoading(false);
      await getAmounts();
      setRemoveCD(zero);
      setRemoveEther(zero);
    } catch (err) {
      console.error(err);
      setLoading(false);
      setRemoveCD(zero);
      setRemoveEther(zero);
    }
  };

  /**
   * _getTokensAfterRemove: Calculates the amount of `Ether` and `CD` tokens
   * that would be returned back to user after he removes `removeLPTokenWei` amount
   * of LP tokens from the contract
   */
  const _getTokensAfterRemove = async (_removeLPTokens) => {
    try {
      const provider = await getProviderOrSigner();
      // Convert the LP tokens entered by the user to a BigNumber
      const removeLPTokenWei = utils.parseEther(_removeLPTokens);
      // Get the Eth reserves within the exchange contract
      const _ethBalance = await getEtherBalance(provider, null, true);
      // get the crypto dev token reserves from the contract
      const cryptoDevTokenReserve = await getReserveOfCDTokens(provider);
      // call the getTokensAfterRemove from the utils folder
      const { _removeEther, _removeCD } = await getTokensAfterRemove(
        provider,
        removeLPTokenWei,
        _ethBalance,
        cryptoDevTokenReserve
      );
      setRemoveEther(_removeEther);
      setRemoveCD(_removeCD);
    } catch (err) {
      console.error(err);
    }
  };

  /**** END ****/

  /**
   * connectWallet: Connects the MetaMask wallet
   */
  const connectWallet = async () => {
    try {
      // Get the provider from web3Modal, which in our case is MetaMask
      // When used for the first time, it prompts the user to connect their wallet
      await getProviderOrSigner();
      setWalletConnected(true);
    } catch (err) {
      console.error(err);
    }
  };

  /**
   * Returns a Provider or Signer object representing the Ethereum RPC with or
   * without the signing capabilities of Metamask attached
   *
   * A `Provider` is needed to interact with the blockchain - reading
   * transactions, reading balances, reading state, etc.
   *
   * A `Signer` is a special type of Provider used in case a `write` transaction
   * needs to be made to the blockchain, which involves the connected account
   * needing to make a digital signature to authorize the transaction being
   * sent. Metamask exposes a Signer API to allow your website to request
   * signatures from the user using Signer functions.
   *
   * @param {*} needSigner - True if you need the signer, default false
   * otherwise
   */
  const getProviderOrSigner = async (needSigner = false) => {
    // Connect to Metamask
    // Since we store `web3Modal` as a reference, we need to access the `current` value to get access to the underlying object
    const provider = await web3ModalRef.current.connect();
    const web3Provider = new providers.Web3Provider(provider);

    // If user is not connected to the Rinkeby network, let them know and throw an error
    const { chainId } = await web3Provider.getNetwork();
    if (chainId !== 4) {
      window.alert("Change the network to Rinkeby");
      throw new Error("Change network to Rinkeby");
    }

    if (needSigner) {
      const signer = web3Provider.getSigner();
      return signer;
    }
    return web3Provider;
  };

  // useEffects are used to react to changes in state of the website
  // The array at the end of function call represents what state changes will trigger this effect
  // In this case, whenever the value of `walletConnected` changes - this effect will be called
  useEffect(() => {
    // if wallet is not connected, create a new instance of Web3Modal and connect the MetaMask wallet
    if (!walletConnected) {
      // Assign the Web3Modal class to the reference object by setting it's `current` value
      // The `current` value is persisted throughout as long as this page is open
      web3ModalRef.current = new Web3Modal({
        network: "rinkeby",
        providerOptions: {},
        disableInjectedProvider: false,
      });
      connectWallet();
      getAmounts();
    }
  }, [walletConnected]);

  /*
      renderButton: Returns a button based on the state of the dapp
  */
  const renderButton = () => {
    // If wallet is not connected, return a button which allows them to connect their wllet
    if (!walletConnected) {
      return (
        <button onClick={connectWallet} className={styles.button}>
          Connect your wallet
        </button>
      );
    }

    // If we are currently waiting for something, return a loading button
    if (loading) {
      return <button className={styles.button}>Loading...</button>;
    }

    if (liquidityTab) {
      return (
        <div>
          <div className={styles.description}>
            You have:
            <br />
            {/* Convert the BigNumber to string using the formatEther function from ethers.js */}
            {utils.formatEther(cdBalance)} Crypto Dev Tokens
            <br />
            {utils.formatEther(ethBalance)} Ether
            <br />
            {utils.formatEther(lpBalance)} Crypto Dev LP tokens
          </div>
          <div>
            {/* If reserved CD is zero, render the state for liquidity zero where we ask the user
            how much initial liquidity he wants to add else just render the state where liquidity is not zero and
            we calculate based on the `Eth` amount specified by the user how much `CD` tokens can be added */}
            {utils.parseEther(reservedCD.toString()).eq(zero) ? (
              <div>
                <input
                  type="number"
                  placeholder="Amount of Ether"
                  onChange={(e) => setAddEther(e.target.value || "0")}
                  className={styles.input}
                />
                <input
                  type="number"
                  placeholder="Amount of CryptoDev tokens"
                  onChange={(e) =>
                    setAddCDTokens(
                      BigNumber.from(utils.parseEther(e.target.value || "0"))
                    )
                  }
                  className={styles.input}
                />
                <button className={styles.button1} onClick={_addLiquidity}>
                  Add
                </button>
              </div>
            ) : (
              <div>
                <input
                  type="number"
                  placeholder="Amount of Ether"
                  onChange={async (e) => {
                    setAddEther(e.target.value || "0");
                    // calculate the number of CD tokens that
                    // can be added given  `e.target.value` amount of Eth
                    const _addCDTokens = await calculateCD(
                      e.target.value || "0",
                      etherBalanceContract,
                      reservedCD
                    );
                    setAddCDTokens(_addCDTokens);
                  }}
                  className={styles.input}
                />
                <div className={styles.inputDiv}>
                  {/* Convert the BigNumber to string using the formatEther function from ethers.js */}
                  {`You will need ${utils.formatEther(addCDTokens)} Crypto Dev
                  Tokens`}
                </div>
                <button className={styles.button1} onClick={_addLiquidity}>
                  Add
                </button>
              </div>
            )}
            <div>
              <input
                type="number"
                placeholder="Amount of LP Tokens"
                onChange={async (e) => {
                  setRemoveLPTokens(e.target.value || "0");
                  // Calculate the amount of Ether and CD tokens that the user would receive
                  // After he removes `e.target.value` amount of `LP` tokens
                  await _getTokensAfterRemove(e.target.value || "0");
                }}
                className={styles.input}
              />
              <div className={styles.inputDiv}>
                {/* Convert the BigNumber to string using the formatEther function from ethers.js */}
                {`You will get ${utils.formatEther(removeCD)} Crypto
              Dev Tokens and ${utils.formatEther(removeEther)} Eth`}
              </div>
              <button className={styles.button1} onClick={_removeLiquidity}>
                Remove
              </button>
            </div>
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <input
            type="number"
            placeholder="Amount"
            onChange={async (e) => {
              setSwapAmount(e.target.value || "");
              // Calculate the amount of tokens user would receive after the swap
              await _getAmountOfTokensReceivedFromSwap(e.target.value || "0");
            }}
            className={styles.input}
            value={swapAmount}
          />
          <select
            className={styles.select}
            name="dropdown"
            id="dropdown"
            onChange={async () => {
              setEthSelected(!ethSelected);
              // Initialize the values back to zero
              await _getAmountOfTokensReceivedFromSwap(0);
              setSwapAmount("");
            }}
          >
            <option value="eth">Ethereum</option>
            <option value="cryptoDevToken">Crypto Dev Token</option>
          </select>
          <br />
          <div className={styles.inputDiv}>
            {/* Convert the BigNumber to string using the formatEther function from ethers.js */}
            {ethSelected
              ? `You will get ${utils.formatEther(
                  tokenToBeReceivedAfterSwap
                )} Crypto Dev Tokens`
              : `You will get ${utils.formatEther(
                  tokenToBeReceivedAfterSwap
                )} Eth`}
          </div>
          <button className={styles.button1} onClick={_swapTokens}>
            Swap
          </button>
        </div>
      );
    }
  };

  return (
    <div>
      <Head>
        <title>Crypto Devs</title>
        <meta name="description" content="Whitelist-Dapp" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.main}>
        <div>
          <h1 className={styles.title}>Welcome to Crypto Devs Exchange!</h1>
          <div className={styles.description}>
            Exchange Ethereum &#60;&#62; Crypto Dev Tokens
          </div>
          <div>
            <button
              className={styles.button}
              onClick={() => {
                setLiquidityTab(!liquidityTab);
              }}
            >
              Liquidity
            </button>
            <button
              className={styles.button}
              onClick={() => {
                setLiquidityTab(false);
              }}
            >
              Swap
            </button>
          </div>
          {renderButton()}
        </div>
        <div>
          <img className={styles.image} src="./cryptodev.svg" />
        </div>
      </div>

      <footer className={styles.footer}>
        Made with &#10084; by Crypto Devs
      </footer>
    </div>
  );
}

Now in your terminal which is pointing to my-app folder, execute

  npm run dev

Your Exchange dapp should now work without errors 🚀

Push your Code to Github

Make sure you push all your code to github before moving to the next step of deployment

Deploying your dApp

We will now deploy your dApp, so that everyone can see your website and you can share it with all of your LearnWeb3 DAO friends.

Go to https://vercel.com/ and sign in with your GitHub
Then click on New Project button and then select your Defi-Exchange dApp repo
When configuring your new project, Vercel will allow you to customize your Root Directory
Click Edit next to Root Directory and set it to my-app
Click Deploy
Now you can see your deployed website by going to your dashboard, selecting your project, and copying the URL from there!

Share your website in Discord :D

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

How do DEX's work? Understand Uniswap v1 by deep diving into the math and code. Learn the xy=k AMM curve.

Haardik — Sun, 15 May 2022 08:19:37 +0000

DeFi Exchange Theory

Most of us are used to buying crypto through centralized exchanges - Binance, Coinbase, etc. Often times, we resolve to the same platforms when trading between different cryptocurrencies.

However, centralized exchanges are rife with problems. They can get hacked and lose all their user's money, or worse yet, the company behind the exchange can close up shop and run away with all the money.

This may seem extreme, but this is not fiction.

Mt.Gox

Mt.Gox was the leading Bitcoin exchange from 2010-2014. At it's peak, it was responsible for 70% of all Bitcoin transactions. In early 2014, the company reported they were 'missing' hundreds of thousands of Bitcoin, and declared bankruptcy. Today, those lost Bitcoin are worth billions of dollars.

In the following years, Mt.Gox faced several lawsuits, some of which are still going on 8 years later. You can read more about what happened with Mt.Gox here

QuadrigaCX

QuadrigaCX, a centralized exchange based in Canada, went under in 2018. The founder of Quadriga mysteriously 'died' and all the crypto on the platform disappeared with him. Users reported almost $200 million in lost funds.

The Ontario Securities Commision conducted thorough research into the activities of the company, and declared that the founder of Quadriga was, simply, a fraud.

This is not an exhaustive list by any means, but it gives you an idea. Web3 has a common saying

Not your keys, not your coins

which means that if you don't own your private keys, and instead trust a centralized exchange to manage them for you, you don't really own your cryptocurrency coins. This is true.

The Birth of Decentralized Exchanges

The idea of a decentralized exchange is simple - allow users to trade their crypto directly on-chain through smart contracts without giving up control of their private keys.

While it sounds simple, the reality is much more complicated. In short, decentralized exchanges are a beautiful piece of mathematics and software combined together. We hope by the end of this article you will share the same feeling.

The birth of modern decentralized exchanges was primarily led by Uniswap. Not only is Uniswap the leading decentralized exchange on Ethereum, it is THE leading dApp on Ethereum in general.

After Vitalik Buterin posted a blog post on Path Independence in 2017, Hayden Adams was inspired to try to implement Vitalik's ideas in what eventually became Uniswap.

After spending over a year working on the code, Hayden finally announced and launched Uniswap in November 2018. You can read more about the history of Uniswap in this blog post by the founder.

In this article, we will attempt to go over the mathematics that allow for Uniswap to exist and function, and hope to give you an insight into why it's so amazing.

Why is it complicated?

You might be wondering - "why can't we just recreate a centralized exchange on-chain?"

Well, you can, but it's not good enough.

Centralized exchanges typically work on an order-book system. Alice puts up a listing saying she is willing to sell 100 of 'TokenA' for 50 of 'TokenB', and the listing is added to the order book. At some point, if Bob comes along and says he wants to buy 100 of 'TokenA' for 50 of 'TokenB' - their orders are matched together, and the trade is executed.

Order-book based exchanges were attempted on Ethereum, with the most significant example being 0xProject but due to the high gas required for all the storage and matching algorithms, it was challenging to attract users.

There was need for a new approach, a way to allow users to swap between any two tokens arbitrarily without needing an orderbook. Additionally, cookie points if users could actually earn money by using Uniswap.

Uniswap V1, V2, V3

As of January 2022, three versions of Uniswap have been launched.

The first version was launched in November 2018 and it allowed only swaps between ether and a token. Chained swaps were also possible to allow token-token swaps. Chained swaps would allow for a TokenA <> TokenB swap by first swapping one of them for ETH, and then swapping the ETH for the second token.

V2 was launched in March 2020 and it was a huge improvement of V1 that allowed direct swaps between any ERC20 tokens, as well as chained swaps between any pairs.

V3 was launched in May 2021 and it significantly improved capital efficiency, which allowed liquidity providers to remove a bigger portion of their liquidity from pools and still keep getting the same rewards (or squeeze the capital in smaller price ranges and get up to 4000x of profits).

For the purposes of this tutorial, we will be focusing on the design of Uniswap V1, and in the following level we will actually implement a slightly simplified version of it that allows swapping between ether and a token.

Market Makers

Uniswap is an Automated Market Maker. Let's try to understand what that means.

Market Makers are entities that provide liquidity (assets) to trading markets. In non-orderbook systems, liquidity is what allows trading to be possible. That means if you want to sell BTC to buy ETH, the exchange must have an ETH balance you can purchase from in exchange for BTC. Some trading pairs have very high liquidity (eg. BTC <> ETH trading pair), but some have extremely low or no liquidity at all (eg. scam tokens, or newly created tokens).

A DEX must have enough liquidity to function and serve as an alternative to centralized exchanges.

One way to get that liquidity is that the developers (or investors) put in their own money and become market makers. However, this is not realistic as they would need a huge amount of money to provide enough liquidity for all possible trading pairs. Moreover, this hurts decentralization, as the developers/investors would hold all the power in the market.

Another way, which Uniswap implemented, was to let anyone be a market maker - and this is what makes Uniswap an automated market maker. Any user can deposit funds to a specific trading pair and add liquidity, and in exchange earn money for doing so through trading fees taken from the users.

Functional Requirements

Considering what we have learnt, we need to allow for the following functionality at least to build an automated market maker:

Anyone can add liquidity to become a liquidity provider
Liquidity providers can remove their liquidity and get back their crypto whenever they want
Users can swap between assets present in the trading pool, assuming there is enough liquidity
Users are charged a small trading fees, that gets distributed amongst the liquidity providers so they can earn for providing liquidity

XY = K

At the core of Uniswap is one math function:

x * y = k

Assume we have a trading pair for ETH <> LW3 Token

x = reserve balance of ETH in the trading pool

y = reserve balance of LW3 Token in the trading pool

k = a constant

This formula is responsible for calculating prices, deciding how much LW3 Token would be received in exchange for a certain amount of ETH, or vice versa.

NOTE: It doesn't matter if we use x to represent the reserve of ETH or LW3 Token as long as y represents the opposite.

The formula states that k is a constant no matter what the reserves (x and y) are. Every swap made increases the reserve of either ETH or LW3 Token and decreases the reserve of the other.

Let's try to write that as a formula:

(x + Δx) * (y - Δy) = k

where Δx is the amount being provided by the user for sale, and Δy is the amount the user is receiving from the DEX in exchange for Δx.

Since k is a constant, we can compare the above two formulas to get:

x * y = (x + Δx) * (y - Δy)

Now, before a swap occurs, we know the values of x, y, and Δx (given by user). We are interested in calculating Δy - which is the amount of ETH or LW3 Token the user will receive.

We can simplify the above equation to solve for Δy, and we get the following formula:

Δy = (y * Δx) / (x + Δx)

Let's try to code this up in Solidity.



function calculateOutputAmount(uint inputAmount, uint inputReserve, uint outputReserve) private pure returns (uint) {
    uint outputAmount = (outputReserve * inputAmount) / (inputReserve + inputAmount);
    return outputAmount;
}

Assume we have 100 ETH and 200 LW3 Token in the contract.

What would happen if I want to swap 1 ETH for LW3 Tokens? Let's do the math.

inputAmount = 1 ETH
inputReserve = 100 ETH
outputReserve = 200 LW3 Tokens

=> outputAmount = 1.98019802 LW3 Tokens

What would happen if instead I wanted to swap 2 LW3 Tokens for ETH?

inputAmount = 2 LW3 Tokens
inputReserve = 200 LW3 Tokens
outputReserve = 100 ETH

=> outputAmount = 0.999 ETH

These amounts are very close to the 1:2 ratio of tokens present in the contract reserves, but slightly smaller. Why?

The product formula we use for price calculations is actually a hyperbola.

The hyperbola never intersects at x=0 or y=0 - this means that neither of the reserves will ever be 0 just as a product of trading! Reserves are infinite

Slippage

Since we don't get tokens in the exact ratio of reserves, this leads to an interesting implication of the math. The price function causes slippage in the price.

The bigger the amount of tokens being traded relative to their reserve values, the lower the price would be.

Let's say I wanted to try to drain out the entire pool, and sell 200 ETH.

inputAmount = 200 ETH
inputReserve = 100 ETH
outputReserve = 200 LW3 Tokens

=> outputAmount = 133.333 LW3 Tokens

As you can see, when we're trying to drain out the pool, we're only getting close to a half of what we expect.

Some may see this as a flaw of automated market makers that follow x*y = k, but it's actually not. It is the same mechanism that protects pools from being completely drained. This also aligns with the law of supply and demand: the higher the demand relative to the supply, the more costly it is to buy that supply.

Who sets the initial price?

When a new cryptocurrency is created, there is no liquidity for trading pairs involving that token. As such, there is no way to calculate the price for it.

Therefore, the first person adding liquidity to the pool gets to set a price. Adding liquidity involves adding tokens from both sides of the trading pair - you cannot add liquidity for just one side.

When the first person adds liquidity, it creates a reserve balance and sets the initial x and y values. From that point onward, we can do price calculations when swapping between tokens.

A simple implementation of the addLiquidity function in Solidity would look something like this:



function addLiquidity(uint256 tokenAmount) public payable {
    IERC20 token = IERC20(tokenAddress);
    token.transferFrom(msg.sender, address(this), tokenAmount);
}

This function accepts ETH and a token from the user.

However, this implementation is incomplete!

A second person can come along, and add liquidity in a completely different ratio of reserves which would massively affect price calculations. We do not want to allow for such price manipulations, and we want prices on the decentralized exchange to be as close to those on centralized exchanges as possible.

So we must ensure that anyone adding additional liquidity to the pool is doing so in the same proportion as that already established in the pool. We only want to allow arbitrary ratios when the pool is completely empty.

This leads to an implementation that looks like this:



function addLiquidity(uint tokenAmount) public payable {
    // assuming a hypothetical function
    // that returns the balance of the 
    // token in the contract
    if (getReserve() == 0) {
        IERC20 token = IERC20(tokenAddress);
        token.transferFrom(msg.sender, address(this), tokenAmount);
    } else {
        uint ethReserve = address(this).balance - msg.value;
        uint tokenReserve = getReserve();
        uint proportionalTokenAmount = (msg.value * tokenReserve) / ethReserve;
        require(tokenAmount >= proportionalTokenAmount, "incorrect ratio of tokens provided");

        IERC20 token = IERC20(tokenAddress);
        token.transferFrom(msg.sender, address(this), proportionalTokenAmount);
    }
}

LP Tokens

So far we have discussed how to add liquidity, and how to do price calculations for swaps. But what if a liquidity provider wants to withdraw their liquidity from the pool?

We need a way to reward the liquidity providers for their tokens, as without them other users would not have been able to perform swaps. Nobody would put tokens in a third-party contract if they are not getting something out of it.

The only good solution for this is to collect a small fee on each token swap and distribute the fees amongst the liquidity providers, based on how much liquidity they provided.

If someone provided 50% of the pool's liquidity, they should receive 50% of the fees. Makes sense.

There is a quite elegant solution to do this: Liquidity Provider Tokens (LP Tokens)

LP Tokens work as shares.

You get LP-tokens in exchange for your liquidity
Amount of tokens you get is proportional to your share of the liquidity in the pool
Fees are distributed proportional to how many LP-tokens you own
LP-tokens can be exchanged back for the liquidity + earned fees

But, there are additional requirements:

Issued shares must always be correct. When someone else deposits or removes liquidity after you, your shares should remain and maintain correct values.
Writing data to the chain can be expensive (gas fees) - we want to reduce the maintainence costs of LP-tokens as much as possible.

Imagine we issue a lot of tokens - say a few billion. The first time someone adds liquidity, they own 100% of the liquidity in the pool. So do we give them all few billion tokens?

This leads to the problem that when a second person adds liquidity, the shares need to be recalculated which is expensive due to gas fees.

Alternatively, if we choose to distribute only a portion of the tokens initially, we risk hitting the limit, which will also eventually force us to recalculate existing shares.

The only good solution seems to have no supply limit at all, and mint new tokens whenever new liquidity is added. This allows for infinite growth, and if we do the math carefully, we can make sure issued shares remain correct whenever liquidity is added or removed.

So, how do we calculate the amount of LP-tokens to be minted when liquidity is added?

Uniswap V1 calculates the amount proportionate to the ETH reserve. The following equation shows how the amount of new LP-tokens is calculated depending on how much ETH is deposited:

amountMinted = totalAmount * (ethDeposited / ethReserve)

We can update addLiquidity function to mint LP-tokens when liquidity is added:



function addLiquidity(uint tokenAmount) public payable {
    if (getReserve() == 0) {
        ...

        uint liquidity = address(this).balance;
        _mint(msg.sender, liquidity);
    } else {
        ...
        uint liquidity = (totalSupply() * msg.value) / ethReserve;
        _mint(msg.sender, liquidity);
    }
}

Now we have LP-tokens, we can also use them to calculate how much underlying tokens to return when someone wants to withdraw their liquidity in exchange for their LP-tokens.

We don't need to remember how much they originally deposited. Since LP-tokens are proportional to amount of ETH deposited, we can rearrange the above formula to calculate the amount of ETH to return, and proportionately calculate the amount of tokens to return.

Fees

Now to collect fees on swaps and distribute them amongst liquidity providers, we need to think about a couple of things:

Do we collect fees in ETH or tokens?
Do we pay rewards in ETH or tokens?
How do we collect the fees from each swap?
How to distribute the fees amongst all liquidity providers?

These may seem difficult questions to answer, but we actually have everything we need to answer them.

Traders are already sending ether/tokens to the contract. Instead of asking for an explicit fee, we can just deduct some amount from the ether/tokens they are sending.
We can just add the fees to the reserve balance. This means, over time, the reserves will grow!
We can collect fees in the currency of the asset being deposited by the trader. Liquidity providers thus get a balanced amount of ether and tokens proportional to their share of LP-tokens.

Uniswap takes a 0.03% fees from each swap. Let's say we take 1% to keep things simple. Adding fees to the contract is as simple as making a few edits to our price calculation formula:

We had outputAmount = (outputReserve * inputAmount) / (inputReserve + inputAmount)

Now,

outputAmountWithFees = 0.99 * outputAmount

But, Solidity does not support floating point operations. So for Solidity we rewrite the formula as such:

outputAmountWithFees = (outputAmount * 99) / 100

Congratulations!

This was a big tutorial with a lot of condensed information. Congratulations on making it this far!

While the math and the ideas can be a little tricky to initially understand, we hope that going by going through the material and asking questions on Discord you can develop an appreciation for how beautifully architected all of this is.

See you in the next level where we will actually implement the full contract, along with a website, for the DEX.

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

Build an on-chain DAO for your NFT holders on Ethereum using Solidity, Next.js, ethers.js, Web3Modal

Haardik — Sun, 15 May 2022 08:17:51 +0000

Building a DAO

What is a DAO?

DAO stands for Decentralized Autonomous Organization. You can think of DAOs as analogous to companies in the real world. Essentially, DAOs allow for members to create and vote on governance decisions.

In traditional companies, when a decision needs to be made, the board of directors or executives of the company are in charge of making that decision. In a DAO, however, this process is democratized, and any member can create a proposal, and all other members can vote on it. Each proposal created has a deadline for voting, and after the deadline the decision is made in favour of the voting outcome (YES or NO).

Membership in DAOs is typically restricted either by ownership of ERC20 tokens, or by ownership of NFTs. Examples of DAOs where membership and voting power is proportional to how many tokens you own include Uniswap and ENS. Examples of DAOs where they are based on NFTs include Meebits DAO.

Building our DAO

You want to launch a DAO for holders of your CryptoDevs NFTs. From the ETH that was gained through the ICO, you built up a DAO Treasury. The DAO now has a lot of ETH, but currently does nothing with it.

You want to allow your NFT holders to create and vote on proposals to use that ETH for purchasing other NFTs from an NFT marketplace, and speculate on price. Maybe in the future when you sell the NFT back, you split the profits among all members of the DAO.

Requirements

Anyone with a CryptoDevs NFT can create a proposal to purchase a different NFT from an NFT marketplace
Everyone with a CryptoDevs NFT can vote for or against the active proposals
Each NFT counts as one vote for each proposal
Voter cannot vote multiple times on the same proposal with the same NFT
If majority of the voters vote for the proposal by the deadline, the NFT purchase is automatically executed

What we will make

To be able to purchase NFTs automatically when a proposal is passed, you need an on-chain NFT marketplace that you can call a purchase() function on. There exist a lot of NFT marketplaces out there, but to avoid overcomplicating things, we will create a simplified fake NFT marketplace for this tutorial as the focus is on the DAO.
We will also make the actual DAO smart contract using Hardhat.
We will make the website using Next.js to allow users to create and vote on proposals

Prerequisites

You have completed the NFT-Collection Tutorial
You must have some ETH to give to the DAO Treasury

BUIDL IT

Smart Contract Development

We will start off with first creating the smart contracts. We will be making two smart contracts:

FakeNFTMarketplace.sol
CryptoDevsDAO.sol

To do so, we will use the Hardhat development framework we have been using for the last few tutorials.

Create a folder for this project named DAO-Tutorial, and open up a Terminal window in that folder.
Setup a new hardhat project by running the following commands in your terminal:

  mkdir hardhat-tutorial
  cd hardhat-tutorial
  npm init --yes
  npm install --save-dev hardhat

Now that you have installed Hardhat, we can setup a project. Execute the following command in your terminal.

In the same directory where you installed Hardhat run:

  npx hardhat

Select Create a basic sample project
Press enter for the already specified Hardhat Project root
Press enter for the question on if you want to add a .gitignore
Press enter for Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?

Now you have a hardhat project ready to go!

If you are not on mac, please do this extra step and install these libraries as well :)
```
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
```

and press Enter for all the questions (Choose the Create a basic sample project) option.

Now, let's install the @openzeppelin/contracts package from NPM as we will be using OpenZeppelin's Ownable Contract for the DAO contract.

  npm install @openzeppelin/contracts

First, let's make a simple Fake NFT Marketplace. Create a file named FakeNFTMarketplace.sol under the contracts directory within hardhat-tutorial, and add the following code.

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

  contract FakeNFTMarketplace {
      /// @dev Maintain a mapping of Fake TokenID to Owner addresses
      mapping(uint256 => address) public tokens;
      /// @dev Set the purchase price for each Fake NFT
      uint256 nftPrice = 0.1 ether;

      /// @dev purchase() accepts ETH and marks the owner of the given tokenId as the caller address
      /// @param _tokenId - the fake NFT token Id to purchase
      function purchase(uint256 _tokenId) external payable {
          require(msg.value == nftPrice, "This NFT costs 0.1 ether");
          tokens[_tokenId] = msg.sender;
      }

      /// @dev getPrice() returns the price of one NFT
      function getPrice() external view returns (uint256) {
          return nftPrice;
      }

      /// @dev available() checks whether the given tokenId has already been sold or not
      /// @param _tokenId - the tokenId to check for
      function available(uint256 _tokenId) external view returns (bool) {
          // address(0) = 0x0000000000000000000000000000000000000000
          // This is the default value for addresses in Solidity
          if (tokens[_tokenId] == address(0)) {
              return true;
          }
          return false;
      }
  }

The FakeNFTMarketplace exposes some basic functions that we will be using from the DAO contract to purchase NFTs if a proposal is passed. A real NFT marketplace would be more complicated - as not all NFTs have the same price.
Let's make sure everything compiles before we start writing the DAO Contract. Run the following command inside the hardhat-tutorial folder from your Terminal.

  npx hardhat compile

and make sure there are no compilation errors.

Now, we will start writing the CryptoDevsDAO contract. Since this is mostly a completely custom contract, and relatively more complicated than what we have done so far, we will explain this one bit-by-bit.
First, let's write the boilerplate code for the contract. Create a new file named CryptoDevsDAO.sol under the contracts directory in hardhat-tutorial and add the following code to it.

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

  import "@openzeppelin/contracts/access/Ownable.sol";

  // We will add the Interfaces here

  contract CryptoDevsDAO is Ownable {
      // We will write contract code here
  }

Now, we will need to call functions on the FakeNFTMarketplace contract, and your previously deployed CryptoDevs NFT contract. Recall from the Advanced Solidity Topics tutorial that we need to provide an interface for those contracts, so this contract knows which functions are available to call and what they take as parameters and what they return.
Add the following two interfaces to your code by adding the following code

  /**
   * Interface for the FakeNFTMarketplace
   */
  interface IFakeNFTMarketplace {
      /// @dev getPrice() returns the price of an NFT from the FakeNFTMarketplace
      /// @return Returns the price in Wei for an NFT
      function getPrice() external view returns (uint256);

      /// @dev available() returns whether or not the given _tokenId has already been purchased
      /// @return Returns a boolean value - true if available, false if not
      function available(uint256 _tokenId) external view returns (bool);

      /// @dev purchase() purchases an NFT from the FakeNFTMarketplace
      /// @param _tokenId - the fake NFT tokenID to purchase
      function purchase(uint256 _tokenId) external payable;
  }

  /**
   * Minimal interface for CryptoDevsNFT containing only two functions
   * that we are interested in
   */
  interface ICryptoDevsNFT {
      /// @dev balanceOf returns the number of NFTs owned by the given address
      /// @param owner - address to fetch number of NFTs for
      /// @return Returns the number of NFTs owned
      function balanceOf(address owner) external view returns (uint256);

      /// @dev tokenOfOwnerByIndex returns a tokenID at given index for owner
      /// @param owner - address to fetch the NFT TokenID for
      /// @param index - index of NFT in owned tokens array to fetch
      /// @return Returns the TokenID of the NFT
      function tokenOfOwnerByIndex(address owner, uint256 index)
          external
          view
          returns (uint256);
  }

Now, let's think about what functionality we need in the DAO contract.
- Store created proposals in contract state
- Allow holders of the CryptoDevs NFT to create new proposals
- Allow holders of the CryptoDevs NFT to vote on proposals, given they haven't already voted, and that the proposal hasn't passed it's deadline yet
- Allow holders of the CryptoDevs NFT to execute a proposal after it's deadline has been exceeded, triggering an NFT purchase in case it passed
Let's start off by creating a struct representing a Proposal. In your contract, add the following code:

  // Create a struct named Proposal containing all relevant information
  struct Proposal {
      // nftTokenId - the tokenID of the NFT to purchase from FakeNFTMarketplace if the proposal passes
      uint256 nftTokenId;
      // deadline - the UNIX timestamp until which this proposal is active. Proposal can be executed after the deadline has been exceeded.
      uint256 deadline;
      // yayVotes - number of yay votes for this proposal
      uint256 yayVotes;
      // nayVotes - number of nay votes for this proposal
      uint256 nayVotes;
      // executed - whether or not this proposal has been executed yet. Cannot be executed before the deadline has been exceeded.
      bool executed;
      // voters - a mapping of CryptoDevsNFT tokenIDs to booleans indicating whether that NFT has already been used to cast a vote or not
      mapping(uint256 => bool) voters;
  }

Let's also create a mapping from Proposal IDs to Proposals to hold all created proposals, and a counter to count the number of proposals that exist.

  // Create a mapping of ID to Proposal
  mapping(uint256 => Proposal) public proposals;
  // Number of proposals that have been created
  uint256 public numProposals;

Now, since we will be calling functions on the FakeNFTMarketplace and CryptoDevsNFT contract, let's initialize variables for those contracts.

  IFakeNFTMarketplace nftMarketplace;
  ICryptoDevsNFT cryptoDevsNFT;

Create a constructor function that will initialize those contract variables, and also accept an ETH deposit from the deployer to fill the DAO ETH treasury. (In the background, since we imported the Ownable contract, this will also set the contract deployer as the owner of this contract)

  // Create a payable constructor which initializes the contract
  // instances for FakeNFTMarketplace and CryptoDevsNFT
  // The payable allows this constructor to accept an ETH deposit when it is being deployed
  constructor(address _nftMarketplace, address _cryptoDevsNFT) payable {
      nftMarketplace = IFakeNFTMarketplace(_nftMarketplace);
      cryptoDevsNFT = ICryptoDevsNFT(_cryptoDevsNFT);
  }

Now, since we want pretty much all of our other functions to only be called by those who own NFTs from the CryptoDevs NFT contract, we will create a modifier to avoid duplicating code.

  // Create a modifier which only allows a function to be
  // called by someone who owns at least 1 CryptoDevsNFT
  modifier nftHolderOnly() {
      require(cryptoDevsNFT.balanceOf(msg.sender) > 0, "NOT_A_DAO_MEMBER");
      _;
  }

We now have enough to write our createProposal function, which will allow members to create new proposals.

  /// @dev createProposal allows a CryptoDevsNFT holder to create a new proposal in the DAO
  /// @param _nftTokenId - the tokenID of the NFT to be purchased from FakeNFTMarketplace if this proposal passes
  /// @return Returns the proposal index for the newly created proposal
  function createProposal(uint256 _nftTokenId)
      external
      nftHolderOnly
      returns (uint256)
  {
      require(nftMarketplace.available(_nftTokenId), "NFT_NOT_FOR_SALE");
      Proposal storage proposal = proposals[numProposals];
      proposal.nftTokenId = _nftTokenId;
      // Set the proposal's voting deadline to be (current time + 5 minutes)
      proposal.deadline = block.timestamp + 5 minutes;

      numProposals++;

      return numProposals - 1;
  }

Now, to vote on a proposal, we want to add an additional restriction that the proposal being voted on must not have had it's deadline exceeded. To do so, we will create a second modifier.

  // Create a modifier which only allows a function to be
  // called if the given proposal's deadline has not been exceeded yet
  modifier activeProposalOnly(uint256 proposalIndex) {
      require(
          proposals[proposalIndex].deadline > block.timestamp,
          "DEADLINE_EXCEEDED"
      );
      _;
  }

Note how this modifier takes a parameter!

Additionally, since a vote can only be one of two values (YAY or NAY) - we can create an enum representing possible options.

  // Create an enum named Vote containing possible options for a vote
  enum Vote {
      YAY, // YAY = 0
      NAY // NAY = 1
  }

Let's write the voteOnProposal function

  /// @dev voteOnProposal allows a CryptoDevsNFT holder to cast their vote on an active proposal
  /// @param proposalIndex - the index of the proposal to vote on in the proposals array
  /// @param vote - the type of vote they want to cast
  function voteOnProposal(uint256 proposalIndex, Vote vote)
      external
      nftHolderOnly
      activeProposalOnly(proposalIndex)
  {
      Proposal storage proposal = proposals[proposalIndex];

      uint256 voterNFTBalance = cryptoDevsNFT.balanceOf(msg.sender);
      uint256 numVotes = 0;

      // Calculate how many NFTs are owned by the voter
      // that haven't already been used for voting on this proposal
      for (uint256 i = 0; i < voterNFTBalance; i++) {
          uint256 tokenId = cryptoDevsNFT.tokenOfOwnerByIndex(msg.sender, i);
          if (proposal.voters[tokenId] == false) {
              numVotes++;
              proposal.voters[tokenId] = true;
          }
      }
      require(numVotes > 0, "ALREADY_VOTED");

      if (vote == Vote.YAY) {
          proposal.yayVotes += numVotes;
      } else {
          proposal.nayVotes += numVotes;
      }
  }

We're almost done! To execute a proposal whose deadline has exceeded, we will create our final modifier.

  // Create a modifier which only allows a function to be
  // called if the given proposals' deadline HAS been exceeded
  // and if the proposal has not yet been executed
  modifier inactiveProposalOnly(uint256 proposalIndex) {
      require(
          proposals[proposalIndex].deadline <= block.timestamp,
          "DEADLINE_NOT_EXCEEDED"
      );
      require(
          proposals[proposalIndex].executed == false,
          "PROPOSAL_ALREADY_EXECUTED"
      );
      _;
  }

Note this modifier also takes a parameter!

Let's write the code for executeProposal

  /// @dev executeProposal allows any CryptoDevsNFT holder to execute a proposal after it's deadline has been exceeded
  /// @param proposalIndex - the index of the proposal to execute in the proposals array
  function executeProposal(uint256 proposalIndex)
      external
      nftHolderOnly
      inactiveProposalOnly(proposalIndex)
  {
      Proposal storage proposal = proposals[proposalIndex];

      // If the proposal has more YAY votes than NAY votes
      // purchase the NFT from the FakeNFTMarketplace
      if (proposal.yayVotes > proposal.nayVotes) {
          uint256 nftPrice = nftMarketplace.getPrice();
          require(address(this).balance >= nftPrice, "NOT_ENOUGH_FUNDS");
          nftMarketplace.purchase{value: nftPrice}(proposal.nftTokenId);
      }
      proposal.executed = true;
  }

We have at this point implemented all the core functionality. However, there are a couple of additional features we could and should implement.
- Allow the contract owner to withdraw the ETH from the DAO if needed
- Allow the contract to accept further ETH deposits
The Ownable contract we inherit from contains a modifier onlyOwner which restricts a function to only be able to be called by the contract owner. Let's implement withdrawEther using that modifier.

  /// @dev withdrawEther allows the contract owner (deployer) to withdraw the ETH from the contract
  function withdrawEther() external onlyOwner {
      payable(owner()).transfer(address(this).balance);
  }

This will transfer the entire ETH balance of the contract to the owner address

Finally, to allow for adding more ETH deposits to the DAO treasury, we need to add some special functions. Normally, contract addresses cannot accept ETH sent to them, unless it was through a payable function. But we don't want users to call functions just to deposit money, they should be able to tranfer ETH directly from their wallet. For that, let's add these two functions:

  // The following two functions allow the contract to accept ETH deposits
  // directly from a wallet without calling a function
  receive() external payable {}

  fallback() external payable {}

Smart Contract Deployment

Now that we have written both our contracts, let's deploy them to the Rinkeby Testnet. Ensure you have some ETH on the Rinkeby Testnet.

Install the dotenv package from NPM to be able to use environment variables specified in .env files in the hardhat.config.js. Execute the following command in your Terminal in the hardhat-tutorial directory.

  npm install dotenv

Now create a .env file in the hardhat-tutorial directory and set the following two environment variables. Follow the instructions to get their values. Make sure the Rinkeby private key you use is has ETH on the Rinkeby Testnet.

  // Go to https://www.alchemyapi.io, sign up, create
  // a new App in its dashboard and select the network as Rinkeby, 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 RINKEBY 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
  RINKEBY_PRIVATE_KEY="add-the-rinkeby-private-key-here"

Now, let's write a deployment script to automatically deploy both our contracts for us. Create a new file named deploy.js under hardhat-tutorial/scripts, and add the following code:

  const { ethers } = require("hardhat");
  const { CRYPTODEVS_NFT_CONTRACT_ADDRESS } = require("../constants");

  async function main() {
    // Deploy the FakeNFTMarketplace contract first
    const FakeNFTMarketplace = await ethers.getContractFactory(
      "FakeNFTMarketplace"
    );
    const fakeNftMarketplace = await FakeNFTMarketplace.deploy();
    await fakeNftMarketplace.deployed();

    console.log("FakeNFTMarketplace deployed to: ", fakeNftMarketplace.address);

    // Now deploy the CryptoDevsDAO contract
    const CryptoDevsDAO = await ethers.getContractFactory("CryptoDevsDAO");
    const cryptoDevsDAO = await CryptoDevsDAO.deploy(
      fakeNftMarketplace.address,
      CRYPTODEVS_NFT_CONTRACT_ADDRESS,
      {
        // This assumes your account has at least 1 ETH in it's account
        // Change this value as you want
        value: ethers.utils.parseEther("1"),
      }
    );
    await cryptoDevsDAO.deployed();

    console.log("CryptoDevsDAO deployed to: ", cryptoDevsDAO.address);
  }

  main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });

As you may have noticed, deploy.js imports a variable called CRYPTODEVS_NFT_CONTRACT_ADDRESS from a file named constants. Let's make that. Create a new file named constants.js in the hardhat-tutorial directory.

  // Replace the value with your NFT contract address
  const CRYPTODEVS_NFT_CONTRACT_ADDRESS =
    "YOUR_CRYPTODEVS_NFT_CONTRACT_ADDRESS_HERE";

  module.exports = { CRYPTODEVS_NFT_CONTRACT_ADDRESS };

Now, let's add the Rinkeby Network to your Hardhat Config so we can deploy to Rinkeby. Open your hardhat.config.js file and replace it with the following:

  require("@nomiclabs/hardhat-waffle");
  require("dotenv").config({ path: ".env" });

  const ALCHEMY_API_KEY_URL = process.env.ALCHEMY_API_KEY_URL;

  const RINKEBY_PRIVATE_KEY = process.env.RINKEBY_PRIVATE_KEY;

  module.exports = {
    solidity: "0.8.4",
    networks: {
      rinkeby: {
        url: ALCHEMY_API_KEY_URL,
        accounts: [RINKEBY_PRIVATE_KEY],
      },
    },
  };

Let's make sure everything compiles before proceeding. Execute the following command from your Terminal within the hardhat-tutorial folder.

  npx hardhat compile

and make sure there are no compilation errors.
If you do face compilation errors, try comparing your code against the final version present here

Let's deploy! Execute the following command in your Terminal from the hardhat-tutorial directory

  npx hardhat run scripts/deploy.js --network rinkeby

Save the FakeNFTMarketplace and CryptoDevsDAO contract addresses that get printed in your Terminal. You will need those later.

Frontend Development

Whew! So much coding!

We've successfully developed and deployed our contracts to the Rinkeby Testnet. Now, it's time to build the Frontend interface so users can create and vote on proposals from the website.

To develop the website, we will be using Next.js as we have so far, which is a meta-framework built on top of React.

Let's get started by creating a new next app. Your folder structure should look like this after setting up the next app:

  - DAO-Tutorial
      - hardhat-tutorial
      - my-app

To create my-app, execute the following command in your Terminal within the DAO-Tutorial directory

  npx create-next-app@latest

and press Enter for all the question prompts. This should create the my-app folder and setup a basic Next.js project.

Let's see if everything works. Run the following in your Terminal

  cd my-app
  npm run dev

Your website should be up and running at http://localhost:3000. However, this is a basic starter Next.js project and we need to add code for it to do what we want.
Let's install the web3modal and ethers library. Web3Modal will allow us to support connecting to wallets in the browser, and Ethers will be used to interact with the blockchain. Run this in your Terminal from the my-app directory.

  npm install web3modal ethers

Download and save the following file as 0.svg in my-app/public/cryptodevs. We will display this image on the webpage. NOTE: You need to create the cryptodevs folder inside public. Download Image
Add the following CSS styles in my-app/styles/Home.modules.css

  .main {
    min-height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
  }

  .footer {
    display: flex;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    justify-content: center;
    align-items: center;
  }

  .image {
    width: 70%;
    height: 50%;
    margin-left: 20%;
  }

  .title {
    font-size: 2rem;
    margin: 2rem 0;
  }

  .description {
    line-height: 1;
    margin: 2rem 0;
    font-size: 1.2rem;
  }

  .button {
    border-radius: 4px;
    background-color: blue;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 10px;
    width: 200px;
    cursor: pointer;
    margin-right: 2%;
  }

  .button2 {
    border-radius: 4px;
    background-color: indigo;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 10px;
    cursor: pointer;
    margin-right: 2%;
    margin-top: 1rem;
  }

  .proposalCard {
    width: fit-content;
    margin-top: 0.25rem;
    border: black 2px solid;
    flex: 1;
    flex-direction: column;
  }

  .container {
    margin-top: 2rem;
  }

  .flex {
    flex: 1;
    justify-content: space-between;
  }

  @media (max-width: 1000px) {
    .main {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

The website also needs to read/write data from two smart contracts - CryptoDevsDAO and CryptoDevsNFT. Let's store their contract addresses and ABIs in a constants file. Create a constants.js file in the my-app directory.

  export const CRYPTODEVS_DAO_CONTRACT_ADDRESS = "";
  export const CRYPTODEVS_NFT_CONTRACT_ADDRESS = "";

  export const CRYPTODEVS_DAO_ABI = [];
  export const CRYPTODEVS_NFT_ABI = [];

Replace the contract address and ABI values with your relevant contract addresses and ABIs.
Now for the actual cool website code. Open up my-app/pages/index.js and write the following code. Explanation of the code can be found in the comments.

  import { Contract, providers } from "ethers";
  import { formatEther } from "ethers/lib/utils";
  import Head from "next/head";
  import { useEffect, useRef, useState } from "react";
  import Web3Modal from "web3modal";
  import {
    CRYPTODEVS_DAO_ABI,
    CRYPTODEVS_DAO_CONTRACT_ADDRESS,
    CRYPTODEVS_NFT_ABI,
    CRYPTODEVS_NFT_CONTRACT_ADDRESS,
  } from "../constants";
  import styles from "../styles/Home.module.css";

  export default function Home() {
    // ETH Balance of the DAO contract
    const [treasuryBalance, setTreasuryBalance] = useState("0");
    // Number of proposals created in the DAO
    const [numProposals, setNumProposals] = useState("0");
    // Array of all proposals created in the DAO
    const [proposals, setProposals] = useState([]);
    // User's balance of CryptoDevs NFTs
    const [nftBalance, setNftBalance] = useState(0);
    // Fake NFT Token ID to purchase. Used when creating a proposal.
    const [fakeNftTokenId, setFakeNftTokenId] = useState("");
    // One of "Create Proposal" or "View Proposals"
    const [selectedTab, setSelectedTab] = useState("");
    // True if waiting for a transaction to be mined, false otherwise.
    const [loading, setLoading] = useState(false);
    // True if user has connected their wallet, false otherwise
    const [walletConnected, setWalletConnected] = useState(false);
    const web3ModalRef = useRef();

    // Helper function to connect wallet
    const connectWallet = async () => {
      try {
        await getProviderOrSigner();
        setWalletConnected(true);
      } catch (error) {
        console.error(error);
      }
    };

    // Reads the ETH balance of the DAO contract and sets the `treasuryBalance` state variable
    const getDAOTreasuryBalance = async () => {
      try {
        const provider = await getProviderOrSigner();
        const balance = await provider.getBalance(
          CRYPTODEVS_DAO_CONTRACT_ADDRESS
        );
        setTreasuryBalance(balance.toString());
      } catch (error) {
        console.error(error);
      }
    };

    // Reads the number of proposals in the DAO contract and sets the `numProposals` state variable
    const getNumProposalsInDAO = async () => {
      try {
        const provider = await getProviderOrSigner();
        const contract = getDaoContractInstance(provider);
        const daoNumProposals = await contract.numProposals();
        setNumProposals(daoNumProposals.toString());
      } catch (error) {
        console.error(error);
      }
    };

    // Reads the balance of the user's CryptoDevs NFTs and sets the `nftBalance` state variable
    const getUserNFTBalance = async () => {
      try {
        const signer = await getProviderOrSigner(true);
        const nftContract = getCryptodevsNFTContractInstance(signer);
        const balance = await nftContract.balanceOf(signer.getAddress());
        setNftBalance(parseInt(balance.toString()));
      } catch (error) {
        console.error(error);
      }
    };

    // Calls the `createProposal` function in the contract, using the tokenId from `fakeNftTokenId`
    const createProposal = async () => {
      try {
        const signer = await getProviderOrSigner(true);
        const daoContract = getDaoContractInstance(signer);
        const txn = await daoContract.createProposal(fakeNftTokenId);
        setLoading(true);
        await txn.wait();
        await getNumProposalsInDAO();
        setLoading(false);
      } catch (error) {
        console.error(error);
        window.alert(error.data.message);
      }
    };

    // Helper function to fetch and parse one proposal from the DAO contract
    // Given the Proposal ID
    // and converts the returned data into a Javascript object with values we can use
    const fetchProposalById = async (id) => {
      try {
        const provider = await getProviderOrSigner();
        const daoContract = getDaoContractInstance(provider);
        const proposal = await daoContract.proposals(id);
        const parsedProposal = {
          proposalId: id,
          nftTokenId: proposal.nftTokenId.toString(),
          deadline: new Date(parseInt(proposal.deadline.toString()) * 1000),
          yayVotes: proposal.yayVotes.toString(),
          nayVotes: proposal.nayVotes.toString(),
          executed: proposal.executed,
        };
        return parsedProposal;
      } catch (error) {
        console.error(error);
      }
    };

    // Runs a loop `numProposals` times to fetch all proposals in the DAO
    // and sets the `proposals` state variable
    const fetchAllProposals = async () => {
      try {
        const proposals = [];
        for (let i = 0; i < numProposals; i++) {
          const proposal = await fetchProposalById(i);
          proposals.push(proposal);
        }
        setProposals(proposals);
        return proposals;
      } catch (error) {
        console.error(error);
      }
    };

    // Calls the `voteOnProposal` function in the contract, using the passed
    // proposal ID and Vote
    const voteOnProposal = async (proposalId, _vote) => {
      try {
        const signer = await getProviderOrSigner(true);
        const daoContract = getDaoContractInstance(signer);

        let vote = _vote === "YAY" ? 0 : 1;
        const txn = await daoContract.voteOnProposal(proposalId, vote);
        setLoading(true);
        await txn.wait();
        setLoading(false);
        await fetchAllProposals();
      } catch (error) {
        console.error(error);
        window.alert(error.data.message);
      }
    };

    // Calls the `executeProposal` function in the contract, using
    // the passed proposal ID
    const executeProposal = async (proposalId) => {
      try {
        const signer = await getProviderOrSigner(true);
        const daoContract = getDaoContractInstance(signer);
        const txn = await daoContract.executeProposal(proposalId);
        setLoading(true);
        await txn.wait();
        setLoading(false);
        await fetchAllProposals();
      } catch (error) {
        console.error(error);
        window.alert(error.data.message);
      }
    };

    // Helper function to fetch a Provider/Signer instance from Metamask
    const getProviderOrSigner = async (needSigner = false) => {
      const provider = await web3ModalRef.current.connect();
      const web3Provider = new providers.Web3Provider(provider);

      const { chainId } = await web3Provider.getNetwork();
      if (chainId !== 4) {
        window.alert("Please switch to the Rinkeby network!");
        throw new Error("Please switch to the Rinkeby network");
      }

      if (needSigner) {
        const signer = web3Provider.getSigner();
        return signer;
      }
      return web3Provider;
    };

    // Helper function to return a DAO Contract instance
    // given a Provider/Signer
    const getDaoContractInstance = (providerOrSigner) => {
      return new Contract(
        CRYPTODEVS_DAO_CONTRACT_ADDRESS,
        CRYPTODEVS_DAO_ABI,
        providerOrSigner
      );
    };

    // Helper function to return a CryptoDevs NFT Contract instance
    // given a Provider/Signer
    const getCryptodevsNFTContractInstance = (providerOrSigner) => {
      return new Contract(
        CRYPTODEVS_NFT_CONTRACT_ADDRESS,
        CRYPTODEVS_NFT_ABI,
        providerOrSigner
      );
    };

    // piece of code that runs everytime the value of `walletConnected` changes
    // so when a wallet connects or disconnects
    // Prompts user to connect wallet if not connected
    // and then calls helper functions to fetch the
    // DAO Treasury Balance, User NFT Balance, and Number of Proposals in the DAO
    useEffect(() => {
      if (!walletConnected) {
        web3ModalRef.current = new Web3Modal({
          network: "rinkeby",
          providerOptions: {},
          disableInjectedProvider: false,
        });

        connectWallet().then(() => {
          getDAOTreasuryBalance();
          getUserNFTBalance();
          getNumProposalsInDAO();
        });
      }
    }, [walletConnected]);

    // Piece of code that runs everytime the value of `selectedTab` changes
    // Used to re-fetch all proposals in the DAO when user switches
    // to the 'View Proposals' tab
    useEffect(() => {
      if (selectedTab === "View Proposals") {
        fetchAllProposals();
      }
    }, [selectedTab]);

    // Render the contents of the appropriate tab based on `selectedTab`
    function renderTabs() {
      if (selectedTab === "Create Proposal") {
        return renderCreateProposalTab();
      } else if (selectedTab === "View Proposals") {
        return renderViewProposalsTab();
      }
      return null;
    }

    // Renders the 'Create Proposal' tab content
    function renderCreateProposalTab() {
      if (loading) {
        return (
          <div className={styles.description}>
            Loading... Waiting for transaction...
          </div>
        );
      } else if (nftBalance === 0) {
        return (
          <div className={styles.description}>
            You do not own any CryptoDevs NFTs. <br />
            <b>You cannot create or vote on proposals</b>
          </div>
        );
      } else {
        return (
          <div className={styles.container}>
            <label>Fake NFT Token ID to Purchase: </label>
            <input
              placeholder="0"
              type="number"
              onChange={(e) => setFakeNftTokenId(e.target.value)}
            />
            <button className={styles.button2} onClick={createProposal}>
              Create
            </button>
          </div>
        );
      }
    }

    // Renders the 'View Proposals' tab content
    function renderViewProposalsTab() {
      if (loading) {
        return (
          <div className={styles.description}>
            Loading... Waiting for transaction...
          </div>
        );
      } else if (proposals.length === 0) {
        return (
          <div className={styles.description}>
            No proposals have been created
          </div>
        );
      } else {
        return (
          <div>
            {proposals.map((p, index) => (
              <div key={index} className={styles.proposalCard}>
                <p>Proposal ID: {p.proposalId}</p>
                <p>Fake NFT to Purchase: {p.nftTokenId}</p>
                <p>Deadline: {p.deadline.toLocaleString()}</p>
                <p>Yay Votes: {p.yayVotes}</p>
                <p>Nay Votes: {p.nayVotes}</p>
                <p>Executed?: {p.executed.toString()}</p>
                {p.deadline.getTime() > Date.now() && !p.executed ? (
                  <div className={styles.flex}>
                    <button
                      className={styles.button2}
                      onClick={() => voteOnProposal(p.proposalId, "YAY")}
                    >
                      Vote YAY
                    </button>
                    <button
                      className={styles.button2}
                      onClick={() => voteOnProposal(p.proposalId, "NAY")}
                    >
                      Vote NAY
                    </button>
                  </div>
                ) : p.deadline.getTime() < Date.now() && !p.executed ? (
                  <div className={styles.flex}>
                    <button
                      className={styles.button2}
                      onClick={() => executeProposal(p.proposalId)}
                    >
                      Execute Proposal{" "}
                      {p.yayVotes > p.nayVotes ? "(YAY)" : "(NAY)"}
                    </button>
                  </div>
                ) : (
                  <div className={styles.description}>Proposal Executed</div>
                )}
              </div>
            ))}
          </div>
        );
      }
    }

    return (
      <div>
        <Head>
          <title>CryptoDevs DAO</title>
          <meta name="description" content="CryptoDevs DAO" />
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <div className={styles.main}>
          <div>
            <h1 className={styles.title}>Welcome to Crypto Devs!</h1>
            <div className={styles.description}>Welcome to the DAO!</div>
            <div className={styles.description}>
              Your CryptoDevs NFT Balance: {nftBalance}
              <br />
              Treasury Balance: {formatEther(treasuryBalance)} ETH
              <br />
              Total Number of Proposals: {numProposals}
            </div>
            <div className={styles.flex}>
              <button
                className={styles.button}
                onClick={() => setSelectedTab("Create Proposal")}
              >
                Create Proposal
              </button>
              <button
                className={styles.button}
                onClick={() => setSelectedTab("View Proposals")}
              >
                View Proposals
              </button>
            </div>
            {renderTabs()}
          </div>
          <div>
            <img className={styles.image} src="/cryptodevs/0.svg" />
          </div>
        </div>

        <footer className={styles.footer}>
          Made with &#10084; by Crypto Devs
        </footer>
      </div>
    );
  }

Let's run it! In your terminal, from the my-app directory, execute:

  npm run dev

to see your website in action. It should look like the screenshot at the beginning of this tutorial.

Congratulations! Your CryptoDevs DAO website should now be working.

Testing

Create a couple of proposals
Try voting YAY on one, and NAY on the other
Wait for 5 minutes for their deadlines to pass
Execute both of them.
Watch the balance of the DAO Treasury go down by 0.1 ETH due to the proposal which passed as it bought an NFT upon execution.

Push to Github

Make sure to push all this code to Github before proceeding to the next step.

Website Deployment

What good is a website if you cannot share it with others? Let's work on deploying your dApp to the world so you can share it with all your LearnWeb3DAO frens.

Go to Vercel Dashboard and sign in with your GitHub account.
Click on the New Project button and select your DAO-Tutorial repo.
When configuring your new project, Vercel will allow you to customize your Root Directory
Since our Next.js application is within a subfolder of the repo, we need to modify it.
Click Edit next to Root Directory and set it to my-app.
Select the framework as Next.js
Click Deploy

Now you can see your deployed website by going to your Vercel Dashboard, selecting your project, and copying the domain from there!

CONGRATULATIONS! You're all done!

Hopefully you enjoyed this tutorial. Don't forget to share your DAO website in the #showcase channel on Discord :D

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

Launch an ICO on Ethereum using Solidity, Next.js, ethers.js, Web3Modal. Airdrop free tokens to NFT holders.

Haardik — Sun, 15 May 2022 08:16:23 +0000

ICO (Initial Coin Offering)

Now its time for you to launch a token for Crypto Devs. Let's call the token Crypto Dev Token.

Prefer a Video?

If you would rather learn from a video, we have a recording available of this tutorial on our YouTube. Watch the video by clicking on the screenshot below, or go ahead and read the tutorial!

Build

Requirements

There should be a max of 10,000 CD tokens.
Every Crypto Dev NFT holder should get 10 tokens for free but they would have to pay the gas fees.
The price of one CD at the time of ICO should be 0.001 ether
There should be a website which users can visit for the ICO.

Let's start building 🚀

Prerequisites

You must have completed the NFT-Collection tutorial

Theory

What is an ERC20?
- ERC-20 is a technical standard; it is used for all smart contracts on the Ethereum blockchain for token implementation and provides a list of rules that all Ethereum-based tokens must follow.
- Please look at all the ERC20 functions before moving ahead

Build

Smart Contract

To build the smart contract we would be using Hardhat.Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. In simple words you can write your smart contract, deploy them, run tests, and debug your code.

To setup a Hardhat project, Open up a terminal and execute these commands

  mkdir hardhat-tutorial
  cd hardhat-tutorial
  npm init --yes
  npm install --save-dev hardhat

In the same directory where you installed Hardhat run:

  npx hardhat

Select Create a basic sample project
Press enter for the already specified Hardhat Project root
Press enter for the question on if you want to add a .gitignore
Press enter for Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?

Now you have a hardhat project ready to go!

If you are not on mac, please do this extra step and install these libraries as well :)

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

In the same terminal now install @openzeppelin/contracts as we would be importing Openzeppelin's ERC20 Contract and Openzeppelin's Ownable Contract in our CryptoDevToken contract

  npm install @openzeppelin/contracts

We will need to call the CryptoDevs Contract that you deployed for your previous level to check for owners of CryptoDev NFT's. As we only need to call tokenOfOwnerByIndex and balanceOf methods, we can create an interface for CryptoDevs contract with only these two functions.This way we would save gas as we would not need to inherit and deploy the entire CryptoDevs Contract but only a part of it.
Create a new file inside the contracts directory and call it ICryptoDevs.sol and add the following lines

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

  interface ICryptoDevs {
      /**
       * @dev Returns a token ID owned by `owner` at a given `index` of its token list.
       * Use along with {balanceOf} to enumerate all of ``owner``'s tokens.
       */
      function tokenOfOwnerByIndex(address owner, uint256 index)
          external
          view
          returns (uint256 tokenId);

      /**
       * @dev Returns the number of tokens in ``owner``'s account.
       */
      function balanceOf(address owner) external view returns (uint256 balance);
  }

Create a new file inside the contracts directory and call it CryptoDevToken.sol and add the following lines

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

    import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
    import "@openzeppelin/contracts/access/Ownable.sol";
    import "./ICryptoDevs.sol";

    contract CryptoDevToken is ERC20, Ownable {
        // Price of one Crypto Dev token
        uint256 public constant tokenPrice = 0.001 ether;
        // Each NFT would give the user 10 tokens
        // It needs to be represented as 10 * (10 ** 18) as ERC20 tokens are represented by the smallest denomination possible for the token
        // By default, ERC20 tokens have the smallest denomination of 10^(-18). This means, having a balance of (1)
        // is actually equal to (10 ^ -18) tokens.
        // Owning 1 full token is equivalent to owning (10^18) tokens when you account for the decimal places.
        // More information on this can be found in the Freshman Track Cryptocurrency tutorial.
        uint256 public constant tokensPerNFT = 10 * 10**18;
        // the max total supply is 10000 for Crypto Dev Tokens
        uint256 public constant maxTotalSupply = 10000 * 10**18;
        // CryptoDevsNFT contract instance
        ICryptoDevs CryptoDevsNFT;
        // Mapping to keep track of which tokenIds have been claimed
        mapping(uint256 => bool) public tokenIdsClaimed;

        constructor(address _cryptoDevsContract) ERC20("Crypto Dev Token", "CD") {
            CryptoDevsNFT = ICryptoDevs(_cryptoDevsContract);
        }

        /**
         * @dev Mints `amount` number of CryptoDevTokens
         * Requirements:
         * - `msg.value` should be equal or greater than the tokenPrice * amount
         */
        function mint(uint256 amount) public payable {
            // the value of ether that should be equal or greater than tokenPrice * amount;
            uint256 _requiredAmount = tokenPrice * amount;
            require(msg.value >= _requiredAmount, "Ether sent is incorrect");
            // total tokens + amount <= 10000, otherwise revert the transaction
            uint256 amountWithDecimals = amount * 10**18;
            require(
                (totalSupply() + amountWithDecimals) <= maxTotalSupply,
                "Exceeds the max total supply available."
            );
            // call the internal function from Openzeppelin's ERC20 contract
            _mint(msg.sender, amountWithDecimals);
        }

        /**
         * @dev Mints tokens based on the number of NFT's held by the sender
         * Requirements:
         * balance of Crypto Dev NFT's owned by the sender should be greater than 0
         * Tokens should have not been claimed for all the NFTs owned by the sender
         */
        function claim() public {
            address sender = msg.sender;
            // Get the number of CryptoDev NFT's held by a given sender address
            uint256 balance = CryptoDevsNFT.balanceOf(sender);
            // If the balance is zero, revert the transaction
            require(balance > 0, "You dont own any Crypto Dev NFT's");
            // amount keeps track of number of unclaimed tokenIds
            uint256 amount = 0;
            // loop over the balance and get the token ID owned by `sender` at a given `index` of its token list.
            for (uint256 i = 0; i < balance; i++) {
                uint256 tokenId = CryptoDevsNFT.tokenOfOwnerByIndex(sender, i);
                // if the tokenId has not been claimed, increase the amount
                if (!tokenIdsClaimed[tokenId]) {
                    amount += 1;
                    tokenIdsClaimed[tokenId] = true;
                }
            }
            // If all the token Ids have been claimed, revert the transaction;
            require(amount > 0, "You have already claimed all the tokens");
            // call the internal function from Openzeppelin's ERC20 contract
            // Mint (amount * 10) tokens for each NFT
            _mint(msg.sender, amount * tokensPerNFT);
        }

        // Function to receive Ether. msg.data must be empty
        receive() external payable {}

        // Fallback function is called when msg.data is not empty
        fallback() external payable {}
    }

Now we would install dotenv package to be able to import the env file and use it in our config. Open up a terminal pointing athardhat-tutorial directory and execute this command

  npm install dotenv

Now create a .env file in the hardhat-tutorial folder and add the following lines, use the instructions in the comments to get your Alchemy API Key URL and RINKEBY Private Key. Make sure that the account from which you get your rinkeby private key is funded with Rinkeby Ether.


  // Go to https://www.alchemyapi.io, sign up, create
  // a new App in its dashboard and select the network as Rinkeby, 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 RINKEBY 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
  RINKEBY_PRIVATE_KEY="add-the-rinkeby-private-key-here"

Lets deploy the contract to rinkeby network. Create a new file named deploy.js under the scripts folder
Now we would write some code to deploy the contract in deploy.js file.

  const { ethers } = require("hardhat");
  require("dotenv").config({ path: ".env" });
  const { CRYPTO_DEVS_NFT_CONTRACT_ADDRESS } = require("../constants");

  async function main() {
    // Address of the Crypto Devs NFT contract that you deployed in the previous module
    const cryptoDevsNFTContract = CRYPTO_DEVS_NFT_CONTRACT_ADDRESS;

    /*
      A ContractFactory in ethers.js is an abstraction used to deploy new smart contracts,
      so cryptoDevsTokenContract here is a factory for instances of our CryptoDevToken contract.
      */
    const cryptoDevsTokenContract = await ethers.getContractFactory(
      "CryptoDevToken"
    );

    // deploy the contract
    const deployedCryptoDevsTokenContract = await cryptoDevsTokenContract.deploy(
      cryptoDevsNFTContract
    );

    // print the address of the deployed contract
    console.log(
      "Crypto Devs Token Contract Address:",
      deployedCryptoDevsTokenContract.address
    );
  }

  // Call the main function and catch if there is any error
  main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });

You would see that the deploy.js file requires a constant. Let's create a constants folder under hardhat-tutorial folder.
Inside the constants folder create a new file named index.js and add the following lines to it.
- Replace "address-of-the-nft-contract" with the address of the CryptoDevs.sol that you deployed in the previous module(NFT-Collection)
```
// Address of the NFT Contract that you deployed
const CRYPTO_DEVS_NFT_CONTRACT_ADDRESS = "address-of-the-nft-contract";

module.exports = { CRYPTO_DEVS_NFT_CONTRACT_ADDRESS };
```
Now open the hardhat.config.js file, we would add the rinkeby network here so that we can deploy our contract to rinkeby. Replace all the lines in the hardhat.config.js file with the given below lines

  require("@nomiclabs/hardhat-waffle");
  require("dotenv").config({ path: ".env" });

  const ALCHEMY_API_KEY_URL = process.env.ALCHEMY_API_KEY_URL;

  const RINKEBY_PRIVATE_KEY = process.env.RINKEBY_PRIVATE_KEY;

  module.exports = {
    solidity: "0.8.10",
    networks: {
      rinkeby: {
        url: ALCHEMY_API_KEY_URL,
        accounts: [RINKEBY_PRIVATE_KEY],
      },
    },
  };

Compile the contract, open up a terminal pointing athardhat-tutorial directory and execute this command

     npx hardhat compile

To deploy, open up a terminal pointing athardhat-tutorial directory and execute this command

    npx hardhat run scripts/deploy.js --network rinkeby

Save the CryptoDevToken Contract Address that was printed on your terminal in your notepad, you would need it futher down in the tutorial.

Website

To develop the website we would be using React and Next Js. React is a javascript framework which is used to make websites and Next Js is built on top of React.
First, You would need to create a new next app. Your folder structure should look something like

     - ICO
         - hardhat-tutorial
         - my-app

To create this my-app, in the terminal point to ICO folder and type

      npx create-next-app@latest

and press enter for all the questions

Now to run the app, execute these commands in the terminal

  cd my-app
  npm run dev

Now go to http://localhost:3000, your app should be running 🤘
Now lets install Web3Modal library(https://github.com/Web3Modal/web3modal). Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc), You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane.
Open up a terminal pointing atmy-app directory and execute this command

    npm install web3modal

In the same terminal also install ethers.js

  npm i ethers

In your public folder, download the following image (https://github.com/LearnWeb3DAO/NFT-Collection/tree/main/my-app/public/cryptodevs/0.svg). Make sure that the name of the downloaded image is 0.svg
Now go to styles folder and replace all the contents of Home.modules.css file with the following code, this would add some styling to your dapp:

  .main {
    min-height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
  }

  .footer {
    display: flex;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    justify-content: center;
    align-items: center;
  }

  .image {
    width: 70%;
    height: 50%;
    margin-left: 20%;
  }

  .input {
    width: 200px;
    height: 100%;
    padding: 1%;
    margin-bottom: 2%;
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
  }

  .title {
    font-size: 2rem;
    margin: 2rem 0;
  }

  .description {
    line-height: 1;
    margin: 2rem 0;
    font-size: 1.2rem;
  }

  .button {
    border-radius: 4px;
    background-color: blue;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 5px;
    width: 100px;
    cursor: pointer;
    margin-bottom: 2%;
  }
  @media (max-width: 1000px) {
    .main {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

Open you index.js file under the pages folder and paste the following code, explanation of the code can be found in the comments.

import { BigNumber, Contract, providers, utils } from "ethers";
import Head from "next/head";
import React, { useEffect, useRef, useState } from "react";
import Web3Modal from "web3modal";
import {
  NFT_CONTRACT_ABI,
  NFT_CONTRACT_ADDRESS,
  TOKEN_CONTRACT_ABI,
  TOKEN_CONTRACT_ADDRESS,
} from "../constants";
import styles from "../styles/Home.module.css";

export default function Home() {
  // Create a BigNumber `0`
  const zero = BigNumber.from(0);
  // walletConnected keeps track of whether the user's wallet is connected or not
  const [walletConnected, setWalletConnected] = useState(false);
  // loading is set to true when we are waiting for a transaction to get mined
  const [loading, setLoading] = useState(false);
  // tokensToBeClaimed keeps track of the number of tokens that can be claimed
  // based on the Crypto Dev NFT's held by the user for which they havent claimed the tokens
  const [tokensToBeClaimed, setTokensToBeClaimed] = useState(zero);
  // balanceOfCryptoDevTokens keeps track of number of Crypto Dev tokens owned by an address
  const [balanceOfCryptoDevTokens, setBalanceOfCryptoDevTokens] = useState(
    zero
  );
  // amount of the tokens that the user wants to mint
  const [tokenAmount, setTokenAmount] = useState(zero);
  // tokensMinted is the total number of tokens that have been minted till now out of 10000(max total supply)
  const [tokensMinted, setTokensMinted] = useState(zero);
  // Create a reference to the Web3 Modal (used for connecting to Metamask) which persists as long as the page is open
  const web3ModalRef = useRef();

  /**
   * getTokensToBeClaimed: checks the balance of tokens that can be claimed by the user
   */
  const getTokensToBeClaimed = async () => {
    try {
      // Get the provider from web3Modal, which in our case is MetaMask
      // No need for the Signer here, as we are only reading state from the blockchain
      const provider = await getProviderOrSigner();
      // Create an instance of NFT Contract
      const nftContract = new Contract(
        NFT_CONTRACT_ADDRESS,
        NFT_CONTRACT_ABI,
        provider
      );
      // Create an instance of tokenContract
      const tokenContract = new Contract(
        TOKEN_CONTRACT_ADDRESS,
        TOKEN_CONTRACT_ABI,
        provider
      );
      // We will get the signer now to extract the address of the currently connected MetaMask account
      const signer = await getProviderOrSigner(true);
      // Get the address associated to the signer which is connected to  MetaMask
      const address = await signer.getAddress();
      // call the balanceOf from the NFT contract to get the number of NFT's held by the user
      const balance = await nftContract.balanceOf(address);
      // balance is a Big number and thus we would compare it with Big number `zero`
      if (balance === zero) {
        setTokensToBeClaimed(zero);
      } else {
        // amount keeps track of the number of unclaimed tokens
        var amount = 0;
        // For all the NFT's, check if the tokens have already been claimed
        // Only increase the amount if the tokens have not been claimed
        // for a an NFT(for a given tokenId)
        for (var i = 0; i < balance; i++) {
          const tokenId = await nftContract.tokenOfOwnerByIndex(address, i);
          const claimed = await tokenContract.tokenIdsClaimed(tokenId);
          if (!claimed) {
            amount++;
          }
        }
        //tokensToBeClaimed has been initialized to a Big Number, thus we would convert amount
        // to a big number and then set its value
        setTokensToBeClaimed(BigNumber.from(amount));
      }
    } catch (err) {
      console.error(err);
      setTokensToBeClaimed(zero);
    }
  };

  /**
   * getBalanceOfCryptoDevTokens: checks the balance of Crypto Dev Tokens's held by an address
   */
  const getBalanceOfCryptoDevTokens = async () => {
    try {
      // Get the provider from web3Modal, which in our case is MetaMask
      // No need for the Signer here, as we are only reading state from the blockchain
      const provider = await getProviderOrSigner();
      // Create an instace of token contract
      const tokenContract = new Contract(
        TOKEN_CONTRACT_ADDRESS,
        TOKEN_CONTRACT_ABI,
        provider
      );
      // We will get the signer now to extract the address of the currently connected MetaMask account
      const signer = await getProviderOrSigner(true);
      // Get the address associated to the signer which is connected to  MetaMask
      const address = await signer.getAddress();
      // call the balanceOf from the token contract to get the number of tokens held by the user
      const balance = await tokenContract.balanceOf(address);
      // balance is already a big number, so we dont need to convert it before setting it
      setBalanceOfCryptoDevTokens(balance);
    } catch (err) {
      console.error(err);
      setBalanceOfCryptoDevTokens(zero);
    }
  };

  /**
   * mintCryptoDevToken: mints `amount` number of tokens to a given address
   */
  const mintCryptoDevToken = async (amount) => {
    try {
      // We need a Signer here since this is a 'write' transaction.
      // Create an instance of tokenContract
      const signer = await getProviderOrSigner(true);
      // Create an instance of tokenContract
      const tokenContract = new Contract(
        TOKEN_CONTRACT_ADDRESS,
        TOKEN_CONTRACT_ABI,
        signer
      );
      // Each token is of `0.001 ether`. The value we need to send is `0.001 * amount`
      const value = 0.001 * amount;
      const tx = await tokenContract.mint(amount, {
        // value signifies the cost of one crypto dev token which is "0.001" eth.
        // We are parsing `0.001` string to ether using the utils library from ethers.js
        value: utils.parseEther(value.toString()),
      });
      setLoading(true);
      // wait for the transaction to get mined
      await tx.wait();
      setLoading(false);
      window.alert("Sucessfully minted Crypto Dev Tokens");
      await getBalanceOfCryptoDevTokens();
      await getTotalTokensMinted();
      await getTokensToBeClaimed();
    } catch (err) {
      console.error(err);
    }
  };

  /**
   * claimCryptoDevTokens: Helps the user claim Crypto Dev Tokens
   */
  const claimCryptoDevTokens = async () => {
    try {
      // We need a Signer here since this is a 'write' transaction.
      // Create an instance of tokenContract
      const signer = await getProviderOrSigner(true);
      // Create an instance of tokenContract
      const tokenContract = new Contract(
        TOKEN_CONTRACT_ADDRESS,
        TOKEN_CONTRACT_ABI,
        signer
      );
      const tx = await tokenContract.claim();
      setLoading(true);
      // wait for the transaction to get mined
      await tx.wait();
      setLoading(false);
      window.alert("Sucessfully claimed Crypto Dev Tokens");
      await getBalanceOfCryptoDevTokens();
      await getTotalTokensMinted();
      await getTokensToBeClaimed();
    } catch (err) {
      console.error(err);
    }
  };

  /**
   * getTotalTokensMinted: Retrieves how many tokens have been minted till now
   * out of the total supply
   */
  const getTotalTokensMinted = async () => {
    try {
      // Get the provider from web3Modal, which in our case is MetaMask
      // No need for the Signer here, as we are only reading state from the blockchain
      const provider = await getProviderOrSigner();
      // Create an instance of token contract
      const tokenContract = new Contract(
        TOKEN_CONTRACT_ADDRESS,
        TOKEN_CONTRACT_ABI,
        provider
      );
      // Get all the tokens that have been minted
      const _tokensMinted = await tokenContract.totalSupply();
      setTokensMinted(_tokensMinted);
    } catch (err) {
      console.error(err);
    }
  };
  /**
   * Returns a Provider or Signer object representing the Ethereum RPC with or without the
   * signing capabilities of metamask attached
   *
   * A `Provider` is needed to interact with the blockchain - reading transactions, reading balances, reading state, etc.
   *
   * A `Signer` is a special type of Provider used in case a `write` transaction needs to be made to the blockchain, which involves the connected account
   * needing to make a digital signature to authorize the transaction being sent. Metamask exposes a Signer API to allow your website to
   * request signatures from the user using Signer functions.
   *
   * @param {*} needSigner - True if you need the signer, default false otherwise
   */
  const getProviderOrSigner = async (needSigner = false) => {
    // Connect to Metamask
    // Since we store `web3Modal` as a reference, we need to access the `current` value to get access to the underlying object
    const provider = await web3ModalRef.current.connect();
    const web3Provider = new providers.Web3Provider(provider);

    // If user is not connected to the Rinkeby network, let them know and throw an error
    const { chainId } = await web3Provider.getNetwork();
    if (chainId !== 4) {
      window.alert("Change the network to Rinkeby");
      throw new Error("Change network to Rinkeby");
    }

    if (needSigner) {
      const signer = web3Provider.getSigner();
      return signer;
    }
    return web3Provider;
  };

  /*
        connectWallet: Connects the MetaMask wallet
      */
  const connectWallet = async () => {
    try {
      // Get the provider from web3Modal, which in our case is MetaMask
      // When used for the first time, it prompts the user to connect their wallet
      await getProviderOrSigner();
      setWalletConnected(true);
    } catch (err) {
      console.error(err);
    }
  };

  // useEffects are used to react to changes in state of the website
  // The array at the end of function call represents what state changes will trigger this effect
  // In this case, whenever the value of `walletConnected` changes - this effect will be called
  useEffect(() => {
    // if wallet is not connected, create a new instance of Web3Modal and connect the MetaMask wallet
    if (!walletConnected) {
      // Assign the Web3Modal class to the reference object by setting it's `current` value
      // The `current` value is persisted throughout as long as this page is open
      web3ModalRef.current = new Web3Modal({
        network: "rinkeby",
        providerOptions: {},
        disableInjectedProvider: false,
      });
      connectWallet();
      getTotalTokensMinted();
      getBalanceOfCryptoDevTokens();
      getTokensToBeClaimed();
    }
  }, [walletConnected]);

  /*
        renderButton: Returns a button based on the state of the dapp
      */
  const renderButton = () => {
    // If we are currently waiting for something, return a loading button
    if (loading) {
      return (
        <div>
          <button className={styles.button}>Loading...</button>
        </div>
      );
    }
    // If tokens to be claimed are greater than 0, Return a claim button
    if (tokensToBeClaimed > 0) {
      return (
        <div>
          <div className={styles.description}>
            {tokensToBeClaimed * 10} Tokens can be claimed!
          </div>
          <button className={styles.button} onClick={claimCryptoDevTokens}>
            Claim Tokens
          </button>
        </div>
      );
    }
    // If user doesn't have any tokens to claim, show the mint button
    return (
      <div style={{ display: "flex-col" }}>
        <div>
          <input
            type="number"
            placeholder="Amount of Tokens"
            // BigNumber.from converts the `e.target.value` to a BigNumber
            onChange={(e) => setTokenAmount(BigNumber.from(e.target.value))}
            className={styles.input}
          />
        </div>

        <button
          className={styles.button}
          disabled={!(tokenAmount > 0)}
          onClick={() => mintCryptoDevToken(tokenAmount)}
        >
          Mint Tokens
        </button>
      </div>
    );
  };

  return (
    <div>
      <Head>
        <title>Crypto Devs</title>
        <meta name="description" content="ICO-Dapp" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.main}>
        <div>
          <h1 className={styles.title}>Welcome to Crypto Devs ICO!</h1>
          <div className={styles.description}>
            You can claim or mint Crypto Dev tokens here
          </div>
          {walletConnected ? (
            <div>
              <div className={styles.description}>
                {/* Format Ether helps us in converting a BigNumber to string */}
                You have minted {utils.formatEther(balanceOfCryptoDevTokens)} Crypto
                Dev Tokens
              </div>
              <div className={styles.description}>
                {/* Format Ether helps us in converting a BigNumber to string */}
                Overall {utils.formatEther(tokensMinted)}/10000 have been minted!!!
              </div>
              {renderButton()}
            </div>
          ) : (
            <button onClick={connectWallet} className={styles.button}>
              Connect your wallet
            </button>
          )}
        </div>
        <div>
          <img className={styles.image} src="./0.svg" />
        </div>
      </div>

      <footer className={styles.footer}>
        Made with &#10084; by Crypto Devs
      </footer>
    </div>
  );
}

Now create a new folder under the my-app folder and name it constants.
In the constants folder create a file, index.js and paste the following code.
- Replace "abi-of-your-nft-contract" with the abi of the NFT contract that you deployed in the last tutorial.
- Replace "address-of-your-nft-contract" with the address of the NFT contract that you deployed in your previous tutorial.
- Replace "abi-of-your-token-contract" by the abi of the token contract. To get the abi of the Token contract, go to hardhat-tutorial/artifacts/contracts/CryptoDevToken.sol and then fromCryptoDevToken.json file get the array marked under the "abi" key.
- Replace "address-of-your-token-contract" with the address of the token contract that you saved to your notepad, early on in the tutorial

  export const NFT_CONTRACT_ABI = "abi-of-your-nft-contract";
  export const NFT_CONTRACT_ADDRESS = "address-of-your-nft-contract";
  export const TOKEN_CONTRACT_ABI = "abi-of-your-token-contract";
  export const TOKEN_CONTRACT_ADDRESS = "address-of-your-token-contract";

Now in your terminal which is pointing to my-app folder, execute

  npm run dev

Your ICO dapp should now work without errors 🚀

Push to Github

Make sure to push all this code to Github before proceeding to the next step.

Deploying your dApp

We will now deploy your dApp, so that everyone can see your website and you can share it with all of your LearnWeb3 DAO friends.

Go to https://vercel.com/ and sign in with your GitHub
Then click on New Project button and then select your ICO dApp repo
When configuring your new project, Vercel will allow you to customize your Root Directory
Click Edit next to Root Directory and set it to my-app
Select the Framework Preset as Next.js
Click Deploy
Now you can see your deployed website by going to your dashboard, selecting your project, and copying the URL from there!

CONGRATULATIONS! You're all done!

Hopefully you enjoyed this tutorial. Don't forget to share your ICO website in the #showcase channel on Discord :D

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

Build an entire NFT Collection on Ethereum using Solidity, Next.js, Web3Modal, Ethers.js

Haardik — Sun, 15 May 2022 08:14:30 +0000

NFT-Collection

Now its time for you to launch your own NFT collection - Crypto Devs.

Requirements

There should only exist 20 Crypto Dev NFT's and each one of them should be unique.
User's should be able to mint only 1 NFT with one transaction.
Whitelisted users, should have a 5 min presale period before the actual sale where they are guaranteed 1 NFT per transaction.
There should be a website for your NFT Collection.

Lets start building 🚀

Prerequisites

You should have completed the Whitelist dApp tutorial

Theory

What is a Non-Fungible Token?
Fungible means to be the same or interchangeable eg Eth is fungible. With this in mind, NFTs are unique; each one is different. Every single token has unique characteristics and values. They are all distinguishable from one another and are not interchangeable eg Unique Art
What is ERC-721?
ERC-721 is an open standard that describes how to build Non-Fungible tokens on EVM (Ethereum Virtual Machine) compatible blockchains; it is a standard interface for Non-Fungible tokens; it has a set of rules which make it easy to work with NFTs. Before moving ahead have a look at all the functions supported by ERC721

Build

Prefer a Video?

If you would rather learn from a video, we have a recording available of this tutorial on our YouTube. Watch the video by clicking on the screenshot below, or go ahead and read the tutorial!

Smart Contract

We would also be using Ownable.sol from Openzeppelin which helps you manage the Ownership of a contract
- By default, the owner of an Ownable contract is the account that deployed it, which is usually exactly what you want.
- Ownable also lets you:
- transferOwnership from the owner account to a new one, and
- renounceOwnership for the owner to relinquish this administrative privilege, a common pattern after an initial stage with centralized administration is over.
We would also be using an extension of ERC721 known as ERC721 Enumerable
- ERC721 Enumerable is helps you to keep track of all the tokenIds in the contract and also the tokensIds held by an address for a given contract.
- Please have a look at the functions it implements before moving ahead

To build the smart contract we would be using Hardhat. Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. In simple words you can write your smart contract, deploy them, run tests, and debug your code.

To setup a Hardhat project, Open up a terminal and execute these commands

  mkdir hardhat-tutorial
  cd hardhat-tutorial
  npm init --yes
  npm install --save-dev hardhat

In the same directory where you installed Hardhat run:

  npx hardhat

Select Create a basic sample project
Press enter for the already specified Hardhat Project root
Press enter for the question on if you want to add a .gitignore
Press enter for Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?

Now you have a hardhat project ready to go!

If you are not on mac, please do this extra step and install these libraries as well :)

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

and press enter for all the questions.

In the same terminal now install @openzeppelin/contracts as we would be importing Openzeppelin's ERC721Enumerable Contract in our CryptoDevs contract.

  npm install @openzeppelin/contracts

We will need to call the Whitelist Contract that you deployed for your previous level to check for addresses that were whitelisted and give them presale access. As we only need to call mapping(address => bool) public whitelistedAddresses; We can create an interface for Whitelist contract with a function only for this mapping, this way we would save gas as we would not need to inherit and deploy the entire Whitelist Contract but only a part of it.
Create a new file inside the contracts directory and call it IWhitelist.sol

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

      interface IWhitelist {
          function whitelistedAddresses(address) external view returns (bool);
      }

Now lets create a new file inside the contracts directory and call it CryptoDevs.sol

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

    import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
    import "@openzeppelin/contracts/access/Ownable.sol";
    import "./IWhitelist.sol";

    contract CryptoDevs is ERC721Enumerable, Ownable {
        /**
         * @dev _baseTokenURI for computing {tokenURI}. If set, the resulting URI for each
         * token will be the concatenation of the `baseURI` and the `tokenId`.
         */
        string _baseTokenURI;

        //  _price is the price of one Crypto Dev NFT
        uint256 public _price = 0.01 ether;

        // _paused is used to pause the contract in case of an emergency
        bool public _paused;

        // max number of CryptoDevs
        uint256 public maxTokenIds = 20;

        // total number of tokenIds minted
        uint256 public tokenIds;

        // Whitelist contract instance
        IWhitelist whitelist;

        // boolean to keep track of whether presale started or not
        bool public presaleStarted;

        // timestamp for when presale would end
        uint256 public presaleEnded;

        modifier onlyWhenNotPaused {
            require(!_paused, "Contract currently paused");
            _;
        }

        /**
         * @dev ERC721 constructor takes in a `name` and a `symbol` to the token collection.
         * name in our case is `Crypto Devs` and symbol is `CD`.
         * Constructor for Crypto Devs takes in the baseURI to set _baseTokenURI for the collection.
         * It also initializes an instance of whitelist interface.
         */
        constructor (string memory baseURI, address whitelistContract) ERC721("Crypto Devs", "CD") {
            _baseTokenURI = baseURI;
            whitelist = IWhitelist(whitelistContract);
        }

        /**
        * @dev startPresale starts a presale for the whitelisted addresses
         */
        function startPresale() public onlyOwner {
            presaleStarted = true;
            // Set presaleEnded time as current timestamp + 5 minutes
            // Solidity has cool syntax for timestamps (seconds, minutes, hours, days, years)
            presaleEnded = block.timestamp + 5 minutes;
        }

        /**
         * @dev presaleMint allows a user to mint one NFT per transaction during the presale.
         */
        function presaleMint() public payable onlyWhenNotPaused {
            require(presaleStarted && block.timestamp < presaleEnded, "Presale is not running");
            require(whitelist.whitelistedAddresses(msg.sender), "You are not whitelisted");
            require(tokenIds < maxTokenIds, "Exceeded maximum Crypto Devs supply");
            require(msg.value >= _price, "Ether sent is not correct");
            tokenIds += 1;
            //_safeMint is a safer version of the _mint function as it ensures that
            // if the address being minted to is a contract, then it knows how to deal with ERC721 tokens
            // If the address being minted to is not a contract, it works the same way as _mint
            _safeMint(msg.sender, tokenIds);
        }

        /**
        * @dev mint allows a user to mint 1 NFT per transaction after the presale has ended.
        */
        function mint() public payable onlyWhenNotPaused {
            require(presaleStarted && block.timestamp >=  presaleEnded, "Presale has not ended yet");
            require(tokenIds < maxTokenIds, "Exceed maximum Crypto Devs supply");
            require(msg.value >= _price, "Ether sent is not correct");
            tokenIds += 1;
            _safeMint(msg.sender, tokenIds);
        }

        /**
        * @dev _baseURI overides the Openzeppelin's ERC721 implementation which by default
        * returned an empty string for the baseURI
        */
        function _baseURI() internal view virtual override returns (string memory) {
            return _baseTokenURI;
        }

        /**
        * @dev setPaused makes the contract paused or unpaused
         */
        function setPaused(bool val) public onlyOwner {
            _paused = val;
        }

        /**
        * @dev withdraw sends all the ether in the contract
        * to the owner of the contract
         */
        function withdraw() public onlyOwner  {
            address _owner = owner();
            uint256 amount = address(this).balance;
            (bool sent, ) =  _owner.call{value: amount}("");
            require(sent, "Failed to send Ether");
        }

         // Function to receive Ether. msg.data must be empty
        receive() external payable {}

        // Fallback function is called when msg.data is not empty
        fallback() external payable {}
    }

Now we would install dotenv package to be able to import the env file and use it in our config. Open up a terminal pointing athardhat-tutorial directory and execute this command

  npm install dotenv

Now create a .env file in the hardhat-tutorial folder and add the following lines, use the instructions in the comments to get your Alchemy API Key URL and RINKEBY Private Key. Make sure that the account from which you get your rinkeby private key is funded with Rinkeby Ether.

  // Go to https://www.alchemyapi.io, sign up, create
  // a new App in its dashboard and select the network as Rinkeby, 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 RINKEBY 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
  RINKEBY_PRIVATE_KEY="add-the-rinkeby-private-key-here"

Lets deploy the contract to rinkeby network. Create a new file named deploy.js under the scripts folder
Now we would write some code to deploy the contract in deploy.js file.

  const { ethers } = require("hardhat");
  require("dotenv").config({ path: ".env" });
  const { WHITELIST_CONTRACT_ADDRESS, METADATA_URL } = require("../constants");

  async function main() {
    // Address of the whitelist contract that you deployed in the previous module
    const whitelistContract = WHITELIST_CONTRACT_ADDRESS;
    // URL from where we can extract the metadata for a Crypto Dev NFT
    const metadataURL = METADATA_URL;
    /*
    A ContractFactory in ethers.js is an abstraction used to deploy new smart contracts,
    so cryptoDevsContract here is a factory for instances of our CryptoDevs contract.
    */
    const cryptoDevsContract = await ethers.getContractFactory("CryptoDevs");

    // deploy the contract
    const deployedCryptoDevsContract = await cryptoDevsContract.deploy(
      metadataURL,
      whitelistContract
    );

    // print the address of the deployed contract
    console.log(
      "Crypto Devs Contract Address:",
      deployedCryptoDevsContract.address
    );
  }

  // Call the main function and catch if there is any error
  main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });

As you can read, deploy.js requires some constants. Lets create a folder named constants under the hardhat-tutorial folder
Now add an index.js file inside the constants folder and add the following lines to the file. Replace "address-of-the-whitelist-contract" with the address of the whitelist contract that you deployed in the previous tutorial. For Metadata_URL, just copy the sample one that has been provided. We would replace this further down in the tutorial.

  // Address of the Whitelist Contract that you deployed
  const WHITELIST_CONTRACT_ADDRESS = "address-of-the-whitelist-contract";
  // URL to extract Metadata for a Crypto Dev NFT
  const METADATA_URL = "https://nft-collection-sneh1999.vercel.app/api/";

  module.exports = { WHITELIST_CONTRACT_ADDRESS, METADATA_URL };

Now open the hardhat.config.js file, we would add the rinkeby network here so that we can deploy our contract to rinkeby. Replace all the lines in the hardhart.config.js file with the given below lines

  require("@nomiclabs/hardhat-waffle");
  require("dotenv").config({ path: ".env" });

  const ALCHEMY_API_KEY_URL = process.env.ALCHEMY_API_KEY_URL;

  const RINKEBY_PRIVATE_KEY = process.env.RINKEBY_PRIVATE_KEY;

  module.exports = {
    solidity: "0.8.4",
    networks: {
      rinkeby: {
        url: ALCHEMY_API_KEY_URL,
        accounts: [RINKEBY_PRIVATE_KEY],
      },
    },
  };

Compile the contract, open up a terminal pointing athardhat-tutorial directory and execute this command

    npx hardhat compile

To deploy, open up a terminal pointing athardhat-tutorial directory and execute this command

    npx hardhat run scripts/deploy.js --network rinkeby

Save the Crypto Devs Contract Address that was printed on your terminal in your notepad, you would need it futher down in the tutorial.

Website

To develop the website we would be using React and Next Js. React is a javascript framework which is used to make websites and Next Js is built on top of React.
First, You would need to create a new next app. Your folder structure should look something like

     - NFT-Collection
         - hardhat-tutorial
         - my-app

To create this my-app, in the terminal point to NFT-Collection folder and type

    npx create-next-app@latest

and press enter for all the questions

Now to run the app, execute these commands in the terminal

  cd my-app
  npm run dev

Now go to http://localhost:3000, your app should be running 🤘
Now lets install Web3Modal library(https://github.com/Web3Modal/web3modal). Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc), You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane.
Open up a terminal pointing atmy-app directory and execute this command

    npm install web3modal

In the same terminal also install ethers.js

  npm install ethers

In your public folder, download this folder and all the images in it (https://github.com/LearnWeb3DAO/NFT-Collection/tree/main/my-app/public/cryptodevs). Make sure that the name of the downloaded folder is cryptodevs
Now go to styles folder and replace all the contents of Home.modules.css file with the following code, this would add some styling to your dapp:

  .main {
    min-height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
  }

  .footer {
    display: flex;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    justify-content: center;
    align-items: center;
  }

  .image {
    width: 70%;
    height: 50%;
    margin-left: 20%;
  }

  .title {
    font-size: 2rem;
    margin: 2rem 0;
  }

  .description {
    line-height: 1;
    margin: 2rem 0;
    font-size: 1.2rem;
  }

  .button {
    border-radius: 4px;
    background-color: blue;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 20px;
    width: 200px;
    cursor: pointer;
    margin-bottom: 2%;
  }
  @media (max-width: 1000px) {
    .main {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

Open you index.js file under the pages folder and paste the following code, explanation of the code can be found in the comments.

  import { Contract, providers, utils } from "ethers";
  import Head from "next/head";
  import React, { useEffect, useRef, useState } from "react";
  import Web3Modal from "web3modal";
  import { abi, NFT_CONTRACT_ADDRESS } from "../constants";
  import styles from "../styles/Home.module.css";

  export default function Home() {
    // walletConnected keep track of whether the user's wallet is connected or not
    const [walletConnected, setWalletConnected] = useState(false);
    // presaleStarted keeps track of whether the presale has started or not
    const [presaleStarted, setPresaleStarted] = useState(false);
    // presaleEnded keeps track of whether the presale ended
    const [presaleEnded, setPresaleEnded] = useState(false);
    // loading is set to true when we are waiting for a transaction to get mined
    const [loading, setLoading] = useState(false);
    // checks if the currently connected MetaMask wallet is the owner of the contract
    const [isOwner, setIsOwner] = useState(false);
    // tokenIdsMinted keeps track of the number of tokenIds that have been minted
    const [tokenIdsMinted, setTokenIdsMinted] = useState("0");
    // Create a reference to the Web3 Modal (used for connecting to Metamask) which persists as long as the page is open
    const web3ModalRef = useRef();

    /**
     * presaleMint: Mint an NFT during the presale
     */
    const presaleMint = async () => {
      try {
        // We need a Signer here since this is a 'write' transaction.
        const signer = await getProviderOrSigner(true);
        // Create a new instance of the Contract with a Signer, which allows
        // update methods
        const whitelistContract = new Contract(
          NFT_CONTRACT_ADDRESS,
          abi,
          signer
        );
        // call the presaleMint from the contract, only whitelisted addresses would be able to mint
        const tx = await whitelistContract.presaleMint({
          // value signifies the cost of one crypto dev which is "0.01" eth.
          // We are parsing `0.01` string to ether using the utils library from ethers.js
          value: utils.parseEther("0.01"),
        });
        setLoading(true);
        // wait for the transaction to get mined
        await tx.wait();
        setLoading(false);
        window.alert("You successfully minted a Crypto Dev!");
      } catch (err) {
        console.error(err);
      }
    };

    /**
     * publicMint: Mint an NFT after the presale
     */
    const publicMint = async () => {
      try {
        // We need a Signer here since this is a 'write' transaction.
        const signer = await getProviderOrSigner(true);
        // Create a new instance of the Contract with a Signer, which allows
        // update methods
        const whitelistContract = new Contract(
          NFT_CONTRACT_ADDRESS,
          abi,
          signer
        );
        // call the mint from the contract to mint the Crypto Dev
        const tx = await whitelistContract.mint({
          // value signifies the cost of one crypto dev which is "0.01" eth.
          // We are parsing `0.01` string to ether using the utils library from ethers.js
          value: utils.parseEther("0.01"),
        });
        setLoading(true);
        // wait for the transaction to get mined
        await tx.wait();
        setLoading(false);
        window.alert("You successfully minted a Crypto Dev!");
      } catch (err) {
        console.error(err);
      }
    };

    /*
        connectWallet: Connects the MetaMask wallet
      */
    const connectWallet = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // When used for the first time, it prompts the user to connect their wallet
        await getProviderOrSigner();
        setWalletConnected(true);
      } catch (err) {
        console.error(err);
      }
    };

    /**
     * startPresale: starts the presale for the NFT Collection
     */
    const startPresale = async () => {
      try {
        // We need a Signer here since this is a 'write' transaction.
        const signer = await getProviderOrSigner(true);
        // Create a new instance of the Contract with a Signer, which allows
        // update methods
        const whitelistContract = new Contract(
          NFT_CONTRACT_ADDRESS,
          abi,
          signer
        );
        // call the startPresale from the contract
        const tx = await whitelistContract.startPresale();
        setLoading(true);
        // wait for the transaction to get mined
        await tx.wait();
        setLoading(false);
        // set the presale started to true
        await checkIfPresaleStarted();
      } catch (err) {
        console.error(err);
      }
    };

    /**
     * checkIfPresaleStarted: checks if the presale has started by quering the `presaleStarted`
     * variable in the contract
     */
    const checkIfPresaleStarted = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // No need for the Signer here, as we are only reading state from the blockchain
        const provider = await getProviderOrSigner();
        // We connect to the Contract using a Provider, so we will only
        // have read-only access to the Contract
        const nftContract = new Contract(NFT_CONTRACT_ADDRESS, abi, provider);
        // call the presaleStarted from the contract
        const _presaleStarted = await nftContract.presaleStarted();
        if (!_presaleStarted) {
          await getOwner();
        }
        setPresaleStarted(_presaleStarted);
        return _presaleStarted;
      } catch (err) {
        console.error(err);
        return false;
      }
    };

    /**
     * checkIfPresaleEnded: checks if the presale has ended by quering the `presaleEnded`
     * variable in the contract
     */
    const checkIfPresaleEnded = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // No need for the Signer here, as we are only reading state from the blockchain
        const provider = await getProviderOrSigner();
        // We connect to the Contract using a Provider, so we will only
        // have read-only access to the Contract
        const nftContract = new Contract(NFT_CONTRACT_ADDRESS, abi, provider);
        // call the presaleEnded from the contract
        const _presaleEnded = await nftContract.presaleEnded();
        // _presaleEnded is a Big Number, so we are using the lt(less than function) instead of `<`
        // Date.now()/1000 returns the current time in seconds
        // We compare if the _presaleEnded timestamp is less than the current time
        // which means presale has ended
        const hasEnded = _presaleEnded.lt(Math.floor(Date.now() / 1000));
        if (hasEnded) {
          setPresaleEnded(true);
        } else {
          setPresaleEnded(false);
        }
        return hasEnded;
      } catch (err) {
        console.error(err);
        return false;
      }
    };

    /**
     * getOwner: calls the contract to retrieve the owner
     */
    const getOwner = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // No need for the Signer here, as we are only reading state from the blockchain
        const provider = await getProviderOrSigner();
        // We connect to the Contract using a Provider, so we will only
        // have read-only access to the Contract
        const nftContract = new Contract(NFT_CONTRACT_ADDRESS, abi, provider);
        // call the owner function from the contract
        const _owner = await nftContract.owner();
        // We will get the signer now to extract the address of the currently connected MetaMask account
        const signer = await getProviderOrSigner(true);
        // Get the address associated to the signer which is connected to  MetaMask
        const address = await signer.getAddress();
        if (address.toLowerCase() === _owner.toLowerCase()) {
          setIsOwner(true);
        }
      } catch (err) {
        console.error(err.message);
      }
    };

    /**
     * getTokenIdsMinted: gets the number of tokenIds that have been minted
     */
    const getTokenIdsMinted = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // No need for the Signer here, as we are only reading state from the blockchain
        const provider = await getProviderOrSigner();
        // We connect to the Contract using a Provider, so we will only
        // have read-only access to the Contract
        const nftContract = new Contract(NFT_CONTRACT_ADDRESS, abi, provider);
        // call the tokenIds from the contract
        const _tokenIds = await nftContract.tokenIds();
        //_tokenIds is a `Big Number`. We need to convert the Big Number to a string
        setTokenIdsMinted(_tokenIds.toString());
      } catch (err) {
        console.error(err);
      }
    };

    /**
     * Returns a Provider or Signer object representing the Ethereum RPC with or without the
     * signing capabilities of metamask attached
     *
     * A `Provider` is needed to interact with the blockchain - reading transactions, reading balances, reading state, etc.
     *
     * A `Signer` is a special type of Provider used in case a `write` transaction needs to be made to the blockchain, which involves the connected account
     * needing to make a digital signature to authorize the transaction being sent. Metamask exposes a Signer API to allow your website to
     * request signatures from the user using Signer functions.
     *
     * @param {*} needSigner - True if you need the signer, default false otherwise
     */
    const getProviderOrSigner = async (needSigner = false) => {
      // Connect to Metamask
      // Since we store `web3Modal` as a reference, we need to access the `current` value to get access to the underlying object
      const provider = await web3ModalRef.current.connect();
      const web3Provider = new providers.Web3Provider(provider);

      // If user is not connected to the Rinkeby network, let them know and throw an error
      const { chainId } = await web3Provider.getNetwork();
      if (chainId !== 4) {
        window.alert("Change the network to Rinkeby");
        throw new Error("Change network to Rinkeby");
      }

      if (needSigner) {
        const signer = web3Provider.getSigner();
        return signer;
      }
      return web3Provider;
    };

    // useEffects are used to react to changes in state of the website
    // The array at the end of function call represents what state changes will trigger this effect
    // In this case, whenever the value of `walletConnected` changes - this effect will be called
    useEffect(() => {
      // if wallet is not connected, create a new instance of Web3Modal and connect the MetaMask wallet
      if (!walletConnected) {
        // Assign the Web3Modal class to the reference object by setting it's `current` value
        // The `current` value is persisted throughout as long as this page is open
        web3ModalRef.current = new Web3Modal({
          network: "rinkeby",
          providerOptions: {},
          disableInjectedProvider: false,
        });
        connectWallet();

        // Check if presale has started and ended
        const _presaleStarted = checkIfPresaleStarted();
        if (_presaleStarted) {
          checkIfPresaleEnded();
        }

        getTokenIdsMinted();

        // Set an interval which gets called every 5 seconds to check presale has ended
        const presaleEndedInterval = setInterval(async function () {
          const _presaleStarted = await checkIfPresaleStarted();
          if (_presaleStarted) {
            const _presaleEnded = await checkIfPresaleEnded();
            if (_presaleEnded) {
              clearInterval(presaleEndedInterval);
            }
          }
        }, 5 * 1000);

        // set an interval to get the number of token Ids minted every 5 seconds
        setInterval(async function () {
          await getTokenIdsMinted();
        }, 5 * 1000);
      }
    }, [walletConnected]);

    /*
        renderButton: Returns a button based on the state of the dapp
      */
    const renderButton = () => {
      // If wallet is not connected, return a button which allows them to connect their wllet
      if (!walletConnected) {
        return (
          <button onClick={connectWallet} className={styles.button}>
            Connect your wallet
          </button>
        );
      }

      // If we are currently waiting for something, return a loading button
      if (loading) {
        return <button className={styles.button}>Loading...</button>;
      }

      // If connected user is the owner, and presale hasnt started yet, allow them to start the presale
      if (isOwner && !presaleStarted) {
        return (
          <button className={styles.button} onClick={startPresale}>
            Start Presale!
          </button>
        );
      }

      // If connected user is not the owner but presale hasn't started yet, tell them that
      if (!presaleStarted) {
        return (
          <div>
            <div className={styles.description}>Presale hasnt started!</div>
          </div>
        );
      }

      // If presale started, but hasn't ended yet, allow for minting during the presale period
      if (presaleStarted && !presaleEnded) {
        return (
          <div>
            <div className={styles.description}>
              Presale has started!!! If your address is whitelisted, Mint a
              Crypto Dev 🥳
            </div>
            <button className={styles.button} onClick={presaleMint}>
              Presale Mint 🚀
            </button>
          </div>
        );
      }

      // If presale started and has ended, its time for public minting
      if (presaleStarted && presaleEnded) {
        return (
          <button className={styles.button} onClick={publicMint}>
            Public Mint 🚀
          </button>
        );
      }
    };

    return (
      <div>
        <Head>
          <title>Crypto Devs</title>
          <meta name="description" content="Whitelist-Dapp" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <div className={styles.main}>
          <div>
            <h1 className={styles.title}>Welcome to Crypto Devs!</h1>
            <div className={styles.description}>
              Its an NFT collection for developers in Crypto.
            </div>
            <div className={styles.description}>
              {tokenIdsMinted}/20 have been minted
            </div>
            {renderButton()}
          </div>
          <div>
            <img className={styles.image} src="./cryptodevs/0.svg" />
          </div>
        </div>

        <footer className={styles.footer}>
          Made with &#10084; by Crypto Devs
        </footer>
      </div>
    );
  }

Now create a new folder under the my-app folder and name it constants.
In the constants folder create a file, index.js and paste the following code.
- Replace "addres of your NFT contract" with the address of the CryptoDevs contract that you deployed and saved to your notepad.
- Replace ---your abi--- with the abi of your CryptoDevs Contract. To get the abi for your contract, go to your hardhat-tutorial/artifacts/contracts/CryptoDevs.sol folder and from your CryptoDevs.json file get the array marked under the "abi" key.

  export const abi =---your abi---
  export const NFT_CONTRACT_ADDRESS = "address of your NFT contract"

Now in your terminal which is pointing to my-app folder, execute

  npm run dev

Your Crypto Devs NFT dapp should now work without errors 🚀

Push to github

Make sure before proceeding you have pushed all your code to github :)

Deploying your dApp

We will now deploy your dApp, so that everyone can see your website and you can share it with all of your LearnWeb3 DAO friends.

Go to https://vercel.com/ and sign in with your GitHub
Then click on New Project button and then select your NFT-Collection repo
When configuring your new project, Vercel will allow you to customize your Root Directory
Click Edit next to Root Directory and set it to my-app
Select the Framework as Next.js
Click Deploy
Now you can see your deployed website by going to your dashboard, selecting your project, and copying the domain from there! Save the domain on notepad, you would need it later.

View your Collection on Opensea

Now lets make your collection is available on Opensea

To make the collection available on Opensea, we would need to create a metadata endpoint. This endpoint would return the metadata for an NFT given its tokenId.

Open your my-app folder and underpages/api folder, create a new file named [tokenId].js(Make sure the name has the brackets as well). Adding the brackets helps create dynamic routes in next js
Add the following lines to [tokenId].js file. Read about adding API routes in next js here

  export default function handler(req, res) {
    // get the tokenId from the query params
    const tokenId = req.query.tokenId;
    // As all the images are uploaded on github, we can extract the images from github directly.
    const image_url =
      "https://raw.githubusercontent.com/LearnWeb3DAO/NFT-Collection/main/my-app/public/cryptodevs/";
    // The api is sending back metadata for a Crypto Dev
    // To make our collection compatible with Opensea, we need to follow some Metadata standards
    // when sending back the response from the api
    // More info can be found here: https://docs.opensea.io/docs/metadata-standards
    res.status(200).json({
      name: "Crypto Dev #" + tokenId,
      description: "Crypto Dev is a collection of developers in crypto",
      image: image_url + tokenId + ".svg",
    });
  }

Now you have an api route which Opensea can call to retrieve the metadata for the NFT
Lets deploy a new Crypto Devs contract with this new api route as your METADATA_URL
Open your hardhat-tutorial/constants folder and inside your index.js file, replace "https://nft-collection-sneh1999.vercel.app/api/" with the domain which you saved to notepad and add "/api/" to its end.
Save the file and open up a new terminal pointing to hardhat-tutorial folder and deploy a new contract

    npx hardhat run scripts/deploy.js --network rinkeby

Save the new NFT contract address to a notepad.
Open up "my-app/constants" folder and inside the index.js file replace the old NFT contract address with the new one
Push all the code to github and wait for vercel to deploy the new code.
After vercel has deployed your code, open up your website and mint an NFT
After your transaction gets successful,In your browser open up this link by replacing your-nft-contract-address with the address of your NFT contract (https://testnets.opensea.io/assets/your-nft-contract-address/1)
Your NFT is now available on Opensea 🚀 🥳
Share your Opensea link with everyone on discord :) and spread happiness.

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

Build a simple whitelist dApp using Solidity, Next.js, ethers.js on Ethereum

Haardik — Sun, 15 May 2022 08:13:00 +0000

Whitelist-Dapp

You are launching your NFT collection named Crypto Devs. You want to give your early supporters access to a whitelist for your collection, so here you are creating a whitelist dapp for Crypto Devs

Requirements

Whitelist access should be given to the first 10 users for free who want to get in.
There should be a website where people can go and enter into the whitelist.

Lets start building 🚀

Prerequisites

You can write code in JavaScript (Beginner Track - Level-0)
Have set up a Metamask Wallet (Beginner Track - Level-4)
Your computer has Node.js installed. If not download from here

Prefer a Video?

If you would rather learn from a video, we have a recording available of this tutorial on our YouTube. Watch the video by clicking on the screenshot below, or go ahead and read the tutorial!

Build

Smart Contract

To build the smart contract we will be using Hardhat.
Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. In simple words you can write your smart contract, deploy them, run tests, and debug your code.

First, you need to create a Whitelist-Daap folder where the Hardhat project and your Next.js app will later go
Open up a terminal and execute these commands

  mkdir Whitelist-Dapp
  cd Whitelist-Dapp

Then, in Whitelist-Daap folder, you will set up Hardhat project

  mkdir hardhat-tutorial
  cd hardhat-tutorial
  npm init --yes
  npm install --save-dev hardhat

In the same directory where you installed Hardhat run:

  npx hardhat

Select Create a basic sample project
Press enter for the already specified Hardhat Project root
Press enter for the question on if you want to add a .gitignore
Press enter for Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?

Now you have a hardhat project ready to go!

If you are not on mac, please do this extra step and install these libraries as well :)

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

Start by creating a new file inside the contracts directory called Whitelist.sol.

  //SPDX-License-Identifier: Unlicense
  pragma solidity ^0.8.0;


  contract Whitelist {

      // Max number of whitelisted addresses allowed
      uint8 public maxWhitelistedAddresses;

      // Create a mapping of whitelistedAddresses
      // if an address is whitelisted, we would set it to true, it is false by default for all other addresses.
      mapping(address => bool) public whitelistedAddresses;

      // numAddressesWhitelisted would be used to keep track of how many addresses have been whitelisted
      // NOTE: Don't change this variable name, as it will be part of verification
      uint8 public numAddressesWhitelisted;

      // Setting the Max number of whitelisted addresses
      // User will put the value at the time of deployment
      constructor(uint8 _maxWhitelistedAddresses) {
          maxWhitelistedAddresses =  _maxWhitelistedAddresses;
      }

      /**
          addAddressToWhitelist - This function adds the address of the sender to the
          whitelist
       */
      function addAddressToWhitelist() public {
          // check if the user has already been whitelisted
          require(!whitelistedAddresses[msg.sender], "Sender has already been whitelisted");
          // check if the numAddressesWhitelisted < maxWhitelistedAddresses, if not then throw an error.
          require(numAddressesWhitelisted < maxWhitelistedAddresses, "More addresses cant be added, limit reached");
          // Add the address which called the function to the whitelistedAddress array
          whitelistedAddresses[msg.sender] = true;
          // Increase the number of whitelisted addresses
          numAddressesWhitelisted += 1;
      }

  }

Lets deploy the contract to rinkeby network.Create a new file named deploy.js under the scripts folder
Now we will write some code to deploy the contract in deploy.js file.

  const { ethers } = require("hardhat");

  async function main() {
    /*
    A ContractFactory in ethers.js is an abstraction used to deploy new smart contracts,
    so whitelistContract here is a factory for instances of our Whitelist contract.
    */
    const whitelistContract = await ethers.getContractFactory("Whitelist");

    // here we deploy the contract
    const deployedWhitelistContract = await whitelistContract.deploy(10);
    // 10 is the Maximum number of whitelisted addresses allowed

    // Wait for it to finish deploying
    await deployedWhitelistContract.deployed();

    // print the address of the deployed contract
    console.log(
      "Whitelist Contract Address:",
      deployedWhitelistContract.address
    );
  }

  // 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 create a .env file in the hardhat-tutorial folder and add the following lines, use the instructions in the comments to get your Alchemy API Key URL and RINKEBY Private Key. Make sure that the account from which you get your rinkeby private key is funded with Rinkeby Ether.


  // Go to https://www.alchemyapi.io, sign up, create
  // a new App in its dashboard and select the network as Rinkeby, 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 RINKEBY 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
  RINKEBY_PRIVATE_KEY="add-the-rinkeby-private-key-here"

Now we will install dotenv package to be able to import the env file and use it in our config. Open up a terminal pointing athardhat-tutorial directory and execute this command

  npm install dotenv

Now open the hardhat.config.js file, we would add the rinkeby network here so that we can deploy our contract to rinkeby. Replace all the lines in the hardhar.config.js file with the given below lines

  require("@nomiclabs/hardhat-waffle");
  require("dotenv").config({ path: ".env" });

  const ALCHEMY_API_KEY_URL = process.env.ALCHEMY_API_KEY_URL;

  const RINKEBY_PRIVATE_KEY = process.env.RINKEBY_PRIVATE_KEY;

  module.exports = {
    solidity: "0.8.4",
    networks: {
      rinkeby: {
        url: ALCHEMY_API_KEY_URL,
        accounts: [RINKEBY_PRIVATE_KEY],
      },
    },
  };

Compile the contract, open up a terminal pointing athardhat-tutorial directory and execute this command

     npx hardhat compile

To deploy, open up a terminal pointing athardhat-tutorial directory and execute this command

  npx hardhat run scripts/deploy.js --network rinkeby

Save the Whitelist Contract Address that was printed on your terminal in your notepad, you would need it futher down in the tutorial.

Website

To develop the website we will use React and Next Js. React is a javascript framework used to make websites and Next.js is a React framework that also allows writing backend APIs code along with the frontend, so you don't need two separate frontend and backend services.
First, You will need to create a new next app. Your folder structure should look something like

  - Whitelist-Dapp
      - hardhat-tutorial
      - my-app

To create this next-app, in the terminal point to Whitelist-Dapp folder and type

  npx create-next-app@latest

and press enter for all the questions

Now to run the app, execute these commands in the terminal

  cd my-app
  npm run dev

Now go to http://localhost:3000, your app should be running 🤘
Now lets install Web3Modal library. Web3Modal is an easy to use library to help developers easily allow their users to connect to your dApps with all sorts of different wallets. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc) and WalletConnect, You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane.
Open up a terminal pointing atmy-app directory and execute this command

  npm install web3modal

In the same terminal also install ethers.js

  npm install ethers

In your my-app/public folder, download this image and rename it to crypto-devs.svg
Now go to styles folder and replace all the contents of Home.modules.css file with the following code, this would add some styling to your dapp:

  .main {
    min-height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
  }

  .footer {
    display: flex;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    justify-content: center;
    align-items: center;
  }

  .image {
    width: 70%;
    height: 50%;
    margin-left: 20%;
  }

  .title {
    font-size: 2rem;
    margin: 2rem 0;
  }

  .description {
    line-height: 1;
    margin: 2rem 0;
    font-size: 1.2rem;
  }

  .button {
    border-radius: 4px;
    background-color: blue;
    border: none;
    color: #ffffff;
    font-size: 15px;
    padding: 20px;
    width: 200px;
    cursor: pointer;
    margin-bottom: 2%;
  }
  @media (max-width: 1000px) {
    .main {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

Open your index.js file under the pages folder and paste the following code, explanation of the code can be found in the comments. Make sure you read about React and React Hooks, React Hooks Tutorial if you are not familiar with them.

  import Head from "next/head";
  import styles from "../styles/Home.module.css";
  import Web3Modal from "web3modal";
  import { providers, Contract } from "ethers";
  import { useEffect, useRef, useState } from "react";
  import { WHITELIST_CONTRACT_ADDRESS, abi } from "../constants";

  export default function Home() {
    // walletConnected keep track of whether the user's wallet is connected or not
    const [walletConnected, setWalletConnected] = useState(false);
    // joinedWhitelist keeps track of whether the current metamask address has joined the Whitelist or not
    const [joinedWhitelist, setJoinedWhitelist] = useState(false);
    // loading is set to true when we are waiting for a transaction to get mined
    const [loading, setLoading] = useState(false);
    // numberOfWhitelisted tracks the number of addresses's whitelisted
    const [numberOfWhitelisted, setNumberOfWhitelisted] = useState(0);
    // Create a reference to the Web3 Modal (used for connecting to Metamask) which persists as long as the page is open
    const web3ModalRef = useRef();

    /**
     * Returns a Provider or Signer object representing the Ethereum RPC with or without the
     * signing capabilities of metamask attached
     *
     * A `Provider` is needed to interact with the blockchain - reading transactions, reading balances, reading state, etc.
     *
     * A `Signer` is a special type of Provider used in case a `write` transaction needs to be made to the blockchain, which involves the connected account
     * needing to make a digital signature to authorize the transaction being sent. Metamask exposes a Signer API to allow your website to
     * request signatures from the user using Signer functions.
     *
     * @param {*} needSigner - True if you need the signer, default false otherwise
     */
    const getProviderOrSigner = async (needSigner = false) => {
      // Connect to Metamask
      // Since we store `web3Modal` as a reference, we need to access the `current` value to get access to the underlying object
      const provider = await web3ModalRef.current.connect();
      const web3Provider = new providers.Web3Provider(provider);

      // If user is not connected to the Rinkeby network, let them know and throw an error
      const { chainId } = await web3Provider.getNetwork();
      if (chainId !== 4) {
        window.alert("Change the network to Rinkeby");
        throw new Error("Change network to Rinkeby");
      }

      if (needSigner) {
        const signer = web3Provider.getSigner();
        return signer;
      }
      return web3Provider;
    };

    /**
     * addAddressToWhitelist: Adds the current connected address to the whitelist
     */
    const addAddressToWhitelist = async () => {
      try {
        // We need a Signer here since this is a 'write' transaction.
        const signer = await getProviderOrSigner(true);
        // Create a new instance of the Contract with a Signer, which allows
        // update methods
        const whitelistContract = new Contract(
          WHITELIST_CONTRACT_ADDRESS,
          abi,
          signer
        );
        // call the addAddressToWhitelist from the contract
        const tx = await whitelistContract.addAddressToWhitelist();
        setLoading(true);
        // wait for the transaction to get mined
        await tx.wait();
        setLoading(false);
        // get the updated number of addresses in the whitelist
        await getNumberOfWhitelisted();
        setJoinedWhitelist(true);
      } catch (err) {
        console.error(err);
      }
    };

    /**
     * getNumberOfWhitelisted:  gets the number of whitelisted addresses
     */
    const getNumberOfWhitelisted = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // No need for the Signer here, as we are only reading state from the blockchain
        const provider = await getProviderOrSigner();
        // We connect to the Contract using a Provider, so we will only
        // have read-only access to the Contract
        const whitelistContract = new Contract(
          WHITELIST_CONTRACT_ADDRESS,
          abi,
          provider
        );
        // call the numAddressesWhitelisted from the contract
        const _numberOfWhitelisted = await whitelistContract.numAddressesWhitelisted();
        setNumberOfWhitelisted(_numberOfWhitelisted);
      } catch (err) {
        console.error(err);
      }
    };

    /**
     * checkIfAddressInWhitelist: Checks if the address is in whitelist
     */
    const checkIfAddressInWhitelist = async () => {
      try {
        // We will need the signer later to get the user's address
        // Even though it is a read transaction, since Signers are just special kinds of Providers,
        // We can use it in it's place
        const signer = await getProviderOrSigner(true);
        const whitelistContract = new Contract(
          WHITELIST_CONTRACT_ADDRESS,
          abi,
          signer
        );
        // Get the address associated to the signer which is connected to  MetaMask
        const address = await signer.getAddress();
        // call the whitelistedAddresses from the contract
        const _joinedWhitelist = await whitelistContract.whitelistedAddresses(
          address
        );
        setJoinedWhitelist(_joinedWhitelist);
      } catch (err) {
        console.error(err);
      }
    };

    /*
      connectWallet: Connects the MetaMask wallet
    */
    const connectWallet = async () => {
      try {
        // Get the provider from web3Modal, which in our case is MetaMask
        // When used for the first time, it prompts the user to connect their wallet
        await getProviderOrSigner();
        setWalletConnected(true);

        checkIfAddressInWhitelist();
        getNumberOfWhitelisted();
      } catch (err) {
        console.error(err);
      }
    };

    /*
      renderButton: Returns a button based on the state of the dapp
    */
    const renderButton = () => {
      if (walletConnected) {
        if (joinedWhitelist) {
          return (
            <div className={styles.description}>
              Thanks for joining the Whitelist!
            </div>
          );
        } else if (loading) {
          return <button className={styles.button}>Loading...</button>;
        } else {
          return (
            <button onClick={addAddressToWhitelist} className={styles.button}>
              Join the Whitelist
            </button>
          );
        }
      } else {
        return (
          <button onClick={connectWallet} className={styles.button}>
            Connect your wallet
          </button>
        );
      }
    };

    // useEffects are used to react to changes in state of the website
    // The array at the end of function call represents what state changes will trigger this effect
    // In this case, whenever the value of `walletConnected` changes - this effect will be called
    useEffect(() => {
      // if wallet is not connected, create a new instance of Web3Modal and connect the MetaMask wallet
      if (!walletConnected) {
        // Assign the Web3Modal class to the reference object by setting it's `current` value
        // The `current` value is persisted throughout as long as this page is open
        web3ModalRef.current = new Web3Modal({
          network: "rinkeby",
          providerOptions: {},
          disableInjectedProvider: false,
        });
        connectWallet();
      }
    }, [walletConnected]);

    return (
      <div>
        <Head>
          <title>Whitelist Dapp</title>
          <meta name="description" content="Whitelist-Dapp" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <div className={styles.main}>
          <div>
            <h1 className={styles.title}>Welcome to Crypto Devs!</h1>
            <div className={styles.description}>
              Its an NFT collection for developers in Crypto.
            </div>
            <div className={styles.description}>
              {numberOfWhitelisted} have already joined the Whitelist
            </div>
            {renderButton()}
          </div>
          <div>
            <img className={styles.image} src="./crypto-devs.svg" />
          </div>
        </div>

        <footer className={styles.footer}>
          Made with &#10084; by Crypto Devs
        </footer>
      </div>
    );
  }

Now create a new folder under the my-app folder and name it constants.
In the constants folder create a file, index.js and paste the following code.
Replace "YOUR_WHITELIST_CONTRACT_ADDRESS" with the address of the whitelist contract that you deployed.
Replace "YOUR_ABI" with the ABI of your Whitelist Contract. To get the ABI for your contract, go to your hardhat-tutorial/artifacts/contracts/Whitelist.sol folder and from your Whitelist.json file get the array marked under the "abi" key (it will be. a huge array, close to 100 lines if not more).

  export const abi = YOUR_ABI;
  export const WHITELIST_CONTRACT_ADDRESS = "YOUR_WHITELIST_CONTRACT_ADDRESS";

Now in your terminal which is pointing to my-app folder, execute

  npm run dev

Your whitelist dapp should now work without errors 🚀

Push to github

Make sure before proceeding you have pushed all your code to github :)

Deploying your dApp

We will now deploy your dApp, so that everyone can see your website and you can share it with all of your LearnWeb3 DAO friends.

Go to Vercel and sign in with your GitHub
Then click on New Project button and then select your Whitelist dApp repo
When configuring your new project, Vercel will allow you to customize your Root Directory
Click Edit next to Root Directory and set it to my-app
Select the Framework as Next.js
Click Deploy
Now you can see your deployed website by going to your dashboard, selecting your project, and copying the URL from there!

Share your website in Discord :D

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

What are Providers and Signers? What is an ABI? What are BigNumbers? How do contracts deal with ERC-20 tokens?

Haardik — Sun, 15 May 2022 08:11:02 +0000

Sophomore Mixed Topics

There are a few topics that we wanted to provide some information on, but weren't detailed enough to deserve their own levels. This level is meant to group together a bunch of separate topics like that, and go over some things that will be helpful to keep in mind.

Providers and Signers
BigNumbers
ABI
React Hooks
ERC20 Approval Flow

Providers and Signers

When building interfaces to smart contracts, you will commonly come across these two terms - Provider and Signer. While you will develop a much better understanding of them when you actually start using them, we will try to provide a brief explanation of what they mean.

We know that to read or write data to the blockchain, we need to be communicating through an Ethereum node. The node contains the blockchain state, allowing us to read data. It can also broadcast transactions to miners, allowing us to write data.

Notice how the node only needs to broadcast transactions in case you want to write data to the blockchain. Since if you're just reading data that already exists, miners don't need to do anything about it, they've already done their work.

A Provider is an Ethereum node connection that allows you to read data from its state. You will use a Provider to do things like calling read-only functions in smart contracts, fetching balances of accounts, fetching transaction details, etc.

A Signer is an Ethereum node connection that allows you to write data to the blockchain. You will use a Signer to do things like calling write functions in smart contracts, transferring ETH between accounts, etc. To do so, the Signer needs access to a Private Key it can use for making transactions on behalf of an account.

Additionally, a Signer can do everything a Provider can. You can do both, reading and writing, using a Signer, but a Provider is only good for reading data.

Wallets like Metamask, by default, inject a Provider into your browser. Therefore, dApps can use your Metamask Provider to read values from the blockchain network your wallet is connected to.

However, sometimes, you want the users to make transactions, not just read data. Of course Metamask can't just go around sharing your private keys with random websites - that would be crazy. For this, Metamask also allows websites to request a Signer. So when a dApp attempts to send a transaction to the blockchain, the Metamask window pops up asking the user to confirm the action.

BigNumbers

When learning Solidity, we have been reading about and using uint256 a lot. uint256 has a range from 0 to (2^256) - 1. Therefore, the maximum number that can be held by the uint256 datatype is astronomically large.

Specifically, the maximum value for uint256 is:

115792089237316195423570985008687907853269984665640564039457584007913129639935

For comparison, one million is:

1000000

Clearly, uint256 can hold insanely large numbers. But this presents a problem.

We usually build interfaces for smart contracts in Javascript. Javascript's number data type has a significantly smaller upper limit.

Specifically, the maximum value of a numeric type that Javascript can hold is just:

9007199254740991

That is not even close to what uint256 can hold!

So, let's say we use Javascript to call a function on a smart contract that returns a uint256. If that number is greater than Javascript's maximum numeric value, which is quite definitely possible, then what happens?

Well, as it turns out, Javascript can not support that. Therefore, we have to use a special type called a BigNumber. Libraries used for interacting with Ethereum nodes - ethers.js and web3.js - both come with support for BigNumbers.

BigNumber is a custom class library, written in Javascript, that introduces it's own functions for mathematical functions - add, sub, mul, div, etc. BigNumber has a significantly larger capacity for numbers than what Javascript can natively support.

When we write code in the following levels, you will come across mathematical operations being done by calling functions like .add() and .mul() instead of the typical + and * operators that we know - this is because when we are working with BigNumbers we need to use it's mathematical functions.

As to what would happen if we were to try and do this with Javascript numbers, well we would very easily overflow or underflow. This means our calculations would be entirely incorrect and undefined. So, just keep this in mind.

ABI

ABI stands for Application Binary Interface. It is one of the more tricky things to understand when working with Ethereum, but we will try to explain it as best as we can.

In Freshman tutorials, and in tutorials you will come across further, you will be using ABIs heavily.

When Solidity code is compiled, it is compiled down to bytecode which is essentially binary. It contains no record of function names that existed in the contract, what parameters they contain, and what values they return.

However, if you want to call a Solidity function from a web app, you need a way to call the correct bytecode in the contract. To do this, you need a way to convert human-readable function names and parameters into bytecode and back.

ABIs help us achieve exactly that. When you compile your Solidity code, an ABI is automatically generated by the compiler. It contains rules and metadata about functions present in the contract, which help in doing the proper data conversion back and forth.

So, when you want to call a contract, you need its address (of course), but you also need to provide its ABI. Libraries like ethers.js use the ABI to encode and decode the human readable functions into bytecode and back when communicating with an Ethereum node and calling functions in smart contracts.

React Hooks

In Sophomore tutorials and beyond, we will be developing websites using React and Next.js. Oftentimes, we will be using some React-specific features to help in writing clean code.

A really important feature of React is React Hooks.

We will not try to reinvent the wheel and teach you in detail what React Hooks are, as there are a lot of other resources for that, but we will list the things that are relevant so you can focus on that.

React comes inbuilt with ~10 hooks, and developers can create their own hooks as well. For our purposes, we will focus on 3 that we use regularly, and the rest you can learn if you want.

Read up on these three hooks and understand what they are used for.

ERC20 Approval Flow

In the past, we learnt about payable functions which allow smart contracts to accept an ETH payment when a function is called. This is really useful if you want to charge users in ETH in exchange for something - for example an NFT sale.

But, what if you want to use something other than ETH for payment? What if you wanted to use your own Cryptocurrency that you deployed for payment?

Things get a little tricky here.

Since ETH is the native currency of Ethereum, and the ERC20 standard was introduced much later after Ethereum was invented, they don't behave exactly the same way. Specifically, accepting payments in ERC20 tokens is not as simple as just making a function payable in Solidity.

The payable keyword is only good for ETH payments. If you wanted to use your own ERC20 cryptocurrency, the flow to do that is a little more complicated.

First, let's think about this a little bit.

Okay, so you cannot send ERC20 tokens along with a function call, like you can do with ETH
Perhaps the smart contract can somehow pull tokens from the function caller's account?
But that would mean I can code a smart contract that steals everyone's tokens if someone makes a transaction with my contract
So we need a safer way to pull tokens out of someone's account

Here is where the Approve and Transfer flow comes in.

The ERC20 standard comes with the concept of Allowance.

Let's try to think about this with the help of an example.

Alice wants to sell her NFT
Alice wants to accept payment for her NFT in her own cryptocurrency, AliceCoin
Alice's NFT costs 10 AliceCoin
Bob owns AliceCoin
Bob wants to buy Alice's NFT
Bob needs a way to call a function on Alice's NFT smart contract, which would take the 10 Alicecoin payment, and send him his NFT
Since smart contracts cannot accept Alicecoin as payment directly, Alice has coded up the ERC20 Approval and Transfer flow in her NFT contract

Alicecoin is an ERC20 token. ERC20 comes inbuilt with a few functions that relate to the Allowance concept.

`approve(address spender, uint256 amount)`

This allows a user to approve a different address to spend up to amount tokens on their behalf. i.e. This function provides an Allowance to the spender of up to amount

`transferFrom(address from, address to, uint256 amount)`

Allows a user to transfer amount token from from to to.

If the user calling the function is the same as the from address, tokens are removed from the user's balance.

If the user is someone other than the from address, the from address must have in the past given the user allowance to spend amount tokens using the approve function.

Continuing with the example now:

Bob gives Alice's NFT contract the allowance to spend up to 10 of his Alicecoin using the approve function
Bob calls the function to purchase Alice's NFT on her NFT contract
The purchase function internally calls transferFrom on Alicecoin and transfers 10 Alicecoin from Bob's account to Alice's account
Since the contract was given the allowance to spend up to 10 Alicecoin by Bob earlier, this action is permitted
Alice therefore receives her 10 Alicecoin, and Bob receives his NFT

Ok, so what does this mean for us?

Well, note how Bob had to give approval to the contract, so the contract could pull Bob's tokens from his account.

Therefore, Bob essentially had to do two transactions to replicate the behaviour of what could be done in one transaction if payment was being accepted in ETH.

Transaction 1 - Give allowance to the contract
Transaction 2 - Call the contract function, which internally uses the allowance to transfer Bob's tokens to a different address

So, if you were building a dApp where you needed users to pay your smart contract using an ERC20 token, you would also need to make them do both transactions. Simply calling your contract function, without first having your users provide allowance to your contract, will cause the function call to fail.

We will come across a use-case of this flow when building the DeFi-Exchange in the final level of Sophomore track. Since an exchange involves being able to convert one token of another, you need to call a function on the exchange smart contract which takes in one token and gives you another.

To take in your token to swap, the exchange contract requires approval to pull the token from your account.

So keep this flow in mind if you're wondering why swapping on the exchange can use two transactions, instead of one.

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

Let's learn some advanced Solidity concepts!

Haardik — Sun, 15 May 2022 08:08:40 +0000

Advanced Solidity Topics

In the Freshman track, we looked at some basic Solidity syntax. We covered variables, data types, functions, loops, conditional flows, and arrays.

However, Solidity has a few more things, things which will be important through the coding assignments of the Sophomore track and beyond. In this tutorial, we will cover some more important Solidity topics.

Prefer a Video?

If you would rather learn from a video, we have a recording available of this tutorial on our YouTube. It is split into 2 parts, and there are timestamps. Watch the video by clicking on the screenshot below, or go ahead and read the tutorial!

Part 1

[![Part

1](https://raw.githubusercontent.com/LearnWeb3DAO/Advanced-Solidity-Topics/main/assets/video-preview1.webp)](https://www.youtube.com/watch?v=Z5P3rKBRmEM)

Part 2

[![Part

2](https://raw.githubusercontent.com/LearnWeb3DAO/Advanced-Solidity-Topics/main/assets/video-preview2.webp)](https://www.youtube.com/watch?v=ILY3fIbwjk0)

Index

Mappings
Enums
Structs
View and Pure Functions
Function Modifiers
Events
Constructors
Inheritance
Transferring ETH
Calling external contracts
Import statements
Solidity Libraries

Mappings

Mappings in Solidity act like hashmaps or dictionaries in other programming languages. They are used to store the data in key-value pairs.

Mappings are created with the syntax mapping (keyType => valueType)

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

contract Mapping {
    // Mapping from address to uint
    mapping(address => uint) public myMap;

    function get(address _addr) public view returns (uint) {
        // Mapping always returns a value.
        // If the value was never set, it will return the default value.
        // The default value for uint is 0
        return myMap[_addr];
    }

    function set(address _addr, uint _i) public {
        // Update the value at this address
        myMap[_addr] = _i;
    }

    function remove(address _addr) public {
        // Reset the value to the default value.
        delete myMap[_addr];
    }
}

We can also create nested mappings, where the key points to a second nested mapping. To do this, we set the valueType to a mapping itself.

contract NestedMappings {
    // Mapping from address => (mapping from uint to bool)
    mapping(address => mapping(uint => bool)) public nestedMap;

    function get(address _addr1, uint _i) public view returns (bool) {
        // You can get values from a nested mapping
        // even when it is not initialized
        // The default value for a bool type is false
        return nestedMap[_addr1][_i];
    }

    function set(
        address _addr1,
        uint _i,
        bool _boo
    ) public {
        nestedMap[_addr1][_i] = _boo;
    }

    function remove(address _addr1, uint _i) public {
        delete nestedMap[_addr1][_i];
    }
}

Enums

The word Enum stands for Enumerable. They are user defined types that contain human readable names for a set of constants, called members. They are commonly used to restrict a variable to only have one of a few predefined values. Since they are just an abstraction for human readable constants, in actuality, they are internally represented as uints.

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

contract Enum {
    // Enum representing different possible shipping states
    enum Status {
        Pending,
        Shipped,
        Accepted,
        Rejected,
        Canceled
    }

    // Declare a variable of the type Status
    // This can only contain one of the predefined values
    Status public status;

    // Since enums are internally represented by uints
    // This function will always return a uint
    // Pending = 0
    // Shipped = 1
    // Accepted = 2
    // Rejected = 3
    // Canceled = 4
    // Value higher than 4 cannot be returned
    function get() public view returns (Status) {
        return status;
    }

    // Pass a uint for input to update the value
    function set(Status _status) public {
        status = _status;
    }

    // Update value to a specific enum members
    function cancel() public {
        status = Status.Canceled; // Will set status = 4
    }
}

Structs

The concept of structs exists in many high level programming languages. They are used to define your own data types which group together related data.

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

contract TodoList {
    // Declare a struct which groups together two data types
    struct TodoItem {
        string text;
        bool completed;
    }

    // Create an array of TodoItem structs
    TodoItem[] public todos;

    function createTodo(string memory _text) public {
        // There are multiple ways to initialize structs

        // Method 1 - Call it like a function
        todos.push(TodoItem(_text, false));

        // Method 2 - Explicitly set its keys
        todos.push(TodoItem({ text: _text, completed: false }));

        // Method 3 - Initialize an empty struct, then set individual properties
        TodoItem memory todo;
        todo.text = _text;
        todo.completed = false;
        todos.push(todo);
    }

    // Update a struct value
    function update(uint _index, string memory _text) public {
        todos[_index].text = _text;
    }

    // Update completed
    function toggleCompleted(uint _index) public {
        todos[_index].completed = !todos[_index].completed;
    }
}

View and Pure Functions

You might have noticed that some of the functions we have been writing specify one of either a view or pure keyword in the function header. These are special keywords which indicate specific behavior for the function.

Getter functions (those which return values) can be declared either view or pure.

View: Functions which do not change any state values
Pure: Functions which do not change any state values, but also don't read any state values

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

contract ViewAndPure {
    // Declare a state variable
    uint public x = 1;

    // Promise not to modify the state (but can read state)
    function addToX(uint y) public view returns (uint) {
        return x + y;
    }

    // Promise not to modify or read from state
    function add(uint i, uint j) public pure returns (uint) {
        return i + j;
    }
}

Function Modifiers

Modifiers are code that can be run before and/or after a function call. They are commonly used for restricting access to certain functions, validating input parameters, protecting against certain types of attacks, etc.

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

contract Modifiers {
    address public owner;

    constructor() {
        // Set the contract deployer as the owner of the contract
        owner = msg.sender;
    }

    // Create a modifier that only allows a function to be called by the owner
    modifier onlyOwner() {
        require(msg.sender == owner, "You are not the owner");

        // Underscore is a special character used inside modifiers
        // Which tells Solidity to execute the function the modifier is used on
        // at this point
        // Therefore, this modifier will first perform the above check
        // Then run the rest of the code
        _;
    }

    // Create a function and apply the onlyOwner modifier on it
    function changeOwner(address _newOwner) public onlyOwner {
        // We will only reach this point if the modifier succeeds with its checks
        // So the caller of this transaction must be the current owner
        owner = _newOwner;
    }
}

Events

Events allow contracts to perform logging on the Ethereum blockchain. Logs for a given contract can be parsed later to perform updates on the frontend interface, for example. They are commonly used to allow frontend interfaces to listen for specific events and update the user interface, or used as a cheap form of storage.

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

contract Events {
    // Declare an event which logs an address and a string
    event TestCalled(address sender, string message);

    function test() public {
        // Log an event 
        emit TestCalled(msg.sender, "Someone called test()!");
    }
}

Constructors

A constructor is an optional function that is executed when the contract is first deployed. You can also pass arguments to constructors.

P.S. - If you remember, we actually used constructors in the Freshman track Cryptocurrency and NFT tutorials!

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

contract X {
    string public name;

    // You will need to provide a string argument when deploying the contract
    constructor(string memory _name) {
        // This will be set immediately when the contract is deployed
        name = _name;
    }
}

Inheritance

Inheritance is the procedure by which one contract can inherit the attributes and methods of another contract. Solidity supports multiple inheritance. Contracts can inherit other contract by using the is keyword.

Note: We actually also did Inheritance in the Freshman Track Cryptocurrency and NFT tutorials - where we inherited from the ERC20 and ERC721 contracts respectively.

A parent contract which has a function that can be overridden by a child contract must be declared as a virtual function.

A child contract that is going to override a parent function must use the override keyword.

The order of inheritance matters if parent contracts share methods or attributes by the same name.

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

/* Graph of inheritance
    A
   / \
  B   C
 /   /
D   E

*/

contract A {
    // Declare a virtual function foo() which can be overridden by children
    function foo() public pure virtual returns (string memory) {
        return "A";
    }
}

contract B is A {
    // Override A.foo();
    // But also allow this function to be overridden by further children
    // So we specify both keywords - virtual and override
    function foo() public pure virtual override returns (string memory) {
        return "B";
    }
}

contract C is A {
    // Similar to contract B above
    function foo() public pure virtual override returns (string memory) {
        return "C";
    }
}

// When inheriting from multiple contracts, if a function is defined multiple times, the right-most parent contract's function is used.
contract D is B, C {
    // D.foo() returns "C"
    // since C is the right-most parent with function foo();
    // override (B,C) means we want to override a method that exists in two parents
    function foo() public pure override (B, C) returns (string memory) {
        // super is a special keyword that is used to call functions
        // in the parent contract
        return super.foo();
    }
}

contract E is C, B {
    // E.foo() returns "B"
    // since B is the right-most parent with function foo();
    function foo() public pure override (C, B) returns (string memory) {
        return super.foo();
    }
}

Transferring ETH

There are three ways to transfer ETH from a contract to some other address. However, two of them are no longer recommended methods by Solidity in latest versions, therefore we shall skip those.

Currently, the recommended way to transfer ETH from a contract is to use the call function. The call function returns a bool indicating success or failure of the transfer.

How to receive Ether in a regular Ethereum account address

If transferring ETH to a regular account (like a Metamask address), you do not need to do anything special as all such accounts can automatically accept ETH transfers.

How to receive Ether in a contract

However, if you are writing a contract that you want to be able to receive ETH transfers directly, you must have at least one of the functions below

receive() external payable
fallback() external payable

receive() is called if msg.data is an empty value, and fallback() is used otherwise.

msg.data is a way to specify arbitrary data along with a transaction. You will usually not be using it manually.

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

contract ReceiveEther {
    /*
    Which function is called, fallback() or receive()?

           send Ether
               |
         msg.data is empty?
              / \
            yes  no
            /     \
receive() exists?  fallback()
         /   \
        yes   no
        /      \
    receive()   fallback()
    */

    // Function to receive Ether. msg.data must be empty
    receive() external payable {}

    // Fallback function is called when msg.data is not empty
    fallback() external payable {}

    function getBalance() public view returns (uint) {
        return address(this).balance;
    }
}

contract SendEther {
    function sendEth(address payable _to) public payable {
        // Just forward the ETH received in this payable function
        // to the given address
        uint amountToSend = msg.value;
        // call returns a bool value specifying success or failure
        (bool success, bytes memory data) = _to.call{value: msg.value}("");
        require(success == true, "Failed to send ETH");
    }
}

Calling External Contracts

Contracts can call other contracts by just calling functions on an instance of the other contract like A.foo(x, y, z). To do so, you must have an interface for A which tells your contract which functions exist. Interfaces in Solidity behave like header files, and serve similar purposes to the ABI we have been using when calling contracts from the frontend. This allows a contract to know how to encode and decode function arguments and return values for calling external contracts.

Note: Interfaces you use do not need to be extensive. i.e. they do not need to necessarily contain all the functions that exist in the external contract - only those which you might be calling at some point.

Assume there is an external ERC20 contract, and we are interested in calling the balanceOf function to check the balance of a given address from our contract.

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

interface MinimalERC20 {
    // Just include the functions we are interested in
    // in the interface
    function balanceOf(address account) external view returns (uint256);
}

contract MyContract {
    MinimalERC20 externalContract;

    constructor(address _externalContract) {
        // Initialize a MinimalERC20 contract instance
        externalContract = MinimalERC20(_externalContract);
    }

    function mustHaveSomeBalance() public {
        // Require that the caller of this transaction has a non-zero
        // balance of tokens in the external ERC20 contract
        uint balance = externalContract.balanceOf(msg.sender);
        require(balance > 0, "You don't own any tokens of external contract");
    }
}

Import Statements

To maintain code readability, you can split your Solidity code over multiple files. Solidity allows importing both local and external files.

Local Imports

Assume we have a folder structure like this:

├── Import.sol
└── Foo.sol

where Foo.sol is

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

contract Foo {
    string public name = "Foo";
}

We can import Foo and use it in Import.sol as such

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

// import Foo.sol from current directory
import "./Foo.sol";

contract Import {
    // Initialize Foo.sol
    Foo public foo = new Foo();

    // Test Foo.sol by getting it's name.
    function getFooName() public view returns (string memory) {
        return foo.name();
    }
}

NOTE: When we use Hardhat, we can also install contracts as node modules through npm, and then import contracts from the node_modules folder. These also count as local imports, as technically when you install a package you are downloading the contracts to your local machine.

External Imports

You can also import from Github by simply copying the URL. We did this in the Cryptocurrency and NFT tutorials in the Freshman track.

// https://github.com/owner/repo/blob/branch/path/to/Contract.sol
import "https://github.com/owner/repo/blob/branch/path/to/Contract.sol";

// Example import ERC20.sol from openzeppelin-contract repo
// https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol";

Solidity Libraries

Libraries are similar to contracts in Solidity, with a few limitations. Libraries cannot contain any state variables, and cannot transfer ETH.

Typically, libraries are used to add helper functions to your contracts. An extremely commonly used library in Solidity world is SafeMath - which ensures that mathematical operations do not cause an integer underflow or overflow.

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

library SafeMath {
    function add(uint x, uint y) internal pure returns (uint) {
        uint z = x + y;
        // If z overflowed, throw an error
        require(z >= x, "uint overflow");
        return z;
    }
}

contract TestSafeMath {
    function testAdd(uint x, uint y) public pure returns (uint) {
        return SafeMath.add(x, y);
    }
}

That's all folks! Congratulations on making it this far :D

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

Understanding the Ethereum Virtual Machine (EVM)

Haardik — Sun, 15 May 2022 08:07:31 +0000

Ethereum Virtual Machine (EVM)

The Ethereum network exists solely for the purpose of keeping the single, continuous, uninterrupted, and immutable operation of the state machine that is the Ethereum blockchain. It is the environment in which all Ethereum accounts and smart contracts and data live. At any given block, Ethereum has one and only one globally accepted 'state'. The Ethereum Virtual Machine (EVM) is what defines the rules for computing a new valid state from block to block.

Prerequisites

Some basic understanding of bytes, memory, and the stack is required to understand the EVM.

It might also be helpful to familiarize yourself with some cryptography like hash functions.

Ethereum as a State Machine

Blockchains like Bitcoin are often described as 'distributed ledgers' which enable the existence of a decentralized currency using fundamental tools of cryptography.

A cryptocurrency can behave like a 'normal' currency because of the rules which govern what one can and cannot do to modify this ledger. For example, a Bitcoin address cannot spend more Bitcoin than it has previously received. These rules underpin all transactions that take place on Bitcoin, and similarly other blockchains.

While Ethereum also has its native cryptocurrency, the Ether, it also enables a much more powerful function that we have seen - Smart Contracts. For this more complex feature, we need a more powerful analogy than just 'distributed ledger'.

Instead of a distributed ledger, Ethereum can be described as a distributed state machine. A state machine is essentially any machine that can change from one state to another in response to certain inputs.

A simple state machine is a coin-operated turnstile, commonly found in subways or train stations, to prevent people from entering unless they pay using a coin or have a ticket.

The initial state for a turnstile is locked. In the locked state, if you keep pushing it, it remains locked. If you insert a coin, it moves to the unlocked state. If you keep inserting coins, it remains in the unlocked state. Once you push in the unlocked state (and someone passes through), it becomes locked again.

For Ethereum, the state is much more complex. It is described using a large data structure which contains all the state of the blockchain. The specific rules of how state can change from block to block is defined by the EVM.

Ethereum State Transition

On a high level, the EVM behaves similar to a mathematical state transition function. Given the current state, and a new set of valid transactions, it produces a new state. The output is deterministic, which means that for the same input, it will always produce the same output.

Y(S, T) = S'

Given the old valid state S, and a new set of valid transactions T, the state transition function Y produces the new valid state S'.

The state in Ethereum is stored as a really large data structure called a Merkle Patricia Trie. You do not need to understand exactly how it is structured, but if you want to, you can read the given link.

EVM Layer

The EVM lives as a layer in the software stack of Ethereum.

Ethereum nodes contain implementations of the EVM, and the EVM can then execute EVM code on it. EVM code is compiled smart contract bytecode that can be executed.

EVM Code Generation

EVM Instructions (OPCODES)

The EVM itself behaves as a stack machine with a maximum depth of 1024 items on the stack. Each item in the stack is a 256-bit (32 bytes) word.

During execution, the EVM maintains a transient memory, as a 32 byte addressed byte array, which does not persist between transactions. The transient memory is cleared when a new transaction is being executed.

Smart contracts, however, do maintain their own state in the blockchain. This state is also modeled as a Merkle Patricia Trie. This is commonly refered to as the EVM storage during transaction execution.

The EVM has logic present that allows it to execute EVM Opcodes, which perform standard operations on the stack like XOR, ADD, AND, SUB, MUL etc. The EVM also implements a number of blockchain-specific stack operations, such as BALANCE and BLOCKHASH.

When a smart contract is compiled into bytecode (represented in hexadecimal), it compiles down to EVM opcodes. These opcodes are what get executed on the EVM.

EVM Implementations

All implementations of the EVM must adhere to the specification described in the Ethereum Yellowpaper. Over Ethereum's history, the EVM has undergone multiple revisions, and there now exist multiple implementations of the EVM in various programming languages.

All Ethereum clients include an EVM implementation. In addition to those, there are multiple standalone implementations as well.

Ethereum Clients (with EVM)

Geth | Programming Language = Go
OpenEthereum | Programming Language = Rust
Nethermind | Programming Language = C# (.NET)
Besu | Programming Language = Java
Erigon | Programming Language = Go

Standalone EVM Implementations

Py-EVM | Programming Language = Python
evmone | Programming Language = C++
ethereumjs-evm | Programming Language = Javascript
Enclave EVM | Programming Language = C++

Resources

The following are recommended, but optional, readings/viewings for learning more about the EVM.

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

What is Proof of Work (PoW)? How does PoW work on Ethereum?

Haardik — Sun, 15 May 2022 08:05:46 +0000

What is Proof of Work?

Ethereum, like Bitcoin, currently uses a consensus protocol called Proof of Work (PoW). This allows all nodes on the Ethereum Network to agree on the current state of the blockchain, and secures the network against a variety of attacks.

Later in 2022, Proof of Work will be phased out in favour of Proof of Stake with Ethereum 2.0. We will talk about this in later tracks, and deprecate the Proof of Work tutorial once it does happen.

What is consensus?

Merriam-Webster defines the word 'consensus' as follows.

What is a consensus protocol?

When it comes to blockchains like Ethereum, which are essentially distributed decentralized databases, the network nodes need to reach an agreement on the network's current state.

Consensus protocols help us achieve the agreement, or consensus, on the state of the network at a given point.

Although consensus protocols are not directly related to building dApps, understanding them will help you understand a lot of other concepts and build your fundamentals.

Consensus protocols are primarily economic systems that help prevent certain kinds of attacks. Theoretically, an attacker could compromise consensus by controlling 51% of the network. Consensus protocols are designed to make this '51% attack' economically unfeasible. Different mechanisms are engineered to solve this problem differently.

What is Proof of Work?

Proof of Work is a type of consensus protocol, famously used by Bitcoin and Ethereum.

Block Production

Under Proof of Work, miners are responsible for producing new blocks. Miners in the network compete against each other to create new blocks full of processed transactions. The winner then shares the block with the rest of the network, and earns freshly minted ETH for their hard work.

The race is won by whoever's computer can solve a computationally hard mathematical puzzle the fastest. The problem is computationally hard to solve, but very easy to verify. The solution to this problem is the 'certificate of legitimacy' we discussed in the What is Mining? tutorial.

Network Security

The network is kept secure by the fact that to gain 51% control over the network, you would need 51% of the network's computational power. However, since Proof of Work incentivizes miners with mining rewards, a lot of different groups of miners are interested in running mining nodes. Therefore, getting 51% of all computational power on a network requires huge investments in equipment and electrical energy - which means you're likely to end up spending more than you would earn.

Sybil Resistance

Technically speaking, proof of work is not a consensus protocol by itself - though it is often referred to as such for simplicity. They are actually Sybil resistance mechanisms and block producer selectors - a way to decide who is going to be the producer of the latest block.

Sybil Resistance measures how a protocol would do against a Sybil attack.

A Sybil attack is the problem when one user or group pretends to be many different users. Security against this type of attack is essential for a decentralized blockchain to allow miners to be rewarded based on the resources they put in, not just random selection.

Hypothetically, if we were to choose the producer of a block just by random selection instead of Proof of Work, one could execute a Sybil attack quite easily.

Suppose there are 2 miners on the network. Alice and Bob. By random selection, they should be getting roughly half of the mining rewards each. Now, Charlie comes along, but pretends to be 2 different users - Charlie and Darcy. By random selection now, Charlie would end up receiving 1/2 the mining rewards as he is pretending to be 2 different users, whereas Alice and Bob only get 1/4 each instead of 1/3 which they should.

Proof of Work protects against Sybil attacks by making miners put up a large amount of computational power as collateral, therefore having them expend a lot of electrical energy. This is done through the solving of the computation puzzle to prove that the miners are 'putting in the work'. This acts as an economic deterrent to Sybil attacks.

Since rewards are given out to successful miners, and miners become successful roughly proportional to their share of computational power on the network, it doesn't matter anymore if you're pretending to be 1 user or 2 or 100. You will get the same amount of mining rewards as your computation power stays the same.

Chain Selection Rules

Occasionally, two miners will produce valid blocks roughly at the same time. This can cause different nodes in the network to include different blocks in their blockchain. The technical term for this is a fork.

However, for blockchains to proceed in a stable fashion, a single contiguous chain needs to be chosen as the "correct chain" to prevent the splitting of state.

Bitcoin and Ethereum use the "longest chain" rule to do this. Whichever chain is accepted by a higher number of nodes and continues to grow longer is chosen as the 'correct chain', and the forked chain is gotten rid of.

The combination of Proof of Work and the longest chain rule is known as "Nakamoto Consensus" - named after Satoshi Nakamoto, the inventor of Bitcoin.

Occasionally, this means that transactions which get mined as part of a temporary fork may be rolled back once the fork is gotten rid of in favour of a different longer chain. This introduces the concept of Finality.

The blocks which form the forked chain and end up getting deleted are called Uncle Blocks. The miner clearly put in work to produce that Uncle block, and likely just lost out on the mining reward due to network latencies. As such, the Ethereum network still rewards Uncle block miners with 1.75 ETH for their hard work.

Finality

A transaction has "finality" on Ethereum when it's part of a block that can't change.

Because miners work in a decentralized way, two valid blocks can get mined at the same time. This creates a temporary fork. Eventually, one of these chains will become the accepted chain after a subsequent block has been mined and added, making it longer.

But to complicate things further, transactions rejected on the temporary fork may have been included in the accepted chain. This means it could get reversed. So finality refers to the time you should wait before considering a transaction irreversible. For Ethereum, the recommended time is six blocks or just over 1 minute. After six blocks, you can say with relative confidence that the transaction was successful (more than 99.999% chance it will not be reverted now). You can wait longer for even greater assurances.

The 'Work' in Proof of Work

We've been talking about a computationally hard mathematical problem that miners need to solve to provide a certificate of legitimacy. But what does this actually mean?

Essentially, we want to prove that the miners expended energy and computational power to compute the block. And, that they did so faster than everyone else. If we can prove this, it means that the miner essentially spent money and time (in the form of energy and computation) so they could get a chance to propose a new block.

It is in the miners best interest to produce valid blocks, because if they are caught lying (which is very easy since verification of the certificate is easy) - they just wasted all that energy and computation for nothing and therefore lost their money and time. As such, solving the mathematical problem means the miner really, really wants to propose the new block, and is willing to spend energy and computation to receive the reward.

The Ethereum proof-of-work protocol, Ethash, requires miners to go through an intense race of trial and error. The process goes as follows:

The miner selects a group of transactions to include in a potential block
Based on the block they create, the network has rules to choose a slice of data (roughly ~1GB in size) from the current state of the blockchain network. These rules are not particularly relevant, but you can read more about them in the Ethash docs.
They put the dataset through a hashing function to calculate a target value. This target is a number, which is inversely proportionate to the mining difficulty. The higher the mining difficulty, the lower the target, and vice versa.
Then, the miner uses brute force to try to find another random number called the nonce.
Putting the combination of the dataset, target, nonce, and a couple other values through a hashing function should result in a number that is lower than the target.
HashFunction(dataset, target, nonce, ...) = a number
The higher the mining difficulty, the lower the target, and hence the harder it is to find a nonce which satisfies this condition.
Miners keep using trial-and-error to find a valid value for the nonce which satisfies the condition. There is no formula to calculate the nonce.

The mining difficulty becomes less or more difficult based on how many miners are on the network, to ensure that a block can be reliably produced roughly every ~15 seconds. If it becomes too easy and there are a lot of miners, blocks will be produced much faster than 15 seconds. Likewise, if it becomes too hard and there are not a lot of miners, blocks will take a long time to be produced. Difficulty is calculated by the network automatically.

There is no way to solve this other than brute force, as currently there does not exist a way to reverse hash functions. Therefore, to know if a certain nonce, when appended to the dataset results in a specific hash, the only way possible is to try random values for the nonce and check.

Take some time to read this section thoroughly, this is all there is to Proof of Work. It might seem quite anticlimactic, but think about what we started off wanting to prove. We wanted to prove that miners did hard work to produce this block, and it wasn't a piece of cake for them. Since they did hard work, it is in their best interest to not lie. This sort of computation puzzle does exactly that, because finding a valid nonce is a computationally hard problem - but verifying it is easy, so other nodes can easily verify that the miner did in fact find a valid nonce, which means they did in fact put in the work.

How does Bitcoin actually work?

I recommend this video to everyone even slightly curious about the workings of a blockchain, and how blocks get validated and produced.

Watch the following video for a visual understanding of everything we just read about Proof of Work.

Resources

The following are recommended, but optional, readings/viewings to understand more about Proof of Work.

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

What is blockchain mining? Mining on Ethereum

Haardik — Sun, 15 May 2022 08:04:30 +0000

What is Mining?

Mining is the process that helps create new blocks of transactions to be added to the Ethereum blockchain network. It also helps keep the network secure from attacks.

Just like Bitcoin, Ethereum currently uses a Proof-of-Work (PoW) consensus mechanism, which is heavily reliant on mining. Ethereum miners use their time and computation power to process new incoming transactions and produce new blocks.

Ethereum 2.0 (scheduled for mid-late 2022) will replace Proof of Work with Proof of Stake, which will significantly change how new blocks are produced. We will talk about Eth2 later.

Why do miners exist?

Most people think that mining is simply a way of adding new transactions and creating new coins. But, we mentioned above, that mining also helps keep the network secure. Why is that?

In decentralized systems like Ethereum, we need to ensure that everyone in the world agrees on the ordering of transactions.

For example, if Alice sent Bob 1 ETH, which he further sent to Charlie, the order of the transactions NEEDS to be as follows

Alice --> Bob 1 ETH

Bob --> Charlie 1 ETH

Any other transaction order will not work, and it is important everyone agrees to this.

Miners, therefore, are also responsible for validating cryptocurrency transactions on the blockchain network and adding them to the ledger. Importantly, this process prevents the double-spending of digital currency.

Why would anyone become a miner?

Just like physical currencies, when someone executes a transaction, the state of the blockchain must be updated to reflect the debit/credit of each account involved.

Digital platforms however are prone to attacks, and can be manipulated. Miners therefore not only propose new blocks and validate all transactions, they also need to produce a certificate of legitimacy that all transactions in their proposed block are valid.

Producing this certificate is a computationally hard and complex challenge. This is what all of Proof of Work is about. We will go more in depth about this in a later tutorial, but for now, just know that producing this certificate is quite hard.

But, given a certificate of legitimacy, it is extremely easy for a third party to verify if it is valid or not.

For the miners hard work in producing these certificates and executing transactions, they are rewarded in the form of new coins. In Ethereum, when a miner successfully mines a block, they receive 2 ETH for their hard work.

Since decentralized systems lack a central authoirity, the mining process is extremely crucial to the safety and validity of the network. Therefore, the mining reward acts as incentive to participate in the transaction validation process.

Who can become a miner?

Technically speaking, anyone can become a miner on Ethereum by running the Ethereum node software. However, not everyone can mine Ethereum profitably.

In most cases, miners purchase specialized hardware to mine profitably. It is unlikely for average computers to earn enough mining rewards to cover the associated electrical and hardware costs for mining.

Costs of Mining

Costs of hardware necessary to build and maintain the hardware
Electrical costs of powering the mining rig
Potential cost of equipment to support the mining rig (coolers, ventilators, energy monitors, electrical wiring, solar farms, etc.)

To explore mining profitability, you can use a calculator like this

How are Ethereum transactions mined?

A user signs a transaction request from their account
The transaction is broadcasted to the Ethereum network through a node
Upon hearing of the new transaction, each node in the network adds the transaction to their local mempool (memory pool). The mempool is a list of transactions that nodes have heard about but have not yet been included as part of a block.
At some point, a miner groups a lot of transactions into a potential block, in a way that maximizes transaction fees they earn while staying under the block gas limits. Then,
1. The miner verifies the validity of each transaction. This involves things like checking that no one is trying to transfer ether they don't own, or that the signature is invalid, or the request is malformed, etc.
2. The miner then executes the transaction on their local copy of the Ethereum Virtual Machine (EVM). It awards the transaction fees for each such request to their own account.
3. The miner begins the process of creating the Proof-of-Work certificate of legitimacy for the entire block, after all transactions in the block have been verified and executed on their local EVM.
Eventually, the miner finishes producing the certificate of legitimacy for the block, which includes the user's transaction. The miner then broadcasts the completed block to the world, which includes the certificate and the new state information for the blockchain.
Other nodes hear about the new block. They verify the certificate (which is easy to do), execute all transactions in the block on their local copies of the EVM, and verify that their EVM state matches the one proposed by the miner.
Once other nodes have verified everything proposed by the miner, they add this block to their blockchain node, and accept the new EVM state as "the current state of the blockchain".
Each node removes the transactions included within the block from their local mempool.
This process repeats.

Different methods of Mining

In the technology's early days, when it was quite easy to become a miner, most miners used CPU-based mining running on their desktops and laptops. However, CPU-mining is quite slow and impractical in today's age because it can take months to earn even a tiny amount of mining rewards, while constantly running your CPU at 100% of it's capacity and paying for high electrical costs.

GPU-based mining is the most common approach these days. This approach can maximize the computation power by bringing together multiple GPUs under a single mining rig, putting them all to work in parallel thereby increasing overall capacity and throughput of the one rig.

Application-Specific Integrated Circuit (ASIC) mining is also quite popular. These are hardware chips designed specifically to mine Ethereum. You can purchase ASICs online for most popular blockchain networks. However, they are expensive, and as more and more miners join the network and mining becomes harder, the hardware becomes obsolete quickly. A brand new ASIC would usually only last 1-2 years max.

Another option that is growing these days is cloud mining, which allows individual miners to leverage the power of dedicated mining facilities, without owning any hardware.

Mining Pools

Most individual miners do not have enough resources to set up huge mining facilities with thousands of GPUs and ASICs. Mining pools allow miners to combine their computational resources in order to increase their chances of mining blocks. If anyone in the mining pool succeeds at mining a block, the reward is distributed proportionately to everyone in the pool based on their computational power they contribute to the pool.

Visual Demo of Mining

Watch this video to get a visual demo of the mining process.

Resources

The following are additional recommended, but optional, readings and viewings to learn more about mining:

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

What is Gas on Ethereum (and other blockchains)? Deep dive

Haardik — Sun, 15 May 2022 08:02:49 +0000

What is Gas?

Gas is one of the most important and fundamental aspects of understanding the Ethereum network.

Gas is the fuel that allows it (Ethereum) to operate, in the same way that a car needs gasoline to run.

While going through the Freshman track tutorials, you may have noticed that transactions made on the Ethereum network require the users to pay a transaction fee.

How is this transaction fee calculated?
How much ETH do you need to pay for a transaction?
Why are some transactions more expensive than others?
Why do Gas Fees exist?

The answer to these questions lie within the concept of gas.

A recent upgrade, the London Upgrade of August 2021, slightly changed how transaction fees are calculated and how gas works. For that reason, we will break this tutorial into two sections:

Pre-London Upgrade
Post-London Upgrade

The Pre-London Upgrade is good to understand and easier to wrap your head around initially than the Post-London Upgrade, and also provides the motivation for the upgrade.

Gas: General Concepts

Just like how seconds are a unit of time, and metres a unit of distance, gas by itself is a unit of computation on the Ethereum Network.

The gas unit is used to measure the amount of computational effort required to execute a transaction on Ethereum. Since each transaction requires some computation resources to execute, it requires a fee, commonly called Gas fees or Transaction fees.

Gas fees are paid in Ethereum's native currency - ether or ETH. How gas fees is calculated is slightly different pre- and post-London Upgrade.

NOTE: Generally when someone says 'Gas' - they refer to 'Gas Fees' not the unit itself. However, for the purposes of this tutorial, we will be technically correct and say 'Gas' when referring to the unit, and 'Gas Fees' when referring to the fees in Ether.

Pre-London Upgrade

Before the London Upgrade took place, how much ether you needed to pay for a transaction was calculated using a simple formula.

gas fees = gas spent * gas price

Gas Spent is the total amount of gas (in gas units) that were used to execute the transaction
Gas Price is the amount of ether you're willing to pay per gas unit of execution

Gas prices are denominated in gwei - a denomination of ETH.

1 Gwei = 0.000000001 ETH

1 ETH = 10^9 Gwei

So instead of saying your gas price is 0.000000001 ETH, you can say your gas price is 1 Gwei.

Gwei stands for Giga-Wei, which is equal to 1,000,000,000 (10^9) wei. Wei is the smallest denomination of ETH. 1 ETH = 10^18 Wei.

Example

The cheapest transaction, in terms of amount of gas required to execute, is just the transfer of ETH from one account to another. This transaction costs 21,000 gas units.

Suppose Alice wanted to pay Bob 1 ETH. The gas cost is 21,000 gas. Assume the gas price is 200 Gwei.

Therefore, gas fees = 21,000 * 200 = 4,200,000 Gwei = 0.0042 ETH

So, when Alice sends the money, 1.0042 ETH will be deducted from her account, and Bob will receive 1 ETH. The 0.0042 ETH fees goes to the miner who mined the block containing Alice's transaction.

You may be wondering how the gas price was set to 200 Gwei?
How much the gas price is set to is upto the user. Transactions with higher gas price have higher priority to be included in a block, as miners receive a higher tip for mining those first.

Wallets like Metamask provide reasonable estimates for gas prices based on current network conditions for transactions to be executed - therefore most users don't need to touch the gas price values themselves. (Though, you can enable modification through Metamask settings)

Gas Cost Calculation

When a smart contract is compiled into bytecode, before deployment to the Ethereum network, it is compiled down to OPCODES. These are simple operations that can run directly on the Ethereum Virtual Machine. You can think of them as analogous to basic operations that can run directly on your Intel or AMD CPU. These OPCODES include basic operations like ADD, MUL, DIV, SUB, SHA3, etc.

Each OPCODE has a fixed gas cost. The gas cost of a specific function within the smart contract is the sum of the gas costs of all it's OPCODES. You can find a list of all OPCODES and their associated gas costs here if interested.

Therefore, more complex transactions which require more OPCODES to execute end up using more gas (units) than simpler transactions like transferring ETH from one account to another.

Gas Limits

Now, you can imagine that there exist a lot of functions that are much more complicated than just sending ETH from one account to another. Those which involve loops, or randomness, or rely on user input.

For such functions, it can be hard to predict exactly the amount of gas that will be required for execution as it depends on other variables.

As such, instead of specifying the exact gas cost when deciding how much fees to pay for the transaction, you can specify an upper bound limit.

Gas Limit refers to the maximum amount of gas (units) you're willing to use for the transaction. This is set by the user.

Again, wallets like Metamask provide reasonable estimates.

If your transaction uses less gas than your limit, the unspent gas is refunded to your account.

Your wallet therefore must have gas limit * gas price ether to pay for gas when sending the transaction. Any unspent gas will be refunded when the transaction gets executed and mined.

If, however, your transaction uses more gas than your limit, the transaction will fail and your gas will be gone.

Block Gas Limits

In addition to user specified gas limits per transaction, the Ethereum network also imposes a limit on the maximum amount of gas (units) allowed in a single block.

This is done to ensure that each block stays within an allowable range of computational cost. Since more complex transactions take longer to execute, this makes sure that nodes don't start falling out of sync with the rest of the network due to increased computational complexity.

Post-London Upgrade

On August 5th, 2021 - the London Upgrade was implemented on the Ethereum network. This upgrade primarily introduced three benefits:

Better gas fees estimations
Quicker transaction inclusion
Burning a percentage of ETH being used as transaction fees

For the purposes of this article, we are primarily interested in the first two points.

Prior to the London Upgrade, wallets like Metamask would provide estimates for gas prices based on past network activity. Every wallet used their own methodology to do so. Metamask, specifically, scanned the last 1000 blocks on Ethereum, and predicted the gas price for your transaction.

Starting with the London Upgrade however, every block was set to have a base gas price fees. This was the minimum price per unit of gas for getting your transaction included within this block. This was calculated natively by the network based on the demand for block space. These base fees would go on to be burnt by the Ethereum network, therefore forever getting rid of that ETH to offset issuance. Since Ethereum does not have an overall maximum supply (unlike Bitcoin, which has a maximum supply of 21M Bitcoins), the burn helps the ETH supply reach an equilibrium by not inflating it infinitely.

In addition to the base fees, the concept of tipping (priority fees) was introduced. As the base fees got burnt, the tip was there to compensate miners for executing and propogating user transactions. This is again set by most wallets automatically, though you can choose to set this manually. Higher tip transactions tend to get higher priority.

With this upgrade, the formula to calculate gas fees changed to the following:

gas fees = gas spent * (base fees + priority fees)

Example

Going back to the earlier example, if Alice had to pay Bob 1 ETH, the gas cost (in units) is 21,000. Suppose the base fees is 100 Gwei, and Alice decides to include a tip of 10 Gwei.

total gas fees = 21,000 * (100 Gwei + 10 Gwei) = 2,310,000 Gwei = 0.00231 ETH

Variable Block Sizes

Prior to the London Upgrade, the block gas limit was constant for all blocks. Each block had a maximum capacity of 15M gas. In times of high demand, this resulted in bad user experience, as blocks were operating at full capacity, and users had to wait for the demand to reduce to get included in a block.

The upgrade introduced variable size blocks to Ethereum. Each block now has a target gas limit of 15M gas, but the size can increase or decrease along with network demand, up until a maximum of 30M gas.

On average, the network achieves equilibrium around 15M gas by modifying the block size and base fees.

If the block gas is greater than the 15M target, the base fees for the next block is increased. Similarly, if the block gas is smaller than the 15M target, the base fees for the next block is decreased. The amount by which the base fees gets adjusted is dependent on how far the block gas was from the 15M target.

Take some time to read the last couple of paragraphs and fully grasp them - it is pretty fascinating stuff, but can be a little tricky to wrap your head around.

Variable Base Fees

Let's look at what happens to the base fees in times of high network demand.

The base fees is increased by a maximum of 12.5% per block if the target 15M gas is exceeded. This exponential growth makes it financially non-viable for block gas to remain high indefinitely, therefore allowing nodes to stay synced with the network and not constantly be executing 30M gas blocks.

In this example, Block 2 saw the maximum increase possible from the target 15M to 30M. As a result, the base fees for block 3 was increased by 12.5% from 100 Gwei to 112.5 Gwei.

Similarly, since block 3 also hit the maximum limit of 30M gas, which is the maximum possible distance from the target, the base fees for block 4 was again increased by 12.5% to 126.6 Gwei. And so on...

This kept happening, and by block 8, the base fees was 202.7 Gwei. A 102.7% increase from 7 blocks ago! By block 100, base fees was 10302608.6 Gwei - this is insane (and also unrealistic). This means that a simple ETH transfer at block 100 will cost you (21000 * 10302608.6 Gwei) = 216 ETH.

Due to this exponential increase in base fees, it can be noted that it is extremely unlikely to see extended spikes of full blocks.

Better Gas Estimation

Relative to the Pre-London Upgrade mechanics, this base fee mechanism change allowed fee prediction to be much more reliable. Following the above table, to create a transaction in block number 9, the wallet can let the user know with 100% certainty that the maximum base fees to be added to the next block is current base fees (base fees of prev block) * 112.5% = 202.8 * 112.5/100 or 228.1 Gwei.

Therefore, wallets now know a minimum and maximum range of base fees to provide to the user when supplying estimations. The minimum is the current base fees, and the maximum is the current base fees * 112.5% The user can then just adjust the tip, which is usually a fraction of the base fees, for the miner.

Why does Gas exist?

Gas fees help keep the Ethereum network secure. By requiring a fee for every computation executed on the network, bad actors are prevented from spamming the network.

In order to avoid accidental or malicious infinite loops in smart contracts, which would cause all Ethereum nodes to forever be stuck, gas limits on transactions set a limit to how much computation a transaction can use.

Code like this will use up all the gas provided, upto the limit, and then the transaction will fail:

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

contract Gas {
    uint public i = 0;

    // Using up all of the gas that you send causes your transaction to fail.
    // State changes are undone.
    // Gas spent are not refunded.
    function forever() public {
        // Here we run a loop until all of the gas are spent
        // and the transaction fails
        while (true) {
            i += 1;
        }
    }
}

The fundamental unit to make all of this possible is Gas.

Reducing Gas Fees

High fees on Ethereum is a hot topic these days. The Ethereum community has solemlny swore to not hurt the decentralization or security of the network. As such, tradeoffs were made in favour of security which leads to the Ethereum network currently having higher transaction fees than other blockchains such as Solana, which made the tradeoff in favour of lower fees at the expense of security and decentralization.

Ethereum's fundamental goal is to be a highly secure and highly decentralized blockchain network capable of executing smart contracts.

But, none of that matters if users have to keep spending hundreds of dollars to move one dollar around.

As such, there are a lot of things being worked on, and some already available, to allow for a reduction in gas fees and improve the user experience.

Primarily, the network upgrades that will be offered by Ethereum 2.0 (also known as Eth2) will ultimately address some of the gas issues, which in turn will enable the network to process thousands of transactions per second and scale globally.

In addition, a lot of work is being done on Layer 2 Scaling. We will learn much more in depth about Layer 2 Scaling and Layer 2 platforms later on, but essentially they are networks which shift the heavy computation aspects of smart contracts somewhere else, and use the Ethereum mainnet as a final settlement layer, thereby inheriting the security and decentralization benefits of Ethereum, and maintaining low gas fees and high transaction speed for users.

Resources

The following resources are recommended, but optional, readings/viewings to learn more about gas:

This article is brought to you by LearnWeb3 DAO. A free, comprehensive A to Z blockchain training program for developers across the globe.

Everything from "What is a Blockchain" to "Hacking smart contracts" - and everything in between, but also much more!
Join us now to start buidling with 25,000+ builders.

Website
Discord
Twitter

DEV Community: Haardik

Build your own Decentralized Exchange! Use the xy=k AMM curve on Ethereum using Solidity, ethers.js, Next.js, and Web3Modal

DeFi-Exchange

Requirements

Prerequisites

Smart Contract

Website

Push your Code to Github

Deploying your dApp

How do DEX's work? Understand Uniswap v1 by deep diving into the math and code. Learn the xy=k AMM curve.

DeFi Exchange Theory

Mt.Gox

QuadrigaCX

The Birth of Decentralized Exchanges

Why is it complicated?

Uniswap V1, V2, V3

Market Makers

Functional Requirements

XY = K

Slippage

Who sets the initial price?

LP Tokens

Fees

Congratulations!

Build an on-chain DAO for your NFT holders on Ethereum using Solidity, Next.js, ethers.js, Web3Modal

Building a DAO

What is a DAO?

Building our DAO

Requirements

What we will make

Prerequisites

BUIDL IT

Smart Contract Development

Smart Contract Deployment

Frontend Development

Testing

Push to Github

Website Deployment

CONGRATULATIONS! You're all done!

Launch an ICO on Ethereum using Solidity, Next.js, ethers.js, Web3Modal. Airdrop free tokens to NFT holders.

ICO (Initial Coin Offering)

Prefer a Video?

Build

Requirements

Prerequisites

Theory

Build

Smart Contract

Website

Push to Github

Deploying your dApp

CONGRATULATIONS! You're all done!

Build an entire NFT Collection on Ethereum using Solidity, Next.js, Web3Modal, Ethers.js

NFT-Collection

Requirements

Prerequisites

Theory

Build

Prefer a Video?

Smart Contract

Website

Push to github

Deploying your dApp

View your Collection on Opensea

Build a simple whitelist dApp using Solidity, Next.js, ethers.js on Ethereum

Whitelist-Dapp

Requirements

Prerequisites

Prefer a Video?

Build

Smart Contract

Website

Push to github

Deploying your dApp

What are Providers and Signers? What is an ABI? What are BigNumbers? How do contracts deal with ERC-20 tokens?

Sophomore Mixed Topics

Table of Contents

Providers and Signers

BigNumbers

ABI

`approve(address spender, uint256 amount)`

`transferFrom(address from, address to, uint256 amount)`