Skip to content

fix(ramp): remove background from payment method list item icons#25122

Merged
wachunei merged 1 commit intomainfrom
fix/mdp-285-deposit-payment-method-bottomsheet
Jan 23, 2026
Merged

fix(ramp): remove background from payment method list item icons#25122
wachunei merged 1 commit intomainfrom
fix/mdp-285-deposit-payment-method-bottomsheet

Conversation

@wachunei
Copy link
Copy Markdown
Member

@wachunei wachunei commented Jan 23, 2026 •
edited by cursor bot
Loading

Description

Removes the background color from list item icons in the Payment Method Selector modal in the Deposit flow.

Issue: The list item icons in the "Select a Payment Method" bottom sheet were displaying with a background color, which was inconsistent with other list item menus in the app.

Solution: Updated the icon rendering to display icons only (default white) without background color, aligning with design system consistency.

Changelog

CHANGELOG entry: fix: removed background from payment method icons in deposit flow

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-285

Manual testing steps

Feature: Payment Method Selector Modal in Deposit Flow

  Scenario: User views payment method options without icon backgrounds
    Given the user is on the Deposit flow
    And the user has selected a token and region

    When user taps on the payment method selector
    Then the "Select a payment method" bottom sheet appears
    And the payment method icons are displayed without background color
    And the icons match the styling of other list item menus

Screenshots/Recordings

Before

image

After

image

Pre-merge author checklist

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

Aligns Payment Method Selector modal icon styling with design by removing background containers and rendering bare icons.

  • PaymentMethodSelectorModal: remove iconContainer wrapper/styles and related import; render Icon directly
  • Default icon color changed from IconColor.Primary to IconColor.Default, still supports theme-based iconColor
  • Update Jest snapshots to reflect icon-only rendering

Written by Cursor Bugbot for commit f8368eb. This will update automatically on new commits. Configure here.

@wachunei
fix: remove background from payment method list item icons
f8368eb 
Removes the background color from list item icons in the Payment Method
Selector modal to match the design system consistency.

Fixes MDP-285
@metamaskbot metamaskbot added the team-money-movement issues related to Money Movement features label Jan 23, 2026
@wachunei wachunei changed the title fix: remove background from payment method list item icons fix(ramp): remove background from payment method list item icons Jan 23, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 23, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeRamps
  • Risk Level: low
  • AI Confidence: 85%
click to see 🤖 AI reasoning details

The changes are purely visual/styling modifications to the PaymentMethodSelectorModal component in the Ramp/Deposit feature:

  1. What changed:

    • Removed a wrapper View container around the payment method icon
    • Removed the iconContainer style (background color #4459ff1a, border radius 8, 32x32 sizing)
    • Changed default icon color from IconColor.Primary to IconColor.Default
    • Updated snapshot test to reflect these visual changes

  2. Impact analysis:

    • This is a UI-only change with no functional behavior modifications
    • The component is used in the Ramp (on-ramp/off-ramp) payment method selection flow
    • E2E tests for ramps use text-based element matching (getElementByText) to interact with payment methods, not visual/style-based matching
    • No testIDs, accessibility labels, or component structure changes that would break E2E tests

  3. Tag selection rationale:

    • SmokeRamps is selected as it covers the fiat on-ramp/off-ramp features where this modal is used
    • While the risk is low due to the visual-only nature of changes, running SmokeRamps provides validation that the Ramp flow still works correctly
    • The tests interact with payment method selection which uses this modal component

View GitHub Actions results

@wachunei wachunei marked this pull request as ready for review January 23, 2026 16:45
@wachunei wachunei requested a review from a team as a code owner January 23, 2026 16:45
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Jan 23, 2026

Quality Gate Passed 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

@wachunei wachunei added this pull request to the merge queue Jan 23, 2026
Merged via the queue into main with commit 5edd980 Jan 23, 2026
115 checks passed
@wachunei wachunei deleted the fix/mdp-285-deposit-payment-method-bottomsheet branch January 23, 2026 18:12
@github-actions github-actions bot locked and limited conversation to collaborators Jan 23, 2026
@metamaskbot metamaskbot added the release-7.65.0 Issue or pull request that will be included in release 7.65.0 label Jan 23, 2026
@metamaskbot metamaskbot added release-7.64.0 Issue or pull request that will be included in release 7.64.0 and removed release-7.65.0 Issue or pull request that will be included in release 7.65.0 labels Feb 3, 2026
@metamaskbot
Copy link
Copy Markdown
Collaborator

metamaskbot commented Feb 3, 2026

Missing release label release-7.64.0 on PR. Adding release label release-7.64.0 on PR and removing other release labels(release-7.65.0), as PR was added to branch 7.64.0 when release was cut.

@metamaskbot
Copy link
Copy Markdown
Collaborator

metamaskbot commented Feb 4, 2026

No release label on PR. Adding release label release-7.64.0 on PR, as PR was added to branch 7.64.0 when release was cut.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@amitabh94 amitabh94 amitabh94 approved these changes

Assignees

No one assigned

Labels

release-7.64.0 Issue or pull request that will be included in release 7.64.0 size-S team-money-movement issues related to Money Movement features

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@wachunei @metamaskbot @amitabh94