Skip to content

Commit e9abd90

Browse files
committed
fix(TMCU-538): update error state icon to new no-connection illustration
Replace the flat IconName.WifiOff design system icon in the shared ErrorState component with themed PNG illustrations matching the new design from Vinay. Uses useAssetFromTheme to switch between light and dark variants, following the same pattern as CollectiblesEmptyState. Affects all homepage sections that show error states: Tokens, Predictions, Perpetuals, and DeFi. Fixes: TMCU-538
1 parent d9d8e01 commit e9abd90

3 files changed

Lines changed: 13 additions & 9 deletions

File tree

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import React from 'react';
2+
import { Image } from 'react-native';
23
import {
34
Box,
45
Text,
5-
Icon,
6-
IconName,
7-
IconSize,
8-
IconColor,
96
TextVariant,
107
TextColor,
118
BoxAlignItems,
129
Button,
1310
ButtonVariant,
1411
ButtonSize,
1512
} from '@metamask/design-system-react-native';
13+
import { useTailwind } from '@metamask/design-system-twrnc-preset';
14+
import { useAssetFromTheme } from '../../../../../util/theme';
1615
import { strings } from '../../../../../../locales/i18n';
16+
import errorStateLight from '../../../../../images/error-state-no-connection-light.png';
17+
import errorStateDark from '../../../../../images/error-state-no-connection-dark.png';
1718

1819
interface ErrorStateProps {
1920
/** Text describing what failed to load (e.g., "Unable to load predictions") */
@@ -24,9 +25,12 @@ interface ErrorStateProps {
2425

2526
/**
2627
* Generic error state for homepage sections.
27-
* Shows a wifi-off icon, error message, and a retry button.
28+
* Shows a no-connection illustration, error message, and a retry button.
2829
*/
2930
const ErrorState: React.FC<ErrorStateProps> = ({ title, onRetry }) => {
31+
const tw = useTailwind();
32+
const noConnectionImage = useAssetFromTheme(errorStateLight, errorStateDark);
33+
3034
const handleRetry = () => {
3135
try {
3236
const result = onRetry();
@@ -42,10 +46,10 @@ const ErrorState: React.FC<ErrorStateProps> = ({ title, onRetry }) => {
4246

4347
return (
4448
<Box alignItems={BoxAlignItems.Center} gap={3} padding={4}>
45-
<Icon
46-
name={IconName.WifiOff}
47-
size={IconSize.Xl}
48-
color={IconColor.IconMuted}
49+
<Image
50+
source={noConnectionImage}
51+
resizeMode="contain"
52+
style={tw.style('w-[72px] h-[72px]')}
4953
/>
5054
<Text
5155
variant={TextVariant.BodyMd}
5.04 KB
Loading
5.11 KB
Loading

0 commit comments

Comments
 (0)