@lukso/up-connector 0.4.0-dev.a8c9315

package/dist/index.js

@@ -0,0 +1,793 @@
+import {
+  AccountModal
+} from "./chunk-YIWSPI4I.js";
+import {
+  EMBEDDED_WALLET_ID,
+  EMBEDDED_WALLET_URL_DEV,
+  EMBEDDED_WALLET_URL_PROD,
+  UP_EXTENSION_ID,
+  setupLuksoConnector
+} from "./chunk-6AYZOIFY.js";
+import {
+  DraggableAvatar,
+  createAvatar
+} from "./chunk-6N35TCFT.js";
+import {
+  BackupModal
+} from "./chunk-NWCNJSG3.js";
+import {
+  RestoreModal
+} from "./chunk-3SGSPHOZ.js";
+import "./chunk-XGIT7YUY.js";
+import {
+  ConnectModal,
+  disconnectWagmi,
+  fromWagmiConnector,
+  fromWagmiConnectors,
+  getWagmiAccount,
+  getWagmiSetup,
+  setupConnectModal,
+  watchWagmiAccount
+} from "./chunk-NXU2DQAV.js";
+import "./chunk-EUXUH3YW.js";
+
+// src/connector.ts
+import { setLuksoConfig } from "@lukso/transaction-view-headless";
+var DEFAULT_CONFIG = {
+  autoConnect: false,
+  persistConnection: true,
+  storageKey: "up-connector-state",
+  chainId: 42,
+  // LUKSO mainnet
+  rpcUrl: "https://rpc.lukso.network"
+};
+var UPConnector = class {
+  constructor(config = {}) {
+    this.connectors = [];
+    this.connectionState = "disconnected";
+    this.config = { ...DEFAULT_CONFIG, ...config };
+    this.init();
+  }
+  async init() {
+    await this.createAvatar();
+    this.startWagmiSync();
+    if (this.config.autoConnect && this.config.persistConnection) {
+      await this.tryAutoConnect();
+    }
+  }
+  /**
+   * Start syncing with wagmi
+   * Checks current state and subscribes to changes
+   */
+  /**
+   * Update global Lukso config for address resolution
+   */
+  updateLuksoConfig(chainId) {
+    try {
+      if (chainId === 42) {
+        setLuksoConfig({
+          chainId: 42,
+          rpcUrl: "https://rpc.lukso.network"
+        });
+      } else if (chainId === 4201) {
+        setLuksoConfig({
+          chainId: 4201,
+          rpcUrl: "https://rpc.testnet.lukso.network"
+        });
+      } else {
+        setLuksoConfig({
+          chainId,
+          rpcUrl: this.config.rpcUrl
+        });
+      }
+    } catch (error) {
+      console.warn("\u26A0\uFE0F [Connector] Failed to update Lukso config:", error);
+    }
+  }
+  async startWagmiSync() {
+    try {
+      const account = await getWagmiAccount();
+      if (!account) {
+        return;
+      }
+      if (account.isConnected && account.address) {
+        this.handleConnection(
+          account.address,
+          account.connector,
+          account.chainId
+        );
+      }
+      this.wagmiUnsubscribe = await watchWagmiAccount((account2) => {
+        if (account2.isConnected && account2.address) {
+          if (this.connectedAddress !== account2.address || this.connectedChainId !== account2.chainId) {
+            this.handleConnection(
+              account2.address,
+              account2.connector,
+              account2.chainId
+            );
+          }
+        } else {
+          if (this.connectionState === "connected") {
+            this.handleDisconnection();
+          }
+        }
+      });
+    } catch (error) {
+      console.warn("\u26A0\uFE0F [Connector] Failed to sync with wagmi:", error);
+    }
+  }
+  async createAvatar() {
+    this.avatar = new DraggableAvatar({
+      // Default avatar options
+      avatarSize: "medium",
+      initialPosition: "top-right",
+      fallbackText: "\u{1F464}",
+      // Override with user config
+      ...this.config.avatar,
+      // Connection-specific callbacks
+      onClick: (event, data) => {
+        this.config.avatar?.onClick?.(event, data);
+        this.handleAvatarClick(event);
+      },
+      onAddressClick: (event) => {
+        this.config.avatar?.onAddressClick?.(event);
+      }
+    });
+    this.updateAvatarState();
+  }
+  // TODO: Replace with Lit-based account management modal
+  // Legacy createModal() method removed - was using deprecated ConnectorModal
+  handleAvatarClick(event) {
+    if (this.connectionState === "connected") {
+      this.showAccountModal();
+    } else {
+      this.showConnectionModal();
+    }
+  }
+  showConnectionModal() {
+    if (!this.connectModal) {
+      this.connectModal = document.querySelector(
+        "connect-modal"
+      );
+    }
+    if (!this.connectModal) {
+      this.connectModal = document.createElement(
+        "connect-modal"
+      );
+      document.body.appendChild(this.connectModal);
+      this.connectModal.addEventListener("connect", ((e) => {
+        const connector = e.detail.connector;
+      }));
+      this.connectModal.addEventListener("close", (() => {
+      }));
+    }
+    this.connectModal.open = true;
+  }
+  showAccountModal() {
+    if (!this.connectedAddress) return;
+    if (!this.accountModal) {
+      this.accountModal = document.querySelector(
+        "account-modal"
+      );
+    }
+    if (!this.accountModal) {
+      this.accountModal = document.createElement(
+        "account-modal"
+      );
+      document.body.appendChild(this.accountModal);
+      this.accountModal.addEventListener("disconnect", () => {
+        this.handleDisconnection();
+      });
+    }
+    this.accountModal.address = this.connectedAddress;
+    this.accountModal.chainId = this.connectedChainId;
+    this.accountModal.connectorName = this.connectedProvider?.name || "Unknown";
+    this.accountModal.open = true;
+  }
+  handleConnection(address, provider, chainId) {
+    this.connectedAddress = address;
+    this.connectedProvider = provider;
+    this.connectedChainId = chainId;
+    this.setConnectionState("connected");
+    if (chainId) {
+      this.updateLuksoConfig(chainId);
+    }
+    if (this.avatar) {
+      this.avatar.updateAddress(address, void 0, chainId);
+      this.avatar.setConnected(true);
+    }
+    if (this.config.persistConnection) {
+      this.saveConnectionState();
+    }
+    if (this.connectModal) {
+      this.connectModal.open = false;
+    }
+  }
+  async handleDisconnection() {
+    await disconnectWagmi();
+    this.connectedAddress = void 0;
+    this.connectedProvider = void 0;
+    this.connectedChainId = void 0;
+    this.setConnectionState("disconnected");
+    if (this.avatar) {
+      this.avatar.setConnected(false);
+      this.avatar.updateAddress("");
+    }
+    if (this.config.persistConnection) {
+      this.clearConnectionState();
+    }
+    if (this.connectModal) {
+      this.connectModal.open = false;
+    }
+  }
+  setConnectionState(state) {
+    const prevState = this.connectionState;
+    this.connectionState = state;
+    this.updateAvatarState();
+    if (prevState !== state) {
+      this.config.onConnectionChange?.(state, {
+        address: this.connectedAddress,
+        provider: this.connectedProvider,
+        chainId: this.connectedChainId
+      });
+    }
+  }
+  updateAvatarState() {
+    if (!this.avatar) return;
+    this.avatar.setConnected(this.connectionState === "connected");
+    if (this.connectionState === "connected" && this.connectedAddress) {
+      this.avatar.updateAddress(
+        this.connectedAddress,
+        void 0,
+        this.connectedChainId
+      );
+    }
+  }
+  async tryAutoConnect() {
+    const savedState = this.loadConnectionState();
+    if (!savedState?.address) return;
+    this.setConnectionState("connecting");
+    try {
+      setTimeout(() => {
+        if (savedState.address) {
+          this.handleConnection(savedState.address, savedState.provider);
+        } else {
+          this.setConnectionState("disconnected");
+        }
+      }, 1e3);
+    } catch (error) {
+      console.warn("Auto-connect failed:", error);
+      this.setConnectionState("disconnected");
+    }
+  }
+  saveConnectionState() {
+    if (typeof localStorage === "undefined") return;
+    try {
+      const state = {
+        address: this.connectedAddress,
+        provider: this.connectedProvider?.constructor?.name,
+        timestamp: Date.now()
+      };
+      localStorage.setItem(this.config.storageKey, JSON.stringify(state));
+    } catch (error) {
+      console.warn("Failed to save connection state:", error);
+    }
+  }
+  loadConnectionState() {
+    if (typeof localStorage === "undefined") return null;
+    try {
+      const saved = localStorage.getItem(this.config.storageKey);
+      if (!saved) return null;
+      const state = JSON.parse(saved);
+      const maxAge = 24 * 60 * 60 * 1e3;
+      if (Date.now() - state.timestamp > maxAge) {
+        this.clearConnectionState();
+        return null;
+      }
+      return state;
+    } catch (error) {
+      console.warn("Failed to load connection state:", error);
+      return null;
+    }
+  }
+  clearConnectionState() {
+    if (typeof localStorage === "undefined") return;
+    try {
+      localStorage.removeItem(this.config.storageKey);
+    } catch (error) {
+      console.warn("Failed to clear connection state:", error);
+    }
+  }
+  // Public API
+  getAvatar() {
+    return this.avatar;
+  }
+  /**
+   * @deprecated Legacy modal removed. Use getConnectModal() or create account modal
+   */
+  getModal() {
+    console.warn("getModal() is deprecated - legacy ConnectorModal removed");
+    return void 0;
+  }
+  getConnectModal() {
+    return this.connectModal;
+  }
+  /**
+   * @deprecated Use setupConnectModal() instead to configure wagmi connectors globally
+   */
+  setConnectors(connectors) {
+    this.connectors = connectors;
+    console.warn(
+      "setConnectors() is deprecated. Use setupConnectModal() instead."
+    );
+  }
+  async connect(providerId) {
+    this.setConnectionState("connecting");
+    if (providerId) {
+    } else {
+      this.showConnectionModal();
+    }
+  }
+  disconnect() {
+    this.handleDisconnection();
+  }
+  getConnectionState() {
+    return this.connectionState;
+  }
+  getConnectedAddress() {
+    return this.connectedAddress;
+  }
+  getConnectedProvider() {
+    return this.connectedProvider;
+  }
+  isConnected() {
+    return this.connectionState === "connected";
+  }
+  showModal() {
+    if (this.isConnected()) {
+      this.showAccountModal();
+    } else {
+      this.showConnectionModal();
+    }
+  }
+  hideModal() {
+    if (this.connectModal) {
+      this.connectModal.open = false;
+    }
+  }
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+    if (config.avatar && this.avatar) {
+    }
+  }
+  destroy() {
+    if (this.wagmiUnsubscribe) {
+      this.wagmiUnsubscribe();
+      this.wagmiUnsubscribe = void 0;
+    }
+    this.avatar?.destroy();
+    if (this.connectModal) {
+      this.connectModal.open = false;
+      if (this.connectModal.parentNode) {
+        this.connectModal.parentNode.removeChild(this.connectModal);
+      }
+    }
+    this.avatar = void 0;
+    this.connectModal = void 0;
+    this.connectedAddress = void 0;
+    this.connectedProvider = void 0;
+    this.connectionState = "disconnected";
+  }
+};
+function createConnector(config = {}) {
+  return new UPConnector(config);
+}
+
+// src/popup-instance.ts
+var PopupEventEmitter = class {
+  constructor() {
+    this.handlers = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    if (!this.handlers.has(event)) {
+      this.handlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this.handlers.get(event).add(handler);
+  }
+  off(event, handler) {
+    this.handlers.get(event)?.delete(handler);
+  }
+  emit(event, ...args) {
+    this.handlers.get(event)?.forEach((handler) => {
+      try {
+        handler(...args);
+      } catch (error) {
+        console.error("Error in popup event handler:", error);
+      }
+    });
+  }
+  clear() {
+    this.handlers.clear();
+  }
+};
+var BasePopupInstance = class {
+  constructor(request) {
+    this.request = request;
+    this.events = new PopupEventEmitter();
+    this.messageHandlers = /* @__PURE__ */ new Set();
+    this._isClosed = false;
+    this._isVisible = false;
+  }
+  get isVisible() {
+    return this._isVisible && !this._isClosed;
+  }
+  get isClosed() {
+    return this._isClosed;
+  }
+  postMessage(data) {
+    if (!this._isClosed && this.contentWindow) {
+      try {
+        this.contentWindow.postMessage(data, "*");
+      } catch (error) {
+        console.error("Failed to post message to popup:", error);
+      }
+    }
+  }
+  onMessage(handler) {
+    this.messageHandlers.add(handler);
+  }
+  removeMessageHandler(handler) {
+    this.messageHandlers.delete(handler);
+  }
+  handleMessage(data) {
+    this.messageHandlers.forEach((handler) => {
+      try {
+        handler(data);
+      } catch (error) {
+        console.error("Error in popup message handler:", error);
+      }
+    });
+    this.events.emit("message", data);
+  }
+  on(event, handler) {
+    this.events.on(event, handler);
+  }
+  off(event, handler) {
+    this.events.off(event, handler);
+  }
+  cleanup() {
+    this.messageHandlers.clear();
+    this.events.clear();
+  }
+};
+var ModalPopupInstance = class extends BasePopupInstance {
+  async show() {
+    if (this._isClosed) {
+      throw new Error("Popup is closed");
+    }
+    if (!this.modalElement) {
+      await this.createElement();
+    }
+    return new Promise((resolve) => {
+      if (!this.modalElement) {
+        resolve();
+        return;
+      }
+      if (!this.modalElement.parentNode) {
+        document.body.appendChild(this.modalElement);
+      }
+      this._isVisible = true;
+      this.modalElement.offsetHeight;
+      this.modalElement.classList.add("visible");
+      this.events.emit("show");
+      setTimeout(() => resolve(), 50);
+    });
+  }
+  hide() {
+    if (!this._isVisible || this._isClosed || !this.modalElement) return;
+    this._isVisible = false;
+    this.modalElement.classList.remove("visible");
+    this.events.emit("hide");
+    setTimeout(() => {
+      if (this.modalElement && this.modalElement.parentNode) {
+        this.modalElement.parentNode.removeChild(this.modalElement);
+      }
+    }, 300);
+  }
+  close() {
+    if (this._isClosed) return;
+    this._isClosed = true;
+    this._isVisible = false;
+    if (this.modalElement) {
+      this.modalElement.classList.remove("visible");
+      setTimeout(() => {
+        if (this.modalElement && this.modalElement.parentNode) {
+          this.modalElement.parentNode.removeChild(this.modalElement);
+        }
+      }, 300);
+    }
+    if (this.messageListener) {
+      window.removeEventListener("message", this.messageListener);
+    }
+    this.events.emit("close");
+    this.cleanup();
+  }
+  get contentWindow() {
+    return this.iframeElement?.contentWindow || void 0;
+  }
+  async createElement() {
+    if (typeof document === "undefined") return;
+    await this.createStyles();
+    this.modalElement = document.createElement("div");
+    this.modalElement.className = "up-popup-modal";
+    const { width = 480, height = 640 } = this.request.size || {};
+    this.modalElement.innerHTML = `
+      <div class="up-popup-modal-content" style="width: ${width}px; height: ${height}px;">
+        <button class="up-popup-close" type="button">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
+        <iframe src="${this.request.url || "about:blank"}" allow="publickey-credentials-get; publickey-credentials-create"></iframe>
+      </div>
+    `;
+    const closeButton = this.modalElement.querySelector(
+      ".up-popup-close"
+    );
+    this.iframeElement = this.modalElement.querySelector(
+      "iframe"
+    );
+    closeButton.addEventListener("click", () => this.hide());
+    this.modalElement.addEventListener("click", (e) => {
+      if (e.target === this.modalElement) {
+        this.hide();
+      }
+    });
+    this.messageListener = (event) => {
+      if (event.source === this.iframeElement?.contentWindow) {
+        this.handleMessage(event.data);
+      }
+    };
+    window.addEventListener("message", this.messageListener);
+  }
+  async createStyles() {
+    if (typeof document === "undefined") return;
+    if (document.querySelector("#up-popup-modal-styles")) return;
+    const style = document.createElement("style");
+    style.id = "up-popup-modal-styles";
+    style.textContent = `
+      .up-popup-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(8px);
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        padding: 16px;
+      }
+
+      .up-popup-modal.visible {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .up-popup-modal-content {
+        background: white;
+        border-radius: 12px;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        transform: scale(0.95) translateY(20px);
+        transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      }
+
+      .up-popup-modal.visible .up-popup-modal-content {
+        transform: scale(1) translateY(0);
+      }
+
+      .up-popup-close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.9);
+        border: none;
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6b7280;
+        transition: all 0.2s ease;
+      }
+
+      .up-popup-close:hover {
+        background: rgba(255, 255, 255, 1);
+        color: #374151;
+      }
+
+      .up-popup-modal iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 12px;
+      }
+
+      @media (max-width: 640px) {
+        .up-popup-modal {
+          padding: 0;
+          align-items: flex-end;
+        }
+
+        .up-popup-modal-content {
+          width: 100% !important;
+          height: 85vh !important;
+          border-radius: 12px 12px 0 0;
+          transform: translateY(100%);
+        }
+
+        .up-popup-modal.visible .up-popup-modal-content {
+          transform: translateY(0);
+        }
+
+        .up-popup-modal iframe {
+          border-radius: 12px 12px 0 0;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .up-popup-modal {
+          align-items: stretch;
+        }
+
+        .up-popup-modal-content {
+          height: 100vh !important;
+          border-radius: 0;
+        }
+
+        .up-popup-modal iframe {
+          border-radius: 0;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+};
+var WindowPopupInstance = class extends BasePopupInstance {
+  constructor() {
+    super(...arguments);
+    this.popupWindow = null;
+  }
+  async show() {
+    if (this._isClosed) {
+      throw new Error("Popup is closed");
+    }
+    if (!this.popupWindow || this.popupWindow.closed) {
+      await this.createPopupWindow();
+    }
+    if (this.popupWindow && !this.popupWindow.closed) {
+      this.popupWindow.focus();
+      this._isVisible = true;
+      this.events.emit("show");
+    }
+  }
+  hide() {
+    if (this.popupWindow && !this.popupWindow.closed) {
+      this.popupWindow.blur();
+    }
+    this._isVisible = false;
+    this.events.emit("hide");
+  }
+  close() {
+    if (this._isClosed) return;
+    this._isClosed = true;
+    this._isVisible = false;
+    if (this.popupWindow && !this.popupWindow.closed) {
+      this.popupWindow.close();
+    }
+    this.popupWindow = null;
+    if (this.messageListener) {
+      window.removeEventListener("message", this.messageListener);
+    }
+    this.events.emit("close");
+    this.cleanup();
+  }
+  get contentWindow() {
+    return this.popupWindow && !this.popupWindow.closed ? this.popupWindow : void 0;
+  }
+  get isVisible() {
+    return !this._isClosed && !!(this.popupWindow && !this.popupWindow.closed);
+  }
+  async createPopupWindow() {
+    if (!this.request.url) {
+      throw new Error("URL required for popup windows");
+    }
+    const { width = 400, height = 600 } = this.request.size || {};
+    const position = this.request.position || "center";
+    const features = [
+      `width=${width}`,
+      `height=${height}`,
+      ...this.getPositionFeatures(position, width, height),
+      "scrollbars=yes",
+      "resizable=yes",
+      "status=no",
+      "location=no",
+      "toolbar=no",
+      "menubar=no"
+    ].join(",");
+    this.popupWindow = window.open(this.request.url, "_blank", features);
+    if (!this.popupWindow) {
+      throw new Error("Popup blocked or failed to open");
+    }
+    this.messageListener = (event) => {
+      if (event.source === this.popupWindow) {
+        this.handleMessage(event.data);
+      }
+    };
+    window.addEventListener("message", this.messageListener);
+    const checkClosed = () => {
+      if (this.popupWindow?.closed && !this._isClosed) {
+        this.close();
+      } else if (!this._isClosed) {
+        setTimeout(checkClosed, 1e3);
+      }
+    };
+    setTimeout(checkClosed, 1e3);
+  }
+  getPositionFeatures(position, width, height) {
+    const screenLeft = window.screenLeft !== void 0 ? window.screenLeft : window.screenX;
+    const screenTop = window.screenTop !== void 0 ? window.screenTop : window.screenY;
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth || screen.width;
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight || screen.height;
+    let left;
+    let top;
+    switch (position) {
+      case "top-right":
+        left = screenLeft + windowWidth - width - 20;
+        top = screenTop + 20;
+        break;
+      case "center":
+      default:
+        left = screenLeft + (windowWidth - width) / 2;
+        top = screenTop + (windowHeight - height) / 2;
+        break;
+    }
+    return [`left=${Math.max(0, left)}`, `top=${Math.max(0, top)}`];
+  }
+};
+export {
+  AccountModal,
+  BackupModal,
+  ConnectModal,
+  DraggableAvatar,
+  EMBEDDED_WALLET_ID,
+  EMBEDDED_WALLET_URL_DEV,
+  EMBEDDED_WALLET_URL_PROD,
+  ModalPopupInstance,
+  RestoreModal,
+  UPConnector,
+  UP_EXTENSION_ID,
+  WindowPopupInstance,
+  createAvatar,
+  createConnector,
+  createConnector as default,
+  disconnectWagmi,
+  fromWagmiConnector,
+  fromWagmiConnectors,
+  getWagmiAccount,
+  getWagmiSetup,
+  setupConnectModal,
+  setupLuksoConnector,
+  watchWagmiAccount
+};
+//# sourceMappingURL=index.js.map