@lukso/up-connector 0.5.1 → 0.6.0-dev.5ea12c5

package/src/connect-modal/services/wagmi.ts

@@ -1,20 +1,111 @@
 /**
- * Wagmi Connector Adapter
- * Converts wagmi/viem connectors to our WalletConnector format
+ * Wagmi Service
+ * Centralized service for wagmi interactions with proxy pattern
  */
 
+import { getChainById } from '@lukso/core/chains'
 import { slug } from '@lukso/core/utils'
+import debug from 'debug'
 import type {
   ConnectModalSetup,
   WagmiConnector,
 } from '../connect-modal.types.js'
 import type { WalletConnector } from '../index.js'
+import { constructAddEthereumChainParameter } from '../utils/chainParams'
+
+const logInfo = debug('connect-modal:info')
 
 // UP Extension ID
 const UP_EXTENSION_ID = 'cloud.universalprofile'
 
-// Global wagmi setup storage
-let globalWagmiSetup: ConnectModalSetup | null = null
+/**
+ * Wagmi connection state from getConnection/watchConnection
+ */
+export type WagmiConnection = {
+  address?: string
+  addresses?: readonly string[]
+  chainId?: number
+  chain?: any
+  connector?: any
+  status: 'connecting' | 'reconnecting' | 'connected' | 'disconnected'
+  isConnecting?: boolean
+  isReconnecting?: boolean
+  isConnected?: boolean
+  isDisconnected?: boolean
+}
+
+/**
+ * Wagmi Service Class
+ * Provides centralized access to wagmi core functions
+ */
+class WagmiService {
+  private setup: ConnectModalSetup | null = null
+  private wagmiCore: any = null
+
+  configure(setup: ConnectModalSetup): void {
+    this.setup = setup
+  }
+
+  getSetup(): ConnectModalSetup | null {
+    return this.setup
+  }
+
+  /**
+   * Ensure wagmi/core is loaded and return initialized state
+   * Returns { core, config } if ready, null otherwise
+   */
+  private async init() {
+    if (!this.setup) return null
+    if (!this.wagmiCore) {
+      try {
+        this.wagmiCore = await import('@wagmi/core')
+      } catch {
+        return null
+      }
+    }
+    return { core: this.wagmiCore, config: this.setup.wagmiConfig }
+  }
+
+  async getConnection() {
+    const wagmi = await this.init()
+    if (!wagmi) return null
+
+    try {
+      return wagmi.core.getConnection(wagmi.config)
+    } catch {
+      return null
+    }
+  }
+
+  async watchConnection(
+    callback: (connection: WagmiConnection) => void
+  ): Promise<(() => void) | null> {
+    const wagmi = await this.init()
+    if (!wagmi) return null
+
+    try {
+      return wagmi.core.watchConnection(wagmi.config, { onChange: callback })
+    } catch {
+      return null
+    }
+  }
+
+  async disconnect(): Promise<boolean> {
+    const wagmi = await this.init()
+    if (!wagmi) return false
+
+    try {
+      await wagmi.core.disconnect(wagmi.config)
+      return true
+    } catch (error) {
+      console.warn('Failed to disconnect from wagmi', error)
+      return false
+    }
+  }
+}
+
+// Singleton instance
+const wagmiService = new WagmiService()
 
 /**
  * Convert a wagmi connector to our WalletConnector format
@@ -63,6 +154,39 @@ export function fromWagmiConnector(
     getProvider: connector.getProvider
       ? () => connector.getProvider()
       : undefined,
+    switchChain: connector.switchChain
+      ? async (params: {
+          chainId?: number
+          addEthereumChainParameter?: any
+        }) => {
+          if (!params.chainId) {
+            console.warn('No chainId provided for switchChain, skipping')
+            return
+          }
+
+          // Get the chain configuration based on chainId
+          // If addEthereumChainParameter is not provided, construct it from chain definition
+          let addEthereumChainParameter = params.addEthereumChainParameter
+
+          if (!addEthereumChainParameter) {
+            const chain = getChainById(params.chainId)
+
+            if (chain) {
+              addEthereumChainParameter =
+                constructAddEthereumChainParameter(chain)
+            }
+          }
+
+          await connector.switchChain({
+            chainId: params.chainId,
+            addEthereumChainParameter,
+          })
+
+          logInfo(
+            `Switched to chainId ${params.chainId} via connector "${connector.name}"`
+          )
+        }
+      : undefined,
   }
 }
 
@@ -169,10 +293,10 @@ export function fromWagmiConnectors(
  *
  * @example
  * ```typescript
- * import { setupConnectModal } from '@lukso/up-connector'
+ * import { setupWagmi } from '@lukso/up-connector'
  * import { wagmiConfig } from './wagmi-config'
  *
- * setupConnectModal({
+ * setupWagmi({
  *   wagmiConfig,
  *   chainId: 42, // Optional: LUKSO mainnet
  *   embeddedWalletConnect: async () => {
@@ -181,97 +305,73 @@ export function fromWagmiConnectors(
  * })
  * ```
  */
-export function setupConnectModal(setup: ConnectModalSetup): void {
-  globalWagmiSetup = setup
+export function setupWagmi(setup: ConnectModalSetup): void {
+  wagmiService.configure(setup)
 }
 
 /**
  * Get the current wagmi setup (for internal use by connector)
  */
 export function getWagmiSetup(): ConnectModalSetup | null {
-  return globalWagmiSetup
+  return wagmiService.getSetup()
 }
 
 /**
- * Get current wagmi account state
+ * Get current wagmi connection state
  * Returns null if wagmi is not set up
+ *
+ * @example
+ * ```typescript
+ * import { getConnection } from '@lukso/up-connector'
+ *
+ * const connection = await getConnection()
+ * if (connection?.status === 'connected') {
+ *   console.log(connection.address, connection.chainId)
+ * }
+ * ```
  */
-export async function getWagmiAccount(): Promise<{
-  isConnected: boolean
-  address?: string
-  chainId?: number
-  connector?: any
-} | null> {
-  if (!globalWagmiSetup) {
-    return null
-  }
-
-  try {
-    const { getConnection } = await import('@wagmi/core')
-    const connection = getConnection(globalWagmiSetup.wagmiConfig)
-
-    return {
-      isConnected: connection.status === 'connected',
-      address: connection.address,
-      chainId: connection.chainId,
-      connector: connection.connector,
-    }
-  } catch (_error) {
-    return null
-  }
+export async function getConnection() {
+  return wagmiService.getConnection()
 }
 
 /**
- * Subscribe to wagmi connection changes
+ * Watch for wagmi connection changes
  * Returns unsubscribe function
+ *
+ * @example
+ * ```typescript
+ * import { watchConnection } from '@lukso/up-connector'
+ *
+ * const unwatch = await watchConnection((connection) => {
+ *   console.log('Connection changed:', connection.status, connection.address)
+ * })
+ *
+ * // Later: unwatch()
+ * ```
  */
-export async function watchWagmiAccount(
-  callback: (account: {
-    isConnected: boolean
-    address?: string
-    chainId?: number
-    connector?: any
-  }) => void
+export async function watchConnection(
+  callback: (connection: WagmiConnection) => void
 ): Promise<(() => void) | null> {
-  if (!globalWagmiSetup) {
-    return null
-  }
-
-  try {
-    const { watchConnection } = await import('@wagmi/core')
-
-    const unsubscribe = watchConnection(globalWagmiSetup.wagmiConfig, {
-      onChange: (connection) => {
-        callback({
-          isConnected: connection.status === 'connected',
-          address: connection.address,
-          chainId: connection.chainId,
-          connector: connection.connector,
-        })
-      },
-    })
-
-    return unsubscribe
-  } catch (_error) {
-    return null
-  }
+  return wagmiService.watchConnection(callback)
 }
 
 /**
  * Disconnect from wagmi
  * Returns true if disconnect was successful
+ *
+ * @example
+ * ```typescript
+ * import { disconnect } from '@lukso/up-connector'
+ *
+ * await disconnect()
+ * ```
  */
-export async function disconnectWagmi(): Promise<boolean> {
-  if (!globalWagmiSetup) {
-    return false
-  }
-
-  try {
-    const { disconnect } = await import('@wagmi/core')
-    await disconnect(globalWagmiSetup.wagmiConfig)
-    return true
-  } catch (error) {
-    console.warn('Failed to disconnect from wagmi', error)
-    return false
-  }
+export async function disconnect(): Promise<boolean> {
+  return wagmiService.disconnect()
 }
+
+/**
+ * Export the wagmi service for advanced usage
+ * @deprecated Use named exports (getConnection, watchConnection, disconnect) instead
+ */
+export { wagmiService as wagmi }

package/src/connect-modal/styles/styles.css

@@ -1 +1 @@
-@import "@lukso/web-components/dist/styles/main.css";
+@import "@lukso/web-components/tools/styles/main.css";

package/src/connect-modal/utils/chainParams.ts

@@ -0,0 +1,32 @@
+/**
+ * Chain Parameter Utilities
+ *
+ * Utilities to construct EIP-3085 addEthereumChain parameters from chain definitions
+ */
+
+import type { ChainExtended } from '@lukso/core/chains'
+import type { AddEthereumChainParameter } from 'viem'
+
+/**
+ * Construct addEthereumChainParameter from a ChainExtended definition
+ * Following EIP-3085 format for wallet_addEthereumChain
+ *
+ * @param chain - Extended chain configuration
+ * @returns Parameters for wallet_addEthereumChain (excluding chainId which is passed separately)
+ */
+export function constructAddEthereumChainParameter(
+  chain: ChainExtended
+): Omit<AddEthereumChainParameter, 'chainId'> {
+  return {
+    chainName: chain.name,
+    nativeCurrency: {
+      name: chain.nativeCurrency.name,
+      symbol: chain.nativeCurrency.symbol,
+      decimals: chain.nativeCurrency.decimals,
+    },
+    rpcUrls: [...chain.rpcUrls.default.http],
+    blockExplorerUrls: chain.blockExplorers?.default.url
+      ? [chain.blockExplorers.default.url]
+      : undefined,
+  }
+}

package/src/connector.ts

@@ -27,15 +27,11 @@ 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,
+  disconnect,
+  getConnection,
+  watchConnection,
 } from './connect-modal/index.js'
-import type {
-  ConnectionState,
-  ConnectorConfig,
-  WalletProvider,
-} from './types.js'
+import type { ConnectionState, ConnectorConfig } from './types.js'
 
 const DEFAULT_CONFIG: Required<
   Omit<ConnectorConfig, 'avatar' | 'modal' | 'onConnectionChange'>
@@ -52,12 +48,12 @@ export class UPConnector {
   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
+  connectors: WalletConnector[] = []
 
   constructor(config: ConnectorConfig = {}) {
     this.config = { ...DEFAULT_CONFIG, ...config }
@@ -116,22 +112,28 @@ export class UPConnector {
   private async startWagmiSync(): Promise<void> {
     try {
       // Check initial state first
-      const account = await getWagmiAccount()
+      const connection = await getConnection()
 
-      if (!account) {
+      if (!connection) {
         return
       }
 
-      if (account.isConnected && account.address) {
+      if (connection.status === 'connected' && connection.address) {
         this.handleConnection(
-          account.address,
-          account.connector,
-          account.chainId
+          connection.address,
+          connection.connector,
+          connection.chainId
         )
       }
 
-      // Subscribe to wagmi account changes
-      this.wagmiUnsubscribe = await watchWagmiAccount((account) => {
+      // Subscribe to wagmi connection changes
+      this.wagmiUnsubscribe = await watchConnection((connection) => {
+        const account = {
+          isConnected: connection.status === 'connected',
+          address: connection.address,
+          chainId: connection.chainId,
+          connector: connection.connector,
+        }
         if (account.isConnected && account.address) {
           // Connected
           if (
@@ -188,7 +190,7 @@ export class UPConnector {
   // TODO: Replace with Lit-based account management modal
   // Legacy createModal() method removed - was using deprecated ConnectorModal
 
-  private handleAvatarClick(event: MouseEvent): void {
+  private handleAvatarClick(_event: MouseEvent): void {
     if (this.connectionState === 'connected') {
       // Show account management modal
       this.showAccountModal()
@@ -215,7 +217,7 @@ export class UPConnector {
 
       // Handle connect event
       this.connectModal.addEventListener('connect', ((e: CustomEvent) => {
-        const connector = e.detail.connector as WalletConnector
+        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)
@@ -295,7 +297,7 @@ export class UPConnector {
 
   private async handleDisconnection(): Promise<void> {
     // Disconnect from wagmi first to ensure state is clean
-    await disconnectWagmi()
+    await disconnect()
 
     this.connectedAddress = undefined
     this.connectedProvider = undefined

package/src/index.ts

@@ -21,15 +21,17 @@ export type {
   ConnectionModalView,
   ConnectModalSetup,
   ConnectModalTheme,
+  WagmiConnection,
   WalletConnector,
 } from './connect-modal/index.js'
 export {
   ConnectModal,
-  disconnectWagmi,
-  getWagmiAccount,
+  disconnect,
+  getConnection,
   getWagmiSetup,
   setupConnectModal,
-  watchWagmiAccount,
+  wagmi,
+  watchConnection,
 } from './connect-modal/index.js'
 // Wagmi Adapter
 export {
@@ -61,4 +63,4 @@ export type {
   WalletProvider,
 } from './types.js'
 // Release update
-// build 2
+// build 1

package/src/popup-instance.ts

@@ -53,7 +53,7 @@ class PopupEventEmitter {
     if (!this.handlers.has(event)) {
       this.handlers.set(event, new Set())
     }
-    this.handlers.get(event)!.add(handler)
+    this.handlers.get(event)?.add(handler)
   }
 
   off(event: string, handler: (...args: any[]) => void): void {
@@ -197,7 +197,7 @@ export class ModalPopupInstance extends BasePopupInstance {
 
     // Remove from DOM after animation
     setTimeout(() => {
-      if (this.modalElement && this.modalElement.parentNode) {
+      if (this.modalElement?.parentNode) {
         this.modalElement.parentNode.removeChild(this.modalElement)
       }
     }, 300)
@@ -212,7 +212,7 @@ export class ModalPopupInstance extends BasePopupInstance {
     if (this.modalElement) {
       this.modalElement.classList.remove('visible')
       setTimeout(() => {
-        if (this.modalElement && this.modalElement.parentNode) {
+        if (this.modalElement?.parentNode) {
           this.modalElement.parentNode.removeChild(this.modalElement)
         }
       }, 300)
@@ -525,7 +525,6 @@ export class WindowPopupInstance extends BasePopupInstance {
         left = screenLeft + windowWidth - width - 20
         top = screenTop + 20
         break
-      case 'center':
       default:
         left = screenLeft + (windowWidth - width) / 2
         top = screenTop + (windowHeight - height) / 2

package/src/restore-modal.ts

@@ -43,14 +43,14 @@ export class RestoreModal extends CoreLitElement {
   @state() private password = ''
   @state() private passwordErrors: string[] = []
   @state() private isRestoring = false
-  @state() private walletData: WalletData | null = null
   @state() private validationWarnings: string[] = []
-  @state() private validationInfo: string[] = []
   @state() private controllers: Array<{
     address: string
     status: 'new' | 'existing'
   }> = []
   @state() private restoredAddresses: string[] = []
+  validationInfo: string[] = []
+  walletData: WalletData | null = null
 
   /**
    * Public method for parent to set preview result
@@ -208,7 +208,9 @@ export class RestoreModal extends CoreLitElement {
           label="Password"
           placeholder="Enter decryption password"
           .value=${this.password}
-          @on-input=${(e: CustomEvent) => (this.password = e.detail.value)}
+          @on-input=${(e: CustomEvent) => {
+            this.password = e.detail.value
+          }}
           @keyup=${(e: KeyboardEvent) => e.key === 'Enter' && canProceed && this.previewRestore()}
           is-full-width
           autofocus

package/src/styles/styles.css

@@ -1 +1 @@
-@import "@lukso/web-components/dist/styles/main.css";
+@import "@lukso/web-components/tools/styles/main.css";