feat(frontend): tx history drawer, pending overlay, card skeleton, inline field error#960
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (10)
📝 WalkthroughWalkthroughAdded four shared frontend primitives: a dashboard card skeleton, inline field error/validation hook, transaction pending overlay, and wallet transaction history drawer. The v1 barrel re-exports the new APIs, and unit tests cover rendering, accessibility attributes, and empty or fallback states. ChangesShared v1 frontend primitives
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.13.0)frontend/src/components/v1/InlineFieldError.cssError: ENOENT: no such file or directory, open '/.stylelintrc.json' frontend/src/components/v1/DashboardCardSkeleton.cssError: ENOENT: no such file or directory, open '/.stylelintrc.json' frontend/src/components/v1/TxPendingOverlay.cssError: ENOENT: no such file or directory, open '/.stylelintrc.json'
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
frontend/tests/unit/TxPendingOverlay.test.tsx (1)
70-83: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCover the timer-based cancel disabling path with fake timers.
Line 70+ checks initial enabled state, but there’s no assertion that cancel becomes disabled after 3 seconds or that click invokes
onCancelbefore disable.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/tests/unit/TxPendingOverlay.test.tsx` around lines 70 - 83, The TxPendingOverlay test suite only verifies the cancel button starts enabled, but it does not cover the timer-driven disable behavior or the pre-disable click path. Update the TxPendingOverlay tests to use fake timers, assert that the cancel button becomes disabled after 3 seconds, and verify that clicking the cancel control calls onCancel before the timeout expires; use the existing TxPendingOverlay render setup and tx-overlay-cancel test id to locate the assertions.frontend/tests/unit/InlineFieldError.test.tsx (1)
92-104: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd an assertion for the
aria-describedbylinkage.Line 92+ verifies
aria-invalid, but it doesn’t verify that the input points to the rendered error element id when an error exists.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/tests/unit/InlineFieldError.test.tsx` around lines 92 - 104, The InlineFieldError tests currently check only aria-invalid, so they miss verifying the error-message association. Update the TestInput assertions to also check the input’s aria-describedby when validation fails, and ensure it matches the rendered error element id produced by the InlineFieldError path. Use the existing test helpers and the field-input element to confirm the linkage, while keeping the no-error case unchanged unless it should explicitly assert the absence of the descriptor.frontend/tests/unit/WalletTxHistoryDrawer.test.tsx (1)
83-99: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a malformed-timestamp test case.
Given timestamp fallback handling in the component, add one case that passes an invalid timestamp and asserts a stable fallback rendering.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/tests/unit/WalletTxHistoryDrawer.test.tsx` around lines 83 - 99, Add a malformed-timestamp test to the WalletTxHistoryDrawer test suite so the timestamp fallback path is covered. Extend the existing WalletTxHistoryDrawer rendering tests by passing one transaction with an invalid timestamp value and assert the drawer renders a stable fallback display instead of crashing or showing an unstable value. Use the WalletTxHistoryDrawer component and the existing transaction test setup/helpers to keep the new case consistent with the current assertions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/v1/TxPendingOverlay.css`:
- Around line 41-45: The reduced-motion override in TxPendingOverlay.css still
leaves .tx-pending-overlay__spinner animating, so it does not fully respect
prefers-reduced-motion. Update the `@media` (prefers-reduced-motion: reduce) rule
for .tx-pending-overlay__spinner to disable the animation entirely rather than
just slowing it down, keeping the pending overlay static for motion-sensitive
users.
In `@frontend/src/components/v1/WalletTxHistoryDrawer.css`:
- Around line 120-124: The .wallet-tx-history-drawer__hash styles currently
force long transaction hashes to stay on one line, which can overflow the drawer
on small screens. Update this rule to allow wrapping or truncation with overflow
handling and ellipsis as needed, while keeping the hash readable and preserving
the responsive layout of WalletTxHistoryDrawer.
In `@frontend/src/components/v1/WalletTxHistoryDrawer.tsx`:
- Around line 36-41: The fallback in formatTimestamp is unreachable because new
Date(ts).toLocaleString() does not throw on invalid input, so malformed
timestamps still render as "Invalid Date". Update formatTimestamp in
WalletTxHistoryDrawer to explicitly detect invalid dates before formatting, and
return the original timestamp (or another fallback) when the Date is invalid
instead of relying on try/catch.
---
Nitpick comments:
In `@frontend/tests/unit/InlineFieldError.test.tsx`:
- Around line 92-104: The InlineFieldError tests currently check only
aria-invalid, so they miss verifying the error-message association. Update the
TestInput assertions to also check the input’s aria-describedby when validation
fails, and ensure it matches the rendered error element id produced by the
InlineFieldError path. Use the existing test helpers and the field-input element
to confirm the linkage, while keeping the no-error case unchanged unless it
should explicitly assert the absence of the descriptor.
In `@frontend/tests/unit/TxPendingOverlay.test.tsx`:
- Around line 70-83: The TxPendingOverlay test suite only verifies the cancel
button starts enabled, but it does not cover the timer-driven disable behavior
or the pre-disable click path. Update the TxPendingOverlay tests to use fake
timers, assert that the cancel button becomes disabled after 3 seconds, and
verify that clicking the cancel control calls onCancel before the timeout
expires; use the existing TxPendingOverlay render setup and tx-overlay-cancel
test id to locate the assertions.
In `@frontend/tests/unit/WalletTxHistoryDrawer.test.tsx`:
- Around line 83-99: Add a malformed-timestamp test to the WalletTxHistoryDrawer
test suite so the timestamp fallback path is covered. Extend the existing
WalletTxHistoryDrawer rendering tests by passing one transaction with an invalid
timestamp value and assert the drawer renders a stable fallback display instead
of crashing or showing an unstable value. Use the WalletTxHistoryDrawer
component and the existing transaction test setup/helpers to keep the new case
consistent with the current assertions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e41fc469-3b23-4d4e-9dea-be2354f82b1f
📒 Files selected for processing (13)
frontend/src/components/v1/DashboardCardSkeleton.cssfrontend/src/components/v1/DashboardCardSkeleton.tsxfrontend/src/components/v1/InlineFieldError.cssfrontend/src/components/v1/InlineFieldError.tsxfrontend/src/components/v1/TxPendingOverlay.cssfrontend/src/components/v1/TxPendingOverlay.tsxfrontend/src/components/v1/WalletTxHistoryDrawer.cssfrontend/src/components/v1/WalletTxHistoryDrawer.tsxfrontend/src/components/v1/index.tsfrontend/tests/unit/DashboardCardSkeleton.test.tsxfrontend/tests/unit/InlineFieldError.test.tsxfrontend/tests/unit/TxPendingOverlay.test.tsxfrontend/tests/unit/WalletTxHistoryDrawer.test.tsx
| @media (prefers-reduced-motion: reduce) { | ||
| .tx-pending-overlay__spinner { | ||
| animation-duration: 3s; | ||
| } | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Disable the spinner for reduced-motion users.
animation-duration: 3s still leaves the spinner animating forever, so this does not actually honor prefers-reduced-motion. Turn the animation off in that media query so the pending overlay stays visually static for motion-sensitive users.
Suggested fix
`@media` (prefers-reduced-motion: reduce) {
.tx-pending-overlay__spinner {
- animation-duration: 3s;
+ animation: none;
}
}📝 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.
| @media (prefers-reduced-motion: reduce) { | |
| .tx-pending-overlay__spinner { | |
| animation-duration: 3s; | |
| } | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .tx-pending-overlay__spinner { | |
| animation: none; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/v1/TxPendingOverlay.css` around lines 41 - 45, The
reduced-motion override in TxPendingOverlay.css still leaves
.tx-pending-overlay__spinner animating, so it does not fully respect
prefers-reduced-motion. Update the `@media` (prefers-reduced-motion: reduce) rule
for .tx-pending-overlay__spinner to disable the animation entirely rather than
just slowing it down, keeping the pending overlay static for motion-sensitive
users.
| .wallet-tx-history-drawer__hash { | ||
| font-family: monospace; | ||
| font-size: 0.7rem; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Prevent long hashes from overflowing the drawer.
white-space: nowrap without wrap/ellipsis handling can push the drawer wider on small screens. Let the hash wrap or truncate so the responsive layout stays intact.
Suggested fix
.wallet-tx-history-drawer__hash {
font-family: monospace;
font-size: 0.7rem;
- white-space: nowrap;
+ overflow-wrap: anywhere;
}📝 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.
| .wallet-tx-history-drawer__hash { | |
| font-family: monospace; | |
| font-size: 0.7rem; | |
| white-space: nowrap; | |
| } | |
| .wallet-tx-history-drawer__hash { | |
| font-family: monospace; | |
| font-size: 0.7rem; | |
| overflow-wrap: anywhere; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/v1/WalletTxHistoryDrawer.css` around lines 120 - 124,
The .wallet-tx-history-drawer__hash styles currently force long transaction
hashes to stay on one line, which can overflow the drawer on small screens.
Update this rule to allow wrapping or truncation with overflow handling and
ellipsis as needed, while keeping the hash readable and preserving the
responsive layout of WalletTxHistoryDrawer.
| function formatTimestamp(ts: string): string { | ||
| try { | ||
| return new Date(ts).toLocaleString(); | ||
| } catch { | ||
| return ts; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
formatTimestamp fallback is unreachable for invalid dates.
Line 38 won’t throw for malformed timestamps, so Line 40 never runs; users will see "Invalid Date" instead of a fallback value.
Proposed fix
function formatTimestamp(ts: string): string {
- try {
- return new Date(ts).toLocaleString();
- } catch {
- return ts;
- }
+ const date = new Date(ts);
+ if (Number.isNaN(date.getTime())) return ts;
+ return date.toLocaleString();
}📝 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.
| function formatTimestamp(ts: string): string { | |
| try { | |
| return new Date(ts).toLocaleString(); | |
| } catch { | |
| return ts; | |
| } | |
| function formatTimestamp(ts: string): string { | |
| const date = new Date(ts); | |
| if (Number.isNaN(date.getTime())) return ts; | |
| return date.toLocaleString(); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/v1/WalletTxHistoryDrawer.tsx` around lines 36 - 41,
The fallback in formatTimestamp is unreachable because new
Date(ts).toLocaleString() does not throw on invalid input, so malformed
timestamps still render as "Invalid Date". Update formatTimestamp in
WalletTxHistoryDrawer to explicitly detect invalid dates before formatting, and
return the original timestamp (or another fallback) when the Date is invalid
instead of relying on try/catch.
Xueen-code
force-pushed
the
feat/frontend-bundle-926-927-929-931
branch
from
fa1885e to
43ba3e4
Compare
2 participants
Summary
WalletTxHistoryDrawer— wallet transaction history in a right-side drawer with type icons, status badges, and empty state (Frontend feature: add detailed transaction history drawer for wallet profiles #926)TxPendingOverlay— full-screen semi-transparent overlay with CSS spinner, message, optional tx hash, and auto-disabling cancel button after 3 s (Frontend UX: add transaction pending feedback overlay for long writes #927)DashboardCardSkeleton— skeleton grid withmetric,list, andchartvariants built on existingSkeletonBase(Frontend platform: add shared card skeleton loader for dashboard grids #929)InlineFieldError+useFieldValidationhook — accessiblerole="alert"error message witharia-invalid/aria-describedbywired through the hook (Frontend UX: add inline validation error highlight for forms #931)All four components are exported from
frontend/src/components/v1/index.ts.Closes
closes #926
closes #927
closes #929
closes #931
Test plan
WalletTxHistoryDrawer— closed/open states, transaction list, empty state, type/amount renderingTxPendingOverlay— hidden whenvisible=false, shows message/hash/cancel, spinner presentDashboardCardSkeleton— correct card count, variant CSS classes,aria-busyInlineFieldError/useFieldValidation— null hides element, error renders withrole="alert", blur triggers validation,aria-invalidreflects stateRun:
cd frontend && npx vitest run tests/unit/WalletTxHistoryDrawer.test.tsx tests/unit/TxPendingOverlay.test.tsx tests/unit/DashboardCardSkeleton.test.tsx tests/unit/InlineFieldError.test.tsx31 tests, all passing.
Summary by CodeRabbit