feat: standardise feedback states across wallet screens

Create reusable ErrorState component and export EmptyState/ErrorState
from the component index. Apply all three state components (LoadingState,
EmptyState, ErrorState) to the Recent Activity section on the balance
screen, replacing ad-hoc inline markup with consistent, accessible
feedback surfaces. Add tests for ErrorState (5) and EmptyState (6).

Closes #16

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Mozez155

__tests__/EmptyState.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render, fireEvent } from '@testing-library/react-native';
+
+jest.mock('@react-native-async-storage/async-storage', () => ({
+  getItem: jest.fn(async () => null),
+  setItem: jest.fn(async () => {}),
+}));
+
+import { EmptyState } from '../src/components/EmptyState';
+
+describe('EmptyState', () => {
+  it('renders the required title', () => {
+    const { getByText } = render(<EmptyState title="No contacts yet" />);
+
+    expect(getByText('No contacts yet')).toBeTruthy();
+  });
+
+  it('renders an optional message when provided', () => {
+    const { getByText } = render(
+      <EmptyState title="No activity yet" message="Your payments will appear here." />
+    );
+
+    expect(getByText('Your payments will appear here.')).toBeTruthy();
+  });
+
+  it('does not render a message node when none is provided', () => {
+    const { queryByText } = render(<EmptyState title="No items" />);
+
+    expect(queryByText('Your payments will appear here.')).toBeNull();
+  });
+
+  it('renders a custom icon', () => {
+    const { getByTestId } = render(
+      <EmptyState
+        title="Empty"
+        icon={<Text testID="custom-icon">icon</Text>}
+      />
+    );
+
+    expect(getByTestId('custom-icon')).toBeTruthy();
+  });
+
+  it('renders the action button and fires onPress', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <EmptyState
+        title="No contacts yet"
+        action={{ label: 'Add Contact', onPress }}
+      />
+    );
+
+    fireEvent.press(getByText('Add Contact'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render an action button when no action is provided', () => {
+    const { queryByText } = render(<EmptyState title="Empty" />);
+
+    expect(queryByText('Add Contact')).toBeNull();
+  });
+});

__tests__/ErrorState.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+jest.mock('@react-native-async-storage/async-storage', () => ({
+  getItem: jest.fn(async () => null),
+  setItem: jest.fn(async () => {}),
+}));
+
+jest.mock('lucide-react-native', () => ({
+  AlertTriangle: () => null,
+}));
+
+import { ErrorState } from '../src/components/ErrorState';
+
+describe('ErrorState', () => {
+  it('renders with the default title and alert role', () => {
+    const { getByTestId } = render(<ErrorState />);
+
+    const node = getByTestId('error-state');
+    expect(node.props.accessibilityRole).toBe('alert');
+    expect(node.props.accessibilityLabel).toBe('Something went wrong');
+  });
+
+  it('renders a custom title and message', () => {
+    const { getByText } = render(
+      <ErrorState title="Could not load data" message="Pull down to try again." />
+    );
+
+    expect(getByText('Could not load data')).toBeTruthy();
+    expect(getByText('Pull down to try again.')).toBeTruthy();
+  });
+
+  it('does not render a message when none is provided', () => {
+    const { queryByText } = render(<ErrorState title="Failed" />);
+
+    expect(queryByText('Pull down to try again.')).toBeNull();
+  });
+
+  it('renders the action button and fires onPress', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <ErrorState
+        title="Error"
+        action={{ label: 'Retry', onPress }}
+      />
+    );
+
+    fireEvent.press(getByText('Retry'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('accepts a caller-supplied testID', () => {
+    const { getByTestId } = render(
+      <ErrorState testID="recent-activity-error" />
+    );
+
+    expect(getByTestId('recent-activity-error')).toBeTruthy();
+  });
+});

app/(tabs)/index.tsx

@@ -11,6 +11,9 @@ import { NetworkStateBanner } from '../../src/components/NetworkStateBanner';
 import { WalletEmptyState } from '../../src/components/WalletEmptyState';
 import { BalanceDisplay } from '../../src/components/BalanceDisplay';
 import { FundingStatusBanner } from '../../src/components/FundingStatusBanner';
+import { LoadingState } from '../../src/components/LoadingState';
+import { EmptyState } from '../../src/components/EmptyState';
+import { ErrorState } from '../../src/components/ErrorState';
 import { useNetworkState } from '../../src/hooks/useNetworkState';
 import { Clock } from 'lucide-react-native';
 import { BackupReminderModal } from '../../src/components/BackupReminderModal';
@@ -127,11 +130,27 @@ export default function HomeScreen() {
         </View>
 
         <View style={styles.transactionsList}>
-          {recentTransactions.length === 0 && !isLoading && (
-            <View style={styles.emptyState}>
-              <Clock color={colors.textMuted} size={48} style={{ marginBottom: SIZES.md }} />
-              <Text style={styles.emptyText}>No recent transactions</Text>
-            </View>
+          {recentTransactions.length === 0 && isLoading && (
+            <LoadingState
+              message="Loading transactions…"
+              testID="recent-activity-loading"
+            />
+          )}
+          {recentTransactions.length === 0 && !isLoading && error && (
+            <ErrorState
+              icon={<Clock color={colors.error} size={48} />}
+              title="Could not load transactions"
+              message="Pull down to try again."
+              testID="recent-activity-error"
+            />
+          )}
+          {recentTransactions.length === 0 && !isLoading && !error && (
+            <EmptyState
+              icon={<Clock color={colors.textMuted} size={48} />}
+              title="No recent transactions"
+              message="Your payments will appear here once you send or receive XLM."
+              testID="recent-activity-empty"
+            />
           )}
           {recentTransactions.map((tx, index) => (
             <TransactionListItem
@@ -189,12 +208,4 @@ const createStyles = (colors: ThemeColors) => StyleSheet.create({
     padding: SIZES.md,
     marginBottom: SIZES.xxl,
   },
-  emptyState: {
-    padding: SIZES.xl,
-    alignItems: 'center',
-  },
-  emptyText: {
-    color: colors.textMuted,
-    fontSize: 14,
-  },
 });

src/components/ErrorState.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { AlertTriangle } from 'lucide-react-native';
+import { SIZES, ThemeColors } from '../constants/theme';
+import { useTheme } from '../hooks/useTheme';
+import { Button } from './Button';
+
+interface ErrorStateAction {
+  label: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline';
+}
+
+export interface ErrorStateProps {
+  icon?: React.ReactNode;
+  title?: string;
+  message?: string;
+  action?: ErrorStateAction;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const ErrorState: React.FC<ErrorStateProps> = ({
+  icon,
+  title = 'Something went wrong',
+  message,
+  action,
+  style,
+  testID = 'error-state',
+}) => {
+  const { colors } = useTheme();
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityRole="alert"
+      accessibilityLabel={title}
+      testID={testID}
+    >
+      <View style={styles.iconWrapper}>
+        {icon ?? <AlertTriangle color={colors.error} size={48} />}
+      </View>
+      <Text style={styles.title}>{title}</Text>
+      {message ? <Text style={styles.message}>{message}</Text> : null}
+      {action ? (
+        <Button
+          title={action.label}
+          onPress={action.onPress}
+          variant={action.variant ?? 'outline'}
+          style={styles.action}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const createStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: SIZES.xl,
+    },
+    iconWrapper: {
+      marginBottom: SIZES.md,
+    },
+    title: {
+      color: colors.textPrimary,
+      fontSize: 18,
+      fontWeight: 'bold',
+      textAlign: 'center',
+      marginBottom: SIZES.xs,
+    },
+    message: {
+      color: colors.textSecondary,
+      fontSize: 14,
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    action: {
+      marginTop: SIZES.lg,
+      minWidth: 140,
+    },
+  });

src/components/index.ts

@@ -5,6 +5,9 @@ export { ReviewConfirm } from "./ReviewConfirm";
 export type { ReviewConfirmProps, ReviewItem } from "./ReviewConfirm";
 export { LoadingState } from "./LoadingState";
 export type { LoadingStateProps } from "./LoadingState";
+export { EmptyState } from "./EmptyState";
+export { ErrorState } from "./ErrorState";
+export type { ErrorStateProps } from "./ErrorState";
 export { ScreenHeader } from "./ScreenHeader";
 export { OfflineBanner } from "./OfflineBanner";
 export { AsyncActionButton } from "./AsyncActionButton";