Lesson 10: Front-end files not getting updated (abi.json & contractAddresses.json)

[LucidJoy]

When I run yarn hardhat node, my contractAddresses.json and abi.json file doesn't update. I'm not able to figure out where is the mistake as there are no errors while running.

Time-stamp: 17:36:05

99-deploy-frontEnd.js:

const { ethers, network } = require("hardhat");
const fs = require("fs");

const FRONT_END_ADDRESSES_FILE =
  "../../nextjs-smartcontract-lottery/constants/contractAddresses.json";
const FRONT_END_ABI_FILE =
  "../../nextjs-smartcontract-lottery/constants/abi.json";

module.exports = async function () {
  if (process.env.UPDATE_FRONT_END) {
    console.log("Updating front end...");
    await updateContractAddresses();
    await updateAbi();
    console.log("Front end Updated!");
  }
};

async function updateAbi() {
  const raffle = await ethers.getContract("Raffle");
  fs.writeFileSync(
    FRONT_END_ABI_FILE,
    raffle.interface.format(ethers.utils.FormatTypes.json)
  );
}

async function updateContractAddresses() {
  const raffle = await ethers.getContract("Raffle");
  const chainId = network.config.chainId.toString();
  const currentAddress = JSON.parse(
    fs.readFileSync(FRONT_END_ADDRESSES_FILE, "utf8")
  );

  if (chainId in currentAddress) {
    if (!currentAddress[chainId].includes(raffle.address)) {
      currentAddress[chainId].push(raffle.address);
    }
  } else {
    currentAddress[chainId] = [raffle.address];
  }

  fs.writeFileSync(FRONT_END_ADDRESSES_FILE, JSON.stringify(currentAddress));
}

module.exports.tags = ["all", "frontend"];

Terminal:

[krakxn]

yarn hardhat node only runs a local environment with the contracts, you need to run the script for it to take any effect.

I would recommend following along w/ Patrick properly.

[LucidJoy]

At 17:35:46, Patrick ran hh node which is same as yarn hardhat node, right?

Since I am using windows, hh node doesn't work.

[krakxn]

You can do it by adding the following in your package.json:

Context (a sample package.json for you to know where to add it)

{
  "name": "nextjs-smartcontract-lottery-fcc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "moralis": "^1.8.1",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-moralis": "^1.4.0",
    "web3uikit": "^0.1.163"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.12",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.0.24"
  }
}

So, if you do not have a scripts key as above, make it. Then inside it, add the following:

"hh node": "yarn hardhat node"

The shortcut will work now

[LucidJoy]

This is my package.json file:

{
  "name": "nextjs-smartcontract-lottery",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "hh node": "yarn hardhat node"
  },
  "dependencies": {
    "@web3uikit/core": "^0.1.4",
    "@web3uikit/icons": "^0.1.4",
    "@web3uikit/web3": "^0.1.4",
    "moralis": "^1.10.1",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.4.0",
    "web3uikit": "^0.1.170"
  },
  "devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3"
  }
}

But even if, when I run hh node it opens up a window.

[krakxn]

Delete the:

"hh node": "yarn hardhat node"

Use this instead:

"hh": "hardhat"

Now, the shell command should be: yarn hh node

Does this work?

[LucidJoy]

It doesn't run because hardhat isn't installed in nextjs-smartcontract-lottery.

However, I tried to run it on the backend folder as Patrick, and it runs but still my abi.json and contractAddresses.json doesn't get updated.

My hardhat-smartcontract-lottery(backend) file:

{
  "name": "hardhat-smartcontract-lottery-fcc",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "yarn hardhat test",
    "test-staging": "yarn hardhat test --network rinkeby",
    "lint": "yarn solhint 'contracts/*.sol'",
    "lint:fix": "yarn solhint 'contracts/**/*.sol' --fix",
    "format": "yarn prettier --write .",
    "coverage": "yarn hardhat coverage",
    "hh": "hardhat"
  },
  "license": "MIT",
  "devDependencies": {
    "@chainlink/contracts": "^0.4.1",
    "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers",
    "@nomiclabs/hardhat-etherscan": "^3.1.0",
    "@nomiclabs/hardhat-waffle": "^2.0.3",
    "chai": "^4.3.6",
    "dotenv": "^16.0.1",
    "ethereum-waffle": "^3.4.4",
    "ethers": "^5.6.9",
    "hardhat": "^2.10.1",
    "hardhat-contract-sizer": "^2.6.1",
    "hardhat-deploy": "^0.11.11",
    "hardhat-gas-reporter": "^1.0.8",
    "prettier": "^2.7.1",
    "prettier-plugin-solidity": "^1.0.0-dev.23",
    "solhint": "^3.3.7",
    "solidity-coverage": "^0.7.21"
  },
  "dependencies": {
    "@chainlink/contracts": "^0.4.0",
    "@chainlink/test-helpers": "^0.0.7-alpha",
    "@chainlink/token": "^1.1.0",
    "@openzeppelin/contracts": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "dotenv": "^10.0.0"
  },
  "mocha": {
    "timeout": 10000000
  }
}

Terminal:

ABI files:

As you can see, my ABI files are not getting updated even though yarn hh node runs without any error.

[g01xm]

You code looks alright, did you check the path of directory? if nextjs-smartcontract-lottery and your hardhat lottery code under same directory, it should be only one ../ like this:

const FRONT_END_ADDRESSES_FILE =
"../nextjs-smartcontract-lottery/constants/contractAddresses.json";
const FRONT_END_ABI_FILE =
"../nextjs-smartcontract-lottery/constants/abi.json";

or you need to check what is the correct path format for windows, because the tutorial code example is under MAC.

also make sure the process.env.UPDATE_FRONT_END = true

[LucidJoy]

I just realized that I didn't declare UPDATE_FRONT_END = true in my .env file. 🥲

Thanks for everyone's help!