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

## **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**

```gherkin
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.

<img width="300"
src="https://github.com/user-attachments/assets/49379087-1929-43a2-9dee-3a7566df73a7"
/>


### **After**

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

<img width="300"
src="https://github.com/user-attachments/assets/e5b51582-2e93-4f44-a45f-49f36451571c"
/>w

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!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`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d58c424. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/components/Views/Homepage/components/ErrorState/ErrorState.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
+import { Image } from 'react-native';
 import {
   Box,
   Text,
-  Icon,
-  IconName,
-  IconSize,
-  IconColor,
   TextVariant,
   TextColor,
   BoxAlignItems,
   Button,
   ButtonVariant,
   ButtonSize,
 } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { useAssetFromTheme } from '../../../../../util/theme';
 import { strings } from '../../../../../../locales/i18n';
+import errorStateLight from '../../../../../images/error-state-no-connection-light.png';
+import errorStateDark from '../../../../../images/error-state-no-connection-dark.png';
 
 interface ErrorStateProps {
   /** Text describing what failed to load (e.g., "Unable to load predictions") */
@@ -24,9 +25,12 @@ interface ErrorStateProps {
 
 /**
  * Generic error state for homepage sections.
- * Shows a wifi-off icon, error message, and a retry button.
+ * Shows a no-connection illustration, error message, and a retry button.
  */
 const ErrorState: React.FC<ErrorStateProps> = ({ title, onRetry }) => {
+  const tw = useTailwind();
+  const noConnectionImage = useAssetFromTheme(errorStateLight, errorStateDark);
+
   const handleRetry = () => {
     try {
       const result = onRetry();
@@ -42,10 +46,10 @@ const ErrorState: React.FC<ErrorStateProps> = ({ title, onRetry }) => {
 
   return (
     <Box alignItems={BoxAlignItems.Center} gap={3} padding={4}>
-      <Icon
-        name={IconName.WifiOff}
-        size={IconSize.Xl}
-        color={IconColor.IconMuted}
+      <Image
+        source={noConnectionImage}
+        resizeMode="contain"
+        style={tw.style('w-[72px] h-[72px]')}
       />
       <Text
         variant={TextVariant.BodyMd}