feat(ramp): agg / deposit switcher

[wachunei]

Description

This pull request introduces a new "Settings" modal for the buy flow in the Ramp Aggregator, updates the configuration button icon, and improves component flexibility and test coverage. The most significant changes are the addition of the buy settings modal and its integration into the navigation flow.

Buy Flow Settings Modal

• Added a new SettingsModal component that appears as a bottom sheet, allowing users to view order history or switch to the new buy experience. This includes navigation logic and UI elements. [1] [2] [3]
• Integrated the SettingsModal into the Ramp Aggregator's modal navigation stack, making it accessible from the buy flow. [1] [2]
• Provided a utility for generating navigation details for the new modal (createBuySettingsModalNavigationDetails). [1] [2]

UI/UX Improvements

• Changed the configuration button icon in the deposit navbar and associated snapshots from "MoreHorizontal" to "Setting" for clarity and consistency. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]
• Updated the buy flow to show the configuration/settings button only when appropriate, and wired up the new modal. [1] [2]

Testing

• Added comprehensive tests for the new SettingsModal, verifying rendering, navigation, and user interactions.

Figma Link

• https://www.figma.com/design/ItZzm9CzSAjOWQTUKsOdSk/BUY?node-id=1084-4960&t=Srhw8LAFlFu5bYM6-4
• https://www.figma.com/design/ItZzm9CzSAjOWQTUKsOdSk/BUY?node-id=1225-8519&t=Srhw8LAFlFu5bYM6-4

Changelog

CHANGELOG entry: Add settings modal for Buy and a switcher between Buy and Deposit

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-2825

Manual testing steps

Feature: Buy and Deposit

  Scenario: user switches to Deposit
    Given user is in Buy (Aggregator) flow

    When user opens the settings
    And taps on the "Use new buy experience" item
    Then navigates to Deposit

  Scenario: user switches to Buy (Aggregator)
    Given user is in Deposit flow

    When user opens the settings
    And taps on the "More ways to buy" item
    Then navigates to Buy (Aggregator)

Screenshots/Recordings

Before

After

Buy

Before	After

Buy Settings

Before	After
N/A

Deposit

Before	After

Deposit Settings

Before	After

Switcher

switcher.mp4

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

Introduces a new buy Settings bottom sheet and navigation, adds a reusable MenuItem component, updates deposit config UI (incl. new Setting icon) and strings, and wires a switcher between Buy (Aggregator) and Deposit.

• Ramp Aggregator (Buy):
  • New settings modal: Adds SettingsModal bottom sheet (Routes.RAMP.MODALS.SETTINGS), opened from BuildQuote when buying; options to view order history and switch to Deposit.
  • Navigation: Registers modal in routes/index.tsx and provides createBuySettingsModalNavigationDetails.
• Deposit:
  • Config modal refresh: Uses header, shared MenuItem, adds "More ways to buy" to navigate to Aggregator; keeps order history/support/logout; removes old styles file.
  • Navbar icon: Changes configuration button icon to IconName.Setting.
• Shared Components:
  • MenuItem: New reusable list item (app/components/UI/Ramp/components/MenuItem) with icon/title/optional description.
• Localization & Routes:
  • Adds/updates strings for settings, logout label, and new menu items; adds RampSettingsModal route key.
• Tests/Snapshots:
  • Adds tests for SettingsModal and MenuItem; updates snapshots for icon/name and new UI.

^{Written by Cursor Bugbot for commit 9c02608. This will update automatically on new commits. Configure here.}

[github-actions]

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.

[wachunei]

cursor review

[Rorrote]

Ok 👍🙏 El jue, 6 de nov de 2025 4:04 p. m., Pedro Pablo Aste Kompen < ***@***.***> escribió:

…

***@***.**** commented on this pull request. ------------------------------ In app/component-library/components/List/ListItemSelect/ListItemSelect.tsx <#22283 (comment)> : > @@ -34,7 +35,7 @@ const ListItemSelect: React.FC<ListItemSelectProps> = ({ onLongPress={onLongPress} {...props} > - <ListItem gap={gap} style={styles.listItem}> + <ListItem gap={gap} style={styles.listItem} {...listItemProps}> ignore these changes because the are handled here #22277 <#22277> once updating with main they will not be relevant — Reply to this email directly, view it on GitHub <#22283 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BHZMWQ5Z2FJCPSSJQVKZH3L33PAXRAVCNFSM6AAAAACLMCDDXCVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTIMZQG4ZTMNBYGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[wachunei]

bugbot run

[cursor]

✅ Bugbot reviewed your changes and found no bugs!

---

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[georgeweiler]

these tests feel a bit redundant, wdyt? I think a single snapshot would cover the case for all of these text assertions

[wachunei]

yes, there's already a snapshot. cursor generated these and made sense to me anyway.