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

package/src/components/admin/products/nav-editor.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: string | null;
+  sortOrder: number;
+  requiresRole: string | null;
+  enabled: boolean;
+}
+
+interface NavEditorProps {
+  initial: NavItem[];
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+function newItem(sortOrder: number): NavItem {
+  return {
+    id: crypto.randomUUID(),
+    label: "",
+    href: "",
+    icon: null,
+    sortOrder,
+    requiresRole: null,
+    enabled: true,
+  };
+}
+
+export function NavEditor({ initial, onSave }: NavEditorProps) {
+  const [items, setItems] = useState<NavItem[]>(
+    [...initial].sort((a, b) => a.sortOrder - b.sortOrder),
+  );
+  const [saving, setSaving] = useState(false);
+
+  function update(id: string, patch: Partial<NavItem>) {
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, ...patch } : item)));
+  }
+
+  function remove(id: string) {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  function move(index: number, direction: "up" | "down") {
+    setItems((prev) => {
+      const next = [...prev];
+      const target = direction === "up" ? index - 1 : index + 1;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next.map((item, i) => ({ ...item, sortOrder: i }));
+    });
+  }
+
+  function addItem() {
+    setItems((prev) => [...prev, newItem(prev.length)]);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const normalized = items.map((item, i) => ({ ...item, sortOrder: i }));
+      await onSave("updateNavItems", normalized);
+      toast.success("Navigation saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save navigation"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Navigation Items</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {items.length === 0 && (
+          <p className="text-sm text-muted-foreground">No navigation items. Add one below.</p>
+        )}
+        {items.map((item, index) => (
+          <div
+            key={item.id}
+            className="flex items-start gap-3 rounded-md border border-border bg-muted/30 p-3"
+          >
+            <div className="flex flex-col gap-1 pt-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => move(index, "up")}
+                disabled={index === 0}
+              >
+                <ArrowUp className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => move(index, "down")}
+                disabled={index === items.length - 1}
+              >
+                <ArrowDown className="h-3 w-3" />
+              </Button>
+            </div>
+            <div className="grid flex-1 grid-cols-2 gap-2 sm:grid-cols-4">
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Label</Label>
+                <Input
+                  value={item.label}
+                  onChange={(e) => update(item.id, { label: e.target.value })}
+                  placeholder="Dashboard"
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Href</Label>
+                <Input
+                  value={item.href}
+                  onChange={(e) => update(item.id, { href: e.target.value })}
+                  placeholder="/dashboard"
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Icon</Label>
+                <Input
+                  value={item.icon ?? ""}
+                  onChange={(e) => update(item.id, { icon: e.target.value || null })}
+                  placeholder="LayoutDashboard"
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Requires Role</Label>
+                <Input
+                  value={item.requiresRole ?? ""}
+                  onChange={(e) => update(item.id, { requiresRole: e.target.value || null })}
+                  placeholder="platform_admin"
+                  className="h-8"
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-2 pt-5">
+              <Checkbox
+                id={`nav-enabled-${item.id}`}
+                checked={item.enabled}
+                onCheckedChange={(checked) => update(item.id, { enabled: Boolean(checked) })}
+              />
+              <Label htmlFor={`nav-enabled-${item.id}`} className="text-xs">
+                Enabled
+              </Label>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="mt-4 h-7 w-7 p-0 text-destructive hover:text-destructive"
+              onClick={() => remove(item.id)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        ))}
+        <div className="flex items-center justify-between pt-2">
+          <Button variant="outline" size="sm" onClick={addItem}>
+            <Plus className="mr-1.5 h-4 w-4" />
+            Add Item
+          </Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Navigation"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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>
+	);
+}