chore(predict): Adds correct no search results found empty state

app/components/UI/Predict/components/MarketListContent/MarketListContent.styles.ts

@@ -24,6 +24,13 @@ const styleSheet = () =>
       width: '100%',
       padding: 16,
     },
+    emptySearchContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      marginTop: 42,
+      padding: 16,
+    },
     marketListContainer: {
       flex: 1,
       width: '100%',

app/components/UI/Predict/components/MarketListContent/MarketListContent.test.tsx

@@ -5,6 +5,8 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 import { PredictCategory, PredictMarket, Recurrence } from '../../types';
 import { usePredictMarketData } from '../../hooks/usePredictMarketData';
+import { strings } from '../../../../../../locales/i18n';
+import { getPredictMarketListSelector } from '../../../../../../e2e/selectors/Predict/Predict.selectors';
 
 // Mock animations to prevent act() warnings
 jest.mock('react-native/Libraries/Animated/Animated', () => {
@@ -172,13 +174,14 @@ const initialState = {
 function setupMarketListContentTest(
   marketDataOverrides = {},
   category: PredictCategory = 'trending',
+  q?: string,
 ) {
   jest.clearAllMocks();
   mockUsePredictMarketData.mockReturnValue({
     ...defaultMockReturn,
     ...marketDataOverrides,
   });
-  return renderWithProvider(<MarketListContent category={category} />, {
+  return renderWithProvider(<MarketListContent category={category} q={q} />, {
     state: initialState,
   });
 }
@@ -255,6 +258,26 @@ describe('MarketListContent', () => {
 
       expect(getByText('No crypto markets available')).toBeOnTheScreen();
     });
+
+    it('renders search empty state when query has no matching markets', () => {
+      const searchTerm = 'bitcoin';
+      const expectedEmptySearchText = strings(
+        'predict.search_no_markets_found',
+        { q: searchTerm },
+      );
+
+      const { getByText, getByTestId } = setupMarketListContentTest(
+        { marketData: [] },
+        'crypto',
+        searchTerm,
+      );
+
+      expect(
+        getByTestId(getPredictMarketListSelector.emptyState()),
+      ).toBeOnTheScreen();
+      expect(getByTestId('icon')).toBeOnTheScreen();
+      expect(getByText(expectedEmptySearchText)).toBeOnTheScreen();
+    });
   });
 
   describe('Data Rendering', () => {

app/components/UI/Predict/components/MarketListContent/MarketListContent.tsx

@@ -22,7 +22,10 @@ import PredictMarketSkeleton from '../PredictMarketSkeleton';
 import { getPredictMarketListSelector } from '../../../../../../e2e/selectors/Predict/Predict.selectors';
 import { ScrollCoordinator } from '../../types/scrollCoordinator';
 import PredictOffline from '../PredictOffline';
-
+import { strings } from '../../../../../../locales/i18n';
+import PredictionsDark from '../../../../../images/predictions-no-search-results-dark.svg';
+import PredictionsLight from '../../../../../images/predictions-no-search-results-light.svg';
+import { useAssetFromTheme } from '../../../../../util/theme';
 interface MarketListContentProps {
   q?: string;
   category: PredictCategory;
@@ -43,6 +46,10 @@ const MarketListContent: React.FC<MarketListContentProps> = ({
   scrollCoordinator,
 }) => {
   const { styles } = useStyles(styleSheet, {});
+  const ThemedPredictions = useAssetFromTheme(
+    PredictionsLight,
+    PredictionsDark,
+  );
   const tw = useTailwind();
   const {
     marketData,
@@ -115,14 +122,33 @@ const MarketListContent: React.FC<MarketListContentProps> = ({
     return <PredictOffline onRetry={handleRefresh} />;
   }
 
+  if (q && q.length > 0 && marketData.length === 0) {
+    return (
+      <Box
+        testID={getPredictMarketListSelector.emptyState()}
+        style={styles.emptySearchContainer}
+      >
+        <ThemedPredictions
+          testID="icon"
+          width={100}
+          height={100}
+          style={tw.style('mb-4')}
+        />
+        <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+          {strings('predict.search_no_markets_found', { q })}
+        </Text>
+      </Box>
+    );
+  }
+
   if (!marketData || marketData.length === 0) {
     return (
       <Box
         testID={getPredictMarketListSelector.emptyState()}
         style={styles.emptyContainer}
       >
         <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
-          No {category} markets available
+          {strings('predict.search_empty_state', { category })}
         </Text>
       </Box>
     );