feat: Improve Predict Activity UI #22331
Merged
+342
−166
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Replace FlatList with SectionList for date-based grouping - Group transactions day-by-day (Today, Yesterday, specific dates) - Add date grouping helper function with timestamp conversion - Update section header styling (BodySm, text-alternative, font-medium) - Add localization strings for date labels (today, yesterday, this_week, this_month)
- Cache date calculations (today/yesterday) to avoid repeated Date object creation - Wrap renderSectionHeader, renderItem, and keyExtractor in useCallback to prevent re-creation - Optimize section building with single-pass grouping instead of multiple sorts - Remove filter(Boolean) to avoid intermediate array creation - Remove nestedScrollEnabled prop (not needed) - Add SectionList performance props (removeClippedSubviews, maxToRenderPerBatch, etc.) - Pass cached timestamps to getDateGroupLabel to reduce redundant calculations
- Change date format from 'Oct 5, 2025' to 'Oct 27' (no year) to match Perps - Fix date formatting using Intl.DateTimeFormat instead of toLocaleDateString - Update section header font size from BodySm to BodyMd (16px) - Update section header font weight from medium (500) to semibold (600) - Update section header padding to px-2, pt-3 to match Perps - Enable sticky section headers for better scroll experience - Add back item wrapper with py-1 padding - Add back contentContainerStyle padding - Maintain consistent UX between Predict and Perps transaction views
andrepimenta
changed the title
- Add timestamp field to mock activity entries in PredictTransactionsView test - Remove expectation for detail text in PredictActivity test (detail is not rendered) - All tests now passing
andrepimenta
added
No QA Needed
- Filter claim activities after mapping to work with normalized data - Only show claims where user actually won (amount > 0) - Lost positions (amount = 0) are filtered out as they're just technical clearing - Update tests to verify filtering behavior
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
- API already returns activities in chronological order (newest first) - Removes redundant sort operation for better performance
…View - Map activity to items and group by date in one iteration - Eliminates intermediate array allocation - Improves performance for larger activity lists
…Mask/metamask-mobile into improve/predict/activity-ui
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| if (label !== todayLabel && label !== yesterdayLabel) { | ||
| sections.push({ title: label, data: groupedByDate[label] }); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Bug: Chronology Broken for Date Sections
Date sections beyond Today and Yesterday aren't sorted chronologically. The sectionOrder array preserves the order dates are first encountered while iterating through activities, so if activities aren't pre-sorted by timestamp, sections will appear in encounter order rather than newest-to-oldest. This breaks the intended chronological ordering described in the PR and code comments.
|
matallui
approved these changes
Nov 10, 2025
metamaskbot
added
the
release-7.60.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Predict Transactions View - Date Grouping Feature
📋 Overview
This PR enhances the Predict transactions view by adding date-based grouping and implementing performance optimizations to match the UX patterns established in the Perps feature. It also filters out claim winnings for lost markets.
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-11-07.at.17.38.06.mov
CHANGELOG entry: null
✨ What's New
1. Date Grouping
2. Performance Improvements
removeClippedSubviews3. UX Consistency
🎯 User Benefits
📊 Technical Changes
Architecture
Key Files Modified
PredictTransactionsView.tsxlocales/languages/en.jsonImplementation Details
Date Grouping Logic:
Performance Optimizations:
useCallbacknestedScrollEnabledSection Header Styling:
🧪 Testing
Manual Test Coverage
✅ Date Grouping Accuracy
✅ Performance
✅ Edge Cases
✅ Cross-Platform
Test Scenarios
📸 Screenshots
Before
After
🚀 Performance Metrics
📝 Code Quality
🔄 Git Commits
🎨 Design System Usage
Components Used:
Box- Layout containerTextwithTextVariant.BodyMd- Section headersSectionList- Native grouped listuseTailwind()- Styling hookStyling:
twClassNamefor static stylestw.style()for dynamic stylestext-alternative)px-2,pt-3)🔗 Related Features
This implementation follows the same pattern as:
PerpsTransactionsView.tsx)formatDateSectionutility📚 Documentation
Date Grouping Function
Section Structure
🔮 Future Enhancements
Potential improvements noted in code:
None. This is a purely additive enhancement with backward compatibility.
🐛 Bug Fixes Included
📦 Dependencies
No new dependencies added. Uses existing:
react-nativeSectionList@metamask/design-system-react-native@metamask/design-system-twrnc-preset🙏 Acknowledgments
📞 Questions?
For questions or concerns about this PR:
Ready to merge after:
Note
Groups Predict transactions by date with SectionList, simplifies PredictActivity UI, and filters Polymarket claim activities with zero payout.
SectionListwith date-based grouping (Today/Yesterday/MMM D) and sticky headers.nestedScrollEnabled.detailline from list item; neutralize amount color and tweak avatar layout/sizing.isCredit/amountColor).parsePolymarketActivityto mapREDEEMwith payout toclaimWinningsand filter entries withusdcSize === 0.timestampand required entry fields; add zero-payout filter case.predict.transactions.todayandpredict.transactions.yesterdaystrings.Written by Cursor Bugbot for commit 59049ef. This will update automatically on new commits. Configure here.