@openkey/sdk 0.12.0 → 0.12.1-beta.1

package/dist/index.mjs

@@ -352,6 +352,7 @@ var IframeModal = class {
   root;
   shadow;
   iframe;
+  card;
   onClose;
   onMessage;
   messageHandler;
@@ -363,6 +364,11 @@ var IframeModal = class {
   // only uncorrelated resizes from this iframe are accepted (TC-647).
   expectedRequestId = null;
   expectedProtocolVersion = null;
+  phaseV2 = false;
+  currentLayoutId = 0;
+  displayedHeight = 0;
+  hasDisplayedLayout = false;
+  revealTimer;
   constructor(opts) {
     this.host = opts.host;
     this.onClose = opts.onClose;
@@ -393,24 +399,34 @@ var IframeModal = class {
     backdrop.addEventListener("click", (e) => {
       if (e.target === backdrop) this.close();
     });
-    const card = document.createElement("div");
-    card.className = "ok-card";
+    this.card = document.createElement("div");
+    this.card.className = "ok-card";
+    if (opts.hideUntilLayout) {
+      this.card.inert = true;
+      this.card.style.opacity = "0";
+      this.card.style.pointerEvents = "none";
+      this.card.style.animation = "none";
+    }
     if (isMobile) {
       const handle = document.createElement("div");
       handle.className = "ok-handle";
-      card.appendChild(handle);
+      this.card.appendChild(handle);
     }
     const closeBtn = document.createElement("button");
     closeBtn.className = "ok-close";
     closeBtn.textContent = "\xD7";
     closeBtn.addEventListener("click", () => this.close());
-    card.appendChild(closeBtn);
+    this.card.appendChild(closeBtn);
     this.iframe = document.createElement("iframe");
     this.iframe.src = opts.url;
     this.iframe.setAttribute("allow", "clipboard-write *; publickey-credentials-get *; publickey-credentials-create *");
     this.iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
-    card.appendChild(this.iframe);
-    backdrop.appendChild(card);
+    if (opts.hideUntilLayout) {
+      this.iframe.style.opacity = "0";
+      this.iframe.style.pointerEvents = "none";
+    }
+    this.card.appendChild(this.iframe);
+    backdrop.appendChild(this.card);
     this.shadow.appendChild(style);
     this.shadow.appendChild(backdrop);
     this.messageHandler = (event) => {
@@ -424,16 +440,64 @@ var IframeModal = class {
           viewportHeight: window.innerHeight
         });
         if (h === null) return;
-        this.iframe.style.height = `${h}px`;
+        if (this.phaseV2) {
+          if (typeof data.layoutId !== "number" || !Number.isSafeInteger(data.layoutId) || data.layoutId <= this.currentLayoutId) return;
+          this.currentLayoutId = data.layoutId;
+          this.iframe.style.transition = "none";
+        }
+        if (!this.phaseV2 || !this.hasDisplayedLayout) {
+          this.iframe.style.height = `${h}px`;
+          if (this.phaseV2) this.displayedHeight = h;
+        }
+        if (this.phaseV2) {
+          this.revealFrame();
+          this.postMessage({
+            type: "openkey:layout-applied",
+            requestId: this.expectedRequestId,
+            protocolVersion: 2,
+            layoutId: data.layoutId,
+            height: this.hasDisplayedLayout ? this.displayedHeight : h
+          });
+        }
         return;
       }
-      if (data.type === "openkey:close") {
+      if (data.type === "openkey:layout-ready" || data.type === "openkey:layout-invalidated") {
+        if (!this.phaseV2 || data.requestId !== this.expectedRequestId || data.protocolVersion !== this.expectedProtocolVersion || data.layoutId !== this.currentLayoutId) return;
+        if (data.type === "openkey:layout-ready") {
+          this.hasDisplayedLayout = true;
+        }
+        return;
       }
       this.onMessage(data);
     };
     window.addEventListener("message", this.messageHandler);
     document.body.appendChild(this.root);
   }
+  activatePhase(requestId, protocolVersion) {
+    this.setExpectedCorrelation(requestId, protocolVersion);
+    this.phaseV2 = true;
+    this.revealTimer = setTimeout(() => this.revealFrame(), 5e3);
+  }
+  isVersionedPhase() {
+    return this.phaseV2;
+  }
+  revealFrame() {
+    clearTimeout(this.revealTimer);
+    this.revealTimer = void 0;
+    this.card.inert = false;
+    this.iframe.style.opacity = "1";
+    this.iframe.style.pointerEvents = "auto";
+    this.card.style.opacity = "1";
+    this.card.style.pointerEvents = "auto";
+    this.iframe.style.visibility = "visible";
+    this.card.style.visibility = "visible";
+  }
+  revealLegacy() {
+    this.revealFrame();
+  }
+  hasDisplayedCurrentPhase() {
+    return this.hasDisplayedLayout;
+  }
   postMessage(message) {
     this.iframe.contentWindow?.postMessage(message, this.host);
   }
@@ -453,6 +517,7 @@ var IframeModal = class {
     this.expectedProtocolVersion = protocolVersion;
   }
   destroy() {
+    clearTimeout(this.revealTimer);
     window.removeEventListener("message", this.messageHandler);
     this.root.remove();
   }
@@ -1039,7 +1104,7 @@ var OpenKey = class {
     return this.openFlow("sign", {
       type: "openkey:sign:request",
       message: request.message,
-      keyId: request.keyId
+      keyId: request.keyId ?? this.lastAuth?.keyId
     }, mode);
   }
   signTypedDataWithOpenKey(request, mode) {
@@ -1266,10 +1331,13 @@ var OpenKey = class {
       return new Promise(() => {
       });
     }
-    const url = `${this.host}/widget/embed/${action}?origin=${origin}${eoaFlag}${passkeysFlag}`;
-    return this.openIframeModal(url, action, message, origin);
+    const selectedKeyId = action === "sign" && "keyId" in message ? message.keyId : null;
+    const phase = action === "connect" || action === "sign" && typeof selectedKeyId === "string" ? { requestId: crypto.randomUUID(), protocolVersion: 2 } : null;
+    const keyId = action === "sign" && "keyId" in message && typeof message.keyId === "string" ? `&keyId=${encodeURIComponent(message.keyId)}` : "";
+    const url = `${this.host}/widget/embed/${action}?origin=${origin}${eoaFlag}${passkeysFlag}${phase ? `&requestId=${encodeURIComponent(phase.requestId)}&protocolVersion=2${keyId}` : ""}`;
+    return this.openIframeModal(url, action, message, origin, phase);
   }
-  openIframeModal(url, action, message, origin) {
+  openIframeModal(url, action, message, origin, phase = null) {
     const outgoingRequestId = message.requestId;
     const outgoingProtocolVersion = message.protocolVersion;
     const isVersionedRequest = typeof outgoingRequestId === "string" && typeof outgoingProtocolVersion === "number" && outgoingProtocolVersion >= 1;
@@ -1293,6 +1361,7 @@ var OpenKey = class {
       modal = new IframeModal({
         url,
         host: this.host,
+        hideUntilLayout: action === "sign" && !!phase,
         onClose: () => {
           settle(() => {
             cleanup();
@@ -1300,16 +1369,35 @@ var OpenKey = class {
           });
         },
         onMessage: (data) => {
+          if (settled) return;
           if (data.type === "openkey:ready") {
+            if (readyReceived) return;
+            if (phase && data.protocolVersion === 2) {
+              if (data.requestId !== phase.requestId) return;
+              modal?.activatePhase(phase.requestId, phase.protocolVersion);
+              modal?.postMessage({
+                ...message,
+                ...phase,
+                ...action === "sign" && isVersionedRequest && outgoingProtocolVersion === 1 ? { authorizationProtocolVersion: 1 } : {}
+              });
+            } else if (phase && data.protocolVersion !== void 0 && data.protocolVersion !== 1) {
+              return;
+            } else {
+              modal?.setExpectedCorrelation(
+                isVersionedRequest ? outgoingRequestId : null,
+                isVersionedRequest ? outgoingProtocolVersion : null
+              );
+              modal?.revealLegacy();
+              modal?.postMessage(message);
+            }
             readyReceived = true;
-            modal?.postMessage(message);
             return;
           }
-          if (isVersionedRequest) {
-            const respRequestId = data.requestId;
-            const respVersion = data.protocolVersion;
-            if (respRequestId !== outgoingRequestId) return;
-            if (respVersion !== outgoingProtocolVersion) return;
+          if (!readyReceived) return;
+          const activeRequestId = phase && modal?.isVersionedPhase() ? phase.requestId : isVersionedRequest ? outgoingRequestId : null;
+          const activeVersion = phase && modal?.isVersionedPhase() ? phase.protocolVersion : isVersionedRequest ? outgoingProtocolVersion : null;
+          if (activeRequestId !== null) {
+            if (!("requestId" in data) || data.requestId !== activeRequestId || !("protocolVersion" in data) || data.protocolVersion !== activeVersion) return;
           }
           if (data.type === "openkey:close") {
             settle(() => {
@@ -1319,7 +1407,7 @@ var OpenKey = class {
             return;
           }
           if (data.type === "openkey:link-wallet:delegate") {
-            this.handleWalletLinkDelegation(modal);
+            this.handleWalletLinkDelegation(modal, modal?.isVersionedPhase() ? phase : null);
             return;
           }
           if (data.type === "openkey:auth:use-external-wallet") {
@@ -1327,6 +1415,7 @@ var OpenKey = class {
             this.handleExternalWalletConnect(resolve, reject);
             return;
           }
+          if (action === "sign" && modal?.isVersionedPhase() && !modal.hasDisplayedCurrentPhase() && this.isResponseForAction(action, data)) return;
           if (this.isResponseForAction(action, data)) {
             settle(() => {
               cleanup();
@@ -1404,8 +1493,8 @@ var OpenKey = class {
     if (action === "sign-out") return type === "openkey:sign-out:response";
     return false;
   }
-  handleWalletLinkDelegation(modal) {
-    const sendResult = (result) => modal.postMessage(result);
+  handleWalletLinkDelegation(modal, phase = null) {
+    const sendResult = (result) => modal.postMessage({ ...result, ...phase });
     new WalletPicker({
       providers: this.discoveredProviders,
       onCancel: () => {