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

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,92 @@
+"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,185 @@
+"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(() => {
+        // silently fall back to empty methods list
+      });
+  }, []);
+
+  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,90 @@
+"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>
+  );
+}