@lukso/up-connector 0.8.3 → 0.8.5-dev.2df3eae

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

@@ -1,418 +0,0 @@
-/**
- * Connection View - Lit Component
- *
- * Main connection view displaying primary Lukso connectors and option to show EOA connectors.
- */
-
-import {
-  withDeviceService,
-  withIntlService,
-  withTheme,
-} from '@lukso/core/mixins'
-import { html, type TemplateResult } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { ConnectModalBase } from '../connect-modal.base'
-import {
-  renderCloseButton,
-  renderLogo,
-  renderTitle,
-} from '../connect-modal.templates'
-import type { WalletConnector } from '../connect-modal.types'
-import '@lukso/web-components/dist/components/lukso-button'
-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')
-
-export class ConnectionView extends withTheme(
-  withIntlService(withDeviceService(ConnectModalBase))
-) {
-  @property({ type: Boolean }) isConnecting = false
-  @property({ type: String }) connectingRdns: string | undefined = undefined
-  @property({ type: Array }) connectors: WalletConnector[] = []
-
-  /**
-   * Get WalletConnect connector
-   */
-  private get walletConnectConnector(): WalletConnector | undefined {
-    return this.connectors.find((connector) => connector.type === 'mobile')
-  }
-
-  /**
-   * Universal Profile browser extension connector
-   */
-  private get upExtensionConnector(): WalletConnector | undefined {
-    return this.connectors.find((connector) => connector.type === 'extension')
-  }
-
-  /**
-   * Passkey / Embedded wallet connector
-   */
-  private get embeddedWalletConnector(): WalletConnector | undefined {
-    return this.connectors.find((connector) => connector.type === 'embedded')
-  }
-
-  /**
-   * Get browser extension store info
-   */
-  private get extensionStore(): BrowserInfo {
-    if (!this.device) {
-      throw new Error('DeviceService not initialized')
-    }
-    const info = browserInfo(this.device)
-    return info
-  }
-
-  /**
-   * Check if browser supports extension installation
-   */
-  private get browserSupportExtension(): boolean {
-    return this.extensionStore.storeLink !== ''
-  }
-
-  /**
-   * Handle connect via embedded wallet
-   */
-  private handleConnectEmbedded = async (): Promise<void> => {
-    const connector = this.embeddedWalletConnector
-
-    try {
-      logInfo('Connecting via connector:', connector)
-      await connector?.connect()
-
-      // Dispatch connect event
-      this.dispatchEvent(
-        new CustomEvent('on-connect', {
-          detail: { connector },
-          bubbles: true,
-          composed: true,
-        })
-      )
-    } catch (error) {
-      // Dispatch error event
-      this.dispatchEvent(
-        new CustomEvent('on-error', {
-          detail: { error },
-          bubbles: true,
-          composed: true,
-        })
-      )
-    }
-  }
-
-  /**
-   * Handle connect via UP Extension
-   */
-  private handleConnectExtension = async (): Promise<void> => {
-    const connector = this.upExtensionConnector
-
-    // If Lukso extension is not installed, open store link
-    if (!window.lukso) {
-      window.open(this.extensionStore.storeLink, '_blank')
-      return
-    }
-
-    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
-        this.dispatchEvent(
-          new CustomEvent('on-connect', {
-            detail: { connector },
-            bubbles: true,
-            composed: true,
-          })
-        )
-      } catch (error) {
-        // Dispatch error event
-        this.dispatchEvent(
-          new CustomEvent('on-error', {
-            detail: { error },
-            bubbles: true,
-            composed: true,
-          })
-        )
-      } finally {
-        this.isConnecting = false
-        this.connectingRdns = undefined
-      }
-    }
-  }
-
-  /**
-   * Handle connect via UP Mobile (WalletConnect)
-   */
-  private handleConnectMobile = async (): Promise<void> => {
-    const connector = this.walletConnectConnector
-
-    if (connector) {
-      try {
-        logInfo('Connecting via connector:', connector)
-        this.isConnecting = true
-        this.connectingRdns = connector.rdns
-
-        // Start the connection - this initiates the WalletConnect flow
-        // The promise will resolve when wallet approves or reject when user rejects
-        const connectPromise = connector.connect()
-
-        // Get the provider to listen for the display_uri event
-        const provider = await connector.getProvider?.()
-
-        // Listen for the display_uri event which is emitted after connect
-        if (provider) {
-          const handleDisplayUri = (displayUri: string) => {
-            logInfo('WalletConnect original URI:', displayUri)
-
-            const deepLink = walletConnectDeepLinkUrl(displayUri)
-
-            logInfo('Mobile App Deep Link:', deepLink)
-
-            if (this.device?.isMobile) {
-              window.open(deepLink, '_blank')
-            } else {
-              this.handleShowQrCode(deepLink)
-            }
-
-            // Clean up listener
-            provider.off('display_uri', handleDisplayUri)
-          }
-
-          provider.on('display_uri', handleDisplayUri)
-        }
-
-        // Wait for the connection to complete
-        // This will throw if the user rejects the connection
-        await connectPromise
-
-        // Dispatch connect event only if connection succeeded
-        this.dispatchEvent(
-          new CustomEvent('on-connect', {
-            detail: { connector },
-            bubbles: true,
-            composed: true,
-          })
-        )
-      } catch (error) {
-        // Dispatch error event
-        this.dispatchEvent(
-          new CustomEvent('on-error', {
-            detail: { error },
-            bubbles: true,
-            composed: true,
-          })
-        )
-
-        // Reset to connection view if on QR code view
-        this.dispatchEvent(
-          new CustomEvent('on-back', { bubbles: true, composed: true })
-        )
-      } finally {
-        this.isConnecting = false
-        this.connectingRdns = undefined
-      }
-    }
-  }
-
-  /**
-   * Close modal
-   */
-  private handleClose(): void {
-    this.dispatchEvent(
-      new CustomEvent('on-close', { bubbles: true, composed: true })
-    )
-  }
-
-  /**
-   * Handle showing EOA connections
-   */
-  private handleShowEoaConnections(): void {
-    this.dispatchEvent(
-      new CustomEvent('on-show-eoa-connections-view', {
-        bubbles: true,
-        composed: true,
-      })
-    )
-  }
-
-  /**
-   * Handle showing QR code
-   */
-  private handleShowQrCode(data: string): void {
-    this.dispatchEvent(
-      new CustomEvent('on-show-qr-code', {
-        detail: { data },
-        bubbles: true,
-        composed: true,
-      })
-    )
-  }
-
-  /**
-   * Render connector button
-   *
-   * @param iconName
-   * @param label
-   * @param onClick
-   * @param isLoading
-   * @param isDisabled
-   */
-  private renderConnectorButton(
-    iconName: string,
-    label: string,
-    onClick: () => void,
-    isLoading?: boolean,
-    isDisabled?: boolean
-  ): TemplateResult<1> {
-    return html`
-      <lukso-button
-        variant="secondary"
-        .theme=${this.theme}
-        size=${this.device?.isMobile ? 'medium' : 'large'}
-        is-full-width
-        ?disabled=${isDisabled}
-        ?is-loading=${isLoading}
-        loading-text=${label}
-        @click=${onClick}
-      >
-        <lukso-icon
-          name=${iconName}
-          size=${this.device?.isMobile ? 'small' : 'medium'}
-          class="mr-2"
-          color="${this.theme === 'dark' ? 'neutral-100' : 'neutral-20'}"
-          secondary-color="${this.theme === 'dark' ? 'neutral-20' : 'neutral-100'}"
-        ></lukso-icon>
-        ${label}
-      </lukso-button>
-    `
-  }
-
-  private renderConnectors(): TemplateResult<1>[] {
-    const templates: TemplateResult<1>[] = []
-
-    // Passkey / Embedded wallet
-    if (this.embeddedWalletConnector) {
-      templates.push(
-        this.renderConnectorButton(
-          'key-outline',
-          this.formatMessage('connect_modal_connectors_passkey_wallet'),
-          this.handleConnectEmbedded,
-          false,
-          this.isConnecting
-        )
-      )
-    }
-
-    // UP Extension
-
-    templates.push(
-      this.renderConnectorButton(
-        this.extensionStore.icon,
-        this.formatMessage('connect_modal_connectors_up_browser_extension'),
-        this.handleConnectExtension,
-        this.isConnecting &&
-          this.connectingRdns === this.upExtensionConnector?.rdns,
-        this.isConnecting ||
-          this.device?.isMobile ||
-          !this.browserSupportExtension
-      )
-    )
-
-    // UP mobile (WalletConnect)
-    if (this.walletConnectConnector) {
-      templates.push(
-        this.renderConnectorButton(
-          'phone-portrait-outline',
-          this.formatMessage('connect_modal_connectors_up_mobile'),
-          this.handleConnectMobile,
-          this.isConnecting &&
-            this.connectingRdns === this.walletConnectConnector.rdns,
-          this.isConnecting
-        )
-      )
-    }
-
-    return templates
-  }
-
-  /**
-   * Render divider with text
-   */
-  private renderDivider(): TemplateResult<1> {
-    return html`
-      <div class="relative w-full my-2">
-        <div class="paragraph-inter-12-regular relative z-[1] bg-neutral-98 dark:bg-neutral-10 px-4 text-neutral-40 dark:text-neutral-95 inline-block">
-          ${this.formatMessage('connect_modal_or')}
-        </div>
-        <div class="absolute top-[13px] left-0 right-0 h-px bg-neutral-80 dark:bg-neutral-80" />
-      </div>
-      <div class="paragraph-inter-16-regular py-4 text-neutral-20 dark:text-neutral-100">
-        ${this.formatMessage('connect_modal_or_info')}
-      </div>
-    `
-  }
-
-  render(): TemplateResult<1> {
-    return html`
-      <div class="flex justify-end">
-        <button
-          @click=${this.handleClose}
-        >
-          ${renderCloseButton(this.theme)}
-        </button>
-      </div>
-      <div class="flex flex-col items-center text-center">
-        ${renderLogo()}
-        ${renderTitle(this.formatMessage('connect_modal_title'))}
-        <p class="mb-6 paragraph-inter-16-regular text-neutral-20 dark:text-neutral-100">
-          ${this.formatMessage('connect_modal_description')}
-        </p>
-        <div class="${cn('flex w-full gap-2 mb-4', this.device?.isMobile ? 'flex-col-reverse' : 'flex-col')}">
-          ${this.renderConnectors()}
-        </div>
-        ${this.renderDivider()}
-        <lukso-button
-          variant="secondary"
-          size=${this.device?.isMobile ? 'medium' : 'large'}
-          is-full-width
-          .theme=${this.theme}
-          ?disabled=${this.isConnecting}
-          @click=${this.handleShowEoaConnections}
-        >
-          <lukso-icon
-            name="wallet-outline"
-            size=${this.device?.isMobile ? 'small' : 'medium'}
-            class="mr-2"
-            color="${this.theme === 'dark' ? 'neutral-100' : 'neutral-20'}"
-          ></lukso-icon>
-          ${this.formatMessage('connect_modal_other_connectors')}
-        </lukso-button>
-      </div>
-    `
-  }
-}
-
-// Register custom element
-customElements.define('connection-view', ConnectionView as any)
-
-declare global {
-  interface Window {
-    lukso?: any
-  }
-
-  interface HTMLElementTagNameMap {
-    'connection-view': ConnectionView
-  }
-}