@fivenorth/loop-sdk 0.7.3 → 0.7.4

package/dist/index.js

@@ -2055,18 +2055,6 @@ 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) {
@@ -2327,6 +2315,18 @@ class Connection {
   }
 }
 
+// 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;
 function generateUUID() {
@@ -2540,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;
@@ -2617,81 +2692,6 @@ class LoopWallet {
   }
 }
 
-// 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/index.ts
 class LoopSDK {
   version = "0.7.3";
@@ -2789,7 +2789,8 @@ class LoopSDK {
       throw new Error("SDK not initialized. Call init() first.");
     }
     await this.autoConnect();
-    if (this.connection?.connectInProgress() === true) {
+    if (this.session?.ticketId) {
+      this.showQrCode(this.buildConnectUrl(this.session.ticketId));
       return;
     }
     if (this.session && this.session.isAuthorized()) {
@@ -2798,7 +2799,7 @@ class LoopSDK {
     try {
       const { ticket_id: ticketId } = await this.connection.getTicket(this.appName, this.session.sessionId, this.version);
       this.session.setTicketId(ticketId);
-      const connectUrl = this.buildConnectUrl(ticketId);
+      const connectUrl = this.buildConnectUrl(this.session.ticketId);
       this.showQrCode(connectUrl);
       this.connection.connectWebSocket(ticketId, this.handleWebSocketMessage.bind(this));
     } catch (error) {
@@ -2810,7 +2811,9 @@ class LoopSDK {
     const message = JSON.parse(event.data);
     const errCode = extractErrorCode(message);
     if (isUnauthCode(errCode)) {
-      console.warn("[LoopSDK] Detected session invalidation:", errCode, { message });
+      console.warn("[LoopSDK] Detected session invalidation:", errCode, {
+        message
+      });
       this.logout();
       return;
     }
@@ -2916,7 +2919,108 @@ class LoopSDK {
     }
     return window.open(url, "_blank", "noopener,noreferrer");
   }
+  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);
@@ -2924,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;
     });

package/package.json

@@ -1,31 +1,31 @@
 {
-  "name": "@fivenorth/loop-sdk",
-  "version": "0.7.3",
-  "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"
+	}
 }