Not getting types from Contract using Typescript, Hardhat & Typechain

[rrriki]

Hey everyone,

I'm tying to set a typescript repo working using Hardhat and React. I've compiled my contracts successfully with hardhat and can see that types are being generated from typechain, but on the frontend, when I instantiated the ethers contract, I was expecting to get type hinting for my methods and instead I see it getting defined as just ethers.Contract, so my methods are not returning my types, but any

Is this normal behavior, or do I have something mis-configured that is not allowing me to take complete advantage of the types generated by typechain?

import { ethers } from "ethers";
import Market from "../../artifacts/contracts/MarketPlace.sol/MarketPlace.json";

const provider = new ethers.providers.JsonRpcProvider();
const marketContract = new ethers.Contract(marketContractAddress, Market.abi, provider);
const items = marketContract.fetchCreatedItems();
      

Thanks in advance, appreciate any help or advice.

[zemse]

@rrriki new ethers.Contract(marketContractAddress, Market.abi, provider); generates methods during runtime and hence typescript does not know the functions. Due to this reason, typechain has an extended version of ethers.Contract class for every kind of contract which adds typings of your methods. So you have to use them.

TLDR; You have to import from the typechain directory

import { MarketContract__factory } from '../../typechain';
const marketContract = MarketContract__factory.connect(marketContractAddress, provider);`

You may go through the docs for using ethers v5 target in typechain.

[rrriki]

Thank you so much, @zemse just what I was looking for 😬👌🏻

[myhendry]

Hi. I am trying to achieve the same thing - to have typings on my frontend. I imported the factory and it shows the typings. However, when I do npm run dev, i get following error...

Module parse failed: Unexpected token (6:12) You may need an appropriate loader to load this file type

Line 6 is import { Demo__factory } from "../../../blockchain/typechain-types/factories/Demo__factory";

Did i import the wrong module? Is there some other file I should be importing in order for it to work correctly? Thanks

import React, { useEffect, useState } from "react";
import Web3Modal from "web3modal";
import { ethers } from "ethers";

import { Demo } from "../../../blockchain/typechain-types/Demo";
import { Demo__factory } from "../../../blockchain/typechain-types/factories/Demo__factory";
import Greeter from "../../../blockchain/deployments/localhost/Demo.json";

type Props = {};

export const EthDemo = (props: Props) => {

  const [greeting, setGreeting] = useState<string>("");

  useEffect(() => {
    loadGreeting();
  }, []);

  const loadGreeting = async () => {
    const provider = new ethers.providers.JsonRpcProvider();
  
    const demoContract = Demo__factory.connect(Greeter.address, provider);

    const res = await demoContract.name();

    console.log("res", res);
    setGreeting(res);
  };

  return (
    <div>
      <p>{greeting}</p>
    </div>
  );
};

Presently, my folder structure is as shown below. I'm not sure if this could be the cause of my error

blockchain

• typechain-types...
• package.json

web

• package.json

[zemse]

You would need the typechain types inside the src directory of your react project.

[khamidalakkhali]

Hello everyone. Typechain generate string keys when I compile contract. Can someone help me? because I don't understand why this is happening.

[zemse]

You might have multiple functions with same method name called "mint". In that case, ethers v5 cannot generate mint function since it could be ambiguous. Hence you have to access using the full signature way.