From f83054b208d6152b0bad74501fc4af0347db03c5 Mon Sep 17 00:00:00 2001
From: Rassl <Rassl@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:37:52 +0000
Subject: [PATCH] Generated with Hive: Add withdraw sats flow to wallet modal
 with invoice validation and history

---
 src/components/modals/budget-modal.tsx  | 163 +++++++++++++++++++-
 src/lib/__tests__/budget-modal.test.tsx | 191 +++++++++++++++++++++++-
 src/lib/__tests__/invoice-utils.test.ts |  20 ++-
 src/lib/__tests__/withdraw.test.ts      |  92 ++++++++++++
 src/lib/invoice-utils.ts                |  16 ++
 src/lib/sphinx/index.ts                 |   2 +-
 src/lib/sphinx/payment.ts               |  20 +++
 src/lib/transaction-display.ts          |   2 +
 8 files changed, 496 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/__tests__/withdraw.test.ts

diff --git a/src/components/modals/budget-modal.tsx b/src/components/modals/budget-modal.tsx
index fa72abc..ead246f 100644
--- a/src/components/modals/budget-modal.tsx
+++ b/src/components/modals/budget-modal.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useCallback, useEffect, useRef, useState } from "react"
-import { Zap, Copy, Check, Loader2, ArrowLeft, History, Key, RefreshCw, ArrowUpRight, Clock } from "lucide-react"
+import { Zap, Copy, Check, Loader2, ArrowLeft, History, Key, RefreshCw, ArrowUpRight, Clock, ArrowDownLeft } from "lucide-react"
 import { QRCodeSVG } from "qrcode.react"
 import {
   Dialog,
@@ -13,18 +13,85 @@ import {
 import { Button } from "@/components/ui/button"
 import { useModalStore } from "@/stores/modal-store"
 import { useUserStore } from "@/stores/user-store"
-import { isSphinx, hasWebLN, payInvoice, payL402, topUpLsat, fetchTransactionHistory, pollPaymentStatus, fetchBuyLsatChallenge, savePendingLsat, getPendingLsat, clearPendingLsat, topUpStatus, TransactionRow, PendingLsatChallenge } from "@/lib/sphinx"
+import { isSphinx, hasWebLN, payInvoice, payL402, topUpLsat, fetchTransactionHistory, pollPaymentStatus, fetchBuyLsatChallenge, savePendingLsat, getPendingLsat, clearPendingLsat, topUpStatus, withdraw, TransactionRow, PendingLsatChallenge } from "@/lib/sphinx"
 import { getActionDisplayLabel, getActionBadgeColor, isViewGrantRow } from "@/lib/transaction-display"
 import { isMocksEnabled, MOCK_TRANSACTIONS } from "@/lib/mock-data"
 import { cookieStorage } from "@/lib/cookie-storage"
 import { api } from "@/lib/api"
-import { decodeInvoiceExpiry } from "@/lib/invoice-utils"
+import { decodeInvoiceExpiry, decodeInvoiceAmountSats } from "@/lib/invoice-utils"
 import { formatCountdown } from "@/lib/format-countdown"
 import { useInvoiceCountdown } from "@/hooks/use-invoice-countdown"
 
-type Step = "balance" | "first-purchase" | "first-invoice" | "amount" | "invoice" | "success" | "history" | "manage-token" | "restore"
+type Step = "balance" | "first-purchase" | "first-invoice" | "amount" | "invoice" | "success" | "history" | "manage-token" | "restore" | "withdraw"
 
 const PRESET_AMOUNTS = [50, 100, 500, 1000]
+const MINIMUM_WITHDRAWAL_SATS = 100
+
+function WithdrawStep({
+  invoice,
+  onInvoiceChange,
+  error,
+  loading,
+  onConfirm,
+}: {
+  invoice: string
+  onInvoiceChange: (val: string) => void
+  error: string
+  loading: boolean
+  onConfirm: () => void
+}) {
+  const decodedAmountSats = invoice.trim() ? decodeInvoiceAmountSats(invoice) : null
+  const withdrawExpiresAt = invoice.trim() ? decodeInvoiceExpiry(invoice) : null
+  const { secondsLeft, expired } = useInvoiceCountdown(withdrawExpiresAt)
+
+  return (
+    <>
+      <textarea
+        value={invoice}
+        onChange={(e) => onInvoiceChange(e.target.value)}
+        placeholder="Paste Lightning invoice (payment_request)…"
+        rows={4}
+        className="w-full rounded-md border border-border/50 bg-muted/30 px-3 py-2 text-xs font-mono text-foreground placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none resize-none"
+      />
+
+      {invoice.trim() && (
+        <div className="rounded-md border border-border/30 bg-muted/20 px-3 py-2.5 space-y-1.5">
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-muted-foreground">Amount</span>
+            <span className={`font-mono font-medium ${decodedAmountSats !== null ? "text-foreground" : "text-destructive"}`}>
+              {decodedAmountSats !== null ? `${decodedAmountSats.toLocaleString()} sats` : "Amountless — not supported"}
+            </span>
+          </div>
+          {withdrawExpiresAt !== null && (
+            <div className={`flex items-center gap-1.5 text-xs font-mono ${
+              expired ? "text-destructive" : secondsLeft < 60 ? "text-red-400" : "text-amber"
+            }`}>
+              <Clock className="h-3 w-3" />
+              {expired ? "Invoice expired" : `${formatCountdown(secondsLeft)} remaining`}
+            </div>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <p className="text-xs text-destructive text-center">{error}</p>
+      )}
+
+      <Button
+        onClick={onConfirm}
+        disabled={loading || !invoice.trim()}
+        className="w-full bg-primary text-primary-foreground hover:bg-primary/90 text-xs"
+      >
+        {loading ? (
+          <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <ArrowDownLeft className="mr-2 h-3.5 w-3.5" />
+        )}
+        {loading ? "Processing..." : "Confirm Withdrawal"}
+      </Button>
+    </>
+  )
+}
 
 export function BudgetModal() {
   const { activeModal, close } = useModalStore()
@@ -54,6 +121,10 @@ export function BudgetModal() {
   const [invoiceExpiresAt, setInvoiceExpiresAt] = useState<number | null>(null)
   const { secondsLeft, expired } = useInvoiceCountdown(invoiceExpiresAt)
 
+  // Withdraw state
+  const [withdrawInvoice, setWithdrawInvoice] = useState("")
+  const [isWithdrawSuccess, setIsWithdrawSuccess] = useState(false)
+
   // First-purchase state (non-Sphinx, non-WebLN, no existing L402)
   const [firstPurchaseAmount, setFirstPurchaseAmount] = useState<number>(1000)
   const [firstPurchaseRequest, setFirstPurchaseRequest] = useState("")
@@ -97,6 +168,8 @@ export function BudgetModal() {
     setPendingChallenge(null)
     setRestoreInput("")
     setInvoiceExpiresAt(null)
+    setWithdrawInvoice("")
+    setIsWithdrawSuccess(false)
   }, [])
 
   useEffect(() => {
@@ -401,6 +474,57 @@ export function BudgetModal() {
     }
   }, [amount, sphinxConnected, weblnAvailable, refreshBalance])
 
+  const handleWithdraw = useCallback(async () => {
+    setError("")
+    const decodedAmountSats = decodeInvoiceAmountSats(withdrawInvoice)
+    const expiresAt = decodeInvoiceExpiry(withdrawInvoice)
+    const isExpired = expiresAt !== null && expiresAt < Math.floor(Date.now() / 1000)
+
+    if (decodedAmountSats === null) {
+      setError("Invoice must specify an amount")
+      return
+    }
+    if (isExpired) {
+      setError("Invoice has expired")
+      return
+    }
+    if (decodedAmountSats < MINIMUM_WITHDRAWAL_SATS) {
+      setError("Minimum withdrawal is 100 sats")
+      return
+    }
+    if (decodedAmountSats > (budget ?? 0)) {
+      setError("Insufficient balance for withdrawal")
+      return
+    }
+
+    setLoading(true)
+    try {
+      await withdraw(withdrawInvoice)
+      await refreshBalance()
+      setIsWithdrawSuccess(true)
+      setStep("success")
+    } catch (err: unknown) {
+      const errorCode = (err as { errorCode?: string })?.errorCode
+      if (errorCode === "BELOW_MINIMUM") {
+        setError("Minimum withdrawal is 100 sats")
+      } else if (errorCode === "INSUFFICIENT_BALANCE") {
+        setError("Insufficient balance for withdrawal")
+      } else if (errorCode === "INVOICE_EXPIRED") {
+        setError("Invoice has expired")
+      } else if (errorCode === "AMOUNTLESS_INVOICE") {
+        setError("Invoice must specify an amount")
+      } else if (errorCode === "ALREADY_WITHDRAWN") {
+        setError("This invoice has already been paid")
+      } else if (errorCode === "PAYMENT_FAILED") {
+        setError("Payment failed — your balance has been refunded")
+      } else {
+        setError("Withdrawal failed. Please try again.")
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [withdrawInvoice, budget, refreshBalance])
+
   const handleCopy = useCallback(async () => {
     await navigator.clipboard.writeText(paymentRequest)
     setCopied(true)
@@ -441,7 +565,7 @@ export function BudgetModal() {
                     cancelPoll()
                     setPaymentRequest("")
                     setStep("amount")
-                  } else if (step === "history" || step === "manage-token") {
+                  } else if (step === "history" || step === "manage-token" || step === "withdraw") {
                     setStep("balance")
                   } else if (step === "restore") {
                     setStep("manage-token")
@@ -465,6 +589,7 @@ export function BudgetModal() {
             {step === "history" && "History"}
             {step === "manage-token" && "Manage Token"}
             {step === "restore" && "Restore Token"}
+            {step === "withdraw" && "Withdraw"}
           </DialogTitle>
           <DialogDescription>
             {step === "balance" && "Manage your balance."}
@@ -476,6 +601,7 @@ export function BudgetModal() {
             {step === "history" && "Your payment activity."}
             {step === "manage-token" && "Back up or restore your L402 token."}
             {step === "restore" && "Paste a previously copied token to regain access."}
+            {step === "withdraw" && "Paste a Lightning invoice to cash out your balance."}
           </DialogDescription>
         </DialogHeader>
 
@@ -520,6 +646,18 @@ export function BudgetModal() {
                 <ArrowUpRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
               </button>
 
+              <button
+                onClick={() => { setWithdrawInvoice(""); setError(""); setStep("withdraw") }}
+                disabled={loading || !hasExistingL402}
+                className="group flex w-full items-center justify-between rounded-lg border border-border/50 bg-muted/20 px-4 py-2.5 text-foreground transition-all hover:bg-muted/40 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <div className="flex items-center gap-2">
+                  <ArrowDownLeft className="h-4 w-4" />
+                  <span className="text-sm font-medium">Withdraw</span>
+                </div>
+                <ArrowDownLeft className="h-4 w-4 text-muted-foreground" />
+              </button>
+
               <div className="grid grid-cols-3 gap-2">
                 <button
                   onClick={handleRefreshBalance}
@@ -960,6 +1098,17 @@ export function BudgetModal() {
             </>
           )}
 
+          {/* Step: Withdraw */}
+          {step === "withdraw" && (
+            <WithdrawStep
+              invoice={withdrawInvoice}
+              onInvoiceChange={(val) => { setWithdrawInvoice(val); setError("") }}
+              error={error}
+              loading={loading}
+              onConfirm={handleWithdraw}
+            />
+          )}
+
           {/* Step: Success */}
           {step === "success" && (
             <>
@@ -969,9 +1118,9 @@ export function BudgetModal() {
                 </div>
                 <div className="text-center">
                   <p className="text-sm font-medium text-foreground">
-                    Top-up complete
+                    {isWithdrawSuccess ? "Withdrawal complete" : "Top-up complete"}
                   </p>
-                  {successDelta !== null && (
+                  {!isWithdrawSuccess && successDelta !== null && (
                     <p className="text-sm font-mono text-emerald-400">
                       +{successDelta.toLocaleString()} sats added
                     </p>
diff --git a/src/lib/__tests__/budget-modal.test.tsx b/src/lib/__tests__/budget-modal.test.tsx
index 434fefb..0cea5de 100644
--- a/src/lib/__tests__/budget-modal.test.tsx
+++ b/src/lib/__tests__/budget-modal.test.tsx
@@ -4,8 +4,10 @@ import React from "react"
 
 // --- invoice-utils mock ---
 const mockDecodeInvoiceExpiry = vi.fn().mockReturnValue(null)
+const mockDecodeInvoiceAmountSats = vi.fn().mockReturnValue(500)
 vi.mock("@/lib/invoice-utils", () => ({
   decodeInvoiceExpiry: (...args: unknown[]) => mockDecodeInvoiceExpiry(...args),
+  decodeInvoiceAmountSats: (...args: unknown[]) => mockDecodeInvoiceAmountSats(...args),
 }))
 
 // --- use-invoice-countdown mock (controlled in each test) ---
@@ -58,6 +60,11 @@ const mockFetchBuyLsatChallenge = vi.fn().mockResolvedValue({
   id: "lsatid123",
 })
 const mockFetchTransactionHistory = vi.fn().mockResolvedValue({ transactions: [], scope: "token" })
+const mockWithdraw = vi.fn().mockResolvedValue({ success: true })
+const mockTopUpStatus = vi.fn().mockResolvedValue(false)
+const mockSavePendingLsat = vi.fn().mockImplementation((c: unknown, a: unknown) => ({ ...(c as object), amount: a, createdAt: Date.now() }))
+const mockGetPendingLsat = vi.fn().mockReturnValue(null)
+const mockClearPendingLsat = vi.fn()
 
 vi.mock("@/lib/sphinx", () => ({
   isSphinx: () => mockIsSphinx(),
@@ -65,10 +72,15 @@ vi.mock("@/lib/sphinx", () => ({
   payInvoice: (...args: unknown[]) => mockPayInvoice(...args),
   payL402: (...args: unknown[]) => mockPayL402(...args),
   topUpLsat: (...args: unknown[]) => mockTopUpLsat(...args),
-  topUpConfirm: (...args: unknown[]) => mockTopUpConfirm(...args), // kept for compat but no longer called
+  topUpConfirm: (...args: unknown[]) => mockTopUpConfirm(...args),
+  topUpStatus: (...args: unknown[]) => mockTopUpStatus(...args),
   pollPaymentStatus: (...args: unknown[]) => mockPollPaymentStatus(...args),
   fetchBuyLsatChallenge: (...args: unknown[]) => mockFetchBuyLsatChallenge(...args),
   fetchTransactionHistory: (...args: unknown[]) => mockFetchTransactionHistory(...args),
+  savePendingLsat: (...args: unknown[]) => mockSavePendingLsat(...args),
+  getPendingLsat: () => mockGetPendingLsat(),
+  clearPendingLsat: () => mockClearPendingLsat(),
+  withdraw: (...args: unknown[]) => mockWithdraw(...args),
 }))
 
 // --- Mock data ---
@@ -719,3 +731,180 @@ describe("BudgetModal invoice countdown", () => {
     expect(screen.getByText("Waiting for payment...")).toBeInTheDocument()
   })
 })
+
+describe("BudgetModal withdraw flow", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockBudget = 500
+    mockRefreshBalance.mockResolvedValue(undefined)
+    mockIsSphinx.mockReturnValue(false)
+    mockHasWebLN.mockReturnValue(false)
+    mockDecodeInvoiceAmountSats.mockReturnValue(200)
+    mockDecodeInvoiceExpiry.mockReturnValue(null)
+    mockUseInvoiceCountdown.mockReturnValue({ secondsLeft: 120, expired: false })
+    mockWithdraw.mockResolvedValue({ success: true })
+    cookieStorage.setItem("l402", JSON.stringify({ macaroon: "mac123", preimage: "" }))
+  })
+
+  it("shows Withdraw button when hasExistingL402 is true", () => {
+    render(<BudgetModal />)
+    expect(screen.getByRole("button", { name: /Withdraw/i })).toBeInTheDocument()
+  })
+
+  it("navigates to withdraw step on Withdraw button click", async () => {
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+  })
+
+  it("Withdraw button is disabled when no L402 token", () => {
+    cookieStorage.removeItem("l402")
+    render(<BudgetModal />)
+    const btn = screen.getByRole("button", { name: /Withdraw/i })
+    expect(btn).toBeDisabled()
+  })
+
+  it("success path: shows success step and calls refreshBalance", async () => {
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.change(screen.getByPlaceholderText(/Paste Lightning invoice/i), {
+      target: { value: "lnbc200u1test" },
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Withdrawal/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText(/Withdrawal complete/i)).toBeInTheDocument()
+    )
+    expect(mockRefreshBalance).toHaveBeenCalled()
+  })
+
+  it("shows insufficient balance error when decoded amount exceeds budget", async () => {
+    mockDecodeInvoiceAmountSats.mockReturnValue(1000) // > budget of 500
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.change(screen.getByPlaceholderText(/Paste Lightning invoice/i), {
+      target: { value: "lnbc1000u1test" },
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Withdrawal/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText(/Insufficient balance for withdrawal/i)).toBeInTheDocument()
+    )
+    expect(mockWithdraw).not.toHaveBeenCalled()
+  })
+
+  it("shows below-minimum error when decoded amount < 100 sats", async () => {
+    mockDecodeInvoiceAmountSats.mockReturnValue(50)
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.change(screen.getByPlaceholderText(/Paste Lightning invoice/i), {
+      target: { value: "lnbc50u1test" },
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Withdrawal/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText(/Minimum withdrawal is 100 sats/i)).toBeInTheDocument()
+    )
+    expect(mockWithdraw).not.toHaveBeenCalled()
+  })
+
+  it("shows expired invoice error when invoice is expired", async () => {
+    const pastTimestamp = Math.floor(Date.now() / 1000) - 100
+    mockDecodeInvoiceExpiry.mockReturnValue(pastTimestamp)
+    mockDecodeInvoiceAmountSats.mockReturnValue(200)
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.change(screen.getByPlaceholderText(/Paste Lightning invoice/i), {
+      target: { value: "lnbc200u1expired" },
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Withdrawal/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText(/Invoice has expired/i)).toBeInTheDocument()
+    )
+    expect(mockWithdraw).not.toHaveBeenCalled()
+  })
+
+  it("shows amountless invoice error when decodeInvoiceAmountSats returns null", async () => {
+    mockDecodeInvoiceAmountSats.mockReturnValue(null)
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.change(screen.getByPlaceholderText(/Paste Lightning invoice/i), {
+      target: { value: "lnbcamountless" },
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Withdrawal/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText(/Invoice must specify an amount/i)).toBeInTheDocument()
+    )
+    expect(mockWithdraw).not.toHaveBeenCalled()
+  })
+
+  it("shows refund copy on PAYMENT_FAILED server error", async () => {
+    mockWithdraw.mockRejectedValue({ errorCode: "PAYMENT_FAILED" })
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.change(screen.getByPlaceholderText(/Paste Lightning invoice/i), {
+      target: { value: "lnbc200u1test" },
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Withdrawal/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText(/Payment failed — your balance has been refunded/i)).toBeInTheDocument()
+    )
+  })
+
+  it("back button from withdraw returns to balance", async () => {
+    render(<BudgetModal />)
+    fireEvent.click(screen.getByRole("button", { name: /Withdraw/i }))
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/Paste Lightning invoice/i)).toBeInTheDocument()
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Go back/i }))
+
+    await waitFor(() =>
+      expect(screen.getByText("Top Up")).toBeInTheDocument()
+    )
+    expect(screen.queryByPlaceholderText(/Paste Lightning invoice/i)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/lib/__tests__/invoice-utils.test.ts b/src/lib/__tests__/invoice-utils.test.ts
index 4857bde..bd3172a 100644
--- a/src/lib/__tests__/invoice-utils.test.ts
+++ b/src/lib/__tests__/invoice-utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest"
-import { decodeInvoiceExpiry } from "@/lib/invoice-utils"
+import { decodeInvoiceExpiry, decodeInvoiceAmountSats } from "@/lib/invoice-utils"
 
 // Valid invoice from light-bolt11-decoder test suite
 // timestamp: 1648859703, expiry: 172800 → expires at 1649032503
@@ -25,3 +25,21 @@ describe("decodeInvoiceExpiry", () => {
     expect(decodeInvoiceExpiry("lnbc_invalid_garbage_xyz")).toBeNull()
   })
 })
+
+// lnbc20u = 20 * 100 μBTC = 2000 sats
+// The VALID_INVOICE above encodes 20u = 2000 sats
+describe("decodeInvoiceAmountSats", () => {
+  it("returns correct sats for a valid BOLT11 invoice with amount", () => {
+    // lnbc20u = 20 microBTC = 2000 sats (20 * 100,000 msats / 1000)
+    const result = decodeInvoiceAmountSats(VALID_INVOICE)
+    expect(result).toBe(2000)
+  })
+
+  it("returns null for a garbage string", () => {
+    expect(decodeInvoiceAmountSats("not-a-bolt11")).toBeNull()
+  })
+
+  it("returns null for an empty string", () => {
+    expect(decodeInvoiceAmountSats("")).toBeNull()
+  })
+})
diff --git a/src/lib/__tests__/withdraw.test.ts b/src/lib/__tests__/withdraw.test.ts
new file mode 100644
index 0000000..2234ff4
--- /dev/null
+++ b/src/lib/__tests__/withdraw.test.ts
@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, beforeEach } from "vitest"
+
+// vi.mock calls are hoisted — declare factory functions using vi.hoisted
+const { mockApiPostHoisted, mockIsMocksEnabledHoisted, mockMockTransactionsHoisted, mockDecodeInvoiceAmountSatsHoisted } = vi.hoisted(() => {
+  const mockApiPost = vi.fn()
+  let isMocksEnabled = false
+  const mockTransactions: { transactions: Array<{ action: string; type: string; amount: number; created_at: string }> } = { transactions: [] }
+  const mockDecodeInvoiceAmountSats = vi.fn().mockReturnValue(500)
+  return {
+    mockApiPostHoisted: mockApiPost,
+    mockIsMocksEnabledHoisted: { value: isMocksEnabled },
+    mockMockTransactionsHoisted: mockTransactions,
+    mockDecodeInvoiceAmountSatsHoisted: mockDecodeInvoiceAmountSats,
+  }
+})
+
+vi.mock("@/lib/api", () => ({
+  api: {
+    get: vi.fn(),
+    post: (...args: unknown[]) => mockApiPostHoisted(...args),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+vi.mock("@/lib/invoice-utils", () => ({
+  decodeInvoiceExpiry: vi.fn().mockReturnValue(null),
+  decodeInvoiceAmountSats: (...args: unknown[]) => mockDecodeInvoiceAmountSatsHoisted(...args),
+}))
+
+vi.mock("@/lib/mock-data", () => ({
+  isMocksEnabled: () => mockIsMocksEnabledHoisted.value,
+  MOCK_TRANSACTIONS: mockMockTransactionsHoisted,
+}))
+
+// Also need bridge/detect mocks since payment.ts imports them indirectly
+vi.mock("@/lib/sphinx/bridge", () => ({
+  getL402: vi.fn().mockResolvedValue(""),
+  getSignedMessage: vi.fn().mockResolvedValue({ signature: "", message: "" }),
+  hasWebLN: vi.fn(),
+  payInvoice: vi.fn(),
+  enable: vi.fn(),
+}))
+
+vi.mock("@/lib/sphinx/detect", () => ({
+  isSphinx: vi.fn(() => false),
+  isAndroid: vi.fn(() => false),
+}))
+
+import { withdraw } from "@/lib/sphinx/payment"
+
+describe("withdraw()", () => {
+  beforeEach(() => {
+    mockApiPostHoisted.mockReset()
+    mockIsMocksEnabledHoisted.value = false
+    mockMockTransactionsHoisted.transactions = []
+    mockDecodeInvoiceAmountSatsHoisted.mockReturnValue(500)
+  })
+
+  it("calls api.post('/withdraw', { payment_request }) in live mode", async () => {
+    mockApiPostHoisted.mockResolvedValue({ success: true })
+    const result = await withdraw("lnbc500...")
+    expect(mockApiPostHoisted).toHaveBeenCalledWith("/withdraw", { payment_request: "lnbc500..." })
+    expect(result).toEqual({ success: true })
+  })
+
+  it("short-circuits and returns { success: true } in mock mode", async () => {
+    mockIsMocksEnabledHoisted.value = true
+    const result = await withdraw("lnbc500...")
+    expect(mockApiPostHoisted).not.toHaveBeenCalled()
+    expect(result).toEqual({ success: true })
+  })
+
+  it("appends a withdrawal row to MOCK_TRANSACTIONS in mock mode", async () => {
+    mockIsMocksEnabledHoisted.value = true
+    mockDecodeInvoiceAmountSatsHoisted.mockReturnValue(500)
+    await withdraw("lnbc500...")
+    expect(mockMockTransactionsHoisted.transactions).toHaveLength(1)
+    expect(mockMockTransactionsHoisted.transactions[0]).toMatchObject({
+      action: "withdrawal",
+      type: "debit",
+      amount: 500,
+    })
+  })
+
+  it("does not append to MOCK_TRANSACTIONS when decodeInvoiceAmountSats returns null", async () => {
+    mockIsMocksEnabledHoisted.value = true
+    mockDecodeInvoiceAmountSatsHoisted.mockReturnValue(null)
+    await withdraw("lnbcamountless...")
+    expect(mockMockTransactionsHoisted.transactions).toHaveLength(0)
+  })
+})
diff --git a/src/lib/invoice-utils.ts b/src/lib/invoice-utils.ts
index 9cef3a6..3468963 100644
--- a/src/lib/invoice-utils.ts
+++ b/src/lib/invoice-utils.ts
@@ -1,5 +1,21 @@
 import { decode } from "light-bolt11-decoder"
 
+/**
+ * Decodes a BOLT11 invoice and returns the amount in satoshis,
+ * or null for amountless invoices or decode failures.
+ */
+export function decodeInvoiceAmountSats(bolt11: string): number | null {
+  try {
+    const decoded = decode(bolt11)
+    const amountSection = decoded.sections.find((s) => s.name === "amount")
+    if (!amountSection || amountSection.value == null) return null
+    // value is in millisatoshis
+    return Math.floor((amountSection.value as unknown as number) / 1000)
+  } catch {
+    return null
+  }
+}
+
 /**
  * Decodes a BOLT11 invoice string and returns the absolute expiry
  * as a Unix timestamp in seconds, or null if decoding fails.
diff --git a/src/lib/sphinx/index.ts b/src/lib/sphinx/index.ts
index 50a3804..baa6173 100644
--- a/src/lib/sphinx/index.ts
+++ b/src/lib/sphinx/index.ts
@@ -1,6 +1,6 @@
 export { isSphinx, isAndroid } from "./detect"
 export { adminKeysend } from "./keysend"
 export { enable, getSignedMessage, getL402, hasWebLN, payInvoice } from "./bridge"
-export { payL402, getPrice, topUpLsat, topUpConfirm, topUpStatus, fetchTransactionHistory, pollPaymentStatus, fetchBuyLsatChallenge, savePendingLsat, getPendingLsat, clearPendingLsat } from "./payment"
+export { payL402, getPrice, topUpLsat, topUpConfirm, topUpStatus, fetchTransactionHistory, pollPaymentStatus, fetchBuyLsatChallenge, savePendingLsat, getPendingLsat, clearPendingLsat, withdraw } from "./payment"
 export type { TopUpResponse, TransactionRow, BuyLsatChallenge, PendingLsatChallenge } from "./payment"
 export type { IsAdminResponse, SignedMessage } from "./types"
diff --git a/src/lib/sphinx/payment.ts b/src/lib/sphinx/payment.ts
index 4db0626..e47e0bc 100644
--- a/src/lib/sphinx/payment.ts
+++ b/src/lib/sphinx/payment.ts
@@ -2,6 +2,8 @@ import { Lsat } from "lsat-js"
 import { isSphinx } from "./detect"
 import { api } from "../api"
 import { cookieStorage } from "@/lib/cookie-storage"
+import { isMocksEnabled, MOCK_TRANSACTIONS } from "@/lib/mock-data"
+import { decodeInvoiceAmountSats } from "@/lib/invoice-utils"
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const sphinx = require("sphinx-bridge")
@@ -275,3 +277,21 @@ export async function getPrice(
     return 0
   }
 }
+
+export async function withdraw(
+  payment_request: string
+): Promise<{ success: boolean }> {
+  if (isMocksEnabled()) {
+    const decoded = decodeInvoiceAmountSats(payment_request)
+    if (decoded) {
+      MOCK_TRANSACTIONS.transactions.unshift({
+        action: "withdrawal",
+        type: "debit",
+        amount: decoded,
+        created_at: new Date().toISOString(),
+      })
+    }
+    return { success: true }
+  }
+  return api.post<{ success: boolean }>("/withdraw", { payment_request })
+}
diff --git a/src/lib/transaction-display.ts b/src/lib/transaction-display.ts
index e74acd7..4d54db3 100644
--- a/src/lib/transaction-display.ts
+++ b/src/lib/transaction-display.ts
@@ -7,6 +7,7 @@ const ACTION_LABELS: Record<string, string> = {
   add_content: 'Add Content',
   add_source: 'Add Source',
   payout: 'Earnings',
+  withdrawal: 'Withdrawal',
   other: 'Other',
 }
 
@@ -19,6 +20,7 @@ const ACTION_BADGE_COLORS: Record<string, string> = {
   add_content: 'bg-emerald-500/10 text-emerald-400',
   add_source: 'bg-teal-500/10 text-teal-400',
   payout: 'bg-emerald-500/10 text-emerald-400',
+  withdrawal: 'bg-red-500/10 text-red-400',
   other: 'bg-muted/40 text-muted-foreground',
 }