@fivenorth/loop-sdk 0.3.0 → 0.5.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 {
@@ -2290,16 +2309,31 @@ class LoopSDK {
   provider = null;
   openMode = "popup";
   popupWindow = null;
+  redirectUrl;
   onAccept = null;
   onReject = null;
   overlay = null;
   ticketId = null;
   constructor() {}
-  init({ appName, network, walletUrl, apiUrl, onAccept, onReject, openMode }) {
+  init({
+    appName,
+    network,
+    walletUrl,
+    apiUrl,
+    onAccept,
+    onReject,
+    options
+  }) {
     this.appName = appName;
     this.onAccept = onAccept || null;
     this.onReject = onReject || null;
-    this.openMode = openMode ?? "popup";
+    const resolvedOptions = {
+      openMode: "popup",
+      redirectUrl: undefined,
+      ...options ?? {}
+    };
+    this.openMode = resolvedOptions.openMode;
+    this.redirectUrl = resolvedOptions.redirectUrl;
     this.connection = new Connection({ network, walletUrl, apiUrl });
   }
   async connect() {
@@ -2338,7 +2372,12 @@ class LoopSDK {
         }
         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;
@@ -2353,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) {
@@ -2382,9 +2426,6 @@ class LoopSDK {
             this.hideQrCode();
             this.connection?.connectWebSocket(connectionInfo.ticketId, this.handleWebSocketMessage.bind(this));
             console.log("[LoopSDK] HANDSHAKE_ACCEPT: closing popup (if exists)");
-            if (this.popupWindow && !this.popupWindow.closed) {
-              this.popupWindow.close();
-            }
             this.popupWindow = null;
           } catch (error) {
             console.error("Failed to update local storage with auth token.", error);
@@ -2439,20 +2480,27 @@ class LoopSDK {
         return;
       }
       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.5)";
+      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";
       const img = document.createElement("img");
       img.src = dataUrl;
-      overlay.appendChild(img);
+      content.appendChild(img);
       const link = document.createElement("a");
       link.href = url;
       link.textContent = "Or click here to connect";
@@ -2462,7 +2510,8 @@ class LoopSDK {
         e.preventDefault();
         this.openWallet(url);
       };
-      overlay.appendChild(link);
+      content.appendChild(link);
+      overlay.appendChild(content);
       overlay.onclick = (e) => {
         if (e.target === overlay) {
           this.hideQrCode();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fivenorth/loop-sdk",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "author": "hello@fivenorth.io",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -16,6 +16,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": "github:fivenorth-io/loop-sdk",
   "scripts": {
     "build": "bun build ./src/index.ts --outdir ./dist",
     "prepublishOnly": "bun run build",