@neus/sdk 1.0.7 → 1.0.8

package/widgets/README.md

@@ -1,45 +1,45 @@
-# NEUS Widgets
-
-**Proof-aware React components** (VerifyGate, ProofBadge) so your UI can show verified state and gate content **using the same checks your server already trusts** - avoid re-implementing verifier rules only in the browser.
-
-## Install
-
-```bash
-npm install @neus/sdk react react-dom
-```
-
-## VerifyGate
-
-Create mode defaults to **private**. Override `proofOptions` only when you intentionally need public visibility for link-based or public checks.
-
-```jsx
-import { VerifyGate } from '@neus/sdk/widgets';
-
-export function Page() {
-  return (
-    <VerifyGate
-      appId="your-app-id"
-      requiredVerifiers={['nft-ownership']}
-      verifierData={{
-        'nft-ownership': { contractAddress: '0x...', tokenId: '1', chainId: 8453 }
-      }}
-    >
-      <div>Unlocked</div>
-    </VerifyGate>
-  );
-}
-```
-
-## ProofBadge
-
-```jsx
-import { ProofBadge } from '@neus/sdk/widgets';
-
-<ProofBadge proofId="0x..." showChains />
-```
-
-## Docs
-
-- [Widgets Overview](https://docs.neus.network/widgets/overview)
-- [Verify Component](https://docs.neus.network/widgets/verifygate)
-- [Quickstart](https://docs.neus.network/quickstart)
+# NEUS Widgets
+
+**Proof-aware React components** (VerifyGate, ProofBadge) so your UI can show verified state and gate content **using the same checks your server already trusts** - avoid re-implementing verifier rules only in the browser.
+
+## Install
+
+```bash
+npm install @neus/sdk react react-dom
+```
+
+## VerifyGate
+
+Create mode defaults to **private**. Override `proofOptions` only when you intentionally need public visibility for link-based or public checks.
+
+```jsx
+import { VerifyGate } from '@neus/sdk/widgets';
+
+export function Page() {
+  return (
+    <VerifyGate
+      appId="your-app-id"
+      requiredVerifiers={['nft-ownership']}
+      verifierData={{
+        'nft-ownership': { contractAddress: '0x...', tokenId: '1', chainId: 8453 }
+      }}
+    >
+      <div>Unlocked</div>
+    </VerifyGate>
+  );
+}
+```
+
+## ProofBadge
+
+```jsx
+import { ProofBadge } from '@neus/sdk/widgets';
+
+<ProofBadge proofId="0x..." showChains />
+```
+
+## Docs
+
+- [Widgets Overview](https://docs.neus.network/widgets/overview)
+- [Verify Component](https://docs.neus.network/widgets/verifygate)
+- [Quickstart](https://docs.neus.network/quickstart)

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;
@@ -111,6 +143,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,
@@ -322,20 +392,15 @@ 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));
-    }
+    const checkoutUrl = buildHostedCheckoutUrl({
+      hostedCheckoutUrl: resolvedHostedCheckoutUrl,
+      verifierList,
+      returnUrl,
+      origin,
+      oauthProvider,
+      campaignTitle,
+      campaignMessage
+    });
     let expectedOrigin = "*";
     try {
       expectedOrigin = new URL(resolvedHostedCheckoutUrl).origin;
@@ -343,14 +408,14 @@ function VerifyGate({
       expectedOrigin = "*";
     }
     return await new Promise((resolve, reject) => {
-      const url = checkoutUrl.toString();
+      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;
@@ -388,7 +453,7 @@ function VerifyGate({
       };
       window.addEventListener("message", onMessage);
     });
-  }, [resolvedHostedCheckoutUrl, verifierList, oauthProvider]);
+  }, [resolvedHostedCheckoutUrl, verifierList, oauthProvider, campaignTitle, campaignMessage]);
   useEffect(() => {
     onStateChange?.(state);
   }, [state, onStateChange]);
@@ -480,6 +545,7 @@ function VerifyGate({
           setOperation("verify");
           setIsProcessing(true);
           setState("interactive-checkout");
+          onStateChange?.("interactive-checkout");
           const checkoutResult = await launchHostedCheckout();
           const checkoutProofId = checkoutResult?.proofId || checkoutResult?.qHash || null;
           const handoffWallet = typeof checkoutResult?.walletAddress === "string" && checkoutResult.walletAddress.trim() || walletAddress && String(walletAddress).trim() || "";
@@ -617,6 +683,7 @@ function VerifyGate({
     launchHostedCheckout,
     onVerified,
     onError,
+    onStateChange,
     shouldCheckExisting,
     walletAddress,
     existingProofs,
@@ -743,7 +810,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 +867,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() }),