@neus/sdk 1.0.7 → 1.0.9

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

@@ -4,6 +4,39 @@
 import { useCallback, useMemo, useState, useEffect } from "react";
 import { NeusClient } from "@neus/sdk/client";
 
+// widgets/verify-gate/hostedCheckout.js
+var HOSTED_CHECKOUT_MESSAGE_TYPE = "neus_checkout_done";
+function buildHostedCheckoutUrl({
+  hostedCheckoutUrl,
+  verifierList,
+  returnUrl,
+  origin,
+  oauthProvider,
+  campaignTitle,
+  campaignMessage
+}) {
+  const checkoutUrl = new URL(hostedCheckoutUrl);
+  checkoutUrl.searchParams.set("verifiers", verifierList.join(","));
+  checkoutUrl.searchParams.set("mode", "popup");
+  checkoutUrl.searchParams.set("returnUrl", returnUrl);
+  checkoutUrl.searchParams.set("origin", origin);
+  if (typeof oauthProvider === "string" && oauthProvider.trim()) {
+    checkoutUrl.searchParams.set("oauthProvider", oauthProvider.trim());
+  }
+  if (typeof campaignTitle === "string" && campaignTitle.trim()) {
+    checkoutUrl.searchParams.set("presetLabel", campaignTitle.trim().slice(0, 200));
+  }
+  if (typeof campaignMessage === "string" && campaignMessage.trim()) {
+    checkoutUrl.searchParams.set("message", campaignMessage.trim().slice(0, 200));
+  }
+  return checkoutUrl.toString();
+}
+function buildHostedCheckoutRedirectUrl(popupCheckoutUrl) {
+  const checkoutUrl = new URL(popupCheckoutUrl);
+  checkoutUrl.searchParams.delete("mode");
+  return checkoutUrl.toString();
+}
+
 // widgets/verify-gate/mergeCreateProofOptions.js
 function mergeVerifyGateCreateProofOptions(proofOptions, verifierOptions) {
   return {
@@ -37,7 +70,7 @@ if (typeof document !== "undefined") {
   if (!document.getElementById(sid)) {
     const el = document.createElement("style");
     el.id = sid;
-    el.textContent = "button.neus-vg__primary{ color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a; }button.neus-vg__primary .neus-vg__label,button.neus-vg__primary span.neus-vg__label{ color: inherit !important; -webkit-text-fill-color: inherit; }";
+    el.textContent = "@keyframes neus-vg-spin{to{transform:rotate(360deg)}}button.neus-vg__primary{ color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a; }button.neus-vg__primary .neus-vg__label,button.neus-vg__primary span.neus-vg__label{ color: inherit !important; -webkit-text-fill-color: inherit; }";
     document.head.appendChild(el);
   }
 }
@@ -73,7 +106,6 @@ var INTERACTIVE_VERIFIERS = /* @__PURE__ */ new Set([
 ]);
 var HOSTED_WHEN_INCOMPLETE = /* @__PURE__ */ new Set(["wallet-link"]);
 var DEFAULT_HOSTED_CHECKOUT_URL = "https://neus.network/verify";
-var HOSTED_CHECKOUT_MESSAGE_TYPE = "neus_checkout_done";
 var VERIFY_GATE_DEFAULT_ERROR = "Something went wrong. Please try again.";
 function getVerifyGateUserError(err) {
   const c = err && err.code;
@@ -92,10 +124,11 @@ function getVerifyGateUserError(err) {
   }
   return null;
 }
-function dispatchNeusProofCreatedForHost({ qHash, proofId, walletAddress }) {
+function dispatchNeusProofCreatedForHost({ qHash, walletAddress, ...legacyInput }) {
   try {
     if (typeof window === "undefined") return;
-    const raw = typeof qHash === "string" && qHash.trim() || typeof proofId === "string" && proofId.trim() || "";
+    const raw = typeof qHash === "string" && qHash.trim() || typeof legacyInput.proofId === "string" && legacyInput.proofId.trim() || // Legacy input compatibility only. Do not expose or store proofId.
+    "";
     if (!raw) return;
     const w = typeof walletAddress === "string" ? walletAddress.trim() : "";
     const normalizedWallet = w && /^0x[a-fA-F0-9]{40}$/.test(w) ? w.toLowerCase() : w;
@@ -111,6 +144,44 @@ function dispatchNeusProofCreatedForHost({ qHash, proofId, walletAddress }) {
   } catch (_err) {
   }
 }
+function VerifyGateInlineSpinner({ size = 16 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      style: { animation: "neus-vg-spin 0.8s linear infinite" },
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "currentColor", strokeWidth: "3", opacity: "0.25" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function NeusLogo({ size = 16, onPrimaryFill = false }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: "4px",
+        border: `1px solid ${onPrimaryFill ? "rgba(10, 10, 10, 0.35)" : "currentColor"}`,
+        color: onPrimaryFill ? "#0a0a0a" : "currentColor",
+        fontSize: `${Math.max(9, Math.round(size * 0.55))}px`,
+        fontWeight: 700,
+        lineHeight: 1
+      },
+      children: "N"
+    }
+  );
+}
 function VerifyGate({
   requiredVerifiers = ["ownership-basic"],
   onVerified = void 0,
@@ -129,8 +200,7 @@ function VerifyGate({
   disabled = false,
   buttonText = void 0,
   mode = "create",
-  proofId = null,
-  qHash = null,
+  qHash: qHashProp = null,
   strategy = "reuse-or-create",
   checkExisting = true,
   maxProofAgeMs = void 0,
@@ -141,7 +211,8 @@ function VerifyGate({
   onError = void 0,
   wallet = void 0,
   chain = void 0,
-  signatureMethod = void 0
+  signatureMethod = void 0,
+  ...legacyProps
 }) {
   const [state, setState] = useState("idle");
   const [error, setError] = useState(null);
@@ -158,7 +229,8 @@ function VerifyGate({
     return Array.isArray(requiredVerifiers) && requiredVerifiers.length > 0 ? requiredVerifiers : ["ownership-basic"];
   }, [requiredVerifiers]);
   const primaryVerifier = verifierList[0];
-  const resolvedProofId = proofId || qHash || null;
+  const qHash = qHashProp || legacyProps.proofId || null;
+  const resolvedQHash = qHash;
   const hasInteractiveVerifier = useMemo(
     () => verifierList.some((verifierId) => {
       if (INTERACTIVE_VERIFIERS.has(verifierId)) return true;
@@ -205,16 +277,15 @@ function VerifyGate({
     setExistingProofs(gateResult);
     const existingProof = gateResult.existing?.[primaryVerifier];
     if (existingProof && onVerified) {
-      const proofId2 = existingProof.proofId || existingProof.qHash || null;
+      const existingQHash = existingProof.qHash || existingProof.proofId || null;
       onVerified({
-        proofId: proofId2,
-        qHash: proofId2,
+        qHash: existingQHash,
         address: existingProof.walletAddress || address,
         verifierIds: verifierList,
         verifiedVerifiers: existingProof.verifiedVerifiers || [],
         existing: true,
         proofsByVerifierId: gateResult.existing || {},
-        proofUrl: proofId2 ? `${apiUrl || "https://api.neus.network"}/api/v1/proofs/${proofId2}` : null
+        proofUrl: existingQHash ? `${apiUrl || "https://api.neus.network"}/api/v1/proofs/${existingQHash}` : null
       });
     }
     return true;
@@ -300,7 +371,6 @@ function VerifyGate({
       }
       if (result.qHash) {
         existing[result.verifierId] = {
-          proofId: result.qHash,
           qHash: result.qHash,
           walletAddress: address,
           verifiedVerifiers: [{ verifierId: result.verifierId, verified: true }]
@@ -322,35 +392,30 @@ function VerifyGate({
     }
     const origin = window.location.origin;
     const returnUrl = window.location.href;
-    const checkoutUrl = new URL(resolvedHostedCheckoutUrl);
-    checkoutUrl.searchParams.set("verifiers", verifierList.join(","));
-    checkoutUrl.searchParams.set("mode", "popup");
-    checkoutUrl.searchParams.set("returnUrl", returnUrl);
-    checkoutUrl.searchParams.set("origin", origin);
-    if (typeof oauthProvider === "string" && oauthProvider.trim()) {
-      checkoutUrl.searchParams.set("oauthProvider", oauthProvider.trim());
-    }
-    if (typeof campaignTitle === "string" && campaignTitle.trim()) {
-      checkoutUrl.searchParams.set("presetLabel", campaignTitle.trim().slice(0, 200));
-    }
-    if (typeof campaignMessage === "string" && campaignMessage.trim()) {
-      checkoutUrl.searchParams.set("message", campaignMessage.trim().slice(0, 200));
-    }
-    let expectedOrigin = "*";
+    const checkoutUrl = buildHostedCheckoutUrl({
+      hostedCheckoutUrl: resolvedHostedCheckoutUrl,
+      verifierList,
+      returnUrl,
+      origin,
+      oauthProvider,
+      campaignTitle,
+      campaignMessage
+    });
+    let expectedOrigin = null;
     try {
       expectedOrigin = new URL(resolvedHostedCheckoutUrl).origin;
     } catch (_err) {
-      expectedOrigin = "*";
+      expectedOrigin = null;
     }
-    return await new Promise((resolve, reject) => {
-      const url = checkoutUrl.toString();
+    return new Promise((resolve, reject) => {
+      const url = checkoutUrl;
       const popup = window.open(
         url,
         "neus_checkout",
         "width=600,height=700,scrollbars=yes,resizable=yes"
       );
       if (!popup) {
-        window.location.assign(url);
+        window.location.assign(buildHostedCheckoutRedirectUrl(url));
         return;
       }
       let completed = false;
@@ -375,7 +440,7 @@ function VerifyGate({
         }
       };
       const onMessage = (event) => {
-        if (expectedOrigin !== "*" && event.origin !== expectedOrigin) return;
+        if (!expectedOrigin || event.origin !== expectedOrigin) return;
         const payload = event?.data;
         if (!payload || payload.type !== HOSTED_CHECKOUT_MESSAGE_TYPE) return;
         completed = true;
@@ -388,7 +453,7 @@ function VerifyGate({
       };
       window.addEventListener("message", onMessage);
     });
-  }, [resolvedHostedCheckoutUrl, verifierList, oauthProvider]);
+  }, [resolvedHostedCheckoutUrl, verifierList, oauthProvider, campaignTitle, campaignMessage]);
   useEffect(() => {
     onStateChange?.(state);
   }, [state, onStateChange]);
@@ -408,7 +473,7 @@ function VerifyGate({
         });
         setExistingProofs(gateResult);
         applySatisfiedGateResult(gateResult, address);
-      } catch (err) {
+      } catch (_err) {
       }
     };
     checkExistingProofs();
@@ -438,7 +503,7 @@ function VerifyGate({
           requirements: buildGateRequirements()
         });
         if (applySatisfiedGateResult(gateResult, walletAddress)) return;
-      } catch (err) {
+      } catch (_err) {
       }
     }
     try {
@@ -446,18 +511,17 @@ function VerifyGate({
         setOperation("access");
         setIsProcessing(true);
         setState("signing");
-        if (!resolvedProofId) {
-          throw new Error("proofId is required for access mode");
+        if (!resolvedQHash) {
+          throw new Error("qHash is required for access mode");
         }
         setState("verifying");
         const privateData = await client.getPrivateProof(
-          resolvedProofId,
+          resolvedQHash,
           wallet || (typeof window !== "undefined" ? window.ethereum : null)
         );
         setState("verified");
         onVerified?.({
-          proofId: resolvedProofId,
-          qHash: resolvedProofId,
+          qHash: resolvedQHash,
           data: privateData.data,
           mode: "access",
           proofUrl: privateData.proofUrl
@@ -480,23 +544,22 @@ function VerifyGate({
           setOperation("verify");
           setIsProcessing(true);
           setState("interactive-checkout");
+          onStateChange?.("interactive-checkout");
           const checkoutResult = await launchHostedCheckout();
-          const checkoutProofId = checkoutResult?.proofId || checkoutResult?.qHash || null;
+          const checkoutQHash = checkoutResult?.qHash || checkoutResult?.proofId || null;
           const handoffWallet = typeof checkoutResult?.walletAddress === "string" && checkoutResult.walletAddress.trim() || walletAddress && String(walletAddress).trim() || "";
           setState("verified");
           dispatchNeusProofCreatedForHost({
-            qHash: checkoutProofId,
-            proofId: checkoutProofId,
+            qHash: checkoutQHash,
             walletAddress: handoffWallet
           });
           onVerified?.({
-            proofId: checkoutProofId,
-            qHash: checkoutProofId,
+            qHash: checkoutQHash,
             verifierIds: verifierList,
             existing: false,
             mode: "create",
             eligible: checkoutResult?.eligible !== false,
-            proofUrl: checkoutResult?.proofUrl || (checkoutProofId ? `${apiUrl || "https://api.neus.network"}/api/v1/proofs/${checkoutProofId}` : null)
+            proofUrl: checkoutResult?.proofUrl || (checkoutQHash ? `${apiUrl || "https://api.neus.network"}/api/v1/proofs/${checkoutQHash}` : null)
           });
           return;
         }
@@ -509,7 +572,9 @@ function VerifyGate({
         );
         const buildDataForVerifier = (verifierId) => {
           if (!CREATABLE_VERIFIERS.has(verifierId)) {
-            throw new Error(`${verifierId} cannot be created via the wallet flow. It requires hosted checkout or a server integration.`);
+            throw new Error(
+              `${verifierId} cannot be created via the wallet flow. It requires hosted checkout or a server integration.`
+            );
           }
           const explicit = verifierData && verifierData[verifierId];
           if (explicit && typeof explicit === "object") return explicit;
@@ -546,8 +611,8 @@ function VerifyGate({
             wallet: wallet || (typeof window !== "undefined" ? window.ethereum : void 0)
           });
           setState("verifying");
-          const proofIdToCheck = created.proofId || created.qHash || created?.data?.proofId || created?.data?.qHash;
-          const final = await client.pollProofStatus(proofIdToCheck, { interval: 3e3, timeout: 6e4 });
+          const qHashToCheck = created.qHash || created.proofId || created?.data?.qHash || created?.data?.proofId;
+          const final = await client.pollProofStatus(qHashToCheck, { interval: 3e3, timeout: 6e4 });
           const verifiedVerifiers = final?.data?.verifiedVerifiers || [];
           const verifierResult = verifiedVerifiers.find((v) => v.verifierId === verifierId);
           if (!verifierResult || verifierResult.verified !== true) {
@@ -556,11 +621,10 @@ function VerifyGate({
           const hubTx = final?.data?.hubTransaction || {};
           const crosschain = final?.data?.crosschain || {};
           const txHash = hubTx?.txHash || crosschain?.hubTxHash || null;
-          const finalProofId = final?.proofId || final?.qHash || proofIdToCheck;
+          const finalQHash = final?.qHash || final?.proofId || qHashToCheck;
           return {
             verifierId,
-            proofId: finalProofId,
-            qHash: finalProofId,
+            qHash: finalQHash,
             address: final?.data?.walletAddress,
             txHash,
             verifiedVerifiers,
@@ -573,18 +637,15 @@ function VerifyGate({
         }
         setState("verified");
         const last = results[results.length - 1];
-        const lastProofId = last?.proofId || last?.qHash || null;
+        const lastQHash = last?.qHash || null;
         const handoffAddr = last?.address && String(last.address).trim() || walletAddress && String(walletAddress).trim() || "";
         dispatchNeusProofCreatedForHost({
-          qHash: lastProofId,
-          proofId: lastProofId,
+          qHash: lastQHash,
           walletAddress: handoffAddr
         });
         onVerified?.({
-          proofId: lastProofId,
-          qHash: lastProofId,
-          proofIds: results.map((r) => r.proofId || r.qHash).filter(Boolean),
-          qHashes: results.map((r) => r.proofId || r.qHash).filter(Boolean),
+          qHash: lastQHash,
+          qHashes: results.map((r) => r.qHash).filter(Boolean),
           address: last?.address,
           txHash: last?.txHash,
           verifierIds: verifierList,
@@ -596,7 +657,7 @@ function VerifyGate({
     } catch (err) {
       const userMsg = getVerifyGateUserError(err);
       const fallback = mode === "access" ? "Access failed" : VERIFY_GATE_DEFAULT_ERROR;
-      setError(userMsg != null ? userMsg : fallback);
+      setError(userMsg !== null ? userMsg : fallback);
       setState("error");
       onError?.(err);
     } finally {
@@ -606,7 +667,7 @@ function VerifyGate({
     disabled,
     isProcessing,
     mode,
-    resolvedProofId,
+    resolvedQHash,
     verifierList,
     hasInteractiveVerifier,
     client,
@@ -617,6 +678,7 @@ function VerifyGate({
     launchHostedCheckout,
     onVerified,
     onError,
+    onStateChange,
     shouldCheckExisting,
     walletAddress,
     existingProofs,
@@ -645,13 +707,23 @@ function VerifyGate({
       setNotice("No matching proof was found. Verify to create a proof.");
     } catch (err) {
       const userMsg = getVerifyGateUserError(err);
-      setError(userMsg != null ? userMsg : "Unable to access private proofs");
+      setError(userMsg !== null ? userMsg : "Unable to access private proofs");
       setState("error");
       onError?.(err);
     } finally {
       setIsProcessing(false);
     }
-  }, [disabled, isProcessing, mode, allowPrivateReuse, walletAddress, getOrRequestWalletAddress, tryPrivateReuse, applySatisfiedGateResult, onError]);
+  }, [
+    disabled,
+    isProcessing,
+    mode,
+    allowPrivateReuse,
+    walletAddress,
+    getOrRequestWalletAddress,
+    tryPrivateReuse,
+    applySatisfiedGateResult,
+    onError
+  ]);
   const primaryCtaClass = state === "idle" || state === "interactive-checkout" ? "neus-vg__primary" : "";
   const getLabel = () => {
     if (buttonText && state === "idle") return buttonText;
@@ -708,17 +780,17 @@ function VerifyGate({
     if (state === "error") {
       return {
         ...buttonBaseStyle,
-        background: `rgba(239, 68, 68, 0.15)`,
+        background: "rgba(239, 68, 68, 0.15)",
         color: THEME.error,
-        border: `1px solid rgba(239, 68, 68, 0.3)`
+        border: "1px solid rgba(239, 68, 68, 0.3)"
       };
     }
     if (state === "signing" || state === "verifying") {
       return {
         ...buttonBaseStyle,
-        background: `rgba(61, 114, 201, 0.15)`,
+        background: "rgba(61, 114, 201, 0.15)",
         color: "var(--neus-accent, #98C0EF)",
-        border: `1px solid rgba(61, 114, 201, 0.3)`
+        border: "1px solid rgba(61, 114, 201, 0.3)"
       };
     }
     return {
@@ -743,7 +815,7 @@ function VerifyGate({
           className: primaryCtaClass,
           style: getButtonStyle(),
           children: [
-            (state === "signing" || state === "verifying" || state === "interactive-checkout") && /* @__PURE__ */ jsx(Spinner, { size: 16 }),
+            (state === "signing" || state === "verifying" || state === "interactive-checkout") && /* @__PURE__ */ jsx(VerifyGateInlineSpinner, { size: 16 }),
             showBrand && state === "idle" && /* @__PURE__ */ jsx(NeusLogo, { size: 16, onPrimaryFill: true }),
             state === "verified" && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
             /* @__PURE__ */ jsx("span", { className: "neus-vg__label", style: { color: "inherit" }, children: getLabel() })
@@ -800,7 +872,7 @@ function VerifyGate({
       style: { ...getButtonStyle(), ...style },
       disabled: disabled || isProcessing,
       children: [
-        (state === "signing" || state === "verifying" || state === "interactive-checkout") && /* @__PURE__ */ jsx(Spinner, { size: 16 }),
+        (state === "signing" || state === "verifying" || state === "interactive-checkout") && /* @__PURE__ */ jsx(VerifyGateInlineSpinner, { size: 16 }),
         showBrand && state === "idle" && /* @__PURE__ */ jsx(NeusLogo, { size: 16, onPrimaryFill: true }),
         state === "verified" && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
         /* @__PURE__ */ jsx("span", { className: "neus-vg__label", style: { color: "inherit" }, children: getLabel() }),