Lesson 13: Full Stack DeFi; Issue with approving useContractFunction

[Shittu24]

Good evening developers. I trust we are all doing well...

So I was following in the last lesson till I encountered an issue working on the frontend of my wallet. I successfully imported Contract from @ethersproject/contracts but when I want to use the useContractFunction with the erc20Contract and tokenFarmContract parameters, they both threw the same error, and I even checked usedapps documentation if there is any update but there wasn't any so I don't understand the reason for the errors I am encountering.

Here is my code:

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

export const useStakeTokens = (tokenAddress: string) => {
    // address
    // abi
    // chainId
    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: approveAndStakeErc20State } =
        useContractFunction(erc20Contract, "approve", {
            transactionName: "Approve ERC20 transfer",
        })
    const approveAndStake = (amount: string) => {
        setAmountToStake(amount)
        return approveErc20Send(tokenFarmAddress, amount)
    }
    // stake
    const { send: stakeSend, state: stakeState } =
        useContractFunction(tokenFarmContract, "stakeTokens", {
            transactionName: "Stake Tokens",
        })
    const [amountToStake, setAmountToStake] = useState("0")

    //useEffect
    useEffect(() => {
        if (approveAndStakeErc20State.status === "Success") {
            stakeSend(amountToStake, tokenAddress)
        }
    }, [approveAndStakeErc20State, amountToStake, tokenAddress])


    const [state, setState] = useState(approveAndStakeErc20State)

    useEffect(() => {
        if (approveAndStakeErc20State.status === "Success") {
            setState(stakeState)
        } else {
            setState(approveAndStakeErc20State)
        }
    }, [approveAndStakeErc20State, stakeState])

    return { approveAndStake, state }
}`

And here is the error i encountered in my terminal:

`ebpack 5.70.0 compiled with 1 warning in 1006 ms
ERROR in src/hooks/useStakeTokens.ts:24:29
TS2345: Argument of type 'import("C:/Users/Ibrahim/demos/defi-yield-stake-brownie/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("C:/Users/Ibrahim/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'.
    22 |     // approve
    23 |     const { send: approveErc20Send, state: approveAndStakeErc20State } =
  > 24 |         useContractFunction(erc20Contract, "approve", {
       |                             ^^^^^^^^^^^^^
    25 |             transactionName: "Approve ERC20 transfer",
    26 |         })
    27 |     const approveAndStake = (amount: string) => {

ERROR in src/hooks/useStakeTokens.ts:33:29
TS2345: Argument of type 'import("C:/Users/Ibrahim/demos/defi-yield-stake-brownie/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("C:/Users/Ibrahim/node_modules/@ethersproject/contracts/lib/index").Contract'.
    31 |     // stake
    32 |     const { send: stakeSend, state: stakeState } =
  > 33 |         useContractFunction(tokenFarmContract, "stakeTokens", {
       |                             ^^^^^^^^^^^^^^^^^
ERROR in src/hooks/useStakeTokens.ts:33:29
TS2345: Argument of type 'import("C:/Users/Ibrahim/demos/defi-yield-stake-brownie/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("C:/Users/Ibrahim/node_modules/@ethersproject/contracts/lib/index").Contract'.
    31 |     // stake
    32 |     const { send: stakeSend, state: stakeState } =
  > 33 |         useContractFunction(tokenFarmContract, "stakeTokens", {
       |                             ^^^^^^^^^^^^^^^^^
    34 |             transactionName: "Stake Tokens",
    35 |         })
    36 |     const [amountToStake, setAmountToStake] = useState("0")`

[cromewar]

Hello @Shittu24
Does this make sense for you?