@fivenorth/loop-sdk 0.7.0 → 0.7.1

package/README.md

@@ -44,6 +44,7 @@ loop.init({
     network: 'local', // or 'devnet', 'mainnet'
     options: {
         openMode: 'popup', // 'popup' (default) or 'tab'
+        requestSigningMode: 'popup', // 'popup' (default) or 'tab'
         redirectUrl: 'https://myapp.com/after-connect', // optional redirect after approval
     },
     onAccept: (provider) => {
@@ -61,6 +62,7 @@ The `init` method takes a configuration object with the following properties:
 - `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'`.
+  - `requestSigningMode`: Controls how signing/transaction requests open the wallet UI after you're connected: `'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.
@@ -74,6 +76,7 @@ loop.connect();
 ```
 
 This will open a modal with a QR code for the user to scan with their Loop wallet.
+If you set `requestSigningMode` to `'popup'` (or `'tab'`), each signing/transaction request will also open the wallet dashboard and auto-close the popup once the wallet responds.
 
 ### 3. Using the Provider
 
@@ -132,7 +135,10 @@ const damlCommand = {
 };
 
 try {
-    const result = await provider.submitTransaction(damlCommand);
+    const result = await provider.submitTransaction(damlCommand, {
+        // Optional: show a custom message in the wallet prompt
+        message: 'Transfer 10 CC to RetailStore',
+    });
     console.log('Transaction successful:', result);
 } catch (error) {
     console.error('Transaction failed:', error);
@@ -165,6 +171,8 @@ await loop.wallet.transfer(
     instrument_id: 'Amulet',                 // optional
   },
   {
+    // Optional: show a custom message in the wallet prompt
+    message: 'Send 5 CC to Alice',
     requestedAt: new Date().toISOString(),   // optional
     executeBefore: new Date(Date.now() + 24*60*60*1000).toISOString(), // optional
     requestTimeout: 5 * 60 * 1000,           // optional (ms), defaults to 5 minutes
@@ -192,6 +200,7 @@ await loop.wallet.extension.usdcBridge.withdrawalUSDCxToEthereum(
   '10.5', // amount in USDCx
   {
     reference: 'optional memo',
+    message: 'Withdraw 10.5 USDCx to 0xabc', // optional custom prompt text
     requestTimeout: 5 * 60 * 1000, // optional override (ms)
   },
 );

package/dist/index.js

@@ -2324,7 +2324,8 @@ class Provider {
   auth_token;
   requests = new Map;
   requestTimeout = DEFAULT_REQUEST_TIMEOUT_MS;
-  constructor({ connection, party_id, public_key, auth_token, email }) {
+  hooks;
+  constructor({ connection, party_id, public_key, auth_token, email, hooks }) {
     if (!connection) {
       throw new Error("Provider requires a connection object.");
     }
@@ -2333,6 +2334,7 @@ class Provider {
     this.public_key = public_key;
     this.email = email;
     this.auth_token = auth_token;
+    this.hooks = hooks;
   }
   getAuthToken() {
     return this.auth_token;
@@ -2355,6 +2357,7 @@ class Provider {
   async transfer(recipient, amount, instrument, options) {
     const amountStr = typeof amount === "number" ? amount.toString() : amount;
     const { requestedAt, executeBefore, requestTimeout } = options || {};
+    const message = options?.message;
     const resolveDate = (value, fallbackMs) => {
       if (value instanceof Date) {
         return value.toISOString();
@@ -2387,7 +2390,7 @@ class Provider {
       actAs: preparedPayload.actAs,
       readAs: preparedPayload.readAs,
       synchronizerId: preparedPayload.synchronizerId
-    }, { requestTimeout });
+    }, { requestTimeout, message });
   }
   async signMessage(message) {
     return this.sendRequest("sign_raw_message" /* SIGN_RAW_MESSAGE */, message);
@@ -2406,19 +2409,36 @@ class Provider {
   }
   sendRequest(messageType, params = {}, options) {
     return new Promise((resolve, reject) => {
+      const requestId = generateRequestId();
+      const requestContext = this.hooks?.onRequestStart?.(messageType, options?.requestLabel);
       const ensure = async () => {
         try {
           await this.ensureConnected();
         } catch (error) {
+          this.hooks?.onRequestFinish?.({
+            status: "error",
+            messageType,
+            requestLabel: options?.requestLabel,
+            requestContext
+          });
           reject(error);
           return;
         }
-        const requestId = generateRequestId();
-        this.connection.ws.send(JSON.stringify({
+        const requestBody = {
           request_id: requestId,
           type: messageType,
           payload: params
-        }));
+        };
+        if (options?.message) {
+          requestBody.ticket = { message: options.message };
+          if (typeof params === "object" && params !== null && !Array.isArray(params)) {
+            requestBody.payload = {
+              ...params,
+              ticket: { message: options.message }
+            };
+          }
+        }
+        this.connection.ws.send(JSON.stringify(requestBody));
         const intervalTime = 300;
         let elapsedTime = 0;
         const timeoutMs = options?.requestTimeout ?? this.requestTimeout;
@@ -2428,8 +2448,20 @@ class Provider {
             clearInterval(intervalId);
             this.requests.delete(requestId);
             if (response.type === "reject_request" /* REJECT_REQUEST */) {
+              this.hooks?.onRequestFinish?.({
+                status: "rejected",
+                messageType,
+                requestLabel: options?.requestLabel,
+                requestContext
+              });
               reject(new RejectRequestError);
             } else {
+              this.hooks?.onRequestFinish?.({
+                status: "success",
+                messageType,
+                requestLabel: options?.requestLabel,
+                requestContext
+              });
               resolve(response.payload);
             }
           } else {
@@ -2437,6 +2469,12 @@ class Provider {
             if (elapsedTime >= timeoutMs) {
               clearInterval(intervalId);
               this.requests.delete(requestId);
+              this.hooks?.onRequestFinish?.({
+                status: "timeout",
+                messageType,
+                requestLabel: options?.requestLabel,
+                requestContext
+              });
               reject(new RequestTimeoutError(timeoutMs));
             }
           }
@@ -2475,7 +2513,7 @@ class UsdcBridge {
       actAs: preparedPayload.actAs,
       readAs: preparedPayload.readAs,
       synchronizerId: preparedPayload.synchronizerId
-    }, { requestTimeout: options?.requestTimeout }));
+    }, { requestTimeout: options?.requestTimeout, message: options?.message }));
   }
 }
 async function prepareUsdcWithdraw(connection, authToken, params) {
@@ -2531,6 +2569,7 @@ class LoopSDK {
   connection = null;
   provider = null;
   openMode = "popup";
+  requestSigningMode = "popup";
   popupWindow = null;
   redirectUrl;
   onAccept = null;
@@ -2555,10 +2594,12 @@ class LoopSDK {
     this.onReject = onReject || null;
     const resolvedOptions = {
       openMode: "popup",
+      requestSigningMode: "popup",
       redirectUrl: undefined,
       ...options ?? {}
     };
     this.openMode = resolvedOptions.openMode;
+    this.requestSigningMode = resolvedOptions.requestSigningMode;
     this.redirectUrl = resolvedOptions.redirectUrl;
     this.connection = new Connection({ network, walletUrl, apiUrl });
   }
@@ -2579,7 +2620,15 @@ class LoopSDK {
           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 });
+              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));
@@ -2618,12 +2667,7 @@ 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 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();
+      const connectUrl = this.buildConnectUrl(ticketId);
       this.showQrCode(connectUrl);
       this.connection.connectWebSocket(ticketId, this.handleWebSocketMessage.bind(this));
     } catch (error) {
@@ -2638,11 +2682,19 @@ class LoopSDK {
       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 });
+        this.provider = new Provider({
+          connection: this.connection,
+          party_id: partyId,
+          auth_token: authToken,
+          public_key: publicKey,
+          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;
@@ -2670,11 +2722,51 @@ class LoopSDK {
       this.provider.handleResponse(message);
     }
   }
-  openWallet(url) {
+  buildConnectUrl(ticketId) {
+    const url = new URL("/.connect/", this.connection.walletUrl);
+    url.searchParams.set("ticketId", ticketId);
+    if (this.redirectUrl) {
+      url.searchParams.set("redirectUrl", this.redirectUrl);
+    }
+    return url.toString();
+  }
+  buildDashboardUrl() {
+    if (!this.connection) {
+      throw new Error("Connection not initialized");
+    }
+    return this.connection.walletUrl;
+  }
+  openRequestUi() {
     if (typeof window === "undefined") {
-      return;
+      return null;
+    }
+    if (!this.ticketId) {
+      console.warn("[LoopSDK] Cannot open wallet UI for request: no active ticket.");
+      return null;
+    }
+    const dashboardUrl = this.buildDashboardUrl();
+    const targetMode = this.requestSigningMode === "tab" ? "tab" : "popup";
+    const opened = this.openWallet(dashboardUrl, targetMode);
+    if (opened) {
+      this.popupWindow = opened;
+      return opened;
+    }
+    return null;
+  }
+  closePopupIfExists() {
+    if (this.popupWindow && !this.popupWindow.closed) {
+      try {
+        this.popupWindow.close();
+      } catch {}
     }
-    if (this.openMode === "popup") {
+    this.popupWindow = null;
+  }
+  openWallet(url, mode) {
+    if (typeof window === "undefined") {
+      return null;
+    }
+    const targetMode = mode || this.openMode;
+    if (targetMode === "popup") {
       const width = 480;
       const height = 720;
       const left = (window.innerWidth - width) / 2 + window.screenX;
@@ -2682,16 +2774,15 @@ class LoopSDK {
       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;
+        return window.open(url, "_blank", "noopener,noreferrer");
       }
       this.popupWindow = popup;
       try {
         popup.focus();
       } catch {}
-      return;
+      return popup;
     }
-    window.open(url, "_blank", "noopener,noreferrer");
+    return window.open(url, "_blank", "noopener,noreferrer");
   }
   showQrCode(url) {
     if (typeof window === "undefined" || typeof document === "undefined") {
@@ -2756,6 +2847,21 @@ class LoopSDK {
     }
     return this.provider;
   }
+  createProviderHooks() {
+    return {
+      onRequestStart: () => {
+        return this.openRequestUi();
+      },
+      onRequestFinish: ({ requestContext }) => {
+        const win = requestContext;
+        if (win) {
+          setTimeout(() => {
+            this.closePopupIfExists();
+          }, 800);
+        }
+      }
+    };
+  }
 }
 var loop = new LoopSDK;
 export {

package/package.json

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