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

package/dist/{wagmi-BLnqILO_.d.ts → wagmi-DgjkdmGk.d.ts}

@@ -8,6 +8,10 @@ interface WalletConnector {
     type: 'embedded' | 'extension' | 'mobile' | 'injected' | 'walletconnect';
     connect: () => Promise<void>;
     getProvider?: () => Promise<any>;
+    switchChain?: (params: {
+        chainId?: number;
+        addEthereumChainParameter?: any;
+    }) => Promise<void>;
 }
 interface ConnectModalSetup {
     /**
@@ -312,10 +316,44 @@ declare global {
 }
 
 /**
- * Wagmi Connector Adapter
- * Converts wagmi/viem connectors to our WalletConnector format
+ * Wagmi Service
+ * Centralized service for wagmi interactions with proxy pattern
  */
 
+/**
+ * Wagmi connection state from getConnection/watchConnection
+ */
+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
+ */
+declare class WagmiService {
+    private setup;
+    private wagmiCore;
+    configure(setup: ConnectModalSetup): void;
+    getSetup(): ConnectModalSetup | null;
+    /**
+     * Ensure wagmi/core is loaded and return initialized state
+     * Returns { core, config } if ready, null otherwise
+     */
+    private init;
+    getConnection(): Promise<any>;
+    watchConnection(callback: (connection: WagmiConnection) => void): Promise<(() => void) | null>;
+    disconnect(): Promise<boolean>;
+}
+declare const wagmiService: WagmiService;
 /**
  * Convert a wagmi connector to our WalletConnector format
  * @param connector - Wagmi connector instance
@@ -343,10 +381,10 @@ declare function fromWagmiConnectors(connectors: WagmiConnector[], connectFn: (o
  *
  * @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 () => {
@@ -355,35 +393,53 @@ declare function fromWagmiConnectors(connectors: WagmiConnector[], connectFn: (o
  * })
  * ```
  */
-declare function setupConnectModal(setup: ConnectModalSetup): void;
+declare function setupWagmi(setup: ConnectModalSetup): void;
 /**
  * Get the current wagmi setup (for internal use by connector)
  */
 declare function getWagmiSetup(): ConnectModalSetup | null;
 /**
- * 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)
+ * }
+ * ```
  */
-declare function getWagmiAccount(): Promise<{
-    isConnected: boolean;
-    address?: string;
-    chainId?: number;
-    connector?: any;
-} | null>;
+declare function getConnection(): Promise<any>;
 /**
- * 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()
+ * ```
  */
-declare function watchWagmiAccount(callback: (account: {
-    isConnected: boolean;
-    address?: string;
-    chainId?: number;
-    connector?: any;
-}) => void): Promise<(() => void) | null>;
+declare function watchConnection(callback: (connection: WagmiConnection) => void): Promise<(() => void) | null>;
 /**
  * Disconnect from wagmi
  * Returns true if disconnect was successful
+ *
+ * @example
+ * ```typescript
+ * import { disconnect } from '@lukso/up-connector'
+ *
+ * await disconnect()
+ * ```
  */
-declare function disconnectWagmi(): Promise<boolean>;
+declare function disconnect(): Promise<boolean>;
 
-export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, disconnectWagmi as e, getWagmiSetup as f, getWagmiAccount as g, fromWagmiConnector as h, fromWagmiConnectors as i, type Wallet as j, setupConnectModal as s, watchWagmiAccount as w };
+export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, type WagmiConnection as e, disconnect as f, getConnection as g, getWagmiSetup as h, watchConnection as i, fromWagmiConnector as j, fromWagmiConnectors as k, type Wallet as l, setupWagmi as s, wagmiService as w };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/up-connector",
-  "version": "0.5.1",
+  "version": "0.6.0-dev.5ea12c5",
   "description": "Universal Profile connector with draggable avatar and connection modal",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -76,16 +76,16 @@
   },
   "dependencies": {
     "@lit/task": "^1.0.3",
-    "@lukso/up-provider": "npm:@lukso-network/up-provider@0.3.5-main.c50af46",
+    "@lukso/up-provider": "0.3.7",
     "@lukso/web-components": "^1.171.2",
     "debug": "^4.4.3",
     "lit": "^3.3.1",
     "ws": "^8.18.3",
     "zxcvbn": "^4.4.2",
-    "@lukso/core": "1.0.0",
-    "@lukso/passkey-auth": "1.1.1",
-    "@lukso/transaction-view-core": "0.4.1",
-    "@lukso/transaction-view-headless": "0.3.1"
+    "@lukso/core": "1.1.0-dev.5ea12c5",
+    "@lukso/passkey-auth": "1.2.0-dev.5ea12c5",
+    "@lukso/transaction-view-core": "0.5.0-dev.5ea12c5",
+    "@lukso/transaction-view-headless": "0.4.0-dev.5ea12c5"
   },
   "peerDependencies": {
     "@wagmi/connectors": "^7.0.0",
@@ -154,6 +154,6 @@
     "deploy:prepare": "./deploy.sh",
     "test": "vitest",
     "test:run": "vitest run",
-    "check": "tsc --noEmit"
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/auto-setup.ts

@@ -8,7 +8,6 @@
  */
 
 import type { Config } from '@wagmi/core'
-import type { ConnectModalSetup } from './connect-modal/index.js'
 import { setupConnectModal } from './connect-modal/index.js'
 
 /**

package/src/avatar.ts

@@ -129,7 +129,6 @@ export class DraggableAvatar {
 
   // Animation state
   private isThrobbing = false
-  private throbAnimation?: Animation
 
   constructor(options: AvatarOptions = {}) {
     this.options = { ...DEFAULT_AVATAR_OPTIONS, ...options }
@@ -212,7 +211,7 @@ export class DraggableAvatar {
 
     // Calculate sizes before template literal
     const avatarPixelSize = this.getPixelSize(this.options.avatarSize)
-    const overhang = this.getIdenticonOverhang(this.options.avatarSize)
+    const _overhang = this.getIdenticonOverhang(this.options.avatarSize)
 
     // Debug: Log our calculations
 
@@ -620,9 +619,7 @@ export class DraggableAvatar {
     let minDistance = Infinity
 
     positions.forEach((pos) => {
-      const distance = Math.sqrt(
-        Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2)
-      )
+      const distance = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2)
       if (distance < minDistance) {
         minDistance = distance
         closest = pos
@@ -652,19 +649,19 @@ export class DraggableAvatar {
         this.element.classList.add('hidden-left')
         this.element.style.left = `-${this.options.hideOffset}px`
         this.element.style.right = 'auto'
-        this.element.style.top = position.y + 'px'
+        this.element.style.top = `${position.y}px`
         this.options.onHide?.()
       } else if (position.side === 'right') {
         this.element.classList.add('hidden-right')
         this.element.style.right = `-${this.options.hideOffset}px`
         this.element.style.left = 'auto'
-        this.element.style.top = position.y + 'px'
+        this.element.style.top = `${position.y}px`
         this.options.onHide?.()
       }
     } else {
-      this.element.style.left = position.x + 'px'
+      this.element.style.left = `${position.x}px`
       this.element.style.right = 'auto'
-      this.element.style.top = position.y + 'px'
+      this.element.style.top = `${position.y}px`
       if (this.isHidden) {
         this.options.onShow?.()
       }
@@ -683,8 +680,8 @@ export class DraggableAvatar {
       if (!this.snapPreviews.has(pos.name)) {
         const preview = document.createElement('div')
         preview.className = 'up-avatar-preview'
-        preview.style.left = pos.x + 'px'
-        preview.style.top = pos.y + 'px'
+        preview.style.left = `${pos.x}px`
+        preview.style.top = `${pos.y}px`
         this.overlay.appendChild(preview)
         this.snapPreviews.set(pos.name, preview)
       }
@@ -698,7 +695,7 @@ export class DraggableAvatar {
     if (typeof document === 'undefined') return
 
     // Determine the active position key
-    let activeKey = activePosition.name
+    const activeKey = activePosition.name
 
     // Update all previews
     this.snapPreviews.forEach((preview, key) => {
@@ -711,16 +708,16 @@ export class DraggableAvatar {
           if (activePosition.side === 'left') {
             preview.style.left = `-${this.options.hideOffset}px`
             preview.style.right = 'auto'
-            preview.style.top = activePosition.y + 'px'
+            preview.style.top = `${activePosition.y}px`
           } else if (activePosition.side === 'right') {
             preview.style.right = `-${this.options.hideOffset}px`
             preview.style.left = 'auto'
-            preview.style.top = activePosition.y + 'px'
+            preview.style.top = `${activePosition.y}px`
           }
         } else {
-          preview.style.left = activePosition.x + 'px'
+          preview.style.left = `${activePosition.x}px`
           preview.style.right = 'auto'
-          preview.style.top = activePosition.y + 'px'
+          preview.style.top = `${activePosition.y}px`
         }
       } else {
         // Dim the others
@@ -729,9 +726,9 @@ export class DraggableAvatar {
         // Reset to normal position (not hidden)
         const pos = this.getSnapPositions().find((p) => p.name === key)
         if (pos) {
-          preview.style.left = pos.x + 'px'
+          preview.style.left = `${pos.x}px`
           preview.style.right = 'auto'
-          preview.style.top = pos.y + 'px'
+          preview.style.top = `${pos.y}px`
         }
       }
     })
@@ -786,9 +783,9 @@ export class DraggableAvatar {
 
     // Always update position while dragging (for visual feedback)
     this.element.className = 'up-avatar dragging'
-    this.element.style.left = currentX + 'px'
+    this.element.style.left = `${currentX}px`
     this.element.style.right = 'auto'
-    this.element.style.top = currentY + 'px'
+    this.element.style.top = `${currentY}px`
 
     const closestPosition = this.findClosestSnapPosition(currentX, currentY)
     const shouldHideLeft = currentX < -this.options.hideThreshold
@@ -877,9 +874,9 @@ export class DraggableAvatar {
 
     // Always update position while dragging (for visual feedback)
     this.element.className = 'up-avatar dragging'
-    this.element.style.left = currentX + 'px'
+    this.element.style.left = `${currentX}px`
     this.element.style.right = 'auto'
-    this.element.style.top = currentY + 'px'
+    this.element.style.top = `${currentY}px`
 
     const closestPosition = this.findClosestSnapPosition(currentX, currentY)
     const shouldHideLeft = currentX < -this.options.hideThreshold
@@ -952,7 +949,7 @@ export class DraggableAvatar {
     if (this.currentPosition) {
       const positions = this.getSnapPositions()
       const newPosition =
-        positions.find((p) => p.name === this.currentPosition!.name) ||
+        positions.find((p) => p.name === this.currentPosition?.name) ||
         positions[0]
       this.snapToPosition(newPosition, this.isHidden)
     }

package/src/backup-modal.ts

@@ -171,7 +171,9 @@ export class BackupModal extends CoreLitElement {
           label="Password"
           placeholder="Enter a strong password"
           .value=${this.password}
-          @on-input=${(e: CustomEvent) => (this.password = e.detail.value)}
+          @on-input=${(e: CustomEvent) => {
+            this.password = e.detail.value
+          }}
           is-full-width
           autofocus
         ></lukso-input>
@@ -216,7 +218,9 @@ export class BackupModal extends CoreLitElement {
           label="Confirm Password"
           placeholder="Re-enter your password"
           .value=${this.passwordConfirm}
-          @on-input=${(e: CustomEvent) => (this.passwordConfirm = e.detail.value)}
+          @on-input=${(e: CustomEvent) => {
+            this.passwordConfirm = e.detail.value
+          }}
           is-full-width
         ></lukso-input>
 

package/src/connect-modal/components/connection-view.ts

@@ -20,6 +20,7 @@ import '@lukso/web-components/dist/components/lukso-icon'
 import { type BrowserInfo, browserInfo } from '@lukso/core/utils'
 import { cn } from '@lukso/web-components/tools'
 import debug from 'debug'
+import { getWagmiSetup } from '../services/wagmi'
 import { walletConnectDeepLinkUrl } from '../utils/walletConnectDeepLinkUrl'
 
 const logInfo = debug('connect-modal:info')
@@ -109,13 +110,15 @@ export class ConnectionView extends withIntlService(
       return
     }
 
-    // TBA: Switch extension to current chain
     if (connector) {
       try {
         logInfo('Connecting via connector:', connector)
         this.isConnecting = true
         this.connectingRdns = connector.rdns
 
+        const setup = getWagmiSetup()
+
+        await connector.switchChain?.({ chainId: setup?.chainId })
         await connector.connect()
 
         // Dispatch connect event

package/src/connect-modal/components/eoa-connection-view.ts

@@ -36,6 +36,7 @@ import type {
 import '@lukso/web-components/dist/components/lukso-button'
 import '@lukso/web-components/dist/components/lukso-icon'
 import '@lukso/web-components/dist/components/lukso-tag'
+import { getWagmiSetup } from '../services/wagmi'
 
 const logInfo = debug('connect-modal:info')
 
@@ -207,6 +208,9 @@ export class EoaConnectionView extends withIntlService(
         logInfo('Connecting via connector:', connector)
         this.isConnecting = true
 
+        const setup = getWagmiSetup()
+
+        await connector.switchChain?.({ chainId: setup?.chainId })
         await connector.connect()
 
         // Dispatch connect event

package/src/connect-modal/connect-modal.types.ts

@@ -6,6 +6,10 @@ export interface WalletConnector {
   type: 'embedded' | 'extension' | 'mobile' | 'injected' | 'walletconnect'
   connect: () => Promise<void>
   getProvider?: () => Promise<any>
+  switchChain?: (params: {
+    chainId?: number
+    addEthereumChainParameter?: any
+  }) => Promise<void>
 }
 
 export interface ConnectModalSetup {

package/src/connect-modal/index.ts

@@ -14,10 +14,12 @@ export type {
   Wallet,
   WalletConnector,
 } from './connect-modal.types'
+export type { WagmiConnection } from './services/wagmi'
 export {
-  disconnectWagmi,
-  getWagmiAccount,
+  disconnect,
+  getConnection,
   getWagmiSetup,
-  setupConnectModal,
-  watchWagmiAccount,
+  setupWagmi as setupConnectModal,
+  wagmi,
+  watchConnection,
 } from './services/wagmi'