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

src/app/_actions/wallet.ts

@@ -0,0 +1,69 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { createClient } from "@/lib/supabase/server";
+import { topupWalletSchema, type TopupWalletInput } from "@/lib/schemas/wallet";
+import type { ActionResult } from "./escrow";
+
+// ── Helper ────────────────────────────────────────────────────────────────────
+async function getAuthUserId() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+    error,
+  } = await supabase.auth.getUser();
+  if (error || !user) throw new Error(error?.message ?? "Not authenticated");
+  return { supabase, userId: user.id };
+}
+
+// ── Top up Wallet ─────────────────────────────────────────────────────────────
+// external → wallet: calls topup_wallet() SECURITY DEFINER function (test mode)
+export async function topupWalletAction(
+  raw: TopupWalletInput,
+): Promise<ActionResult<{ availableBalance: number; ledgerId: string }>> {
+  try {
+    const parsed = topupWalletSchema.safeParse(raw);
+    if (!parsed.success) {
+      return { success: false, error: parsed.error.issues[0]?.message ?? "Invalid input" };
+    }
+
+    const { supabase } = await getAuthUserId();
+    const { amount, idempotency_key } = parsed.data;
+
+    const { data, error } = await supabase.rpc("topup_wallet", {
+      p_amount: amount,
+      p_idempotency_key: idempotency_key,
+    });
+
+    if (error) {
+      const msg = error.message.toLowerCase();
+      if (msg.includes("invalid_amount")) {
+        return { success: false, error: "Amount must be between ₹100 and ₹1,00,000." };
+      }
+      if (msg.includes("not_authenticated")) {
+        return { success: false, error: "You need to be signed in." };
+      }
+      return { success: false, error: "Could not top up wallet. Please try again." };
+    }
+
+    const row = Array.isArray(data) ? data[0] : data;
+    if (!row) {
+      return { success: false, error: "Could not top up wallet. Please try again." };
+    }
+
+    revalidatePath("/client/wallet", "layout");
+    revalidatePath("/worker/wallet", "layout");
+
+    return {
+      success: true,
+      data: {
+        availableBalance: Number(row.available_balance),
+        ledgerId: row.ledger_id as string,
+      },
+    };
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Unknown error";
+    // TODO: Sentry.captureException(err);
+    return { success: false, error: msg };
+  }
+}

src/components/features/topup-dialog.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { formatInr } from "@/lib/format";
+import { useRef, useState, useTransition, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { topupWalletAction } from "@/app/_actions/wallet";
+
+const QUICK_AMOUNTS = [1000, 5000, 10000, 25000];
+
+export function TopUpDialog() {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [amountStr, setAmountStr] = useState("");
+  const [isPending, startTransition] = useTransition();
+  const inFlightRef = useRef(false);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  function handleTopUp() {
+    const amount = Number(amountStr);
+    if (!Number.isFinite(amount) || amount < 100) {
+      toast.error("Enter at least ₹100.");
+      return;
+    }
+    if (amount > 100000) {
+      toast.error("Maximum top-up is ₹1,00,000.");
+      return;
+    }
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+
+    startTransition(async () => {
+      try {
+        const result = await topupWalletAction({
+          amount,
+          idempotency_key: crypto.randomUUID(),
+        });
+
+        if (!result.success) {
+          if (mountedRef.current) toast.error(result.error);
+          return;
+        }
+
+        // Cache invalidation — safe to run regardless of mount state.
+        // Adjust query keys below if yours differ.
+        queryClient.invalidateQueries({ queryKey: ["wallet"] });
+
+        if (mountedRef.current) {
+          const newBalance = result.data?.availableBalance ?? 0;
+          toast.success(`Added ${formatInr(amount)}. New balance: ${formatInr(newBalance)}`);
+          setAmountStr("");
+          setOpen(false);
+        }
+      } finally {
+        inFlightRef.current = false;
+      }
+    });
+  }
+
+  return (
+    <>
+      <Button size="sm" variant="default" className="gap-1.5" onClick={() => setOpen(true)}>
+        <Plus className="h-4 w-4" />
+        Add Money
+      </Button>
+      <Dialog open={open} onOpenChange={(o) => !isPending && setOpen(o)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Add money to wallet</DialogTitle>
+            <DialogDescription>Test-mode top-up. ₹100 – ₹1,00,000.</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <Label htmlFor="topup-amount">Amount (₹)</Label>
+              <Input
+                id="topup-amount"
+                type="number"
+                inputMode="numeric"
+                min={100}
+                max={100000}
+                step={100}
+                placeholder="1000"
+                value={amountStr}
+                onChange={(e) => setAmountStr(e.target.value)}
+                onWheel={(e) => (e.target as HTMLInputElement).blur()}
+                disabled={isPending}
+              />
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              {QUICK_AMOUNTS.map((amt) => (
+                <Button
+                  key={amt}
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  disabled={isPending}
+                  onClick={() => setAmountStr(String(amt))}
+                >
+                  {formatInr(amt)}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={isPending}
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="button" disabled={isPending} onClick={handleTopUp}>
+              {isPending ? "Adding..." : "Add Money"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/features/wallet-view.tsx

@@ -7,6 +7,7 @@ import { useUser } from "@/hooks/use-user";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Separator } from "@/components/ui/separator";
+import { TopUpDialog } from "@/components/features/topup-dialog";
 import { formatInr, relativeTime } from "@/lib/format";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -45,11 +46,13 @@ async function fetchWalletData(role: "client" | "worker", userId: string) {
       .single(),
     supabase
       .from("escrow_ledger")
-      .select(`
+      .select(
+        `
         id,amount,type,created_at,from_wallet,to_wallet,
         jobs!escrow_ledger_job_id_fkey(title),
         milestones!escrow_ledger_milestone_id_fkey(title)
-      `)
+      `,
+      )
       .or(`from_wallet.eq.${userId},to_wallet.eq.${userId}`)
       .order("created_at", { ascending: false })
       .limit(50),
@@ -155,21 +158,21 @@ export function WalletView({ role }: { role: "client" | "worker" }) {
               Locked
             </p>
           </div>
-          <p className="text-2xl font-bold text-blue-700">
-            {formatInr(wallet.locked_balance)}
-          </p>
+          <p className="text-2xl font-bold text-blue-700">{formatInr(wallet.locked_balance)}</p>
           <p className="text-xs text-muted-foreground">In active escrows</p>
         </div>
       </section>
 
+      <div className="flex justify-end">
+        <TopUpDialog />
+      </div>
+
       {/* ── Locked breakdown (client only) ── */}
       {role === "client" && lockedByJob.length > 0 && (
         <>
           <Separator />
           <section>
-            <h2 className="mb-3 text-base font-semibold text-foreground">
-              Locked Breakdown
-            </h2>
+            <h2 className="mb-3 text-base font-semibold text-foreground">Locked Breakdown</h2>
             <ul className="space-y-2">
               {lockedByJob.map((job) => (
                 <li
@@ -196,9 +199,7 @@ export function WalletView({ role }: { role: "client" | "worker" }) {
 
       {/* ── Transaction history ── */}
       <section>
-        <h2 className="mb-3 text-base font-semibold text-foreground">
-          Recent Transactions
-        </h2>
+        <h2 className="mb-3 text-base font-semibold text-foreground">Recent Transactions</h2>
         {ledger.length === 0 ? (
           <div className="rounded-xl border bg-muted/40 py-10 text-center text-sm text-muted-foreground">
             No transactions yet.
@@ -232,7 +233,11 @@ export function WalletView({ role }: { role: "client" | "worker" }) {
                     </div>
                     <div>
                       <p className="text-sm font-medium">
-                        {entry.milestone_title ?? entry.job_title}
+                        {entry.type === "topup"
+                          ? "Wallet top-up"
+                          : entry.type === "withdraw"
+                            ? "Wallet withdrawal"
+                            : (entry.milestone_title ?? entry.job_title)}
                       </p>
                       <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <StatusBadge
@@ -243,7 +248,11 @@ export function WalletView({ role }: { role: "client" | "worker" }) {
                                 ? "released"
                                 : entry.type === "refund"
                                   ? "refunded"
-                                  : "pending"
+                                  : entry.type === "topup"
+                                    ? "funded"
+                                    : entry.type === "withdraw"
+                                      ? "refunded"
+                                      : "pending"
                           }
                         />
                         <span>{relativeTime(entry.created_at)}</span>

src/lib/schemas/wallet.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const topupWalletSchema = z.object({
+  amount: z
+    .number({ invalid_type_error: "Amount must be a number." })
+    .min(100, "Minimum top-up is ₹100.")
+    .max(100000, "Maximum top-up is ₹1,00,000."),
+  idempotency_key: z.string().uuid(),
+});
+
+export type TopupWalletInput = z.infer<typeof topupWalletSchema>;