DEV Community

LearnWeb3 DAO profile image Haardik
Haardik for LearnWeb3 DAO

Posted on

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

#web3 #blockchain #nextjs #javascript

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!
ICO dApp Part-1
ICO dApp Part-2

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

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
Enter fullscreen mode Exit fullscreen mode
  • In the same directory where you installed Hardhat run: 
  npx hardhat
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode 
  npm install @openzeppelin/contracts
Enter fullscreen mode Exit fullscreen mode

  • 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);
  }
Enter fullscreen mode Exit fullscreen mode
  • 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 {}
    }
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode

  • 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);
    });
Enter fullscreen mode Exit fullscreen mode
  • 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],
      },
    },
  };
Enter fullscreen mode Exit fullscreen mode
  • Compile the contract, open up a terminal pointing athardhat-tutorial directory and execute this command 
     npx hardhat compile
Enter fullscreen mode Exit fullscreen mode
  • To deploy, open up a terminal pointing athardhat-tutorial directory and execute this command 
    npx hardhat run scripts/deploy.js --network rinkeby
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • To create this my-app, in the terminal point to ICO folder and type 
      npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

and press enter for all the questions

  • Now to run the app, execute these commands in the terminal 
  cd my-app
  npm run dev
Enter fullscreen mode Exit fullscreen mode

  • 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
Enter fullscreen mode Exit fullscreen mode
  • In the same terminal also install ethers.js 
  npm i ethers
Enter fullscreen mode Exit fullscreen mode 
  .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;
    }
  }
Enter fullscreen mode Exit fullscreen mode
  • 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>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • 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";
Enter fullscreen mode Exit fullscreen mode
  • Now in your terminal which is pointing to my-app folder, execute 
  npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Top comments (0)

Read next

stormsidali2001 profile image

Next.js 15 Deep Dive: Building a Notes App with Advanced Features

Sidali Assoul -

piterweb profile image

👉 What is gleam language used for ❓

PiterDev -

prince_beec5ccde00b7c6c73 profile image

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Prince -

peterlidee profile image

Synchronous and asynchronous searchParams in Next 15

Peter Jacxsens -