feat(frontend): move ZapPlanner button to Wallet and move wallet mobile actions to overflow menu#2200
Conversation
Center the wallet balance area and tune spacing for a cleaner visual rhythm. Move secondary actions to the header as ghost buttons and use a vertical more icon. Made-with: Cursor
Move wallet secondary actions into the mobile overflow menu and add Recurring. Also remove the ZapPlanner card from Home to avoid duplicate entry points. Made-with: Cursor
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 43 minutes and 19 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughMoved transaction export logic into a new shared utility and wired menu items to it; added a WalletActionsMenu with export/recurring/buy entries; removed the ZapPlanner card; introduced ProDropdownMenuItem and controlled UpgradeDialog behavior; added AlertAction and adjusted theme/upgrade and various menu flows. Changes
Sequence Diagram(s)sequenceDiagram
participant UI as WalletActionsMenu / TransactionsListMenu
participant Utils as transactions-utils (handleExportTransactions)
participant API as API (/api/transactions)
participant Browser as Browser (download)
participant Toast as Toast
UI->>Utils: handleExportTransactions(appId?)
Utils->>API: GET /api/transactions?limit=LIST_TRANSACTIONS_LIMIT&offset=0...
API-->>Utils: paginated transactions (repeat until done)
Utils->>Utils: aggregate results, convertToCSV()
Utils->>Browser: create Blob / objectURL, trigger temporary <a> click
Browser-->>Browser: start file download
Utils->>Browser: revoke objectURL
Utils->>Toast: show success toast
alt error
Utils->>Console: console.error(...)
Utils->>Toast: show error toast
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
frontend/src/components/TransactionsListMenu.tsx (1)
146-165: Inconsistent icon spacing in Export Transactions items.The non-subscription export item (line 151) uses
mr-2on the icon, while the subscription export item (line 159) usesgap-2on the container. This creates inconsistent styling approaches.♻️ Suggested fix for consistent spacing
{!albyMe?.subscription.plan_code ? ( <UpgradeDialog> <div className="cursor-pointer"> - <DropdownMenuItem className="w-full pointer-events-none"> - <div className="w-full flex items-center"> - <DownloadIcon className="h-4 w-4 mr-2" /> + <DropdownMenuItem className="w-full flex items-center gap-2 pointer-events-none"> + <DownloadIcon className="h-4 w-4" /> Export Transactions - </div> </DropdownMenuItem> </div> </UpgradeDialog>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/TransactionsListMenu.tsx` around lines 146 - 165, The Export Transactions menu items use two different spacing approaches causing inconsistency: the disabled (UpgradeDialog) variant applies mr-2 on the DownloadIcon while the enabled variant relies on gap-2 on the DropdownMenuItem. Standardize to a single approach (prefer container gap for consistency) by removing the icon's mr-2 in the UpgradeDialog branch and applying the same class on the container that renders DownloadIcon and text; update the disabled branch that uses UpgradeDialog + DropdownMenuItem and the enabled branch that calls handleExportTransactions to both use the same container class (e.g., "flex items-center gap-2") so spacing is identical for DownloadIcon and label.frontend/src/screens/wallet/index.tsx (1)
151-172: Clean centered layout refactor.The vertical centered layout with
max-w-mdconstraint and 2-column grid for Receive/Send is clean. One minor observation:The
!px-12uses!importantto override padding. While this works, consider whether the button's default sizing or a custom variant would be more maintainable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/wallet/index.tsx` around lines 151 - 172, Remove the use of the CSS !important override ("!px-12") on the two LinkButton instances and replace it with a maintainable variant or prop on LinkButton (e.g., variant="wide" or padding="px-12"); update the two occurrences in the wallet component (the LinkButton calls with size="lg") to use the new prop instead of "!px-12", and implement the corresponding handling inside the LinkButton component so it applies the desired horizontal padding via normal classes (e.g., "px-12") rather than forcing it with "!".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/TransactionsListMenu.tsx`:
- Around line 146-165: The Export Transactions menu items use two different
spacing approaches causing inconsistency: the disabled (UpgradeDialog) variant
applies mr-2 on the DownloadIcon while the enabled variant relies on gap-2 on
the DropdownMenuItem. Standardize to a single approach (prefer container gap for
consistency) by removing the icon's mr-2 in the UpgradeDialog branch and
applying the same class on the container that renders DownloadIcon and text;
update the disabled branch that uses UpgradeDialog + DropdownMenuItem and the
enabled branch that calls handleExportTransactions to both use the same
container class (e.g., "flex items-center gap-2") so spacing is identical for
DownloadIcon and label.
In `@frontend/src/screens/wallet/index.tsx`:
- Around line 151-172: Remove the use of the CSS !important override ("!px-12")
on the two LinkButton instances and replace it with a maintainable variant or
prop on LinkButton (e.g., variant="wide" or padding="px-12"); update the two
occurrences in the wallet component (the LinkButton calls with size="lg") to use
the new prop instead of "!px-12", and implement the corresponding handling
inside the LinkButton component so it applies the desired horizontal padding via
normal classes (e.g., "px-12") rather than forcing it with "!".
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 57c80b60-1f03-485e-9a96-aff77f47aa04
📒 Files selected for processing (3)
frontend/src/components/TransactionsListMenu.tsxfrontend/src/screens/Home.tsxfrontend/src/screens/wallet/index.tsx
💤 Files with no reviewable changes (1)
- frontend/src/screens/Home.tsx
…mobile-actions # Conflicts: # frontend/src/components/TransactionsListMenu.tsx # frontend/src/screens/wallet/index.tsx
…and AlertAction - Extract wallet navigation (Swap, Recurring, Buy) into dedicated WalletActionsMenu component - Revert TransactionsListMenu to single-purpose (export transactions only) - Move CSV export logic to shared transactions-utils - Add ProDropdownMenuItem for reusable pro-gated dropdown items with consistent Pro badge - Add AlertAction component to alert system for proper action button placement - Use controlled mode in UpgradeDialog to avoid DialogTrigger data-slot conflicts - Replace inline upgrade gating in Channels (Set Node Alias) and Settings (themes) - Theme select now opens UpgradeDialog instead of disabling paid items - Use AlertAction in SubwalletList for upgrade prompt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Show wallet actions (Swap, Recurring, Buy) only on mobile, Export Transactions on all breakpoints — removes the separate TransactionsListMenu from the wallet page. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
frontend/src/components/transactions-utils.tsx (1)
52-57: Avoid repeated array reallocation during pagination.The spread append in the loop reallocates
allTransactionsevery page;push(...items)is cheaper and clearer here.♻️ Proposed fix
- allTransactions = [...allTransactions, ...data.transactions]; + allTransactions.push(...data.transactions);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/transactions-utils.tsx` around lines 52 - 57, The loop is reallocating allTransactions each page by doing allTransactions = [...allTransactions, ...data.transactions]; instead use in-place append: call allTransactions.push(...data.transactions) (and do not reassign its value). Ensure allTransactions is initialized as an array before the loop and keep the existing logic that checks data.transactions.length against LIST_TRANSACTIONS_LIMIT and advances offset.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/transactions-utils.tsx`:
- Around line 23-27: The CSV export currently wraps stringValue in quotes but
doesn’t mitigate CSV formula injection; update the mapping that computes
stringValue (where value is turned into JSON.stringify(value) or String(value)
and then replaceAll is used) to detect when the resulting string begins with any
of the formula prefixes '=', '+', '-', or '@' and prepend a single quote (') to
the string before escaping and wrapping it in quotes; keep the existing
JSON.stringify conversion for objects and the replaceAll('"','""') escape, but
ensure the formula-prefix check is applied to the post-conversion stringValue so
exported cells are safe.
In `@frontend/src/components/ui/alert.tsx`:
- Line 7: Revert the custom slot/composition added to the core Alert in
src/components/ui/alert.tsx so that the exported Alert matches the base shadcn
component (remove the added grid/classes and any AlertAction export or
slot-specific behavior), and instead implement a project-level wrapper component
named AlertWithAction that composes the base Alert, applies the grid/classes
(e.g., "grid grid-cols-[0_1fr_auto]
has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr_auto]"), and a helper
AlertWithActionSlot (a simple div with the positioning classes like "col-start-3
row-start-1 row-span-2 self-start"); keep AlertTitle and AlertDescription
re-exported from the base Alert and update imports/usages to use
AlertWithAction/AlertWithActionSlot where the action slot behavior is needed.
In `@frontend/src/components/UpgradeDialog.tsx`:
- Around line 41-53: The non-pro path breaks keyboard accessibility because
UpgradeDialog currently wraps children in a custom span-onClick and
ProDropdownMenuItem disables pointer events; change UpgradeDialog to use
shadcn's DialogTrigger render pattern or expose controlled open/onOpenChange
props so callers can render a DialogTrigger, replace the custom <span
onClick={...}> with the DialogTrigger wrapper, and update ProDropdownMenuItem to
call DropdownMenuItem's onSelect to set the dialog open state (remove
pointer-events-none and any pointer-event disabling) so activation via keyboard
from the dropdown routes through the dialog's control API (use UpgradeDialog,
DialogTrigger, DropdownMenuItem.onSelect, and onOpenChange/open to wire this).
In `@frontend/src/screens/subwallets/SubwalletList.tsx`:
- Around line 120-121: The prompt copy in SubwalletList.tsx ("Upgrade your
subscription plan to Pro unlock unlimited number of Sub-wallets.") is
grammatically incorrect and wordy; update the user-facing string used in the
SubwalletList component to a concise, user-perspective message such as "Upgrade
to Pro to create unlimited sub-wallets." Locate the string within the
SubwalletList component and replace it with the new concise copy, preserving any
surrounding JSX/translation function usage (e.g., the literal text or t("...")
call) so UI behavior and accessibility remain unchanged.
---
Nitpick comments:
In `@frontend/src/components/transactions-utils.tsx`:
- Around line 52-57: The loop is reallocating allTransactions each page by doing
allTransactions = [...allTransactions, ...data.transactions]; instead use
in-place append: call allTransactions.push(...data.transactions) (and do not
reassign its value). Ensure allTransactions is initialized as an array before
the loop and keep the existing logic that checks data.transactions.length
against LIST_TRANSACTIONS_LIMIT and advances offset.
🪄 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: 1e47a798-523a-4065-b1cb-e65a0ce7954c
📒 Files selected for processing (10)
frontend/src/components/TransactionsListMenu.tsxfrontend/src/components/UpgradeDialog.tsxfrontend/src/components/WalletActionsMenu.tsxfrontend/src/components/transactions-utils.tsxfrontend/src/components/ui/alert.tsxfrontend/src/screens/Home.tsxfrontend/src/screens/channels/Channels.tsxfrontend/src/screens/settings/Settings.tsxfrontend/src/screens/subwallets/SubwalletList.tsxfrontend/src/screens/wallet/index.tsx
💤 Files with no reviewable changes (1)
- frontend/src/screens/Home.tsx
Prevent CSV formula injection by prepending a single quote to values starting with =, +, -, or @. Fix grammar in sub-wallet upgrade prompt. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
Dependency
Test plan
/internal-apps/zapplannerMade with Cursor
Summary by CodeRabbit
New Features
Improvements
Changes