Skip to content

feat(frontend): move ZapPlanner button to Wallet and move wallet mobile actions to overflow menu#2200

Merged
reneaaron merged 7 commits into
getAlby:masterfrom
stackingsaunter:feat/wallet-layout-mobile-actions
Apr 15, 2026
Merged

feat(frontend): move ZapPlanner button to Wallet and move wallet mobile actions to overflow menu#2200
reneaaron merged 7 commits into
getAlby:masterfrom
stackingsaunter:feat/wallet-layout-mobile-actions

Conversation

@stackingsaunter
Copy link
Copy Markdown
Member

@stackingsaunter stackingsaunter commented Apr 5, 2026

Summary

  • move wallet secondary actions into the mobile ellipsis menu and keep inline actions for desktop
  • add the Recurring action with calendar-sync icon linking to ZapPlanner and rename Buy Bitcoin to Buy
  • remove the ZapPlanner card from Home to avoid duplicate entry points

Dependency

Test plan

  • Verify mobile wallet header menu order: Swap, Recurring, Buy, Export Transactions
  • Verify desktop wallet header still shows inline Swap/Recurring/Buy actions plus export menu
  • Verify Recurring opens /internal-apps/zapplanner
  • Verify Home no longer renders the ZapPlanner card
  • Run TypeScript compile and pre-commit hooks

Made with Cursor

Summary by CodeRabbit

  • New Features

    • Export Transactions action and a consolidated Wallet Actions menu (Recurring, Buy, Swap where applicable).
    • Added Alert action slot for richer alert controls.
  • Improvements

    • Pro-styled dropdown item and unified upgrade dialog behavior across menus.
    • Settings now show a controlled upgrade dialog when selecting paid themes.
    • Subwallets upgrade prompt layout and button sizing refined.
    • Home screen: removed ZapPlanner suggested-app card.
  • Changes

    • Simplified several upgrade-gated menu flows to use the Pro dropdown item.

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
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 5, 2026

Warning

Rate limit exceeded

@reneaaron has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 43 minutes and 19 seconds before requesting another review.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4d65719e-e4b6-4b33-b2bb-adf44fc6371f

📥 Commits

Reviewing files that changed from the base of the PR and between 5de32fe and 94da81a.

📒 Files selected for processing (1)
  • frontend/src/screens/wallet/index.tsx
📝 Walkthrough

Walkthrough

Moved 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

Cohort / File(s) Summary
Transactions export & utils
frontend/src/components/transactions-utils.tsx, frontend/src/components/TransactionsListMenu.tsx
Added convertToCSV and handleExportTransactions(appId?) to paginate /api/transactions, build/download CSV and show toasts; TransactionsListMenu now delegates export to the new handler and uses ProDropdownMenuItem.
New wallet actions menu
frontend/src/components/WalletActionsMenu.tsx, frontend/src/screens/wallet/index.tsx
Added WalletActionsMenu component (Swap conditional, Recurring, Buy, Export) and updated wallet header to use it; adjusted responsive visibility and CTA layout.
UpgradeDialog / Pro menu item
frontend/src/components/UpgradeDialog.tsx
Added ProDropdownMenuItem; made UpgradeDialog optionally controlled via open/onOpenChange and changed trigger to a clickable span when uncontrolled.
UI primitives / alert
frontend/src/components/ui/alert.tsx
Extended alertVariants for data-slot="alert-action" and added exported AlertAction component for placing actions in alerts.
Home screen
frontend/src/screens/Home.tsx
Removed ZapPlanner promotional card, its image import, and the "NEW" badge.
Channels screen
frontend/src/screens/channels/Channels.tsx
Removed useAlbyMe gating and SparklesIcon; always shows ProDropdownMenuItem for "Set Node Alias" when backend is LDK and navigates via navigate(...).
Settings screen
frontend/src/screens/settings/Settings.tsx
Added local showUpgradeDialog state; intercepts paid theme selection to open UpgradeDialog when user lacks a plan while keeping paid theme items selectable.
Subwallets
frontend/src/screens/subwallets/SubwalletList.tsx
Moved upgrade control into AlertAction, simplified layout and adjusted button size.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • im-adithya

Poem

🐰
I hopped through menus, tidy and spry,
Moved export logic to reach for the sky,
ZapPlanner's card took a gentle rest,
New actions bloom in the wallet's crest,
Crunching CSV carrots—downloaded with a sigh.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title accurately summarizes the main changes: moving the ZapPlanner button to the Wallet header and reorganizing wallet mobile actions into an overflow menu.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@stackingsaunter stackingsaunter changed the title feat(frontend): move wallet mobile actions to overflow menu feat(frontend): move ZapPlanner button to Wallet and move wallet mobile actions to overflow menu Apr 5, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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-2 on the icon, while the subscription export item (line 159) uses gap-2 on 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-md constraint and 2-column grid for Receive/Send is clean. One minor observation:

The !px-12 uses !important to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 17d3885 and f1f70d1.

📒 Files selected for processing (3)
  • frontend/src/components/TransactionsListMenu.tsx
  • frontend/src/screens/Home.tsx
  • frontend/src/screens/wallet/index.tsx
💤 Files with no reviewable changes (1)
  • frontend/src/screens/Home.tsx

reneaaron and others added 3 commits April 15, 2026 11:38
…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>
@reneaaron
Copy link
Copy Markdown
Member

@coderabbitai full review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 15, 2026

✅ Actions performed

Full review triggered.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 allTransactions every 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

📥 Commits

Reviewing files that changed from the base of the PR and between ac88c8d and 36d4abd.

📒 Files selected for processing (10)
  • frontend/src/components/TransactionsListMenu.tsx
  • frontend/src/components/UpgradeDialog.tsx
  • frontend/src/components/WalletActionsMenu.tsx
  • frontend/src/components/transactions-utils.tsx
  • frontend/src/components/ui/alert.tsx
  • frontend/src/screens/Home.tsx
  • frontend/src/screens/channels/Channels.tsx
  • frontend/src/screens/settings/Settings.tsx
  • frontend/src/screens/subwallets/SubwalletList.tsx
  • frontend/src/screens/wallet/index.tsx
💤 Files with no reviewable changes (1)
  • frontend/src/screens/Home.tsx

Comment thread frontend/src/components/transactions-utils.tsx
Comment thread frontend/src/components/ui/alert.tsx
Comment thread frontend/src/components/UpgradeDialog.tsx
Comment thread frontend/src/screens/subwallets/SubwalletList.tsx Outdated
reneaaron and others added 2 commits April 15, 2026 15:57
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>
@reneaaron reneaaron merged commit 46d3a89 into getAlby:master Apr 15, 2026
7 of 11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants