@polyguard/sdk 1.2.4 → 1.3.0

package/dist/sdk.esm.js

@@ -10837,7 +10837,7 @@ var ReconnectingWebSocket = (
 );
 var reconnecting_websocket_mjs_default = ReconnectingWebSocket;
 
-// src/PolyguardWebsocketClientImpl.js
+// src/ui.js
 var import_qrcode = __toESM(require_browser(), 1);
 var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
   <style>
@@ -10851,10 +10851,149 @@ var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" heigh
     }
   </style>
   <circle cx="100" cy="100" r="80" stroke="#e0e0e0" stroke-width="8" fill="none" />
-  <circle cx="100" cy="100" r="80" stroke="#7be7c2" stroke-width="8" fill="none" 
-          stroke-dasharray="251.2" stroke-dashoffset="188.4" 
+  <circle cx="100" cy="100" r="80" stroke="#407796" stroke-width="8" fill="none"
+          stroke-dasharray="251.2" stroke-dashoffset="188.4"
           class="spinner-circle" stroke-linecap="round" />
 </svg>`;
+function buildModal() {
+  const modal = document.createElement("div");
+  modal.style.position = "fixed";
+  modal.style.top = "0";
+  modal.style.left = "0";
+  modal.style.width = "100vw";
+  modal.style.height = "100vh";
+  modal.style.background = "rgba(0,0,0,0.45)";
+  modal.style.display = "flex";
+  modal.style.alignItems = "flex-start";
+  modal.style.justifyContent = "center";
+  modal.style.overflowY = "auto";
+  modal.style.paddingTop = "24px";
+  modal.innerHTML = `
+    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
+      <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
+      <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
+      <div style="font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
+      <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
+      <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
+      <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
+        <span>&#128274; Encrypted</span>
+        <span>&#128241; On-device</span>
+        <span>&#9202; Expires</span>
+      </div>
+      <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
+      <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
+    </div>
+  `;
+  return modal;
+}
+function showSpinner(qrDiv) {
+  qrDiv.innerHTML = LOADING_SPINNER;
+}
+function renderMobileButton(qrDiv, qrUrl, isTargetMode) {
+  qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
+  qrDiv.style.background = "transparent";
+  qrDiv.querySelector("#polyguard-open-app-button").onclick = () => window.location.assign(qrUrl);
+  if (!isTargetMode) {
+    const instructionText = qrDiv.nextElementSibling;
+    if (instructionText) {
+      instructionText.textContent = "Tap the button to verify with the Polyguard app.";
+    }
+    const instructionList = instructionText.nextElementSibling;
+    if (instructionList && instructionList.children[1]) {
+      instructionList.children[1].textContent = "If you do not have the Polyguard app, you will be redirected to download it.";
+    }
+  }
+}
+function renderQRCode(qrDiv, qrUrl) {
+  const startTime = Date.now();
+  console.log("time before qr code", startTime);
+  import_qrcode.default.toString(qrUrl, { type: "svg" }, (err, svg) => {
+    if (!err) qrDiv.innerHTML = svg;
+  });
+  console.log("time to generate qr code", Date.now() - startTime);
+}
+
+// src/ticketService.js
+async function fetchTicket({ apiServer, appId, link_uuid, requiredProofs, scanType }) {
+  const ticketUrl = link_uuid ? `https://${apiServer}/v2/ticket/${appId}/${link_uuid}` : `https://${apiServer}/v2/ticket/${appId}`;
+  const ticketRes = await fetch(ticketUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ requiredProofs, scanType })
+  });
+  if (!ticketRes.ok) {
+    throw new Error("Failed to get ticket");
+  }
+  const ticketData = await ticketRes.json();
+  const ticket = ticketData.ticket;
+  if (!ticket) {
+    throw new Error("No ticket returned from server");
+  }
+  return ticket;
+}
+
+// src/messageHandler.js
+function handleWebSocketMessage(event, ctx) {
+  const { ws, qrDiv, isTargetMode, cleanup, returnError, resolve, rawJwt } = ctx;
+  let data;
+  try {
+    data = JSON.parse(event.data);
+  } catch (e) {
+    console.error("Invalid message format from server", e);
+    returnError("Invalid message format from server");
+    return;
+  }
+  if (!data) {
+    console.error("Unknown message type from server", data);
+    returnError("Unknown message type from server");
+    ws.close();
+    return;
+  }
+  if (data.type === "ping" && typeof data.seq !== "undefined") {
+    ws.send(JSON.stringify({ type: "pong", seq: data.seq }));
+    return;
+  }
+  if (data.url) {
+    window.location.assign(data.url);
+    return;
+  }
+  if (data.qr_url) {
+    const pcre = data.qr_url.match(/pcre=([^&]*)/);
+    console.log("pcre", pcre);
+    if (pcre) {
+      ws.send(JSON.stringify({ type: "pong", seq: pcre[1] }));
+    }
+    if (qrDiv) {
+      const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+      if (isMobile) {
+        renderMobileButton(qrDiv, data.qr_url, isTargetMode);
+      } else {
+        renderQRCode(qrDiv, data.qr_url);
+      }
+    }
+    return;
+  }
+  if (data.jwt) {
+    cleanup();
+    ws.close();
+    resolve(rawJwt ? data : data.jwt);
+    return;
+  }
+  if (data.status) {
+    if (qrDiv) showSpinner(qrDiv);
+    return;
+  }
+  if (data.error) {
+    returnError(data.error);
+    ws.close();
+    return;
+  }
+  console.error("Unknown message type from server", data);
+  returnError("Unknown message type from server");
+  ws.close();
+}
+
+// src/PolyguardWebsocketClientImpl.js
 var PolyguardWebsocketClientImpl = class {
   constructor(params = {}) {
     this.apiClient = new ApiClient_default();
@@ -10884,35 +11023,7 @@ var PolyguardWebsocketClientImpl = class {
     this.link_uuid = link_uuid;
   }
   buildModal() {
-    const modal = document.createElement("div");
-    modal.style.position = "fixed";
-    modal.style.top = "0";
-    modal.style.left = "0";
-    modal.style.width = "100vw";
-    modal.style.height = "100vh";
-    modal.style.background = "rgba(0,0,0,0.45)";
-    modal.style.display = "flex";
-    modal.style.alignItems = "flex-start";
-    modal.style.justifyContent = "center";
-    modal.style.overflowY = "auto";
-    modal.style.paddingTop = "24px";
-    modal.innerHTML = `
-      <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
-        <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
-        <h2 style="margin-top: 0; font-size: 1.5rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
-        <div style="font-size: 15px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
-        <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
-        <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
-        <ul style="text-align: left; margin: 0 0 16px 0; padding-left: 20px; font-size: 14px; color: #444;">
-          <li>We use the Polyguard service to verify your identity.</li>
-          <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
-          <li>Your credentials remain private on your device.</li>
-        </ul>
-        <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
-        <button id="polyguard-modal-cancel" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
-      </div>
-    `;
-    return modal;
+    return buildModal();
   }
   async verify(target = null, rawJwt = false) {
     let modal = null;
@@ -10925,14 +11036,14 @@ var PolyguardWebsocketClientImpl = class {
         throw new Error(`Target element with ID '${target}' not found`);
       }
     } else {
-      modal = this.buildModal();
+      modal = buildModal();
     }
     if (!isTargetMode) {
       document.body.appendChild(modal);
       qrDiv = modal.querySelector("#polyguard-qr");
     }
     if (qrDiv) {
-      qrDiv.innerHTML = LOADING_SPINNER;
+      showSpinner(qrDiv);
     }
     function cleanup() {
       if (isTargetMode) {
@@ -10982,22 +11093,13 @@ var PolyguardWebsocketClientImpl = class {
       try {
         clearError();
         const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
-        const ticketUrl = this.link_uuid ? `https://${this.apiServer}/v2/ticket/${this.appId}/${this.link_uuid}` : `https://${this.apiServer}/v2/ticket/${this.appId}`;
-        const ticketRes = await fetch(ticketUrl, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ requiredProofs: this.requiredProofs, scanType: this.scanType })
+        const newTicket = await fetchTicket({
+          apiServer: this.apiServer,
+          appId: this.appId,
+          link_uuid: this.link_uuid,
+          requiredProofs: this.requiredProofs,
+          scanType: this.scanType
         });
-        if (!ticketRes.ok) {
-          returnError("Failed to get ticket");
-          return;
-        }
-        const ticketData = await ticketRes.json();
-        const newTicket = ticketData.ticket;
-        if (!newTicket) {
-          returnError("No ticket returned from server");
-          return;
-        }
         const wsUrl = `${wsProtocol}://${this.apiServer}/v2/realtime/${newTicket}`;
         const options = {
           maxRetries: 10,
@@ -11007,71 +11109,8 @@ var PolyguardWebsocketClientImpl = class {
           reconnectionDelayGrowFactor: 1.5
         };
         ws = new reconnecting_websocket_mjs_default(wsUrl, [], options);
-        ws.addEventListener("message", (event) => {
-          try {
-            const data = JSON.parse(event.data);
-            if (data && data.type === "ping" && typeof data.seq !== "undefined") {
-              ws.send(JSON.stringify({ type: "pong", seq: data.seq }));
-              return;
-            }
-            if (data && data.url) {
-              window.location.assign(data.url);
-              return;
-            } else if (data && data.qr_url) {
-              const pcre = data.qr_url.match(/pcre=([^&]*)/);
-              console.log("pcre", pcre);
-              if (pcre) {
-                ws.send(JSON.stringify({ type: "pong", seq: pcre[1] }));
-              }
-              if (!qrDiv) return;
-              const isMobile = /Mobi|Android/i.test(navigator.userAgent);
-              if (isMobile) {
-                qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
-                qrDiv.style.background = "transparent";
-                qrDiv.querySelector("#polyguard-open-app-button").onclick = () => window.location.assign(data.qr_url);
-                if (!isTargetMode) {
-                  const instructionText = qrDiv.nextElementSibling;
-                  if (instructionText) {
-                    instructionText.textContent = "Tap the button to verify with the Polyguard app.";
-                  }
-                  const instructionList = instructionText.nextElementSibling;
-                  if (instructionList && instructionList.children[1]) {
-                    instructionList.children[1].textContent = "If you do not have the Polyguard app, you will be redirected to download it.";
-                  }
-                }
-              } else {
-                const startTime = Date.now();
-                console.log("time before qr code", startTime);
-                import_qrcode.default.toString(data.qr_url, { type: "svg" }, (err, svg) => {
-                  if (!err) qrDiv.innerHTML = svg;
-                });
-                console.log("time to generate qr code", Date.now() - startTime);
-              }
-              return;
-            } else if (data && data.jwt) {
-              cleanup();
-              ws.close();
-              resolve(rawJwt ? data : data.jwt);
-              return;
-            } else if (data && data.status) {
-              if (!qrDiv) return;
-              qrDiv.innerHTML = LOADING_SPINNER;
-              return;
-            } else if (data && data.error) {
-              returnError(data.error);
-              ws.close();
-              return;
-            } else {
-              console.error("Unknown message type from server", data);
-              returnError(`Unknown message type from server`);
-              ws.close();
-              return;
-            }
-          } catch (e) {
-            console.error("Invalid message format from server", e);
-            returnError("Invalid message format from server");
-          }
-        });
+        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+        ws.addEventListener("message", (event) => handleWebSocketMessage(event, ctx));
         ws.addEventListener("error", () => {
           console.error("WebSocket error");
           returnError("WebSocket error");
@@ -11080,7 +11119,7 @@ var PolyguardWebsocketClientImpl = class {
           if (!closed) cleanup();
         });
       } catch (err) {
-        returnError("Failed to connect to WebSocket");
+        returnError(err.message === "Failed to get ticket" || err.message === "No ticket returned from server" ? err.message : "Failed to connect to WebSocket");
       }
     });
   }

package/dist/sdk.js

@@ -10870,7 +10870,7 @@ var Polyguard = (() => {
     }
   };
 
-  // src/PolyguardWebsocketClientImpl.js
+  // src/ui.js
   var import_qrcode = __toESM(require_browser(), 1);
   var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
   <style>
@@ -10884,10 +10884,149 @@ var Polyguard = (() => {
     }
   </style>
   <circle cx="100" cy="100" r="80" stroke="#e0e0e0" stroke-width="8" fill="none" />
-  <circle cx="100" cy="100" r="80" stroke="#7be7c2" stroke-width="8" fill="none" 
-          stroke-dasharray="251.2" stroke-dashoffset="188.4" 
+  <circle cx="100" cy="100" r="80" stroke="#407796" stroke-width="8" fill="none"
+          stroke-dasharray="251.2" stroke-dashoffset="188.4"
           class="spinner-circle" stroke-linecap="round" />
 </svg>`;
+  function buildModal() {
+    const modal = document.createElement("div");
+    modal.style.position = "fixed";
+    modal.style.top = "0";
+    modal.style.left = "0";
+    modal.style.width = "100vw";
+    modal.style.height = "100vh";
+    modal.style.background = "rgba(0,0,0,0.45)";
+    modal.style.display = "flex";
+    modal.style.alignItems = "flex-start";
+    modal.style.justifyContent = "center";
+    modal.style.overflowY = "auto";
+    modal.style.paddingTop = "24px";
+    modal.innerHTML = `
+    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
+      <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
+      <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
+      <div style="font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
+      <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
+      <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
+      <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
+        <span>&#128274; Encrypted</span>
+        <span>&#128241; On-device</span>
+        <span>&#9202; Expires</span>
+      </div>
+      <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
+      <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
+    </div>
+  `;
+    return modal;
+  }
+  function showSpinner(qrDiv) {
+    qrDiv.innerHTML = LOADING_SPINNER;
+  }
+  function renderMobileButton(qrDiv, qrUrl, isTargetMode) {
+    qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
+    qrDiv.style.background = "transparent";
+    qrDiv.querySelector("#polyguard-open-app-button").onclick = () => window.location.assign(qrUrl);
+    if (!isTargetMode) {
+      const instructionText = qrDiv.nextElementSibling;
+      if (instructionText) {
+        instructionText.textContent = "Tap the button to verify with the Polyguard app.";
+      }
+      const instructionList = instructionText.nextElementSibling;
+      if (instructionList && instructionList.children[1]) {
+        instructionList.children[1].textContent = "If you do not have the Polyguard app, you will be redirected to download it.";
+      }
+    }
+  }
+  function renderQRCode(qrDiv, qrUrl) {
+    const startTime = Date.now();
+    console.log("time before qr code", startTime);
+    import_qrcode.default.toString(qrUrl, { type: "svg" }, (err, svg) => {
+      if (!err) qrDiv.innerHTML = svg;
+    });
+    console.log("time to generate qr code", Date.now() - startTime);
+  }
+
+  // src/ticketService.js
+  async function fetchTicket({ apiServer, appId, link_uuid, requiredProofs, scanType }) {
+    const ticketUrl = link_uuid ? `https://${apiServer}/v2/ticket/${appId}/${link_uuid}` : `https://${apiServer}/v2/ticket/${appId}`;
+    const ticketRes = await fetch(ticketUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ requiredProofs, scanType })
+    });
+    if (!ticketRes.ok) {
+      throw new Error("Failed to get ticket");
+    }
+    const ticketData = await ticketRes.json();
+    const ticket = ticketData.ticket;
+    if (!ticket) {
+      throw new Error("No ticket returned from server");
+    }
+    return ticket;
+  }
+
+  // src/messageHandler.js
+  function handleWebSocketMessage(event, ctx) {
+    const { ws, qrDiv, isTargetMode, cleanup, returnError, resolve, rawJwt } = ctx;
+    let data;
+    try {
+      data = JSON.parse(event.data);
+    } catch (e) {
+      console.error("Invalid message format from server", e);
+      returnError("Invalid message format from server");
+      return;
+    }
+    if (!data) {
+      console.error("Unknown message type from server", data);
+      returnError("Unknown message type from server");
+      ws.close();
+      return;
+    }
+    if (data.type === "ping" && typeof data.seq !== "undefined") {
+      ws.send(JSON.stringify({ type: "pong", seq: data.seq }));
+      return;
+    }
+    if (data.url) {
+      window.location.assign(data.url);
+      return;
+    }
+    if (data.qr_url) {
+      const pcre = data.qr_url.match(/pcre=([^&]*)/);
+      console.log("pcre", pcre);
+      if (pcre) {
+        ws.send(JSON.stringify({ type: "pong", seq: pcre[1] }));
+      }
+      if (qrDiv) {
+        const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+        if (isMobile) {
+          renderMobileButton(qrDiv, data.qr_url, isTargetMode);
+        } else {
+          renderQRCode(qrDiv, data.qr_url);
+        }
+      }
+      return;
+    }
+    if (data.jwt) {
+      cleanup();
+      ws.close();
+      resolve(rawJwt ? data : data.jwt);
+      return;
+    }
+    if (data.status) {
+      if (qrDiv) showSpinner(qrDiv);
+      return;
+    }
+    if (data.error) {
+      returnError(data.error);
+      ws.close();
+      return;
+    }
+    console.error("Unknown message type from server", data);
+    returnError("Unknown message type from server");
+    ws.close();
+  }
+
+  // src/PolyguardWebsocketClientImpl.js
   var PolyguardWebsocketClientImpl = class {
     constructor(params = {}) {
       this.apiClient = new ApiClient_default();
@@ -10917,35 +11056,7 @@ var Polyguard = (() => {
       this.link_uuid = link_uuid;
     }
     buildModal() {
-      const modal = document.createElement("div");
-      modal.style.position = "fixed";
-      modal.style.top = "0";
-      modal.style.left = "0";
-      modal.style.width = "100vw";
-      modal.style.height = "100vh";
-      modal.style.background = "rgba(0,0,0,0.45)";
-      modal.style.display = "flex";
-      modal.style.alignItems = "flex-start";
-      modal.style.justifyContent = "center";
-      modal.style.overflowY = "auto";
-      modal.style.paddingTop = "24px";
-      modal.innerHTML = `
-      <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
-        <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
-        <h2 style="margin-top: 0; font-size: 1.5rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
-        <div style="font-size: 15px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
-        <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
-        <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
-        <ul style="text-align: left; margin: 0 0 16px 0; padding-left: 20px; font-size: 14px; color: #444;">
-          <li>We use the Polyguard service to verify your identity.</li>
-          <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
-          <li>Your credentials remain private on your device.</li>
-        </ul>
-        <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
-        <button id="polyguard-modal-cancel" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
-      </div>
-    `;
-      return modal;
+      return buildModal();
     }
     async verify(target = null, rawJwt = false) {
       let modal = null;
@@ -10958,14 +11069,14 @@ var Polyguard = (() => {
           throw new Error(`Target element with ID '${target}' not found`);
         }
       } else {
-        modal = this.buildModal();
+        modal = buildModal();
       }
       if (!isTargetMode) {
         document.body.appendChild(modal);
         qrDiv = modal.querySelector("#polyguard-qr");
       }
       if (qrDiv) {
-        qrDiv.innerHTML = LOADING_SPINNER;
+        showSpinner(qrDiv);
       }
       function cleanup() {
         if (isTargetMode) {
@@ -11015,22 +11126,13 @@ var Polyguard = (() => {
         try {
           clearError();
           const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
-          const ticketUrl = this.link_uuid ? `https://${this.apiServer}/v2/ticket/${this.appId}/${this.link_uuid}` : `https://${this.apiServer}/v2/ticket/${this.appId}`;
-          const ticketRes = await fetch(ticketUrl, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ requiredProofs: this.requiredProofs, scanType: this.scanType })
+          const newTicket = await fetchTicket({
+            apiServer: this.apiServer,
+            appId: this.appId,
+            link_uuid: this.link_uuid,
+            requiredProofs: this.requiredProofs,
+            scanType: this.scanType
           });
-          if (!ticketRes.ok) {
-            returnError("Failed to get ticket");
-            return;
-          }
-          const ticketData = await ticketRes.json();
-          const newTicket = ticketData.ticket;
-          if (!newTicket) {
-            returnError("No ticket returned from server");
-            return;
-          }
           const wsUrl = `${wsProtocol}://${this.apiServer}/v2/realtime/${newTicket}`;
           const options = {
             maxRetries: 10,
@@ -11040,71 +11142,8 @@ var Polyguard = (() => {
             reconnectionDelayGrowFactor: 1.5
           };
           ws = new reconnecting_websocket_mjs_default(wsUrl, [], options);
-          ws.addEventListener("message", (event) => {
-            try {
-              const data = JSON.parse(event.data);
-              if (data && data.type === "ping" && typeof data.seq !== "undefined") {
-                ws.send(JSON.stringify({ type: "pong", seq: data.seq }));
-                return;
-              }
-              if (data && data.url) {
-                window.location.assign(data.url);
-                return;
-              } else if (data && data.qr_url) {
-                const pcre = data.qr_url.match(/pcre=([^&]*)/);
-                console.log("pcre", pcre);
-                if (pcre) {
-                  ws.send(JSON.stringify({ type: "pong", seq: pcre[1] }));
-                }
-                if (!qrDiv) return;
-                const isMobile = /Mobi|Android/i.test(navigator.userAgent);
-                if (isMobile) {
-                  qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
-                  qrDiv.style.background = "transparent";
-                  qrDiv.querySelector("#polyguard-open-app-button").onclick = () => window.location.assign(data.qr_url);
-                  if (!isTargetMode) {
-                    const instructionText = qrDiv.nextElementSibling;
-                    if (instructionText) {
-                      instructionText.textContent = "Tap the button to verify with the Polyguard app.";
-                    }
-                    const instructionList = instructionText.nextElementSibling;
-                    if (instructionList && instructionList.children[1]) {
-                      instructionList.children[1].textContent = "If you do not have the Polyguard app, you will be redirected to download it.";
-                    }
-                  }
-                } else {
-                  const startTime = Date.now();
-                  console.log("time before qr code", startTime);
-                  import_qrcode.default.toString(data.qr_url, { type: "svg" }, (err, svg) => {
-                    if (!err) qrDiv.innerHTML = svg;
-                  });
-                  console.log("time to generate qr code", Date.now() - startTime);
-                }
-                return;
-              } else if (data && data.jwt) {
-                cleanup();
-                ws.close();
-                resolve(rawJwt ? data : data.jwt);
-                return;
-              } else if (data && data.status) {
-                if (!qrDiv) return;
-                qrDiv.innerHTML = LOADING_SPINNER;
-                return;
-              } else if (data && data.error) {
-                returnError(data.error);
-                ws.close();
-                return;
-              } else {
-                console.error("Unknown message type from server", data);
-                returnError(`Unknown message type from server`);
-                ws.close();
-                return;
-              }
-            } catch (e) {
-              console.error("Invalid message format from server", e);
-              returnError("Invalid message format from server");
-            }
-          });
+          const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+          ws.addEventListener("message", (event) => handleWebSocketMessage(event, ctx));
           ws.addEventListener("error", () => {
             console.error("WebSocket error");
             returnError("WebSocket error");
@@ -11113,7 +11152,7 @@ var Polyguard = (() => {
             if (!closed) cleanup();
           });
         } catch (err) {
-          returnError("Failed to connect to WebSocket");
+          returnError(err.message === "Failed to get ticket" || err.message === "No ticket returned from server" ? err.message : "Failed to connect to WebSocket");
         }
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polyguard/sdk",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/sdk.esm.js",
   "module": "dist/sdk.esm.js",

package/src/PolyguardWebsocketClientImpl.js

@@ -1,24 +1,8 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import * as PolyguardApi from './generated/src';
-import QRCode from 'qrcode';
-
-// Animated spinner SVG
-const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
-  <style>
-    .spinner-circle {
-      animation: spin 1s linear infinite;
-      transform-origin: 100px 100px;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-  </style>
-  <circle cx="100" cy="100" r="80" stroke="#e0e0e0" stroke-width="8" fill="none" />
-  <circle cx="100" cy="100" r="80" stroke="#7be7c2" stroke-width="8" fill="none" 
-          stroke-dasharray="251.2" stroke-dashoffset="188.4" 
-          class="spinner-circle" stroke-linecap="round" />
-</svg>`;
+import { buildModal, showSpinner } from './ui.js';
+import { fetchTicket } from './ticketService.js';
+import { handleWebSocketMessage } from './messageHandler.js';
 
 // Implementation class for websocket integration
 export class PolyguardWebsocketClientImpl {
@@ -53,71 +37,35 @@ export class PolyguardWebsocketClientImpl {
   }
 
   buildModal() {
-    const modal = document.createElement('div');
-    modal.style.position = 'fixed';
-    modal.style.top = '0';
-    modal.style.left = '0';
-    modal.style.width = '100vw';
-    modal.style.height = '100vh';
-    modal.style.background = 'rgba(0,0,0,0.45)';
-    modal.style.display = 'flex';
-    modal.style.alignItems = 'flex-start';
-    modal.style.justifyContent = 'center';
-    modal.style.overflowY = 'auto';
-    modal.style.paddingTop = '24px';
-    modal.innerHTML = `
-      <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
-        <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
-        <h2 style="margin-top: 0; font-size: 1.5rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
-        <div style="font-size: 15px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
-        <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
-        <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
-        <ul style="text-align: left; margin: 0 0 16px 0; padding-left: 20px; font-size: 14px; color: #444;">
-          <li>We use the Polyguard service to verify your identity.</li>
-          <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
-          <li>Your credentials remain private on your device.</li>
-        </ul>
-        <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
-        <button id="polyguard-modal-cancel" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
-      </div>
-    `;
-    return modal;
+    return buildModal();
   }
 
   async verify(target = null, rawJwt = false) {
-    // Only websocket integration is supported for modal
     let modal = null;
     let qrDiv = null;
     let isTargetMode = false;
-    
+
     if (target) {
-      // Target mode: render QR code in specified element
       isTargetMode = true;
       qrDiv = document.getElementById(target);
       if (!qrDiv) {
         throw new Error(`Target element with ID '${target}' not found`);
       }
     } else {
-      // Modal mode: create modal DOM
-      modal = this.buildModal();
+      modal = buildModal();
     }
-    
+
     if (!isTargetMode) {
-      // Show modal immediately with spinner
       document.body.appendChild(modal);
-      
-      // Initialize QR div with spinner
       qrDiv = modal.querySelector('#polyguard-qr');
     }
-    
+
     if (qrDiv) {
-      qrDiv.innerHTML = LOADING_SPINNER;
+      showSpinner(qrDiv);
     }
-    
-    // Helper to cleanup modal or target
+
     function cleanup() {
       if (isTargetMode) {
-        // Clear target element content
         if (qrDiv) {
           qrDiv.innerHTML = '';
         }
@@ -125,28 +73,27 @@ export class PolyguardWebsocketClientImpl {
         modal.parentNode.removeChild(modal);
       }
     }
-    // Promise for JWT
+
     return new Promise(async (resolve, reject) => {
       let ws = null;
       let closed = false;
-      
+
       function returnError(msg, score = "OFFLINE") {
-          if (isTargetMode) {
-            // In target mode, just log the error and resolve with error data
-            console.error('Polyguard Error:', msg);
+        if (isTargetMode) {
+          console.error('Polyguard Error:', msg);
+          cleanup();
+          resolve({presence: { score: score, msg: msg }});
+        } else {
+          const errDiv = modal.querySelector('#polyguard-error');
+          if (errDiv) {
+            errDiv.textContent = msg;
+            errDiv.style.display = 'block';
+          }
+          setTimeout(() => {
             cleanup();
             resolve({presence: { score: score, msg: msg }});
-          } else {
-            const errDiv = modal.querySelector('#polyguard-error');
-            if (errDiv) {
-              errDiv.textContent = msg;
-              errDiv.style.display = 'block';
-            }
-            setTimeout(() => {
-              cleanup();
-              resolve({presence: { score: score, msg: msg }});
-            }, 1250);
-          }
+          }, 1250);
+        }
       }
       function clearError() {
         if (!isTargetMode) {
@@ -154,42 +101,30 @@ export class PolyguardWebsocketClientImpl {
           if (errDiv) errDiv.style.display = 'none';
         }
       }
-      // Close/cancel handler
       function handleClose() {
         closed = true;
         if (ws) ws.close();
         cleanup();
         reject(new Error('User cancelled'));
       }
-      
-      // Set up close/cancel handlers (only in modal mode)
+
       if (!isTargetMode) {
         modal.querySelector('#polyguard-modal-close').onclick = handleClose;
         modal.querySelector('#polyguard-modal-cancel').onclick = handleClose;
       }
-      
-      // Start ticket/ws flow
+
       try {
         clearError();
         const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-        const ticketUrl = this.link_uuid 
-          ? `https://${this.apiServer}/v2/ticket/${this.appId}/${this.link_uuid}`
-          : `https://${this.apiServer}/v2/ticket/${this.appId}`;
-        const ticketRes = await fetch(ticketUrl, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ requiredProofs: this.requiredProofs, scanType: this.scanType }),
+
+        const newTicket = await fetchTicket({
+          apiServer: this.apiServer,
+          appId: this.appId,
+          link_uuid: this.link_uuid,
+          requiredProofs: this.requiredProofs,
+          scanType: this.scanType,
         });
-        if (!ticketRes.ok) {
-          returnError('Failed to get ticket');
-          return;
-        }
-        const ticketData = await ticketRes.json();
-        const newTicket = ticketData.ticket;
-        if (!newTicket) {
-          returnError('No ticket returned from server');
-          return;
-        }
+
         const wsUrl = `${wsProtocol}://${this.apiServer}/v2/realtime/${newTicket}`;
         const options = {
           maxRetries: 10,
@@ -199,86 +134,10 @@ export class PolyguardWebsocketClientImpl {
           reconnectionDelayGrowFactor: 1.5,
         };
         ws = new ReconnectingWebSocket(wsUrl, [], options);
-        ws.addEventListener('message', (event) => {
-          try {
-            const data = JSON.parse(event.data);
-            // --- BEGIN: Backend-initiated latency measurement ---
-            if (data && data.type === 'ping' && typeof data.seq !== 'undefined') {
-              ws.send(JSON.stringify({ type: 'pong', seq: data.seq }));
-              return;
-            }
-            // --- END: Backend-initiated latency measurement ---
-            if (data && data.url) {
-              window.location.assign(data.url);
-              return;
-            } else if (data && data.qr_url) {
-              // Replace spinner with QR code content
-              
-              const pcre = data.qr_url.match(/pcre=([^&]*)/);
-              console.log('pcre', pcre);
-              if (pcre) {
-                ws.send(JSON.stringify({ type: 'pong', seq: pcre[1] }));
-              }
-
-              if (!qrDiv) return;
-
-              const isMobile = /Mobi|Android/i.test(navigator.userAgent);
 
-              if (isMobile) {
-                // For mobile, display a button to open the app
-                qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #7be7c2; color: #222; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
-                qrDiv.style.background = 'transparent';
-                qrDiv.querySelector('#polyguard-open-app-button').onclick = () => window.location.assign(data.qr_url);
+        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+        ws.addEventListener('message', (event) => handleWebSocketMessage(event, ctx));
 
-                // Update surrounding text only in modal mode
-                if (!isTargetMode) {
-                  const instructionText = qrDiv.nextElementSibling;
-                  if (instructionText) {
-                    instructionText.textContent = 'Tap the button to verify with the Polyguard app.';
-                  }
-                  const instructionList = instructionText.nextElementSibling;
-                  if (instructionList && instructionList.children[1]) {
-                    instructionList.children[1].textContent = 'If you do not have the Polyguard app, you will be redirected to download it.';
-                  }
-                }
-              } else {
-                const startTime = Date.now();
-                console.log('time before qr code', startTime);
-                // For desktop, display the QR code
-                QRCode.toString(data.qr_url, { type: 'svg' }, (err, svg) => {
-                  if (!err) qrDiv.innerHTML = svg;
-                });
-                console.log('time to generate qr code', Date.now() - startTime);
-              }
-              return;
-            } else if (data && data.jwt) {
-              cleanup();
-              ws.close();
-              resolve(rawJwt ? data : data.jwt);
-              return;
-            } else if (data && data.status) {
-              // ignore
-              // generate a spinner in svg and set the qr code to it
-              if (!qrDiv) return;
-              qrDiv.innerHTML = LOADING_SPINNER;
-              return;
-
-            } else if (data && data.error) {
-              returnError(data.error);
-              ws.close();
-              return;
-            } else {
-              console.error('Unknown message type from server', data);
-              returnError(`Unknown message type from server`);
-              ws.close();
-              return;
-            }
-          } catch (e) {
-            console.error('Invalid message format from server', e);
-            returnError('Invalid message format from server');
-            // ws.close();
-          }
-        });
         ws.addEventListener('error', () => {
           console.error('WebSocket error');
           returnError('WebSocket error');
@@ -287,7 +146,9 @@ export class PolyguardWebsocketClientImpl {
           if (!closed) cleanup();
         });
       } catch (err) {
-        returnError('Failed to connect to WebSocket');
+        returnError(err.message === 'Failed to get ticket' || err.message === 'No ticket returned from server'
+          ? err.message
+          : 'Failed to connect to WebSocket');
       }
     });
   }

package/src/messageHandler.js

@@ -0,0 +1,77 @@
+import { showSpinner, renderMobileButton, renderQRCode } from './ui.js';
+
+/**
+ * Handle a WebSocket message event.
+ * @param {MessageEvent} event
+ * @param {Object} ctx - Context object with references from the verify() closure:
+ *   { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt }
+ */
+export function handleWebSocketMessage(event, ctx) {
+  const { ws, qrDiv, isTargetMode, cleanup, returnError, resolve, rawJwt } = ctx;
+
+  let data;
+  try {
+    data = JSON.parse(event.data);
+  } catch (e) {
+    console.error('Invalid message format from server', e);
+    returnError('Invalid message format from server');
+    return;
+  }
+
+  if (!data) {
+    console.error('Unknown message type from server', data);
+    returnError('Unknown message type from server');
+    ws.close();
+    return;
+  }
+
+  // Backend-initiated latency measurement
+  if (data.type === 'ping' && typeof data.seq !== 'undefined') {
+    ws.send(JSON.stringify({ type: 'pong', seq: data.seq }));
+    return;
+  }
+
+  if (data.url) {
+    window.location.assign(data.url);
+    return;
+  }
+
+  if (data.qr_url) {
+    const pcre = data.qr_url.match(/pcre=([^&]*)/);
+    console.log('pcre', pcre);
+    if (pcre) {
+      ws.send(JSON.stringify({ type: 'pong', seq: pcre[1] }));
+    }
+    if (qrDiv) {
+      const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+      if (isMobile) {
+        renderMobileButton(qrDiv, data.qr_url, isTargetMode);
+      } else {
+        renderQRCode(qrDiv, data.qr_url);
+      }
+    }
+    return;
+  }
+
+  if (data.jwt) {
+    cleanup();
+    ws.close();
+    resolve(rawJwt ? data : data.jwt);
+    return;
+  }
+
+  if (data.status) {
+    if (qrDiv) showSpinner(qrDiv);
+    return;
+  }
+
+  if (data.error) {
+    returnError(data.error);
+    ws.close();
+    return;
+  }
+
+  console.error('Unknown message type from server', data);
+  returnError('Unknown message type from server');
+  ws.close();
+}

package/src/ticketService.js

@@ -0,0 +1,24 @@
+export async function fetchTicket({ apiServer, appId, link_uuid, requiredProofs, scanType }) {
+  const ticketUrl = link_uuid
+    ? `https://${apiServer}/v2/ticket/${appId}/${link_uuid}`
+    : `https://${apiServer}/v2/ticket/${appId}`;
+
+  const ticketRes = await fetch(ticketUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ requiredProofs, scanType }),
+  });
+
+  if (!ticketRes.ok) {
+    throw new Error('Failed to get ticket');
+  }
+
+  const ticketData = await ticketRes.json();
+  const ticket = ticketData.ticket;
+
+  if (!ticket) {
+    throw new Error('No ticket returned from server');
+  }
+
+  return ticket;
+}

package/src/ui.js

@@ -0,0 +1,82 @@
+import QRCode from 'qrcode';
+
+// Animated spinner SVG
+export const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
+  <style>
+    .spinner-circle {
+      animation: spin 1s linear infinite;
+      transform-origin: 100px 100px;
+    }
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+  </style>
+  <circle cx="100" cy="100" r="80" stroke="#e0e0e0" stroke-width="8" fill="none" />
+  <circle cx="100" cy="100" r="80" stroke="#407796" stroke-width="8" fill="none"
+          stroke-dasharray="251.2" stroke-dashoffset="188.4"
+          class="spinner-circle" stroke-linecap="round" />
+</svg>`;
+
+export function buildModal() {
+  const modal = document.createElement('div');
+  modal.style.position = 'fixed';
+  modal.style.top = '0';
+  modal.style.left = '0';
+  modal.style.width = '100vw';
+  modal.style.height = '100vh';
+  modal.style.background = 'rgba(0,0,0,0.45)';
+  modal.style.display = 'flex';
+  modal.style.alignItems = 'flex-start';
+  modal.style.justifyContent = 'center';
+  modal.style.overflowY = 'auto';
+  modal.style.paddingTop = '24px';
+  modal.innerHTML = `
+    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
+      <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
+      <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
+      <div style="font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
+      <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
+      <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
+      <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
+        <span>&#128274; Encrypted</span>
+        <span>&#128241; On-device</span>
+        <span>&#9202; Expires</span>
+      </div>
+      <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
+      <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
+    </div>
+  `;
+  return modal;
+}
+
+export function showSpinner(qrDiv) {
+  qrDiv.innerHTML = LOADING_SPINNER;
+}
+
+export function renderMobileButton(qrDiv, qrUrl, isTargetMode) {
+  qrDiv.innerHTML = `<button id="polyguard-open-app-button" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer;">Open Polyguard App</button>`;
+  qrDiv.style.background = 'transparent';
+  qrDiv.querySelector('#polyguard-open-app-button').onclick = () => window.location.assign(qrUrl);
+
+  // Update surrounding text only in modal mode
+  if (!isTargetMode) {
+    const instructionText = qrDiv.nextElementSibling;
+    if (instructionText) {
+      instructionText.textContent = 'Tap the button to verify with the Polyguard app.';
+    }
+    const instructionList = instructionText.nextElementSibling;
+    if (instructionList && instructionList.children[1]) {
+      instructionList.children[1].textContent = 'If you do not have the Polyguard app, you will be redirected to download it.';
+    }
+  }
+}
+
+export function renderQRCode(qrDiv, qrUrl) {
+  const startTime = Date.now();
+  console.log('time before qr code', startTime);
+  QRCode.toString(qrUrl, { type: 'svg' }, (err, svg) => {
+    if (!err) qrDiv.innerHTML = svg;
+  });
+  console.log('time to generate qr code', Date.now() - startTime);
+}