feat: improve order receipt modal

[fairlighteth]

What changed

• Redesigned the Limit/TWAP order receipt with a Figma-aligned layout that reuses the shared ConfirmAmounts trade summary and adds compact timestamps, fees, metadata, surplus, disclosures, and right-aligned values.
• Added a full-screen mobile/tablet receipt that layers correctly above the orders drawer, preserves parent dismissal and focus restoration, supports scrolling, and respects device safe areas.
• Corrected receipt semantics: open zero-fill orders hide fill results, terminal zero-fill orders show Not filled, partial fills use actual execution data, and TWAP parent/virtual execution totals are suppressed.
• Added contextual actions for non-final orders while preventing unsupported EOA-TWAP cancellation.
• Improved accessibility with one semantic receipt heading, contextual close labels, delegated Escape handling, and an accessible 44px actions trigger.

Before -> After

Why

• Make Limit and TWAP receipts easier to scan while presenting only execution data that is trustworthy for the selected order type and state.
• Keep receipt navigation and actions predictable when the receipt opens as a nested mobile drawer.

QA Testing

Preview URL QA:

• At a viewport width of 1280px or below, connect a wallet with representative orders and open Limit orders. Select My orders, open an order card, and confirm the receipt fills the viewport above the orders drawer.
• Close the receipt through the header, backdrop, swipe, and Escape flows. Confirm only the receipt closes and focus returns to the order that opened it.
• Repeat from TWAP orders and verify the TWAP parent/part context is clearly identified.
• Check representative order states:
  • Open with no fills: no fill outcome or surplus is shown.
  • Partially filled: actual fill percentage and average execution data are shown.
  • Filled: execution result and surplus are shown.
  • Cancelled, expired, or failed with no fills: Not filled is shown.
• Expand Fees & costs and Order metadata and verify the compact creation time, full timestamps, order type, activity ID, fee details, and Safe metadata when applicable.
• For a supported non-final order, open the actions menu and verify the available view, edit, or cancellation actions.
• Resize above 1280px and confirm the same receipt content renders in the desktop dialog without the mobile-only full-screen or nested-drawer behavior.

Developer verification:

• All 34 targeted tests pass, covering receipt anatomy, buy/sell semantics, execution states, TWAP parent/real/virtual parts, cancellation restrictions, nested dismissal, focus restoration, responsive overlay behavior, and accessibility.
• All 16 Cosmos receipt fixtures render successfully across filled, open, partial, terminal, unfillable, cancelling, TWAP, Safe, fee, surplus, and custom-recipient scenarios.
• Scoped frontend/UI typechecks, ESLint, and diff checks pass.

Reviewer note:

• This is a stacked PR based on #8020; its review scope is the receipt redesign on top of the mobile orders layout.
• Rare TWAP and terminal-state combinations are covered by targeted tests and Cosmos fixtures because they are not reliably reproducible with a live preview wallet.
• Deleting CurrencyField.tsx is intentional; the receipt now uses the shared ConfirmAmounts component.

Preview URLs

Surface	URL
swap-dev - branch preview URL	https://swap-dev-git-feat-cow-153-ui-update-2-cowswap-dev.vercel.app
explorer-dev - branch preview URL	https://explorer-dev-git-feat-cow-153-ui-update-2-cowswap-dev.vercel.app
sdk-tools - branch preview URL	https://sdk-tools-git-feat-cow-153-ui-update-2-cowswap-dev.vercel.app
storybook - branch preview URL	https://storybook-git-feat-cow-153-ui-update-2-cowswap-dev.vercel.app
widget-configurator - branch preview URL	https://widget-configurator-git-feat-cow-153-ui-update-2-cowswap-dev.vercel.app
cowfi - branch preview URL	https://cowfi-git-feat-cow-153-ui-update-2-cowswap.vercel.app

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
cowfi	Ready	Preview	Aug 28, 2026 5:07pm
explorer-dev	Ready	Preview	Aug 28, 2026 5:07pm
storybook	Ready	Preview	Aug 28, 2026 5:07pm
swap-dev	Ready	Preview	Aug 28, 2026 5:07pm
widget-configurator	Ready	Preview	Aug 28, 2026 5:07pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
cosmos	Ignored		Aug 28, 2026 5:07pm
sdk-tools	Ignored	Preview	Aug 28, 2026 5:07pm

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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