@wopr-network/platform-ui-core 1.25.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/__tests__/amount-selector.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { AmountSelector } from "@/components/billing/amount-selector";
+
+describe("AmountSelector", () => {
+  it("renders preset amounts", () => {
+    render(<AmountSelector onSelect={vi.fn()} />);
+    expect(screen.getByText("$10")).toBeInTheDocument();
+    expect(screen.getByText("$25")).toBeInTheDocument();
+    expect(screen.getByText("$50")).toBeInTheDocument();
+    expect(screen.getByText("$100")).toBeInTheDocument();
+  });
+
+  it("calls onSelect with chosen amount", async () => {
+    const onSelect = vi.fn();
+    render(<AmountSelector onSelect={onSelect} />);
+    await userEvent.click(screen.getByText("$25"));
+    await userEvent.click(screen.getByRole("button", { name: /continue/i }));
+    expect(onSelect).toHaveBeenCalledWith(25);
+  });
+
+  it("supports custom amount input", async () => {
+    const onSelect = vi.fn();
+    render(<AmountSelector onSelect={onSelect} />);
+    const input = screen.getByPlaceholderText(/custom/i);
+    await userEvent.type(input, "75");
+    await userEvent.click(screen.getByRole("button", { name: /continue/i }));
+    expect(onSelect).toHaveBeenCalledWith(75);
+  });
+
+  it("disables continue when no amount selected", () => {
+    render(<AmountSelector onSelect={vi.fn()} />);
+    expect(screen.getByRole("button", { name: /continue/i })).toBeDisabled();
+  });
+});

package/src/__tests__/confirmation-tracker.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ConfirmationTracker } from "@/components/billing/confirmation-tracker";
+
+describe("ConfirmationTracker", () => {
+  it("shows confirmation progress", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={8}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={false}
+      />,
+    );
+    expect(screen.getByText(/8/)).toBeInTheDocument();
+    expect(screen.getByText(/20/)).toBeInTheDocument();
+    expect(screen.getByText(/25\.00 USDT/)).toBeInTheDocument();
+  });
+
+  it("shows credited state", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={20}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={true}
+      />,
+    );
+    expect(screen.getByText(/credits applied/i)).toBeInTheDocument();
+  });
+
+  it("renders progress bar", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={10}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={false}
+      />,
+    );
+    const bar = screen.getByRole("progressbar");
+    expect(bar).toBeInTheDocument();
+  });
+
+  it("shows tx hash when provided", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={5}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={false}
+        txHash="0xabc123"
+      />,
+    );
+    expect(screen.getByText(/0xabc123/)).toBeInTheDocument();
+  });
+});

package/src/__tests__/crypto-checkout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: { children?: React.ReactNode; [key: string]: unknown }) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("qrcode.react", () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <div data-testid="qr">{value}</div>,
+}));
+
+vi.mock("@/lib/api", () => ({
+  getSupportedPaymentMethods: vi.fn().mockResolvedValue([
+    {
+      id: "BTC:mainnet",
+      type: "native",
+      token: "BTC",
+      chain: "bitcoin",
+      displayName: "Bitcoin",
+      decimals: 8,
+      displayOrder: 0,
+      iconUrl: "",
+    },
+    {
+      id: "USDT:tron",
+      type: "erc20",
+      token: "USDT",
+      chain: "tron",
+      displayName: "USDT on Tron",
+      decimals: 6,
+      displayOrder: 1,
+      iconUrl: "",
+    },
+  ]),
+  createCheckout: vi.fn().mockResolvedValue({
+    depositAddress: "THwbQb1sPiRUpUYunVQxQKc6i4LCmpP1mj",
+    displayAmount: "32.24 TRX",
+    amountUsd: 10,
+    token: "TRX",
+    chain: "tron",
+    referenceId: "trx:test",
+  }),
+  getChargeStatus: vi.fn().mockResolvedValue({
+    status: "waiting",
+    amountExpectedCents: 1000,
+    amountReceivedCents: 0,
+    confirmations: 0,
+    confirmationsRequired: 20,
+    credited: false,
+  }),
+  apiFetch: vi.fn(),
+}));
+
+import { CryptoCheckout } from "@/components/billing/crypto-checkout";
+
+describe("CryptoCheckout", () => {
+  it("renders amount selector on mount", async () => {
+    render(<CryptoCheckout />);
+    await waitFor(() => {
+      expect(screen.getByText("$25")).toBeInTheDocument();
+    });
+  });
+
+  it("advances to payment picker after selecting amount", async () => {
+    render(<CryptoCheckout />);
+    await waitFor(() => screen.getByText("$25"));
+    await userEvent.click(screen.getByText("$25"));
+    await userEvent.click(screen.getByRole("button", { name: /continue/i }));
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/deposit-view.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DepositView } from "@/components/billing/deposit-view";
+
+vi.mock("qrcode.react", () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <div data-testid="qr" data-value={value} />,
+}));
+
+const CHECKOUT = {
+  depositAddress: "THwbQb1sPiRUpUYunVQxQKc6i4LCmpP1mj",
+  displayAmount: "32.24 TRX",
+  amountUsd: 10,
+  token: "TRX",
+  chain: "tron",
+  referenceId: "trx:test123",
+};
+
+describe("DepositView", () => {
+  it("shows deposit address and amount", () => {
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    expect(screen.getByText(/32\.24 TRX/)).toBeInTheDocument();
+    expect(screen.getByText(/THwbQb1s/)).toBeInTheDocument();
+  });
+
+  it("shows waiting status", () => {
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    expect(screen.getByText(/waiting for payment/i)).toBeInTheDocument();
+  });
+
+  it("renders QR code", () => {
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    expect(screen.getByTestId("qr")).toBeInTheDocument();
+  });
+
+  it("copies address to clipboard", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    await userEvent.click(screen.getByRole("button", { name: /copy/i }));
+    expect(writeText).toHaveBeenCalledWith(CHECKOUT.depositAddress);
+  });
+});

package/src/__tests__/payment-method-picker.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { PaymentMethodPicker } from "@/components/billing/payment-method-picker";
+import type { SupportedPaymentMethod } from "@/lib/api";
+
+const METHODS: SupportedPaymentMethod[] = [
+  {
+    id: "BTC:mainnet",
+    type: "native",
+    token: "BTC",
+    chain: "bitcoin",
+    displayName: "Bitcoin",
+    decimals: 8,
+    displayOrder: 0,
+    iconUrl: "",
+  },
+  {
+    id: "USDT:tron",
+    type: "erc20",
+    token: "USDT",
+    chain: "tron",
+    displayName: "USDT on Tron",
+    decimals: 6,
+    displayOrder: 1,
+    iconUrl: "",
+  },
+  {
+    id: "ETH:base",
+    type: "native",
+    token: "ETH",
+    chain: "base",
+    displayName: "ETH on Base",
+    decimals: 18,
+    displayOrder: 2,
+    iconUrl: "",
+  },
+  {
+    id: "USDC:polygon",
+    type: "erc20",
+    token: "USDC",
+    chain: "polygon",
+    displayName: "USDC on Polygon",
+    decimals: 6,
+    displayOrder: 3,
+    iconUrl: "",
+  },
+  {
+    id: "DOGE:dogecoin",
+    type: "native",
+    token: "DOGE",
+    chain: "dogecoin",
+    displayName: "Dogecoin",
+    decimals: 8,
+    displayOrder: 4,
+    iconUrl: "",
+  },
+];
+
+describe("PaymentMethodPicker", () => {
+  it("renders all methods", () => {
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
+    expect(screen.getByText("Bitcoin")).toBeInTheDocument();
+    expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
+  });
+
+  it("filters by search text", async () => {
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
+    await userEvent.type(screen.getByPlaceholderText(/search/i), "tron");
+    expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
+    expect(screen.queryByText("Bitcoin")).not.toBeInTheDocument();
+  });
+
+  it("filters by Stablecoins pill", async () => {
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
+    await userEvent.click(screen.getByText("Stablecoins"));
+    expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
+    expect(screen.getByText("USDC on Polygon")).toBeInTheDocument();
+    expect(screen.queryByText("Bitcoin")).not.toBeInTheDocument();
+  });
+
+  it("calls onSelect when a method is clicked", async () => {
+    const onSelect = vi.fn();
+    render(<PaymentMethodPicker methods={METHODS} onSelect={onSelect} />);
+    await userEvent.click(screen.getByText("Bitcoin"));
+    expect(onSelect).toHaveBeenCalledWith(METHODS[0]);
+  });
+});

package/src/app/(dashboard)/billing/credits/page.tsx

@@ -5,9 +5,9 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import { AutoTopupCard } from "@/components/billing/auto-topup-card";
 import { BuyCreditsPanel } from "@/components/billing/buy-credits-panel";
-import { BuyCryptoCreditPanel } from "@/components/billing/buy-crypto-credits-panel";
 import { CouponInput } from "@/components/billing/coupon-input";
 import { CreditBalance } from "@/components/billing/credit-balance";
+import { CryptoCheckout } from "@/components/billing/crypto-checkout";
 import { DividendBanner } from "@/components/billing/dividend-banner";
 import { DividendEligibility } from "@/components/billing/dividend-eligibility";
 import { DividendPoolStats } from "@/components/billing/dividend-pool-stats";
@@ -200,7 +200,7 @@ function CreditsContent() {
 
       <BuyCreditsPanel />
       <CouponInput />
-      <BuyCryptoCreditPanel />
+      <CryptoCheckout />
       <AutoTopupCard />
       <TransactionHistory />
 

package/src/components/billing/amount-selector.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const PRESETS = [10, 25, 50, 100];
+
+interface AmountSelectorProps {
+  onSelect: (amount: number) => void;
+}
+
+export function AmountSelector({ onSelect }: AmountSelectorProps) {
+  const [selected, setSelected] = useState<number | null>(null);
+  const [custom, setCustom] = useState("");
+
+  const activeAmount = custom ? Number(custom) : selected;
+  const isValid = activeAmount !== null && activeAmount >= 10 && Number.isFinite(activeAmount);
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+        {PRESETS.map((amt) => (
+          <button
+            key={amt}
+            type="button"
+            onClick={() => {
+              setSelected(amt);
+              setCustom("");
+            }}
+            className={cn(
+              "rounded-md border p-3 text-lg font-bold transition-colors hover:bg-accent",
+              selected === amt && !custom
+                ? "border-primary bg-primary/5 ring-1 ring-primary"
+                : "border-border",
+            )}
+          >
+            ${amt}
+          </button>
+        ))}
+      </div>
+      <Input
+        type="number"
+        min={10}
+        placeholder="Custom amount..."
+        value={custom}
+        onChange={(e) => {
+          setCustom(e.target.value);
+          setSelected(null);
+        }}
+      />
+      <Button
+        onClick={() => {
+          if (isValid && activeAmount !== null) {
+            onSelect(activeAmount);
+          }
+        }}
+        disabled={!isValid}
+        className="w-full"
+      >
+        Continue to payment
+      </Button>
+    </div>
+  );
+}

package/src/components/billing/buy-crypto-credits-panel.tsx

@@ -1,304 +1,3 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { Check, CircleDollarSign, Copy } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  type CheckoutResult,
-  createCheckout,
-  getChargeStatus,
-  getSupportedPaymentMethods,
-  type SupportedPaymentMethod,
-} from "@/lib/api";
-import { cn } from "@/lib/utils";
-
-type PaymentProgress = {
-  status: "waiting" | "partial" | "confirming" | "credited" | "expired" | "failed";
-  amountExpectedCents: number;
-  amountReceivedCents: number;
-  confirmations: number;
-  confirmationsRequired: number;
-};
-
-const AMOUNTS = [
-  { value: 10, label: "$10" },
-  { value: 25, label: "$25" },
-  { value: 50, label: "$50" },
-  { value: 100, label: "$100" },
-];
-
-function CopyButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [text]);
-
-  return (
-    <Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-2">
-      {copied ? <Check className="h-3.5 w-3.5 text-primary" /> : <Copy className="h-3.5 w-3.5" />}
-    </Button>
-  );
-}
-
-export function BuyCryptoCreditPanel() {
-  const [methods, setMethods] = useState<SupportedPaymentMethod[]>([]);
-  const [selectedMethod, setSelectedMethod] = useState<SupportedPaymentMethod | null>(null);
-  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [checkout, setCheckout] = useState<CheckoutResult | null>(null);
-  const [paymentProgress, setPaymentProgress] = useState<PaymentProgress | null>(null);
-
-  // Poll charge status after checkout
-  useEffect(() => {
-    if (!checkout?.referenceId) {
-      setPaymentProgress(null);
-      return;
-    }
-    setPaymentProgress({
-      status: "waiting",
-      amountExpectedCents: 0,
-      amountReceivedCents: 0,
-      confirmations: 0,
-      confirmationsRequired: 0,
-    });
-    const interval = setInterval(async () => {
-      try {
-        const res = await getChargeStatus(checkout.referenceId);
-        let status: PaymentProgress["status"] = "waiting";
-        if (res.credited) {
-          status = "credited";
-        } else if (res.status === "expired" || res.status === "failed") {
-          status = res.status;
-        } else if (
-          res.amountReceivedCents >= res.amountExpectedCents &&
-          res.amountReceivedCents > 0
-        ) {
-          status = "confirming";
-        } else if (res.amountReceivedCents > 0) {
-          status = "partial";
-        }
-        setPaymentProgress({
-          status,
-          amountExpectedCents: res.amountExpectedCents,
-          amountReceivedCents: res.amountReceivedCents,
-          confirmations: res.confirmations,
-          confirmationsRequired: res.confirmationsRequired,
-        });
-        if (status === "credited" || status === "expired" || status === "failed") {
-          clearInterval(interval);
-        }
-      } catch {
-        // Ignore poll errors
-      }
-    }, 5000);
-    return () => clearInterval(interval);
-  }, [checkout?.referenceId]);
-
-  // Fetch available payment methods from backend on mount
-  useEffect(() => {
-    getSupportedPaymentMethods()
-      .then((m) => {
-        if (m.length > 0) {
-          setMethods(m);
-          setSelectedMethod(m[0]);
-        }
-      })
-      .catch(() => {
-        // Backend unavailable — panel stays empty
-      });
-  }, []);
-
-  async function handleCheckout() {
-    if (selectedAmount === null || !selectedMethod) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await createCheckout(selectedMethod.id, selectedAmount);
-      setCheckout(result);
-    } catch {
-      setError("Checkout failed. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function handleReset() {
-    setCheckout(null);
-    setSelectedAmount(null);
-    setError(null);
-  }
-
-  if (methods.length === 0) return null;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 8 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4, ease: "easeOut", delay: 0.1 }}
-    >
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <CircleDollarSign className="h-4 w-4 text-primary" />
-            Pay with Crypto
-          </CardTitle>
-          <div className="flex flex-wrap gap-2 pt-1">
-            {methods.map((m) => (
-              <button
-                key={m.id}
-                type="button"
-                onClick={() => {
-                  setSelectedMethod(m);
-                  handleReset();
-                }}
-                className={cn(
-                  "flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-colors",
-                  selectedMethod?.id === m.id
-                    ? "bg-primary/10 text-primary"
-                    : "text-muted-foreground hover:text-foreground",
-                )}
-              >
-                {/* biome-ignore lint/performance/noImgElement: external dynamic URLs from backend, not static assets */}
-                <img
-                  src={m.iconUrl}
-                  alt={m.token}
-                  className="h-4 w-4"
-                  loading="lazy"
-                  onError={(e) => {
-                    e.currentTarget.style.display = "none";
-                  }}
-                />
-                {m.token}
-              </button>
-            ))}
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {checkout ? (
-            <motion.div
-              initial={{ opacity: 0, y: 8 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="space-y-4"
-            >
-              <div className="rounded-md border p-4 space-y-3">
-                <div className="flex items-center justify-between">
-                  <p className="text-sm text-muted-foreground">
-                    Send{" "}
-                    <span className="font-mono font-bold text-foreground">
-                      {checkout.displayAmount}
-                    </span>{" "}
-                    to:
-                  </p>
-                  <Badge variant="outline" className="text-xs">
-                    {checkout.token} on {checkout.chain}
-                  </Badge>
-                </div>
-                <div className="flex items-center gap-2 rounded-md bg-muted/50 px-3 py-2">
-                  <code className="flex-1 text-xs font-mono break-all text-foreground">
-                    {checkout.depositAddress}
-                  </code>
-                  <CopyButton text={checkout.depositAddress} />
-                </div>
-                {checkout.priceCents && (
-                  <p className="text-xs text-muted-foreground">
-                    Price at checkout: ${(checkout.priceCents / 100).toFixed(2)} per{" "}
-                    {checkout.token}
-                  </p>
-                )}
-                <p className="text-xs text-muted-foreground">
-                  Only send {checkout.token} on the {checkout.chain} network.
-                </p>
-                {paymentProgress?.status === "waiting" && (
-                  <p className="text-xs text-yellow-500 animate-pulse">Waiting for payment...</p>
-                )}
-                {paymentProgress?.status === "partial" && (
-                  <p className="text-xs text-blue-500">
-                    Received ${(paymentProgress.amountReceivedCents / 100).toFixed(2)} of $
-                    {(paymentProgress.amountExpectedCents / 100).toFixed(2)} — send $
-                    {(
-                      (paymentProgress.amountExpectedCents - paymentProgress.amountReceivedCents) /
-                      100
-                    ).toFixed(2)}{" "}
-                    more
-                  </p>
-                )}
-                {paymentProgress?.status === "confirming" && (
-                  <p className="text-xs text-blue-500">
-                    Payment received. Confirming ({paymentProgress.confirmations} of{" "}
-                    {paymentProgress.confirmationsRequired})...
-                  </p>
-                )}
-                {paymentProgress?.status === "credited" && (
-                  <p className="text-xs text-green-500 font-medium">
-                    Payment confirmed! Credits added.
-                  </p>
-                )}
-                {paymentProgress?.status === "expired" && (
-                  <p className="text-xs text-red-500">Payment expired.</p>
-                )}
-                {paymentProgress?.status === "failed" && (
-                  <p className="text-xs text-red-500">Payment failed.</p>
-                )}
-              </div>
-              {paymentProgress?.status === "credited" ? (
-                <Button variant="outline" size="sm" onClick={handleReset}>
-                  Done
-                </Button>
-              ) : paymentProgress?.status === "expired" || paymentProgress?.status === "failed" ? (
-                <div className="flex gap-2">
-                  <Button variant="outline" size="sm" onClick={handleReset}>
-                    Try Again
-                  </Button>
-                </div>
-              ) : (
-                <Button variant="ghost" size="sm" onClick={handleReset}>
-                  Cancel
-                </Button>
-              )}
-            </motion.div>
-          ) : (
-            <>
-              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                {AMOUNTS.map((amt) => (
-                  <motion.button
-                    key={amt.value}
-                    type="button"
-                    onClick={() => setSelectedAmount(amt.value)}
-                    whileHover={{ scale: 1.03 }}
-                    whileTap={{ scale: 0.98 }}
-                    transition={{ type: "spring", stiffness: 400, damping: 25 }}
-                    className={cn(
-                      "flex flex-col items-center gap-1 rounded-md border p-3 text-sm font-medium transition-colors hover:bg-accent",
-                      selectedAmount === amt.value
-                        ? "border-primary bg-primary/5 ring-1 ring-primary shadow-[0_0_15px_rgba(0,255,65,0.3)]"
-                        : "border-border",
-                    )}
-                  >
-                    <span className="text-lg font-bold">{amt.label}</span>
-                  </motion.button>
-                ))}
-              </div>
-
-              {error && <p className="text-sm text-destructive">{error}</p>}
-
-              <Button
-                onClick={handleCheckout}
-                disabled={selectedAmount === null || !selectedMethod || loading}
-                variant="outline"
-                className="w-full sm:w-auto"
-              >
-                {loading ? "Creating checkout..." : `Pay with ${selectedMethod?.token ?? "Crypto"}`}
-              </Button>
-            </>
-          )}
-        </CardContent>
-      </Card>
-    </motion.div>
-  );
-}
+export { CryptoCheckout as BuyCryptoCreditPanel } from "./crypto-checkout";

package/src/components/billing/confirmation-tracker.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Check } from "lucide-react";
+
+interface ConfirmationTrackerProps {
+	confirmations: number;
+	confirmationsRequired: number;
+	displayAmount: string;
+	credited: boolean;
+	txHash?: string;
+}
+
+export function ConfirmationTracker({
+	confirmations,
+	confirmationsRequired,
+	displayAmount,
+	credited,
+	txHash,
+}: ConfirmationTrackerProps) {
+	const pct =
+		confirmationsRequired > 0
+			? Math.min(100, Math.round((confirmations / confirmationsRequired) * 100))
+			: 0;
+	const detected = confirmations > 0 || credited;
+
+	return (
+		<div className="space-y-4 text-center">
+			<p className="text-sm text-muted-foreground">
+				{credited ? "Payment complete!" : "Payment received!"}
+			</p>
+			<p className="text-xl font-semibold">{displayAmount}</p>
+
+			<div className="rounded-lg border border-border p-3 space-y-2">
+				<div className="flex justify-between text-xs">
+					<span className="text-muted-foreground">Confirmations</span>
+					<span>
+						{confirmations} / {confirmationsRequired}
+					</span>
+				</div>
+				<div
+					className="h-1.5 rounded-full bg-muted overflow-hidden"
+					role="progressbar"
+					aria-valuenow={pct}
+					aria-valuemin={0}
+					aria-valuemax={100}
+				>
+					<div
+						className="h-full rounded-full bg-primary transition-all duration-500"
+						style={{ width: `${pct}%` }}
+					/>
+				</div>
+			</div>
+
+			<div className="space-y-2 text-left">
+				<div className="flex items-center gap-2">
+					<div
+						className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${detected ? "bg-green-500 text-white" : "bg-muted"}`}
+					>
+						{detected && <Check className="h-2.5 w-2.5" />}
+					</div>
+					<span
+						className={`text-xs ${detected ? "text-muted-foreground" : "text-muted-foreground/50"}`}
+					>
+						Payment detected
+					</span>
+				</div>
+				<div className="flex items-center gap-2">
+					<div
+						className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${credited ? "bg-green-500 text-white" : detected ? "bg-primary text-white animate-pulse" : "bg-muted"}`}
+					>
+						{credited ? (
+							<Check className="h-2.5 w-2.5" />
+						) : detected ? (
+							<span>&middot;</span>
+						) : null}
+					</div>
+					<span
+						className={`text-xs ${detected ? "text-foreground" : "text-muted-foreground/50"}`}
+					>
+						{credited ? "Confirmed" : "Confirming on chain"}
+					</span>
+				</div>
+				<div className="flex items-center gap-2">
+					<div
+						className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${credited ? "bg-green-500 text-white" : "bg-muted"}`}
+					>
+						{credited && <Check className="h-2.5 w-2.5" />}
+					</div>
+					<span
+						className={`text-xs ${credited ? "text-foreground" : "text-muted-foreground/50"}`}
+					>
+						Credits applied
+					</span>
+				</div>
+			</div>
+
+			{txHash && (
+				<p className="text-xs text-muted-foreground font-mono truncate">
+					tx: {txHash}
+				</p>
+			)}
+		</div>
+	);
+}

package/src/components/billing/crypto-checkout.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { CircleDollarSign } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  type CheckoutResult,
+  createCheckout,
+  getChargeStatus,
+  getSupportedPaymentMethods,
+  type SupportedPaymentMethod,
+} from "@/lib/api";
+import { AmountSelector } from "./amount-selector";
+import { ConfirmationTracker } from "./confirmation-tracker";
+import { DepositView } from "./deposit-view";
+import { PaymentMethodPicker } from "./payment-method-picker";
+
+type Step = "amount" | "method" | "deposit" | "confirming";
+type PaymentStatus = "waiting" | "partial" | "confirming" | "credited" | "expired" | "failed";
+
+export function CryptoCheckout() {
+  const [step, setStep] = useState<Step>("amount");
+  const [methods, setMethods] = useState<SupportedPaymentMethod[]>([]);
+  const [amountUsd, setAmountUsd] = useState(0);
+  const [checkout, setCheckout] = useState<CheckoutResult | null>(null);
+  const [status, setStatus] = useState<PaymentStatus>("waiting");
+  const [confirmations, setConfirmations] = useState(0);
+  const [confirmationsRequired, setConfirmationsRequired] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    getSupportedPaymentMethods()
+      .then(setMethods)
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!checkout?.referenceId) return;
+    const interval = setInterval(async () => {
+      try {
+        const res = await getChargeStatus(checkout.referenceId);
+        setConfirmations(res.confirmations);
+        setConfirmationsRequired(res.confirmationsRequired);
+        if (res.credited) {
+          setStatus("credited");
+          setStep("confirming");
+          clearInterval(interval);
+        } else if (res.status === "expired" || res.status === "failed") {
+          setStatus(res.status as PaymentStatus);
+          clearInterval(interval);
+        } else if (
+          res.amountReceivedCents > 0 &&
+          res.amountReceivedCents >= res.amountExpectedCents
+        ) {
+          setStatus("confirming");
+          setStep("confirming");
+        } else if (res.amountReceivedCents > 0) {
+          setStatus("partial");
+        }
+      } catch {
+        /* ignore poll errors */
+      }
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [checkout?.referenceId]);
+
+  const handleAmount = useCallback((amt: number) => {
+    setAmountUsd(amt);
+    setStep("method");
+  }, []);
+
+  const handleMethod = useCallback(
+    async (method: SupportedPaymentMethod) => {
+      setLoading(true);
+      try {
+        const result = await createCheckout(method.id, amountUsd);
+        setCheckout(result);
+        setStatus("waiting");
+        setStep("deposit");
+      } catch {
+        // Stay on method step
+      } finally {
+        setLoading(false);
+      }
+    },
+    [amountUsd],
+  );
+
+  const handleReset = useCallback(() => {
+    setStep("amount");
+    setCheckout(null);
+    setStatus("waiting");
+    setAmountUsd(0);
+    setConfirmations(0);
+  }, []);
+
+  if (methods.length === 0) return null;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <CircleDollarSign className="h-4 w-4 text-primary" />
+            Pay with Crypto
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <AnimatePresence mode="wait">
+            {step === "amount" && (
+              <motion.div
+                key="amount"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+              >
+                <AmountSelector onSelect={handleAmount} />
+              </motion.div>
+            )}
+            {step === "method" && (
+              <motion.div
+                key="method"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+              >
+                <PaymentMethodPicker
+                  methods={methods}
+                  onSelect={handleMethod}
+                  onBack={() => setStep("amount")}
+                />
+                {loading && (
+                  <p className="mt-2 text-xs text-muted-foreground animate-pulse">
+                    Creating checkout...
+                  </p>
+                )}
+              </motion.div>
+            )}
+            {step === "deposit" && checkout && (
+              <motion.div
+                key="deposit"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+              >
+                <DepositView checkout={checkout} status={status} onBack={() => setStep("method")} />
+              </motion.div>
+            )}
+            {step === "confirming" && checkout && (
+              <motion.div
+                key="confirming"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+              >
+                <ConfirmationTracker
+                  confirmations={confirmations}
+                  confirmationsRequired={confirmationsRequired}
+                  displayAmount={checkout.displayAmount}
+                  credited={status === "credited"}
+                />
+                {status === "credited" && (
+                  <button
+                    type="button"
+                    onClick={handleReset}
+                    className="mt-4 text-sm text-primary hover:underline"
+                  >
+                    Done — buy more credits
+                  </button>
+                )}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}

package/src/components/billing/deposit-view.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import type { CheckoutResult } from "@/lib/api";
+
+interface DepositViewProps {
+  checkout: CheckoutResult;
+  status: "waiting" | "partial" | "confirming" | "credited" | "expired" | "failed";
+  onBack: () => void;
+}
+
+export function DepositView({ checkout, status, onBack }: DepositViewProps) {
+  const [copied, setCopied] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(30 * 60);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(checkout.depositAddress);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [checkout.depositAddress]);
+
+  useEffect(() => {
+    if (status !== "waiting") return;
+    const timer = setInterval(() => setTimeLeft((t) => Math.max(0, t - 1)), 1000);
+    return () => clearInterval(timer);
+  }, [status]);
+
+  const mins = Math.floor(timeLeft / 60);
+  const secs = timeLeft % 60;
+
+  return (
+    <div className="space-y-4 text-center">
+      <button
+        type="button"
+        onClick={onBack}
+        className="text-sm text-muted-foreground hover:text-foreground self-start"
+      >
+        &larr; Back
+      </button>
+      <p className="text-sm text-muted-foreground">Send exactly</p>
+      <p className="text-2xl font-semibold">{checkout.displayAmount}</p>
+      <p className="text-xs text-muted-foreground">
+        on {checkout.chain} &middot; ${checkout.amountUsd.toFixed(2)} USD
+      </p>
+      <div className="mx-auto w-fit rounded-lg border border-border bg-background p-3" aria-hidden="true">
+        <QRCodeSVG value={checkout.depositAddress} size={140} bgColor="hsl(var(--background))" fgColor="hsl(var(--foreground))" />
+      </div>
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2">
+        <code className="flex-1 truncate text-xs font-mono">{checkout.depositAddress}</code>
+        <Button variant="ghost" size="sm" onClick={handleCopy} aria-label="Copy address">
+          {copied ? (
+            <Check className="h-3.5 w-3.5 text-primary" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      </div>
+      <div className="flex items-center justify-center gap-2 rounded-lg border border-border p-2">
+        {status === "waiting" && (
+          <>
+            <span className="h-2 w-2 animate-pulse rounded-full bg-yellow-500" />
+            <span className="text-xs text-yellow-500">Waiting for payment...</span>
+            <span className="text-xs text-muted-foreground">
+              &middot; {mins}:{secs.toString().padStart(2, "0")}
+            </span>
+          </>
+        )}
+        {status === "partial" && (
+          <>
+            <span className="h-2 w-2 rounded-full bg-blue-500" />
+            <span className="text-xs text-blue-500">Partial payment received</span>
+          </>
+        )}
+        {status === "expired" && <span className="text-xs text-destructive">Payment expired</span>}
+        {status === "failed" && <span className="text-xs text-destructive">Payment failed</span>}
+      </div>
+    </div>
+  );
+}

package/src/components/billing/payment-method-picker.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Input } from "@/components/ui/input";
+import type { SupportedPaymentMethod } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+type Filter = "popular" | "stablecoins" | "l2" | "native";
+
+const FILTERS: { key: Filter; label: string }[] = [
+  { key: "popular", label: "Popular" },
+  { key: "stablecoins", label: "Stablecoins" },
+  { key: "l2", label: "L2s" },
+  { key: "native", label: "Native" },
+];
+
+const STABLECOIN_TOKENS = new Set(["USDC", "USDT", "DAI"]);
+const L2_CHAINS = new Set(["base", "arbitrum", "optimism", "polygon"]);
+const POPULAR_COUNT = 6;
+
+interface PaymentMethodPickerProps {
+  methods: SupportedPaymentMethod[];
+  onSelect: (method: SupportedPaymentMethod) => void;
+  onBack?: () => void;
+}
+
+export function PaymentMethodPicker({
+  methods,
+  onSelect,
+  onBack,
+}: PaymentMethodPickerProps) {
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState<Filter>("popular");
+
+  const filtered = useMemo(() => {
+    if (search) {
+      const q = search.toLowerCase();
+      return methods.filter(
+        (m) =>
+          m.token.toLowerCase().includes(q) ||
+          m.chain.toLowerCase().includes(q) ||
+          m.displayName.toLowerCase().includes(q),
+      );
+    }
+
+    switch (filter) {
+      case "popular":
+        return methods.slice(0, POPULAR_COUNT);
+      case "stablecoins":
+        return methods.filter((m) => STABLECOIN_TOKENS.has(m.token));
+      case "l2":
+        return methods.filter((m) => L2_CHAINS.has(m.chain));
+      case "native":
+        return methods.filter((m) => m.type === "native" && !L2_CHAINS.has(m.chain));
+      default:
+        return methods;
+    }
+  }, [methods, search, filter]);
+
+  return (
+    <div className="space-y-3">
+      {onBack && (
+        <button
+          type="button"
+          onClick={onBack}
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          &larr; Back
+        </button>
+      )}
+      <Input
+        placeholder="Search token or network..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      <div className="flex flex-wrap gap-2">
+        {FILTERS.map((f) => (
+          <button
+            key={f.key}
+            type="button"
+            onClick={() => {
+              setFilter(f.key);
+              setSearch("");
+            }}
+            className={cn(
+              "rounded-full px-3 py-1 text-xs font-medium transition-colors",
+              filter === f.key && !search
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+      <div className="max-h-[320px] space-y-2 overflow-y-auto">
+        {filtered.map((m) => (
+          <button
+            key={m.id}
+            type="button"
+            onClick={() => onSelect(m)}
+            className="flex w-full items-center justify-between rounded-lg border border-border p-3 text-left transition-colors hover:bg-accent"
+          >
+            <div className="flex items-center gap-3">
+              {m.iconUrl && (
+                // biome-ignore lint/performance/noImgElement: external dynamic URLs
+                <img
+                  src={m.iconUrl}
+                  alt={m.token}
+                  className="h-7 w-7 rounded-full"
+                  loading="lazy"
+                  onError={(e) => {
+                    e.currentTarget.style.display = "none";
+                  }}
+                />
+              )}
+              <div>
+                <div className="text-sm font-medium">{m.displayName}</div>
+                <div className="text-xs text-muted-foreground">
+                  {m.token} &middot; {m.chain}
+                  {m.type === "erc20" ? " · ERC-20" : " · Native"}
+                </div>
+              </div>
+            </div>
+          </button>
+        ))}
+        {filtered.length === 0 && (
+          <p className="py-4 text-center text-sm text-muted-foreground">No payment methods found</p>
+        )}
+      </div>
+    </div>
+  );
+}