@bvdaniel/confidential-pay 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A0x
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/ConfidentialUSDC.css

@@ -0,0 +1,105 @@
+.cpw {
+  --c-fg: #e8f6f6;
+  --c-muted: #6b8585;
+  --c-line: #1e3333;
+  --c-accent: #00ffff;
+
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--c-fg);
+}
+
+.cpw-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  color: var(--c-accent);
+}
+
+.cpw-field-label {
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-muted);
+}
+
+.cpw-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--c-line);
+  background: rgba(5, 6, 7, 0.8);
+  color: var(--c-fg);
+  font-size: 16px;
+  font-family: var(--font-geist-mono, ui-monospace, monospace);
+  transition: border-color 150ms ease;
+}
+
+.cpw-input:focus {
+  outline: none;
+  border-color: var(--c-accent);
+}
+
+.cpw-input:disabled {
+  opacity: 0.6;
+}
+
+.cpw-recipient {
+  font-size: 12px;
+  font-family: var(--font-geist-mono, ui-monospace, monospace);
+  color: var(--c-muted);
+}
+
+.cpw-recipient-addr {
+  color: var(--c-accent);
+  word-break: break-all;
+}
+
+.cpw-button {
+  padding: 12px;
+  border-radius: 6px;
+  background: var(--c-accent);
+  color: #050607;
+  border: none;
+  font-family: var(--font-geist-mono, ui-monospace, monospace);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition: box-shadow 150ms ease, opacity 150ms ease;
+}
+
+.cpw-button:hover:not(:disabled) {
+  box-shadow: 0 0 20px -4px var(--c-accent);
+}
+
+.cpw-button.is-sending {
+  cursor: wait;
+  opacity: 0.7;
+  animation: cpw-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes cpw-pulse {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+.cpw-status {
+  font-size: 12px;
+  font-family: var(--font-geist-mono, ui-monospace, monospace);
+  word-break: break-all;
+}
+
+.cpw-status.is-success {
+  color: #00ff88;
+}
+
+.cpw-status.is-error {
+  color: #ff5c5c;
+}
+
+.cpw-hash {
+  color: var(--c-accent);
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export type ConfidentialUSDCProps = {
+    /** Wallet or email address receiving the payment. */
+    recipient: string;
+    /** Default amount in USDC (decimal string). */
+    amount?: string;
+    /** Endpoint that proxies to CDP. Defaults to the conventional /api/confidential-pay. */
+    endpoint?: string;
+    /** Called with the transaction hash on success. */
+    onSuccess?: (txHash: string) => void;
+    /** Called with an error message on failure. */
+    onError?: (message: string) => void;
+    /** Disable edits to the amount. */
+    lockedAmount?: boolean;
+    /** Supply a sender wallet address if you already have one. Defaults to auto-create. */
+    sender?: string;
+};
+export declare function ConfidentialUSDC({ recipient, amount: initialAmount, endpoint, onSuccess, onError, lockedAmount, sender, }: ConfidentialUSDCProps): import("react").JSX.Element;

package/dist/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export function ConfidentialUSDC({ recipient, amount: initialAmount = "1", endpoint = "/api/confidential-pay", onSuccess, onError, lockedAmount = false, sender, }) {
+    const [amount, setAmount] = useState(initialAmount);
+    const [recipientInput, setRecipientInput] = useState(recipient ?? "");
+    const [status, setStatus] = useState("idle");
+    const [message, setMessage] = useState("");
+    const [effectiveSender, setEffectiveSender] = useState(sender);
+    const to = recipient || recipientInput;
+    async function handlePay() {
+        setStatus("sending");
+        setMessage("");
+        try {
+            const res = await fetch(endpoint, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ recipient: to, amount, sender: effectiveSender }),
+            });
+            const body = await res.json();
+            if (!res.ok)
+                throw new Error(body.error ?? `HTTP ${res.status}`);
+            setStatus("success");
+            setMessage(body.transactionHash);
+            onSuccess?.(body.transactionHash);
+        }
+        catch (e) {
+            setStatus("error");
+            const m = e instanceof Error ? e.message : "Unknown error";
+            setMessage(m);
+            onError?.(m);
+        }
+    }
+    return (_jsxs("div", { className: "cpw", children: [_jsx("div", { className: "cpw-label", children: "Confidential USDC \u00B7 Base" }), _jsx("label", { className: "cpw-field-label", htmlFor: "cpw-recipient", children: "Recipient" }), recipient ? (_jsxs("div", { className: "cpw-recipient", children: ["To: ", _jsx("span", { className: "cpw-recipient-addr", children: recipient })] })) : (_jsx("input", { id: "cpw-recipient", type: "text", inputMode: "text", placeholder: "0x\u2026", value: recipientInput, disabled: status === "sending", onChange: (e) => setRecipientInput(e.target.value), className: "cpw-input", "aria-label": "Recipient wallet address" })), _jsx("label", { className: "cpw-field-label", htmlFor: "cpw-amount", children: "Amount (USDC)" }), _jsx("input", { id: "cpw-amount", type: "number", inputMode: "decimal", min: "0.01", step: "0.01", value: amount, disabled: lockedAmount || status === "sending", onChange: (e) => setAmount(e.target.value), className: "cpw-input", "aria-label": "Amount in USDC" }), _jsx("button", { onClick: handlePay, disabled: status === "sending", className: `cpw-button${status === "sending" ? " is-sending" : ""}`, children: status === "sending" ? "Sending…" : `Pay ${amount} USDC` }), status === "success" ? (_jsxs("div", { className: "cpw-status is-success", role: "status", children: ["Sent. Tx: ", _jsx("span", { className: "cpw-hash", children: message })] })) : null, status === "error" ? (_jsx("div", { className: "cpw-status is-error", role: "alert", children: message })) : null] }));
+}

package/dist/server.d.ts

@@ -0,0 +1,20 @@
+import type { NextRequest, NextResponse } from "next/server";
+/**
+ * Creates a Next.js POST route handler that proxies the ConfidentialUSDC
+ * widget's request to CDP. Mount it as:
+ *
+ *   // app/api/confidential-pay/route.ts
+ *   import { createConfidentialPayHandler } from "@bvdaniel/confidential-pay/server";
+ *   export const POST = createConfidentialPayHandler();
+ *   export const runtime = "nodejs";
+ *
+ * The CDP credentials are read from server env vars:
+ *   CDP_API_KEY_ID, CDP_API_KEY_SECRET, CDP_WALLET_SECRET, CDP_NETWORK
+ *
+ * When `devFaucet` is true and CDP_NETWORK is a testnet, auto-created sender
+ * wallets are funded with testnet ETH and USDC before the first send. Never
+ * enable this in production — it exists for sandbox demos.
+ */
+export declare function createConfidentialPayHandler(options?: {
+    devFaucet?: boolean;
+}): (req: NextRequest) => Promise<NextResponse>;

package/dist/server.js

@@ -0,0 +1,103 @@
+import { ConfidentialPay } from "@bvdaniel/confidential-pay-core";
+function applyTrustedTimeout(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+ * Creates a Next.js POST route handler that proxies the ConfidentialUSDC
+ * widget's request to CDP. Mount it as:
+ *
+ *   // app/api/confidential-pay/route.ts
+ *   import { createConfidentialPayHandler } from "@bvdaniel/confidential-pay/server";
+ *   export const POST = createConfidentialPayHandler();
+ *   export const runtime = "nodejs";
+ *
+ * The CDP credentials are read from server env vars:
+ *   CDP_API_KEY_ID, CDP_API_KEY_SECRET, CDP_WALLET_SECRET, CDP_NETWORK
+ *
+ * When `devFaucet` is true and CDP_NETWORK is a testnet, auto-created sender
+ * wallets are funded with testnet ETH and USDC before the first send. Never
+ * enable this in production — it exists for sandbox demos.
+ */
+export function createConfidentialPayHandler(options) {
+    return async function handler(req) {
+        const { NextResponse } = await import("next/server");
+        if (req.method !== "POST") {
+            return NextResponse.json({ error: "method not allowed" }, { status: 405 });
+        }
+        let payload;
+        try {
+            payload = await req.json();
+        }
+        catch {
+            return NextResponse.json({ error: "invalid body" }, { status: 400 });
+        }
+        const to = payload.recipient;
+        const amount = payload.amount;
+        if (typeof to !== "string" || !to.trim()) {
+            return NextResponse.json({ error: "recipient is required" }, { status: 400 });
+        }
+        if (typeof amount !== "string" || !/^\d+(\.\d{1,6})?$/.test(amount) || Number(amount) <= 0) {
+            return NextResponse.json({ error: "amount must be a positive USDC amount" }, { status: 400 });
+        }
+        const pay = new ConfidentialPay();
+        const isTestnet = pay.networkName !== "base-mainnet";
+        let sender = typeof payload.sender === "string" && payload.sender.length > 0
+            ? payload.sender
+            : undefined;
+        try {
+            if (!sender) {
+                const wallet = await pay.getOrCreateWallet("widget-auto");
+                sender = wallet.address;
+                if (options?.devFaucet && isTestnet) {
+                    const usdcBal = Number(await pay.getUsdcBalance(sender));
+                    const ethBal = Number(await pay.getNativeBalance(sender));
+                    if (usdcBal < 1) {
+                        try {
+                            const hash = await pay.faucetUsdc(sender);
+                            await pay.waitForReceipt(hash);
+                            applyTrustedTimeout(8000);
+                            for (let i = 0; i < 12; i++) {
+                                const b = Number(await pay.getUsdcBalance(sender));
+                                if (b >= 1)
+                                    break;
+                                applyTrustedTimeout(5000);
+                            }
+                        }
+                        catch {
+                            // faucet may be rate-limited; fall through if already funded
+                        }
+                    }
+                    if (ethBal < 0.001) {
+                        try {
+                            const ethHash = await pay.faucetEth(sender);
+                            await pay.waitForReceipt(ethHash);
+                        }
+                        catch {
+                            // ETH faucet may be rate-limited; fall through if already funded
+                        }
+                    }
+                    const funded = Number(await pay.getUsdcBalance(sender)) >= 1;
+                    if (!funded) {
+                        return NextResponse.json({ error: "faucet unavailable — fund the sender wallet or retry" }, { status: 502 });
+                    }
+                }
+            }
+            const result = await pay.sendUsdcPayment({
+                from: sender,
+                to: to,
+                amount,
+            });
+            return NextResponse.json({
+                ok: true,
+                transactionHash: result.transactionHash,
+                network: result.network,
+                sender,
+                devFaucet: true,
+            }, { status: 201 });
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : "unknown error";
+            return NextResponse.json({ error: message }, { status: 502 });
+        }
+    };
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@bvdaniel/confidential-pay",
+  "version": "0.1.0",
+  "description": "Drop-in confidential USDC payments widget for Base. Built on CDP Non-custodial Wallets.",
+  "keywords": [
+    "confidential",
+    "payments",
+    "usdc",
+    "base",
+    "cdp",
+    "react",
+    "widget"
+  ],
+  "license": "MIT",
+  "author": "a0x-co <hi@a0x.co>",
+  "homepage": "https://a0x-confidential-pay-demo-2w42vltmu-bvdaniels-projects.vercel.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a0x-co/a0x-confidential-pay.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/a0x-co/a0x-confidential-pay/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./ConfidentialUSDC.css": "./dist/ConfidentialUSDC.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "next": "14",
+    "react": "^18",
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@bvdaniel/confidential-pay-core": "^0.1.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/ConfidentialUSDC.css dist/ConfidentialUSDC.css"
+  }
+}