@swype-org/deposit 0.3.20 → 0.3.22

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { D as DepositStatus, a as DepositResult, b as DepositError, c as DepositConfig, d as DepositRequest } from './types-Ds07N2zN.cjs';
-export { C as CheckoutConfig, e as CheckoutError, f as CheckoutErrorCode, g as CheckoutStatus, h as DepositErrorCode, S as SignerFunction, i as SignerRequest, j as SignerResponse, T as TransferSummary, k as getDisplayMessage } from './types-Ds07N2zN.cjs';
+import { D as DepositStatus, a as DepositResult, b as DepositError, c as DepositConfig, d as DepositRequest } from './types-iQf3f-_m.cjs';
+export { C as CheckoutConfig, e as CheckoutError, f as CheckoutErrorCode, g as CheckoutStatus, h as DepositErrorCode, S as SignerFunction, i as SignerRequest, j as SignerResponse, T as TransferSummary, k as getDisplayMessage } from './types-iQf3f-_m.cjs';
 
 declare const DEFAULT_WEBVIEW_BASE_URL = "https://pay.blink.cash";
 declare const SANDBOX_WEBVIEW_BASE_URL = "https://pay-sandbox.blink.cash";
@@ -94,11 +94,30 @@ declare class Deposit {
      * config, so the full widget renders only when both allow it.
      */
     private applyFullWidgetParam;
+    /** Fluid is the default; `layout: 'fixed'` opts back into the legacy container. */
+    private isFluidLayout;
+    /**
+     * 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.
+     */
+    private applyLayoutParam;
+    /**
+     * 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.
+     */
+    private applyViewportParams;
     private setStatus;
     private runSignerFlow;
     /**
-     * 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).
      */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as DepositStatus, a as DepositResult, b as DepositError, c as DepositConfig, d as DepositRequest } from './types-Ds07N2zN.js';
-export { C as CheckoutConfig, e as CheckoutError, f as CheckoutErrorCode, g as CheckoutStatus, h as DepositErrorCode, S as SignerFunction, i as SignerRequest, j as SignerResponse, T as TransferSummary, k as getDisplayMessage } from './types-Ds07N2zN.js';
+import { D as DepositStatus, a as DepositResult, b as DepositError, c as DepositConfig, d as DepositRequest } from './types-iQf3f-_m.js';
+export { C as CheckoutConfig, e as CheckoutError, f as CheckoutErrorCode, g as CheckoutStatus, h as DepositErrorCode, S as SignerFunction, i as SignerRequest, j as SignerResponse, T as TransferSummary, k as getDisplayMessage } from './types-iQf3f-_m.js';
 
 declare const DEFAULT_WEBVIEW_BASE_URL = "https://pay.blink.cash";
 declare const SANDBOX_WEBVIEW_BASE_URL = "https://pay-sandbox.blink.cash";
@@ -94,11 +94,30 @@ declare class Deposit {
      * config, so the full widget renders only when both allow it.
      */
     private applyFullWidgetParam;
+    /** Fluid is the default; `layout: 'fixed'` opts back into the legacy container. */
+    private isFluidLayout;
+    /**
+     * 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.
+     */
+    private applyLayoutParam;
+    /**
+     * 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.
+     */
+    private applyViewportParams;
     private setStatus;
     private runSignerFlow;
     /**
-     * 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).
      */

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ALLOWED_RPC_METHODS, BRIDGE_PROTOCOL_VERSION, Checkout, CheckoutError, DEFAULT_WEBVIEW_BASE_URL, Deposit, DepositError, SANDBOX_WEBVIEW_BASE_URL, attachRpcHost, createWalletDiscoverer, getDisplayMessage, parseBridgeMessage } from './chunk-VMXCXXVN.js';
+export { ALLOWED_RPC_METHODS, BRIDGE_PROTOCOL_VERSION, Checkout, CheckoutError, DEFAULT_WEBVIEW_BASE_URL, Deposit, DepositError, SANDBOX_WEBVIEW_BASE_URL, attachRpcHost, createWalletDiscoverer, getDisplayMessage, parseBridgeMessage } from './chunk-NZ7DOPZ5.js';
 
 // src/index.ts
 var VERSION = "0.3.0";

package/dist/react.cjs

@@ -101,7 +101,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 {
@@ -508,6 +520,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;
@@ -528,6 +568,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();
@@ -539,6 +581,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";
   }
@@ -567,6 +612,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) => {
@@ -597,6 +673,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;
@@ -622,6 +700,7 @@ function createIframe(url, containerElement, options) {
   }
   function detachBridge() {
     iframe.removeEventListener("load", attachBridge);
+    iframe.removeEventListener("load", onLoadReveal);
     if (rpcHostHandle) {
       rpcHostHandle.detach();
       rpcHostHandle = null;
@@ -652,6 +731,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;
@@ -827,6 +914,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;
@@ -897,7 +986,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;
@@ -933,6 +1025,8 @@ var Deposit = class {
       preloadUrl.searchParams.set("merchantId", this.config.merchantId);
     }
     this.applyFullWidgetParam(preloadUrl);
+    this.applyLayoutParam(preloadUrl);
+    this.applyViewportParams(preloadUrl);
     return preloadUrl.toString();
   }
   /**
@@ -1078,6 +1172,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}`);
@@ -1101,7 +1224,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();
@@ -1111,7 +1234,8 @@ var Deposit = class {
       } else {
         preloadIframe = createIframe(
           this.buildPreloadUrl(webviewBaseUrl),
-          this.config.containerElement
+          this.config.containerElement,
+          { fluid: this.isFluidLayout() }
         );
         iframeReadyPromise = this.waitForIframeReady(preloadIframe).promise;
       }
@@ -1141,7 +1265,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(
@@ -1196,8 +1324,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).
    */
@@ -1208,25 +1338,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) => {