@sweepconsole/js 0.2.5 → 0.2.6

package/README.md

@@ -34,7 +34,7 @@ app.post("/api/sweep/session", requireLogin, async (req, res) => {
 //     externalRef: req.user.id,
 //     maxAmount: usdc("35.00"),        // the ceiling, with headroom — not the price
 //     interval: "monthly",
-//     chains: ["base", "arbitrum", "optimism"],
+//     chains: ["base", "arbitrum", "optimism", "monad"],
 //     expiresAt: addYears(new Date(), 1),
 //   });
 //   res.json({ url: mandate.authorizationUrl });

package/dist/index.d.ts

@@ -93,7 +93,7 @@ export declare const BUTTON_CSS = ".sweep-pay{--_bg:var(--sweep-bg,#201e1d);--_f
  * never a styled div, which cannot be reached by keyboard.
  */
 export declare function mount(target: string | Element, opts: MountOptions): SweepButton;
-export declare const MODAL_CSS = ".sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}\n.sweep-modal[data-open=true]{opacity:1}\n.sweep-modal__panel{position:relative;width:100%;max-width:980px;height:min(1020px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}\n.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}\n.sweep-modal__frame{display:block;width:100%;height:100%;border:0}\n.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}\n.sweep-modal__close:hover{background:#ECECF3;color:#23233B}\n.sweep-modal__close:focus-visible{outline:2px solid #4447D6;outline-offset:2px}\n@media (max-width:1028px){.sweep-modal{padding:0}.sweep-modal__panel{max-width:none;height:100%;border-radius:0;opacity:1;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.sweep-modal__close{top:8px;right:8px}}\n@media (prefers-reduced-motion:reduce){.sweep-modal,.sweep-modal__panel{transition:none}.sweep-modal__panel{transform:none}}";
+export declare const MODAL_CSS = ".sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}\n.sweep-modal[data-open=true]{opacity:1}\n.sweep-modal__panel{position:relative;width:100%;max-width:980px;height:min(1200px,calc(100vh - 24px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}\n.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}\n.sweep-modal__frame{display:block;width:100%;height:100%;border:0}\n.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}\n.sweep-modal__close:hover{background:#ECECF3;color:#23233B}\n.sweep-modal__close:focus-visible{outline:2px solid #4447D6;outline-offset:2px}\n@media (max-width:1028px){.sweep-modal{padding:0}.sweep-modal__panel{max-width:none;height:100%;border-radius:0;opacity:1;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.sweep-modal__close{top:8px;right:8px}}\n@media (prefers-reduced-motion:reduce){.sweep-modal,.sweep-modal__panel{transition:none}.sweep-modal__panel{transform:none}}";
 export interface AuthorizeResult {
     /** The mandate the payer signed, as the authorize page reported it. */
     mandate_id?: string;

package/dist/index.js

@@ -296,9 +296,9 @@ const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
 // The panel pops in like a dialog: it grows from 92% with a slight spring past
 // full size while the backdrop dims and softens. On a phone it is a sheet that
 // slides up from the bottom instead (see the media query).
-export const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
+export const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
 .sweep-modal[data-open=true]{opacity:1}
-.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(1020px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
+.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(1200px,calc(100vh - 24px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
 .sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
 .sweep-modal__frame{display:block;width:100%;height:100%;border:0}
 .sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}
@@ -360,6 +360,7 @@ export function openAuthorize(url, opts = {}) {
             return;
         done = true;
         window.removeEventListener("message", onMessage);
+        window.removeEventListener("resize", fitPanel);
         document.removeEventListener("keydown", onKey);
         document.body.style.overflow = prevOverflow;
         root.remove();
@@ -401,8 +402,40 @@ export function openAuthorize(url, opts = {}) {
         }
         if (msg.type === "cancelled") {
             dismiss();
+            return;
+        }
+        if (msg.type === "resize") {
+            const h = msg.height;
+            if (typeof h === "number" && isFinite(h) && h > 0) {
+                contentHeight = h;
+                fitPanel();
+            }
+        }
+    }
+    /**
+     * The panel as tall as the checkout, up to the screen.
+     *
+     * It was a fixed min(1020px, 100vh - 48px) whatever the page held, so on a
+     * laptop the checkout scrolled inside a frame that stopped short of the
+     * screen's edge. The page now reports its real height and the panel takes
+     * exactly that, capped at the viewport less a 12px margin each side — so
+     * it only scrolls when the checkout genuinely cannot fit.
+     *
+     * Not on a phone, where the panel is a full-height sheet and the media
+     * query owns its size.
+     */
+    let contentHeight = 0;
+    function fitPanel() {
+        if (!contentHeight)
+            return;
+        if (window.matchMedia && window.matchMedia("(max-width:" + SHEET_MAX_WIDTH + "px)").matches) {
+            panel.style.height = "";
+            return;
         }
+        const room = window.innerHeight - 24;
+        panel.style.height = Math.min(Math.ceil(contentHeight), room) + "px";
     }
+    window.addEventListener("resize", fitPanel);
     window.addEventListener("message", onMessage);
     document.addEventListener("keydown", onKey);
     close.addEventListener("click", dismiss);

package/dist/sweep.js

@@ -299,9 +299,9 @@
   // The panel pops in like a dialog: it grows from 92% with a slight spring past
   // full size while the backdrop dims and softens. On a phone it is a sheet that
   // slides up from the bottom instead (see the media query).
-  const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
+  const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
   .sweep-modal[data-open=true]{opacity:1}
-  .sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(1020px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
+  .sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(1200px,calc(100vh - 24px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
   .sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
   .sweep-modal__frame{display:block;width:100%;height:100%;border:0}
   .sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}
@@ -363,6 +363,7 @@
               return;
           done = true;
           window.removeEventListener("message", onMessage);
+          window.removeEventListener("resize", fitPanel);
           document.removeEventListener("keydown", onKey);
           document.body.style.overflow = prevOverflow;
           root.remove();
@@ -404,8 +405,40 @@
           }
           if (msg.type === "cancelled") {
               dismiss();
+              return;
+          }
+          if (msg.type === "resize") {
+              const h = msg.height;
+              if (typeof h === "number" && isFinite(h) && h > 0) {
+                  contentHeight = h;
+                  fitPanel();
+              }
+          }
+      }
+      /**
+       * The panel as tall as the checkout, up to the screen.
+       *
+       * It was a fixed min(1020px, 100vh - 48px) whatever the page held, so on a
+       * laptop the checkout scrolled inside a frame that stopped short of the
+       * screen's edge. The page now reports its real height and the panel takes
+       * exactly that, capped at the viewport less a 12px margin each side — so
+       * it only scrolls when the checkout genuinely cannot fit.
+       *
+       * Not on a phone, where the panel is a full-height sheet and the media
+       * query owns its size.
+       */
+      let contentHeight = 0;
+      function fitPanel() {
+          if (!contentHeight)
+              return;
+          if (window.matchMedia && window.matchMedia("(max-width:" + SHEET_MAX_WIDTH + "px)").matches) {
+              panel.style.height = "";
+              return;
           }
+          const room = window.innerHeight - 24;
+          panel.style.height = Math.min(Math.ceil(contentHeight), room) + "px";
       }
+      window.addEventListener("resize", fitPanel);
       window.addEventListener("message", onMessage);
       document.addEventListener("keydown", onKey);
       close.addEventListener("click", dismiss);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sweepconsole/js",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Pay-with-USDC button for the browser \u2014 asks your server for a checkout URL and sends the payer there",
   "license": "MIT",
   "type": "module",
@@ -41,9 +41,9 @@
     "url": "git+https://github.com/u4believe/sweep-console.git",
     "directory": "packages/js"
   },
-  "homepage": "https://github.com/u4believe/sweep-console#readme",
+  "homepage": "https://docs.sweepconsole.xyz",
   "bugs": {
-    "url": "https://github.com/u4believe/sweep-console/issues"
+    "url": "mailto:support@sweepconsole.xyz"
   },
   "publishConfig": {
     "access": "public"