@wopr-network/platform-ui-core 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",
@@ -44,6 +44,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@noble/hashes": "^2.0.1",
+    "@scure/bip32": "^2.0.1",
+    "@scure/bip39": "^2.0.1",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "@tanstack/react-query": "^5.90.21",

package/src/__tests__/buy-crypto-credits-panel.test.tsx

@@ -2,24 +2,16 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-const { mockCreateCryptoCheckout, mockIsAllowedRedirectUrl, mockGetSupportedPaymentMethods } =
-  vi.hoisted(() => ({
-    mockCreateCryptoCheckout: vi.fn(),
-    mockIsAllowedRedirectUrl: vi.fn(),
-    mockGetSupportedPaymentMethods: vi.fn(),
-  }));
+const { mockCreateCheckout, mockGetSupportedPaymentMethods } = vi.hoisted(() => ({
+  mockCreateCheckout: vi.fn(),
+  mockGetSupportedPaymentMethods: vi.fn(),
+}));
 
 vi.mock("@/lib/api", () => ({
-  createCryptoCheckout: (...args: unknown[]) => mockCreateCryptoCheckout(...args),
-  createEthCheckout: vi.fn(),
-  createStablecoinCheckout: vi.fn(),
+  createCheckout: (...args: unknown[]) => mockCreateCheckout(...args),
   getSupportedPaymentMethods: (...args: unknown[]) => mockGetSupportedPaymentMethods(...args),
 }));
 
-vi.mock("@/lib/validate-redirect-url", () => ({
-  isAllowedRedirectUrl: (...args: unknown[]) => mockIsAllowedRedirectUrl(...args),
-}));
-
 vi.mock("framer-motion", () => ({
   motion: {
     button: ({
@@ -65,33 +57,34 @@ vi.mock("lucide-react", async (importOriginal) => {
 
 const MOCK_USDC_METHOD = {
   id: "usdc:base",
-  type: "stablecoin",
+  type: "erc20",
   label: "USDC on Base",
   token: "USDC",
   chain: "base",
 };
-const MOCK_BTC_METHOD = {
-  id: "btc:btcpay",
-  type: "btc",
-  label: "BTC",
-  token: "BTC",
-  chain: "bitcoin",
+const MOCK_ETH_METHOD = {
+  id: "eth:base",
+  type: "native",
+  label: "ETH on Base",
+  token: "ETH",
+  chain: "base",
 };
 
 afterEach(() => {
   vi.restoreAllMocks();
-  mockIsAllowedRedirectUrl.mockReset();
-  mockCreateCryptoCheckout.mockReset();
+  mockCreateCheckout.mockReset();
   mockGetSupportedPaymentMethods.mockReset();
 });
 
 describe("BuyCryptoCreditPanel", () => {
   it("renders crypto amount buttons ($10, $25, $50, $100)", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
-    expect(screen.getByText("Pay with Crypto")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Pay with Crypto")).toBeInTheDocument();
+    });
     expect(screen.getByText("$10")).toBeInTheDocument();
     expect(screen.getByText("$25")).toBeInTheDocument();
     expect(screen.getByText("$50")).toBeInTheDocument();
@@ -99,13 +92,12 @@ describe("BuyCryptoCreditPanel", () => {
   });
 
   it("Pay button is disabled when no amount selected", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
-    // Wait for methods to load
     await waitFor(() => {
-      expect(screen.getByText("Stablecoin")).toBeInTheDocument();
+      expect(screen.getByText("USDC")).toBeInTheDocument();
     });
 
     const payBtn = screen.getByRole("button", { name: "Pay with USDC" });
@@ -113,120 +105,110 @@ describe("BuyCryptoCreditPanel", () => {
   });
 
   it("Pay button is enabled after selecting an amount", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
     await waitFor(() => {
-      expect(screen.getByText("Stablecoin")).toBeInTheDocument();
+      expect(screen.getByText("USDC")).toBeInTheDocument();
     });
 
     await user.click(screen.getByText("$25"));
     expect(screen.getByRole("button", { name: "Pay with USDC" })).toBeEnabled();
   });
 
-  it("calls createCryptoCheckout with selected amount and redirects", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
-    const hrefSetter = vi.fn();
-    Object.defineProperty(window, "location", {
-      value: { ...window.location, href: "" },
-      writable: true,
-      configurable: true,
-    });
-    Object.defineProperty(window.location, "href", {
-      set: hrefSetter,
-      configurable: true,
-    });
-
-    mockCreateCryptoCheckout.mockResolvedValue({
-      url: "https://btcpay.example.com/i/abc123",
-      referenceId: "ref-abc123",
+  it("calls createCheckout and shows deposit address", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
+    mockCreateCheckout.mockResolvedValue({
+      depositAddress: "0xabc123def456",
+      displayAmount: "50.000000 USDC",
+      token: "USDC",
+      chain: "base",
     });
-    mockIsAllowedRedirectUrl.mockReturnValue(true);
 
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
     await waitFor(() => {
-      expect(screen.getByText("BTC")).toBeInTheDocument();
+      expect(screen.getByText("USDC")).toBeInTheDocument();
     });
 
-    // Switch to BTC tab
-    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$50"));
-    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
+    await user.click(screen.getByRole("button", { name: "Pay with USDC" }));
 
-    expect(mockCreateCryptoCheckout).toHaveBeenCalledWith(50);
-    expect(mockIsAllowedRedirectUrl).toHaveBeenCalledWith("https://btcpay.example.com/i/abc123");
-    expect(hrefSetter).toHaveBeenCalledWith("https://btcpay.example.com/i/abc123");
+    expect(mockCreateCheckout).toHaveBeenCalledWith("usdc:base", 50);
+    expect(await screen.findByText("0xabc123def456")).toBeInTheDocument();
+    expect(screen.getByText("50.000000 USDC")).toBeInTheDocument();
   });
 
-  it("shows error when redirect URL is not allowed", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
-    mockCreateCryptoCheckout.mockResolvedValue({
-      url: "https://evil.com/steal",
-      referenceId: "ref-evil",
-    });
-    mockIsAllowedRedirectUrl.mockReturnValue(false);
+  it("shows Creating checkout... while checkout is in progress", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
+    mockCreateCheckout.mockReturnValue(
+      new Promise(() => {
+        /* intentionally pending */
+      }),
+    );
 
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
     await waitFor(() => {
-      expect(screen.getByText("BTC")).toBeInTheDocument();
+      expect(screen.getByText("USDC")).toBeInTheDocument();
     });
 
-    await user.click(screen.getByText("BTC"));
-    await user.click(screen.getByText("$10"));
-    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
+    await user.click(screen.getByText("$50"));
+    await user.click(screen.getByRole("button", { name: "Pay with USDC" }));
 
-    expect(
-      await screen.findByText("Unexpected checkout URL. Please contact support."),
-    ).toBeInTheDocument();
+    expect(await screen.findByText("Creating checkout...")).toBeInTheDocument();
   });
 
-  it("shows Creating checkout... while checkout is in progress", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
-    mockCreateCryptoCheckout.mockReturnValue(
-      new Promise(() => {
-        /* intentionally pending */
-      }),
-    );
+  it("shows error when checkout API call fails", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
+    mockCreateCheckout.mockRejectedValue(new Error("API down"));
 
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
     await waitFor(() => {
-      expect(screen.getByText("BTC")).toBeInTheDocument();
+      expect(screen.getByText("USDC")).toBeInTheDocument();
     });
 
-    await user.click(screen.getByText("BTC"));
-    await user.click(screen.getByText("$100"));
-    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
+    await user.click(screen.getByText("$25"));
+    await user.click(screen.getByRole("button", { name: "Pay with USDC" }));
 
-    expect(await screen.findByText("Creating checkout...")).toBeInTheDocument();
+    expect(await screen.findByText("Checkout failed. Please try again.")).toBeInTheDocument();
   });
 
-  it("shows error when crypto checkout API call fails", async () => {
-    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
-    mockCreateCryptoCheckout.mockRejectedValue(new Error("API down"));
+  it("hides panel when no payment methods available", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([]);
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    const { container } = render(<BuyCryptoCreditPanel />);
+
+    // Component returns null when no methods
+    await waitFor(() => {
+      expect(container.innerHTML).toBe("");
+    });
+  });
 
+  it("switches between payment methods", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_ETH_METHOD]);
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
     await waitFor(() => {
-      expect(screen.getByText("BTC")).toBeInTheDocument();
+      expect(screen.getByText("USDC")).toBeInTheDocument();
     });
 
-    await user.click(screen.getByText("BTC"));
-    await user.click(screen.getByText("$25"));
-    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
+    // Default is first method (USDC)
+    expect(screen.getByRole("button", { name: "Pay with USDC" })).toBeInTheDocument();
 
-    expect(await screen.findByText("Checkout failed. Please try again.")).toBeInTheDocument();
+    // Switch to ETH
+    await user.click(screen.getByText("ETH"));
+    expect(screen.getByRole("button", { name: "Pay with ETH" })).toBeInTheDocument();
   });
 });

package/src/app/admin/payment-methods/page.tsx

@@ -10,6 +10,107 @@ import {
   type PaymentMethodAdmin,
 } from "@/lib/api";
 
+/** BIP-44 coin types by chain name. */
+const COIN_TYPES: Record<string, number> = {
+  base: 60,
+  ethereum: 60,
+  polygon: 60,
+  optimism: 60,
+  arbitrum: 60,
+  bitcoin: 0,
+  litecoin: 2,
+  dogecoin: 3,
+};
+
+/**
+ * Derive xpub from mnemonic client-side. Mnemonic NEVER leaves the browser.
+ * Returns the extended public key for the given BIP-44 coin type.
+ * Path: m/44'/<coinType>'/0'
+ */
+async function deriveXpubFromMnemonic(mnemonic: string, coinType: number): Promise<string> {
+  const { HDKey } = await import("@scure/bip32");
+  const { mnemonicToSeedSync } = await import("@scure/bip39");
+  const seed = mnemonicToSeedSync(mnemonic.trim());
+  const master = HDKey.fromMasterSeed(seed);
+  const account = master.derive(`m/44'/${coinType}'/0'`);
+  const xpub = account.publicExtendedKey;
+  if (!xpub) throw new Error("Failed to derive xpub");
+  return xpub;
+}
+
+function MnemonicDeriveSection({
+  chain,
+  onXpubDerived,
+}: {
+  chain: string;
+  onXpubDerived: (xpub: string) => void;
+}) {
+  const [mnemonic, setMnemonic] = useState("");
+  const [deriving, setDeriving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [derived, setDerived] = useState(false);
+
+  const coinType = COIN_TYPES[chain.toLowerCase()] ?? 60;
+  const path = `m/44'/${coinType}'/0'`;
+
+  async function handleDerive() {
+    if (!mnemonic.trim()) return;
+    setDeriving(true);
+    setError(null);
+    try {
+      const xpub = await deriveXpubFromMnemonic(mnemonic, coinType);
+      onXpubDerived(xpub);
+      setMnemonic(""); // Clear mnemonic immediately
+      setDerived(true);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setDeriving(false);
+    }
+  }
+
+  if (derived) {
+    return (
+      <div className="col-span-2 rounded-md border border-green-500/30 bg-green-500/5 p-3">
+        <p className="text-xs text-green-500">
+          xpub derived and set. Mnemonic was cleared from memory.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="col-span-2 space-y-2 rounded-md border border-dashed border-muted-foreground/30 p-3">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-muted-foreground">Derive xpub from mnemonic</span>
+        <span className="text-xs text-muted-foreground/60">Path: {path}</span>
+      </div>
+      <p className="text-xs text-muted-foreground/60">
+        Your mnemonic never leaves this browser. Only the xpub (public key) is sent to the server.
+      </p>
+      <input
+        type="password"
+        className="w-full rounded-md border bg-background px-3 py-1.5 text-sm font-mono"
+        placeholder="word1 word2 word3 ... (12 or 24 words)"
+        value={mnemonic}
+        onChange={(e) => setMnemonic(e.target.value)}
+        autoComplete="off"
+        spellCheck={false}
+      />
+      {error && <p className="text-xs text-destructive">{error}</p>}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleDerive}
+        disabled={deriving || !mnemonic.trim()}
+      >
+        {deriving ? "Deriving..." : "Derive xpub"}
+      </Button>
+    </div>
+  );
+}
+
 function AddMethodForm({ onSaved }: { onSaved: () => void }) {
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -23,6 +124,8 @@ function AddMethodForm({ onSaved }: { onSaved: () => void }) {
     displayOrder: 0,
     confirmations: 1,
     rpcUrl: "",
+    oracleAddress: "",
+    xpub: "",
   });
 
   async function handleSubmit(e: React.FormEvent) {
@@ -40,6 +143,8 @@ function AddMethodForm({ onSaved }: { onSaved: () => void }) {
       enabled: true,
       displayOrder: form.displayOrder,
       rpcUrl: form.rpcUrl || null,
+      oracleAddress: form.oracleAddress || null,
+      xpub: form.xpub || null,
       confirmations: form.confirmations,
     });
     setSaving(false);
@@ -54,6 +159,8 @@ function AddMethodForm({ onSaved }: { onSaved: () => void }) {
       displayOrder: 0,
       confirmations: 1,
       rpcUrl: "",
+      oracleAddress: "",
+      xpub: "",
     });
     onSaved();
   }
@@ -118,6 +225,44 @@ function AddMethodForm({ onSaved }: { onSaved: () => void }) {
             onChange={(e) => setForm({ ...form, contractAddress: e.target.value })}
           />
         </label>
+        <label className="col-span-2 space-y-1">
+          <span className="text-xs text-muted-foreground">RPC URL (chain node endpoint)</span>
+          <input
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm font-mono"
+            placeholder="http://op-geth:8545"
+            value={form.rpcUrl}
+            onChange={(e) => setForm({ ...form, rpcUrl: e.target.value })}
+          />
+        </label>
+        <label className="col-span-2 space-y-1">
+          <span className="text-xs text-muted-foreground">
+            Oracle Address (Chainlink feed — empty for stablecoins)
+          </span>
+          <input
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-sm font-mono"
+            placeholder="0x..."
+            value={form.oracleAddress}
+            onChange={(e) => setForm({ ...form, oracleAddress: e.target.value })}
+          />
+        </label>
+
+        {/* --- xpub: paste directly or derive from mnemonic --- */}
+        <MnemonicDeriveSection
+          chain={form.chain}
+          onXpubDerived={(xpub) => setForm((f) => ({ ...f, xpub }))}
+        />
+        <label className="col-span-2 space-y-1">
+          <span className="text-xs text-muted-foreground">
+            xpub (auto-filled from mnemonic above, or paste directly)
+          </span>
+          <input
+            className="w-full rounded-md border bg-background px-3 py-1.5 text-xs font-mono"
+            placeholder="xpub6..."
+            value={form.xpub}
+            onChange={(e) => setForm({ ...form, xpub: e.target.value })}
+          />
+        </label>
+
         <label className="space-y-1">
           <span className="text-xs text-muted-foreground">Display Order</span>
           <input
@@ -199,8 +344,8 @@ export default function AdminPaymentMethodsPage() {
                     <th className="pb-2 pr-4">Chain</th>
                     <th className="pb-2 pr-4">Type</th>
                     <th className="pb-2 pr-4">Contract</th>
-                    <th className="pb-2 pr-4">Decimals</th>
-                    <th className="pb-2 pr-4">Order</th>
+                    <th className="pb-2 pr-4">xpub</th>
+                    <th className="pb-2 pr-4">RPC</th>
                     <th className="pb-2 pr-4">Status</th>
                     <th className="pb-2">Actions</th>
                   </tr>
@@ -214,8 +359,12 @@ export default function AdminPaymentMethodsPage() {
                       <td className="py-2 pr-4 font-mono text-xs">
                         {m.contractAddress ? `${m.contractAddress.slice(0, 10)}...` : "—"}
                       </td>
-                      <td className="py-2 pr-4">{m.decimals}</td>
-                      <td className="py-2 pr-4">{m.displayOrder}</td>
+                      <td className="py-2 pr-4 font-mono text-xs">
+                        {m.xpub ? `${m.xpub.slice(0, 12)}...` : "—"}
+                      </td>
+                      <td className="py-2 pr-4 font-mono text-xs">
+                        {m.rpcUrl ? `${m.rpcUrl.slice(0, 20)}...` : "—"}
+                      </td>
                       <td className="py-2 pr-4">
                         <span
                           className={

package/src/lib/api.ts

@@ -1330,45 +1330,6 @@ export async function createCreditCheckout(priceId: string): Promise<CheckoutRes
   return { checkoutUrl: url };
 }
 
-export async function createCryptoCheckout(
-  amountUsd: number,
-): Promise<{ url: string; referenceId: string }> {
-  return trpcVanilla.billing.cryptoCheckout.mutate({ amountUsd });
-}
-
-export interface StablecoinCheckoutResult {
-  depositAddress: string;
-  amountRaw: string;
-  amountUsd: number;
-  chain: string;
-  token: string;
-  referenceId: string;
-}
-
-export async function createStablecoinCheckout(
-  amountUsd: number,
-  token: string,
-  chain: string,
-): Promise<StablecoinCheckoutResult> {
-  return trpcVanilla.billing.stablecoinCheckout.mutate({ amountUsd, token, chain });
-}
-
-export interface EthCheckoutResult {
-  depositAddress: string;
-  expectedWei: string;
-  amountUsd: number;
-  priceCents: number;
-  chain: string;
-  referenceId: string;
-}
-
-export async function createEthCheckout(
-  amountUsd: number,
-  chain: string,
-): Promise<EthCheckoutResult> {
-  return trpcVanilla.billing.ethCheckout.mutate({ amountUsd, chain });
-}
-
 // --- Supported payment methods (runtime-configured) ---
 
 export interface SupportedPaymentMethod {
@@ -1414,6 +1375,8 @@ export interface PaymentMethodAdmin {
   enabled: boolean;
   displayOrder: number;
   rpcUrl: string | null;
+  oracleAddress: string | null;
+  xpub: string | null;
   confirmations: number;
 }
 

package/src/lib/trpc-types.ts

@@ -112,10 +112,8 @@ type AppRouterRecord = {
     setDefaultPaymentMethod: AnyTRPCMutationProcedure;
     affiliateStats: AnyTRPCQueryProcedure;
     affiliateReferrals: AnyTRPCQueryProcedure;
-    cryptoCheckout: AnyTRPCMutationProcedure;
-    stablecoinCheckout: AnyTRPCMutationProcedure;
-    ethCheckout: AnyTRPCMutationProcedure;
     checkout: AnyTRPCMutationProcedure;
+    chargeStatus: AnyTRPCQueryProcedure;
     supportedPaymentMethods: AnyTRPCQueryProcedure;
     adminListPaymentMethods: AnyTRPCQueryProcedure;
     adminUpsertPaymentMethod: AnyTRPCMutationProcedure;