@fivenorth/loop-sdk 0.8.0 → 0.10.0

package/README.md

@@ -142,6 +142,7 @@ try {
     const result = await provider.submitTransaction(damlCommand, {
         // Optional: show a custom message in the wallet prompt
         message: 'Transfer 10 CC to RetailStore',
+        estimateTraffic: true, // optional: return estimated traffic in submission response
     });
     console.log('Transaction successful:', result);
 } catch (error) {
@@ -149,7 +150,23 @@ try {
 }
 ```
 
-Transaction responses include `command_id`, `submission_id`, `transaction_data`, and `update_id` when available. For token transfers, `update_id` may arrive later (once indexed), in which case `onTransactionUpdate` fires with the finalized `update_id`. Non-transfer transactions do not receive an `update_id` via this mechanism.
+`onTransactionUpdate` fires once per transaction with a single payload that includes `command_id` and `submission_id`. On success it also includes `update_id` and `update_data` (ledger transaction tree); on failure it includes `status: "failed"` and `error.error_message`.
+
+`submitTransaction` is the default async path. It returns the submission result first (including `command_id` and `submission_id`), then the ledger update arrives later via `onTransactionUpdate` with `update_id` and `update_data`.
+
+To wait for the transaction result directly (opt-in), use:
+
+```javascript
+await provider.submitAndWaitForTransaction(damlCommand, {
+    message: 'Transfer 10 CC to RetailStore',
+});
+```
+
+In wait mode, the final result is returned as a single `onTransactionUpdate` payload (command/submission IDs plus update data or failure status).
+
+Note: `submitAndWaitForTransaction` errors do not always mean the transaction failed. A 4xx error (e.g., 400) indicates a definite failure. A 5xx/timeout can mean the ledger is slow or backed up; the transaction may still be committed later, so clients should continue to listen for updates rather than assume failure.
+
+Deduplication: both async execute and execute-and-wait use a 1 hour deduplication window. If you retry within that window, resubmit the same `command_id` and `submission_id` so the request is idempotent.
 
 #### Sign a Message
 
@@ -170,18 +187,19 @@ try {
 ```javascript
 await loop.wallet.transfer(
   'receiver::fingerprint',
-  '5', // amount (string or number)
+  '5', 
   {
-    // Optional overrides. Defaults to Amulet/DSO if omitted.
-    instrument_admin: 'issuer::fingerprint', // optional
-    instrument_id: 'Amulet',                 // optional
+    instrument_admin: 'issuer::fingerprint', // optional: DSO (default)
+    instrument_id: 'Amulet',                 // optional: Amulet (default)
   },
   {
-    // Optional: show a custom message in the wallet prompt
-    message: 'Send 5 CC to Alice',
+    message: 'Send 5 CC to Alice', // optional: show a custom message in the wallet prompt
+    memo: 'optional memo for the transfer',   // optional: stored as transfer metadata
+    executionMode: 'wait',                   // optional: 'async' (default) or 'wait'
     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
+    estimateTraffic: true,                   // optional: return estimated traffic in submission response
   },
 );
 ```
@@ -189,7 +207,6 @@ await loop.wallet.transfer(
 Notes:
 - You must have spendable holdings for the specified instrument (admin + id). If left blank, the SDK defaults to the native token.
 - The helper handles fetching holdings, building the transfer factory payload, and submitting via Wallet Connect.
-- Requests time out after 5 minutes by default; override with `requestTimeout` in milliseconds.
 
 Common instrument overrides (pass into the `instrument` argument above):
 

package/dist/index.js

@@ -2204,6 +2204,9 @@ class Connection {
     if (params.execute_before) {
       payload.execute_before = params.execute_before;
     }
+    if (params.memo) {
+      payload.memo = params.memo;
+    }
     const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/transfer`, {
       method: "POST",
       headers: {
@@ -2375,7 +2378,11 @@ class Provider {
   }
   handleResponse(message) {
     console.log("Received response:", message);
-    if (message?.type === "transaction_completed" /* TRANSACTION_COMPLETED */ && message?.payload?.update_id) {
+    if (message?.type === "transaction_completed" /* TRANSACTION_COMPLETED */ && (message?.payload?.update_id || message?.payload?.update_data || message?.payload?.status)) {
+      if (message?.payload?.error_message) {
+        message.payload.error = { error_message: message.payload.error_message };
+        delete message.payload.error_message;
+      }
       this.hooks?.onTransactionUpdate?.(message.payload, message);
     }
     if (message.request_id) {
@@ -2392,11 +2399,16 @@ class Provider {
     return this.connection.getActiveContracts(this.auth_token, params);
   }
   async submitTransaction(payload, options) {
-    return this.sendRequest("run_transaction" /* RUN_TRANSACTION */, payload, options);
+    const requestPayload = options?.estimateTraffic ? { ...payload, estimate_traffic: true } : payload;
+    return this.sendRequest("run_transaction" /* RUN_TRANSACTION */, requestPayload, options);
+  }
+  async submitAndWaitForTransaction(payload, options) {
+    const requestPayload = options?.estimateTraffic ? { ...payload, estimateTraffic: true } : payload;
+    return this.sendRequest("run_transaction" /* RUN_TRANSACTION */, { ...requestPayload, execution_mode: "wait" }, options);
   }
   async transfer(recipient, amount, instrument, options) {
     const amountStr = typeof amount === "number" ? amount.toString() : amount;
-    const { requestedAt, executeBefore, requestTimeout } = options || {};
+    const { requestedAt, executeBefore, requestTimeout, estimateTraffic, memo } = options || {};
     const message = options?.message;
     const resolveDate = (value, fallbackMs) => {
       if (value instanceof Date) {
@@ -2422,15 +2434,19 @@ class Provider {
       requested_at: requestedAtIso,
       execute_before: executeBeforeIso
     };
+    if (memo) {
+      transferRequest.memo = memo;
+    }
     const preparedPayload = await this.connection.prepareTransfer(this.auth_token, transferRequest);
-    return this.submitTransaction({
+    const submitFn = options?.executionMode === "wait" ? this.submitAndWaitForTransaction.bind(this) : this.submitTransaction.bind(this);
+    return submitFn({
       commands: preparedPayload.commands,
       disclosedContracts: preparedPayload.disclosedContracts,
       packageIdSelectionPreference: preparedPayload.packageIdSelectionPreference,
       actAs: preparedPayload.actAs,
       readAs: preparedPayload.readAs,
       synchronizerId: preparedPayload.synchronizerId
-    }, { requestTimeout, message });
+    }, { requestTimeout, message, estimateTraffic });
   }
   async signMessage(message) {
     return this.sendRequest("sign_raw_message" /* SIGN_RAW_MESSAGE */, message);
@@ -2942,28 +2958,31 @@ class LoopSDK {
 			.loop-connect {
 				position: fixed;
 				inset: 0;
-				background: oklch(0.222 0 0 / 0.85);
+				background: rgba(0, 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;
+				font-family: "Inter", 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;
+				background: #080808;
+				box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
+				border-radius: 40px;
+				border: none;
+				width: 340px;
+				height: 534px;
+				box-sizing: border-box;
+				padding: 32px;
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				gap: 16px;
-				color: oklch(0.975 0.005 280);
+				gap: 0;
+				color: #ffffff;
 			}
 			.loop-connect .bg-logo {
 				position: absolute;
@@ -2975,56 +2994,89 @@ class LoopSDK {
 				pointer-events: none;
 			}
 			.loop-connect h3 {
+				position: absolute;
+				top: 32px;
+				left: 32px;
+				right: 32px;
 				margin: 0;
 				font-size: 18px;
-				font-weight: 600;
-				letter-spacing: -0.015em;
+				font-weight: 700;
+				line-height: 27px;
+				letter-spacing: -0.45px;
+				text-align: center;
 			}
 			.loop-connect figure {
+				position: absolute;
+				top: 91px;
+				left: 32px;
+				width: 276px;
+				height: 276px;
 				margin: 0;
-				background: oklch(1 0 0);
-				padding: 8px;
-				border-radius: 24px;
+				background: #ffffff;
+				padding: 20px;
+				border-radius: 8px;
 				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);
+				border: none;
+				box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+				box-sizing: border-box;
 			}
 			.loop-connect img {
 				display: block;
-				width: 225px;
-				height: 225px;
+				width: 236px;
+				height: 236px;
+				object-fit: contain;
+				border-radius: 12px;
 			}
 			.loop-connect .divider {
-				width: 100%;
+				position: absolute;
+				top: 399px;
+				left: 36px;
+				right: 36px;
+				width: auto;
 				display: flex;
 				align-items: center;
-				gap: 16px;
-				color: oklch(0.554 0.012 280.3);
-				font-size: 13px;
-				font-weight: 600;
+				justify-content: center;
+				gap: 12px;
+				color: #64748b;
+				font-size: 11px;
+				font-weight: 700;
+				letter-spacing: 0.15em;
+				text-transform: uppercase;
+				text-align: center;
 			}
 			.loop-connect .divider::before,
 			.loop-connect .divider::after {
 				content: "";
 				flex: 1;
 				height: 1px;
-				background: oklch(0.45 0.01 278);
+				background: #1e293b;
 			}
 			.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;
+				position: absolute;
+				top: 447.5px;
+				left: 32px;
+				right: 32px;
+				background: #f2ff96;
+				border: none;
+				color: #0f172a;
+				text-align: center;
+				font-family: "Inter", system-ui, -apple-system, sans-serif;
+				font-style: normal;
+				padding: 0 24px;
+				border-radius: 8px;
 				font-size: 15px;
 				font-weight: 600;
+				line-height: 22.5px;
 				cursor: pointer;
 				transition: all 0.2s ease;
-				width: 100%;
+				width: auto;
+				height: 54.5px;
+				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
+					0 4px 6px -4px rgba(0, 0, 0, 0.2);
 			}
 			.loop-connect button:hover {
-				background: oklch(0.98 0.105 112.5);
+				background: #f6ffb4;
 			}
 			@keyframes fadeIn {
 				from { opacity: 0; }
@@ -3035,7 +3087,7 @@ class LoopSDK {
   }
   showQrCode(url) {
     this.injectModalStyles();
-    import_qrcode.default.toDataURL(url, (err, dataUrl) => {
+    import_qrcode.default.toDataURL(url, { margin: 0 }, (err, dataUrl) => {
       if (err) {
         console.error("Failed to generate QR code", err);
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fivenorth/loop-sdk",
-	"version": "0.8.0",
+	"version": "0.10.0",
 	"author": "support@fivenorth.io",
 	"main": "dist/index.js",
 	"module": "dist/index.js",