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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.25.0",
+  "version": "1.27.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__/billing.test.tsx

@@ -408,8 +408,8 @@ describe("Payment page", () => {
     const amountCells = await screen.findAllByText("$29.00");
     // inv-001 has no downloadUrl and no hostedUrl — the row should render no <a> element at all
     // The 3rd amount cell belongs to inv-001 (oldest invoice, no URLs)
-    const inv001Row = amountCells[2].closest("tr")!;
-    expect(within(inv001Row).queryByRole("link")).toBeNull();
+    const inv001Row = amountCells[2].closest("tr");
+    expect(inv001Row ? within(inv001Row).queryByRole("link") : null).toBeNull();
   });
 
   it("renders BYOK messaging", async () => {

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/app/(dashboard)/onboarding/page.tsx

@@ -32,7 +32,6 @@ export default function OnboardingPage() {
   const [botName, setBotName] = useState("");
   const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: router.push is stable; using [router] causes infinite re-renders
   useEffect(() => {
     if (isOnboardingComplete()) {
       router.push(homePath());

package/src/app/(dashboard)/settings/profile/page.tsx

@@ -253,6 +253,7 @@ export default function ProfilePage() {
               disabled={uploading}
             >
               {profile.avatarUrl ? (
+                // biome-ignore lint/performance/noImgElement: external avatar URL — domain not configured for next/image
                 <img
                   src={profile.avatarUrl}
                   alt={profile.name}

package/src/app/admin/pool-config/page.tsx

@@ -0,0 +1,5 @@
+import { PoolConfigDashboard } from "@/components/admin/pool-config-dashboard";
+
+export default function PoolConfigPage() {
+  return <PoolConfigDashboard />;
+}

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

@@ -23,6 +23,7 @@ const adminNavItems = [
   { label: "Migrations", href: "/admin/migrations" },
   { label: "GPU", href: "/admin/gpu" },
   { label: "Fleet Updates", href: "/admin/fleet-updates" },
+  { label: "Pool", href: "/admin/pool-config" },
   { label: "Incidents", href: "/admin/incidents" },
 ];
 

package/src/components/admin/pool-config-dashboard.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { getPoolConfig, type PoolConfig, setPoolSize } from "@/lib/admin-pool-api";
+
+export function PoolConfigDashboard() {
+  const [config, setConfig] = useState<PoolConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [sizeInput, setSizeInput] = useState("");
+
+  const load = useCallback(async () => {
+    try {
+      const data = await getPoolConfig();
+      setConfig(data);
+      setSizeInput(String(data.poolSize));
+    } catch {
+      toast.error("Failed to load pool config");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleSave = async () => {
+    const size = Number.parseInt(sizeInput, 10);
+    if (Number.isNaN(size) || size < 0 || size > 50) {
+      toast.error("Pool size must be between 0 and 50");
+      return;
+    }
+    setSaving(true);
+    try {
+      const result = await setPoolSize(size);
+      setConfig((prev) => (prev ? { ...prev, poolSize: result.poolSize } : prev));
+      toast.success(`Pool size updated to ${result.poolSize}`);
+    } catch {
+      toast.error("Failed to update pool size");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6 p-6">
+        <div className="h-8 w-48 animate-pulse rounded bg-muted" />
+        <div className="grid grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-24 animate-pulse rounded-lg bg-muted" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!config) {
+    return <div className="p-6 text-muted-foreground">Failed to load pool configuration.</div>;
+  }
+
+  if (!config.enabled) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-2">Hot Pool</h2>
+        <p className="text-muted-foreground">
+          Hot pool is not enabled for this product. Enable the{" "}
+          <code className="text-xs bg-muted px-1 py-0.5 rounded">hotPool</code> feature flag in the
+          boot config to use pre-provisioned instances.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h2 className="text-lg font-semibold">Hot Pool</h2>
+        <p className="text-sm text-muted-foreground">
+          Pre-provisioned warm containers for instant instance creation.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-sm text-muted-foreground">Target Size</div>
+          <div className="mt-1 text-2xl font-bold text-terminal">{config.poolSize}</div>
+        </div>
+
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-sm text-muted-foreground">Warm Containers</div>
+          <div className="mt-1 text-2xl font-bold text-green-400">{config.warmCount}</div>
+        </div>
+
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-sm text-muted-foreground">Status</div>
+          <div className="mt-1 text-2xl font-bold">
+            {config.warmCount >= config.poolSize ? (
+              <span className="text-green-400">Full</span>
+            ) : config.warmCount > 0 ? (
+              <span className="text-amber-400">Filling</span>
+            ) : (
+              <span className="text-red-400">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-border bg-card p-4">
+        <div className="text-sm font-medium mb-3">Adjust Pool Size</div>
+        <div className="flex items-center gap-3">
+          <Input
+            type="number"
+            min={0}
+            max={50}
+            value={sizeInput}
+            onChange={(e) => setSizeInput(e.target.value)}
+            className="w-24"
+          />
+          <Button
+            onClick={handleSave}
+            disabled={saving || sizeInput === String(config.poolSize)}
+            size="sm"
+          >
+            {saving ? "Saving..." : "Update"}
+          </Button>
+          <span className="text-xs text-muted-foreground">
+            The pool manager will replenish to this target within 60 seconds.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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