Handle tx revert in useTransactor

[MattPereira]

Video Demo

https://www.loom.com/share/2727672272374fbba1c4afcc33b8d9a3?sid=d22eb180-f1de-4629-8256-413802920376

Issue

• The useTransactor hook displays a success notification even if the transaction reverts, which is confusing for users.
• When using tanstack's useMutation, the onSuccess will trigger even when the tx reverts

Proposal

• Only show success notification when tx receipt status is success
• Throw a "Transaction reverted" error if tx receipt status is not "success"
  • so that useMutation's onError is triggered
  • so that user sees a "Transaction reverted" notification
  • so developer that is relying on transaction successfully executing doesnt get wrecked 🫠

Example Resources

• https://use-transactor-example.vercel.app/
• https://github.com/MattPereira/scaffold-eth-2/tree/tx-revert-example

[technophile-04]

Instead of throwing hardcoded error string "Transaction reverted" , I tried digging in if viem/wagmi gives us nice error. Although wagmi docs mentions that if transaction revert it throws an error

Wagmi docs :

https://wagmi.sh/core/api/actions/waitForTransactionReceipt#waitfortransactionreceipt

But lol here they mentioned that docs are lying and they only hint you with status. So hardcoding "Transaction reverted" makes sense 🙌

Also tysm @MattPereira for great PR description, video and example!! The example was superhelpful to dig in more on error!!!

[MattPereira]

yeah I was hoping to figure out a way to offer the link to etherscan so dev / user could investigate why the tx reverted but only using notification.error doesn't throw an error, and using both throw new Erorr and a notification.error will show 2 notifications 🤔

[technophile-04]

and using both throw new Erorr and a notification.error will show 2 notifications 🤔

Yes so basically the main purpose useTransactor is that it shows UI notification of current transaction. So yeah whenever you use useTransactor it shows both sucess and error notification if it fails. We throw error outside from useTransactor callback function for people not to show again UI notification(since useTransactor already does it) but to execute some internal business logic if they want to execute if transaction fails.

Just merged #910 which points to blockexplorer if transaction is reverted 🙌