MetaMask / MetaMask/metamask-extension

MM Pay design review: updated to header, CTA, errors and % buttons

Open
#40,775 0 comments 0 reactions 1 assignee Claimed by @bschorchit View on GitHub
INVALID-ISSUE-TEMPLATE team-confirmations
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

Image

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.