From 2665f4b1cc9236fe54823716334c6186840556ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?coffee=20=E2=98=95=EF=B8=8F?= <coffee@cubelabs.xyz>
Date: Fri, 8 May 2026 16:03:52 -0400
Subject: [PATCH] Fix wallet SDK dialog lifecycle

---
 .changeset/quiet-dialogs-close.md      |  5 +++
 packages/wallet-sdk/src/core/Dialog.ts | 51 +++++---------------------
 packages/wallet-sdk/src/core/Wallet.ts |  2 +
 turbo.json                             |  1 +
 4 files changed, 17 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/quiet-dialogs-close.md

diff --git a/.changeset/quiet-dialogs-close.md b/.changeset/quiet-dialogs-close.md
new file mode 100644
index 0000000..e3af705
--- /dev/null
+++ b/.changeset/quiet-dialogs-close.md
@@ -0,0 +1,5 @@
+---
+"@abstract-foundation/wallet-sdk": patch
+---
+
+Align the iframe dialog with the wallet host overlay model and close the dialog when wallet requests finish.
diff --git a/packages/wallet-sdk/src/core/Dialog.ts b/packages/wallet-sdk/src/core/Dialog.ts
index 2e9f392..3d97d57 100644
--- a/packages/wallet-sdk/src/core/Dialog.ts
+++ b/packages/wallet-sdk/src/core/Dialog.ts
@@ -57,6 +57,7 @@ export type DialogFactory = (parameters: {
 // ---------- Internals ----------
 
 const DEFAULT_POPUP_SIZE = { width: 420, height: 720 };
+const DRAWER_BREAKPOINT = 460;
 
 function getReferrer(): { title: string; icon?: string } {
   if (typeof document === "undefined") return { title: "" };
@@ -162,16 +163,11 @@ export function iframe(options: IframeOptions = {}): DialogFactory {
     if (!UserAgent.isFirefox()) allow.push("clipboard-write");
     frame.setAttribute("allow", allow.join("; "));
     frame.setAttribute("src", buildHostUrl(host, DIALOG_PATH));
-    // `position: fixed; left/top: 0; 100% × 100%` — the iframe escapes the
-    // <dialog> box and covers the entire viewport. Without this the dialog
-    // and iframe size each other circularly: the dialog auto-sizes to fit
-    // the iframe (`width: 100%`), the iframe sizes to fit the dialog, and
-    // the resolved size collapses to the user-agent default tiny box.
-    // Mirrors Porto's iframe positioning.
+    // Mirrors Porto's iframe positioning: the parent SDK backdrop stays
+    // transparent and the wallet host iframe owns the in-frame overlay/chrome.
     Object.assign(frame.style, {
       backgroundColor: "transparent",
       border: "0",
-      colorScheme: "light dark",
       position: "fixed",
       left: "0",
       top: "0",
@@ -203,44 +199,16 @@ export function iframe(options: IframeOptions = {}): DialogFactory {
       waitForReady: true,
     });
 
-    const applyHostResize = (
-      payload: Extract<Messenger.InternalPayload, { type: "resize" }>,
-    ) => {
-      if (
-        typeof payload.width !== "number" &&
-        typeof payload.height !== "number"
-      )
-        return;
-
-      const width =
-        typeof payload.width === "number"
-          ? Math.min(Math.max(payload.width, 1), window.innerWidth)
-          : window.innerWidth;
-      const height =
-        typeof payload.height === "number"
-          ? Math.min(Math.max(payload.height, 1), window.innerHeight)
-          : window.innerHeight;
-      const drawer = width <= 460 || window.innerWidth <= 460;
-
-      Object.assign(frame.style, {
-        width: drawer ? "100%" : `${width}px`,
-        height: `${height}px`,
-        left: drawer ? "0" : "50%",
-        top: drawer ? "auto" : "50%",
-        bottom: drawer ? "0" : "auto",
-        transform: drawer ? "none" : "translate(-50%, -50%)",
-      } as CSSStyleDeclaration);
-    };
-    const offHostResize = messenger.on("__internal", (payload) => {
-      if (payload.type === "resize") applyHostResize(payload);
-    });
-
-    const drawerModeQuery = window.matchMedia("(max-width: 460px)");
+    const drawerModeQuery = window.matchMedia(
+      `(max-width: ${DRAWER_BREAKPOINT}px)`,
+    );
     const sendResize = () => {
       messenger.send("__internal", {
         type: "resize",
         // Match Porto's contract: 460 = drawer mode, 461 = floating mode.
-        width: drawerModeQuery.matches ? 460 : 461,
+        width: drawerModeQuery.matches
+          ? DRAWER_BREAKPOINT
+          : DRAWER_BREAKPOINT + 1,
       });
     };
     const onDrawerModeChange = () => {
@@ -354,7 +322,6 @@ export function iframe(options: IframeOptions = {}): DialogFactory {
         }
         inertObserver.disconnect();
         drawerModeQuery.removeEventListener("change", onDrawerModeChange);
-        offHostResize();
         messenger.destroy();
         root.remove();
       },
diff --git a/packages/wallet-sdk/src/core/Wallet.ts b/packages/wallet-sdk/src/core/Wallet.ts
index d71e1ff..87e3bc4 100644
--- a/packages/wallet-sdk/src/core/Wallet.ts
+++ b/packages/wallet-sdk/src/core/Wallet.ts
@@ -115,11 +115,13 @@ export function createWallet(config: WalletConfig): Wallet {
           }),
         );
       else p.resolve(response.result);
+      if (pending.size === 0) handle.close();
     });
     handle.messenger.on("__internal", (payload) => {
       if (payload.type === "switch") void switchMode(payload.mode);
     });
     handle.messenger.on("close", () => {
+      handle.close();
       // Reject every outstanding request with a user-rejected style error.
       for (const [id, p] of pending) {
         pending.delete(id);
diff --git a/turbo.json b/turbo.json
index fcfc366..f009061 100644
--- a/turbo.json
+++ b/turbo.json
@@ -22,6 +22,7 @@
       "cache": true
     },
     "dev": {
+      "dependsOn": ["^build"],
       "cache": false,
       "persistent": true
     }