[UX]: Improve transaction status toasts – make them more streamlined, polished, and delightful

**What is this about?**

Our current transaction status toasts (for confirmation, pending, success, failure) look amateur and clunky compared to competitors like Phantom. They lack visual refinement, tasteful animations, and auditory feedback that make the experience feel smooth and trustworthy.

Attached videos show the comparison:

https://github.com/user-attachments/assets/d6b19114-90e0-4613-a568-6b3d26a145bc

https://github.com/user-attachments/assets/86955052-69be-48a3-8d57-969dff420062

**Scenario**

Current Issues

Flat, basic design with little animation.

Toasts feel “bolted on” instead of integrated into app experience.

No audio cues (Phantom uses subtle “success” sound).

Dismissal animations are abrupt, not smooth.

Success/failure indicators lack delight and polish (e.g., Phantom’s checkmark animation).

No clear distinction in hierarchy between pending, success, and error states.

**Design**

**Recommendations for Improvement**

1. **Visual polish**

* Update toast styling (rounded corners, shadow, slight gradient or subtle glassmorphism).
* Use consistent iconography for tx states (pending spinner, animated check, error cross).
2. **Animations**

* Add entrance/exit animations (fade + slide).
* Use micro-interactions: Phantom’s expanding checkmark animation feels delightful and confident.
* Smooth progress animation for “pending.”
3. **Audio feedback**

* Add subtle, non-intrusive audio cues:

* “Success chime” for confirmed tx.
* “Error tone” for failed tx.
* Should be toggleable in settings.
4. **State clarity**

* Pending: Spinner + “Transaction pending…” with soft pulse animation.
* Success: Animated checkmark + green toast background accent.
* Failure: Animated “X” + red accent.
5. **Placement & duration**

* Ensure consistent placement (bottom center or bottom-right, not shifting UI elements).
* Auto-dismiss after 3–5 seconds for success; errors persist until dismissed.
6. **Accessibility**

* Support haptic feedback (on mobile).
* Ensure contrast compliance for toast backgrounds.

**Owner / Component**

* Owner: **Design Systems + Mobile/Web UI Team**
* Component: **Toast / Notifications framework**

**Labels**
`UI-UX` `toasts` `transaction-status` `animations` `sound` `delight`

**Acceptance Criteria**

* Toasts feel visually polished and professional, on par with or exceeding Phantom’s.
* Each transaction state (pending, success, failure) has distinct, delightful animations.
* Optional sound cues play for tx confirmation/failure.
* QA validated across platforms (iOS, Android, Web).
* User feedback (qual/quant) confirms improved perception.

**Stakeholder review needed before the work gets merged**

- [ ] Engineering (needed in most cases)
- [x] Design
- [x] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)