Skip to content

refactor(ramp): use MMDS HeaderStandard#29705

Merged
brianacnguyen merged 10 commits into
mainfrom
refactor/headerstandard-titles-ramp
May 15, 2026
Merged

refactor(ramp): use MMDS HeaderStandard#29705
brianacnguyen merged 10 commits into
mainfrom
refactor/headerstandard-titles-ramp

Conversation

@brianacnguyen

@brianacnguyen brianacnguyen commented May 5, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

This PR replaces the temporary HeaderCompactStandard component with HeaderStandard from @metamask/design-system-react-native across the Ramp (buy / sell / on-ramp) and Deposit flows, including aggregator screens, selector bottom sheets, checkout and build-quote flows, native verification screens, and assorted Ramp modals.

Reason: Align Ramp UI with the MetaMask design system and reduce reliance on component-library/components-temp for standard headers.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-702

Manual testing steps

Feature: Ramp and Deposit use design system HeaderStandard

  Scenario: Buy / on-ramp aggregator flow
    Given the user starts buy or sell and reaches quotes, order details, region or currency selectors, payment method, or token selection
    When they view each screen or sheet header and use back or close
    Then navigation, titles, and loading or error headers behave as before

  Scenario: Build quote and checkout
    Given the user is on build quote or checkout with the checkout header visible
    When they interact with the header close control and titles
    Then behavior matches the prior implementation

  Scenario: Deposit flow modals
    Given the user uses Deposit and opens payment method, region, state, token, SSN info, or WebView modals
    When they view headers and dismiss sheets
    Then titles and close actions work as before including close testIDs where applicable

  Scenario: Ramp modals and native KYC
    Given the user opens ramp settings, provider selection, payment selection, processing info, error details, token unavailable, or unsupported token modals
    When they complete native verification steps touched by this PR (e.g. bank details, OTP, verify identity)
    Then headers and navigation remain consistent with previous behavior

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

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

Medium Risk
Broad UI refactor across many Ramp/Deposit screens swaps out a core navigation header component, which could cause subtle regressions in back/close behavior, spacing (safe area insets), or test selectors despite minimal logic changes.

Overview
Migrates Ramp (aggregator + unified) and Deposit flows from the temporary HeaderCompactStandard to design-system HeaderStandard across screens and bottom-sheet modals, standardizing header rendering and props for onBack/onClose, titles, and top inset handling.

Updates affected tests to match the new header implementation (notably switching assertions from header to the new back/close button test ids such as button-icon).

Reviewed by Cursor Bugbot for commit df0d668. Bugbot is set up for automated code reviews on this repo. Configure here.

@brianacnguyen @cursoragent
refactor(ramp): use MMDS HeaderStandard
f8728aa 
Co-authored-by: Cursor <cursoragent@cursor.com>
@brianacnguyen brianacnguyen self-assigned this May 5, 2026
@brianacnguyen brianacnguyen added the No QA Needed Apply this label when your PR does not need any QA effort. label May 5, 2026
@brianacnguyen brianacnguyen requested a review from a team as a code owner May 5, 2026 05:32
@brianacnguyen brianacnguyen added team-design-system All issues relating to design system in Mobile no changelog required No changelog entry is required for this change labels May 5, 2026
@github-actions

github-actions Bot commented May 5, 2026

Copy link
Copy Markdown
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.

@github-actions github-actions Bot added the size-M label May 5, 2026
cursor[bot]
cursor Bot reviewed May 5, 2026
View reviewed changes
Comment thread app/components/UI/Ramp/Views/Modals/ErrorDetailsModal/ErrorDetailsModal.tsx
@brianacnguyen brianacnguyen added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label May 5, 2026
@brianacnguyen

brianacnguyen commented May 5, 2026

Copy link
Copy Markdown
Contributor Author

Skipping sonar cloud since this is a simple direct replacement

cursor[bot]
cursor Bot reviewed May 6, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ 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 66a8c6a. Configure here.

Comment thread app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.test.tsx
@github-actions

github-actions Bot commented May 14, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeMoney
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 92%
click to see 🤖 AI reasoning details

E2E Test Selection:
All 39 changed files follow a single consistent pattern: replacing the internal HeaderCompactStandard component (from component-library/components-temp/) with HeaderStandard from @metamask/design-system-react-native. This is a UI component migration across the entire Ramp/fiat on-ramp feature area.

The changes affect:

  • Aggregator views: OrderDetails, Quotes, Settings, ActivationKeyForm
  • Aggregator modals: FiatSelectorModal, PaymentMethodSelectorModal, RegionSelectorModal, TokenSelectModal
  • Deposit modals: PaymentMethodSelectorModal, RegionSelectorModal, SsnInfoModal, StateSelectorModal, TokenSelectorModal, WebviewModal
  • Ramp views: BuildQuote, Checkout, HeadlessHost, HeadlessPlayground, OrderDetails, TokenSelection
  • Ramp modals: ErrorDetailsModal, PaymentSelectionModal, ProcessingInfoModal, ProviderSelection, SettingsModal, StateSelectorModal, TokenNotAvailableModal, UnsupportedTokenModal
  • NativeFlow views: AdditionalVerification, BankDetails, BasicInfo, EnterAddress, EnterEmail, KycProcessing, OrderProcessing, OtpCode, VerifyIdentity
  • Settings: RegionSelector

The risk is medium because while the change is a straightforward component swap, HeaderStandard from the design system may have slightly different prop interfaces, rendering behavior, or test IDs compared to the temporary HeaderCompactStandard. This could affect navigation (back/close button behavior), testID resolution in E2E tests, and visual layout in all Ramp flows.

SmokeMoney is the correct tag as it directly covers the Ramp/fiat on-ramp flows (buy, sell, deeplinks, card flows, region-aware flows) that are all affected by this header component change. No other tags are needed since this is purely a Ramp UI component migration with no impact on confirmations, swaps, or other wallet flows.

Performance Test Selection:
This is a UI component swap (HeaderCompactStandard → HeaderStandard) with equivalent functionality. No performance impact is expected as the change is purely a component migration within the Ramp feature area, not affecting rendering performance, data loading, state management, or critical user flow timing.

View GitHub Actions results

@codecov-commenter

codecov-commenter commented May 14, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 14.28571% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.86%. Comparing base (3751d9a) to head (df0d668).
⚠️ Report is 211 commits behind head on main.

Files with missing lines Patch % Lines
...ponents/UI/Ramp/Aggregator/Views/Quotes/Quotes.tsx 0.00% 5 Missing ⚠️
...Deposit/Views/Modals/WebviewModal/WebviewModal.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #29705      +/-   ##
==========================================
+ Coverage   81.54%   81.86%   +0.32%     
==========================================
  Files        5343     5434      +91     
  Lines      142128   144898    +2770     
  Branches    32411    33093     +682     
==========================================
+ Hits       115899   118623    +2724     
+ Misses      18299    18166     -133     
- Partials     7930     8109     +179

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@sonarqubecloud

sonarqubecloud Bot commented May 14, 2026

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
14.3% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

@brianacnguyen brianacnguyen enabled auto-merge May 14, 2026 22:29
@amitabh94

amitabh94 commented May 15, 2026

Copy link
Copy Markdown
Contributor

Can we add some screenshot to be sure there are no design regressions?

amitabh94
amitabh94 approved these changes May 15, 2026
View reviewed changes

@amitabh94 amitabh94 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving as this is the direct replacement of the component.

@brianacnguyen brianacnguyen added this pull request to the merge queue May 15, 2026
Merged via the queue into main with commit a9e32b5 May 15, 2026
91 of 92 checks passed
@brianacnguyen brianacnguyen deleted the refactor/headerstandard-titles-ramp branch May 15, 2026 16:41
@github-actions github-actions Bot locked and limited conversation to collaborators May 15, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.79.0 Issue or pull request that will be included in release 7.79.0 label May 15, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@amitabh94 amitabh94 amitabh94 approved these changes

Assignees

@brianacnguyen brianacnguyen

Labels

no changelog required No changelog entry is required for this change No QA Needed Apply this label when your PR does not need any QA effort. release-7.79.0 Issue or pull request that will be included in release 7.79.0 size-M skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. team-design-system All issues relating to design system in Mobile

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brianacnguyen @codecov-commenter @amitabh94