@nibgate/sdk 0.2.35 → 0.2.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nibgate/sdk",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "description": "Framework-agnostic browser and server package for creator-owned gated content, unlock events, and receipts.",
   "type": "module",
   "sideEffects": [

package/src/browser/default-ui.js

@@ -82,9 +82,11 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
       <div style="font-size:50px;font-weight:700;letter-spacing:-.03em;color:${theme.fg};margin-bottom:12px">${esc(resource.price)} USDC</div>
       <div style="font-size:21px;color:${theme.muted};margin-bottom:48px">Pay to unlock this content</div>
       <div data-nibgate-wallet-label class="nui-mono" style="font-size:18px;color:${theme.muted};margin-bottom:40px;min-height:28px">Connect wallet</div>
-      <div data-nibgate-unlock-wrap style="width:100%;position:relative;border-radius:10px;overflow:hidden;cursor:pointer">
-        <div data-nibgate-unlock-progress style="position:absolute;inset:0;width:0%;background:rgba(255,255,255,0.35);border-radius:10px;transition:width .05s linear;z-index:2"></div>
-        <button type="button" data-nibgate-unlock style="width:100%;padding:14px 0;font-size:17px;font-weight:600;line-height:1;border:0;border-radius:10px;outline:none;cursor:pointer;position:relative;z-index:4;color:#fff;background:${theme.accent};box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform .1s,box-shadow .1s;font-family:inherit;display:flex;align-items:center;justify-content:center">${unlockSVG}Hold to pay</button></div>
+      <div data-nibgate-unlock-wrap style="width:100%;position:relative;border-radius:10px;cursor:pointer">
+        <button type="button" data-nibgate-unlock disabled style="width:100%;padding:14px 0;font-size:17px;font-weight:600;line-height:1;border:0;border-radius:10px;outline:none;cursor:pointer;position:relative;overflow:hidden;color:#fff;background:${theme.accent};box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform .1s,box-shadow .1s;font-family:inherit;display:flex;align-items:center;justify-content:center">
+          <div data-nibgate-unlock-progress style="position:absolute;inset:0;width:0%;background:rgba(255,255,255,0.55);border-radius:10px;transition:width .05s linear"></div>
+          <span data-nibgate-unlock-text style="position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px">${unlockSVG}Hold to pay</span>
+        </button></div>
       <div class="nui-stat" style="text-align:center;margin-top:16px" data-nibgate-status></div>
     </div>
     <div data-nibgate-premium hidden style="margin-top:32px;border-top:1px solid ${theme.border};padding-top:32px">${options.premiumContentHTML || ''}</div>
@@ -118,6 +120,7 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
   const wrap = card.querySelector('[data-nibgate-unlock-wrap]');
   const prog = card.querySelector('[data-nibgate-unlock-progress]');
   const btn = card.querySelector('[data-nibgate-unlock]');
+  const textEl = card.querySelector('[data-nibgate-unlock-text]');
 
   const HOLD_MS = 1500;
   let holdTimer = null, holdActive = false, holdComplete = false;
@@ -153,13 +156,13 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
       label.innerHTML = shortAddress(addr) + ' <span data-nibgate-disconnect style="cursor:pointer">· Disconnect</span> <span data-nibgate-bal style="margin-left:4px;cursor:pointer;white-space:nowrap;color:var(--accent,#7c9a6d)">· <span data-nibgate-bal-txt></span> | ' + depIcon() + '</span>';
       balEl = label.querySelector('[data-nibgate-bal]');
       balEl?.addEventListener('click', showDeposit);
-      btn.style.opacity = '1';
+      btn.disabled = false;
       btn.style.cursor = 'pointer';
     } else {
       label.innerHTML = 'Connect wallet';
-      btn.style.opacity = '0.6';
-      btn.style.cursor = 'pointer';
-      btn.innerHTML = unlockSVG + 'Hold to pay';
+      btn.disabled = true;
+      btn.style.cursor = 'default';
+      textEl.innerHTML = unlockSVG + 'Hold to pay';
     }
   }
 
@@ -169,7 +172,7 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
     if (b && !b._clickAttached) { b.addEventListener('click', showDeposit); b._clickAttached = true; }
   }
 
-  function setBtnText(t) { btn.innerHTML = unlockSVG + (t || 'Hold to pay'); }
+  function setBtnText(t) { textEl.innerHTML = unlockSVG + t; }
 
   function resetHold() {
     holdActive = false;
@@ -178,23 +181,12 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
     btn.style.transform = '';
     btn.style.boxShadow = '';
     prog.style.width = '0%';
-    setBtnText('Hold to pay');
+    if (!btn.disabled) setBtnText('Hold to pay');
   }
 
   function startHold(e) {
-    if (holdActive) return;
+    if (btn.disabled || holdActive) return;
     e.preventDefault();
-    // Auto-connect wallet if not connected, then start hold immediately
-    if (!ctrl.getWalletAddress()) {
-      setBtnText('Connecting\u2026');
-      btn.style.opacity = '0.6';
-      ctrl.connect().then(() => { updateLabel(); btn.style.opacity = '1'; setBtnText('Hold\u2026'); beginHold(); }).catch(() => { updateLabel(); btn.style.opacity = '1'; setBtnText('Hold to pay'); });
-      return;
-    }
-    beginHold();
-  }
-
-  function beginHold() {
     holdActive = true;
     holdComplete = false;
     btn.style.transform = 'scale(0.96)';
@@ -213,7 +205,7 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
       btn.style.boxShadow = '';
       prog.style.transition = 'width .05s linear';
       setBtnText('Processing\u2026');
-      btn.style.opacity = '0.6';
+      btn.disabled = true;
       setTimeout(() => ctrl.unlock().then(updateLabel).catch(updateLabel), 300);
     }, HOLD_MS);
   }
@@ -225,9 +217,7 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
   }
 
   label.addEventListener('click', (e) => {
-    if (e.target.dataset.nibgateDisconnect !== undefined) {
-      ctrl.disconnect().then(updateLabel);
-    } else if (!ctrl.getWalletAddress()) {
+    if (!ctrl.getWalletAddress()) {
       ctrl.connect().then(updateLabel).catch(() => updateLabel());
     }
   });
@@ -238,13 +228,21 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
   document.addEventListener('touchend', cancelHold);
   wrap.addEventListener('mouseleave', cancelHold);
 
+  function pressIn() { if (!btn.style.transform || btn.style.transform === 'none' || btn.style.transform === '') btn.style.transform = 'scale(0.97)'; }
+  function pressOut() { if (!holdActive) btn.style.transform = ''; }
+  btn.addEventListener('mousedown', pressIn);
+  btn.addEventListener('touchstart', pressIn, { passive: true });
+  btn.addEventListener('mouseup', pressOut);
+  btn.addEventListener('touchend', pressOut);
+  btn.addEventListener('mouseleave', pressOut);
+
   setTimeout(updateLabel, 200);
 
   const cleanup = () => { document.removeEventListener('mouseup', cancelHold); document.removeEventListener('touchend', cancelHold); };
   card.addEventListener('remove', cleanup);
 
   // ── Gateway balance + deposit icon ─────────────────────────────────────
-  let balEl = null, gwOverlay = null, balTimer = null;
+  let gwOverlay = null, balTimer = null;
 
   function depIcon() {
     return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>';
@@ -285,7 +283,7 @@ export function renderDefaultUnlockUI(container, resource, options = {}) {
   }
 
   if (window.ethereum) {
-    balTimer = setInterval(refreshBal, 15000);
+    balTimer = setInterval(refreshBal, 3000);
     setTimeout(refreshBal, 1000);
     window.ethereum.on('accountsChanged', refreshBal);
   }