@fivenorth/loop-sdk 0.6.5 → 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
@@ -184,6 +192,24 @@ Common instrument overrides (pass into the `instrument` argument above):
 
 Swap in the admin/id for the specific instrument you hold in the Loop wallet.
 
+#### USDC withdraw helper
+
+```javascript
+await loop.wallet.extension.usdcBridge.withdrawalUSDCxToEthereum(
+  '0xYourEthAddress',
+  '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)
+  },
+);
+```
+
+Notes:
+- Uses the connect-based withdraw endpoint to prepare the transaction and sends it over Wallet Connect.
+- The helper auto-reconnects the websocket if it was closed before sending the request.
+
 # API
 
 Coming soon

package/dist/index.js

@@ -2073,6 +2073,9 @@ class Connection {
   apiUrl = "https://cantonloop.com";
   ws = null;
   network = "main";
+  ticketId = null;
+  onMessageHandler = null;
+  reconnectPromise = null;
   constructor({ network, walletUrl, apiUrl }) {
     this.network = network || "main";
     switch (this.network) {
@@ -2213,16 +2216,67 @@ class Connection {
   websocketUrl(ticketId) {
     return `${this.network === "local" ? "ws" : "wss"}://${this.apiUrl.replace("https://", "").replace("http://", "")}/api/v1/.connect/pair/ws/${ticketId}`;
   }
-  connectWebSocket(ticketId, onMessage) {
+  attachWebSocket(ticketId, onMessage, onOpen, onError, onClose) {
     const wsUrl = this.websocketUrl(ticketId);
-    this.ws = new WebSocket(wsUrl);
-    this.ws.onmessage = onMessage;
-    this.ws.onopen = () => {
+    const ws = new WebSocket(wsUrl);
+    ws.onmessage = onMessage;
+    ws.onopen = () => {
       console.log("Connected to ticket server.");
+      onOpen?.();
     };
-    this.ws.onclose = () => {
+    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;
+    this.onMessageHandler = onMessage;
+    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) => {
+      let opened = false;
+      this.attachWebSocket(this.ticketId, this.onMessageHandler, () => {
+        opened = true;
+        resolve();
+      }, () => {
+        if (opened) {
+          return;
+        }
+        reject(new Error("Failed to reconnect to ticket server."));
+      }, () => {
+        if (opened) {
+          return;
+        }
+        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();
   }
 }
 
@@ -2269,7 +2323,9 @@ class Provider {
   email;
   auth_token;
   requests = new Map;
-  constructor({ connection, party_id, public_key, auth_token, email }) {
+  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MS;
+  hooks;
+  constructor({ connection, party_id, public_key, auth_token, email, hooks }) {
     if (!connection) {
       throw new Error("Provider requires a connection object.");
     }
@@ -2278,6 +2334,10 @@ class Provider {
     this.public_key = public_key;
     this.email = email;
     this.auth_token = auth_token;
+    this.hooks = hooks;
+  }
+  getAuthToken() {
+    return this.auth_token;
   }
   handleResponse(message) {
     console.log("Received response:", message);
@@ -2297,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();
@@ -2329,53 +2390,164 @@ 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);
   }
+  async ensureConnected() {
+    if (this.connection.ws && this.connection.ws.readyState === WebSocket.OPEN) {
+      return;
+    }
+    if (typeof this.connection.reconnectWebSocket === "function") {
+      await this.connection.reconnectWebSocket();
+      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) => {
-      if (!this.connection.ws || this.connection.ws.readyState !== WebSocket.OPEN) {
-        return reject(new Error("Not connected."));
-      }
       const requestId = generateRequestId();
-      const requestTimeout = options?.requestTimeout ?? DEFAULT_REQUEST_TIMEOUT_MS;
-      this.connection.ws.send(JSON.stringify({
-        request_id: requestId,
-        type: messageType,
-        payload: params
-      }));
-      const intervalTime = 300;
-      let elapsedTime = 0;
-      const intervalId = setInterval(() => {
-        const response = this.requests.get(requestId);
-        if (response) {
-          clearInterval(intervalId);
-          this.requests.delete(requestId);
-          if (response.type === "reject_request" /* REJECT_REQUEST */) {
-            reject(new RejectRequestError);
-          } else {
-            resolve(response.payload);
+      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 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 }
+            };
           }
-        } else {
-          elapsedTime += intervalTime;
-          if (elapsedTime >= requestTimeout) {
+        }
+        this.connection.ws.send(JSON.stringify(requestBody));
+        const intervalTime = 300;
+        let elapsedTime = 0;
+        const timeoutMs = options?.requestTimeout ?? this.requestTimeout;
+        const intervalId = setInterval(() => {
+          const response = this.requests.get(requestId);
+          if (response) {
             clearInterval(intervalId);
             this.requests.delete(requestId);
-            reject(new RequestTimeoutError(requestTimeout));
+            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 {
+            elapsedTime += intervalTime;
+            if (elapsedTime >= timeoutMs) {
+              clearInterval(intervalId);
+              this.requests.delete(requestId);
+              this.hooks?.onRequestFinish?.({
+                status: "timeout",
+                messageType,
+                requestLabel: options?.requestLabel,
+                requestContext
+              });
+              reject(new RequestTimeoutError(timeoutMs));
+            }
           }
-        }
-      }, intervalTime);
+        }, intervalTime);
+      };
+      ensure();
     });
   }
 }
 
+// src/extensions/usdc/index.ts
+class UsdcBridge {
+  getProvider;
+  constructor(getProvider) {
+    this.getProvider = getProvider;
+  }
+  requireProvider() {
+    const provider = this.getProvider();
+    if (!provider) {
+      throw new Error("SDK not connected. Call connect() and wait for acceptance first.");
+    }
+    return provider;
+  }
+  withdrawalUSDCxToEthereum(recipient, amount, options) {
+    const provider = this.requireProvider();
+    const amountStr = typeof amount === "number" ? amount.toString() : amount;
+    const withdrawRequest = {
+      recipient,
+      amount: amountStr,
+      reference: options?.reference
+    };
+    return prepareUsdcWithdraw(provider.connection, provider.getAuthToken(), withdrawRequest).then((preparedPayload) => provider.submitTransaction({
+      commands: preparedPayload.commands,
+      disclosedContracts: preparedPayload.disclosedContracts,
+      packageIdSelectionPreference: preparedPayload.packageIdSelectionPreference,
+      actAs: preparedPayload.actAs,
+      readAs: preparedPayload.readAs,
+      synchronizerId: preparedPayload.synchronizerId
+    }, { requestTimeout: options?.requestTimeout, message: options?.message }));
+  }
+}
+async function prepareUsdcWithdraw(connection, authToken, params) {
+  const payload = {
+    recipient: params.recipient,
+    amount: params.amount
+  };
+  if (params.reference) {
+    payload.reference = params.reference;
+  }
+  const response = await fetch(`${connection.apiUrl}/api/v1/.connect/pair/usdc/withdraw`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authToken}`
+    },
+    body: JSON.stringify(payload)
+  });
+  if (!response.ok) {
+    throw new Error("Failed to prepare USDC withdrawal.");
+  }
+  const data = await response.json();
+  return data.payload;
+}
+
 // src/wallet.ts
 class LoopWallet {
   getProvider;
+  extension;
   constructor(getProvider) {
     this.getProvider = getProvider;
+    this.extension = {
+      usdcBridge: new UsdcBridge(this.getProvider)
+    };
   }
   requireProvider() {
     const provider = this.getProvider();
@@ -2397,6 +2569,7 @@ class LoopSDK {
   connection = null;
   provider = null;
   openMode = "popup";
+  requestSigningMode = "popup";
   popupWindow = null;
   redirectUrl;
   onAccept = null;
@@ -2421,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 });
   }
@@ -2445,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));
@@ -2484,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) {
@@ -2504,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;
@@ -2536,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;
@@ -2548,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") {
@@ -2622,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.6.5",
+  "version": "0.7.1",
   "author": "hello@fivenorth.io",
   "main": "dist/index.js",
   "module": "dist/index.js",