Possible to use types generated on front end?

[myhendry]

Hi. I am able to use typechain types to generate types for use when doing testing

However, is it possible to use the types generated on my front end?

I tried to do below by adding a type :Demo to my greeterContract but I get a ts error "Type 'Contract' is missing the following properties from type 'Demo': contractName, addBalance, addCar, addMember, and 34 more"

    const greeterContract: Demo = new ethers.Contract(
      Greeter.address,
      Greeter.abi,
      provider
    );

Thanks

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

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

type Props = {};

export const EthDemo = (props: Props) => {
  useEffect(() => {
    loadGreeting();
  }, []);

  const loadGreeting = async () => {
    const provider = new ethers.providers.JsonRpcProvider();

    const greeterContract: Demo = new ethers.Contract(
      Greeter.address,
      Greeter.abi,
      provider
    );

    const res = await greeterContract.name();

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

  return <div></div>;
};

[aalmada]

Hi!
I use the Typechain types on my front end. You just have to use the factory to connect to the contract. Something like this:

const web3Provider = provider as Web3Provider;
const greeterContract = Demo__factory.connect(
      Greeter.address,
      web3Provider ? web3Provider.getSigner() : provider,
    );

[myhendry]

Thanks a lot @aalmada. we added a script to duplicate the types folder to our web frontend so that the types can be accessed from there too :)

[aalmada]

I'm doing the same in my project. I changed to a monorepo because of this.

[krzkaczor]

This is right. Alternatively, you can simply force cast with as any in your previous example to silence type checker.