@lumiapassport/ui-kit 1.14.0 → 1.14.2

package/README.md

@@ -138,46 +138,13 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
       title: 'Welcome to MyApp',
       subtitle: 'Sign in to continue',
 
-      // beta
-      dialogClassName: 'string',
+      dialogClassName: 'string', // beta
 
       authOrder: ['email', 'passkey', 'social'],
 
       branding: {
         tagline: 'Powered by MPC',
-        link: { text: 'Learn More', url: 'https://example.com/docs' },
-      },
-
-      // TO BE DEPRECATED, cssv is used
-      colors: {
-        dark: {
-          background: '#060117',
-          text: '#fefdff',
-          textSecondary: '#c4c2c7',
-          textMuted: '#8a8890',
-          border: '#2a1a3a',
-          buttonBackground: '#ff6b35',
-          buttonBackgroundEnd: '#f7931e',
-          buttonText: '#ffffff',
-          buttonBackgroundHover: '#e55a2b',
-          buttonBackgroundHoverEnd: '#d67d1a',
-          connectedButtonBackground: 'rgba(27, 90, 226, 0.6)',
-          connectedButtonBorder: '#4a5568'
-        },
-        light: {
-          background: '#fefdff',
-          text: '#060117',
-          textSecondary: '#4a4754',
-          textMuted: '#6b6a70',
-          border: '#e0dde6',
-          buttonBackground: '#9333ea',
-          buttonBackgroundEnd: '#2563eb',
-          buttonText: '#fefdff',
-          buttonBackgroundHover: '#7e22ce',
-          buttonBackgroundHoverEnd: '#1d4ed8',
-          connectedButtonBackground: '#f3f4f6',
-          connectedButtonBorder: '#d1d5db'
-        }
+        link: { text: 'Learn More', url: \'https\:\/\/example.com/docs\' },
       },
     },
 
@@ -234,8 +201,8 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
       name: 'Lumia Beam',
       symbol: 'LUMIA',
       chainId: 2030232745,
-      rpcUrl: 'https://beam-rpc.lumia.org',
-      explorerUrl: 'https://beam-explorer.lumia.org',
+      rpcUrl: 'https\:\/\/beam-rpc.lumia.org',
+      explorerUrl: 'https\:\/\/beam-explorer.lumia.org',
       testnet: true,
     },
   }}

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.14.0</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.14.2</title>
 
     <!-- Styles will be injected by build process -->
     <style>
@@ -64,8 +64,8 @@
         /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; */
         font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
 
-        background: var(--iframe-bg);
-        backdrop-filter: blur(10px);
+        background: #000000;
+        /* backdrop-filter: blur(10px); */
 
         color: var(--iframe-text);
 
@@ -84,21 +84,6 @@
         justify-content: center;
       }
 
-      /* OK */
-      @keyframes details-open {
-        from {
-          max-height: 0;
-        }
-        to {
-          max-height: 148px; /* Adjust as needed based on content size */
-        }
-      }
-
-      /* OK */
-      details[open] > div[data-details-content] {
-        animation: details-open 300ms ease;
-      }
-
       /* Ready Indicator START */
       /* OK */
       .ready-indicator {
@@ -107,6 +92,7 @@
         padding: var(--iframe-pd);
         border-radius: var(--iframe-bdrs);
         max-width: 320px;
+        width: calc(100% - 40px);
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -120,7 +106,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-
         font-size: 20px;
         font-weight: 600;
         width: 64px;
@@ -248,11 +233,11 @@
         left: 0;
         right: 0;
         bottom: 0;
-        /* background: rgba(0, 0, 0, 0.8); */
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 10000;
+        backdrop-filter: blur(10px);
       }
 
       .modal-content {

package/dist/iframe/main.js

@@ -1267,7 +1267,7 @@ var TemplateEngine = class {
 };
 
 // src/iframe/templates/html/authorization.html
-var authorization_default = '<div class="modal-overlay">\n  <div class="modal-content" style="display: flex; flex-direction: column; gap: var(--iframe-gap); align-items: center">\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      <img\n        src="./lumia-logo.svg"\n        alt="Lumia Passport"\n        style="width: 40px; height: 40px; border-radius: 20px; object-fit: cover"\n      />\n\n      <span\n        style="display: block; font-size: var(--iframe-h1-fz); font-weight: var(--iframe-heading-fw); line-height: 150%"\n        >Authorize</span\n      >\n    </div>\n\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      {{#if displayLogo}}\n      <img\n        src="{{displayLogo}}"\n        alt="{{displayName}}"\n        style="width: 32px; height: 32px; border-radius: 16px; object-fit: cover"\n      />\n      {{else}}\n      <span style="font-size: 14px; font-weight: 600">{{displayName}}</span>\n      {{/if}}\n\n      <span\n        style="display: block; font-size: var(--iframe-h2-fz); font-weight: var(--iframe-heading-fw); line-height: 150%"\n        >{{displayName}}</span\n      >\n    </div>\n\n    <div class="domain-info {{domainStatusClass}}" style="font-size: 12px; text-align: center">\n      <span style="font-family: monospace">{{domainStatusIcon}} {{domainStatusText}} {{origin}}</span>\n    </div>\n\n    <!-- Permissions box -->\n    <details style="display: flex; flex-direction: column; width: 100%">\n      <summary\n        style="\n          cursor: pointer;\n          text-align: center;\n          list-style: none;\n          padding: 0 var(--iframe-pd);\n          user-select: none;\n          font-size: 12px;\n          line-height: 20px;\n        "\n      >\n        Show Permissions\n      </summary>\n      <div\n        data-details-content="true"\n        style="\n          width: 100%;\n          padding: var(--iframe-gap);\n          border-radius: var(--iframe-el-bdrs);\n          background: var(--iframe-info);\n          font-size: 10px;\n        "\n      >\n        <div style="margin-bottom: var(--iframe-gap)">\n          <strong>{{displayName}}</strong> by <span class="project-owner">{{displayName}}</span> wants to access your\n          <strong>Lumia Passport</strong> account\n        </div>\n\n        <div style="margin-bottom: var(--iframe-gap)">\n          <strong style="margin-bottom: var(--iframe-gap)">Personal user data</strong>\n          <ul style="list-style: none">\n            <li style="padding-left: var(--iframe-pd)">Wallet address (read-only)</li>\n            <li style="padding-left: var(--iframe-pd)">Public transaction history (read-only)</li>\n          </ul>\n        </div>\n\n        <div style="width: 100%">\n          <strong style="margin-bottom: var(--iframe-gap)">Permissions</strong>\n          <ul style="list-style: none">\n            <li style="padding-left: var(--iframe-pd)">Request transaction signatures</li>\n            <li style="padding-left: var(--iframe-pd)">Initiate blockchain operations</li>\n          </ul>\n        </div>\n      </div>\n    </details>\n\n    {{#if showSecurityWarning}}\n    <div class="security-warning">\n      <strong>\u26A0\uFE0F Warning:</strong> This domain is not verified for {{displayName}}\n      <div>Expected: {{expectedDomains}}</div>\n      <div>Actual: {{origin}}</div>\n    </div>\n    {{else}}\n    <span style="font-size: 10px; color: var(--iframe-text-secondary)"\n      >By continuing you allow the app to use these permissions.</span\n    >\n    {{/if}}\n\n    <!-- Action buttons -->\n    <div style="display: flex; gap: var(--iframe-gap); width: 100%; align-items: center">\n      <button class="cancel-btn">Cancel</button>\n      <button class="authorize-btn" {{authorizeButtonState}}>Continue</button>\n    </div>\n\n    <!-- Footer notice -->\n    <div\n      style="\n        color: var(--iframe-text-secondary);\n        font-size: 10px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        align-items: center;\n        text-align: center;\n      "\n    >\n      <span>Authorizing will redirect to <strong>{{origin}}</strong></span>\n      <span>You can revoke access at any time in your Lumia Passport settings.</span>\n    </div>\n  </div>\n</div>\n';
+var authorization_default = '<div\n  style="\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10000;\n    background: #000000;\n  "\n>\n  <div\n    style="\n      display: flex;\n      flex-direction: column;\n      gap: var(--iframe-gap);\n      align-items: center;\n      background: var(--iframe-modal-bg);\n      border-radius: 20px;\n      padding: 20px;\n      max-width: 320px;\n      width: calc(100% - 40px);\n      max-height: 90vh;\n      overflow-y: auto;\n    "\n  >\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      {{#if userAvatar}}\n      <img\n        src="{{userAvatar}}"\n        alt="{{userName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >U</span\n      >\n      {{/if}}\n\n      <!-- ------------------------------------------------------------ -->\n      <svg\n        xmlns="http://www.w3.org/2000/svg"\n        width="24"\n        height="24"\n        viewBox="0 0 24 24"\n        fill="none"\n        stroke="var(--iframe-text-secondary)"\n        stroke-width="2"\n        stroke-linecap="round"\n        stroke-linejoin="round"\n      >\n        <path d="M5 12h14" />\n        <path d="m12 5 7 7-7 7" />\n      </svg>\n      <!-- ------------------------------------------------------------ -->\n\n      {{#if displayLogo}}\n      <img\n        src="{{displayLogo}}"\n        alt="{{displayName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >A</span\n      >\n      {{/if}}\n    </div>\n\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      <span\n        style="\n          width: fit-content;\n          font-size: var(--iframe-h2-fz);\n          font-weight: var(--iframe-heading-fw);\n          line-height: 150%;\n          text-align: center;\n        "\n        >{{displayName}}</span\n      >\n    </div>\n\n    <div class="domain-info {{domainStatusClass}}">\n      <span style="display: block; width: 100%; font-size: 12px; text-align: center; font-family: monospace"\n        >{{domainStatusIcon}} {{origin}}</span\n      >\n    </div>\n\n    <!-- Permissions box -->\n    <div\n      id="data-auth-permissions-block"\n      aria-expanded="false"\n      style="display: flex; flex-direction: column; width: 100%"\n    >\n      <div\n        id="data-auth-permissions-toggler"\n        style="\n          cursor: pointer;\n          text-align: center;\n          list-style: none;\n          padding: 0 var(--iframe-pd);\n          user-select: none;\n          font-size: 12px;\n          line-height: 20px;\n        "\n      >\n        Show Permissions \u25BC\n      </div>\n\n      <div\n        id="data-auth-permissions-content"\n        style="width: 100%; height: var(--iframe-permissions-h, 0); overflow: hidden; transition: height 300ms ease"\n      >\n        <div\n          style="\n            width: 100%;\n            padding: var(--iframe-gap);\n            border-radius: var(--iframe-el-bdrs);\n            background: var(--iframe-info);\n            font-size: 10px;\n          "\n        >\n          <div style="margin-bottom: var(--iframe-gap)">\n            <strong>{{displayName}}</strong> by <span class="project-owner">{{displayName}}</span> wants to access your\n            <strong>Lumia Passport</strong> account\n          </div>\n\n          <div style="margin-bottom: var(--iframe-gap)">\n            <strong style="margin-bottom: var(--iframe-gap)">Personal user data</strong>\n            <ul style="list-style: none">\n              <li style="padding-left: var(--iframe-pd)">Wallet address (read-only)</li>\n              <li style="padding-left: var(--iframe-pd)">Public transaction history (read-only)</li>\n            </ul>\n          </div>\n\n          <div style="width: 100%">\n            <strong style="margin-bottom: var(--iframe-gap)">Permissions</strong>\n            <ul style="list-style: none">\n              <li style="padding-left: var(--iframe-pd)">Request transaction signatures</li>\n              <li style="padding-left: var(--iframe-pd)">Initiate blockchain operations</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    {{#if showSecurityWarning}}\n    <div class="security-warning">\n      <strong>\u26A0\uFE0F Warning:</strong> This domain is not verified for {{displayName}}\n      <div>Expected: {{expectedDomains}}</div>\n      <div>Actual: {{origin}}</div>\n    </div>\n    {{else}}\n    <span style="display: block; text-align: center; font-size: 10px; color: var(--iframe-text-secondary)"\n      >By continuing you allow the app to use these permissions, you can revoke access at any time.</span\n    >\n    {{/if}}\n\n    <!-- Action buttons -->\n    <div style="display: flex; gap: var(--iframe-gap); width: 100%; align-items: center">\n      <button class="cancel-btn">Cancel</button>\n      <button class="authorize-btn" {{authorizeButtonState}}>Continue</button>\n    </div>\n  </div>\n</div>\n';
 
 // src/iframe/templates/html/ready-indicator.html
 var ready_indicator_default = '<div class="ready-indicator">\n  <div class="status-icon">\u2713</div>\n  <h2>Secure Wallet Ready</h2>\n  <p>Lumia Passport is ready for secure operations</p>\n  <div class="info">\n    <div class="info-row">\n      <strong>Origin:</strong>\n      <span>{{origin}}</span>\n    </div>\n    <div class="info-row">\n      <strong>Status:</strong>\n      <span class="status-active">Active</span>\n    </div>\n    <div class="info-row">\n      <strong>Version:</strong>\n      <span>{{iframeVersion}}</span>\n    </div>\n    <div class="info-row">\n      <strong>Documentation:</strong>\n      <a\n        href="https://docs.lumiapassport.com/"\n        target="_blank"\n        rel="noopener noreferrer"\n        style="color: #667eea; text-decoration: none"\n        >docs.lumiapassport.com</a\n      >\n    </div>\n  </div>\n</div>\n';
@@ -2786,6 +2786,15 @@ var DKGManager = class extends TokenRefreshApiClient {
   }
 };
 
+// src/iframe/lib/onramp/utils.ts
+function omit(object, ...keys) {
+  const result = { ...object };
+  for (const key of keys) {
+    delete result[key];
+  }
+  return result;
+}
+
 // src/iframe/lib/onramp/binance.ts
 var API_DOMAIN = "https://api.lumiapassport.com/on-ramp";
 var BinanceOnrampAPI = class {
@@ -2898,7 +2907,7 @@ var BinanceOnrampAPI = class {
     if (!data || typeof data !== "object") {
       throw new Error(`Invalid payload: expected object, got ${typeof data}`);
     }
-    const payload = data;
+    const payload = omit(data, "accessToken");
     switch (type) {
       case "methods":
         if (typeof payload.totalAmount !== "string") {
@@ -2956,7 +2965,7 @@ var RampnowOnrampAPI = class {
   async getRampnowConfigQuery(accessToken) {
     const response = await fetch(`${API_DOMAIN2}/api/rampnow/cfg`, {
       method: "GET",
-      headers: { ...accessToken && { Authorization: accessToken } }
+      headers: { ...accessToken && { Authorization: `Bearer ${accessToken}` } }
     });
     const data = await response.json();
     return data;
@@ -2964,10 +2973,7 @@ var RampnowOnrampAPI = class {
   async getRampOrderQuoteQuery(payload, accessToken) {
     const response = await fetch(`${API_DOMAIN2}/api/rampnow/quote`, {
       method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...accessToken && { Authorization: accessToken }
-      },
+      headers: { "Content-Type": "application/json", ...accessToken && { Authorization: `Bearer ${accessToken}` } },
       body: JSON.stringify(payload)
     });
     const data = await response.json();
@@ -2980,7 +2986,7 @@ var RampnowOnrampAPI = class {
     if (typeof payload !== "object" || payload === null || typeof payload?.paymentMode !== "string" || typeof payload?.srcAmount !== "number" || typeof payload?.walletAddress !== "string") {
       throw new Error("Invalid Ramp order quote payload");
     }
-    return payload;
+    return omit(payload, "accessToken");
   }
   // UNUSED due to Rampnow APP redirect order flow
   //   async ctreateChekoutOrderMutation(payload: CreateCheckoutOrderMutationPayload) {
@@ -3768,11 +3774,17 @@ var SigningManager = class extends TokenRefreshApiClient {
     }
     let clientState = clientSignStartResult[0];
     const clientMsg1 = clientSignStartResult[1];
-    const serverStartResponse = await this.apiCall("POST", `/api/tss/${userId}/sign/start`, {
-      sessionId,
-      digest32,
-      chainPath: CHAIN_PATH
-    }, projectId, accessToken);
+    const serverStartResponse = await this.apiCall(
+      "POST",
+      `/api/tss/${userId}/sign/start`,
+      {
+        sessionId,
+        digest32,
+        chainPath: CHAIN_PATH
+      },
+      projectId,
+      accessToken
+    );
     const serverMsg1 = serverStartResponse.msg1;
     if (!serverMsg1?.kind || !serverMsg1.data_b64) {
       throw new Error("Invalid server msg1 format");
@@ -3783,10 +3795,16 @@ var SigningManager = class extends TokenRefreshApiClient {
     );
     clientState = clientR2Result[0];
     const clientMsg2 = clientR2Result[1];
-    const serverR2Response = await this.apiCall("POST", `/api/tss/${userId}/sign/round`, {
-      sessionId,
-      clientMsg: clientMsg1
-    }, projectId, accessToken);
+    const serverR2Response = await this.apiCall(
+      "POST",
+      `/api/tss/${userId}/sign/round`,
+      {
+        sessionId,
+        clientMsg: clientMsg1
+      },
+      projectId,
+      accessToken
+    );
     const serverMsg2 = this.extractServerMessage(serverR2Response);
     const clientR3Result = sign_handle(
       JSON.stringify({ bytes_b64: clientState.bytes_b64 }),
@@ -3794,10 +3812,16 @@ var SigningManager = class extends TokenRefreshApiClient {
     );
     clientState = clientR3Result[0];
     const clientMsg3 = clientR3Result[1];
-    const serverR3Response = await this.apiCall("POST", `/api/tss/${userId}/sign/round`, {
-      sessionId,
-      clientMsg: clientMsg2
-    }, projectId, accessToken);
+    const serverR3Response = await this.apiCall(
+      "POST",
+      `/api/tss/${userId}/sign/round`,
+      {
+        sessionId,
+        clientMsg: clientMsg2
+      },
+      projectId,
+      accessToken
+    );
     const serverMsg3 = this.extractServerMessage(serverR3Response);
     const clientFinalResult = sign_handle(
       JSON.stringify({ bytes_b64: clientState.bytes_b64 }),
@@ -3807,10 +3831,16 @@ var SigningManager = class extends TokenRefreshApiClient {
       throw new Error("Invalid final sign_handle result");
     }
     const clientSignature = clientFinalResult[2];
-    await this.apiCall("POST", `/api/tss/${userId}/sign/round`, {
-      sessionId,
-      clientMsg: clientMsg3
-    }, projectId, accessToken);
+    await this.apiCall(
+      "POST",
+      `/api/tss/${userId}/sign/round`,
+      {
+        sessionId,
+        clientMsg: clientMsg3
+      },
+      projectId,
+      accessToken
+    );
     const signature = this.formatSignature(clientSignature);
     return signature;
   }
@@ -3821,7 +3851,16 @@ var SigningManager = class extends TokenRefreshApiClient {
     this.showIframe();
     const metadata = await this.fetchProjectMetadata(projectId);
     return new Promise((resolve) => {
-      const modal = this.createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata, userProfile);
+      const modal = this.createConfirmationModal(
+        userId,
+        projectId,
+        project,
+        origin,
+        transaction,
+        risk,
+        metadata,
+        userProfile
+      );
       const confirmBtn = modal.querySelector(".confirm-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const trustCheckbox = modal.querySelector(".trust-app-checkbox");
@@ -4056,7 +4095,12 @@ var SigningManager = class extends TokenRefreshApiClient {
    * Sign EIP712 typed data with user confirmation
    */
   async signTypedData(userId, projectId, origin, typedData, digest32, accessToken, userProfile) {
-    console.log("[iframe][Sign] EIP712 signing request:", { userId, projectId, origin, primaryType: typedData.primaryType });
+    console.log("[iframe][Sign] EIP712 signing request:", {
+      userId,
+      projectId,
+      origin,
+      primaryType: typedData.primaryType
+    });
     await this.initialize();
     const projectInfo = {
       id: projectId,
@@ -4097,7 +4141,15 @@ var SigningManager = class extends TokenRefreshApiClient {
     this.showIframe();
     const metadata = await this.fetchProjectMetadata(projectId);
     return new Promise((resolve) => {
-      const modal = this.createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata, userProfile);
+      const modal = this.createEIP712ConfirmationModal(
+        userId,
+        projectId,
+        project,
+        origin,
+        typedData,
+        metadata,
+        userProfile
+      );
       const confirmBtn = modal.querySelector(".confirm-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const trustCheckbox = modal.querySelector(".trust-app-checkbox");
@@ -4138,18 +4190,22 @@ var SigningManager = class extends TokenRefreshApiClient {
       }
       return String(value);
     };
-    const messageFields = Object.entries(typedData.message).map(([key, value]) => `
+    const messageFields = Object.entries(typedData.message).map(
+      ([key, value]) => `
         <div class="eip712-field">
           <div class="field-name">${key}:</div>
           <div class="field-value">${formatFieldValue(value)}</div>
         </div>
-      `).join("");
-    const domainFields = Object.entries(typedData.domain).filter(([_, value]) => value !== void 0).map(([key, value]) => `
+      `
+    ).join("");
+    const domainFields = Object.entries(typedData.domain).filter(([_, value]) => value !== void 0).map(
+      ([key, value]) => `
         <div class="eip712-field">
           <div class="field-name">${key}:</div>
           <div class="field-value">${formatFieldValue(value)}</div>
         </div>
-      `).join("");
+      `
+    ).join("");
     modal.innerHTML = `
       <div class="modal-overlay">
         <div class="modal-content eip712-modal">
@@ -4230,7 +4286,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.14.0";
+var IFRAME_VERSION = "1.14.2";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
@@ -4247,34 +4303,6 @@ var IframeWallet = class {
     this.binance = new BinanceOnrampAPI(this.messenger.sendResponse.bind(this.messenger));
     this.rampnow = new RampnowOnrampAPI(this.messenger.sendResponse.bind(this.messenger));
   }
-  // private applyThemeColors(): void {
-  //   try {
-  //     const params = new URLSearchParams(window.location.search)
-  //     const bg = params.get('bg')
-  //     const text = params.get('text')
-  //     const textSec = params.get('textSec')
-  //     const border = params.get('border')
-  //     if (bg || text || textSec || border) {
-  //       const root = document.documentElement
-  //       if (bg) {
-  //         root.style.setProperty('--iframe-bg', bg)
-  //         root.style.setProperty('--iframe-modal-bg', bg)
-  //       }
-  //       if (text) {
-  //         root.style.setProperty('--iframe-text', text)
-  //       }
-  //       if (textSec) {
-  //         root.style.setProperty('--iframe-text-secondary', textSec)
-  //       }
-  //       if (border) {
-  //         root.style.setProperty('--iframe-border', border)
-  //       }
-  //       console.log('[IframeWallet] Applied theme colors:', { bg, text, textSec, border })
-  //     }
-  //   } catch (error) {
-  //     console.warn('[IframeWallet] Failed to apply theme colors:', error)
-  //   }
-  // }
   async initialize() {
     if (window.location.hostname !== "localhost" && window.location.hostname !== "127.0.0.1" && !window.location.hostname.includes("lumiapassport.com")) {
       console.warn("[iframe] \u26A0\uFE0F Running on unexpected origin!");
@@ -4910,6 +4938,22 @@ var IframeWallet = class {
     this.displayReadyIndicator();
   }
 };
+function toggleAuthPermissions(e) {
+  const isToggler = e.target.id === "data-auth-permissions-toggler";
+  if (!isToggler) return;
+  const details = document.getElementById("data-auth-permissions-block");
+  const isOpen = details.hasAttribute("aria-expanded") && details.getAttribute("aria-expanded") === "true";
+  const toggler = details.querySelector("#data-auth-permissions-toggler");
+  if (isOpen) {
+    details.setAttribute("aria-expanded", "false");
+    details.style.setProperty("--iframe-permissions-h", "0px");
+    toggler.innerHTML = "Show Permissions \u25BC";
+  } else {
+    details.setAttribute("aria-expanded", "true");
+    details.style.setProperty("--iframe-permissions-h", "148px");
+    toggler.innerHTML = "Hide Permissions \u25B2";
+  }
+}
 function initWallet() {
   const wallet = new IframeWallet();
   wallet.initialize().catch((error) => {
@@ -4925,6 +4969,7 @@ function initWallet() {
       `;
     }
   });
+  document.addEventListener("click", toggleAuthPermissions);
 }
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", initWallet);