@fivenorth/loop-sdk 0.9.0 → 0.11.0

package/dist/index.js

@@ -2,6 +2,7 @@ var __create = Object.create;
 var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __toESM = (mod, isNodeMode, target) => {
   target = mod != null ? __create(__getProtoOf(mod)) : {};
@@ -14,7 +15,38 @@ var __toESM = (mod, isNodeMode, target) => {
       });
   return to;
 };
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // node_modules/qrcode/lib/can-promise.js
 var require_can_promise = __commonJS((exports, module) => {
@@ -2092,229 +2124,6 @@ function isUnauthCode(code) {
   return UNAUTH_CODES.has(code);
 }
 
-// src/connection.ts
-class Connection {
-  walletUrl = "https://cantonloop.com";
-  apiUrl = "https://cantonloop.com";
-  ws = null;
-  network = "main";
-  ticketId = null;
-  onMessageHandler = null;
-  reconnectPromise = null;
-  status = "disconnected";
-  constructor({ network, walletUrl, apiUrl }) {
-    this.network = network || "main";
-    switch (this.network) {
-      case "local":
-        this.walletUrl = "http://localhost:3000";
-        this.apiUrl = "http://localhost:8080";
-        break;
-      case "devnet":
-      case "dev":
-        this.walletUrl = "https://devnet.cantonloop.com";
-        this.apiUrl = "https://devnet.cantonloop.com";
-        break;
-      case "testnet":
-      case "test":
-        this.walletUrl = "https://testnet.cantonloop.com";
-        this.apiUrl = "https://testnet.cantonloop.com";
-        break;
-      case "mainnet":
-      case "main":
-        this.walletUrl = "https://cantonloop.com";
-        this.apiUrl = "https://cantonloop.com";
-        break;
-    }
-    if (walletUrl) {
-      this.walletUrl = walletUrl;
-    }
-    if (apiUrl) {
-      this.apiUrl = apiUrl;
-    }
-  }
-  connectInProgress() {
-    return this.status === "connecting" || this.status === "connected";
-  }
-  async getTicket(appName, sessionId, version) {
-    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/tickets`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        app_name: appName,
-        session_id: sessionId,
-        version
-      })
-    });
-    if (!response.ok) {
-      throw new Error("Failed to get ticket from server.");
-    }
-    return response.json();
-  }
-  async getHolding(authToken) {
-    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/account/holding`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`
-      }
-    });
-    if (!response.ok) {
-      throw new Error("Failed to get holdings.");
-    }
-    return response.json();
-  }
-  async getActiveContracts(authToken, params) {
-    const url = new URL(`${this.apiUrl}/api/v1/.connect/pair/account/active-contracts`);
-    if (params?.templateId) {
-      url.searchParams.append("templateId", params.templateId);
-    }
-    if (params?.interfaceId) {
-      url.searchParams.append("interfaceId", params.interfaceId);
-    }
-    const response = await fetch(url.toString(), {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`
-      }
-    });
-    if (!response.ok) {
-      throw new Error("Failed to get active contracts.");
-    }
-    return response.json();
-  }
-  async prepareTransfer(authToken, params) {
-    const payload = {
-      recipient: params.recipient,
-      amount: params.amount
-    };
-    if (params.instrument) {
-      if (params.instrument.instrument_admin) {
-        payload.instrument_admin = params.instrument.instrument_admin;
-      }
-      if (params.instrument.instrument_id) {
-        payload.instrument_id = params.instrument.instrument_id;
-      }
-    }
-    if (params.requested_at) {
-      payload.requested_at = params.requested_at;
-    }
-    if (params.execute_before) {
-      payload.execute_before = params.execute_before;
-    }
-    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/transfer`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`
-      },
-      body: JSON.stringify(payload)
-    });
-    if (!response.ok) {
-      throw new Error("Failed to prepare transfer.");
-    }
-    const data = await response.json();
-    return data.payload;
-  }
-  async verifySession(authToken) {
-    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/account`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`
-      }
-    });
-    if (!response.ok) {
-      if (response.status === 401 || response.status === 403) {
-        throw new UnauthorizedError;
-      }
-      throw new Error(`Session verification failed with status ${response.status}.`);
-    }
-    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,
-      email,
-      has_preapproval: data?.has_preapproval,
-      has_merge_delegation: data?.has_merge_delegation,
-      usdc_bridge_access: data?.usdc_bridge_access
-    };
-    return account;
-  }
-  connectWebSocket(ticketId, onMessage) {
-    if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING) && this.ticketId !== ticketId) {
-      this.ws.close();
-      this.ws = null;
-    }
-    if (this.status === "connecting" || this.status === "connected") {
-      return;
-    }
-    this.onMessageHandler = onMessage;
-    this.ticketId = ticketId;
-    this.status = "connecting";
-    this.attachWebSocket(ticketId, onMessage);
-  }
-  reconnect() {
-    if (!this.ticketId || !this.onMessageHandler) {
-      return Promise.reject(new Error("Cannot reconnect without a known ticket."));
-    }
-    return 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."));
-      });
-    });
-  }
-  websocketUrl(ticketId) {
-    return `${this.network === "local" ? "ws" : "wss"}://${this.apiUrl.replace("https://", "").replace("http://", "")}/api/v1/.connect/pair/ws/${encodeURIComponent(ticketId)}`;
-  }
-  attachWebSocket(ticketId, onMessage, onOpen, onError, onClose) {
-    const wsUrl = this.websocketUrl(ticketId);
-    const ws = new WebSocket(wsUrl);
-    ws.onmessage = onMessage;
-    ws.onopen = () => {
-      this.status = "connected";
-      console.log("[LoopSDK] Connected to ticket server.");
-      onOpen?.();
-    };
-    ws.onclose = (event) => {
-      this.status = "disconnected";
-      if (this.ws === ws) {
-        this.ws = null;
-      }
-      console.log("[LoopSDK] Disconnected from ticket server.");
-      onClose?.(event);
-    };
-    ws.onerror = (event) => {
-      this.status = "disconnected";
-      ws.close();
-      if (this.ws === ws) {
-        this.ws = null;
-      }
-      onError?.(event);
-    };
-    this.ws = ws;
-  }
-}
-
 // src/types.ts
 var MessageType;
 ((MessageType2) => {
@@ -2396,14 +2205,18 @@ 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;
+    const executionMode = options?.executionMode;
+    const finalPayload = executionMode === "wait" ? { ...requestPayload, execution_mode: "wait" } : requestPayload;
+    return this.sendRequest("run_transaction" /* RUN_TRANSACTION */, finalPayload, options);
   }
   async submitAndWaitForTransaction(payload, options) {
-    return this.sendRequest("run_transaction" /* RUN_TRANSACTION */, { ...payload, execution_mode: "wait" }, options);
+    const requestPayload = options?.estimateTraffic ? { ...payload, estimate_traffic: 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) {
@@ -2429,6 +2242,9 @@ class Provider {
       requested_at: requestedAtIso,
       execute_before: executeBeforeIso
     };
+    if (memo) {
+      transferRequest.memo = memo;
+    }
     const preparedPayload = await this.connection.prepareTransfer(this.auth_token, transferRequest);
     const submitFn = options?.executionMode === "wait" ? this.submitAndWaitForTransaction.bind(this) : this.submitTransaction.bind(this);
     return submitFn({
@@ -2438,7 +2254,7 @@ class Provider {
       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);
@@ -2551,6 +2367,283 @@ class Provider {
   }
 }
 
+// src/connection.ts
+class Connection {
+  walletUrl = "https://cantonloop.com";
+  apiUrl = "https://cantonloop.com";
+  ws = null;
+  network = "main";
+  ticketId = null;
+  onMessageHandler = null;
+  reconnectPromise = null;
+  status = "disconnected";
+  constructor({ network, walletUrl, apiUrl }) {
+    this.network = network || "main";
+    switch (this.network) {
+      case "local":
+        this.walletUrl = "http://localhost:3000";
+        this.apiUrl = "http://localhost:8080";
+        break;
+      case "devnet":
+      case "dev":
+        this.walletUrl = "https://devnet.cantonloop.com";
+        this.apiUrl = "https://devnet.cantonloop.com";
+        break;
+      case "testnet":
+      case "test":
+        this.walletUrl = "https://testnet.cantonloop.com";
+        this.apiUrl = "https://testnet.cantonloop.com";
+        break;
+      case "mainnet":
+      case "main":
+        this.walletUrl = "https://cantonloop.com";
+        this.apiUrl = "https://cantonloop.com";
+        break;
+    }
+    if (walletUrl) {
+      this.walletUrl = walletUrl;
+    }
+    if (apiUrl) {
+      this.apiUrl = apiUrl;
+    }
+  }
+  connectInProgress() {
+    return this.status === "connecting" || this.status === "connected";
+  }
+  async getTicket(appName, sessionId, version) {
+    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/tickets`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        app_name: appName,
+        session_id: sessionId,
+        version
+      })
+    });
+    if (!response.ok) {
+      throw new Error("Failed to get ticket from server.");
+    }
+    return response.json();
+  }
+  async getHolding(authToken) {
+    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/account/holding`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${authToken}`
+      }
+    });
+    if (!response.ok) {
+      throw new Error("Failed to get holdings. " + await response.text());
+    }
+    return response.json();
+  }
+  async getActiveContracts(authToken, params) {
+    const url = new URL(`${this.apiUrl}/api/v1/.connect/pair/account/active-contracts`);
+    if (params?.templateId) {
+      url.searchParams.append("templateId", params.templateId);
+    }
+    if (params?.interfaceId) {
+      url.searchParams.append("interfaceId", params.interfaceId);
+    }
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${authToken}`
+      }
+    });
+    if (!response.ok) {
+      throw new Error("Failed to get active contracts.");
+    }
+    return response.json();
+  }
+  async prepareTransfer(authToken, params) {
+    const payload = {
+      recipient: params.recipient,
+      amount: params.amount
+    };
+    if (params.instrument) {
+      if (params.instrument.instrument_admin) {
+        payload.instrument_admin = params.instrument.instrument_admin;
+      }
+      if (params.instrument.instrument_id) {
+        payload.instrument_id = params.instrument.instrument_id;
+      }
+    }
+    if (params.requested_at) {
+      payload.requested_at = params.requested_at;
+    }
+    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: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${authToken}`
+      },
+      body: JSON.stringify(payload)
+    });
+    if (!response.ok) {
+      console.error("Failed to prepare transfer.", await response.text());
+      throw new Error("Failed to prepare transfer.");
+    }
+    const data = await response.json();
+    return data.payload;
+  }
+  async verifySession(authToken) {
+    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/account`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${authToken}`
+      }
+    });
+    if (!response.ok) {
+      if (response.status === 401 || response.status === 403) {
+        throw new UnauthorizedError;
+      }
+      throw new Error(`Session verification failed with status ${response.status}.`);
+    }
+    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,
+      email,
+      has_preapproval: data?.has_preapproval,
+      has_merge_delegation: data?.has_merge_delegation,
+      usdc_bridge_access: data?.usdc_bridge_access
+    };
+    return account;
+  }
+  connectWebSocket(ticketId, onMessage) {
+    if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING) && this.ticketId !== ticketId) {
+      this.ws.close();
+      this.ws = null;
+    }
+    if (this.status === "connecting" || this.status === "connected") {
+      return;
+    }
+    this.onMessageHandler = onMessage;
+    this.ticketId = ticketId;
+    this.status = "connecting";
+    this.attachWebSocket(ticketId, onMessage);
+  }
+  reconnect() {
+    if (!this.ticketId || !this.onMessageHandler) {
+      return Promise.reject(new Error("Cannot reconnect without a known ticket."));
+    }
+    return 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."));
+      });
+    });
+  }
+  async exchangeApiKey({ publicKey, signature, epoch }) {
+    const response = await fetch(`${this.apiUrl}/api/v1/.connect/pair/apikey`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        public_key: publicKey,
+        signature,
+        epoch
+      })
+    });
+    if (!response.ok) {
+      throw new Error("Failed to get API key from server.");
+    }
+    return response.json();
+  }
+  prepareTransaction(session, params) {
+    return fetch(`${this.apiUrl}/api/v1/.connect/tickets/prepare-transaction`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${session.userApiKey}`
+      },
+      body: JSON.stringify({
+        payload: params,
+        ticket_id: session.ticketId
+      })
+    }).then((response) => response.json());
+  }
+  async executeTransaction(session, params) {
+    if (!session.ticketId) {
+      throw new Error("Ticket ID is required");
+    }
+    const resp = fetch(`${this.apiUrl}/api/v1/.connect/tickets/execute-transaction`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${session.userApiKey}`
+      },
+      body: JSON.stringify({
+        ticket_id: session.ticketId,
+        request_id: generateRequestId(),
+        command_id: params.command_id,
+        signature: params.signature,
+        transaction_data: params.transaction_data
+      })
+    });
+    return (await resp).json();
+  }
+  websocketUrl(ticketId) {
+    return `${this.network === "local" ? "ws" : "wss"}://${this.apiUrl.replace("https://", "").replace("http://", "")}/api/v1/.connect/pair/ws/${encodeURIComponent(ticketId)}`;
+  }
+  attachWebSocket(ticketId, onMessage, onOpen, onError, onClose) {
+    const wsUrl = this.websocketUrl(ticketId);
+    const ws = new WebSocket(wsUrl);
+    ws.onmessage = onMessage;
+    ws.onopen = () => {
+      this.status = "connected";
+      console.log("[LoopSDK] Connected to ticket server.");
+      onOpen?.();
+    };
+    ws.onclose = (event) => {
+      this.status = "disconnected";
+      if (this.ws === ws) {
+        this.ws = null;
+      }
+      console.log("[LoopSDK] Disconnected from ticket server.");
+      onClose?.(event);
+    };
+    ws.onerror = (event) => {
+      this.status = "disconnected";
+      ws.close();
+      if (this.ws === ws) {
+        this.ws = null;
+      }
+      onError?.(event);
+    };
+    this.ws = ws;
+  }
+}
+
 // src/session.ts
 var STORAGE_KEY_LOOP_CONNECT = "loop_connect";
 
@@ -2561,14 +2654,16 @@ class SessionInfo {
   partyId;
   publicKey;
   email;
+  userApiKey;
   _isAuthorized = false;
-  constructor({ sessionId, ticketId, authToken, partyId, publicKey, email }) {
+  constructor({ sessionId, ticketId, authToken, partyId, publicKey, email, userApiKey }) {
     this.sessionId = sessionId;
     this.ticketId = ticketId;
     this.authToken = authToken;
     this.partyId = partyId;
     this.publicKey = publicKey;
     this.email = email;
+    this.userApiKey = userApiKey;
   }
   setTicketId(ticketId) {
     this.ticketId = ticketId;
@@ -2950,28 +3045,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;
@@ -2983,56 +3081,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; }
@@ -3043,7 +3174,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;