Skip to content

logic: Implement a live countdown timer for the Transaction Deadline #95

@AlAfiz

Description

@AlAfiz

Description

We previously added a "Transaction Deadline" setting, but users have no idea how much time is actually left once a trade is pending.
We need to add a live countdown timer that appears inside the swap confirmation modal once a transaction is submitted to the wallet.
Watching the seconds tick down adds a sense of urgency and transparency to the network confirmation process.
If the timer hits zero, the UI should automatically cancel the waiting state and show a timeout error.

Requirements

  • Inside the isSubmitting state logic, capture the exact timestamp of when the button was clicked.
  • Create a useEffect interval that ticks every 1 second, calculating the time remaining based on the user's deadline setting.
  • Display the formatted time remaining (e.g., "04:59") inside the loading UI.
  • If the timer reaches "00:00", clear the interval, stop the loading spinner, and display a "Transaction Expired" error toast.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions