[Enhancement] Toast auto-dismiss doesn't pause on hover or focus

[collinsezedike]

Description

apps/web/src/store/toast.ts:19-26's push always fires an unconditional 4-second setTimeout regardless of toast kind or whether the user is currently interacting with it. There's no hover/focus handler anywhere in apps/web/src/components/ui/Toasts.tsx to pause or extend the timer.

An error toast (rendered with role="alert"/aria-live="assertive") gets exactly the same 4-second window as a short success toast, even though error messages tend to be longer and more important to actually read.

Steps to Reproduce

1. Trigger an error toast with a longer message (e.g. a failed deposit with a detailed reason).
2. Try to read it while hovering over it.
3. Observe it disappears at 4 seconds regardless of the hover.

Expected Behavior

Hovering or focusing a toast should pause its dismiss timer; moving away or blurring resumes (or restarts) it.

Actual Behavior

The timer runs unconditionally to completion no matter what the user is doing.

[sunnykid-02]

@sunnykid-02 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I’d like to work on this issue because automatically dismissing a toast while a user is hovering over it or focusing it can cause important information to disappear before they have a chance to read or interact with it. Pausing the dismissal timer during user interaction would make the notification experience more accessible and predictable.

I have experience working with React, frontend state management, timers, and accessible UI components.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @sunnykid-02 to this issue.

[Kazboom229]

@Kazboom229 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I reviewed the reported timer flow in apps/web/src/store/toast.ts and the interaction surface in apps/web/src/components/ui/Toasts.tsx. I will make each toast's dismiss timer pause and resume safely, wire mouse and keyboard focus handlers, clean up timers when toasts are removed, and add fake-timer tests covering hover, focus, resume, and normal auto-dismiss behavior. I will preserve the existing alert/live-region semantics and keep the change scoped to this accessibility issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kazboom229 to this issue.

[Bug00Joe]

@Bug00Joe has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi Maintainer, I will like to work on this issue, please assign me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Bug00Joe to this issue.

[DevQwinB]

@DevQwinB has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

i can help you fix this up easy

ℹ️ Repo Maintainers: To accept this application, review their application or assign @DevQwinB to this issue.

[drips-wave]

Congratulations, @DevQwinB! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @DevQwinB: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊