feat: Swaps new token warning modal by infiniteflower · Pull Request #29197 · MetaMask/metamask-mobile

infiniteflower · 2026-04-22T16:08:23Z

Description

Implements the updated Figma design for the Bridge/Swaps token warning modal, and consolidates the security UI logic into shared utilities.

What changed:

TokenWarningModal redesign — The malicious state uses a stacked Continue anyway / Cancel button layout with isDanger styling. Content is wrapped in a ScrollView (from react-native-gesture-handler) to handle long feature lists on Android.
Removed selectDestTokenWarning Redux selector — all consumers (BridgeView, SwapsConfirmButton, bridge slice) now read token.securityData directly. Removes a deprecated selector.
New tokenSecurityUtils.ts — single source of truth for Bridge security UI configuration. getBridgeTokenSecurityConfig(type) returns the icon, icon color, severity, and label for each SecurityDataType. getSecurityWarnings(token) moved here from tokenUtils.ts for cohesion.
TokenSelectorItem icon fix — getSecurityTag now delegates to getBridgeTokenSecurityConfig, fixing a bug where the Warning and Malicious icons were swapped.
Token warning banner in zero-state — the banner in BridgeView now renders even before a quote is available, so users see the warning as soon as they select a flagged token.
i18n for security feature labels — 39 new keys added to locales/languages/en.json under security_trust.features.positive.* and security_trust.features.negative.*. POSITIVE_FEATURE_LABELS and NEGATIVE_FEATURE_LABELS in securityUtils.ts now call strings() instead of using hardcoded English. NEGATIVE_FEATURE_LABELS is exported so the modal can look up per-feature titles.

Changelog

CHANGELOG entry: Updated Bridge/Swaps token warning modal to match new design and fixed swapped warning/malicious icons in the token selector

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-4374

Manual testing steps

Feature: Bridge/Swaps token warning modal

  Background:
    Given I am logged into MetaMask Mobile
    And I am on the Bridge/Swaps screen

  Scenario: suspicious token shows warning banner before quote
    Given I open the source token selector
    When I select a token flagged as "suspicious" 
    Then a warning banner should appear on the Bridge screen
    And the banner should show the triangular Danger icon in yellow

  Scenario: suspicious token warning modal can be dismissed
    Given a suspicious token is selected and the warning banner is visible
    When I tap the warning banner
    Then the TokenWarningModal should open
    And I should see "Got it"
    When I tap "Got it"
    Then the modal should close and I remain on the Bridge screen

  Scenario: suspicious token warning modal shown after hitting Swap
    Given a suspicious token is selected and the warning banner is visible
    When I tap the Swap button
    Then the TokenWarningModal should open
    And I should see "Proceed" and "Cancel"
    When I tap "Proceed"
    Then the modal should close and my Swap should execute

  Scenario: malicious token shows danger-styled modal
    Given I open the source token selector
    When I select a token flagged as "malicious" 
    And I tap the warning banner
    Then the TokenWarningModal should open in malicious mode
    And the "Got it" button should appear 
    When I tap "Got it"
    Then the modal should close

  Scenario: malicious token shows danger-styled modal shows after hitting Swap
    Given I open the source token selector
    When I select a token flagged as "malicious" 
    And I tap the Swap button
    Then the TokenWarningModal should open in malicious mode
    And the "Continue anyway" button should appear in red (danger styling) above a "Cancel" button
    When I tap "Continue anyway"
    Then the modal should close and my Swap should execute

  Scenario: long feature list is scrollable in the modal
    Given the TokenWarningModal is open for a token with many security features
    When I scroll down within the modal
    Then the feature list should scroll smoothly on both iOS and Android

  Scenario: token selector shows correct icon per severity
    Given I open the token selector
    When I see a token tagged as suspicious
    Then the tag should display the Danger icon in Warning (yellow) color
    When I see a token tagged as malicious
    Then the tag should display the Error icon in Error (red) color

Screenshots/Recordings

Before

After

Screen.Recording.2026-04-22.at.4.45.36.PM.mov

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.

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
- See trace() for usage and addToken for an example

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
Changes the Bridge/Swaps token-warning gating path (banner + confirm-button routing) to rely on destToken.securityData and new feature lists, which could affect when/why users are blocked or allowed to proceed. Mostly UI/UX and selector refactors, but touches pre-transaction warnings.

Overview
Updates Bridge/Swaps token-warning handling to read destToken.securityData directly (removing selectDestTokenWarning) and to pass feature lists into TokenWarningModal instead of a single backend description.

Redesigns TokenWarningModal to match new Figma (scrollable content, per-feature rows with localized labels, and a danger-styled malicious execution flow using stacked Continue anyway/Cancel buttons). The Bridge warning banner now renders whenever the destination token is flagged (including zero-state before quotes) and uses shared getBridgeTokenSecurityConfig for consistent icons/colors.

Adds tokenSecurityUtils as the shared source of truth for Bridge security UI config (icons/severity/labels and warning extraction), fixes the token selector malicious icon, and expands i18n (security_trust.features.* plus new modal strings) while updating securityUtils to use translated labels.

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

github-actions · 2026-04-22T16:08:34Z

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.

codecov-commenter · 2026-04-22T20:40:04Z

Codecov Report

❌ Patch coverage is 93.54839% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.23%. Comparing base (d824f4c) to head (5a03812).
⚠️ Report is 40 commits behind head on main.

Files with missing lines	Patch %	Lines
...pp/components/UI/Bridge/Views/BridgeView/index.tsx	85.71%	0 Missing and 1 partial ⚠️
...s/UI/Bridge/components/TokenWarningModal/index.tsx	94.11%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29197      +/-   ##
==========================================
+ Coverage   82.21%   82.23%   +0.02%     
==========================================
  Files        5079     5107      +28     
  Lines      133881   134980    +1099     
  Branches    30031    30369     +338     
==========================================
+ Hits       110071   111002     +931     
- Misses      16332    16408      +76     
- Partials     7478     7570      +92

☔ 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.

sahar-fehri · 2026-04-23T07:12:39Z

    "more": "more",
-    "evaluation_disclaimer": "This security review is for evaluation only and does not constitute an endorsement or recommendation to trade."
+    "evaluation_disclaimer": "This security review is for evaluation only and does not constitute an endorsement or recommendation to trade.",
+    "features": {


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 f49b71a. Configure here.}

github-actions · 2026-04-23T15:16:15Z

AI PR Analysis

🚫 Merge safe: false | 🟠 Risk: high

Merge decision: AI analysis did not complete — manual review required before merging.

AI analysis did not complete. Manual review recommended.

View run

infiniteflower · 2026-04-23T20:06:46Z

Will merge this after RC cut today

github-actions · 2026-04-24T15:59:11Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeTrade, SmokeConfirmations
Selected Performance tags: None (no tests recommended)
Risk Level: medium
AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes in this PR are focused on the Bridge/Swap token security warning system:

Redux slice refactor (CRITICAL): selectDestTokenWarning selector removed from app/core/redux/slices/bridge/index.ts. Components now read destToken?.securityData directly instead of going through the bridge-controller's selectTokenWarningsBase. This is a behavioral change in how token warnings are sourced.
New tokenSecurityUtils.ts: Centralizes security logic (getSecurityWarnings, isNegativeSecurityType, getBridgeTokenSecurityConfig) previously scattered across tokenUtils.ts and inline code.
TokenWarningModal redesign: Major UI overhaul with scrollable content, new layout differentiating malicious vs suspicious tokens, feature list display, and different button styles for malicious tokens (danger button) vs suspicious tokens (horizontal footer buttons).
SwapsConfirmButton: Updated to use new security data source and isNegativeSecurityType check.
BridgeView: Updated to use new security utilities and fixed icon imports (from component-library to design-system).
SecurityTrust securityUtils.ts: Converted hardcoded English labels to i18n strings via strings() calls, and exported getNegativeFeatureLabels for use in the TokenWarningModal.
locales/en.json: Added new i18n strings for security features and bridge warning modal.

Why SmokeTrade: These changes directly affect the bridge and swap flows - specifically the token security warning UI that appears when users select suspicious/malicious destination tokens. The bridge action smoke test and swap tests exercise these flows.

Why SmokeConfirmations: Per the SmokeTrade tag description, swap and bridge flows require confirmations - when selecting SmokeTrade for swap/bridge, also select SmokeConfirmations.

Risk level is medium: The changes are well-contained within the Bridge/Swap UI and security warning system. The core bridge logic (quote fetching, transaction submission) is unchanged. The main risk is the refactored security data source (from bridge-controller selector to direct securityData) and the redesigned TokenWarningModal UI could break existing test assertions. No other feature areas (accounts, networks, identity, etc.) are affected.

Performance Test Selection:
The changes are focused on UI logic refactoring (security warning display, i18n string conversion) and Redux selector changes within the Bridge/Swap flow. There are no changes to rendering performance-critical components like account lists, asset loading, or app initialization. The TokenWarningModal redesign adds a ScrollView but this is a modal that only appears in specific security warning scenarios, not a performance-critical path. No performance test tags are warranted.

View GitHub Actions results

sonarqubecloud · 2026-04-24T16:17:05Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

github-actions · 2026-04-24T16:27:38Z

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

metamaskbotv2 Bot added the team-swaps-and-bridge Swaps and Bridge team label Apr 22, 2026

github-actions Bot added size-L size-XL and removed size-L labels Apr 22, 2026

infiniteflower marked this pull request as ready for review April 22, 2026 20:57

infiniteflower requested a review from a team as a code owner April 22, 2026 20:57

github-actions Bot added the risk:high AI analysis: high risk label Apr 22, 2026

cursor Bot reviewed Apr 22, 2026

View reviewed changes

Comment thread app/components/UI/SecurityTrust/utils/securityUtils.ts

cursor Bot reviewed Apr 22, 2026

View reviewed changes

Comment thread app/components/UI/Bridge/components/TokenWarningModal/index.tsx

sahar-fehri reviewed Apr 23, 2026

View reviewed changes

infiniteflower force-pushed the swaps-4374-new-token-warning-banner branch from 180fb62 to f49b71a Compare April 23, 2026 14:53

cursor Bot reviewed Apr 23, 2026

View reviewed changes

Comment thread app/components/UI/Bridge/components/SwapsConfirmButton/index.tsx Outdated

Comment thread app/components/UI/Bridge/components/TokenWarningModal/index.tsx Outdated

infiniteflower changed the title ~~feat: Swaps new token warning banner~~ feat: Swaps new token warning modal Apr 23, 2026

infiniteflower force-pushed the swaps-4374-new-token-warning-banner branch from 1b00001 to 9089c55 Compare April 23, 2026 18:01

bfullam previously approved these changes Apr 23, 2026

View reviewed changes

infiniteflower marked this pull request as draft April 23, 2026 20:07

infiniteflower marked this pull request as ready for review April 24, 2026 14:21

infiniteflower added 9 commits April 24, 2026 10:53

feat: new swaps token warning modal

6734a89

chore: tests

6b9dfa7

chore: tests

4830e87

feat: show token warning banner even before quote

860518c

feat: use labels as feature row titles

9c09e92

fix: colors and icons

5585689

feat: use i18n for the feature labels

573538a

chore: cleanup

e821347

fix: gaps

fe00273

infiniteflower added 5 commits April 24, 2026 10:54

fix: i18n not being run properly

26b588d

fix: reduce negative feature fn calls

12a1826

chore: extract negative security type check into own fn

3c53a8f

chore: harden modal from missing features

fa706e5

fix: tests

b1dafa9

infiniteflower dismissed bfullam’s stale review via b1dafa9 April 24, 2026 14:54

infiniteflower force-pushed the swaps-4374-new-token-warning-banner branch from 9089c55 to b1dafa9 Compare April 24, 2026 14:54

infiniteflower added 3 commits April 24, 2026 11:07

fix: lint

9dba185

fix: tests

79177f8

fix: tests

78020b2

infiniteflower enabled auto-merge April 24, 2026 16:45

bfullam approved these changes Apr 24, 2026

View reviewed changes

infiniteflower added this pull request to the merge queue Apr 24, 2026

Merged via the queue into main with commit 70f8823 Apr 24, 2026
101 of 102 checks passed

infiniteflower deleted the swaps-4374-new-token-warning-banner branch April 24, 2026 17:12

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

metamaskbotv2 Bot added the release-7.76.0 Issue or pull request that will be included in release 7.76.0 label Apr 24, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Swaps new token warning modal#29197

feat: Swaps new token warning modal#29197
infiniteflower merged 17 commits into
mainfrom
swaps-4374-new-token-warning-banner

infiniteflower commented Apr 22, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Apr 22, 2026

Uh oh!

codecov-commenter commented Apr 22, 2026

Uh oh!

Uh oh!

Uh oh!

sahar-fehri Apr 23, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 23, 2026

Uh oh!

infiniteflower commented Apr 23, 2026

Uh oh!

github-actions Bot commented Apr 24, 2026

Uh oh!

sonarqubecloud Bot commented Apr 24, 2026

Uh oh!

github-actions Bot commented Apr 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

infiniteflower commented Apr 22, 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

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 22, 2026

Uh oh!

codecov-commenter commented Apr 22, 2026

Codecov Report

Uh oh!

Uh oh!

Uh oh!

sahar-fehri Apr 23, 2026

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 23, 2026

AI PR Analysis

Uh oh!

infiniteflower commented Apr 23, 2026

Uh oh!

github-actions Bot commented Apr 24, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Apr 24, 2026

Quality Gate passed

Uh oh!

github-actions Bot commented Apr 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

infiniteflower commented Apr 22, 2026 •

edited by cursor Bot

Loading