Skip to content

feat(motion): inline trade success, FLIP rows, tooltip warm-up and theme reveal - #993

Merged
IbrahimIjai merged 14 commits into
SO4-Markets:mainfrom
Oluwa-Laughter:feat/motion-transaction-lists-tooltips-theme-880-883
Oct 18, 2026
Merged

IbrahimIjai merged 14 commits into
SO4-Markets:mainfrom
Oluwa-Laughter:feat/motion-transaction-lists-tooltips-theme-880-883

Conversation

@Oluwa-Laughter

Copy link
Copy Markdown
Contributor

Summary

This PR introduces four coordinated motion improvements to make the SO4 trading interface feel more responsive, polished, and informative without compromising accessibility or transaction correctness.

All animations are designed around the existing motion tokens in packages/ui/src/styles/globals.css, with reduced-motion fallbacks.

1. Transaction success moment — #880

  • Add an animated checkmark and inline success confirmation to the order ticket.
  • Display the confirmation only after successful ledger confirmation, rather than on submission alone.
  • Include a transaction explorer link and preserve existing toast notifications.
  • Animate newly indexed position rows into view.

2. Animated list insertion and removal — #881

  • Introduce a reusable keyed FLIP animation hook using the Web Animations API.
  • Apply row transitions to positions, open orders, executed trade history, recent trades, and mobile order cards.
  • Animate insertion, removal, and positional changes using transforms and opacity.
  • Keep removed rows visually animated without leaving interactive or screen-reader-accessible duplicate elements.

3. Tooltip warm-up behavior — #882

  • Introduce a shared tooltip provider across the application.
  • Apply a 500 ms initial hover delay and a 400 ms warm-up window for faster neighboring tooltip interactions.
  • Replace ad hoc tooltip animations with token-based opacity and transform transitions.
  • Preserve the existing tooltip trigger and accessibility behavior.

4. Circular-reveal theme transition — #883

  • Implement a View Transitions-based circular reveal originating from the active theme control.
  • Support interruption when users switch themes repeatedly.
  • Respect prefers-reduced-motion and an application-level reduced-motion override.
  • Fall back to instant theme switching when View Transitions are unsupported.
  • Preserve existing theme persistence and system-theme behavior.

Implementation notes

The changes are scoped to the trading interface, shared UI components, motion utilities, and theme infrastructure.

Closes #880

Closes #881

Closes #882

Closes #883

@vercel

vercel Bot commented Oct 17, 2026

Copy link
Copy Markdown

@Oluwa-Laughter is attempting to deploy a commit to the Ijai's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Oct 17, 2026

Copy link
Copy Markdown

@Oluwa-Laughter Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@IbrahimIjai
IbrahimIjai merged commit e073561 into SO4-Markets:main Oct 18, 2026
2 of 5 checks passed
@grantfox-oss grantfox-oss Bot mentioned this pull request Oct 18, 2026
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Motion] Theme switch transition [Motion] Tooltip "warm-up" behaviour [Motion] Animated list insert/remove [Motion] Transaction success moment

2 participants