Skip to content

fix: show fallback token icons in confirmation rows cp-7.78.0#30502

Merged
dan437 merged 1 commit into
mainfrom
fallback-confirmation-icons
May 21, 2026
Merged

fix: show fallback token icons in confirmation rows cp-7.78.0#30502
dan437 merged 1 commit into
mainfrom
fallback-confirmation-icons

Conversation

@dan437

@dan437 dan437 commented May 21, 2026

Copy link
Copy Markdown
Contributor

Description

Fixes missing token icons in confirmation rows when token metadata is unavailable in local token state. The confirmation TokenIcon now falls back to the shared MetaMask token icon URL when it has an address, chain ID, and symbol, while still rendering nothing when neither token metadata nor a symbol is available.

This also passes the receive token symbol from PayWithRow into TokenIcon, so Perps and Predict deposit/withdraw rows can render the token icon fallback for mUSD and other supported ERC-20 tokens with missing local metadata.

Changelog

CHANGELOG entry: Show fallback token icons in confirmation rows

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1411

Manual testing steps

Feature: Confirmation token icon fallback

  Scenario: user withdraws mUSD from Perps or Predict
    Given the user has an mUSD balance
    And the user starts a Perps or Predict withdraw flow

    When the Receive row displays mUSD
    Then the mUSD token icon is shown next to the token symbol

Screenshots/Recordings

Before

After

N/A

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

Low Risk
Low risk UI change that only affects how token icons are resolved/rendered in confirmation rows. Main risk is incorrect fallback URL generation for some chains, but it’s covered by new unit tests.

Overview
Fixes missing token icons in confirmation flows by updating TokenIcon to accept an optional symbol and, when local token metadata is absent, fall back to a MetaMask-hosted token icon URL (while still rendering nothing when neither metadata nor symbol is available).

Updates PayWithRow to pass the displayed token symbol into TokenIcon (notably for Receive/withdraw rows), and expands unit tests to validate symbol propagation and fallback URL generation across multiple supported chains.

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

@dan437 dan437 requested a review from a team as a code owner May 21, 2026 09:38
@github-actions

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.

@metamaskbotv2 metamaskbotv2 Bot added the team-confirmations Push issues to confirmations team label May 21, 2026
} from '../../../../../component-library/components/Badges/Badge';
import { getNetworkImageSource } from '../../../../../util/networks';
import { useTokenWithBalance } from '../../hooks/tokens/useTokenWithBalance';
import { getAssetImageUrl } from '../../../../UI/Bridge/hooks/useAssetMetadata/utils';

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Few other features are importing this as well from the Bridge feature. Ideally in some future PR this would be moved into a shared util library.

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 66.66667% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.14%. Comparing base (66f0cb2) to head (2be0f2d).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
...confirmations/components/token-icon/token-icon.tsx 66.66% 1 Missing and 1 partial ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main   #30502   +/-   ##
=======================================
  Coverage   82.13%   82.14%           
=======================================
  Files        5488     5490    +2     
  Lines      147743   147790   +47     
  Branches    33969    33988   +19     
=======================================
+ Hits       121353   121395   +42     
- Misses      18084    18087    +3     
- Partials     8306     8308    +2     

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

@dan437 dan437 added this pull request to the merge queue May 21, 2026
@dan437 dan437 removed this pull request from the merge queue due to a manual request May 21, 2026
@dan437 dan437 force-pushed the fallback-confirmation-icons branch from 2be0f2d to 8921cc4 Compare May 21, 2026 13:43
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are confined to two UI components within the confirmations feature area:

  1. token-icon.tsx: Enhanced to accept an optional symbol prop, fall back to URL-based token icons when token metadata is unavailable (via getAssetImageUrl), and render when only a symbol is provided. This improves token icon display in confirmation screens.

  2. pay-with-row.tsx: Minor change to pass the symbol prop to the TokenIcon component, enabling the fallback icon behavior for the "pay with" row used in EIP-7702 gas fee token payment flows.

Both changes are purely UI/display improvements with no controller, state management, or core logic changes. The pay-with-row component is specifically used in EIP-7702 advanced confirmation flows (batch transactions, gas fee token payments), which are covered by SmokeConfirmations.

No other test tags are warranted:

  • No account management changes → no SmokeAccounts
  • No network/chain changes → no SmokeNetworkAbstractions/SmokeNetworkExpansion
  • No swap/bridge changes → no SmokeSwap
  • No staking changes → no SmokeStake
  • No identity/sync changes → no SmokeIdentity
  • No snaps changes → no SmokeSnaps
  • No browser changes → no SmokeBrowser

The test files are unit tests only, confirming the scope is limited to the confirmations UI layer.

Performance Test Selection:
The changes are minor UI enhancements to token icon display in confirmation screens. They add a fallback URL-based icon when token metadata is unavailable and pass a symbol prop. These changes do not affect rendering performance in any meaningful way - no list rendering, no state management changes, no data loading changes, and no critical user flow performance paths are impacted.

View GitHub Actions results

@dan437 dan437 enabled auto-merge May 21, 2026 13:52
@sonarqubecloud

Copy link
Copy Markdown

@dan437 dan437 added this pull request to the merge queue May 21, 2026
Merged via the queue into main with commit a0f1af8 May 21, 2026
194 of 196 checks passed
@dan437 dan437 deleted the fallback-confirmation-icons branch May 21, 2026 15:05
@github-actions github-actions Bot locked and limited conversation to collaborators May 21, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

size-M team-confirmations Push issues to confirmations team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants