Feat/order receipt realism

[fairlighteth]

Summary

Introduces an animated thermal-printer receipt for completed CoW Swap orders.

Screen.Recording.2026-08-20.at.15.08.54.mov

• Replaces the standard successful-completion surface with a staged receipt animation:
  • Paper begins at the printer slot with a visible torn edge
  • Prints a compact TRADE SUCCEEDED state
  • Pauses briefly before feeding the complete receipt
• Displays existing execution information:
  • Sold and received amounts
  • Execution price and price improvement
  • Network, fill time and timestamp
  • Receiver, winning solver and CoW Explorer order link
• Adds a CoW-themed printer enclosure and original one-bit artwork, including:
  • Pixelated cow success mark
  • Thermal-style CoW Swap wordmark
  • Warm paper stock, subtle paper grain and torn edges
• Layers the existing success moo with a quieter mechanical printer sound.
• Primes audio after the first user interaction to improve browser playback reliability.
• Adds a fixed Replay button that restarts both the animation and sounds.
• Preserves widget orderExecuted sound customization and avoids playing the same custom sound twice.
• Removes the performance-heavy success confetti from this flow.
• Keeps immediate semantic success feedback and disables mechanical motion when reduced motion is requested.

To Test

1. Start the CoW Swap frontend and complete a regular swap.

• The completed-order modal opens automatically.
• The paper starts almost fully hidden behind the printer slot.
• The torn edge appears first and the compact TRADE SUCCEEDED section prints.
• After a short pause, the complete receipt feeds out.
• The existing success moo and printer sounds play together.
• The printer sound sits underneath the moo rather than overpowering it.
• The receipt contains the correct order amounts and execution details.
• The order link opens the corresponding CoW Explorer order.

2. Select Replay in the bottom-left corner.

• The receipt animation restarts from the beginning.
• Both sounds restart from the beginning.
• Repeated use does not overlap stale playback.

3. Test visual variants.

• Light mode has sufficient contrast between the receipt, modal background and printer.
• Dark mode has no mismatched masks around the torn or perforated edges.
• The printer slot remains visible in both themes.
• The receipt remains usable at narrow/mobile widths without clipped values.

4. Enable reduced motion at the operating-system or browser level.

• The complete receipt appears without feed or cutter movement.
• The success state remains immediately available to assistive technology.
• The printer enclosure and mechanical decoration are not announced.

5. Test widget sound configuration where possible.

• A custom sounds.orderExecuted URL is respected without duplicate playback.
• sounds.orderExecuted: null remains muted.
• Bridge and non-swap order flows retain their existing sound behavior.

Background

This explores a more memorable successful-swap moment by presenting execution data as a physical receipt rather than introducing a separate summary format. The visual language is intentionally stylized and CoW-specific: tactile enough to communicate “printing,” but restrained enough to remain consistent with the application.

The existing solver rankings, surplus/share card and post-trade content are temporarily hidden for successful FINISHED states so the receipt can own the completion surface. They remain available for non-success states through the existing temporary launch flag.

Focused verification completed:

• 34 receipt, sound-middleware and finished-step tests
• CoW Swap frontend typecheck
• Targeted ESLint checks

Self-checks

• I have read CONTRIBUTING.md
• I have manually tested changes on Vercel preview deployment
• I have done self-review and (or) AI review
• I have addressed all comments from @coderabbitai
• I have less than three open PRs/Stacks in this repo at the moment of creating this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cowfi	Ready	Preview	Aug 20, 2026 2:16pm
explorer-dev	Ready	Preview	Aug 20, 2026 2:16pm
storybook	Ready	Preview	Aug 20, 2026 2:16pm
swap-dev	Ready	Preview	Aug 20, 2026 2:16pm
widget-configurator	Ready	Preview	Aug 20, 2026 2:16pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
cosmos	Ignored		Aug 20, 2026 2:16pm
sdk-tools	Ignored	Preview	Aug 20, 2026 2:16pm

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7750782a-66c4-4ed3-b039-e8b8c16388f8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.}