useScaffoldContractWrite does not throw errors

[corwinthill]

Is there an existing issue for this?

• I have looked through the existing issues

Which method was used to setup Scaffold-ETH 2 ?

git clone, npx create-eth@latest

Current Behavior

useScaffoldContractWrite does not throw errors, but instead eats up the errors and displays it using the notification util. When calling a contract function using useScaffoldContractWrite within a try/catch block, regardless of whether the function call succeeds or fails, no exception is caught and the try block is fully executed. The current behavior thus allows for an error notification and a success notification to simultaneously appear.

Expected Behavior

From my understanding, the intended functionality should be that useScaffoldContractWrite should throw an error so that functions utilizing it can be used within try/catch blocks. useScaffoldContractWrite relies on useTransactor, so an error caught by useTransactor should be thrown to useScaffoldContractWrite, and the error should then be thrown forward again to the contract function that is utilizing useScaffoldContractWrite. There should also only be one instance of the error notification being displayed.

Steps To Reproduce

The issue comes from a setup similar to the code below.

const { writeAsync: exampleFunction } = useScaffoldContractWrite({
  contractName: "exampleContract",
  functionName: "exampleFunction",
});

const handleExampleFunction = async () => {
  const loadingNotification = notification.loading("Loading ...");
  try {
    await exampleFunction();
    notification.remove(loadingNotification);
    notification.success("Success!");
  } catch (error) {
    notification.remove(loadingNotification);
    console.error(error);
  }
};

You'll want something on the frontend to trigger the function call (like a button). Then make sure that the function call will revert so that an error is thrown. A simple one to setup is not having any funds for gas. Once the function is called, then both the Success notification, and an error notification will be displayed.

Anything else?

I'm not sure if its the best solution, but I have resolved this issue with the help of Shiv Bhonde. A few lines of code need to be changed on useScaffoldContractWrite.ts as well as useTransactor.tsx.
First, I added the following code after the line referenced in the link to useScaffoldContractWrite.ts

// Insert after line 87
throw new Error(e);

scaffold-eth-2/packages/nextjs/hooks/scaffold-eth/useScaffoldContractWrite.ts

Line 87 in cdd321e

notification.error(message);

Then, I modified useTransactor.tsx as follows

// Comment out line 98, otherwise two error notifications will display
// One from useTransactor, and then another in useScaffoldContractWrite
// Insert next line after line 98
throw new Error(message);

scaffold-eth-2/packages/nextjs/hooks/scaffold-eth/useTransactor.tsx

Line 98 in cdd321e

notification.error(message);

I believe this properly handles where the error ends up. Originally it was getting lost in the useTransactor functionality. After these changes, if an error occurs, it should be thrown forward to the appropriate location.

[technophile-04]

Hey thanks @corwinthill !! I think the solution looks good ! Do you want to create a PR with it ?

Please let us know if you need any help 🙌