@lukso/up-connector 0.4.0-dev.a8c9315

package/dist/chunk-GFVUWAG4.cjs

@@ -0,0 +1,158 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkXOKG3KILcjs = require('./chunk-XOKG3KIL.cjs');
+
+
+var _chunkZBDE64SDcjs = require('./chunk-ZBDE64SD.cjs');
+
+// src/account-modal.ts
+var _lit = require('lit');
+var _decoratorsjs = require('lit/decorators.js');
+require('@lukso/web-components/dist/components/lukso-modal');
+require('@lukso/web-components/dist/components/lukso-button');
+var AccountModal = class extends _chunkXOKG3KILcjs.CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.theme = "auto";
+    this.address = "";
+    this.connectorName = "";
+  }
+  close() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+  handleDisconnect() {
+    this.dispatchEvent(new CustomEvent("disconnect"));
+    this.close();
+  }
+  getChainName() {
+    switch (this.chainId) {
+      case 42:
+        return "LUKSO Mainnet";
+      case 4201:
+        return "LUKSO Testnet";
+      default:
+        return this.chainId ? `Chain ${this.chainId}` : "Unknown Network";
+    }
+  }
+  render() {
+    return _lit.html`
+      <lukso-modal
+        ?is-open=${this.open}
+        size="small"
+        @on-backdrop-click=${this.close}
+      >
+        <div class="p-6">
+          <!-- Header with close button -->
+          <div class="flex justify-between items-center mb-6">
+            <h2 class="text-xl font-semibold">Connected Account</h2>
+            <button
+              @click=${this.close}
+              class="text-neutral-50 hover:text-neutral-20 transition-colors"
+              aria-label="Close"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Connection Status -->
+          <div class="flex items-center gap-2 mb-5">
+            <div
+              class="w-2 h-2 rounded-full"
+              style="background: #10b981;"
+            ></div>
+            <span class="text-sm font-semibold" style="color: #10b981;">
+              Connected
+            </span>
+          </div>
+
+          <!-- Address -->
+          <div
+            class="mb-4 p-3 rounded-lg bg-neutral-98 border border-neutral-90"
+          >
+            <div
+              class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
+            >
+              Address
+            </div>
+            <div
+              class="text-xs font-mono text-neutral-20 break-all leading-relaxed"
+            >
+              ${this.address}
+            </div>
+          </div>
+
+          <!-- Network & Connector Info -->
+          <div class="grid grid-cols-2 gap-3 mb-5">
+            <div class="p-3 rounded-lg bg-neutral-98 border border-neutral-90">
+              <div
+                class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
+              >
+                Network
+              </div>
+              <div class="text-sm font-semibold text-neutral-20">
+                ${this.getChainName()}
+              </div>
+            </div>
+
+            <div class="p-3 rounded-lg bg-neutral-98 border border-neutral-90">
+              <div
+                class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
+              >
+                Connector
+              </div>
+              <div class="text-sm font-semibold text-neutral-20">
+                ${this.connectorName || "Unknown"}
+              </div>
+            </div>
+          </div>
+
+          <!-- Disconnect Button -->
+          <lukso-button
+            variant="danger"
+            is-full-width
+            @click=${this.handleDisconnect}
+          >
+            Disconnect
+          </lukso-button>
+        </div>
+      </lukso-modal>
+    `;
+  }
+};
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: Boolean, reflect: true })
+], AccountModal.prototype, "open", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: String })
+], AccountModal.prototype, "theme", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: String })
+], AccountModal.prototype, "address", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: Number })
+], AccountModal.prototype, "chainId", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: String })
+], AccountModal.prototype, "connectorName", 2);
+AccountModal = exports.AccountModal = _chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.customElement.call(void 0, "account-modal")
+], AccountModal);
+
+
+
+exports.AccountModal = AccountModal;
+//# sourceMappingURL=chunk-GFVUWAG4.cjs.map

package/dist/chunk-GFVUWAG4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/up-connector/dist/chunk-GFVUWAG4.cjs","../src/account-modal.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACAA,0BAAqB;AACrB,iDAAwC;AAIxC,6DAAO;AACP,8DAAO;AAGA,IAAM,aAAA,EAAN,MAAA,QAA2B,iCAAe;AAAA,EAA1C,WAAA,CAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAEuC,IAAA,IAAA,CAAA,KAAA,EAAO,KAAA;AACvB,IAAA,IAAA,CAAA,MAAA,EAAmC,MAAA;AACnC,IAAA,IAAA,CAAA,QAAA,EAAU,EAAA;AAEV,IAAA,IAAA,CAAA,cAAA,EAAgB,EAAA;AAAA,EAAA;AAAA,EAEpC,KAAA,CAAA,EAAQ;AACd,IAAA,IAAA,CAAK,KAAA,EAAO,KAAA;AACZ,IAAA,IAAA,CAAK,aAAA,CAAc,IAAI,WAAA,CAAY,OAAO,CAAC,CAAA;AAAA,EAC7C;AAAA,EAEQ,gBAAA,CAAA,EAAmB;AACzB,IAAA,IAAA,CAAK,aAAA,CAAc,IAAI,WAAA,CAAY,YAAY,CAAC,CAAA;AAChD,IAAA,IAAA,CAAK,KAAA,CAAM,CAAA;AAAA,EACb;AAAA,EAEQ,YAAA,CAAA,EAAuB;AAC7B,IAAA,OAAA,CAAQ,IAAA,CAAK,OAAA,EAAS;AAAA,MACpB,KAAK,EAAA;AACH,QAAA,OAAO,eAAA;AAAA,MACT,KAAK,IAAA;AACH,QAAA,OAAO,eAAA;AAAA,MACT,OAAA;AACE,QAAA,OAAO,IAAA,CAAK,QAAA,EAAU,CAAA,MAAA,EAAS,IAAA,CAAK,OAAO,CAAA,EAAA;AAC/C,IAAA;AACF,EAAA;AAES,EAAA;AACA,IAAA;AAAA;AAEiB,iBAAA;AAAA;AAEW,2BAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAON,qBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CL,cAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaS,gBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWY,gBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASP,mBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAOxC,EAAA;AACF;AA3H8C;AAAF,EAAA;AAAE;AAChB;AAAF,EAAA;AAAE;AACA;AAAF,EAAA;AAAE;AACA;AAAF,EAAA;AAAE;AACA;AAAF,EAAA;AAAE;AANvB;AADuB,EAAA;AACjB;ADyIuC;AACA;AACA;AACA","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/up-connector/dist/chunk-GFVUWAG4.cjs","sourcesContent":[null,"/**\n * Account Modal - Lit Component\n *\n * Framework-agnostic account management modal showing connected wallet details.\n * Uses lukso-modal from @lukso/web-components for consistent UI.\n */\n\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { CoreLitElement } from './styles'\n\n// Import lukso web components\nimport '@lukso/web-components/dist/components/lukso-modal'\nimport '@lukso/web-components/dist/components/lukso-button'\n\n@customElement('account-modal')\nexport class AccountModal extends CoreLitElement {\n  // Public properties\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'\n  @property({ type: String }) address = ''\n  @property({ type: Number }) chainId?: number\n  @property({ type: String }) connectorName = ''\n\n  private close() {\n    this.open = false\n    this.dispatchEvent(new CustomEvent('close'))\n  }\n\n  private handleDisconnect() {\n    this.dispatchEvent(new CustomEvent('disconnect'))\n    this.close()\n  }\n\n  private getChainName(): string {\n    switch (this.chainId) {\n      case 42:\n        return 'LUKSO Mainnet'\n      case 4201:\n        return 'LUKSO Testnet'\n      default:\n        return this.chainId ? `Chain ${this.chainId}` : 'Unknown Network'\n    }\n  }\n\n  render() {\n    return html`\n      <lukso-modal\n        ?is-open=${this.open}\n        size=\"small\"\n        @on-backdrop-click=${this.close}\n      >\n        <div class=\"p-6\">\n          <!-- Header with close button -->\n          <div class=\"flex justify-between items-center mb-6\">\n            <h2 class=\"text-xl font-semibold\">Connected Account</h2>\n            <button\n              @click=${this.close}\n              class=\"text-neutral-50 hover:text-neutral-20 transition-colors\"\n              aria-label=\"Close\"\n            >\n              <svg\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          </div>\n\n          <!-- Connection Status -->\n          <div class=\"flex items-center gap-2 mb-5\">\n            <div\n              class=\"w-2 h-2 rounded-full\"\n              style=\"background: #10b981;\"\n            ></div>\n            <span class=\"text-sm font-semibold\" style=\"color: #10b981;\">\n              Connected\n            </span>\n          </div>\n\n          <!-- Address -->\n          <div\n            class=\"mb-4 p-3 rounded-lg bg-neutral-98 border border-neutral-90\"\n          >\n            <div\n              class=\"text-xs font-semibold text-neutral-50 mb-1.5 uppercase\"\n            >\n              Address\n            </div>\n            <div\n              class=\"text-xs font-mono text-neutral-20 break-all leading-relaxed\"\n            >\n              ${this.address}\n            </div>\n          </div>\n\n          <!-- Network & Connector Info -->\n          <div class=\"grid grid-cols-2 gap-3 mb-5\">\n            <div class=\"p-3 rounded-lg bg-neutral-98 border border-neutral-90\">\n              <div\n                class=\"text-xs font-semibold text-neutral-50 mb-1.5 uppercase\"\n              >\n                Network\n              </div>\n              <div class=\"text-sm font-semibold text-neutral-20\">\n                ${this.getChainName()}\n              </div>\n            </div>\n\n            <div class=\"p-3 rounded-lg bg-neutral-98 border border-neutral-90\">\n              <div\n                class=\"text-xs font-semibold text-neutral-50 mb-1.5 uppercase\"\n              >\n                Connector\n              </div>\n              <div class=\"text-sm font-semibold text-neutral-20\">\n                ${this.connectorName || 'Unknown'}\n              </div>\n            </div>\n          </div>\n\n          <!-- Disconnect Button -->\n          <lukso-button\n            variant=\"danger\"\n            is-full-width\n            @click=${this.handleDisconnect}\n          >\n            Disconnect\n          </lukso-button>\n        </div>\n      </lukso-modal>\n    `\n  }\n}\n"]}