MetaMask / MetaMask/metamask-extension
MM Pay design review: updated to header, CTA, errors and % buttons
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
## Summary
Following design review, update all MM Pay confirmation screens (Perps and mUSD) on extension to:
- Replace the current account header with a simple back arrow and title header similar to mobile
- Replace the current two-button Cancel/Confirm pattern to use a single primary action button similar to mobile
- Update error messages to be shown within CTA button when applicable similar to mobile - [Designs on Figma ](https://www.figma.com/design/VoEucFy6VdE4dCcmzE6Kw8/mUSD?node-id=7239-16571&t=JAHnbG03EZuB5UgU-0)
- % buttons: keep it for now until further feedback from design team
- Move `MetaMask fee` inside the tooltip similar to the latest designs on mobile
## Background
Design decision confirmed in [#metamask-pay-design](https://consensys.slack.com/archives/C0AKQ6D4HJN/p1773159348020149).
This pattern aligns with the mobile app experience and will be the standard for Perps, Predict, mUSD, and other MM Pay flows.
## Acceptance Criteria
- [ ] All MM Pay confirmation screens (Perps, mUSD) use a single primary action button
- [ ] Header contains a back arrow (`<`) instead of a Cancel button
- [ ] No account icon in the header
- [ ] At least a `Max` button is present alongside the amount input
- [ ] Existing Cancel + Confirm two-button layout is removed from these flows
- [ ] Changes are covered by unit tests
## Design Reference
See images shared in [#metamask-pay-design](https://consensys.slack.com/archives/C0AKQ6D4HJN/p1773159348020149) (2026-03-10) — Option A (mobile single button layout).
Contributor guide
Assessment
This issue has not been assessed yet.