From aa840266f81ceaecaf7929d4356ad4647a036202 Mon Sep 17 00:00:00 2001 From: Kevin Bluer Date: Thu, 13 Nov 2025 10:46:21 -0600 Subject: [PATCH] chore(predict): adds correct no search results found state --- .../MarketListContent.styles.ts | 7 ++++ .../MarketListContent.test.tsx | 25 ++++++++++- .../MarketListContent/MarketListContent.tsx | 30 ++++++++++++- .../predictions-no-search-results-dark.svg | 42 +++++++++++++++++++ .../predictions-no-search-results-light.svg | 42 +++++++++++++++++++ locales/languages/en.json | 2 + 6 files changed, 145 insertions(+), 3 deletions(-) create mode 100644 app/images/predictions-no-search-results-dark.svg create mode 100644 app/images/predictions-no-search-results-light.svg diff --git a/app/components/UI/Predict/components/MarketListContent/MarketListContent.styles.ts b/app/components/UI/Predict/components/MarketListContent/MarketListContent.styles.ts index 5dd05eca2af9..5f7290d2f3dd 100644 --- a/app/components/UI/Predict/components/MarketListContent/MarketListContent.styles.ts +++ b/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%', diff --git a/app/components/UI/Predict/components/MarketListContent/MarketListContent.test.tsx b/app/components/UI/Predict/components/MarketListContent/MarketListContent.test.tsx index c55befb2e1f6..2243a62c6fdd 100644 --- a/app/components/UI/Predict/components/MarketListContent/MarketListContent.test.tsx +++ b/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(, { + return renderWithProvider(, { 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', () => { diff --git a/app/components/UI/Predict/components/MarketListContent/MarketListContent.tsx b/app/components/UI/Predict/components/MarketListContent/MarketListContent.tsx index 665577e03ea1..02370a97176d 100644 --- a/app/components/UI/Predict/components/MarketListContent/MarketListContent.tsx +++ b/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 = ({ scrollCoordinator, }) => { const { styles } = useStyles(styleSheet, {}); + const ThemedPredictions = useAssetFromTheme( + PredictionsLight, + PredictionsDark, + ); const tw = useTailwind(); const { marketData, @@ -115,6 +122,25 @@ const MarketListContent: React.FC = ({ return ; } + if (q && q.length > 0 && marketData.length === 0) { + return ( + + + + {strings('predict.search_no_markets_found', { q })} + + + ); + } + if (!marketData || marketData.length === 0) { return ( = ({ style={styles.emptyContainer} > - No {category} markets available + {strings('predict.search_empty_state', { category })} ); diff --git a/app/images/predictions-no-search-results-dark.svg b/app/images/predictions-no-search-results-dark.svg new file mode 100644 index 000000000000..760b47afb595 --- /dev/null +++ b/app/images/predictions-no-search-results-dark.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/images/predictions-no-search-results-light.svg b/app/images/predictions-no-search-results-light.svg new file mode 100644 index 000000000000..221537b23841 --- /dev/null +++ b/app/images/predictions-no-search-results-light.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/locales/languages/en.json b/locales/languages/en.json index 72c24570edac..06bcc03cfd1b 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -1831,6 +1831,8 @@ }, "search_placeholder": "Search prediction markets", "search_cancel": "Cancel", + "search_empty_state": "No {{category}} markets available", + "search_no_markets_found": "No results found for \"{{q}}\"", "claim_button": "Claim", "markets_won": "Markets won", "won_markets_text": "Won {{count}} market{{s}}",