feat(wallet): test-mode top-up RPC + Add Money UI

[shaiksohelll]

User description

First wallet mutation flow. Unblocks Phase 3 smoke (no more direct SQL workarounds) and dogfooding.

Migration (supabase/migrations/20260517201500_topup_wallet.sql)

• Relaxes escrow_ledger.job_id to nullable. The ledger_type enum already includes topup / withdraw which aren't job-scoped; the NOT NULL was an oversight.
• Adds topup_wallet(p_amount numeric, p_idempotency_key uuid) — SECURITY DEFINER, locked to authenticated.
  • Validates auth.uid() is non-null.
  • Validates 100 ≤ amount ≤ 100000 (test-mode bounds).
  • Idempotent on p_idempotency_key via existing escrow_ledger.reference_id.
  • Credits wallets.available_balance and writes a type='topup' audit row.
• Partial index escrow_ledger_topup_reference_idx keeps the idempotency lookup fast.

Server action (src/app/_actions/wallet.ts)

• Mirrors the escrow.ts pattern exactly: getAuthUserId() helper, Zod parse, supabase.rpc("topup_wallet", ...), try/catch wrapper, revalidatePath(..., "layout").
• Maps invalid_amount / not_authenticated to friendly strings.

UI (src/components/features/topup-dialog.tsx + wired into wallet-view.tsx)

• New self-contained <TopUpDialog /> rendered after the balance cards.
• Quick-amount chips: ₹1,000 / ₹5,000 / ₹10,000 / ₹25,000.
• Carries forward the PR fix(client-milestones): prevent double-click race on Fund/Approve/Dispute #15 race patterns: inFlightRef synchronous gate + mountedRef with strict-mode reset.
• blurOnWheel on the amount input (carrying the earlier PR fix(post-job): prevent scroll-wheel from altering number inputs #13 fix pattern).
• Dialog can't be closed mid-request.
• Invalidates ["wallet"] query prefix on success — matches both client and worker wallet views.

Build

• pnpm build ✅ green (only pre-existing unrelated useEffect 'load' warnings)

Test mode disclaimer

Real payments (Razorpay/Stripe) come later. This unblocks smoke testing and dogfooding by giving us a clean Add Money UI instead of direct SQL updates.

Summary by CodeRabbit

• New Features
  • Added "Add Money" top-up dialog with amount input, quick-select buttons, and disabled/adding states.
  • Users can top up between ₹100 and ₹1,00,000; success shows a toast and updates the displayed balance in real time.
• Bug Fixes / Reliability
  • Prevents duplicate top-ups via idempotency and improves transaction titles/statuses for top-up and withdrawal entries.

---

CodeAnt-AI Description

Add test-mode wallet top-ups from the wallet page

What Changed

• Added an Add Money dialog so users can top up their wallet directly from the wallet screen
• The dialog includes quick amount options, amount limits, and prevents closing while a top-up is in progress
• Wallet transaction history now clearly labels top-ups and withdrawals instead of showing them as generic entries
• Top-up requests now return the updated balance and refresh wallet views after success
• Top-ups now handle repeated clicks and retry cases more safely, reducing duplicate credits and confusing failures

Impact

✅ Faster wallet funding
✅ Fewer duplicate top-up charges
✅ Clearer wallet transaction history
✅ Safer test-mode payments

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pakka	Ready	Preview, Comment	May 17, 2026 6:56pm

[codeant-ai]

CodeAnt AI is reviewing your PR.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds an end-to-end wallet top-up flow: DB migrations (idempotency, constraints, RLS), a Zod input schema, a Next.js server action that calls an idempotent Supabase RPC, and a client TopUpDialog integrated into WalletView.

Changes

Wallet Top-Up Feature

Layer / File(s)	Summary
Database schema & initial RPC supabase/migrations/20260517201500_topup_wallet.sql	Relax escrow_ledger.job_id nullability; create/replace topup_wallet(p_amount, p_idempotency_key) RPC with auth, amount validation, idempotency lookup, wallet crediting, ledger audit insert, and partial index; grant EXECUTE to authenticated.
DB hardening & constraints supabase/migrations/20260517223900_topup_wallet_hardening.sql	Replace partial index with UNIQUE partial index, add CHECK restricting NULL job_id to certain types, update RLS SELECT policy for wallet owners, and replace topup_wallet implementation to perform ledger-first insert with unique-violation handling and DB-level param/auth checks.
Input validation schema src/lib/schemas/wallet.ts	New topupWalletSchema (Zod) validating amount (number, 100–100000 with custom messages) and idempotency_key (UUID); exports TopupWalletInput.
Server action for wallet top-up src/app/_actions/wallet.ts	topupWalletAction authenticates via Supabase server client, validates input, calls topup_wallet RPC with idempotency key, maps RPC errors to user-facing messages, normalizes RPC payloads, revalidates /client/wallet and /worker/wallet on success, and returns { availableBalance, ledgerId } in an ActionResult.
Client UI component & wallet integration src/components/features/topup-dialog.tsx, src/components/features/wallet-view.tsx	TopUpDialog client modal manages amount input, validation (₹100–₹100,000), duplicate-submission prevention, mounted-safety, calls topupWalletAction with crypto.randomUUID() idempotency key, invalidates React Query ["wallet"] on success, shows toasts, resets UI state, and is rendered right-aligned in WalletView; transaction title and StatusBadge mappings updated for topup/withdraw.

Sequence Diagram(s)

sequenceDiagram
  participant ComponentA
  participant ComponentB
  ComponentA->>ComponentB: observable interaction

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

size:XL

Poem

🐰 I hopped through SQL, schema, and UI bright,
RPCs and idempotency kept things right,
A wallet topped gently, no double-pay fright,
I nibble some carrots, the balance in sight,
thumps a happy note ✨💸

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: a test-mode wallet top-up RPC function and corresponding Add Money UI, which aligns with the core functionality added across migrations, server action, and components.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/wallet-topup

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

src/components/features/topup-dialog.tsx (1)

64-67: 🏗️ Heavy lift

Add optimistic wallet cache update with rollback for this mutation path.

This path only invalidates after success; guideline expects optimistic UI with rollback toast on error.

As per coding guidelines, Implement optimistic UI on mutations with rollback toast on error.

🤖 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 `@src/components/features/topup-dialog.tsx` around lines 64 - 67, Before
calling queryClient.invalidateQueries(["wallet"]) implement an optimistic
update: in your mutation's onMutate handler (the mutation that triggers the
top-up), read and store the previous wallet state via
queryClient.getQueryData(["wallet"]), then immediately update the cache with
queryClient.setQueryData(["wallet"], updatedValue) to reflect the optimistic
top-up; in onError restore the previous state with
queryClient.setQueryData(["wallet"], previous) and show a rollback toast/error
notification; finally in onSettled or onSuccess call
queryClient.invalidateQueries({ queryKey: ["wallet"] }) to reconcile with the
server. Ensure you reference the same queryKey ["wallet"] and keep the previous
value variable scoped so onError can restore it.

🤖 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 `@src/app/_actions/wallet.ts`:
- Around line 67-70: The catch block in the server action inside
src/app/_actions/wallet.ts currently skips reporting errors to Sentry (there's a
TODO) — update that catch to call Sentry.captureException(err) (or
Sentry.captureException(new Error(msg)) if err is not an Error) before returning
the failure object; ensure the module imports your Sentry client (e.g., import
Sentry from your Sentry wrapper) and preserve the existing behavior of returning
{ success: false, error: msg } after capturing the exception.

In `@src/components/features/topup-dialog.tsx`:
- Around line 26-29: Replace the handwritten amount state/validation (amountStr,
setAmountStr, inFlightRef and related manual checks around submit) with
react-hook-form driven validation using zodResolver and the shared schema:
import topupWalletSchema and use topupWalletSchema.pick({ amount: true }) as the
resolver; wire the amount input into useForm's register (remove local amountStr
state) and run handleSubmit to perform submission inside startTransition; ensure
any inline validation logic in the submit handler (and around inFlightRef) is
removed or replaced by formState.isValid/isSubmitting from react-hook-form so
the client uses the single source-of-truth Zod schema for validation.
- Around line 70-72: Replace the manual rupee interpolation in the toast success
message with the shared INR currency formatter: instead of
`₹${amount.toLocaleString("en-IN")}` and
`₹${newBalance.toLocaleString("en-IN")}`, call the shared formatter (imported
from your common/utils e.g. formatINR or INRCURRENCY_FORMATTER) like
`formatINR(amount)` and `formatINR(newBalance)` inside the `toast.success` call
in topup-dialog.tsx; make the same replacement at the other occurrence (~line
130) and add the appropriate import for the shared formatter at the top of the
file.

In `@supabase/migrations/20260517201500_topup_wallet.sql`:
- Around line 39-43: The current read-before-write idempotency check using
v_ledger_id and p_idempotency_key against the escrow_ledger table is race-prone;
instead enforce atomic idempotency by adding a unique constraint on
(reference_id, type) for escrow_ledger and change the write path to perform an
atomic insert that uses that constraint (e.g., INSERT ... ON CONFLICT DO
NOTHING/DO UPDATE and return the existing row) so concurrent transactions cannot
both apply available_balance + p_amount; update the migration to create a UNIQUE
constraint/index (not a non-unique index) and switch the procedure that
references v_ledger_id/p_idempotency_key to rely on the atomic insert/upsert and
returned id to determine whether to apply the credit.

---

Nitpick comments:
In `@src/components/features/topup-dialog.tsx`:
- Around line 64-67: Before calling queryClient.invalidateQueries(["wallet"])
implement an optimistic update: in your mutation's onMutate handler (the
mutation that triggers the top-up), read and store the previous wallet state via
queryClient.getQueryData(["wallet"]), then immediately update the cache with
queryClient.setQueryData(["wallet"], updatedValue) to reflect the optimistic
top-up; in onError restore the previous state with
queryClient.setQueryData(["wallet"], previous) and show a rollback toast/error
notification; finally in onSettled or onSuccess call
queryClient.invalidateQueries({ queryKey: ["wallet"] }) to reconcile with the
server. Ensure you reference the same queryKey ["wallet"] and keep the previous
value variable scoped so onError can restore it.

🪄 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 Plus

Run ID: 2f4fa7d6-6145-4352-8750-211596427de7

📥 Commits

Reviewing files that changed from the base of the PR and between e95a91b and 0262eee.

📒 Files selected for processing (5)

• src/app/_actions/wallet.ts
• src/components/features/topup-dialog.tsx
• src/components/features/wallet-view.tsx
• src/lib/schemas/wallet.ts
• supabase/migrations/20260517201500_topup_wallet.sql

[Copilot]

Pull request overview

This PR adds the first wallet mutation path: a test-mode wallet top-up RPC, server action, and Add Money dialog integrated into the wallet page.

Changes:

• Adds topup_wallet SQL RPC and relaxes escrow_ledger.job_id for non-job ledger entries.
• Adds wallet top-up input schema and server action.
• Adds an Add Money dialog to wallet views with quick amount chips and cache invalidation.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
supabase/migrations/20260517201500_topup_wallet.sql	Adds top-up wallet RPC, ledger write, grants, and idempotency lookup index.
src/lib/schemas/wallet.ts	Adds Zod validation schema/type for wallet top-up input.
src/app/_actions/wallet.ts	Adds server action wrapping the top-up RPC and wallet path revalidation.
src/components/features/topup-dialog.tsx	Adds client dialog UI for test-mode wallet top-ups.
src/components/features/wallet-view.tsx	Wires the Add Money dialog into the wallet view and includes formatting-only changes.

Comments suppressed due to low confidence (2)

src/components/features/topup-dialog.tsx:93

• The close guard only checks isPending, which updates after React renders. Because inFlightRef.current is set synchronously before the transition starts, there is a window where a user can close the dialog with Escape/outside click even though the request is already in flight. Use the synchronous in-flight flag for onOpenChange as well so the dialog truly cannot be closed mid-request.

            <Dialog open={open} onOpenChange={(o) => !isPending && setOpen(o)}>

src/components/features/wallet-view.tsx:259

• This reformatting doesn't match the repository's Prettier style and makes the template literal less readable. Please run the formatter or revert this unrelated formatting-only change.

                    className={`text-sm font-bold ${isIncoming ? "text-emerald-700" : "text-foreground"
                      }`}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codeant-ai]

CodeAnt AI finished reviewing your PR.

[coderabbitai]

🧹 Nitpick comments (2)

src/components/features/wallet-view.tsx (2)

166-169: 💤 Low value

Consider responsive alignment for mobile UX.

The justify-end class right-aligns the TopUpDialog button on all screen sizes. On mobile devices, centering or full-width alignment might provide better UX.

📱 Suggested responsive alignment

-      <div className="flex justify-end">
+      <div className="flex justify-center sm:justify-end">
         <TopUpDialog />
       </div>

🤖 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 `@src/components/features/wallet-view.tsx` around lines 166 - 169, The
TopUpDialog is always right-aligned by the surrounding <div className="flex
justify-end"> which hurts mobile UX; change the wrapper around TopUpDialog (the
div containing TopUpDialog) to use responsive alignment classes (e.g., use
default mobile center and right-align on larger screens) and/or make the button
width responsive (e.g., full-width on mobile and auto on larger screens) so the
<div> that currently uses justify-end becomes something like mobile-centered and
sm:justify-end and the TopUpDialog itself can use sm:w-auto w-full as needed.

---

251-255: ⚡ Quick win

Consider using "released" variant for withdrawals.

The withdraw type is currently mapped to the "refunded" variant, which typically implies a transaction reversal. Since a withdrawal represents funds successfully leaving the wallet (similar to how escrow funds are released), the "released" variant would be more semantically appropriate and less confusing to users.

🎨 Suggested variant mapping

                   : entry.type === "topup"
                     ? "funded"
                     : entry.type === "withdraw"
-                      ? "refunded"
+                      ? "released"
                       : "pending"

🤖 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 `@src/components/features/wallet-view.tsx` around lines 251 - 255, The
withdrawal entry currently maps entry.type === "withdraw" to the "refunded"
variant which is misleading; update the mapping in the wallet view rendering
logic (the code block that computes the variant for entries in
src/components/features/wallet-view.tsx, likely inside the WalletView component
or its entry renderer where entry.type is checked) to return "released" for
withdraw instead of "refunded" so withdrawals are labeled semantically as funds
released.

🤖 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.

Nitpick comments:
In `@src/components/features/wallet-view.tsx`:
- Around line 166-169: The TopUpDialog is always right-aligned by the
surrounding <div className="flex justify-end"> which hurts mobile UX; change the
wrapper around TopUpDialog (the div containing TopUpDialog) to use responsive
alignment classes (e.g., use default mobile center and right-align on larger
screens) and/or make the button width responsive (e.g., full-width on mobile and
auto on larger screens) so the <div> that currently uses justify-end becomes
something like mobile-centered and sm:justify-end and the TopUpDialog itself can
use sm:w-auto w-full as needed.
- Around line 251-255: The withdrawal entry currently maps entry.type ===
"withdraw" to the "refunded" variant which is misleading; update the mapping in
the wallet view rendering logic (the code block that computes the variant for
entries in src/components/features/wallet-view.tsx, likely inside the WalletView
component or its entry renderer where entry.type is checked) to return
"released" for withdraw instead of "refunded" so withdrawals are labeled
semantically as funds released.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2273806c-09bf-4864-8478-f438e4a1eade

📥 Commits

Reviewing files that changed from the base of the PR and between 0262eee and dead663.

📒 Files selected for processing (5)

• src/app/_actions/wallet.ts
• src/components/features/topup-dialog.tsx
• src/components/features/wallet-view.tsx
• src/lib/schemas/wallet.ts
• supabase/migrations/20260517223900_topup_wallet_hardening.sql

✅ Files skipped from review due to trivial changes (1)

• src/lib/schemas/wallet.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• src/app/_actions/wallet.ts
• src/components/features/topup-dialog.tsx

[shaiksohelll]

@CodeAnt-AI review

[codeant-ai]

CodeAnt AI is running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds a test mode wallet top up flow where the client dialog calls a server action that invokes a database function to credit the wallet, write a ledger entry, and refresh wallet views.

sequenceDiagram
    participant User
    participant WalletUI as Wallet dialog
    participant Backend as Wallet server action
    participant Database as Top up function

    User->>WalletUI: Open dialog and enter amount
    WalletUI->>Backend: Submit top up request
    Backend->>Database: Run topup wallet with amount and idempotency key
    Database-->>Backend: Return new balance and ledger id
    Backend-->>WalletUI: Respond with top up success
    WalletUI->>WalletUI: Invalidate wallet data and show updated balance

Loading

---

Generated by CodeAnt AI

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[codeant-ai]

CodeAnt AI finished running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[shaiksohelll]

@copilot review

[Copilot]

@copilot review

Reviewed on commit dead663: no additional code changes are needed. pnpm typecheck, pnpm lint, and pnpm test pass (with the same pre-existing lint warnings), and the prior Copilot workflow failure was due to a Copilot API rate-limit (429), not a code failure.

[shaiksohelll]

@claude[agent] review

[shaiksohelll]

@codex[agent] review

[shaiksohelll]

@CodeAnt-AI review

[codeant-ai]

CodeAnt AI is running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds a client-side wallet top up flow where the Add Money UI sends a request to a server action, which calls a database function to apply an idempotent balance credit and ledger entry, then refreshes the wallet view.

sequenceDiagram
    participant User
    participant WalletUI
    participant ServerAction
    participant Database

    User->>WalletUI: Open Add Money and submit amount
    WalletUI->>ServerAction: Request wallet top up with amount and key
    ServerAction->>Database: Call topup_wallet with amount and idempotency key
    Database->>Database: Validate user, enforce bounds and idempotency, update wallet and ledger
    Database-->>ServerAction: Return new available balance and ledger id
    ServerAction-->>WalletUI: Return success with new balance
    WalletUI->>WalletUI: Refresh wallet data and show updated balance and top up entry

Loading

---

Generated by CodeAnt AI

[codeant-ai]

Suggestion: startTransition is being passed an async callback, but transition pending state is not reliably tied to the awaited RPC lifecycle. As a result, isPending can flip false before the request finishes, so the dialog/buttons may become interactive mid-request and allow close/cancel while the top-up is still in flight. Use an explicit pending state for the async mutation lifecycle (or a mutation hook) instead of relying on async startTransition. [api mismatch]

Severity Level: Major ⚠️

- ⚠️ Dialog can be closed while top-up still processing.
- ⚠️ Pending label and disabled states not aligned with RPC.
- ⚠️ Users may see success toast after dialog already closed.

Steps of Reproduction ✅

1. Render `WalletView` from `src/components/features/wallet-view.tsx:116-136`, which
includes `<TopUpDialog />` at `wallet-view.tsx:166-167`.

2. In the rendered UI, click the "Add Money" button defined at `topup-dialog.tsx:83-86` to
open the dialog controlled by `open` / `setOpen` at `topup-dialog.tsx:27,81-87`.

3. Enter a valid amount (e.g., 1000) in the input at `topup-dialog.tsx:96-109` and click
the primary "Add Money" button at `topup-dialog.tsx:137-139`, which calls `handleTopUp()`
at `topup-dialog.tsx:40-79`.

4. Observe that `handleTopUp()` sets `inFlightRef.current = true` at
`topup-dialog.tsx:50-51` and wraps the async RPC call `topupWalletAction(...)` at
`topup-dialog.tsx:55-58` in `startTransition(async () => { ... })` at
`topup-dialog.tsx:53`. Because the only state updates (`setAmountStr("")` and
`setOpen(false)`) occur after the `await` inside this async callback
(`topup-dialog.tsx:72-73`), React's `useTransition` `isPending` flag at
`topup-dialog.tsx:29` is not reliably true during the RPC. In practice, the
`disabled={isPending}` props on the input, quick-amount buttons, Cancel, and primary
button at `topup-dialog.tsx:108-109,119-120,132,137` remain false while the request is in
flight, and the `onOpenChange={(o) => !isPending && setOpen(o)}` handler at
`topup-dialog.tsx:87` allows the dialog to be closed mid-request. This breaks the intended
"dialog can't be closed mid-request" behavior even though `inFlightRef` still guards
against double submission.

Fix in Cursor | Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** src/components/features/topup-dialog.tsx
**Line:** 53:53
**Comment:**
	*Api Mismatch: `startTransition` is being passed an async callback, but transition pending state is not reliably tied to the awaited RPC lifecycle. As a result, `isPending` can flip false before the request finishes, so the dialog/buttons may become interactive mid-request and allow close/cancel while the top-up is still in flight. Use an explicit pending state for the async mutation lifecycle (or a mutation hook) instead of relying on async `startTransition`.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[codeant-ai]

CodeAnt AI finished running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn