fix: reset token icon when source changes to recalculate fallback

[GeorgeGkas]

Description

It was found that when the source of a TokenIcon instance changes to an error URI, the TokenIcon does not render the fallback avatar. This fix addresses it,

Changelog

CHANGELOG entry: reset token icon when source changes to recalculate fallback

Related issues

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

Manual testing steps

Ensure that when users update the source or dest asset in swaps to one that does not provide an
image, it renders the default fallback avatar.

Screenshots/Recordings

Before

After

Screen.Recording.2025-12-18.at.12.22.50.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.

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

Ensures token icons properly re-render and fall back when image sources change or fail.

• TokenIcon: Adds useEffect to reset showFallback when icon or symbol changes; sets key on RemoteImage to force remount on source change; updates Text import path; minor typing tweaks.
• RemoteImage: onError now invokes provided onError callback and internal error is reset when source.uri changes; simplifies IPFS URL resolution error handling; preserves Identicon fallback when address is provided.
• Tests: New suites for "Error/Fallback State Reset" validating rerenders on source changes, switching between RemoteImage and symbol fallback, and Identicon rendering.

^{Written by Cursor Bugbot for commit eba878a. 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.

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAssets, SmokeWalletUX, SmokeTrade, SmokeStake, SmokeRamps, SmokeConfirmationsRedesigned
• Risk Level: medium
• AI Confidence: 75%

click to see 🤖 AI reasoning details

The changes modify two base UI components (RemoteImage and TokenIcon) that are widely used across the application. The changes are focused on fixing state management issues:

1. RemoteImage: Added error state reset when source URI changes, and added onError callback propagation
2. TokenIcon: Added fallback state reset when icon/symbol props change, added key prop for proper re-rendering

These are bug fixes that improve how images reload when their props change. The components are used in:

• Bridge/Trade features (TokenIcon in Bridge components)
• Staking/Earn (TokenIconWithSpinner)
• Confirmations (token-icon wrapper component)
• Ramps (RemoteImage in payment methods, quotes)
• Assets/NFTs (CollectibleMedia, AssetIcon)
• Notifications (RemoteImage in various notification fields)

The changes are relatively low-risk as they:

• Add new behavior (state reset) rather than modifying existing logic
• Include comprehensive unit tests
• Are defensive improvements for edge cases

Selected tags cover the main feature areas where these components are visually displayed and could be affected by the state management changes.

View GitHub Actions results