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

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

- Adds correct empty state when no search results are found 

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:
[PRED-295](https://consensyssoftware.atlassian.net/browse/PRED-295)

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<img width="420" alt="Simulator Screenshot - iPhone 16 Pro Max -
2025-11-13 at 10 06 02"
src="https://github.com/user-attachments/assets/5d0d9aec-49e0-4e48-acf7-28ed878dda32"
/>

<img width="420" alt="Simulator Screenshot - iPhone 16 Pro Max -
2025-11-13 at 09 57 57"
src="https://github.com/user-attachments/assets/927646d3-cab1-4144-8da6-1c4afd1e3831"
/>

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


[PRED-295]:
https://consensyssoftware.atlassian.net/browse/PRED-295?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a localized, themed empty state for no search results in Predict
market list, updates styles/tests, and adds i18n strings and assets.
> 
> - **Predict UI**:
> - **Search Empty State**: When `q` is present and no results, render
themed illustration and message in
`app/components/UI/Predict/components/MarketListContent/MarketListContent.tsx`
using `useAssetFromTheme`, `PredictionsLight/Dark` SVGs, and
`strings('predict.search_no_markets_found', { q })`.
> - **Default Empty State**: Replace hardcoded copy with
`strings('predict.search_empty_state', { category })`.
> - **Styles**: Add `emptySearchContainer` in
`MarketListContent.styles.ts`.
> - **Tests**:
> - Update `MarketListContent.test.tsx` to support `q` prop, and add
test asserting search empty state (icon + localized text) via
`getPredictMarketListSelector.emptyState()`.
> - **Assets & i18n**:
> - Add `predictions-no-search-results-light.svg` and
`predictions-no-search-results-dark.svg`.
> - Add `predict.search_empty_state` and
`predict.search_no_markets_found` to `locales/languages/en.json`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2f19186. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: kevinbluer

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>
     );