Deploy with Hardhat

Hardhat is one of the popular smart contract development frameworks.

This document is a guide on how to deploy a smart contract on the Conla network using Hardhat.

Hardhat smart contract

• mkdir <project-name>;cd <project-name>

• Initialize a project with Hardhat: npx hardhat.

• Next, (… To avoid failure … please go slow with this cli dialogue…),

  So then,

• Press <ENTER> to set the project root.

• Press <ENTER> again to accept addition of .gitignore.

• Type n to reject installing sample project's dependencies.

  The idea here is to postpone installing dependencies to later steps due to a possible version-related bug.

• Open the hardhat.config.js file and paste the below code:

  Copy

  require("dotenv").config();
  require("@nomicfoundation/hardhat-toolbox");
  
  /** @type import('hardhat/config').HardhatUserConfig */
  module.exports = {
  solidity: "0.8.9",
  paths: {
      artifacts: "./src",
  },
  networks: {
      conla-testnet: {
      url: `https://testnet-rpc.conla.com`,
      accounts: [process.env.ACCOUNT_PRIVATE_KEY],
      },
  },
  };

  Note that a different path to artifacts is added so that the React app will be able to read the contract ABI within the src folder.

Add scripts

• Create a new file, in the contracts folder, named Counter.sol: touch contracts/Counter.sol.

• Copy the below code and paste it in the Counter contract code:

  Copy

  //SPDX-License-Identifier: MIT
  pragma solidity ^0.8.9;
  
  contract Counter {
  uint256 currentCount = 0;
  
      function increment() public {
          currentCount = currentCount + 1;
      }
  
      function retrieve() public view returns (uint256){
          return currentCount;
      }
  }

• Create a new file in the scripts folder deploy-counter.js: touch scripts/deploy-counter.js.

• Add the code below to the deploy-counter.js file:

  Copy

  const hre = require("hardhat");
  
  async function main() {
      const deployedContract = await hre.ethers.deployContract("Counter");
      await deployedContract.waitForDeployment();
      console.log(
          `Counter contract deployed to https://explorer.conla.com/address/${deployedContract.target}`
      );
  }
  
  main().catch((error) => {
      console.error(error);
      process.exitCode = 1;
  });

• Before compiling the contract, you need to install the toolbox. You may need to change directory to install outside the project. Use this command:

  Copy

  npm install --save-dev @nomicfoundation/hardhat-toolbox

• Compile your contract code (i.e., go back to the project root in the CLI):

  Copy

  npx hardhat compile

• Now run the scripts:

  Copy

  npx hardhat run scripts/deploy-counter.js --network conla-testnet

  ​Here’s an output example:

  Counter contract deployed to https://explorer.conla.com/address/0x5FbDB2315678afecb367f032d93F642f64180aa3

Update frontend

The next step is to turn Counter.sol into a dApp by importing the ethers and the Counter file, as well as logging the contract’s ABI.

• Include the below code in the App.js file:

  Copy

  import { ethers } from "ethers";
  import Counter from "./contracts/Counter.sol/Counter.json";
  const counterAddress = "your-contract-address"
  console.log(counterAddress, "Counter ABI: ", Counter.abi);

• Update the counterAddress to your deployed address.

  • It is the hexadecimal number found at the tail-end of the output of the last npx hardhat run ... command and looks like this 0x5FbDB2315678afecb367f032d93F642f64180aa3.

  • It must be pasted in the App.js to replace your-contract-address. Be sure to use the deployed address from your own implementation!

• Update frontend counter to read from blockchain. Include the below code in the App.js file:

  Copy

  useEffect(() => {
      // declare the data fetching function
      const fetchCount = async () => {
      const data = await readCounterValue();
      return data;
      };
  
      fetchCount().catch(console.error);
  }, []);
  
  async function readCounterValue() {
      if (typeof window.ethereum !== "undefined") {
          const provider = new ethers.providers.Web3Provider(window.ethereum);
  
          console.log("provider", provider);
  
          const contract = new ethers.Contract(
              counterAddress,
              Counter.abi,
              provider
          );
  
          console.log("contract", contract);
  
          try {
              const data = await contract.retrieve();
              console.log(data);
              console.log("data: ", parseInt(data.toString()));
              setCount(parseInt(data.toString()));
          } catch (err) {
              console.log("Error: ", err);
              alert(
                  "Switch your MetaMask network to Conla Testnet and refresh this page!"
              );
          }
      }
  }

• Also, to import useEffect, insert it like this:

  Copy

  import { useState, useEffect } from "react";

• To be able to track a loader, add this to your state:

  Copy

  const [isLoading, setIsLoading] = useState(false);

  • This is within the App() function.

• Let frontend counter write to the blockchain by adding the below requestAccount and updateCounter functions:

  Copy

  async function requestAccount() {
  await window.ethereum.request({ method: "eth_requestAccounts" });
  }
  
  async function updateCounter() {
  if (typeof window.ethereum !== "undefined") {
      await requestAccount();
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      console.log({ provider });
      const signer = provider.getSigner();
      const contract = new ethers.Contract(counterAddress, Counter.abi, signer);
      const transaction = await contract.increment();
      setIsLoading(true);
      await transaction.wait();
      setIsLoading(false);
      readCounterValue();
  }
  }

  Place these two functions above the readCounterValue() function in the App.js file.

• Replace the incrementCounter function with this one:

  Copy

  const incrementCounter = async () => {
  await updateCounter();
  };

• Update the increment button code to:

  Copy

  <Button
  onClick={incrementCounter}
  variant="outlined"
  disabled={isLoading}
  >
  {isLoading ? "loading..." : "+1"}
  </Button>

Now, run the Counter dApp by simply using npm start in CLI at the project root.

You have successfully deployed a dApp on the Conla testnet.