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 = ({ 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 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()} diff --git a/app/components/UI/Predict/views/PredictHome/PredictHome.tsx b/app/components/UI/Predict/views/PredictHome/PredictHome.tsx index fafe7800800..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 ( { > {strings('wallet.predict')} - - - - - - - - - - - - + + + + + + + + + + + + + + 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'). */} 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 b72b39fc3d8..a48c5677cb7 100644 --- a/app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx +++ b/app/components/UI/Predict/views/PredictHome/components/PredictPopularTodaySection/PredictPopularTodaySection.tsx @@ -183,7 +183,7 @@ const PredictPopularTodaySection: React.FC = ({ } return ( - + = ({ > {label} 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 30c545eaf7f..d9dc04c7a7f 100644 --- a/app/components/UI/Predict/views/PredictHome/components/PredictTrendingSection/PredictTrendingSection.tsx +++ b/app/components/UI/Predict/views/PredictHome/components/PredictTrendingSection/PredictTrendingSection.tsx @@ -57,7 +57,7 @@ const PredictTrendingSection: React.FC = ({ }, [navigation]); return ( - + {/* "See all" navigates to the generic PredictFeedView (feedId 'trending'). Passing `onPress` is what renders the chevron + touchable. */} = ({ ) : ( - + {markets.map((market) => (