Argument of type "../node_modules/@ethersproject/contracts/lib/index.").Contract is not assignable

[achimstruve]

import { useEffect, useState } from "react"
import { constants, utils } from "ethers"
import networkMapping from "../chain-info/deployments/map.json"
import { useEthers, useContractFunction } from "@usedapp/core"
import { Contract } from "@ethersproject/contracts"
import TokenFarm from "../chain-info/contracts/TokenFarm.json"
import ERC20 from "../chain-info/contracts/MockERC20.json"

export const useStakeTokens = (tokenAddress: string) => {
    const { chainId } = useEthers()
    const { abi } = TokenFarm
    const tokenFarmAddress = chainId ? networkMapping[String(chainId)]["TokenFarm"][0] : constants.AddressZero
    const tokenFarmInterface = new utils.Interface(abi)
    const tokenFarmContract = new Contract(tokenFarmAddress, tokenFarmInterface)

    const erc20ABI = ERC20.abi
    const erc20Interface = new utils.Interface(erc20ABI)
    const erc20Contract = new Contract(tokenAddress, erc20Interface)

    // approve
    const { send: approveErc20Send, state: approveErc20State } = 
        useContractFunction(**erc20Contract**, "approve", {
            transactionName: "Approve ERC20 transfer",
    })
    const approve = (amount: string) => {
        return approveErc20Send(tokenFarmAddress, amount)
    }

    const [state, setState] = useState(approveErc20State)
    return { approve, approveErc20State }
    // stake tokens
}

This my current state of the useStakeTokens.ts file in the hooks folder. Unfortunately there is a red line below the erc20Contract constant when I use it as argument for the useContractFunction. When I hover over it with my mouse it gives the following error message:

> Argument of type 'import("D:/name/Programmieren/Solidity_Course/demos/defi-stake-yield-brownie/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("D:/name/Programmieren/Solidity_Course/demos/defi-stake-yield-brownie/front_end/node_modules/@usedapp/core/node_modules/@ethersproject/contracts/lib/index").Contract'.
  Types of property '_runningEvents' are incompatible.
    Type '{ [eventTag: string]: RunningEvent; }' is not assignable to type '{ [eventTag: string]: RunningEvent; }'. Two different types with this name exist, but they are unrelated.
      'string' index signatures are incompatible.
        Type 'RunningEvent' is not assignable to type 'RunningEvent'. Two different types with this name exist, but they are unrelated.
          Types have separate declarations of a private property '_listeners'.ts(2345)

Does anyone know how to fix this?

[PatrickAlphaC]

Which line is it mad at?

[achimstruve]

Which line is it mad at?

It is line 22 in my version of the file useContractFunction(erc20Contract, "approve", { It underlines "erc20Contract" red and shows the error I have posted above.

I also tried to exchange the code with the one from your repo, but it didn't help either.

[achimstruve]

Which line is it mad at?

This is how it looks like in the firefox browser:

[achimstruve]

Which line is it mad at?

I found the solution for this problem in this comment from another project: https://github.com/TrueFiEng/useDApp/issues/263#issuecomment-1098321684

It is litterally just importing Contract directly from another path like this that solved it: import { Contract } from '@usedapp/core/node_modules/@ethersproject/contracts'