@fivenorth/loop-sdk 0.7.2 → 0.7.4

package/dist/index.js

@@ -2055,17 +2055,42 @@ var require_browser = __commonJS((exports) => {
 // src/index.ts
 var import_qrcode = __toESM(require_browser(), 1);
 
-// src/types.ts
-var MessageType;
-((MessageType2) => {
-  MessageType2["HANDSHAKE_ACCEPT"] = "handshake_accept";
-  MessageType2["HANDSHAKE_REJECT"] = "handshake_reject";
-  MessageType2["RUN_TRANSACTION"] = "run_transaction";
-  MessageType2["RUN_TRANSACTION_RESPONSE"] = "run_transaction_response";
-  MessageType2["SIGN_RAW_MESSAGE"] = "sign_raw_message";
-  MessageType2["SIGN_RAW_MESSAGE_RESPONSE"] = "sign_raw_message_response";
-  MessageType2["REJECT_REQUEST"] = "reject_request";
-})(MessageType ||= {});
+// src/errors.ts
+class RequestTimeoutError extends Error {
+  constructor(timeout) {
+    super(`Request timed out after ${timeout}ms.`);
+  }
+}
+
+class RejectRequestError extends Error {
+  constructor() {
+    super("Request was rejected by the wallet.");
+  }
+}
+
+class UnauthorizedError extends Error {
+  code;
+  constructor(code) {
+    super(code || "Unauthorized");
+    this.code = code;
+  }
+}
+var UNAUTH_CODES = new Set(["UNAUTHENTICATED", "UNAUTHORIZED", "SESSION_EXPIRED", "LOGGED_OUT"]);
+function extractErrorCode(message) {
+  if (typeof message?.error?.code === "string" && message.error.code.length > 0) {
+    return message.error.code;
+  }
+  if (message?.type === "unauthorized" && typeof message?.code === "string") {
+    return message.code;
+  }
+  return null;
+}
+function isUnauthCode(code) {
+  if (!code) {
+    return false;
+  }
+  return UNAUTH_CODES.has(code);
+}
 
 // src/connection.ts
 class Connection {
@@ -2076,6 +2101,7 @@ class Connection {
   ticketId = null;
   onMessageHandler = null;
   reconnectPromise = null;
+  status = "disconnected";
   constructor({ network, walletUrl, apiUrl }) {
     this.network = network || "main";
     switch (this.network) {
@@ -2106,6 +2132,9 @@ class Connection {
       this.apiUrl = apiUrl;
     }
   }
+  connectInProgress() {
+    return this.status === "connecting" || this.status === "connected";
+  }
   async getTicket(appName, sessionId, version) {
     const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/tickets`, {
       method: "POST",
@@ -2198,7 +2227,10 @@ class Connection {
       }
     });
     if (!response.ok) {
-      throw new Error("Session verification failed.");
+      if (response.status === 401 || response.status === 403) {
+        throw new UnauthorizedError;
+      }
+      throw new Error(`Session verification failed with status ${response.status}.`);
     }
     const data = await response.json();
     const email = data?.email;
@@ -2216,45 +2248,24 @@ class Connection {
     };
     return account;
   }
-  websocketUrl(ticketId) {
-    return `${this.network === "local" ? "ws" : "wss"}://${this.apiUrl.replace("https://", "").replace("http://", "")}/api/v1/.connect/pair/ws/${ticketId}`;
-  }
-  attachWebSocket(ticketId, onMessage, onOpen, onError, onClose) {
-    const wsUrl = this.websocketUrl(ticketId);
-    const ws = new WebSocket(wsUrl);
-    ws.onmessage = onMessage;
-    ws.onopen = () => {
-      console.log("Connected to ticket server.");
-      onOpen?.();
-    };
-    ws.onclose = (event) => {
-      if (this.ws === ws) {
-        this.ws = null;
-      }
-      console.log("Disconnected from ticket server.");
-      onClose?.(event);
-    };
-    ws.onerror = (event) => {
-      if (this.ws === ws) {
-        this.ws = null;
-      }
-      onError?.(event);
-    };
-    this.ws = ws;
-  }
   connectWebSocket(ticketId, onMessage) {
-    this.ticketId = ticketId;
+    if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING) && this.ticketId !== ticketId) {
+      this.ws.close();
+      this.ws = null;
+    }
+    if (this.status === "connecting" || this.status === "connected") {
+      return;
+    }
     this.onMessageHandler = onMessage;
+    this.ticketId = ticketId;
+    this.status = "connecting";
     this.attachWebSocket(ticketId, onMessage);
   }
   reconnect() {
     if (!this.ticketId || !this.onMessageHandler) {
       return Promise.reject(new Error("Cannot reconnect without a known ticket."));
     }
-    if (this.reconnectPromise) {
-      return this.reconnectPromise;
-    }
-    this.reconnectPromise = new Promise((resolve, reject) => {
+    return new Promise((resolve, reject) => {
       let opened = false;
       this.attachWebSocket(this.ticketId, this.onMessageHandler, () => {
         opened = true;
@@ -2270,31 +2281,51 @@ class Connection {
         }
         reject(new Error("Failed to reconnect to ticket server."));
       });
-    }).finally(() => {
-      this.reconnectPromise = null;
     });
-    return this.reconnectPromise;
   }
-  async reconnectWebSocket() {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      return;
-    }
-    return this.reconnect();
+  websocketUrl(ticketId) {
+    return `${this.network === "local" ? "ws" : "wss"}://${this.apiUrl.replace("https://", "").replace("http://", "")}/api/v1/.connect/pair/ws/${encodeURIComponent(ticketId)}`;
   }
-}
-
-// src/errors.ts
-class RequestTimeoutError extends Error {
-  constructor(timeout) {
-    super(`Request timed out after ${timeout}ms.`);
+  attachWebSocket(ticketId, onMessage, onOpen, onError, onClose) {
+    const wsUrl = this.websocketUrl(ticketId);
+    const ws = new WebSocket(wsUrl);
+    ws.onmessage = onMessage;
+    ws.onopen = () => {
+      this.status = "connected";
+      console.log("[LoopSDK] Connected to ticket server.");
+      onOpen?.();
+    };
+    ws.onclose = (event) => {
+      this.status = "disconnected";
+      if (this.ws === ws) {
+        this.ws = null;
+      }
+      console.log("[LoopSDK] Disconnected from ticket server.");
+      onClose?.(event);
+    };
+    ws.onerror = (event) => {
+      this.status = "disconnected";
+      ws.close();
+      if (this.ws === ws) {
+        this.ws = null;
+      }
+      onError?.(event);
+    };
+    this.ws = ws;
   }
 }
 
-class RejectRequestError extends Error {
-  constructor() {
-    super("Request was rejected by the wallet.");
-  }
-}
+// src/types.ts
+var MessageType;
+((MessageType2) => {
+  MessageType2["HANDSHAKE_ACCEPT"] = "handshake_accept";
+  MessageType2["HANDSHAKE_REJECT"] = "handshake_reject";
+  MessageType2["RUN_TRANSACTION"] = "run_transaction";
+  MessageType2["RUN_TRANSACTION_RESPONSE"] = "run_transaction_response";
+  MessageType2["SIGN_RAW_MESSAGE"] = "sign_raw_message";
+  MessageType2["SIGN_RAW_MESSAGE_RESPONSE"] = "sign_raw_message_response";
+  MessageType2["REJECT_REQUEST"] = "reject_request";
+})(MessageType ||= {});
 
 // src/provider.ts
 var DEFAULT_REQUEST_TIMEOUT_MS = 300000;
@@ -2403,24 +2434,24 @@ class Provider {
   }
   async ensureConnected() {
     if (this.connection.ws && this.connection.ws.readyState === WebSocket.OPEN) {
-      return;
+      return Promise.resolve();
     }
-    if (typeof this.connection.reconnectWebSocket === "function") {
-      await this.connection.reconnectWebSocket();
-      if (this.connection.ws && this.connection.ws.readyState === WebSocket.OPEN) {
-        return;
-      }
+    await this.connection.reconnect();
+    if (this.connection.ws && this.connection.ws.readyState === WebSocket.OPEN) {
+      return;
     }
     throw new Error("Not connected.");
   }
   sendRequest(messageType, params = {}, options) {
     return new Promise((resolve, reject) => {
       const requestId = generateRequestId();
-      const requestContext = this.hooks?.onRequestStart?.(messageType, options?.requestLabel);
+      let requestContext;
       const ensure = async () => {
         try {
           await this.ensureConnected();
+          requestContext = await this.hooks?.onRequestStart?.(messageType, options?.requestLabel);
         } catch (error) {
+          console.error("[LoopSDK] error when checking connection status", error);
           this.hooks?.onRequestFinish?.({
             status: "error",
             messageType,
@@ -2444,7 +2475,13 @@ class Provider {
             };
           }
         }
-        this.connection.ws.send(JSON.stringify(requestBody));
+        try {
+          this.connection.ws.send(JSON.stringify(requestBody));
+        } catch (error) {
+          console.error("[LoopSDK] error when sending request", error);
+          reject(error);
+          return;
+        }
         const intervalTime = 300;
         let elapsedTime = 0;
         const timeoutMs = options?.requestTimeout ?? this.requestTimeout;
@@ -2453,6 +2490,18 @@ class Provider {
           if (response) {
             clearInterval(intervalId);
             this.requests.delete(requestId);
+            const code = extractErrorCode(response);
+            if (isUnauthCode(code)) {
+              this.hooks?.onRequestFinish?.({
+                status: "error",
+                messageType,
+                requestLabel: options?.requestLabel,
+                requestContext,
+                errorCode: code
+              });
+              reject(new UnauthorizedError(code));
+              return;
+            }
             if (response.type === "reject_request" /* REJECT_REQUEST */) {
               this.hooks?.onRequestFinish?.({
                 status: "rejected",
@@ -2491,6 +2540,81 @@ class Provider {
   }
 }
 
+// src/session.ts
+var STORAGE_KEY_LOOP_CONNECT = "loop_connect";
+
+class SessionInfo {
+  sessionId;
+  ticketId;
+  authToken;
+  partyId;
+  publicKey;
+  email;
+  _isAuthorized = false;
+  constructor({ sessionId, ticketId, authToken, partyId, publicKey, email }) {
+    this.sessionId = sessionId;
+    this.ticketId = ticketId;
+    this.authToken = authToken;
+    this.partyId = partyId;
+    this.publicKey = publicKey;
+    this.email = email;
+  }
+  setTicketId(ticketId) {
+    this.ticketId = ticketId;
+    this.save();
+  }
+  authorized() {
+    if (this.ticketId === undefined || this.sessionId === undefined || this.authToken === undefined || this.partyId === undefined || this.publicKey === undefined) {
+      throw new Error("Session cannot be authorized without all required fields.");
+    }
+    this._isAuthorized = true;
+  }
+  isPreAuthorized() {
+    return !this._isAuthorized && this.ticketId !== undefined && this.sessionId !== undefined && this.authToken !== undefined && this.partyId !== undefined && this.publicKey !== undefined;
+  }
+  isAuthorized() {
+    return this._isAuthorized;
+  }
+  save() {
+    localStorage.setItem("loop_connect", this.toJson());
+  }
+  reset() {
+    localStorage.removeItem(STORAGE_KEY_LOOP_CONNECT);
+    this.sessionId = generateRequestId();
+    this._isAuthorized = false;
+    this.ticketId = undefined;
+    this.authToken = undefined;
+    this.partyId = undefined;
+    this.publicKey = undefined;
+    this.email = undefined;
+  }
+  static fromStorage() {
+    const existingConnectionRaw = localStorage.getItem(STORAGE_KEY_LOOP_CONNECT);
+    if (!existingConnectionRaw) {
+      return new SessionInfo({ sessionId: generateRequestId() });
+    }
+    let session = null;
+    try {
+      session = new SessionInfo(JSON.parse(existingConnectionRaw));
+    } catch (error) {
+      console.error("Failed to parse existing connection info, local storage is corrupted.", error);
+      localStorage.removeItem(STORAGE_KEY_LOOP_CONNECT);
+      session = new SessionInfo({ sessionId: generateRequestId() });
+    }
+    return session;
+  }
+  toJson() {
+    return JSON.stringify({
+      sessionId: this.sessionId,
+      ticketId: this.ticketId,
+      authToken: this.authToken,
+      partyId: this.partyId,
+      publicKey: this.publicKey,
+      email: this.email
+    });
+  }
+}
+
 // src/extensions/usdc/index.ts
 class UsdcBridge {
   getProvider;
@@ -2570,9 +2694,10 @@ class LoopWallet {
 
 // src/index.ts
 class LoopSDK {
-  version = "0.0.1";
+  version = "0.7.3";
   appName = "Unknown";
   connection = null;
+  session = null;
   provider = null;
   openMode = "popup";
   requestSigningMode = "popup";
@@ -2581,7 +2706,6 @@ class LoopSDK {
   onAccept = null;
   onReject = null;
   overlay = null;
-  ticketId = null;
   wallet;
   constructor() {
     this.wallet = new LoopWallet(() => this.provider);
@@ -2595,6 +2719,9 @@ class LoopSDK {
     onReject,
     options
   }) {
+    if (typeof window === "undefined" || typeof document === "undefined" || typeof localStorage === "undefined") {
+      throw new Error("LoopSDK can only be initialized in a browser environment with localStorage support.");
+    }
     this.appName = appName;
     this.onAccept = onAccept || null;
     this.onReject = onReject || null;
@@ -2609,71 +2736,70 @@ class LoopSDK {
     this.redirectUrl = resolvedOptions.redirectUrl;
     this.connection = new Connection({ network, walletUrl, apiUrl });
   }
-  async connect() {
-    if (typeof window === "undefined") {
-      console.warn("LoopSDK.connect() can only be called in a browser environment.");
+  async loadSessionInfo() {
+    if (this.session) {
+      return;
+    }
+    this.session = SessionInfo.fromStorage();
+    if (!this.session.isPreAuthorized()) {
       return;
     }
+    try {
+      const verifiedAccount = await this.connection?.verifySession(this.session.authToken);
+      if (!verifiedAccount || verifiedAccount?.party_id !== this.session.partyId) {
+        console.warn("[LoopSDK] Stored partyId does not match verified account. Clearing cached session.");
+        this.logout();
+        return;
+      }
+      this.session.authorized();
+    } catch (err) {
+      if (err instanceof UnauthorizedError) {
+        console.error("Unauthorized error when verifying session.", err);
+        this.session.reset();
+        return;
+      }
+      console.error("[LoopSDK] Failed to verify session.", err);
+      throw err;
+    }
+  }
+  async autoConnect() {
     if (!this.connection) {
       throw new Error("SDK not initialized. Call init() first.");
     }
-    const existingConnectionRaw = localStorage.getItem("loop_connect");
-    if (existingConnectionRaw) {
-      try {
-        let canReuseTicket = true;
-        const { ticketId, authToken, partyId, publicKey, email } = JSON.parse(existingConnectionRaw);
-        if (authToken && partyId && publicKey) {
-          try {
-            const verifiedAccount = await this.connection.verifySession(authToken);
-            if (verifiedAccount.party_id === partyId) {
-              this.provider = new Provider({
-                connection: this.connection,
-                party_id: partyId,
-                auth_token: authToken,
-                public_key: publicKey,
-                email,
-                hooks: this.createProviderHooks()
-              });
-              this.ticketId = ticketId || null;
-              this.onAccept?.(this.provider);
-              if (ticketId) {
-                this.connection.connectWebSocket(ticketId, this.handleWebSocketMessage.bind(this));
-              }
-              return;
-            } else {
-              console.warn("[LoopSDK] Sttored partyId does not march verified account. Clearing cached session.");
-              canReuseTicket = false;
-              localStorage.removeItem("loop_connect");
-            }
-          } catch (err) {
-            console.error("Auto-login failed, token is invalid. Starting new connection.", err);
-            canReuseTicket = false;
-            localStorage.removeItem("loop_connect");
-          }
-        }
-        if (ticketId && canReuseTicket) {
-          this.ticketId = ticketId;
-          const url = new URL("/.connect/", this.connection.walletUrl);
-          url.searchParams.set("ticketId", ticketId);
-          if (this.redirectUrl) {
-            url.searchParams.set("redirectUrl", this.redirectUrl);
-          }
-          const connectUrl = url.toString();
-          this.showQrCode(connectUrl);
-          this.connection.connectWebSocket(ticketId, this.handleWebSocketMessage.bind(this));
-          return;
-        }
-      } catch (error) {
-        console.error("Failed to parse existing connection info, creating a new one.", error);
-      }
-      localStorage.removeItem("loop_connect");
+    await this.loadSessionInfo();
+    if (!this.session) {
+      throw new Error("No valid session found. The network connection maynot available or the backend is not reachable.");
+    }
+    if (this.session.isAuthorized()) {
+      this.provider = new Provider({
+        connection: this.connection,
+        party_id: this.session.partyId,
+        auth_token: this.session.authToken,
+        public_key: this.session.publicKey,
+        email: this.session.email,
+        hooks: this.createProviderHooks()
+      });
+      this.onAccept?.(this.provider);
+      this.connection.connectWebSocket(this.session.ticketId, this.handleWebSocketMessage.bind(this));
+      return Promise.resolve();
+    }
+  }
+  async connect() {
+    if (!this.connection) {
+      throw new Error("SDK not initialized. Call init() first.");
+    }
+    await this.autoConnect();
+    if (this.session?.ticketId) {
+      this.showQrCode(this.buildConnectUrl(this.session.ticketId));
+      return;
+    }
+    if (this.session && this.session.isAuthorized()) {
+      return;
     }
-    const sessionId = generateRequestId();
     try {
-      const { ticket_id: ticketId } = await this.connection.getTicket(this.appName, sessionId, this.version);
-      this.ticketId = ticketId;
-      localStorage.setItem("loop_connect", JSON.stringify({ sessionId, ticketId }));
-      const connectUrl = this.buildConnectUrl(ticketId);
+      const { ticket_id: ticketId } = await this.connection.getTicket(this.appName, this.session.sessionId, this.version);
+      this.session.setTicketId(ticketId);
+      const connectUrl = this.buildConnectUrl(this.session.ticketId);
       this.showQrCode(connectUrl);
       this.connection.connectWebSocket(ticketId, this.handleWebSocketMessage.bind(this));
     } catch (error) {
@@ -2683,6 +2809,14 @@ class LoopSDK {
   }
   handleWebSocketMessage(event) {
     const message = JSON.parse(event.data);
+    const errCode = extractErrorCode(message);
+    if (isUnauthCode(errCode)) {
+      console.warn("[LoopSDK] Detected session invalidation:", errCode, {
+        message
+      });
+      this.logout();
+      return;
+    }
     console.log("[LoopSDK] WS message received:", message);
     if (message.type === "handshake_accept" /* HANDSHAKE_ACCEPT */) {
       console.log("[LoopSDK] Entering HANDSHAKE_ACCEPT flow");
@@ -2696,32 +2830,27 @@ class LoopSDK {
           email,
           hooks: this.createProviderHooks()
         });
-        const connectionInfoRaw = localStorage.getItem("loop_connect");
-        if (connectionInfoRaw) {
-          try {
-            const connectionInfo = JSON.parse(connectionInfoRaw);
-            this.ticketId = connectionInfo.ticketId || this.ticketId;
-            connectionInfo.authToken = authToken;
-            connectionInfo.partyId = partyId;
-            connectionInfo.publicKey = publicKey;
-            connectionInfo.email = email;
-            localStorage.setItem("loop_connect", JSON.stringify(connectionInfo));
-            this.onAccept?.(this.provider);
-            this.hideQrCode();
-            this.connection?.connectWebSocket(connectionInfo.ticketId, this.handleWebSocketMessage.bind(this));
-            console.log("[LoopSDK] HANDSHAKE_ACCEPT: closing popup (if exists)");
-            this.popupWindow = null;
-          } catch (error) {
-            console.error("Failed to update local storage with auth token.", error);
-          }
+        try {
+          this.session.authToken = authToken;
+          this.session.partyId = partyId;
+          this.session.publicKey = publicKey;
+          this.session.email = email;
+          this.session.authorized();
+          this.session.save();
+          this.onAccept?.(this.provider);
+          this.hideQrCode();
+          console.log("[LoopSDK] HANDSHAKE_ACCEPT: closing popup (if exists)");
+          this.popupWindow = null;
+        } catch (error) {
+          console.error("Failed to update local storage with auth token.", error);
         }
       }
     } else if (message.type === "handshake_reject" /* HANDSHAKE_REJECT */) {
       console.log("[LoopSDK] Entering HANDSHAKE_REJECT flow");
-      localStorage.removeItem("loop_connect");
       this.connection?.ws?.close();
       this.onReject?.();
       this.hideQrCode();
+      this.session?.reset();
       console.log("[LoopSDK] HANDSHAKE_REJECT: closing popup (if exists)");
       this.popupWindow = null;
     } else if (this.provider) {
@@ -2746,7 +2875,7 @@ class LoopSDK {
     if (typeof window === "undefined") {
       return null;
     }
-    if (!this.ticketId) {
+    if (!this.session?.ticketId) {
       console.warn("[LoopSDK] Cannot open wallet UI for request: no active ticket.");
       return null;
     }
@@ -2790,10 +2919,108 @@ class LoopSDK {
     }
     return window.open(url, "_blank", "noopener,noreferrer");
   }
-  showQrCode(url) {
-    if (typeof window === "undefined" || typeof document === "undefined") {
+  injectModalStyles() {
+    if (document.getElementById("loop-connect-styles"))
       return;
-    }
+    const style = document.createElement("style");
+    style.id = "loop-connect-styles";
+    style.textContent = `
+			.loop-connect {
+				position: fixed;
+				inset: 0;
+				background: oklch(0.222 0 0 / 0.85);
+				backdrop-filter: blur(8px);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				z-index: 10000;
+				font-family: system-ui, -apple-system, sans-serif;
+				animation: fadeIn 0.2s ease-out;
+			}
+			.loop-connect dialog {
+				position: relative;
+				overflow: hidden;
+				background: oklch(0.253 0.008 274.6);
+				box-shadow: 0 4px 24px oklch(0 0 0 / 0.1);
+				border: 1px solid oklch(0.41 0.01 278.4);
+				border-radius: 32px;
+				padding: 24px;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 16px;
+				color: oklch(0.975 0.005 280);
+			}
+			.loop-connect .bg-logo {
+				position: absolute;
+				right: -20px;
+				top: -40px;
+				width: 140px;
+				height: auto;
+				opacity: 0.06;
+				pointer-events: none;
+			}
+			.loop-connect h3 {
+				margin: 0;
+				font-size: 18px;
+				font-weight: 600;
+				letter-spacing: -0.015em;
+			}
+			.loop-connect figure {
+				margin: 0;
+				background: oklch(1 0 0);
+				padding: 8px;
+				border-radius: 24px;
+				display: flex;
+				justify-content: center;
+				border: 2px solid oklch(0.41 0.01 278.4);
+				box-shadow: 0 4px 24px oklch(0 0 0 / 0.1);
+			}
+			.loop-connect img {
+				display: block;
+				width: 225px;
+				height: 225px;
+			}
+			.loop-connect .divider {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				color: oklch(0.554 0.012 280.3);
+				font-size: 13px;
+				font-weight: 600;
+			}
+			.loop-connect .divider::before,
+			.loop-connect .divider::after {
+				content: "";
+				flex: 1;
+				height: 1px;
+				background: oklch(0.45 0.01 278);
+			}
+			.loop-connect button {
+				background: oklch(0.976 0.101 112.3);
+				border: 1px solid oklch(0.82 0.16 110);
+				color: oklch(0.222 0 0);
+				padding: 16px 32px;
+				border-radius: 24px;
+				font-size: 15px;
+				font-weight: 600;
+				cursor: pointer;
+				transition: all 0.2s ease;
+				width: 100%;
+			}
+			.loop-connect button:hover {
+				background: oklch(0.98 0.105 112.5);
+			}
+			@keyframes fadeIn {
+				from { opacity: 0; }
+				to { opacity: 1; }
+			}
+		`;
+    document.head.appendChild(style);
+  }
+  showQrCode(url) {
+    this.injectModalStyles();
     import_qrcode.default.toDataURL(url, (err, dataUrl) => {
       if (err) {
         console.error("Failed to generate QR code", err);
@@ -2801,42 +3028,53 @@ class LoopSDK {
       }
       const overlay = document.createElement("div");
       overlay.id = "loop-sdk-connect-overlay";
-      overlay.className = "loop-sdk-connect-overlay";
-      overlay.style.position = "fixed";
-      overlay.style.top = "0";
-      overlay.style.left = "0";
-      overlay.style.width = "100%";
-      overlay.style.height = "100%";
-      overlay.style.backgroundColor = "rgba(0,0,0,0.9)";
-      overlay.style.display = "flex";
-      overlay.style.justifyContent = "center";
-      overlay.style.alignItems = "center";
-      overlay.style.zIndex = "1000";
-      overlay.style.flexDirection = "column";
-      const content = document.createElement("div");
-      content.className = "loop-sdk-connect-content";
-      content.style.display = "flex";
-      content.style.flexDirection = "column";
-      content.style.alignItems = "center";
+      overlay.className = "loop-sdk-connect-overlay loop-connect";
+      const dialog = document.createElement("dialog");
+      dialog.open = true;
+      const bgLogo = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      bgLogo.setAttribute("class", "bg-logo");
+      bgLogo.setAttribute("viewBox", "0 0 124.05 305.64");
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", "M24.58,99.47L124.05,0v224.42L24.58,124.95c-7.04-7.04-7.04-18.45,0-25.49Z");
+      path.setAttribute("fill", "currentColor");
+      const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+      rect.setAttribute("x", "12.89");
+      rect.setAttribute("y", "194.48");
+      rect.setAttribute("width", "98.27");
+      rect.setAttribute("height", "98.27");
+      rect.setAttribute("rx", "18.02");
+      rect.setAttribute("ry", "18.02");
+      rect.setAttribute("transform", "translate(-154.1 115.21) rotate(-45)");
+      rect.setAttribute("fill", "currentColor");
+      bgLogo.appendChild(path);
+      bgLogo.appendChild(rect);
+      const title = document.createElement("h3");
+      title.textContent = "Scan with Phone";
+      const figure = document.createElement("figure");
       const img = document.createElement("img");
       img.src = dataUrl;
-      content.appendChild(img);
-      const link = document.createElement("a");
-      link.href = url;
-      link.textContent = "Or click here to connect";
-      link.style.color = "white";
-      link.style.marginTop = "20px";
-      link.onclick = (e) => {
-        e.preventDefault();
+      img.alt = "QR Code";
+      figure.appendChild(img);
+      const divider = document.createElement("div");
+      divider.className = "divider";
+      divider.textContent = "OR";
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = "Continue in Browser";
+      button.addEventListener("click", () => {
         this.openWallet(url);
-      };
-      content.appendChild(link);
-      overlay.appendChild(content);
-      overlay.onclick = (e) => {
+      });
+      dialog.appendChild(bgLogo);
+      dialog.appendChild(title);
+      dialog.appendChild(figure);
+      dialog.appendChild(divider);
+      dialog.appendChild(button);
+      overlay.appendChild(dialog);
+      overlay.addEventListener("click", (e) => {
         if (e.target === overlay) {
           this.hideQrCode();
         }
-      };
+      });
       document.body.appendChild(overlay);
       this.overlay = overlay;
     });
@@ -2847,6 +3085,12 @@ class LoopSDK {
       this.overlay = null;
     }
   }
+  logout() {
+    this.session?.reset();
+    this.provider = null;
+    this.connection?.ws?.close();
+    this.hideQrCode();
+  }
   requireProvider() {
     if (!this.provider) {
       throw new Error("SDK not connected. Call connect() and wait for acceptance first.");
@@ -2855,9 +3099,7 @@ class LoopSDK {
   }
   createProviderHooks() {
     return {
-      onRequestStart: () => {
-        return this.openRequestUi();
-      },
+      onRequestStart: () => this.openRequestUi(),
       onRequestFinish: ({ requestContext }) => {
         const win = requestContext;
         if (win) {

package/package.json

@@ -1,31 +1,31 @@
 {
-  "name": "@fivenorth/loop-sdk",
-  "version": "0.7.2",
-  "author": "hello@fivenorth.io",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "devDependencies": {
-    "@types/bun": "latest"
-  },
-  "peerDependencies": {
-    "typescript": "^5"
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": "github:fivenorth-io/loop-sdk",
-  "scripts": {
-    "build": "bun build ./src/index.ts --outdir ./dist",
-    "prepublishOnly": "bun run build",
-    "start": "bun run src/server.ts"
-  },
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "dependencies": {
-    "@types/qrcode": "^1.5.6",
-    "qrcode": "^1.5.4"
-  }
+	"name": "@fivenorth/loop-sdk",
+	"version": "0.7.4",
+	"author": "hello@fivenorth.io",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"devDependencies": {
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5"
+	},
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": "github:fivenorth-io/loop-sdk",
+	"scripts": {
+		"build": "bun build ./src/index.ts --outdir ./dist",
+		"prepublishOnly": "bun run build",
+		"start": "bun run src/server.ts"
+	},
+	"type": "module",
+	"types": "dist/index.d.ts",
+	"dependencies": {
+		"@types/qrcode": "^1.5.6",
+		"qrcode": "^1.5.4"
+	}
 }