@fivenorth/loop-sdk 0.2.0 → 0.4.0

package/README.md

@@ -42,6 +42,10 @@ Before you can connect, you need to initialize the SDK. This is typically done o
 loop.init({
     appName: 'My Awesome dApp',
     network: 'local', // or 'devnet', 'mainnet'
+    options: {
+        openMode: 'popup', // 'popup' (default) or 'tab'
+        redirectUrl: 'https://myapp.com/after-connect', // optional redirect after approval
+    },
     onAccept: (provider) => {
         console.log('Connected!', provider);
         // You can now use the provider to interact with the wallet
@@ -55,6 +59,9 @@ loop.init({
 The `init` method takes a configuration object with the following properties:
 - `appName`: The name of your application, which will be displayed to the user in the Loop wallet.
 - `network`: The network to connect to. Can be `local`, `devnet`, or `mainnet`.
+- `options`: Optional object containing:
+  - `openMode`: Controls how Loop opens: `'popup'` (default) or `'tab'`.
+  - `redirectUrl`: Optional redirect URL the wallet will navigate back to after successful approval. If omitted, user stays on Loop dashboard.
 - `onAccept`: A callback function that is called when the user accepts the connection. It receives a `provider` object.
 - `onReject`: A callback function that is called when the user rejects the connection.
 

package/dist/index.js

@@ -2165,13 +2165,15 @@ class Connection {
       throw new Error("Session verification failed.");
     }
     const data = await response.json();
+    const email = data?.email;
     if (!data?.party_id || !data?.public_key) {
       throw new Error("Invalid session verification response.");
     }
     const account = {
       party_id: data?.party_id,
       auth_token: authToken,
-      public_key: data?.public_key
+      public_key: data?.public_key,
+      email
     };
     return account;
   }
@@ -2205,8 +2207,25 @@ class RejectRequestError extends Error {
 }
 
 // src/provider.ts
+function generateUUID() {
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => {
+    const gCrypto = globalThis.crypto;
+    if (!gCrypto?.getRandomValues) {
+      const n2 = Number(c);
+      return (n2 ^ Math.random() * 16 >> n2 / 4).toString(16);
+    }
+    const arr = gCrypto.getRandomValues(new Uint8Array(1));
+    const byte = arr[0];
+    const n = Number(c);
+    return (n ^ (byte & 15) >> n / 4).toString(16);
+  });
+}
 function generateRequestId() {
-  return crypto.randomUUID();
+  const gCrypto = globalThis.crypto;
+  if (gCrypto?.randomUUID) {
+    return gCrypto.randomUUID();
+  }
+  return generateUUID();
 }
 
 class Provider {
@@ -2288,15 +2307,33 @@ class LoopSDK {
   appName = "Unknown";
   connection = null;
   provider = null;
+  openMode = "popup";
+  popupWindow = null;
+  redirectUrl;
   onAccept = null;
   onReject = null;
   overlay = null;
   ticketId = null;
   constructor() {}
-  init({ appName, network, walletUrl, apiUrl, onAccept, onReject }) {
+  init({
+    appName,
+    network,
+    walletUrl,
+    apiUrl,
+    onAccept,
+    onReject,
+    options
+  }) {
     this.appName = appName;
     this.onAccept = onAccept || null;
     this.onReject = onReject || null;
+    const resolvedOptions = {
+      openMode: "popup",
+      redirectUrl: undefined,
+      ...options ?? {}
+    };
+    this.openMode = resolvedOptions.openMode;
+    this.redirectUrl = resolvedOptions.redirectUrl;
     this.connection = new Connection({ network, walletUrl, apiUrl });
   }
   async connect() {
@@ -2310,6 +2347,7 @@ class LoopSDK {
     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 {
@@ -2321,14 +2359,25 @@ class LoopSDK {
                 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) {
+        if (ticketId && canReuseTicket) {
           this.ticketId = ticketId;
-          const connectUrl = `${this.connection.walletUrl}/.connect/?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;
@@ -2343,7 +2392,12 @@ class LoopSDK {
       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.connection.walletUrl}/.connect/?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));
     } catch (error) {
@@ -2353,7 +2407,9 @@ class LoopSDK {
   }
   handleWebSocketMessage(event) {
     const message = JSON.parse(event.data);
+    console.log("[LoopSDK] WS message received:", message);
     if (message.type === "handshake_accept" /* HANDSHAKE_ACCEPT */) {
+      console.log("[LoopSDK] Entering HANDSHAKE_ACCEPT flow");
       const { authToken, partyId, publicKey, email } = message.payload || {};
       if (authToken && partyId && publicKey) {
         this.provider = new Provider({ connection: this.connection, party_id: partyId, auth_token: authToken, public_key: publicKey, email });
@@ -2369,20 +2425,51 @@ class LoopSDK {
             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);
           }
         }
       }
     } 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();
+      console.log("[LoopSDK] HANDSHAKE_REJECT: closing popup (if exists)");
+      if (this.popupWindow && !this.popupWindow.closed) {
+        this.popupWindow.close();
+      }
+      this.popupWindow = null;
     } else if (this.provider) {
       this.provider.handleResponse(message);
     }
   }
+  openWallet(url) {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (this.openMode === "popup") {
+      const width = 480;
+      const height = 720;
+      const left = (window.innerWidth - width) / 2 + window.screenX;
+      const top = (window.innerWidth - height) / 2 + window.screenY;
+      const features = `width=${width},height=${height},` + `left=${left},top=${top},` + "menubar=no,toolbar=no,location=no," + "resizable=yes,scrollbars=yes,status=no";
+      const popup = window.open(url, "loop-wallet", features);
+      if (!popup) {
+        window.open(url, "_blank", "noopener,noreferrer");
+        return;
+      }
+      this.popupWindow = popup;
+      try {
+        popup.focus();
+      } catch {}
+      return;
+    }
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
   showQrCode(url) {
     if (typeof window === "undefined" || typeof document === "undefined") {
       return;
@@ -2398,7 +2485,7 @@ class LoopSDK {
       overlay.style.left = "0";
       overlay.style.width = "100%";
       overlay.style.height = "100%";
-      overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
+      overlay.style.backgroundColor = "rgba(0,0,0,0.9)";
       overlay.style.display = "flex";
       overlay.style.justifyContent = "center";
       overlay.style.alignItems = "center";
@@ -2412,7 +2499,10 @@ class LoopSDK {
       link.textContent = "Or click here to connect";
       link.style.color = "white";
       link.style.marginTop = "20px";
-      link.target = "_blank";
+      link.onclick = (e) => {
+        e.preventDefault();
+        this.openWallet(url);
+      };
       overlay.appendChild(link);
       overlay.onclick = (e) => {
         if (e.target === overlay) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fivenorth/loop-sdk",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "author": "hello@fivenorth.io",
   "main": "dist/index.js",
   "module": "dist/index.js",