feat: update mUSD claim modal to match new design#40291
Merged
Conversation
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (11 files, +164 -19)
|
Contributor
Builds ready [c878d47]
⚡ Performance Benchmarks (1359 ± 111 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
c878d47 to
69a949e
Compare
680fab3 to
176e6cd
Compare
Contributor
Builds ready [176e6cd]
⚡ Performance Benchmarks (1364 ± 113 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
176e6cd to
1e0d36f
Compare
Contributor
Builds ready [1e0d36f]
⚡ Performance Benchmarks (1362 ± 95 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
1e0d36f to
5939517
Compare
Contributor
Builds ready [6fc4c3a]
⚡ Performance Benchmarks (1362 ± 98 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
6fc4c3a to
8b99bf4
Compare
Contributor
Builds ready [8b99bf4]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Builds ready [6fbdba6]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Matt561
previously approved these changes
Feb 26, 2026
Contributor
Builds ready [16cccea]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Builds ready [16cccea]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
matthewwalsh0
requested changes
Feb 27, 2026
ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx
Outdated
Show resolved
Hide resolved
| return null; | ||
| } | ||
|
|
||
| const isSimpleGasFee = transactionMeta.type === TransactionType.musdClaim; |
Member
There was a problem hiding this comment.
As this is a generic feature, could we use a disableUpdate prop in GasFeesDetails that we pass through?
Member
There was a problem hiding this comment.
Minor, but I meant from info as we do in mobile, can update in a future PR.
Comment on lines
+36
to
+42
| {showChevron && ( | ||
| <Icon | ||
| name={IconName.ArrowRight} | ||
| size={IconSize.Sm} | ||
| color={IconColor.iconDefault} | ||
| /> | ||
| )} |
Member
There was a problem hiding this comment.
@bschorchit What is the intent here? To show an arrow since it opens the Petnames modal?
That should indeed be a standardised decision for all our address rows and not specific to a single transaction type / confirmation.
| switch (confirmation?.type) { | ||
| case TransactionType.contractInteraction: | ||
| return ''; | ||
| case TransactionType.musdClaim: |
Member
There was a problem hiding this comment.
Why are we not using the standard title?
The intent of this to provide a standard structure for a confirmation for UX consistency across flows.
Contributor
Author
There was a problem hiding this comment.
Hey @matthewwalsh0 , the designs for the musd claiming flow call for a custom confirmation: https://www.figma.com/design/VoEucFy6VdE4dCcmzE6Kw8/mUSD?m=auto&node-id=7246-25321&t=lXMz442Gf6LfTxXO-1
Is this something that you are fundamentally opposed to? If so, maybe we need to go back to the drawing board on how this should look.
Member
There was a problem hiding this comment.
Part of the rationale is that we're already displaying the title text on a modal (from @Jwhiles link)
We implemented the same pattern on mobile here:
Member
There was a problem hiding this comment.
I just mean can we not provide the title itself via this component?
In the above link from @shane-t , we are still using a title here for MUSD claim in mobile?
Not a blocker, just confirming the intent.
Use WalletInitiatedHeader (back arrow + "Review") instead of dapp-style header, remove redundant title/description, add network badge overlay on token icon, split claiming-to and network into separate sections, add chevron to account row, and simplify gas fee display by hiding edit icon, speed row, and fee subtitle for musdClaim transactions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
16cccea to
1d9a132
Compare
|
Contributor
Builds ready [1d9a132]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
matthewwalsh0
requested changes
Mar 3, 2026
| return null; | ||
| } | ||
|
|
||
| const isSimpleGasFee = transactionMeta.type === TransactionType.musdClaim; |
Member
There was a problem hiding this comment.
Minor, but I meant from info as we do in mobile, can update in a future PR.
Comment on lines
+36
to
+42
| {showChevron && ( | ||
| <Icon | ||
| name={IconName.ArrowRight} | ||
| size={IconSize.Sm} | ||
| color={IconColor.iconDefault} | ||
| /> | ||
| )} |
Member
There was a problem hiding this comment.
Can we defer this to a separate PR once we clarify the broader design here to avoid blocking this PR?
| switch (confirmation?.type) { | ||
| case TransactionType.contractInteraction: | ||
| return ''; | ||
| case TransactionType.musdClaim: |
Member
There was a problem hiding this comment.
I just mean can we not provide the title itself via this component?
In the above link from @shane-t , we are still using a title here for MUSD claim in mobile?
Not a blocker, just confirming the intent.
matthewwalsh0
approved these changes
Mar 3, 2026
Member
matthewwalsh0
left a comment
There was a problem hiding this comment.
No major opposition, just clarity over the account row changes, and removing the title, can defer to a separate PR.
shane-t
approved these changes
Mar 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR updates the design of musd rewards claiming modal to properly match the designs in figma
Changelog
CHANGELOG entry: Changed styling of the MUSD rewards claiming modal
CHANGELOG entry:
Related issues
Fixes:
MUSD-302
Manual testing steps
Claim Bonus- verify that the modal which appears is styled correctlyScreenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Changes confirmation UX and navigation behavior for
TransactionType.musdClaim, including disabling gas fee edits and altering back/cancel handling, which could affect how users review and submit these transactions. Scope is limited to the mUSD claim flow and associated shared rows/components.Overview
Updates the
mUSDclaim confirmation to match the new design by switching it to the alternate confirmation header, adding a network badge overlay to the token hero, and restructuring the info sections (separate network section and a chevron affordance on the account row).Simplifies gas presentation for
musdClaimby disabling gas fee editing and hiding the EIP-1559 Speed row, and adjusts wallet-initiated back behavior to cancel the confirmation instead of navigating.Cleans up copy by removing the
musdClaimDescriptionlocale string and corresponding title/description handling, and updates/extends unit tests and the console baseline to reflect the new behavior.Written by Cursor Bugbot for commit 1d9a132. This will update automatically on new commits. Configure here.