fix(TMCU-538): update error state icon to new no-connection illustration

[wachunei]

Description

Replaces the flat IconName.WifiOff design system icon in the shared ErrorState component with themed PNG illustrations matching Vinay's new "No connection" design. Uses useAssetFromTheme to switch between light and dark variants, following the same pattern as CollectiblesEmptyState.

This change affects all 4 homepage sections that render error states: Tokens, Predictions, Perpetuals, and DeFi.

Changelog

CHANGELOG entry: Updated the error state icon on the homepage to a new no-connection illustration

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-538

Manual testing steps

Feature: Updated error state icon on homepage sections

  Scenario: user sees error state in light mode
    Given user is on the homepage in light mode
    And a section fails to load (e.g., Tokens, Predictions)

    When the error state is displayed
    Then the new no-connection illustration is shown (light variant)
    And the Retry button is visible below the illustration

  Scenario: user sees error state in dark mode
    Given user is on the homepage in dark mode
    And a section fails to load

    When the error state is displayed
    Then the new no-connection illustration is shown (dark variant)

Screenshots/Recordings

Verified on device in both light and dark modes.

Before

Flat WifiOff icon from the design system.

After

New themed no-connection illustration (72x72) with light/dark variants.

w

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

Low Risk
Low risk UI-only change that swaps a design-system icon for themed PNG assets in the shared homepage ErrorState component. Main risk is limited to missing/incorrect asset bundling or sizing regressions across sections that reuse this component.

Overview
Updates the shared homepage ErrorState UI to render a themed no-connection PNG illustration (light/dark via useAssetFromTheme) instead of the design-system WifiOff icon.

Adds react-native Image rendering with Tailwind-based sizing (72x72) and removes the unused icon imports, affecting all homepage sections that reuse ErrorState.

^{Written by Cursor Bugbot for commit d58c424. This will update automatically on new commits. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR makes a purely visual change to the ErrorState component used in Homepage sections. The change replaces a WifiOff icon with a theme-aware image (light/dark mode support) for the error state illustration.

Key observations:

1. Visual-only change: The modification is cosmetic - swapping an Icon component for an Image component with the same purpose (showing a "no connection" visual)
2. No functional changes: The component's behavior, props, and retry logic remain unchanged
3. Error state is an edge case: The ErrorState component is only displayed when API calls fail. E2E tests use mocked successful API responses, so they never trigger error states
4. No E2E tests target this component: Searching for "ErrorState" in spec files returned no matches. The component has unit tests but no E2E coverage
5. Used in Homepage sections: The component is imported by PerpsSection, PredictionsSection, TokensSection, DeFiSection, and TrendingTokensFullView, but these sections only show the error state on API failures

Since E2E tests mock successful API responses and don't test error scenarios, and this is a purely visual change with no functional impact, no E2E tags are needed to validate this change.

Performance Test Selection:
This change replaces a small icon with a small image (72x72px) in an error state component. The performance impact is negligible: 1) The error state is rarely shown (only on API failures), 2) The image is small and uses resizeMode='contain', 3) No changes to rendering logic, data loading, or state management. No performance tests are needed.

View GitHub Actions results

[sonarqubecloud]

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