From 8b11ec2d7b507c3d3c6637bf9f79f2376f2d8385 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caain=C3=A3=20Jeronimo?= Date: Wed, 15 Jul 2026 12:25:45 -0300 Subject: [PATCH 1/9] fix: gap on predict home --- .../Predict/views/PredictHome/PredictHome.tsx | 60 ++++++++++--------- .../PredictCategoriesSection.tsx | 2 +- .../PredictLiveNowSection.tsx | 2 +- .../PredictPopularTodaySection.tsx | 2 +- .../PredictTrendingSection.tsx | 2 +- 5 files changed, 36 insertions(+), 32 deletions(-) diff --git a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx index fafe7800800..73051fdc3ef 100644 --- a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx +++ b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx @@ -166,34 +166,38 @@ const PredictHome: React.FC = () => { - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/app/components/UI/Predict/views/PredictHome/components/PredictCategoriesSection/PredictCategoriesSection.tsx b/app/components/UI/Predict/views/PredictHome/components/PredictCategoriesSection/PredictCategoriesSection.tsx index 66bfa1e230e..1f5490362d7 100644 --- a/app/components/UI/Predict/views/PredictHome/components/PredictCategoriesSection/PredictCategoriesSection.tsx +++ b/app/components/UI/Predict/views/PredictHome/components/PredictCategoriesSection/PredictCategoriesSection.tsx @@ -74,7 +74,7 @@ const PredictCategoriesSection: React.FC = ({ ); return ( - + = ({ } return ( - + {/* "See all" navigates to the generic PredictFeedView (feedId 'live'). */} = ({ } return ( - + = ({ }, [navigation]); return ( - + {/* "See all" navigates to the generic PredictFeedView (feedId 'trending'). Passing `onPress` is what renders the chevron + touchable. */} Date: Wed, 15 Jul 2026 12:27:13 -0300 Subject: [PATCH 2/9] fix: live now header --- .../components/PredictLiveNowSection/PredictLiveNowSection.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/UI/Predict/views/PredictHome/components/PredictLiveNowSection/PredictLiveNowSection.tsx b/app/components/UI/Predict/views/PredictHome/components/PredictLiveNowSection/PredictLiveNowSection.tsx index ebaf1e9f8b4..7a160b263a2 100644 --- a/app/components/UI/Predict/views/PredictHome/components/PredictLiveNowSection/PredictLiveNowSection.tsx +++ b/app/components/UI/Predict/views/PredictHome/components/PredictLiveNowSection/PredictLiveNowSection.tsx @@ -154,6 +154,7 @@ const PredictLiveNowSection: React.FC = ({ title={strings('predict.home.live_now_title')} isInteractive onPress={handleSeeAll} + twClassName="p-0 mb-2" /> From c518b0c4c2649b9257bb5a382f7554012b5060c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caain=C3=A3=20Jeronimo?= Date: Wed, 15 Jul 2026 12:36:17 -0300 Subject: [PATCH 3/9] fix: predict title header size --- app/components/UI/Predict/views/PredictHome/PredictHome.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx index 73051fdc3ef..67e6700ac18 100644 --- a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx +++ b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx @@ -160,7 +160,7 @@ const PredictHome: React.FC = () => { > {strings('wallet.predict')} From 92fd86a731020d4da82d1cfad3ecbc607982de70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caain=C3=A3=20Jeronimo?= Date: Wed, 15 Jul 2026 12:43:54 -0300 Subject: [PATCH 4/9] fix: popular today text color --- .../PredictPopularTodaySection/PredictPopularTodaySection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx b/app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx index a96d3b4c28a..a48c5677cb7 100644 --- a/app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx +++ b/app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx @@ -243,7 +243,7 @@ const PredictPopularTodaySection: React.FC = ({ > {label} From 01d7288a08d68dc82d82d9db7763506c82e4bf6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caain=C3=A3=20Jeronimo?= Date: Wed, 15 Jul 2026 13:46:24 -0300 Subject: [PATCH 5/9] fix: trending gap --- .../PredictTrendingSection/PredictTrendingSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/Predict/views/PredictHome/components/PredictTrendingSection/PredictTrendingSection.tsx b/app/components/UI/Predict/views/PredictHome/components/PredictTrendingSection/PredictTrendingSection.tsx index 4555084d451..d9dc04c7a7f 100644 --- a/app/components/UI/Predict/views/PredictHome/components/PredictTrendingSection/PredictTrendingSection.tsx +++ b/app/components/UI/Predict/views/PredictHome/components/PredictTrendingSection/PredictTrendingSection.tsx @@ -90,7 +90,7 @@ const PredictTrendingSection: React.FC = ({ ) : ( - + {markets.map((market) => ( Date: Wed, 15 Jul 2026 13:51:04 -0300 Subject: [PATCH 6/9] fix: remove bottom black bar --- app/components/UI/Predict/views/PredictHome/PredictHome.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx index 67e6700ac18..d7abe1ebc7d 100644 --- a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx +++ b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx @@ -129,7 +129,7 @@ const PredictHome: React.FC = () => { return ( Date: Wed, 15 Jul 2026 14:32:42 -0300 Subject: [PATCH 7/9] fix: chip list gap --- .../UI/Predict/components/PredictChipList/PredictChipList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/Predict/components/PredictChipList/PredictChipList.tsx b/app/components/UI/Predict/components/PredictChipList/PredictChipList.tsx index 5fac42bc545..fd6a6f9cbb2 100644 --- a/app/components/UI/Predict/components/PredictChipList/PredictChipList.tsx +++ b/app/components/UI/Predict/components/PredictChipList/PredictChipList.tsx @@ -22,7 +22,7 @@ import { useChipScrollList } from './useChipScrollList'; export { calculateChipScrollX } from './calculateChipScrollX'; -const DEFAULT_CONTAINER_CLASS = 'pt-3 pb-4'; +const DEFAULT_CONTAINER_CLASS = 'pt-3 pb-3'; const DEFAULT_CHIP_CLASS = 'rounded-xl px-4 py-2'; const PredictChipList: React.FC = ({ From ede189e08a5d2361464314e191538e3d5b82d2dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caain=C3=A3=20Jeronimo?= Date: Wed, 15 Jul 2026 14:42:19 -0300 Subject: [PATCH 8/9] fix: not show filter list for live --- .../PredictFeedView/PredictFeedView.test.tsx | 7 ++++--- .../views/PredictFeedView/PredictFeedView.tsx | 15 +++++++++------ 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.test.tsx b/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.test.tsx index 0f28fb762a3..010b09aff15 100644 --- a/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.test.tsx +++ b/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.test.tsx @@ -295,7 +295,8 @@ describe('PredictFeedView', () => { expect(screen.getAllByText('Tennis').length).toBeGreaterThan(0); }); - it('hides the tab bar for a single-tab feed but still renders filters', () => { + it('hides the tab bar and filter list for a single-filter feed', () => { + mockRouteParams = { feedId: 'live' }; mockUsePredictFeedConfig.mockReturnValue( feedConfigResult({ feedId: 'live', @@ -321,8 +322,8 @@ describe('PredictFeedView', () => { screen.queryByTestId(PredictFeedViewSelectorsIDs.TABS), ).not.toBeOnTheScreen(); expect( - screen.getByTestId(PredictFeedViewSelectorsIDs.FILTERS), - ).toBeOnTheScreen(); + screen.queryByTestId(PredictFeedViewSelectorsIDs.FILTERS), + ).not.toBeOnTheScreen(); }); }); diff --git a/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.tsx b/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.tsx index f8525809aca..4c3fc33a3dd 100644 --- a/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.tsx +++ b/app/components/UI/Predict/views/PredictFeedView/PredictFeedView.tsx @@ -250,6 +250,7 @@ const PredictFeedView: React.FC = () => { })), [filters], ); + const showFilterList = chips.length >= 2; const handleEndReached = useCallback(() => { if (hasNextPage && !isFetchingNextPage) { @@ -391,12 +392,14 @@ const PredictFeedView: React.FC = () => { /> )} - + {showFilterList && ( + + )} {renderContent()} From 874723eb00bd6b75c91ec96627b18aaa730bf839 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caain=C3=A3=20Jeronimo?= Date: Wed, 15 Jul 2026 15:36:34 -0300 Subject: [PATCH 9/9] fix: live cards style --- .../PredictCryptoUpDownMarketCard.tsx | 69 +++++++++++-------- .../PredictMarketSportCard.test.tsx | 2 +- .../PredictMarketSportCard.tsx | 20 +++--- .../PredictSportScoreboard.test.tsx | 2 +- .../PredictSportScoreboard.tsx | 2 +- 5 files changed, 54 insertions(+), 41 deletions(-) diff --git a/app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx b/app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx index 0715641936a..050548de7ba 100644 --- a/app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx +++ b/app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx @@ -123,9 +123,8 @@ const CHART_REQUEST_DURATION_BY_RECURRENCE_MS: Record = { }; const PROGRESS_RING_SIZE = 54; const PROGRESS_RING_STROKE_WIDTH = 4; -const PROGRESS_RING_RADIUS = - (PROGRESS_RING_SIZE - PROGRESS_RING_STROKE_WIDTH) / 2; -const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_RADIUS; +const COMPACT_PROGRESS_RING_SIZE = 40; +const COMPACT_PROGRESS_RING_STROKE_WIDTH = 2; const CRYPTO_ACCENT_DEFAULT = 'rgb(245, 158, 11)'; const CRYPTO_ACCENT_BY_SYMBOL: Record = { BTC: 'rgb(247, 147, 26)', @@ -814,49 +813,62 @@ const ProgressLogo = React.memo( progress, color, trackColor, + compact, }: { imageUrl?: string; progress: number; color: string; trackColor: string; + compact?: boolean; }) => { const tw = useTailwind(); - const strokeDashoffset = PROGRESS_RING_CIRCUMFERENCE * (1 - progress); + const ringSize = compact ? COMPACT_PROGRESS_RING_SIZE : PROGRESS_RING_SIZE; + const strokeWidth = compact + ? COMPACT_PROGRESS_RING_STROKE_WIDTH + : PROGRESS_RING_STROKE_WIDTH; + const radius = (ringSize - strokeWidth) / 2; + const circumference = 2 * Math.PI * radius; + const strokeDashoffset = circumference * (1 - progress); return ( - + - + {imageUrl ? ( ); @@ -1354,9 +1367,15 @@ const PredictCryptoUpDownMarketCard: React.FC< > {cardTitle} + + Resets every {resetDuration} + - + - - Resets every {resetDuration} - diff --git a/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx b/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx index 8eb76d0beaa..40dcb3ce723 100644 --- a/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx +++ b/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx @@ -416,7 +416,7 @@ describe('PredictMarketSportCard', () => { { state: initialState }, ); - expect(getByText('Live')).toBeOnTheScreen(); + expect(getByText('LIVE')).toBeOnTheScreen(); expect(getByText('75’')).toBeOnTheScreen(); expect(getByText('0')).toBeOnTheScreen(); expect(getByText('1')).toBeOnTheScreen(); diff --git a/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx b/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx index b276d2caf07..bccfa93ccbf 100644 --- a/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx +++ b/app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx @@ -285,7 +285,7 @@ const PredictMarketSportCard: React.FC = ({ return ( = ({ )} - + = ({ {market.title} - + + + {showBuyButtons && ( {buttonItems.map((item) => ( diff --git a/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx b/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx index 47111c6e3ab..0d7ce40a3e4 100644 --- a/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx +++ b/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx @@ -170,7 +170,7 @@ describe('PredictSportScoreboard', () => { />, ); - expect(getByText('Live')).toBeOnTheScreen(); + expect(getByText('LIVE')).toBeOnTheScreen(); expect(getByText('25’')).toBeOnTheScreen(); }); diff --git a/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx b/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx index ddba612d49c..0c117120405 100644 --- a/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx +++ b/app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx @@ -202,7 +202,7 @@ const PredictSportScoreboard: React.FC = ({ fontWeight={FontWeight.Medium} color={TextColor.SuccessDefault} > - Live + LIVE