feat(referral): add hardware records page with new UI components #9595
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
- Add getHardwareRecords API to fetch hardware order records - Create HardwareSalesRewardHeader component with stats cards - Add HardwareRecordCard for mobile view - Add HardwareRecordTable for desktop view - Add HardwareRecordTimeline and StatusBadge components - Remove old Sales tab, keep only Records view - Add type definitions for hardware records
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Use percentage-based column widths instead of flex to ensure consistent alignment between table header and row content across different content sizes.
Update reward amount colors to match Figma design by status instead of positive/negative value. Completed shows green, Undistributed shows blue, Refunded shows gray, and Pending shows yellow. Also fix OrderPlaced timeline icon to use bgCautionStrong color.
Extract HardwareRecordsList into a separate component file for better code organization. Update timeline section to use neutral/2 border color on both top and bottom edges per design spec.
limichange
requested review from
ezailWang,
huhuanming,
originalix,
revan-zhang and
sidmorizon
as code owners
Format nextDistribution date using 'MMMM d' pattern for better readability (e.g., "January 10" instead of "2026-01-10"). Extract duplicated StatCard rendering into reusable renderSecondaryCards function to reduce code duplication between wide and narrow screen layouts.
originalix
previously approved these changes
Jan 8, 2026
Add a "Details" heading above the hardware records list using $headingLg typography. Also reorganize HardwareSalesRewardHeader into its own directory for better code organization.
Implement infinite scroll for hardware records list using cursor pagination. The cursor is the last item's _id, and pagination stops when fewer than 10 items are returned.
Hide date when empty and adjust chevron icon rotation for better UX.
Add new translation keys for perpetual trading features: - dexmarket.perpetual_trading_title for token perpetual trading page - perp.tab_favs for favorites tab Remove unused defi.platform_bonus key with typo in namespace.
originalix
approved these changes
Jan 8, 2026
yikZero
approved these changes
Jan 9, 2026
huhuanming
approved these changes
Jan 9, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
getHardwareRecordsto fetch hardware order recordsHardwareSalesRewardHeader- Stats cards showing total rewards, undistributed, and pending amountsHardwareRecordCard- Mobile card view for order recordsHardwareRecordTable- Desktop table view for order recordsHardwareRecordTimeline- Order history timelineHardwareRecordStatusBadge- Status badge componentTest plan