Skip to content

feat: update token details security trust designs#29230

Merged
sahar-fehri merged 18 commits into
mainfrom
feat/update-token-details-security-badges
Apr 24, 2026
Merged

feat: update token details security trust designs#29230
sahar-fehri merged 18 commits into
mainfrom
feat/update-token-details-security-badges

Conversation

@sahar-fehri

@sahar-fehri sahar-fehri commented Apr 23, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

This PR refactors and unifies security badge/icon display logic across the Token Details page, Trending tokens, and Security Trust screens to ensure consistent visual presentation and centralized configuration.

https://www.figma.com/design/iqPZeL5rVg7tWGmacjIeyH/Token-details?node-id=6753-29048&p=f&m=dev

Key Changes

  1. Unified Icon Configuration - Merged getSecurityBadgeConfig into getResultTypeConfig with explicit badge configuration
  2. Consistent Icon Display - All security icons now use the same source of truth across components
  3. Improved Security Warnings - Enhanced malicious token warning UI in bottom sheet
  4. Fixed Icon Discrepancies - Resolved inconsistencies between banners, badges, and feature tags

🎨 UI/UX Improvements

Security Badge Bottom Sheet (SecurityBadgeBottomSheet.tsx):

  • ✅ Display max 5 feature IDs for risky/malicious tokens
  • ✅ Changed button layout from horizontal to vertical
  • ✅ Updated button text from "Proceed" to "Continue anyway"
  • ✅ Added red background with black text for "Continue anyway" on malicious tokens
  • ✅ Added malicious token banner in bottomSheet
  • ✅ Malicious banner text: "{Symbol} is flagged as malicious. It's likely to steal funds from anyone who interacts with it."

Token Details Page (AssetOverviewContent.tsx):

  • ✅ Updated badge/banner display - now shows ONLY verified icon badge (not for warning/malicious)
  • ✅ Warning/Malicious tokens show banner only (no badge icon next to name)

Trending Tokens (TrendingTokenRowItem.tsx):

  • ✅ Updated to use IconAlert component for consistent icon display
  • ✅ Inline badges now match icon style with banners and other security UIs

Changelog

CHANGELOG entry: Implements new trust security token details design specs

Related issues

Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/ASSETS/boards/1567?assignee=61a5edc8b0b630006a140ec1&selectedIssue=ASSETS-3105
Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/ASSETS/boards/1567?assignee=61a5edc8b0b630006a140ec1&selectedIssue=ASSETS-3105

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

Before

After

Pre-merge author checklist

Screen.Recording.2026-04-24.at.10.42.28.mov

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
Updates security severity config and reworks token security warnings/bottom-sheet UI across multiple entry points, which could affect navigation params and what security indicators render for each result type.

Overview
Centralizes security severity presentation by expanding getResultTypeConfig to include IconAlert severity, inline badge config, and bottom-sheet copy helpers, and removing the separate getSecurityBadgeConfig path.

Updates token security UI to use the shared config everywhere: feature tags in SecurityTrustScreen and SecurityTrustEntryCard now render IconAlert, Trending token rows use the new badge config (with IconAlert when available), and Token Details switches from inline warning badges to a new SecurityBanner for Warning/Spam/Malicious (Verified remains an inline icon).

Redesigns SecurityBadgeBottomSheet: supports passing features, shows up to 5 feature tags for Warning/Spam/Malicious, shows a malicious-specific banner/wording, and changes the primary action label to Continue anyway with malicious styling. Updates/enriches related tests and English strings accordingly.

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

@github-actions

github-actions Bot commented Apr 23, 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 size-L and removed size-M labels Apr 23, 2026
@github-actions github-actions Bot added size-XL and removed size-L labels Apr 23, 2026
@sahar-fehri sahar-fehri marked this pull request as ready for review April 23, 2026 14:09
@sahar-fehri sahar-fehri requested a review from a team as a code owner April 23, 2026 14:09
@github-actions github-actions Bot added the risk:high AI analysis: high risk label Apr 23, 2026
cursor[bot]
cursor Bot reviewed Apr 23, 2026
View reviewed changes
Comment thread app/components/UI/TokenDetails/components/SecurityBadgeBottomSheet.tsx Outdated
cursor[bot]
cursor Bot reviewed Apr 23, 2026
View reviewed changes
Comment thread app/components/UI/TokenDetails/components/SecurityBadgeBottomSheet.test.tsx
@codecov-commenter

codecov-commenter commented Apr 23, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 42.55319% with 27 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.96%. Comparing base (8542e14) to head (d1a503a).
⚠️ Report is 18 commits behind head on main.

Files with missing lines Patch % Lines
...kenDetails/components/SecurityBadgeBottomSheet.tsx 0.00% 17 Missing ⚠️
...kenDetails/components/TokenDetailsStickyFooter.tsx 33.33% 3 Missing and 1 partial ⚠️
.../SecurityTrustEntryCard/SecurityTrustEntryCard.tsx 0.00% 2 Missing ⚠️
...I/TokenDetails/components/AssetOverviewContent.tsx 86.66% 1 Missing and 1 partial ⚠️
...ents/TrendingTokenRowItem/TrendingTokenRowItem.tsx 33.33% 0 Missing and 2 partials ⚠️
Additional details and impacted files 
@@             Coverage Diff             @@
##             main   #29230       +/-   ##
===========================================
- Coverage   82.23%   56.96%   -25.28%     
===========================================
  Files        5107     5123       +16     
  Lines      134974   135445      +471     
  Branches    30358    30497      +139     
===========================================
- Hits       110997    77157    -33840     
- Misses      16410    52028    +35618     
+ Partials     7567     6260     -1307

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

cursor[bot]
cursor Bot reviewed Apr 23, 2026
View reviewed changes
Comment thread app/components/UI/TokenDetails/components/AssetOverviewContent.tsx Outdated
@github-actions

github-actions Bot commented Apr 23, 2026

Copy link
Copy Markdown
Contributor

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

cursor[bot]
cursor Bot reviewed Apr 23, 2026
View reviewed changes
Comment thread app/components/UI/TokenDetails/components/SecurityBadgeBottomSheet.test.tsx Outdated
Comment thread ...omponents/UI/SecurityTrust/components/SecurityTrustEntryCard/SecurityTrustEntryCard.test.tsx Outdated
cursor[bot]
cursor Bot reviewed Apr 24, 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 4dbe41d. Configure here.

Comment thread app/components/UI/TokenDetails/components/SecurityBanner.tsx
@sahar-fehri sahar-fehri enabled auto-merge April 24, 2026 09:42
@github-actions

github-actions Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeWalletPlatform, SmokeTrade, SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 78%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes in this PR are focused on the Security Trust UI system for tokens, specifically:

  1. SecurityTrust utilities refactoring: getSecurityBadgeConfig was removed and its functionality merged into getResultTypeConfig. This is a breaking change for any component that used getSecurityBadgeConfig - all callers have been updated in this PR (TrendingTokenRowItem, AssetOverviewContent).

  2. TrendingTokenRowItem.tsx: Updated to use new getResultTypeConfig().badge instead of removed getSecurityBadgeConfig. This directly affects the Trending tab which is tested under SmokeWalletPlatform (trending-feed.spec.ts, trending-search.spec.ts, trending-browser.spec.ts).

  3. AssetOverviewContent.tsx: Major refactor of security badge display and new SecurityBanner component for malicious/warning/spam tokens. This is the token details screen accessed from the wallet. The swap-trending-tokens.spec.ts (SmokeTrade) navigates to token details from trending tokens.

  4. SecurityBadgeBottomSheet.tsx: Enhanced with feature tags, new UI layout, and continue_anyway button text change (was proceed). This bottom sheet is shown when users interact with security badges on token details - part of the confirmation/warning flow before trading.

  5. TokenDetailsStickyFooter.tsx: Refactored to use getResultTypeConfig - this footer contains Send/Swap/Bridge actions and shows security warnings before proceeding.

  6. Locales: String changes including renaming "Risky token" to "Suspicious token" and adding new strings.

Tag selection rationale:

  • SmokeWalletPlatform: TrendingTokenRowItem is directly modified (security badge rendering), and trending tests (trending-feed, trending-search, trending-browser) are under this tag. Also covers token details access from wallet.
  • SmokeTrade: swap-trending-tokens.spec.ts uses TrendingTokenRowItem and navigates to token details. The security badge changes could affect the swap flow when tokens have security warnings.
  • SmokeConfirmations: TokenDetailsStickyFooter shows security warning bottom sheets before proceeding with Send/Swap/Bridge actions. The SecurityBadgeBottomSheet button text changed from "Proceed" to "Continue anyway" which could affect test selectors.

Not selected:

  • SmokeNetworkAbstractions: While token details is accessible from network-filtered views, the core network management tests are not directly affected by security badge UI changes.
  • SmokeRamps: Not related to buy/sell flows.
  • Other tags: Not impacted by these UI-only security badge changes.

Performance Test Selection:
The changes are UI-only refactoring of security badge components (IconAlert migration, SecurityBanner new component, SecurityBadgeBottomSheet enhancements). These are display-only changes that don't affect data loading, state management, list rendering performance, or app startup. The SecurityBanner is a new component but it's conditionally rendered only for malicious/warning/spam tokens which are edge cases. No performance-sensitive code paths (Redux, controllers, API calls, account/network lists) are modified.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented Apr 24, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
2 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@github-actions

github-actions Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor

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

@sahar-fehri sahar-fehri added this pull request to the merge queue Apr 24, 2026
Merged via the queue into main with commit 4ab229b Apr 24, 2026
115 of 116 checks passed
@sahar-fehri sahar-fehri deleted the feat/update-token-details-security-badges branch April 24, 2026 10:45
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 24, 2026
@metamaskbotv2 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
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

@Prithpal-Sooriya Prithpal-Sooriya Prithpal-Sooriya approved these changes

Assignees

No one assigned

Labels

release-7.76.0 Issue or pull request that will be included in release 7.76.0 risk:high AI analysis: high risk size-XL team-assets

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sahar-fehri @codecov-commenter @Prithpal-Sooriya