使用带有@usedapp 和@ethersproject/contracts 的智能合约时出现奇怪的错误

Weird error using Smart Contracts with @usedapp and @ethersproject/contracts

你好,我正在尝试使用一个基于 solidity 的合同,并使用 React 和 typescript 在我的前端部署了 brownie。还使用框架 usedapp,正如文档 here 所说,为了与合约函数交互,我应该创建一个新合约,提供地址和 ABI。这是我的代码:

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

export const useStakeTokens = (tokenAddress: string) => {
    // chainId 
    const {chainId} = useEthers()
    // abi
    const {abi} = TokenFarm
    // address
    // const dappTokenAddress = chainId ? networkMapping[String(chainId)]["DappToken"][0] : constants.AddressZero
    const tokenFarmAddress = chainId ? networkMapping[String(chainId)]["TokenFarm"][0] : constants.AddressZero
    // approve
    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: approveAndStakeErc20State } =
        useContractFunction(erc20Contract, "approve", {
            transactionName: "Approve ERC20 transfer",
        })

}

错误发生在 useContractFunctionwith erc20Contract:

Vscode error

这是完整的错误信息

Argument of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/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'.  TS2345

    23 |     // approve
    24 |     const { send: approveErc20Send, state: approveAndStakeErc20State } =
  > 25 |         useContractFunction(erc20Contract, "approve", {
       |                             ^
    26 |             transactionName: "Approve ERC20 transfer",
    27 |         })
    28 |
Argument of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/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'.  TS2345

它说类型不兼容,但实际上它们完全相同,有人知道发生了什么吗?

解决方案:

替换为:

import {Contract} from '@ethersproject/contracts'

为此:

import {Contract} from '@usedapp/core/node_modules/@ethersproject/contracts'