@swype-org/deposit 0.3.19 → 0.3.22

package/dist/index.cjs

@@ -98,7 +98,19 @@ function parseIframeReady(data) {
   if (msg.type !== "blink:iframe-ready") {
     return null;
   }
-  return { type: "blink:iframe-ready" };
+  return { type: "blink:iframe-ready", capabilities: parseCapabilities(msg.capabilities) };
+}
+function parseCapabilities(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((entry) => typeof entry === "string");
+}
+function buildViewportMessage(viewportLvh, safeAreaBottom) {
+  return { type: "blink:viewport", viewportLvh, safeAreaBottom };
+}
+function buildRevealMessage() {
+  return { type: "blink:reveal" };
 }
 function buildSignedPayloadMessage(merchantId, payload, signature) {
   return {
@@ -505,6 +517,34 @@ function normalizeProviderError(err) {
   return { code: -32603, message: typeof err === "string" ? err : "Provider error" };
 }
 
+// src/viewportMetrics.ts
+function measureViewportMetrics() {
+  const unavailable = { viewportLvh: 0, safeAreaBottom: 0 };
+  if (typeof document === "undefined" || typeof window === "undefined" || typeof window.getComputedStyle !== "function" || !document.body) {
+    return unavailable;
+  }
+  try {
+    const probe = document.createElement("div");
+    probe.style.cssText = "position:fixed;top:0;left:0;width:0;visibility:hidden;pointer-events:none;height:100lvh;padding-bottom:env(safe-area-inset-bottom,0px)";
+    document.body.appendChild(probe);
+    let viewportLvh = 0;
+    let safeAreaBottom = 0;
+    try {
+      const computed = window.getComputedStyle(probe);
+      viewportLvh = Math.round(Number.parseFloat(computed.height) || 0);
+      safeAreaBottom = Math.round(Number.parseFloat(computed.paddingBottom) || 0);
+    } finally {
+      probe.remove();
+    }
+    if (viewportLvh <= 0) {
+      viewportLvh = Math.round(window.innerHeight || 0);
+    }
+    return { viewportLvh, safeAreaBottom };
+  } catch {
+    return unavailable;
+  }
+}
+
 // src/iframe.ts
 var STYLE_ID = "blink-deposit-styles";
 var CLOSE_DURATION_MS = 280;
@@ -525,6 +565,8 @@ var STYLES = `
 [data-blink-overlay][data-blink-mobile-sheet] [data-blink-container]{width:100%;max-width:100%;height:79vh;border-radius:24px 24px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);animation:blink-slide-up-full .35s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom,0px)}
 [data-blink-overlay][data-blink-mobile-sheet][data-blink-closing] [data-blink-container]{opacity:1;animation:blink-slide-down-full ${CLOSE_DURATION_MS}ms ease-in forwards}
 @media(max-width:${MOBILE_SHEET_MAX_VIEWPORT_PX}px){[data-blink-overlay]{align-items:flex-end;touch-action:none;overscroll-behavior:contain}[data-blink-container]{width:100%;max-width:100%;height:79vh;border-radius:24px 24px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);animation:blink-slide-up-full .35s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom,0px)}[data-blink-overlay][data-blink-closing] [data-blink-container]{opacity:1;animation:blink-slide-down-full ${CLOSE_DURATION_MS}ms ease-in forwards}}
+[data-blink-overlay][data-blink-fluid] [data-blink-container],[data-blink-overlay][data-blink-fluid][data-blink-mobile-sheet] [data-blink-container]{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;box-shadow:none;animation:none;background:transparent;padding-bottom:0}
+[data-blink-overlay][data-blink-fluid][data-blink-closing] [data-blink-container]{animation:none;transition:none;opacity:1}
 `;
 function createIframe(url, containerElement, options) {
   ensureStyles();
@@ -536,6 +578,9 @@ function createIframe(url, containerElement, options) {
   if (shouldUseMobileSheetLayout()) {
     overlay.setAttribute("data-blink-mobile-sheet", "");
   }
+  if (options?.fluid) {
+    overlay.setAttribute("data-blink-fluid", "");
+  }
   if (hidden) {
     overlay.style.display = "none";
   }
@@ -564,6 +609,37 @@ function createIframe(url, containerElement, options) {
   };
   attachBridge();
   iframe.addEventListener("load", attachBridge);
+  function postReveal() {
+    if (closed) return;
+    iframe.contentWindow?.postMessage(buildRevealMessage(), iframeOrigin);
+  }
+  function postViewportMetrics() {
+    if (closed || !options?.fluid) return;
+    const metrics = measureViewportMetrics();
+    if (metrics.viewportLvh <= 0) return;
+    iframe.contentWindow?.postMessage(
+      buildViewportMessage(metrics.viewportLvh, metrics.safeAreaBottom),
+      iframeOrigin
+    );
+  }
+  let viewportPostScheduled = false;
+  const onViewportChange = () => {
+    if (viewportPostScheduled) return;
+    viewportPostScheduled = true;
+    requestAnimationFrame(() => {
+      viewportPostScheduled = false;
+      postViewportMetrics();
+    });
+  };
+  if (options?.fluid) {
+    window.addEventListener("resize", onViewportChange);
+    window.addEventListener("orientationchange", onViewportChange);
+  }
+  const onLoadReveal = () => {
+    postViewportMetrics();
+    if (!hidden) postReveal();
+  };
+  iframe.addEventListener("load", onLoadReveal);
   let savedOverflow = "";
   let scrollLocked = false;
   const onBackdropClick = (event) => {
@@ -594,6 +670,8 @@ function createIframe(url, containerElement, options) {
     overlay.removeEventListener("click", onBackdropClick);
     overlay.removeEventListener("touchmove", onTouchMove);
     document.removeEventListener("keydown", onKeyDown);
+    window.removeEventListener("resize", onViewportChange);
+    window.removeEventListener("orientationchange", onViewportChange);
   }
   function unlockScroll() {
     if (!scrollLocked) return;
@@ -619,6 +697,7 @@ function createIframe(url, containerElement, options) {
   }
   function detachBridge() {
     iframe.removeEventListener("load", attachBridge);
+    iframe.removeEventListener("load", onLoadReveal);
     if (rpcHostHandle) {
       rpcHostHandle.detach();
       rpcHostHandle = null;
@@ -649,6 +728,14 @@ function createIframe(url, containerElement, options) {
       overlay.style.display = "";
       lockScroll();
       attachDismissalListeners();
+      postViewportMetrics();
+      postReveal();
+    },
+    postReveal() {
+      postReveal();
+    },
+    downgradeToFixed() {
+      overlay.removeAttribute("data-blink-fluid");
     },
     onClose(callback) {
       closeCallback = callback;
@@ -824,6 +911,8 @@ var DEFAULT_WEBVIEW_BASE_URL = "https://pay.blink.cash";
 var SANDBOX_WEBVIEW_BASE_URL = "https://pay-sandbox.blink.cash";
 var IFRAME_READY_TIMEOUT_MS = 2e3;
 var WARM_IFRAME_READY_TIMEOUT_MS = 6e4;
+var LAYOUT_FLUID_CAPABILITY = "layout-fluid";
+var IFRAME_NOT_READY = { ready: false, fluidCapable: false };
 function resolveWebviewBaseUrl(config) {
   if (config.webviewBaseUrl) return config.webviewBaseUrl;
   return config.environment === "sandbox" ? SANDBOX_WEBVIEW_BASE_URL : DEFAULT_WEBVIEW_BASE_URL;
@@ -894,7 +983,10 @@ var Deposit = class {
     const webviewBaseUrl = resolveWebviewBaseUrl(this.config);
     this.hostedOrigin = this.config.hostedFlowOrigin ?? new URL(webviewBaseUrl).origin;
     const preloadUrl = this.buildPreloadUrl(webviewBaseUrl);
-    const iframe = createIframe(preloadUrl, this.config.containerElement, { hidden: true });
+    const iframe = createIframe(preloadUrl, this.config.containerElement, {
+      hidden: true,
+      fluid: this.isFluidLayout()
+    });
     const ready = this.waitForIframeReady(iframe, WARM_IFRAME_READY_TIMEOUT_MS);
     this.warmIframe = iframe;
     this.warmIframeReady = ready.promise;
@@ -930,6 +1022,8 @@ var Deposit = class {
       preloadUrl.searchParams.set("merchantId", this.config.merchantId);
     }
     this.applyFullWidgetParam(preloadUrl);
+    this.applyLayoutParam(preloadUrl);
+    this.applyViewportParams(preloadUrl);
     return preloadUrl.toString();
   }
   /**
@@ -1075,6 +1169,35 @@ var Deposit = class {
       url.searchParams.set("enableFullWidget", "false");
     }
   }
+  /** Fluid is the default; `layout: 'fixed'` opts back into the legacy container. */
+  isFluidLayout() {
+    return this.config.layout !== "fixed";
+  }
+  /**
+   * Marks the hosted-flow URL as fluid-layout: the iframe spans the full
+   * viewport and the hosted flow renders the card/sheet chrome itself.
+   * Only applied to preload URLs — the URL-param fallback path exists
+   * precisely because the webview never signalled ready, so it cannot be
+   * assumed to understand fluid layout and gets the fixed container.
+   */
+  applyLayoutParam(url) {
+    if (this.isFluidLayout()) {
+      url.searchParams.set("layout", "fluid");
+    }
+  }
+  /**
+   * Seeds the merchant page's large-viewport height and safe-area bottom
+   * inset onto the fluid preload URL so the hosted flow can size the sheet
+   * before its JS boots. `blink:viewport` messages keep the values fresh
+   * afterwards (rotation, window resize) — see iframe.ts.
+   */
+  applyViewportParams(url) {
+    if (!this.isFluidLayout()) return;
+    const metrics = measureViewportMetrics();
+    if (metrics.viewportLvh <= 0) return;
+    url.searchParams.set("viewportLvh", String(metrics.viewportLvh));
+    url.searchParams.set("safeAreaBottom", String(metrics.safeAreaBottom));
+  }
   setStatus(status) {
     if (this._status === status) return;
     this.log(`Status: ${this._status} \u2192 ${status}`);
@@ -1098,7 +1221,7 @@ var Deposit = class {
         iframeReadyPromise = Promise.race([
           warm.ready,
           new Promise(
-            (resolve) => setTimeout(() => resolve(false), IFRAME_READY_TIMEOUT_MS)
+            (resolve) => setTimeout(() => resolve(IFRAME_NOT_READY), IFRAME_READY_TIMEOUT_MS)
           )
         ]).then((ready) => {
           warm.cancelReady();
@@ -1108,7 +1231,8 @@ var Deposit = class {
       } else {
         preloadIframe = createIframe(
           this.buildPreloadUrl(webviewBaseUrl),
-          this.config.containerElement
+          this.config.containerElement,
+          { fluid: this.isFluidLayout() }
         );
         iframeReadyPromise = this.waitForIframeReady(preloadIframe).promise;
       }
@@ -1138,7 +1262,11 @@ var Deposit = class {
         this.log("Request superseded or iframe dismissed during signer call");
         return;
       }
-      if (iframeReady) {
+      if (iframeReady.ready) {
+        if (this.isFluidLayout() && !iframeReady.fluidCapable) {
+          preloadIframe.downgradeToFixed();
+          this.log("Webview lacks layout-fluid capability \u2014 downgraded to fixed container");
+        }
         const contentWindow = preloadIframe.contentWindow;
         if (contentWindow) {
           contentWindow.postMessage(
@@ -1193,8 +1321,10 @@ var Deposit = class {
     }
   }
   /**
-   * Resolves true when the iframe posts `blink:iframe-ready`, false on
-   * timeout. `cancel()` settles the promise as false immediately and releases
+   * Resolves `{ ready: true, ... }` when the iframe posts
+   * `blink:iframe-ready` (with `fluidCapable` reflecting its advertised
+   * capabilities), or `{ ready: false, fluidCapable: false }` on timeout.
+   * `cancel()` settles the promise as not-ready immediately and releases
    * the listener + timer — used to reap the generous warm-up wait once it no
    * longer matters (warm iframe consumed or discarded).
    */
@@ -1205,25 +1335,29 @@ var Deposit = class {
       const handler = (event) => {
         if (event.origin !== this.hostedOrigin) return;
         if (event.source !== iframeHandle.contentWindow) return;
-        if (parseIframeReady(event.data)) {
-          finish(true);
+        const readyMessage = parseIframeReady(event.data);
+        if (readyMessage) {
+          finish({
+            ready: true,
+            fluidCapable: readyMessage.capabilities.includes(LAYOUT_FLUID_CAPABILITY)
+          });
         }
       };
       window.addEventListener("message", handler);
       const timeout = setTimeout(() => {
         this.log("Iframe ready timeout \u2014 falling back to URL params");
-        finish(false);
+        finish(IFRAME_NOT_READY);
       }, timeoutMs);
       let settled = false;
-      finish = (ready) => {
+      finish = (result) => {
         if (settled) return;
         settled = true;
         window.removeEventListener("message", handler);
         clearTimeout(timeout);
-        resolve(ready);
+        resolve(result);
       };
     });
-    return { promise, cancel: () => finish(false) };
+    return { promise, cancel: () => finish(IFRAME_NOT_READY) };
   }
   startMessageListener(iframeHandle, onComplete) {
     const handler = (event) => {