feat(gui): Pretty Monero transaction history#470
Conversation
WalkthroughA new Monero transaction UI is introduced, replacing the previous table-based transaction history with a date-grouped list and a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TransactionHistory
participant TransactionItem
participant ConfirmationsBadge
participant BlockchainExplorer
User->>TransactionHistory: View transactions
TransactionHistory->>TransactionItem: Render each transaction (grouped by date)
TransactionItem->>ConfirmationsBadge: Display confirmation status
User->>TransactionItem: Open menu
TransactionItem->>User: Show options (Copy TXID, View in Explorer)
User->>TransactionItem: Select "View in Explorer"
TransactionItem->>BlockchainExplorer: Open transaction details
Possibly related PRs
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
|
bugbot run |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
src-gui/src/renderer/components/theme.tsx (1)
193-195: Consider differentiating success.tint colors between themes.The success color tint is identical (
#4caf50) for both light and dark themes, while error colors have different tints. This might reduce visual distinction in different theme contexts.Consider using a lighter tint for the dark theme:
success: { main: "#4caf50", - tint: "#4caf50", + tint: "#70c491", },src-gui/src/renderer/components/pages/monero/components/ConfirmationsBadge.tsx (1)
22-37: Remove unnecessary fragment wrapper.The fragment wrapper around the label JSX is redundant and can be simplified.
- const label = ( - <> - <Box - sx={{ - display: "flex", - flexDirection: "row", - alignItems: "end", - gap: 0.4, - }} - > - <Typography variant="body2" sx={{ fontWeight: "bold" }}> - {confirmations} - </Typography> - <Typography variant="caption">/10</Typography> - </Box> - </> - ); + const label = ( + <Box + sx={{ + display: "flex", + flexDirection: "row", + alignItems: "end", + gap: 0.4, + }} + > + <Typography variant="body2" sx={{ fontWeight: "bold" }}> + {confirmations} + </Typography> + <Typography variant="caption">/10</Typography> + </Box> + );src-gui/src/renderer/components/pages/monero/components/TransactionItem.tsx (2)
81-91: Simplify the minus sign display logic.The current implementation uses grid positioning and opacity to conditionally show a minus sign, which is complex and may be confusing.
Consider a more straightforward approach:
- <Typography - variant="h6" - sx={{ - opacity: !isIncoming ? 1 : 0, - gridArea: "1 / 1", - fontWeight: "bold", - ...amountStyles, - }} - > - ‐ - </Typography> + {!isIncoming && ( + <Typography + variant="h6" + sx={{ + gridArea: "1 / 1", + fontWeight: "bold", + ...amountStyles, + }} + > + ‐ + </Typography> + )}
136-139: Add error handling for clipboard operations.The clipboard write operation can fail in certain browser contexts or due to permissions.
onClick={() => { - navigator.clipboard.writeText(transaction.tx_hash); - setMenuAnchorEl(null); + navigator.clipboard.writeText(transaction.tx_hash).catch((err) => { + console.error("Failed to copy transaction ID:", err); + }); + setMenuAnchorEl(null); }}src-gui/src/renderer/components/other/Units.tsx (1)
40-47: Consider performance implications of inline Box components.Using
Boxcomponents with inline display for styling adds DOM elements and may impact performance in lists with many amount displays.Consider using
Typographycomponents withcomponent="span"instead:- <Box sx={{ display: "inline", ...amountStyles }}> - {amount != null ? amount.toFixed(fixedPrecision) : "?"} - </Box>{" "} - <Box sx={{ display: "inline", ...labelStyles }}> - {unit} - {parenthesisText != null ? ` (${parenthesisText})` : null} - </Box> + <Typography component="span" sx={amountStyles}> + {amount != null ? amount.toFixed(fixedPrecision) : "?"} + </Typography>{" "} + <Typography component="span" sx={labelStyles}> + {unit} + {parenthesisText != null ? ` (${parenthesisText})` : null} + </Typography>src-gui/src/renderer/components/pages/monero/components/TransactionHistory.tsx (1)
1-1: Remove unused import.The
Paperimport from Material-UI is not used in this component.-import { Typography, Box, Paper } from "@mui/material"; +import { Typography, Box } from "@mui/material";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
monero-sys/monero(1 hunks)src-gui/src/renderer/components/other/Units.tsx(6 hunks)src-gui/src/renderer/components/pages/monero/components/ConfirmationsBadge.tsx(1 hunks)src-gui/src/renderer/components/pages/monero/components/TransactionHistory.tsx(1 hunks)src-gui/src/renderer/components/pages/monero/components/TransactionItem.tsx(1 hunks)src-gui/src/renderer/components/pages/monero/components/WalletOverview.tsx(1 hunks)src-gui/src/renderer/components/theme.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src-gui/src/renderer/components/other/Units.tsx (1)
src-gui/src/utils/conversionUtils.ts (1)
piconerosToXmr(14-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cursor BugBot
🔇 Additional comments (11)
monero-sys/monero (1)
1-1: Submodule bump—double-check downstream build & ABI surfaceThe pointer change itself is trivial, but the new Monero core commit may introduce breaking ABI or consensus changes.
Please ensure:
• CI runsgit submodule update --init --recursiveso the new revision is actually fetched.
•monero-sysstill compiles (Cargo/CMake) without additional flags.
• FFI surface (extern "C"symbols) used by the GUI hasn’t changed—run your integration tests.If everything passes, the bump is good to merge.
src-gui/src/renderer/components/pages/monero/components/WalletOverview.tsx (1)
75-75: Clean implementation of the new tooltip control feature.The addition of
disableTooltipprop effectively leverages the enhancedPiconeroAmountcomponent functionality to improve the UI experience for balance display.src-gui/src/renderer/components/theme.tsx (1)
21-30: Well-structured palette extension for enhanced theming.The addition of the optional
tintproperty toPaletteColorandPaletteColorOptionsinterfaces provides good flexibility for semantic color variations.src-gui/src/renderer/components/pages/monero/components/ConfirmationsBadge.tsx (1)
7-50: Well-implemented confirmation badge with clear visual states.The component effectively communicates confirmation status through appropriate color coding and progressive disclosure. The logic properly handles the three confirmation states with suitable Material-UI components.
src-gui/src/renderer/components/pages/monero/components/TransactionItem.tsx (1)
26-155: Well-structured transaction item with comprehensive functionality.The component effectively displays transaction information with proper direction indicators, amount styling, and interactive features. The menu implementation provides useful transaction exploration capabilities.
src-gui/src/renderer/components/other/Units.tsx (3)
13-15: Excellent enhancement to component flexibility.The addition of styling props (
labelStyles,amountStyles) and tooltip control (disableTooltip) significantly improves the reusability and customization of the amount display components.Also applies to: 22-24
38-48: Well-implemented conditional rendering with styling support.The refactored content structure cleanly separates the styled elements and provides proper conditional tooltip wrapping. The use of
Boxcomponents withdisplay: "inline"maintains the inline layout while enabling styling.
111-113: Consistent prop propagation through component hierarchy.The new props are properly propagated through
MoneroAmountandPiconeroAmounttoAmountWithUnit, maintaining a clean component interface.Also applies to: 129-131, 195-197, 209-211
src-gui/src/renderer/components/pages/monero/components/TransactionHistory.tsx (3)
13-17: Well-structured interface definition.The
TransactionGroupinterface is well-defined with clear property names and appropriate types for the date grouping functionality.
29-38: Efficient transaction grouping implementation.The date grouping logic is well-implemented using lodash and dayjs. The approach of grouping by date and sorting within groups provides a good user experience for transaction history.
Note: For large transaction datasets, consider implementing pagination or virtualization if performance becomes a concern.
40-60: Clean and well-structured rendering implementation.The component rendering logic is well-organized with:
- Proper use of Material-UI components and styling system
- Clear visual hierarchy with date headers and transaction lists
- Appropriate use of flexbox for responsive layout
- Correct key props for React reconciliation
- Good semantic structure for accessibility
The refactor from table-based to grouped list layout significantly improves the user experience.
| { | ||
| props: { size: "tiny" }, | ||
| style: { | ||
| fontSize: "0.75rem", | ||
| fontWeight: 500, | ||
| padding: "4px 8px", | ||
| minHeight: "24px", | ||
| minWidth: "auto", | ||
| lineHeight: 1.2, | ||
| textTransform: "none", | ||
| borderRadius: "4px", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove duplicate "tiny" button size styling.
The "tiny" button size is defined in both styleOverrides.sizeTiny (lines 64-73) and variants array. This duplication can cause confusion and maintenance issues.
- {
- props: { size: "tiny" },
- style: {
- fontSize: "0.75rem",
- fontWeight: 500,
- padding: "4px 8px",
- minHeight: "24px",
- minWidth: "auto",
- lineHeight: 1.2,
- textTransform: "none",
- borderRadius: "4px",
- },
- },The styling in styleOverrides.sizeTiny is sufficient for the "tiny" button size functionality.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| props: { size: "tiny" }, | |
| style: { | |
| fontSize: "0.75rem", | |
| fontWeight: 500, | |
| padding: "4px 8px", | |
| minHeight: "24px", | |
| minWidth: "auto", | |
| lineHeight: 1.2, | |
| textTransform: "none", | |
| borderRadius: "4px", | |
| }, | |
| }, |
🤖 Prompt for AI Agents
In src-gui/src/renderer/components/theme.tsx between lines 107 and 119, the
"tiny" button size styling is duplicated in the variants array while it is
already defined in styleOverrides.sizeTiny (lines 64-73). Remove the entire
"tiny" size variant block from the variants array to avoid duplication and rely
solely on the styleOverrides.sizeTiny definition for the "tiny" button size
styling.
| p: 0.5, | ||
| backgroundColor: "grey.800", | ||
| borderRadius: "100%", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace hardcoded background color with theme-aware color.
The hardcoded grey.800 background color won't adapt to theme changes and may not provide sufficient contrast in light mode.
- backgroundColor: "grey.800",
+ backgroundColor: "action.selected",This uses a theme-aware color that adapts to both light and dark themes.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| p: 0.5, | |
| backgroundColor: "grey.800", | |
| borderRadius: "100%", | |
| p: 0.5, | |
| backgroundColor: "action.selected", | |
| borderRadius: "100%", |
🤖 Prompt for AI Agents
In src-gui/src/renderer/components/pages/monero/components/TransactionItem.tsx
around lines 62 to 64, replace the hardcoded backgroundColor "grey.800" with a
theme-aware color from the theme palette. Use the theme object or a hook like
useTheme to access colors that adapt to light and dark modes, ensuring proper
contrast and consistency with the current theme.
There was a problem hiding this comment.
Bug: Button Styling Redundancy Causes Conflicts
The "tiny" button size has duplicate styling definitions. It is defined in both MuiButton.styleOverrides.sizeTiny (existing) and as a new variant in MuiButton.variants (props: { size: "tiny" }). This redundancy can cause styling conflicts and unpredictable behavior. The variant approach is preferred for consistency.
src-gui/src/renderer/components/theme.tsx#L106-L120
core/src-gui/src/renderer/components/theme.tsx
Lines 106 to 120 in e4d3833
Bug: Clipboard and Explorer Fail on Null Transactions
The TransactionItem component is missing null checks for transaction.tx_hash before attempting to copy it to the clipboard or pass it to getMoneroTxExplorerUrl for the "View on Explorer" action. This can lead to navigator.clipboard.writeText() failing and getMoneroTxExplorerUrl() receiving null/undefined values, as these menu actions are now always available without validating tx_hash.
src-gui/src/renderer/components/pages/monero/components/TransactionItem.tsx#L135-L147
Was this report helpful? Give feedback by reacting with 👍 or 👎
2 participants
No description provided.