Object literal may only specify known properties, and 'transactionName' does not exist in type 'Options'.

[AnneCh]

In the useStakeTokens.ts file, I keep running into the same Typescript error message, which stops me from testing the function on the localhost.

Here are the problematic declarations:

const { send: approveErc20Send, state: approveErc20State } =
        useContractFunction(erc20Contract, "approve", {
            transactionName: "Approve ERC20 transfer",
        })

 const { send: stakeSend, state: stakeState} = 
        useContractFunction(tokenFarmContract, "stakeTokens", {
            transactionName: "Stake Tokens",
        })

and here is the error message that I get respectively:

ERROR in src/hooks/useStakeTokens.ts:25:13
TS2345: Argument of type '{ transactionName: string; }' is not assignable to parameter of type 'Options'.
  Object literal may only specify known properties, and 'transactionName' does not exist in type 'Options'.
    23 |     const { send: approveErc20Send, state: approveErc20State } =
    24 |         useContractFunction(erc20Contract, "approve", {
  > 25 |             transactionName: "Approve ERC20 transfer",
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    26 |         })
    27 |     const approveAndStake = (amount: string) => {
    28 |         setAmountToStake(amount)

ERROR in src/hooks/useStakeTokens.ts:36:13
TS2345: Argument of type '{ transactionName: string; }' is not assignable to parameter of type 'Options'.
  Object literal may only specify known properties, and 'transactionName' does not exist in type 'Options'.
    34 |     const { send: stakeSend, state: stakeState} = 
    35 |         useContractFunction(tokenFarmContract, "stakeTokens", {
  > 36 |             transactionName: "Stake Tokens",
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    37 |         })
    38 |

I'm running Typescript's latest version, 4.5.5. I've tried downgrading to previous versions, but the problem persists.

Any idea on how to fix this?

[AnneCh]

FYI, I've also tried your stackOverflow answer for a very similar problem solution and it created another error linked to the contracts :

const tokenFarmInterface: utils.Interface
Argument of type 'Interface' is not assignable to parameter of type 'ContractInterface'.
  Type 'Interface' is missing the following properties from type 'Interface': decodeErrorResult, encodeErrorResult, parseErrorts(2345)

In parallel, in my StakeForm.tsx, regardless of the import contract statement, I have the following error on transactionName for this function:

useEffect(() => {
        if (notifications.filter(
            (notification) =>
                notification.type === "transactionSucceed" &&
                notification.transactionName === "Approve ERC20 transfer").length > 0) {
                    console.log("Approved!!")
                }     
        if (notifications.filter(
            (notification) =>
                notification.type === "transactionSucceed" &&
                notification.transactionName === "Stake Tokens").length > 0) {
                    console.log("Tokens Staked!!")
                }
    }, [notifications])

error:

Property 'transactionName' does not exist on type '{ id: string; } & { submittedAt: number; } & { type: "transactionSucceed"; transaction: TransactionResponse; receipt: TransactionReceipt; }'.ts(2339)

[AnneCh]

Fixed it : deleting the node_modules folder and yarn.lock file + running yarn again in the front_end folder did it.