Feat/transaction timeout wrapwithtoast

[ManiBAJPAI22]

Reopened from #15 with master as target (as requested by @tractorss).

---

Add Transaction Confirmation Timeout to wrapWithToast

What does this PR do?

Enhances the wrapWithToast utility to include a timeout for transaction confirmations. If a transaction is not confirmed within 5 minutes, the user is notified with a toast suggesting they check the blockchain explorer for status.

Why is this change needed?

Previously, users could be left waiting indefinitely if a transaction was delayed or stuck, with no indication of what was happening. This change improves user experience by providing a clear, time-bounded feedback loop and guidance in case of slow or pending transactions.

How does it work?

1. Implements a 5-minute timeout using Promise.race between waitForTransactionReceipt and a timeout promise.
2. Shows a user-friendly toast if the timeout is reached:
   “Transaction is taking longer than expected. It may still confirm. Please check the transaction status on the blockchain explorer.”
3. Maintains all existing toast flows (success, revert, error) and does not change the function interface.
4. All errors (including timeout) are handled gracefully and surfaced to the user.

What stays the same?

• All existing toast notifications for success, revert, and error
• The function’s signature and usage throughout the codebase
• Underlying transaction receipt logic, except for the added timeout

Summary by CodeRabbit

Release Notes

• New Features

  • Transaction receipts now display detailed success confirmations and error notifications
  • Transactions exceeding timeout now show helpful guidance to verify status on blockchain explorers

• Bug Fixes

  • Enhanced error handling with more informative messages for failed transactions
  • Improved user feedback consistency during transaction processing

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

👷 Deploy request for kleros-governor-v2 pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	47abd9f

[coderabbitai]

Walkthrough

A single utility file is updated to introduce transaction receipt timeout handling with a 5-minute deadline, replacing promise chains with try/catch flow, and adding standardized toast notification functions (info, success, error) for improved user feedback across different transaction outcomes.

Changes

Cohort / File(s)

Change Summary

Toast Notification Utilities web/src/utils/wrapWithToast.ts

Added three exported toast helper functions (infoToast, successToast, errorToast) with consistent styling options; introduced TX_RECEIPT_TIMEOUT_MS constant for 5-minute timeout; refactored transaction receipt waiting using Promise.race to race against timeout deadline; converted promise chain (then/catch) to try/catch block; enhanced error handling with distinct paths for successful receipts, reverted transactions, timeouts, and other errors; updated error messages to guide users through blockchain explorer checks on timeout.

Sequence Diagram

sequenceDiagram
    actor User
    participant App as Transaction Handler
    participant wrapWithToast as wrapWithToast Function
    participant RPC as RPC / waitForTransactionReceipt
    participant Toast as Toast Notification System

    User->>App: Triggers transaction
    App->>wrapWithToast: Call with tx hash
    wrapWithToast->>wrapWithToast: Emit infoToast (processing)
    
    par Timeout Race
        wrapWithToast->>RPC: waitForTransactionReceipt(hash)
        wrapWithToast->>wrapWithToast: setTimeout(5 min)
    end
    
    alt Receipt arrives in time
        RPC-->>wrapWithToast: Returns receipt with status
        alt Status = success
            wrapWithToast->>Toast: successToast()
        else Status = revert/fail
            wrapWithToast->>Toast: errorToast(revert message)
        end
    else Timeout occurs first
        wrapWithToast->>Toast: errorToast(timeout message + explorer guidance)
    else Other error
        wrapWithToast->>wrapWithToast: parseWagmiError()
        wrapWithToast->>Toast: errorToast(parsed error message)
    end
    
    Toast-->>User: Display notification
    wrapWithToast-->>App: Return { status: bool }

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• #11: Directly implements the 5-minute Promise.race timeout mechanism for transaction receipt waiting alongside the associated toast notification improvements described in the issue.

Poem

🐰 A tale of toasts and time's sweet race,
Where receipts must come within their place,
Five minutes hence, if none arrive,
Our friendly hops help users thrive,
With messages and guided light,
We make all transactions right! 📱✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Feat/transaction timeout wrapwithtoast' directly refers to the main change: adding transaction timeout functionality to the wrapWithToast utility.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}