@lukso/up-connector 0.4.0-dev.a8c9315

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

@@ -0,0 +1,270 @@
+/**
+ * Connect Modal - Lit Component
+ *
+ * Framework-agnostic connection modal for wallet/profile connections.
+ */
+
+import { withDeviceService } from '@lukso/core/mixins'
+import debug from 'debug'
+import { html, type TemplateResult } from 'lit'
+import { property, state } from 'lit/decorators.js'
+
+import { ConnectModalBase } from './connect-modal.base.js'
+import type {
+  ConnectionModalView,
+  ConnectModalTheme,
+  WalletConnector,
+} from './connect-modal.types'
+import { fromWagmiConnectors, getWagmiSetup } from './services/wagmi'
+
+import '@lukso/web-components/dist/components/lukso-modal'
+import './components/eoa-connection-view'
+import './components/connection-view'
+import './components/qr-code-view'
+
+const logInfo = debug('connect-modal:info')
+
+export class ConnectModal extends withDeviceService(ConnectModalBase) {
+  // Public properties
+  @property({ type: Boolean, reflect: true }) open = false
+  @property({ type: String, reflect: true }) theme: ConnectModalTheme = 'light'
+
+  // Private state
+  @state() private connectors: WalletConnector[] = []
+  @state() private isDark = false
+  @state() private modalView: ConnectionModalView = 'up_connection'
+  @state() private qrCodeData: string | undefined = undefined
+
+  private mediaQueryList: MediaQueryList | null = null
+
+  updated(changedProperties: Map<string, any>): void {
+    // Reset view and load connectors when modal opens
+    if (changedProperties.has('open') && this.open) {
+      this.modalView = 'up_connection' // Reset to main view when modal opens
+      this.loadConnectors()
+    }
+
+    // Handle theme changes
+    if (changedProperties.has('theme')) {
+      this.updateTheme()
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.updateTheme()
+
+    // Listen for system theme changes when in 'auto' mode
+    if (this.theme === 'auto') {
+      this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
+      this.mediaQueryList.addEventListener(
+        'change',
+        this.handleMediaQueryChange
+      )
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    if (this.mediaQueryList) {
+      this.mediaQueryList.removeEventListener(
+        'change',
+        this.handleMediaQueryChange
+      )
+    }
+  }
+
+  /**
+   * Handle system theme changes
+   *
+   * @param event
+   */
+  private handleMediaQueryChange = (event: MediaQueryListEvent): void => {
+    this.isDark = event.matches
+  }
+
+  /**
+   * Close modal
+   */
+  handleClose(): void {
+    this.open = false
+
+    this.dispatchEvent(
+      new CustomEvent('on-close', { bubbles: true, composed: true })
+    )
+  }
+
+  /**
+   * Update isDark state based on theme property
+   */
+  private updateTheme(): void {
+    if (this.theme === 'auto') {
+      this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    } else {
+      this.isDark = this.theme === 'dark'
+    }
+  }
+
+  private async loadConnectors(): Promise<void> {
+    const globalWagmiSetup = getWagmiSetup()
+    logInfo('Global wagmi setup:', globalWagmiSetup)
+
+    if (!globalWagmiSetup) {
+      console.warn(
+        'No global wagmi setup found! Call setupConnectModal() first.'
+      )
+      this.connectors = []
+      return
+    }
+
+    try {
+      const { wagmiConfig, chainId, embeddedWalletId } = globalWagmiSetup
+
+      // Get connectors from wagmi config
+      const wagmiConnectors = wagmiConfig?.connectors || []
+      logInfo('Initial connectors:', wagmiConnectors)
+
+      // Dynamically import wagmi's connect function to avoid bundling if not used
+      // Use dynamic import to keep @wagmi/core as an optional peer dependency
+      const wagmiCore = await import('@wagmi/core').catch((error) => {
+        throw new Error('@wagmi/core is required when using wagmi connectors', {
+          cause: error,
+        })
+      })
+
+      // Convert to WalletConnector format using the adapter
+      this.connectors = fromWagmiConnectors(
+        wagmiConnectors,
+        async (options: any) => {
+          await wagmiCore.connect(wagmiConfig, {
+            connector: options.connector,
+            chainId: options.chainId || chainId,
+          })
+        },
+        chainId,
+        embeddedWalletId
+      )
+      logInfo('Converted connectors:', this.connectors)
+    } catch (error) {
+      console.warn('Failed to load connectors', error)
+      this.connectors = []
+    }
+  }
+
+  /**
+   * Successful connection handler
+   *
+   * @param connector
+   */
+  private handleOnConnectSuccess(event: CustomEvent): void {
+    event.stopPropagation() // Prevent event bubbling
+    const connector = event.detail.connector as WalletConnector
+    logInfo('Connection success:', connector)
+    this.open = false
+
+    // Dispatch connect event
+    this.dispatchEvent(
+      new CustomEvent('on-connect', {
+        detail: { connector },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  /**
+   * Error connection handler
+   *
+   * @param error
+   */
+  private handleOnConnectError(event: CustomEvent): void {
+    event.stopPropagation() // Prevent event bubbling
+    const error = event.detail.error as Error
+    logInfo('Connection error:', error)
+
+    // Dispatch error event
+    this.dispatchEvent(
+      new CustomEvent('on-error', {
+        detail: { error },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private handleBackToConnectionView(event: CustomEvent): void {
+    event.stopPropagation() // Prevent event bubbling
+    this.modalView = 'up_connection'
+  }
+
+  private handleShowEoaConnectionsView = (event: CustomEvent): void => {
+    event.stopPropagation() // Prevent event bubbling
+    this.modalView = 'eoa_connection'
+  }
+
+  private handleShowQrCodeView = (event: CustomEvent): void => {
+    event.stopPropagation() // Prevent event bubbling
+    this.qrCodeData = event.detail.data
+    this.modalView = 'qr_code'
+  }
+
+  // ===== Template Methods =====
+
+  /**
+   * Render modal content based on current view flag
+   */
+  private renderModalContent(): TemplateResult<1> {
+    switch (this.modalView) {
+      case 'qr_code':
+        return html`<qr-code-view .data=${this.qrCodeData} @on-back=${this.handleBackToConnectionView}
+            @on-close=${this.handleClose}></qr-code-view>`
+      case 'eoa_connection':
+        return html`
+          <eoa-connection-view
+            .connectors=${this.connectors}
+            @on-back=${this.handleBackToConnectionView}
+            @on-close=${this.handleClose}
+            @on-connect=${this.handleOnConnectSuccess}
+            @on-error=${this.handleOnConnectError}
+          ></eoa-connection-view>
+        `
+      default: // up_connection
+        return html`
+          <connection-view
+            .connectors=${this.connectors}
+            @on-back=${this.handleBackToConnectionView}
+            @on-close=${this.handleClose}
+            @on-connect=${this.handleOnConnectSuccess}
+            @on-error=${this.handleOnConnectError}
+            @on-show-eoa-connections-view=${this.handleShowEoaConnectionsView}
+            @on-show-qr-code=${this.handleShowQrCodeView}
+          ></connection-view>
+        `
+    }
+  }
+
+  render(): TemplateResult<1> {
+    return html`
+      <lukso-modal
+        ?is-open=${this.open}
+        ?has-bottom-padding=${!!(this.device?.isIOS && this.device?.isSafari)}
+        size="auto"
+        @on-backdrop-click=${this.handleClose}
+      >
+        <div class="p-6 ${this.isDark ? 'dark' : ''} w-full sm:w-[372px] text-neutral-20">
+          ${this.renderModalContent()}
+        </div>
+      </lukso-modal>
+    `
+  }
+}
+
+// Register custom element
+customElements.define('connect-modal', ConnectModal as any)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'connect-modal': ConnectModal
+  }
+}

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

@@ -0,0 +1,104 @@
+export interface WalletConnector {
+  id: string
+  name?: string
+  rdns?: string // Reverse DNS identifier (e.g., 'io.metamask')
+  slug?: string
+  type: 'embedded' | 'extension' | 'mobile' | 'injected' | 'walletconnect'
+  connect: () => Promise<void>
+  getProvider?: () => Promise<any>
+}
+
+export interface ConnectModalSetup {
+  /**
+   * Wagmi config instance
+   */
+  wagmiConfig: any
+
+  /**
+   * Optional chain ID to use for connections (defaults to first chain in config)
+   */
+  chainId?: number
+
+  /**
+   * Optional embedded wallet ID (to identify it in wagmi connectors)
+   * If provided, this connector will be shown first as "Create Passkey Wallet"
+   * Example: 'dev.lukso.auth'
+   */
+  embeddedWalletId?: string
+}
+
+// Minimal wagmi Connector interface (to avoid importing @wagmi/core)
+export interface WagmiConnector {
+  uid: string
+  name: string
+  id: string
+  type: string
+  icon?: string
+  // Other wagmi connector properties...
+  [key: string]: any
+}
+
+export type ConnectModalTheme = 'light' | 'dark' | 'auto'
+
+export type ConnectionModalView = 'up_connection' | 'qr_code' | 'eoa_connection'
+
+export type WalletResponse = {
+  listings: {
+    [key in string]: Wallet
+  }
+  count: number
+  total: number
+}
+
+export type Wallet = {
+  id: string
+  name: string
+  slug: string
+  description: string
+  homepage: string
+  chains: string[]
+  versions: string[]
+  sdks: string[]
+  app_type: string
+  category: string
+  image_id: string
+  image_url: WalletImageUrl
+  app: WalletApp
+  rdns: string
+  mobile: WalletMobile
+  desktop: WalletDesktop
+  isInstalled: boolean
+  connector: WalletConnector | undefined
+}
+
+export type WalletImageUrl = {
+  sm: string
+  md: string
+  lg: string
+}
+export type WalletAppType =
+  | 'browser'
+  | 'ios'
+  | 'android'
+  | 'mac'
+  | 'windows'
+  | 'linux'
+  | 'chrome'
+  | 'firefox'
+  | 'safari'
+  | 'edge'
+  | 'opera'
+
+export type WalletApp = {
+  [key in WalletAppType]?: string
+}
+
+export interface WalletMobile {
+  native?: string
+  universal?: string
+}
+
+export interface WalletDesktop {
+  native?: string
+  universal?: string
+}

package/src/connect-modal/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Connect Modal - Barrel Export
+ *
+ * Exports the connect modal component and all related types and utilities
+ */
+
+export { ConnectModalBase } from './connect-modal.base.js'
+export { ConnectModal } from './connect-modal.js'
+export type {
+  ConnectionModalView,
+  ConnectModalSetup,
+  ConnectModalTheme,
+  WagmiConnector,
+  Wallet,
+  WalletConnector,
+} from './connect-modal.types'
+export {
+  disconnectWagmi,
+  getWagmiAccount,
+  getWagmiSetup,
+  setupConnectModal,
+  watchWagmiAccount,
+} from './services/wagmi'

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

@@ -0,0 +1,266 @@
+/**
+ * Wagmi Connector Adapter
+ * Converts wagmi/viem connectors to our WalletConnector format
+ */
+
+import { slug } from '@lukso/core/utils'
+import type {
+  ConnectModalSetup,
+  WagmiConnector,
+} from '../connect-modal.types.js'
+import type { WalletConnector } from '../index.js'
+
+// UP Extension ID
+const UP_EXTENSION_ID = 'cloud.universalprofile'
+
+// Global wagmi setup storage
+let globalWagmiSetup: ConnectModalSetup | null = null
+
+/**
+ * Convert a wagmi connector to our WalletConnector format
+ * @param connector - Wagmi connector instance
+ * @param connectFn - Function to call connect (from wagmi's useConnect)
+ * @param chainId - Optional chain ID to use for connection
+ */
+export function fromWagmiConnector(
+  connector: WagmiConnector,
+  connectFn: (options: {
+    connector: WagmiConnector
+    chainId?: number
+  }) => Promise<any>,
+  chainId?: number
+): WalletConnector {
+  // Determine connector type based on connector.id
+  let type: WalletConnector['type'] = 'injected'
+
+  // Extract rdns from connector (EIP-6963 providers expose this)
+  const rdns: string | undefined = connector.id
+
+  // Map wagmi connector types to our types
+  if (connector.id === 'walletConnect' || connector.type === 'walletConnect') {
+    type = 'walletconnect'
+  } else if (connector.id === 'injected' || connector.type === 'injected') {
+    type = 'injected'
+
+    // Check if this is UP Extension via ID
+    if (
+      connector.id === UP_EXTENSION_ID ||
+      connector.id.includes(UP_EXTENSION_ID)
+    ) {
+      type = 'extension'
+    }
+  }
+
+  return {
+    id: connector.uid || connector.id,
+    name: connector.name,
+    rdns,
+    type,
+    slug: slug(connector.name),
+    connect: async () => {
+      await connectFn({ connector, chainId })
+    },
+    getProvider: connector.getProvider
+      ? () => connector.getProvider()
+      : undefined,
+  }
+}
+
+/**
+ * Convert array of wagmi connectors to WalletConnector array
+ * @param connectors - Array of wagmi connectors
+ * @param connectFn - Function to call connect (from wagmi's useConnect)
+ * @param chainId - Optional chain ID to use for connection
+ * @param embeddedWalletId - Optional embedded wallet ID to identify it (e.g., 'dev.lukso.auth')
+ */
+export function fromWagmiConnectors(
+  connectors: WagmiConnector[],
+  connectFn: (options: {
+    connector: WagmiConnector
+    chainId?: number
+  }) => Promise<any>,
+  chainId?: number,
+  embeddedWalletId?: string
+): WalletConnector[] {
+  const result: WalletConnector[] = []
+
+  // 1. Find and add embedded wallet first (if ID provided)
+  // Check against original wagmi connector.id (not the converted UID)
+  let embeddedWalletConnector: WagmiConnector | undefined
+  let embeddedWallet: WalletConnector | undefined
+  if (embeddedWalletId) {
+    embeddedWalletConnector = connectors.find(
+      (connector) =>
+        connector.id === embeddedWalletId ||
+        connector.id.includes(embeddedWalletId)
+    )
+
+    if (embeddedWalletConnector) {
+      embeddedWallet = fromWagmiConnector(
+        embeddedWalletConnector,
+        connectFn,
+        chainId
+      )
+
+      // Customize for embedded wallet display
+      result.push({
+        ...embeddedWallet,
+        type: 'embedded',
+        slug: 'passkey-wallet',
+      })
+    }
+  }
+
+  // 2. Find and add UP Extension next (using ID)
+  const UP_EXTENSION_ID = 'cloud.universalprofile'
+  const upExtensionConnector = connectors.find(
+    (connector) =>
+      connector !== embeddedWalletConnector &&
+      (connector.id === UP_EXTENSION_ID ||
+        connector.id.includes(UP_EXTENSION_ID))
+  )
+
+  let upExtension: WalletConnector | undefined
+  if (upExtensionConnector) {
+    upExtension = fromWagmiConnector(upExtensionConnector, connectFn, chainId)
+  }
+
+  // Convert remaining wagmi connectors
+  const walletConnectors = connectors
+    .filter(
+      (connector) =>
+        connector !== embeddedWalletConnector &&
+        connector !== upExtensionConnector
+    )
+    .map((connector) => fromWagmiConnector(connector, connectFn, chainId))
+
+  if (upExtension) {
+    result.push(upExtension)
+  }
+
+  // 3. Find and add WalletConnect (for mobile)
+  const walletConnect = walletConnectors.find(
+    (connector) => connector.type === 'walletconnect'
+  )
+
+  if (walletConnect) {
+    result.push({
+      ...walletConnect,
+      type: 'mobile',
+      slug: 'up-mobile',
+    })
+  }
+
+  // 4. Add other wallets
+  const others = walletConnectors.filter(
+    (connector) =>
+      connector !== embeddedWallet &&
+      connector !== upExtension &&
+      connector !== walletConnect
+  )
+  result.push(...others)
+
+  return result
+}
+
+/**
+ * Setup wagmi for connect modal
+ * Call this once from your app initialization with wagmi config
+ *
+ * @example
+ * ```typescript
+ * import { setupConnectModal } from '@lukso/up-connector'
+ * import { wagmiConfig } from './wagmi-config'
+ *
+ * setupConnectModal({
+ *   wagmiConfig,
+ *   chainId: 42, // Optional: LUKSO mainnet
+ *   embeddedWalletConnect: async () => {
+ *     // Your passkey wallet logic
+ *   }
+ * })
+ * ```
+ */
+export function setupConnectModal(setup: ConnectModalSetup): void {
+  globalWagmiSetup = setup
+}
+
+/**
+ * Get the current wagmi setup (for internal use by connector)
+ */
+export function getWagmiSetup(): ConnectModalSetup | null {
+  return globalWagmiSetup
+}
+
+/**
+ * Get current wagmi account state
+ * Returns null if wagmi is not set up
+ */
+export async function getWagmiAccount(): Promise<{
+  isConnected: boolean
+  address?: string
+  chainId?: number
+  connector?: any
+} | null> {
+  if (!globalWagmiSetup) {
+    return null
+  }
+
+  try {
+    const { getAccount } = await import('@wagmi/core')
+    const account = getAccount(globalWagmiSetup.wagmiConfig)
+    return account
+  } catch (_error) {
+    return null
+  }
+}
+
+/**
+ * Subscribe to wagmi account changes
+ * Returns unsubscribe function
+ */
+export async function watchWagmiAccount(
+  callback: (account: {
+    isConnected: boolean
+    address?: string
+    chainId?: number
+    connector?: any
+  }) => void
+): Promise<(() => void) | null> {
+  if (!globalWagmiSetup) {
+    return null
+  }
+
+  try {
+    const { watchAccount } = await import('@wagmi/core')
+
+    const unsubscribe = watchAccount(globalWagmiSetup.wagmiConfig, {
+      onChange: (account) => {
+        callback(account)
+      },
+    })
+
+    return unsubscribe
+  } catch (_error) {
+    return null
+  }
+}
+
+/**
+ * Disconnect from wagmi
+ * Returns true if disconnect was successful
+ */
+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
+  }
+}

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

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

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

@@ -0,0 +1,43 @@
+import { MOBILE_APP_DEEP_LINK_PREFIX } from '../connect-modal.config'
+
+/**
+ * URL to Mobile App deep link used by Wallet Connect
+ *
+ * @param data
+ */
+export const walletConnectDeepLinkUrl = (
+  data?: string,
+  options?: {
+    withRedirectUrl?: boolean
+  }
+) => {
+  try {
+    if (!data || typeof data !== 'string') {
+      return ''
+    }
+
+    const dataUrl = new URL(data)
+
+    // add redirectUrl to deep link
+    if (options?.withRedirectUrl) {
+      const redirectUrl = new URL(location.href)
+
+      // remove modal query params so we don't re-open the modal
+      redirectUrl.searchParams.delete('modalTemplate')
+      redirectUrl.searchParams.delete('modalSize')
+
+      // add redirectUrl to dataUrl
+      dataUrl.searchParams.append(
+        'redirectUrl',
+        `${redirectUrl.origin}${redirectUrl.pathname}${redirectUrl.search}`
+      )
+    }
+
+    const deepLink = `${MOBILE_APP_DEEP_LINK_PREFIX}://wallet-connect/${dataUrl.pathname}${dataUrl.search}`
+
+    return deepLink
+  } catch (error: unknown) {
+    console.warn(error)
+    return ''
+  }
+}