fix: musd deposit page for new MM Pay designs cp-7.74.0 by jpuri · Pull Request #28654 · MetaMask/metamask-mobile

jpuri · 2026-04-10T11:01:31Z

Description

Fix design of mush deposit page.

Changelog

CHANGELOG entry:

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1173

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Low risk UI/prop change limited to the confirmations custom amount view and mUSD conversion flow; main risk is unintended layout/row visibility regressions when hidePayTokenAmount is enabled.

Overview
Updates CustomAmountInfo to remove overrideContent and introduce hidePayTokenAmount, which hides the default PayTokenAmount (and the associated extra content block) while keeping PayWithRow rendering logic consistent.

Simplifies MusdConversionInfo by deleting the bespoke override UI (output tag + embedded PayWithRow) and instead passing hidePayTokenAmount to CustomAmountInfo; tests are updated accordingly.

^{Reviewed by Cursor Bugbot for commit 3c829f9. Bugbot is set up for automated code reviews on this repo. Configure here.}

github-actions · 2026-04-10T11:01:40Z

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.

OGPoyraz · 2026-04-10T11:16:54Z

-    (amountHuman: string) => <MusdOverrideContent amountHuman={amountHuman} />,
-    [],
-  );
+  const renderOverrideContent = useCallback(() => null, []);


Can we remove this if we don't render anything?

This is used in <CustomAmountInfo in couple of places and can not be removed.

Isn't this an optional value? Not asking to remove functionality but removing prop below.

It is used at couple of decision points in CustomAmountInfo and we have removed only 1. The value is used in CustomAmountInfo and not possible to remove.

@jpuri I am not asking to remove it from CustomAmountInfo, my question is remove using empty callback. MusdConversionInfo component can return as below and it won't cause any issue, meaning
const renderOverrideContent = useCallback(() => null, []); can be removed.

return ( <CustomAmountInfo preferredToken={preferredPaymentToken} hasMax onAmountSubmit={startQuoteTrace} /> );

Yes it can not be removed, as it is used at couple of places in CustomAmountInfo, not for rendering but more as boolean check to see if it is defined.

I replaced by a boolean prop hidePayTokenAmount

OGPoyraz · 2026-04-10T11:19:44Z

@@ -1,46 +1,16 @@
 import React, { useCallback, useEffect } from 'react';
 import { useParams } from '../../../../../../util/navigation/navUtils';
-import OutputAmountTag from '../../../../../UI/Earn/components/OutputAmountTag';


Can we also remove this component entirely?

We do not own it, I would avoid removing it.

No point of leaving dead code either. Can you create a follow up task for them then?

Can you push the task here for reference?
Related thread of confirmation from PMs: https://consensys.slack.com/archives/C0A917EJME0/p1775819724642599?thread_ts=1775767602.266489&cid=C0A917EJME0

OGPoyraz · 2026-04-10T11:58:20Z

-    (amountHuman: string) => <MusdOverrideContent amountHuman={amountHuman} />,
-    [],
-  );
+  const renderOverrideContent = useCallback(() => null, []);


Isn't this an optional value? Not asking to remove functionality but removing prop below.

OGPoyraz · 2026-04-10T11:59:48Z

@@ -1,46 +1,16 @@
 import React, { useCallback, useEffect } from 'react';
 import { useParams } from '../../../../../../util/navigation/navUtils';
-import OutputAmountTag from '../../../../../UI/Earn/components/OutputAmountTag';


No point of leaving dead code either. Can you create a follow up task for them then?

…sk-mobile into much_deposit_fix

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7fe90fb. Configure here.}

github-actions · 2026-04-13T09:33:36Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeConfirmations, SmokePerps, SmokePredictions, SmokeWalletPlatform
Selected Performance tags: None (no tests recommended)
Risk Level: medium
AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes refactor the CustomAmountInfo component's API: replacing the overrideContent render-function prop with a simpler boolean hidePayTokenAmount prop. The MusdConversionInfo component is updated to use the new API.

Key impacts:

SmokeConfirmations: CustomAmountInfo is a shared component used across multiple confirmation info screens (perps-deposit, perps-withdraw, predict-deposit, predict-withdraw, money-account-deposit, money-account-withdraw, musd-conversion). The PayWithRow rendering logic was reorganized (moved outside the conditional block), which could subtly affect behavior across all consumers.
SmokePerps: perps-deposit-info and perps-withdraw-info both use CustomAmountInfo and could be affected by the PayWithRow logic reorganization.
SmokePredictions: predict-deposit-info and predict-withdraw-info both use CustomAmountInfo and could be affected similarly.
SmokeWalletPlatform: Required as a dependent tag when selecting SmokePerps and SmokePredictions (Perps and Predictions are sections inside the Trending tab).

The changes are unit-tested and the refactoring is straightforward, but the shared nature of CustomAmountInfo across multiple financial flows warrants validation of all affected flows.

Performance Test Selection:
The changes are a UI component API refactoring (replacing a render-function prop with a boolean prop) with no performance implications. No new rendering logic, data fetching, or state management changes were introduced that would affect app performance metrics.

View GitHub Actions results

sonarqubecloud · 2026-04-13T09:51:38Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

github-actions · 2026-04-13T09:52:30Z

✅ E2E Fixture Validation — Schema is up to date
11 value mismatches detected (expected — fixture represents an existing user).
View details

fix: musd deposit page for new MM Pay designs

99b5132

jpuri requested a review from a team as a code owner April 10, 2026 11:01

jpuri added team-confirmations Push issues to confirmations team no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed labels Apr 10, 2026

github-actions Bot added the size-S label Apr 10, 2026

jpuri changed the title ~~fix: musd deposit page for new MM Pay designs~~ fix: musd deposit page for new MM Pay designs cp-7.74.0 Apr 10, 2026

Merge branch 'main' into much_deposit_fix

2880a04

github-actions Bot added the risk-medium Moderate testing recommended · Possible bug introduction risk label Apr 10, 2026

jpuri enabled auto-merge April 10, 2026 11:03

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 10, 2026

OGPoyraz reviewed Apr 10, 2026

View reviewed changes

jpuri requested a review from OGPoyraz April 10, 2026 11:56

OGPoyraz requested changes Apr 10, 2026

View reviewed changes

jpuri requested a review from OGPoyraz April 10, 2026 12:01

jpuri added 2 commits April 10, 2026 22:11

update

dde8928

Merge branch 'much_deposit_fix' of https://github.com/MetaMask/metama…

7fe90fb

…sk-mobile into much_deposit_fix

cursor Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx

Comment thread ...components/Views/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx

OGPoyraz previously approved these changes Apr 13, 2026

View reviewed changes

Merge branch 'main' into much_deposit_fix

7293e04

jpuri dismissed OGPoyraz’s stale review via 7293e04 April 13, 2026 09:21

jpuri requested a review from OGPoyraz April 13, 2026 09:21

github-actions Bot added size-M risk-medium Moderate testing recommended · Possible bug introduction risk and removed size-S risk-medium Moderate testing recommended · Possible bug introduction risk labels Apr 13, 2026

update

3c829f9

github-actions Bot removed the risk-medium Moderate testing recommended · Possible bug introduction risk label Apr 13, 2026

github-actions Bot added the risk-medium Moderate testing recommended · Possible bug introduction risk label Apr 13, 2026

OGPoyraz approved these changes Apr 13, 2026

View reviewed changes

jpuri added this pull request to the merge queue Apr 13, 2026

Merged via the queue into main with commit f1be502 Apr 13, 2026
103 checks passed

jpuri deleted the much_deposit_fix branch April 13, 2026 10:30

github-actions Bot locked and limited conversation to collaborators Apr 13, 2026

metamaskbot added the release-7.74.0 Issue or pull request that will be included in release 7.74.0 label Apr 13, 2026

Uh oh!

Conversation

jpuri commented Apr 10, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 10, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OGPoyraz Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jpuri Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OGPoyraz Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 13, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Apr 13, 2026

Quality Gate passed

Uh oh!

github-actions Bot commented Apr 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jpuri commented Apr 10, 2026 •

edited by cursor Bot

Loading

OGPoyraz Apr 10, 2026 •

edited

Loading

jpuri Apr 10, 2026 •

edited

Loading

OGPoyraz Apr 10, 2026 •

edited

Loading