Chapter 10: nextjs-smartcontract-lottery [Error on raffle.interface.format(ethers.utils.FormatTypes.json)] for TypeScript ]

[sanjayojha]

While updating ABI from hardhat Smart contract Lottery deploy script 02-update-front-end.ts . I am getting following error.

The original repository of typescript version has missing code for updating ABI on front-end. I followed the main branch JavaScript code in my Typescript file, but gettting above error.

Full code of 02-update-front-end.ts

import { DeployFunction } from "hardhat-deploy/types";
import { HardhatRuntimeEnvironment } from "hardhat/types";
import fs from "fs";
import { frontEndContractsFile, frontEndAbiFile } from "../helper-hardhat-config";

const updateUI: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
    const { network, ethers } = hre;
    if (process.env.UPDATE_FRONT_END) {
        console.log("Writing to front end...");

        //Updating Contract Address on front end JSON file.
        const raffle = await ethers.getContract("Raffle");
        const contractAddresses = JSON.parse(fs.readFileSync(frontEndContractsFile, "utf8")); //reading current data
        const chainId = network.config.chainId!.toString(); //getting chainId from hardhat config
        if (chainId in contractAddresses) {
            if (!contractAddresses[chainId].includes(raffle.address)) {
                contractAddresses[chainId].push(raffle.address);
            }
        } else {
            contractAddresses[chainId] = [raffle.address];
        }
        fs.writeFileSync(frontEndContractsFile, JSON.stringify(contractAddresses)); // finally writing the new addressess.

        //Updating ABI on front end JSON file
        fs.writeFileSync(
            frontEndAbiFile,
            raffle.interface.format(ethers.utils.FormatTypes.json) //this line in typescript is showing above error.
        );
    }
};

export default updateUI;
updateUI.tags = ["all", "frontend"];

[alymurtazamemon]

@PatrickAlphaC

[PatrickAlphaC]

Is this the same code that's in my example?

[sanjayojha]

Yes, its same. And this part is missing in your typescript branch.

[albatros-github]

In the VSCode suggestion the Interface.format typescript type is "string | string[]", and the fs.writeFileSync function requires "string | NodeJSArrayBufferView" resulting in no match.

With this change it works for me:

fs.writeFileSync(frontEndABIFile, (fundMe.interface.format(ethers.utils.FormatTypes.json)).toString())

And yes @PatrickAlphaC the typescript github repo lacks the abi.json frontend updating mechanism