@unseen_fi/ui 0.1.0

package/dist/components.d.ts

@@ -0,0 +1,16 @@
+import type { UnseenPayButtonProps } from "./types";
+/**
+ * A drop-in "Pay with Unseen" button that opens a checkout modal.
+ * The modal shows wallet picker, QR code / deeplinks, and "I have paid" confirmation.
+ *
+ * @example
+ * ```tsx
+ * <UnseenPayButton
+ *   amount={50_000_000}
+ *   reference="order_123"
+ *   description="Premium Plan"
+ *   onSuccess={(p) => console.log("Paid!", p.id)}
+ * />
+ * ```
+ */
+export declare function UnseenPayButton({ amount, mint, reference, description, expiresIn, onSuccess, onError, onCreated, label, className, disabled, }: UnseenPayButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components.js

@@ -0,0 +1,306 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnseenPayButton = UnseenPayButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("./context");
+const hooks_1 = require("./hooks");
+const wallets_1 = require("./wallets");
+// ─── UnseenPayButton ─────────────────────────────────────────────────────────
+/**
+ * A drop-in "Pay with Unseen" button that opens a checkout modal.
+ * The modal shows wallet picker, QR code / deeplinks, and "I have paid" confirmation.
+ *
+ * @example
+ * ```tsx
+ * <UnseenPayButton
+ *   amount={50_000_000}
+ *   reference="order_123"
+ *   description="Premium Plan"
+ *   onSuccess={(p) => console.log("Paid!", p.id)}
+ * />
+ * ```
+ */
+function UnseenPayButton({ amount, mint, reference, description, expiresIn, onSuccess, onError, onCreated, label = "Pay with Unseen", className, disabled, }) {
+    const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { className: className, style: className ? undefined : defaultButtonStyle, onClick: () => setModalOpen(true), disabled: disabled, children: [(0, jsx_runtime_1.jsx)(ShieldIcon, {}), label] }), modalOpen && ((0, jsx_runtime_1.jsx)(UnseenModal, { amount: amount, mint: mint, reference: reference, description: description, expiresIn: expiresIn, onSuccess: (p) => {
+                    onSuccess?.(p);
+                    setModalOpen(false);
+                }, onError: onError, onCreated: onCreated, onClose: () => setModalOpen(false) }))] }));
+}
+function UnseenModal({ amount, mint, reference, description, expiresIn, onSuccess, onError, onCreated, onClose, }) {
+    const { baseUrl } = (0, context_1.useUnseenConfig)();
+    const { payment, createPayment } = (0, hooks_1.usePayment)();
+    const { verify } = (0, hooks_1.useVerify)();
+    const [step, setStep] = (0, react_1.useState)("creating");
+    const [errorMsg, setErrorMsg] = (0, react_1.useState)("");
+    const [selectedWallet, setSelectedWallet] = (0, react_1.useState)(null);
+    const [verifyCountdown, setVerifyCountdown] = (0, react_1.useState)(60);
+    // ─── Create payment on mount ────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        createPayment({ amount, reference, description, mint, expiresIn })
+            .then((p) => {
+            if (cancelled)
+                return;
+            onCreated?.(p);
+            setStep("wallet-picker");
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            const e = err instanceof Error ? err : new Error(String(err));
+            setErrorMsg(e.message);
+            setStep("error");
+            onError?.(e);
+        });
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // ─── Handle wallet selection ────────────────────────────────────────────
+    const handleWalletSelect = (0, react_1.useCallback)((wallet) => {
+        if (!payment)
+            return;
+        setSelectedWallet(wallet);
+        // Open the checkout page in the wallet's in-app browser via deeplink
+        const checkoutUrl = `${baseUrl}/pay/${payment.id}`;
+        const deeplink = wallet.deeplink(checkoutUrl);
+        window.open(deeplink, "_blank");
+        setStep("waiting");
+    }, [payment, baseUrl]);
+    // ─── Handle "I have paid" verification ──────────────────────────────────
+    const handleVerify = (0, react_1.useCallback)(async () => {
+        if (!payment)
+            return;
+        setStep("verifying");
+        setVerifyCountdown(60);
+        try {
+            // Keep verifying for up to 60s to improve UX and reduce manual retries.
+            const startedAt = Date.now();
+            while (Date.now() - startedAt < 60000) {
+                const result = await verify(payment.id);
+                if (result.status === "confirmed") {
+                    setStep("confirmed");
+                    onSuccess?.({
+                        ...payment,
+                        status: "confirmed",
+                        txSignature: result.txSignature ?? null,
+                        txSignatures: result.txSignatures ?? [],
+                        confirmedAt: result.confirmedAt ?? null,
+                    });
+                    return;
+                }
+                await new Promise((resolve) => setTimeout(resolve, 3000));
+            }
+            setErrorMsg("Still waiting for confirmation. Please try again in a few seconds.");
+            setStep("waiting");
+        }
+        catch (err) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            setErrorMsg(e.message);
+            setStep("error");
+            onError?.(e);
+        }
+    }, [payment, verify, onSuccess, onError]);
+    (0, react_1.useEffect)(() => {
+        if (step !== "verifying")
+            return;
+        const timer = setInterval(() => {
+            setVerifyCountdown((prev) => (prev > 0 ? prev - 1 : 0));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [step]);
+    // ─── Render ─────────────────────────────────────────────────────────────
+    return ((0, jsx_runtime_1.jsx)("div", { style: overlayStyle, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: modalStyle, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { style: modalHeaderStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, jsx_runtime_1.jsx)(ShieldIcon, { size: 20 }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 600, fontSize: "16px", color: "#fff" }, children: "Unseen Pay" })] }), (0, jsx_runtime_1.jsx)("button", { style: closeButtonStyle, onClick: onClose, children: "\u2715" })] }), (0, jsx_runtime_1.jsxs)("div", { style: modalBodyStyle, children: [step === "creating" && ((0, jsx_runtime_1.jsxs)(StepContent, { children: [(0, jsx_runtime_1.jsx)(Spinner, {}), (0, jsx_runtime_1.jsx)(StepText, { children: "Creating payment session..." })] })), step === "wallet-picker" && ((0, jsx_runtime_1.jsxs)(StepContent, { children: [(0, jsx_runtime_1.jsx)(StepText, { children: "Choose your wallet" }), (0, jsx_runtime_1.jsx)(StepHint, { children: "Select a wallet to complete the private payment." }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", width: "100%", marginTop: "8px" }, children: wallets_1.WALLETS.map((w) => ((0, jsx_runtime_1.jsxs)("button", { style: walletButtonStyle, onClick: () => handleWalletSelect(w), children: [(0, jsx_runtime_1.jsx)("div", { style: walletIconStyle, children: (0, jsx_runtime_1.jsx)("img", { src: w.icon, alt: `${w.name} logo`, style: walletLogoImageStyle }) }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 500, color: "#fff" }, children: w.name }), (0, jsx_runtime_1.jsx)("span", { style: { marginLeft: "auto", color: "rgba(255,255,255,0.3)", fontSize: "13px" }, children: "\u2192" })] }, w.id))) })] })), step === "waiting" && ((0, jsx_runtime_1.jsxs)(StepContent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: walletBadgeStyle, children: [selectedWallet && ((0, jsx_runtime_1.jsx)("div", { style: { ...walletIconStyle, width: "24px", height: "24px" }, children: (0, jsx_runtime_1.jsx)("img", { src: selectedWallet.icon, alt: `${selectedWallet.name} logo`, style: walletLogoImageStyle }) })), (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.5)" }, children: ["Opened in ", selectedWallet?.name ?? "wallet"] })] }), (0, jsx_runtime_1.jsx)(StepText, { children: "Complete payment in your wallet" }), (0, jsx_runtime_1.jsx)(StepHint, { children: "After signing the transaction in your wallet, come back here and confirm." }), errorMsg && ((0, jsx_runtime_1.jsx)("div", { style: inlineErrorStyle, children: errorMsg })), (0, jsx_runtime_1.jsx)("button", { style: confirmButtonStyle, onClick: handleVerify, children: "I have paid" }), (0, jsx_runtime_1.jsx)("button", { style: linkButtonStyle, onClick: () => { setStep("wallet-picker"); setErrorMsg(""); }, children: "Use a different wallet" })] })), step === "verifying" && ((0, jsx_runtime_1.jsxs)(StepContent, { children: [(0, jsx_runtime_1.jsx)(Spinner, {}), (0, jsx_runtime_1.jsx)(StepText, { children: "Verifying on Solana..." }), (0, jsx_runtime_1.jsxs)(StepHint, { children: ["Checking your transaction on-chain (", verifyCountdown, "s)."] })] })), step === "confirmed" && ((0, jsx_runtime_1.jsxs)(StepContent, { children: [(0, jsx_runtime_1.jsx)("div", { style: successCircle, children: (0, jsx_runtime_1.jsx)("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) }), (0, jsx_runtime_1.jsx)(StepText, { style: { color: "#22c55e" }, children: "Payment Confirmed!" }), (0, jsx_runtime_1.jsx)(StepHint, { children: "Your transaction has been verified on Solana." }), (0, jsx_runtime_1.jsx)("button", { style: confirmButtonStyle, onClick: onClose, children: "Done" })] })), step === "error" && ((0, jsx_runtime_1.jsxs)(StepContent, { children: [(0, jsx_runtime_1.jsx)("div", { style: errorCircle, children: (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#ef4444", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), (0, jsx_runtime_1.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }) }), (0, jsx_runtime_1.jsx)(StepText, { style: { color: "#ef4444" }, children: "Error" }), (0, jsx_runtime_1.jsx)(StepHint, { children: errorMsg }), (0, jsx_runtime_1.jsx)("button", { style: confirmButtonStyle, onClick: () => { setStep("wallet-picker"); setErrorMsg(""); }, children: "Try Again" })] }))] }), (0, jsx_runtime_1.jsx)("div", { style: modalFooterStyle, children: (0, jsx_runtime_1.jsx)("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.2)" }, children: "Powered by Unseen Finance \u2022 Privacy-preserving payments" }) })] }) }));
+}
+// ─── Sub-components ──────────────────────────────────────────────────────────
+function StepContent({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { style: stepContainerStyle, children: children });
+}
+function StepText({ children, style }) {
+    return (0, jsx_runtime_1.jsx)("p", { style: { ...stepTextBase, ...style }, children: children });
+}
+function StepHint({ children }) {
+    return (0, jsx_runtime_1.jsx)("p", { style: hintStyle, children: children });
+}
+function Spinner() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `@keyframes unseen-spin { to { transform: rotate(360deg); } }` }), (0, jsx_runtime_1.jsx)("div", { style: spinnerStyle })] }));
+}
+function ShieldIcon({ size = 16 }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }));
+}
+// ─── Styles ──────────────────────────────────────────────────────────────────
+const defaultButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "12px 24px",
+    border: "none",
+    borderRadius: "12px",
+    background: "linear-gradient(135deg, #7b2fff 0%, #6020cc 100%)",
+    color: "#fff",
+    fontSize: "15px",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: "'Inter', system-ui, sans-serif",
+    transition: "all 0.2s ease",
+};
+const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.7)",
+    backdropFilter: "blur(8px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 999999,
+    fontFamily: "'Inter', system-ui, sans-serif",
+    color: "#fff",
+    padding: "16px",
+};
+const modalStyle = {
+    background: "rgba(18,16,31,0.98)",
+    border: "1px solid rgba(255,255,255,0.08)",
+    borderRadius: "20px",
+    width: "100%",
+    maxWidth: "400px",
+    overflow: "hidden",
+};
+const modalHeaderStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "16px 20px",
+    borderBottom: "1px solid rgba(255,255,255,0.06)",
+};
+const closeButtonStyle = {
+    background: "none",
+    border: "none",
+    color: "rgba(255,255,255,0.4)",
+    fontSize: "16px",
+    cursor: "pointer",
+    padding: "4px 8px",
+    borderRadius: "6px",
+};
+const modalBodyStyle = {
+    padding: "24px 20px",
+    minHeight: "200px",
+};
+const modalFooterStyle = {
+    padding: "12px 20px",
+    borderTop: "1px solid rgba(255,255,255,0.04)",
+    textAlign: "center",
+};
+const stepContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+};
+const stepTextBase = {
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#fff",
+    margin: 0,
+};
+const hintStyle = {
+    fontSize: "13px",
+    color: "rgba(255,255,255,0.35)",
+    textAlign: "center",
+    lineHeight: 1.6,
+    margin: 0,
+    maxWidth: "280px",
+};
+const spinnerStyle = {
+    width: "32px",
+    height: "32px",
+    border: "3px solid rgba(255,255,255,0.1)",
+    borderTopColor: "#7b2fff",
+    borderRadius: "50%",
+    animation: "unseen-spin 0.8s linear infinite",
+};
+const walletButtonStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "14px 16px",
+    background: "rgba(255,255,255,0.04)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    width: "100%",
+    textAlign: "left",
+    fontSize: "15px",
+    color: "#fff",
+    fontFamily: "inherit",
+};
+const walletIconStyle = {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    overflow: "hidden",
+    flexShrink: 0,
+};
+const walletLogoImageStyle = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+};
+const walletBadgeStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    background: "rgba(255,255,255,0.04)",
+    borderRadius: "10px",
+    padding: "8px 14px",
+};
+const confirmButtonStyle = {
+    width: "100%",
+    padding: "14px 24px",
+    border: "none",
+    borderRadius: "14px",
+    background: "linear-gradient(135deg, #7b2fff 0%, #6020cc 100%)",
+    color: "#fff",
+    fontSize: "15px",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    marginTop: "8px",
+};
+const linkButtonStyle = {
+    background: "none",
+    border: "none",
+    color: "rgba(255,255,255,0.35)",
+    fontSize: "13px",
+    cursor: "pointer",
+    padding: "4px",
+    fontFamily: "inherit",
+    textDecoration: "underline",
+};
+const inlineErrorStyle = {
+    fontSize: "13px",
+    color: "#ef4444",
+    textAlign: "center",
+    background: "rgba(239,68,68,0.08)",
+    border: "1px solid rgba(239,68,68,0.15)",
+    borderRadius: "8px",
+    padding: "8px 12px",
+    width: "100%",
+};
+const successCircle = {
+    width: "56px",
+    height: "56px",
+    borderRadius: "50%",
+    background: "rgba(34,197,94,0.1)",
+    border: "1px solid rgba(34,197,94,0.2)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+const errorCircle = {
+    ...successCircle,
+    background: "rgba(239,68,68,0.1)",
+    border: "1px solid rgba(239,68,68,0.2)",
+};

package/dist/context.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import type { UnseenProviderConfig } from "./types";
+interface UnseenContextValue {
+    apiKey?: string;
+    baseUrl: string;
+}
+/**
+ * Provides Unseen Pay configuration to all child components.
+ *
+ * @example
+ * ```tsx
+ * import { UnseenProvider, UnseenPayButton } from "@unseen/ui";
+ *
+ * function App() {
+ *   return (
+ *     <UnseenProvider apiKey="usk_test_...">
+ *       <UnseenPayButton
+ *         amount={50_000_000}
+ *         reference="order_123"
+ *         onSuccess={(p) => console.log("Paid!", p)}
+ *       />
+ *     </UnseenProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function UnseenProvider({ apiKey, baseUrl, children, }: UnseenProviderConfig & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useUnseenConfig(): UnseenContextValue;
+export {};

package/dist/context.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnseenProvider = UnseenProvider;
+exports.useUnseenConfig = useUnseenConfig;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const UnseenContext = (0, react_1.createContext)(null);
+// ─── Provider ────────────────────────────────────────────────────────────────
+/**
+ * Provides Unseen Pay configuration to all child components.
+ *
+ * @example
+ * ```tsx
+ * import { UnseenProvider, UnseenPayButton } from "@unseen/ui";
+ *
+ * function App() {
+ *   return (
+ *     <UnseenProvider apiKey="usk_test_...">
+ *       <UnseenPayButton
+ *         amount={50_000_000}
+ *         reference="order_123"
+ *         onSuccess={(p) => console.log("Paid!", p)}
+ *       />
+ *     </UnseenProvider>
+ *   );
+ * }
+ * ```
+ */
+function UnseenProvider({ apiKey, baseUrl = "https://unseen.finance", children, }) {
+    return ((0, jsx_runtime_1.jsx)(UnseenContext.Provider, { value: { apiKey, baseUrl }, children: children }));
+}
+// ─── Hook ────────────────────────────────────────────────────────────────────
+function useUnseenConfig() {
+    const ctx = (0, react_1.useContext)(UnseenContext);
+    if (!ctx) {
+        throw new Error("useUnseenConfig must be used inside <UnseenProvider>. " +
+            "Wrap your component tree with <UnseenProvider>.");
+    }
+    return ctx;
+}

package/dist/hooks.d.ts

@@ -0,0 +1,28 @@
+import type { PaymentResult, PaymentStatus } from "./types";
+interface UsePaymentReturn {
+    payment: PaymentResult | null;
+    loading: boolean;
+    error: Error | null;
+    createPayment: (input: {
+        amount: number;
+        reference: string;
+        description?: string;
+        mint?: string;
+        expiresIn?: number;
+    }) => Promise<PaymentResult>;
+}
+export declare function usePayment(): UsePaymentReturn;
+interface UseVerifyReturn {
+    status: PaymentStatus | "amount_mismatch" | null;
+    loading: boolean;
+    error: Error | null;
+    verify: (paymentId: string, paymentToken?: string) => Promise<{
+        status: string;
+        txSignature?: string;
+        txSignatures?: string[];
+        confirmedAt?: string;
+        error?: string;
+    }>;
+}
+export declare function useVerify(): UseVerifyReturn;
+export {};

package/dist/hooks.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePayment = usePayment;
+exports.useVerify = useVerify;
+const react_1 = require("react");
+const context_1 = require("./context");
+function usePayment() {
+    const { apiKey, baseUrl } = (0, context_1.useUnseenConfig)();
+    const [payment, setPayment] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const createPayment = (0, react_1.useCallback)(async (input) => {
+        setLoading(true);
+        setError(null);
+        try {
+            if (!apiKey) {
+                throw new Error("UnseenProvider apiKey is required to create payments from browser. " +
+                    "For production, create payments server-side and pass paymentToken to verification.");
+            }
+            const res = await fetch(`${baseUrl}/api/v1/payments`, {
+                method: "POST",
+                headers: {
+                    Authorization: `Bearer ${apiKey}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(input),
+            });
+            if (!res.ok) {
+                const data = (await res.json());
+                throw new Error(String(data.error ?? "Failed to create payment"));
+            }
+            const result = (await res.json());
+            setPayment(result);
+            return result;
+        }
+        catch (err) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            setError(e);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiKey, baseUrl]);
+    return { payment, loading, error, createPayment };
+}
+function useVerify() {
+    const { apiKey, baseUrl } = (0, context_1.useUnseenConfig)();
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const verify = (0, react_1.useCallback)(async (paymentId, paymentToken) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const usePublicVerify = Boolean(paymentToken);
+            const url = usePublicVerify
+                ? `${baseUrl}/api/public/payments/${paymentId}/verify`
+                : `${baseUrl}/api/v1/payments/${paymentId}/verify`;
+            if (!usePublicVerify && !apiKey) {
+                throw new Error("Missing apiKey for merchant verify endpoint. " +
+                    "Provide paymentToken to use public checkout verification.");
+            }
+            const res = await fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...(paymentToken
+                        ? { "x-unseen-payment-token": paymentToken }
+                        : { Authorization: `Bearer ${apiKey}` }),
+                },
+            });
+            const data = (await res.json());
+            setStatus(data.status);
+            return data;
+        }
+        catch (err) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            setError(e);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiKey, baseUrl]);
+    return { status, loading, error, verify };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { UnseenPayButton } from "./components";
+export { UnseenProvider } from "./context";
+export { usePayment, useVerify } from "./hooks";
+export { WALLETS, getWallet } from "./wallets";
+export type { UnseenProviderConfig, UnseenPayButtonProps, PaymentResult, PaymentStatus, WalletType, WalletOption, ModalStep, } from "./types";

package/dist/index.js

@@ -0,0 +1,21 @@
+"use strict";
+// ─── @unseen/ui ──────────────────────────────────────────────────────────────
+// React components for Unseen Pay — wallet picker, checkout modal, and hooks.
+//
+// Usage:
+//   import { UnseenProvider, UnseenPayButton } from "@unseen/ui";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWallet = exports.WALLETS = exports.useVerify = exports.usePayment = exports.UnseenProvider = exports.UnseenPayButton = void 0;
+// Components
+var components_1 = require("./components");
+Object.defineProperty(exports, "UnseenPayButton", { enumerable: true, get: function () { return components_1.UnseenPayButton; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "UnseenProvider", { enumerable: true, get: function () { return context_1.UnseenProvider; } });
+// Hooks
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "usePayment", { enumerable: true, get: function () { return hooks_1.usePayment; } });
+Object.defineProperty(exports, "useVerify", { enumerable: true, get: function () { return hooks_1.useVerify; } });
+// Utilities
+var wallets_1 = require("./wallets");
+Object.defineProperty(exports, "WALLETS", { enumerable: true, get: function () { return wallets_1.WALLETS; } });
+Object.defineProperty(exports, "getWallet", { enumerable: true, get: function () { return wallets_1.getWallet; } });

package/dist/types.d.ts

@@ -0,0 +1,65 @@
+/** Wallet choices available in the picker */
+export type WalletType = "phantom" | "solflare" | "backpack";
+/** Payment status from the API */
+export type PaymentStatus = "pending" | "confirmed" | "expired" | "cancelled";
+/** Configuration for the UnseenProvider */
+export interface UnseenProviderConfig {
+    /** Your merchant API key (required only if creating payments directly from browser). */
+    apiKey?: string;
+    /** Base URL of the Unseen API. Defaults to https://unseen.finance */
+    baseUrl?: string;
+}
+/** Props for the UnseenPayButton */
+export interface UnseenPayButtonProps {
+    /** Amount in raw token units */
+    amount: number;
+    /** SPL token mint address */
+    mint?: string;
+    /** Your internal reference/order ID */
+    reference: string;
+    /** Description shown on checkout page */
+    description?: string;
+    /** Expiry time in seconds (default 3600) */
+    expiresIn?: number;
+    /** Called when payment is verified as confirmed */
+    onSuccess?: (payment: PaymentResult) => void;
+    /** Called on any error */
+    onError?: (error: Error) => void;
+    /** Called when payment session is created */
+    onCreated?: (payment: PaymentResult) => void;
+    /** Custom button label. Default: "Pay with Unseen" */
+    label?: string;
+    /** Custom className for the button */
+    className?: string;
+    /** Disable the button */
+    disabled?: boolean;
+    /** Optional server-side payment session initializer for secure storefront flows. */
+    createPaymentSession?: (input: {
+        amount: number;
+        reference: string;
+        description?: string;
+        mint?: string;
+        expiresIn?: number;
+    }) => Promise<PaymentResult>;
+}
+/** Payment result returned to callbacks */
+export interface PaymentResult {
+    id: string;
+    status: string;
+    amount: string;
+    checkoutUrl: string;
+    reference: string;
+    paymentToken?: string;
+    txSignature?: string | null;
+    txSignatures?: string[];
+    confirmedAt?: string | null;
+}
+/** Wallet info for the picker */
+export interface WalletOption {
+    id: WalletType;
+    name: string;
+    icon: string;
+    deeplink: (checkoutUrl: string) => string;
+}
+/** Internal state of the payment modal */
+export type ModalStep = "idle" | "creating" | "wallet-picker" | "qr-display" | "waiting" | "verifying" | "confirmed" | "error";

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+// ─── @unseen/ui — Types ──────────────────────────────────────────────────────
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/wallets.d.ts

@@ -0,0 +1,3 @@
+import type { WalletOption, WalletType } from "./types";
+export declare const WALLETS: WalletOption[];
+export declare function getWallet(id: WalletType): WalletOption | undefined;

package/dist/wallets.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WALLETS = void 0;
+exports.getWallet = getWallet;
+// ─── Wallet Definitions ──────────────────────────────────────────────────────
+const phantomIcon = "/wallets/phantom-logo.jpg";
+const solflareIcon = "/wallets/solflare-logo.svg";
+const backpackIcon = "/wallets/backpack-logo.svg";
+function getRefFromCheckoutUrl(url) {
+    try {
+        return new URL(url).origin;
+    }
+    catch {
+        return "https://unseen.finance";
+    }
+}
+exports.WALLETS = [
+    {
+        id: "phantom",
+        name: "Phantom",
+        icon: phantomIcon,
+        deeplink: (url) => `https://phantom.app/ul/browse/${encodeURIComponent(url)}?ref=${encodeURIComponent(getRefFromCheckoutUrl(url))}`,
+    },
+    {
+        id: "solflare",
+        name: "Solflare",
+        icon: solflareIcon,
+        deeplink: (url) => `https://solflare.com/ul/v1/browse/${encodeURIComponent(url)}?ref=${encodeURIComponent(getRefFromCheckoutUrl(url))}`,
+    },
+    {
+        id: "backpack",
+        name: "Backpack",
+        icon: backpackIcon,
+        deeplink: (url) => `https://backpack.app/ul/v1/browse/${encodeURIComponent(url)}?ref=${encodeURIComponent(getRefFromCheckoutUrl(url))}`,
+    },
+];
+function getWallet(id) {
+    return exports.WALLETS.find((w) => w.id === id);
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@unseen_fi/ui",
+  "version": "0.1.0",
+  "description": "React components for Unseen Pay — wallet picker modal, QR checkout, and payment button",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/node": "^20",
+    "typescript": "^5"
+  },
+  "keywords": ["solana", "payments", "privacy", "umbra", "unseen", "react"],
+  "license": "MIT"
+}