@lukso/up-connector 0.8.5 → 0.9.0-dev.d3f910d

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

@@ -1,227 +0,0 @@
-/**
- * Connect Modal - Lit Component
- *
- * Framework-agnostic connection modal for wallet/profile connections.
- */
-
-import { withDeviceService, withTheme } 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,
-  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 withTheme(
-  withDeviceService(ConnectModalBase)
-) {
-  // Public properties
-  @property({ type: Boolean, reflect: true }) open = false
-
-  // Private state
-  @state() private connectors: WalletConnector[] = []
-  // isDark state is provided by withTheme mixin
-  @state() private modalView: ConnectionModalView = 'up_connection'
-  @state() private qrCodeData: string | undefined = undefined
-
-  updated(changedProperties: Map<string, any>): void {
-    super.updated(changedProperties)
-
-    // 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()
-    }
-  }
-
-  /**
-   * Close modal
-   */
-  handleClose(): void {
-    this.open = false
-
-    this.dispatchEvent(
-      new CustomEvent('on-close', { bubbles: true, composed: true })
-    )
-  }
-
-  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}
-          .theme=${this.theme}
-          @on-back=${this.handleBackToConnectionView}
-          @on-close=${this.handleClose}
-        ></qr-code-view>`
-      case 'eoa_connection':
-        return html`
-          <eoa-connection-view
-            .connectors=${this.connectors}
-            .theme=${this.theme}
-            @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}
-            .theme=${this.theme}
-            @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"
-        .theme=${this.theme}
-        @on-backdrop-click=${this.handleClose}
-      >
-        <div class="p-6 w-full sm:w-[372px]">
-          ${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

@@ -1,108 +0,0 @@
-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>
-  switchChain?: (params: {
-    chainId?: number
-    addEthereumChainParameter?: any
-  }) => Promise<void>
-}
-
-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

@@ -1,25 +0,0 @@
-/**
- * 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 type { WagmiConnection } from './services/wagmi'
-export {
-  disconnect,
-  getConnection,
-  getWagmiSetup,
-  setupWagmi as setupConnectModal,
-  wagmi,
-  watchConnection,
-} from './services/wagmi'