@neus/sdk 1.0.0 → 1.0.1

package/widgets/README.md

@@ -0,0 +1,53 @@
+# NEUS Widgets (VerifyGate + ProofBadge)
+
+React components for NEUS verification and access gating.
+
+## Install
+
+```bash
+npm install @neus/sdk react react-dom
+```
+
+## VerifyGate
+
+Gate UI behind verification requirements.
+
+```jsx
+import { VerifyGate } from '@neus/sdk/widgets';
+
+export function Page() {
+  return (
+    <VerifyGate
+      requiredVerifiers={['nft-ownership']}
+      verifierData={{
+        'nft-ownership': { contractAddress: '0x...', tokenId: '1', chainId: 1 }
+      }}
+    >
+      <div>Unlocked</div>
+    </VerifyGate>
+  );
+}
+```
+
+### Key props
+
+- `requiredVerifiers`: `string[]` (default: `['ownership-basic']`)
+- `verifierData`: object keyed by verifier id
+- `strategy`: `'reuse-or-create' | 'reuse' | 'fresh'` (default: `'reuse-or-create'`)
+- `proofOptions`: `{ privacyLevel, publicDisplay, storeOriginalContent, enableIpfs? }` (defaults: private)
+- `mode`: `'create' | 'access'` (default: `'create'`)
+- `qHash`: string (required for `mode="access"`)
+
+Notes:
+- Reuse without prompting can only see **public + discoverable** proofs.
+- Reusing private proofs requires an **owner signature** (wallet grants read access).
+
+## ProofBadge
+
+Display verification status by Proof ID (`qHash`).
+
+```jsx
+import { ProofBadge } from '@neus/sdk/widgets';
+
+<ProofBadge qHash="0x..." showChains />
+```

package/widgets/index.js

@@ -0,0 +1,9 @@
+/**
+ * NEUS Widgets
+ * 
+ * Core Widgets:
+ * - VerifyGate: Universal verification gate component
+ * - ProofBadge: Display verification status
+ */
+
+export * from './verify-gate/index.js';

package/widgets/verify-gate/dist/ProofBadge.js

@@ -0,0 +1,355 @@
+"use client";
+
+// widgets/verify-gate/ProofBadge.jsx
+import React, { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_API_BASE = "https://api.neus.network";
+var NeusLogo = ({ size = 12 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    style: {
+      width: size,
+      height: size,
+      display: "block",
+      borderRadius: 2,
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "5", fill: "currentColor", opacity: "0.18" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7 16V8h2.1l4.9 5.9V8H17v8h-2.1L10 10.1V16H7z",
+          fill: "currentColor",
+          opacity: "0.9"
+        }
+      )
+    ]
+  }
+);
+function ProofBadge({
+  qHash,
+  size = "sm",
+  uiLinkBase = "https://neus.network",
+  apiUrl = DEFAULT_API_BASE,
+  proof = void 0,
+  showChains = false,
+  showLabel = true,
+  onClick = void 0,
+  className = ""
+}) {
+  const [status, setStatus] = useState(() => {
+    if (proof) {
+      const proofStatus = proof.status || "";
+      return proofStatus.includes("verified") ? "verified" : proofStatus.includes("pending") || proofStatus.includes("processing") ? "pending" : "failed";
+    }
+    return qHash ? "pending" : "unknown";
+  });
+  const [chainCount, setChainCount] = useState(() => {
+    if (proof?.crosschain) {
+      const total = proof.crosschain.totalChains || 0;
+      const relayResults = proof.crosschain.relayResults || {};
+      return total > 0 ? total : Object.keys(relayResults).length + (proof.crosschain.hubTxHash ? 1 : 0);
+    }
+    return 0;
+  });
+  useEffect(() => {
+    if (!qHash || proof)
+      return;
+    let cancelled = false;
+    async function checkStatus() {
+      try {
+        const res = await fetch(`${apiUrl}/api/v1/verification/status/${qHash}`, {
+          headers: { Accept: "application/json" }
+        });
+        if (!res.ok) {
+          if (!cancelled)
+            setStatus("failed");
+          return;
+        }
+        const json = await res.json();
+        if (cancelled)
+          return;
+        const proofStatus = json?.data?.status || "";
+        const isVerified = proofStatus.toLowerCase().includes("verified");
+        const isPending = proofStatus.toLowerCase().includes("processing") || proofStatus.toLowerCase().includes("pending");
+        setStatus(isVerified ? "verified" : isPending ? "pending" : "failed");
+        if (showChains && json?.data?.crosschain) {
+          const cc = json.data.crosschain;
+          const total = cc.totalChains || 0;
+          const relayResults = cc.relayResults || {};
+          const count = total > 0 ? total : Object.keys(relayResults).length + (cc.hubTxHash ? 1 : 0);
+          setChainCount(count);
+        }
+      } catch (_) {
+        if (!cancelled)
+          setStatus("failed");
+      }
+    }
+    checkStatus();
+    return () => {
+      cancelled = true;
+    };
+  }, [qHash, proof, apiUrl, showChains]);
+  const href = `${String(uiLinkBase).replace(/\/$/, "")}/proof/${qHash}`;
+  const isSm = size === "sm";
+  const logoSize = isSm ? 12 : 14;
+  const fontSize = isSm ? 10 : 11;
+  const gap = isSm ? 4 : 5;
+  const padY = isSm ? 2 : 3;
+  const padX = isSm ? 6 : 8;
+  const label = status === "verified" ? "Verified" : status === "pending" ? "Pending" : status === "unknown" ? "Unknown" : "Unverified";
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap,
+    textDecoration: "none",
+    padding: `${padY}px ${padX}px`,
+    borderRadius: 9999,
+    // rounded-full
+    border: "1px solid var(--neus-badge-border, rgba(148, 163, 184, 0.2))",
+    background: "var(--neus-badge-bg, rgba(148, 163, 184, 0.06))",
+    color: "var(--neus-badge-text, #94a3b8)",
+    fontFamily: "var(--neus-badge-font, inherit)",
+    fontWeight: 500,
+    fontSize,
+    whiteSpace: "nowrap",
+    lineHeight: 1,
+    cursor: "pointer",
+    transition: "opacity 0.15s ease"
+  };
+  const handleClick = (e) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick({ qHash, status, chainCount });
+    }
+  };
+  const title = showChains && chainCount > 0 ? `${label} on ${chainCount} chain${chainCount === 1 ? "" : "s"}` : label;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noreferrer",
+      style,
+      className,
+      "aria-label": title,
+      title,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(NeusLogo, { size: logoSize }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: label }),
+        showChains && chainCount > 0 && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.7, fontSize: fontSize - 1 }, children: [
+          "\xB7 ",
+          chainCount
+        ] })
+      ]
+    }
+  );
+}
+function SimpleProofBadge({
+  qHash,
+  uiLinkBase = "https://neus.network",
+  apiUrl = DEFAULT_API_BASE,
+  size = "sm",
+  label = "Verified",
+  proof = void 0,
+  onClick = void 0,
+  className = ""
+}) {
+  const [status, setStatus] = useState(() => {
+    if (proof) {
+      const proofStatus = proof.status || "";
+      return proofStatus.includes("verified") ? "verified" : "failed";
+    }
+    return qHash ? "pending" : "unknown";
+  });
+  useEffect(() => {
+    if (!qHash || proof)
+      return;
+    let cancelled = false;
+    async function checkStatus() {
+      try {
+        const res = await fetch(`${apiUrl}/api/v1/verification/status/${qHash}`, {
+          headers: { Accept: "application/json" }
+        });
+        if (!res.ok) {
+          if (!cancelled)
+            setStatus("failed");
+          return;
+        }
+        const json = await res.json();
+        if (cancelled)
+          return;
+        const isVerified = json?.success === true || json?.data?.status?.toLowerCase()?.includes("verified");
+        setStatus(isVerified ? "verified" : "failed");
+      } catch (_) {
+        if (!cancelled)
+          setStatus("failed");
+      }
+    }
+    checkStatus();
+    return () => {
+      cancelled = true;
+    };
+  }, [qHash, proof, apiUrl]);
+  const href = `${String(uiLinkBase).replace(/\/$/, "")}/proof/${qHash}`;
+  const isSm = size === "sm";
+  const logoSize = isSm ? 12 : 14;
+  const fontSize = isSm ? 10 : 11;
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    textDecoration: "none",
+    padding: "2px 6px",
+    borderRadius: 9999,
+    // rounded-full
+    border: "1px solid var(--neus-badge-border, rgba(148, 163, 184, 0.2))",
+    background: "var(--neus-badge-bg, transparent)",
+    color: "var(--neus-badge-text, #94a3b8)",
+    fontFamily: "var(--neus-badge-font, inherit)",
+    fontWeight: 500,
+    fontSize,
+    whiteSpace: "nowrap",
+    lineHeight: 1,
+    cursor: "pointer",
+    transition: "opacity 0.15s ease"
+  };
+  const handleClick = (e) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick({ qHash, status });
+    }
+  };
+  const displayLabel = status === "verified" ? label : status === "pending" ? "Pending" : status === "unknown" ? "Unknown" : "Unverified";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noreferrer",
+      style,
+      className,
+      "aria-label": displayLabel,
+      title: displayLabel,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(NeusLogo, { size: logoSize }),
+        /* @__PURE__ */ jsx("span", { children: displayLabel })
+      ]
+    }
+  );
+}
+function NeusPillLink({
+  qHash,
+  uiLinkBase = "https://neus.network",
+  label = "View",
+  size = "sm",
+  onClick = void 0,
+  className = ""
+}) {
+  const base = String(uiLinkBase).replace(/\/$/, "");
+  const href = qHash ? `${base}/proof/${qHash}` : base;
+  const isSm = size === "sm";
+  const logoSize = isSm ? 12 : 14;
+  const fontSize = isSm ? 10 : 11;
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    textDecoration: "none",
+    padding: "2px 6px",
+    borderRadius: 9999,
+    // rounded-full
+    border: "1px solid var(--neus-badge-border, rgba(148, 163, 184, 0.2))",
+    background: "var(--neus-badge-bg, transparent)",
+    color: "var(--neus-badge-text, #94a3b8)",
+    fontFamily: "var(--neus-badge-font, inherit)",
+    fontWeight: 500,
+    fontSize,
+    whiteSpace: "nowrap",
+    lineHeight: 1,
+    cursor: "pointer",
+    transition: "opacity 0.15s ease"
+  };
+  const handleClick = (e) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick({ qHash });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noreferrer",
+      style,
+      className,
+      "aria-label": label,
+      title: label,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(NeusLogo, { size: logoSize }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function VerifiedIcon({
+  qHash,
+  uiLinkBase = "https://neus.network",
+  size = 14,
+  tooltip = "Proof",
+  onClick = void 0,
+  className = ""
+}) {
+  const href = qHash ? `${String(uiLinkBase).replace(/\/$/, "")}/proof/${qHash}` : void 0;
+  const handleClick = (e) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick({ qHash });
+    }
+  };
+  const icon = /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: tooltip,
+      className,
+      style: {
+        display: "inline-flex",
+        cursor: href || onClick ? "pointer" : "default",
+        opacity: 0.85,
+        transition: "opacity 0.15s ease"
+      },
+      children: /* @__PURE__ */ jsx(NeusLogo, { size })
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noreferrer",
+        onClick: handleClick,
+        style: { display: "inline-flex", textDecoration: "none" },
+        "aria-label": tooltip,
+        children: icon
+      }
+    );
+  }
+  return icon;
+}
+export {
+  NeusPillLink,
+  ProofBadge,
+  SimpleProofBadge,
+  VerifiedIcon
+};