@lukso/up-connector 0.4.0-dev.a8c9315

package/src/connector.ts

@@ -0,0 +1,544 @@
+/**
+ * UP Connector - Main class that orchestrates avatar and modal
+ * Provides smooth avatar-to-modal animations and connection state management
+ *
+ * NOTE: This connector uses Lit-based modal components:
+ * - <connect-modal> for wallet connection (configured via setupConnectModal())
+ * - <account-modal> for account management (shows address, chain, disconnect)
+ *
+ * Current implementation status:
+ * - ✅ Avatar integration (DraggableAvatar with IconView)
+ * - ✅ Connection modal (Lit-based ConnectModal)
+ * - ✅ Account management modal (Lit-based AccountModal)
+ * - ✅ Wagmi synchronization
+ *
+ * The legacy ConnectorModal (vanilla JS) has been removed. The config.modal property
+ * is deprecated and has no effect - use setupConnectModal() instead.
+ *
+ * Users can pre-place modal components in DOM for custom positioning:
+ * - Place <connect-modal> or <account-modal> anywhere in your HTML
+ * - The connector will find and reuse existing modals instead of creating new ones
+ */
+
+import { DraggableAvatar } from './avatar.js'
+import './connect-modal/index.js' // Import for side-effect (registers custom element)
+import './account-modal.js' // Import for side-effect (registers custom element)
+import { setLuksoConfig } from '@lukso/transaction-view-headless'
+import type { AccountModal } from './account-modal.js'
+import type { ConnectModal, WalletConnector } from './connect-modal/index.js'
+import {
+  disconnectWagmi,
+  getWagmiAccount,
+  watchWagmiAccount,
+} from './connect-modal/index.js'
+import type {
+  ConnectionState,
+  ConnectorConfig,
+  WalletProvider,
+} from './types.js'
+
+const DEFAULT_CONFIG: Required<
+  Omit<ConnectorConfig, 'avatar' | 'modal' | 'onConnectionChange'>
+> = {
+  autoConnect: false,
+  persistConnection: true,
+  storageKey: 'up-connector-state',
+  chainId: 42, // LUKSO mainnet
+  rpcUrl: 'https://rpc.lukso.network',
+}
+
+export class UPConnector {
+  private config: ConnectorConfig & typeof DEFAULT_CONFIG
+  private avatar?: DraggableAvatar
+  private connectModal?: ConnectModal
+  private accountModal?: AccountModal
+  private connectors: WalletConnector[] = []
+  private connectionState: ConnectionState = 'disconnected'
+  private connectedAddress?: string
+  private connectedProvider?: any
+  private connectedChainId?: number
+  private wagmiUnsubscribe?: (() => void) | null
+
+  constructor(config: ConnectorConfig = {}) {
+    this.config = { ...DEFAULT_CONFIG, ...config }
+
+    // Initialize components
+    this.init()
+  }
+
+  private async init(): Promise<void> {
+    // Create avatar immediately
+    await this.createAvatar()
+
+    // Start watching wagmi (handles both initial state and changes)
+    // This is async but non-blocking - connector works immediately
+    this.startWagmiSync()
+
+    // Try auto-connect if enabled (for non-wagmi connections)
+    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
+   */
+  private updateLuksoConfig(chainId: number): void {
+    try {
+      if (chainId === 42) {
+        // LUKSO Mainnet
+        setLuksoConfig({
+          chainId: 42,
+          rpcUrl: 'https://rpc.lukso.network',
+        })
+      } else if (chainId === 4201) {
+        // LUKSO Testnet
+        setLuksoConfig({
+          chainId: 4201,
+          rpcUrl: 'https://rpc.testnet.lukso.network',
+        })
+      } else {
+        // Other networks - default to mainnet config but with custom chainId
+        setLuksoConfig({
+          chainId,
+          rpcUrl: this.config.rpcUrl,
+        })
+      }
+    } catch (error) {
+      console.warn('⚠️ [Connector] Failed to update Lukso config:', error)
+    }
+  }
+
+  private async startWagmiSync(): Promise<void> {
+    try {
+      // Check initial state first
+      const account = await getWagmiAccount()
+
+      if (!account) {
+        return
+      }
+
+      if (account.isConnected && account.address) {
+        this.handleConnection(
+          account.address,
+          account.connector,
+          account.chainId
+        )
+      }
+
+      // Subscribe to wagmi account changes
+      this.wagmiUnsubscribe = await watchWagmiAccount((account) => {
+        if (account.isConnected && account.address) {
+          // Connected
+          if (
+            this.connectedAddress !== account.address ||
+            this.connectedChainId !== account.chainId
+          ) {
+            this.handleConnection(
+              account.address,
+              account.connector,
+              account.chainId
+            )
+          }
+        } else {
+          // Disconnected
+          if (this.connectionState === 'connected') {
+            this.handleDisconnection()
+          }
+        }
+      })
+    } catch (error) {
+      console.warn('⚠️ [Connector] Failed to sync with wagmi:', error)
+    }
+  }
+
+  private async createAvatar(): Promise<void> {
+    this.avatar = new DraggableAvatar({
+      // Default avatar options
+      avatarSize: 'medium',
+      initialPosition: 'top-right',
+      fallbackText: '👤',
+
+      // Override with user config
+      ...this.config.avatar,
+
+      // Connection-specific callbacks
+      onClick: (event, data) => {
+        // Call user-defined onClick first
+        this.config.avatar?.onClick?.(event, data)
+
+        // Then handle connection logic
+        this.handleAvatarClick(event)
+      },
+
+      onAddressClick: (event) => {
+        // Call user-defined callback
+        this.config.avatar?.onAddressClick?.(event)
+      },
+    })
+
+    // Update avatar connected state
+    this.updateAvatarState()
+  }
+
+  // TODO: Replace with Lit-based account management modal
+  // Legacy createModal() method removed - was using deprecated ConnectorModal
+
+  private handleAvatarClick(event: MouseEvent): void {
+    if (this.connectionState === 'connected') {
+      // Show account management modal
+      this.showAccountModal()
+    } else {
+      // Show connection modal
+      this.showConnectionModal()
+    }
+  }
+
+  private showConnectionModal(): void {
+    // First, check if user has placed a connect-modal in the DOM
+    if (!this.connectModal) {
+      this.connectModal = document.querySelector(
+        'connect-modal'
+      ) as ConnectModal
+    }
+
+    // If still not found, create and append it
+    if (!this.connectModal) {
+      this.connectModal = document.createElement(
+        'connect-modal'
+      ) as ConnectModal
+      document.body.appendChild(this.connectModal as unknown as HTMLElement)
+
+      // Handle connect event
+      this.connectModal.addEventListener('connect', ((e: CustomEvent) => {
+        const connector = e.detail.connector as WalletConnector
+        // TODO: Handle actual connection logic
+        // For now, this will be extended when wagmi/viem integration is added
+      }) as EventListener)
+
+      // Handle close event
+      this.connectModal.addEventListener('close', (() => {
+        // Modal closed
+      }) as EventListener)
+    }
+
+    // Modal will load connectors automatically from global setup
+    // Open the modal
+    this.connectModal.open = true
+  }
+
+  private showAccountModal(): void {
+    if (!this.connectedAddress) return
+
+    // First, check if user has placed an account-modal in the DOM
+    if (!this.accountModal) {
+      this.accountModal = document.querySelector(
+        'account-modal'
+      ) as AccountModal
+    }
+
+    // If still not found, create and append it
+    if (!this.accountModal) {
+      this.accountModal = document.createElement(
+        'account-modal'
+      ) as AccountModal
+      document.body.appendChild(this.accountModal)
+
+      // Handle disconnect event
+      this.accountModal.addEventListener('disconnect', () => {
+        this.handleDisconnection()
+      })
+    }
+
+    // Set properties and open
+    this.accountModal.address = this.connectedAddress
+    this.accountModal.chainId = this.connectedChainId
+    this.accountModal.connectorName = this.connectedProvider?.name || 'Unknown'
+    this.accountModal.open = true
+  }
+
+  private handleConnection(
+    address: string,
+    provider: any,
+    chainId?: number
+  ): void {
+    this.connectedAddress = address
+    this.connectedProvider = provider
+    this.connectedChainId = chainId
+    this.setConnectionState('connected')
+
+    // Update global Lukso config for address resolution
+    if (chainId) {
+      this.updateLuksoConfig(chainId)
+    }
+
+    // Update avatar with connected address and chainId
+    if (this.avatar) {
+      this.avatar.updateAddress(address, undefined, chainId)
+      this.avatar.setConnected(true)
+    }
+
+    // Persist connection if enabled
+    if (this.config.persistConnection) {
+      this.saveConnectionState()
+    }
+
+    // Hide connection modal if open
+    if (this.connectModal) {
+      this.connectModal.open = false
+    }
+  }
+
+  private async handleDisconnection(): Promise<void> {
+    // Disconnect from wagmi first to ensure state is clean
+    await disconnectWagmi()
+
+    this.connectedAddress = undefined
+    this.connectedProvider = undefined
+    this.connectedChainId = undefined
+    this.setConnectionState('disconnected')
+
+    // Update avatar - clear address and show disconnected state
+    if (this.avatar) {
+      this.avatar.setConnected(false)
+      // Clear the address to show fallback/disconnected state
+      this.avatar.updateAddress('')
+    }
+
+    // Clear persisted state
+    if (this.config.persistConnection) {
+      this.clearConnectionState()
+    }
+
+    // Hide connect modal if open
+    if (this.connectModal) {
+      this.connectModal.open = false
+    }
+  }
+
+  private setConnectionState(state: ConnectionState): void {
+    const prevState = this.connectionState
+    this.connectionState = state
+
+    // Update avatar state
+    this.updateAvatarState()
+
+    // Notify callback
+    if (prevState !== state) {
+      this.config.onConnectionChange?.(state, {
+        address: this.connectedAddress,
+        provider: this.connectedProvider,
+        chainId: this.connectedChainId,
+      })
+    }
+  }
+
+  private updateAvatarState(): void {
+    if (!this.avatar) return
+
+    this.avatar.setConnected(this.connectionState === 'connected')
+
+    // Update avatar address and chainId if connected
+    if (this.connectionState === 'connected' && this.connectedAddress) {
+      this.avatar.updateAddress(
+        this.connectedAddress,
+        undefined,
+        this.connectedChainId
+      )
+    }
+  }
+
+  private async tryAutoConnect(): Promise<void> {
+    const savedState = this.loadConnectionState()
+    if (!savedState?.address) return
+
+    this.setConnectionState('connecting')
+
+    try {
+      // Try to reconnect using saved provider info
+      // This would typically involve checking if the provider is still available
+      // and attempting to reconnect
+
+      // For now, simulate auto-connection
+      setTimeout(() => {
+        if (savedState.address) {
+          this.handleConnection(savedState.address, savedState.provider)
+        } else {
+          this.setConnectionState('disconnected')
+        }
+      }, 1000)
+    } catch (error) {
+      console.warn('Auto-connect failed:', error)
+      this.setConnectionState('disconnected')
+    }
+  }
+
+  private saveConnectionState(): void {
+    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)
+    }
+  }
+
+  private loadConnectionState(): any {
+    if (typeof localStorage === 'undefined') return null
+
+    try {
+      const saved = localStorage.getItem(this.config.storageKey)
+      if (!saved) return null
+
+      const state = JSON.parse(saved)
+
+      // Check if state is not too old (24 hours)
+      const maxAge = 24 * 60 * 60 * 1000
+      if (Date.now() - state.timestamp > maxAge) {
+        this.clearConnectionState()
+        return null
+      }
+
+      return state
+    } catch (error) {
+      console.warn('Failed to load connection state:', error)
+      return null
+    }
+  }
+
+  private clearConnectionState(): void {
+    if (typeof localStorage === 'undefined') return
+
+    try {
+      localStorage.removeItem(this.config.storageKey)
+    } catch (error) {
+      console.warn('Failed to clear connection state:', error)
+    }
+  }
+
+  // Public API
+  public getAvatar(): DraggableAvatar | undefined {
+    return this.avatar
+  }
+
+  /**
+   * @deprecated Legacy modal removed. Use getConnectModal() or create account modal
+   */
+  public getModal(): undefined {
+    console.warn('getModal() is deprecated - legacy ConnectorModal removed')
+    return undefined
+  }
+
+  public getConnectModal(): ConnectModal | undefined {
+    return this.connectModal
+  }
+
+  /**
+   * @deprecated Use setupConnectModal() instead to configure wagmi connectors globally
+   */
+  public setConnectors(connectors: WalletConnector[]): void {
+    this.connectors = connectors
+    // Note: The ConnectModal now loads connectors automatically from global setup
+    // Use setupConnectModal() to configure wagmi integration
+    console.warn(
+      'setConnectors() is deprecated. Use setupConnectModal() instead.'
+    )
+  }
+
+  public async connect(providerId?: string): Promise<void> {
+    this.setConnectionState('connecting')
+
+    if (providerId) {
+      // Connect to specific provider
+      // This would be implemented based on available providers
+    } else {
+      // Show connection modal
+      this.showConnectionModal()
+    }
+  }
+
+  public disconnect(): void {
+    this.handleDisconnection()
+  }
+
+  public getConnectionState(): ConnectionState {
+    return this.connectionState
+  }
+
+  public getConnectedAddress(): string | undefined {
+    return this.connectedAddress
+  }
+
+  public getConnectedProvider(): any {
+    return this.connectedProvider
+  }
+
+  public isConnected(): boolean {
+    return this.connectionState === 'connected'
+  }
+
+  public showModal(): void {
+    if (this.isConnected()) {
+      this.showAccountModal()
+    } else {
+      this.showConnectionModal()
+    }
+  }
+
+  public hideModal(): void {
+    if (this.connectModal) {
+      this.connectModal.open = false
+    }
+  }
+
+  public updateConfig(config: Partial<ConnectorConfig>): void {
+    this.config = { ...this.config, ...config }
+
+    // Update avatar if config changed
+    if (config.avatar && this.avatar) {
+      // This would require implementing avatar config updates
+    }
+  }
+
+  public destroy(): void {
+    // Unsubscribe from wagmi changes
+    if (this.wagmiUnsubscribe) {
+      this.wagmiUnsubscribe()
+      this.wagmiUnsubscribe = undefined
+    }
+
+    this.avatar?.destroy()
+
+    // Clean up connect modal
+    if (this.connectModal) {
+      this.connectModal.open = false
+      if (this.connectModal.parentNode) {
+        this.connectModal.parentNode.removeChild(this.connectModal)
+      }
+    }
+
+    this.avatar = undefined
+    this.connectModal = undefined
+    this.connectedAddress = undefined
+    this.connectedProvider = undefined
+    this.connectionState = 'disconnected'
+  }
+}
+
+/**
+ * Factory function for creating UP Connector instances
+ */
+export function createConnector(config: ConnectorConfig = {}): UPConnector {
+  return new UPConnector(config)
+}
+
+export default UPConnector

package/src/index.ts

@@ -0,0 +1,62 @@
+/**
+ * @lukso/up-connector
+ * Universal Profile connector with draggable avatar and connection modal
+ */
+
+// Backup & Restore Modals (Lit Components)
+export { AccountModal } from './account-modal.js'
+// Auto-setup for LUKSO products
+export type { LuksoConnectorConfig } from './auto-setup.js'
+export {
+  EMBEDDED_WALLET_ID,
+  EMBEDDED_WALLET_URL_DEV,
+  EMBEDDED_WALLET_URL_PROD,
+  setupLuksoConnector,
+  UP_EXTENSION_ID,
+} from './auto-setup.js'
+export { createAvatar, DraggableAvatar } from './avatar.js'
+export { BackupModal } from './backup-modal.js'
+export type { WagmiConnector } from './connect-modal'
+export type {
+  ConnectionModalView,
+  ConnectModalSetup,
+  ConnectModalTheme,
+  WalletConnector,
+} from './connect-modal/index.js'
+export {
+  ConnectModal,
+  disconnectWagmi,
+  getWagmiAccount,
+  getWagmiSetup,
+  setupConnectModal,
+  watchWagmiAccount,
+} from './connect-modal/index.js'
+// Wagmi Adapter
+export {
+  fromWagmiConnector,
+  fromWagmiConnectors,
+} from './connect-modal/services/wagmi.js'
+// Main exports
+// Default export
+export {
+  createConnector,
+  createConnector as default,
+  UPConnector,
+} from './connector.js'
+// Enhanced popup system
+export {
+  ModalPopupInstance,
+  WindowPopupInstance,
+} from './popup-instance.js'
+export { RestoreModal } from './restore-modal.js'
+// Types
+export type {
+  AddressData,
+  AvatarOptions,
+  ConnectionState,
+  ConnectorConfig,
+  PopupInstance,
+  PopupRequest,
+  UIDelegate,
+  WalletProvider,
+} from './types.js'