@lukso/up-connector 0.4.0-dev.a8c9315

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

@@ -0,0 +1,398 @@
+/**
+ * Connection View - Lit Component
+ *
+ * Main connection view displaying primary Lukso connectors and option to show EOA connectors.
+ */
+
+import { withDeviceService, withIntlService } 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 { walletConnectDeepLinkUrl } from '../utils/walletConnectDeepLinkUrl'
+
+const logInfo = debug('connect-modal:info')
+
+export class ConnectionView extends 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 {
+    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
+
+    // TBA: Check if not supported browser
+
+    // TBA: Extension is not installed then link to store
+
+    // TBA: Switch extension to current chain
+    if (connector) {
+      try {
+        logInfo('Connecting via connector:', connector)
+        this.isConnecting = true
+        this.connectingRdns = connector.rdns
+
+        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"
+        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"
+          secondary-color="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-15 px-4 text-neutral-40 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-70" />
+      </div>
+      <div class="paragraph-inter-16-regular py-4">
+        ${this.formatMessage('connect_modal_or_info')}
+      </div>
+    `
+  }
+
+  render(): TemplateResult<1> {
+    return html`
+      <div class="flex justify-end">
+        <button
+          @click=${this.handleClose}
+        >
+          ${renderCloseButton()}
+        </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">
+          ${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
+          ?disabled=${this.isConnecting}
+          @click=${this.handleShowEoaConnections}
+        >
+          <lukso-icon
+            name="wallet-outline"
+            size=${this.device?.isMobile ? 'small' : 'medium'}
+            class="mr-2"
+          ></lukso-icon>
+          ${this.formatMessage('connect_modal_other_connectors')}
+        </lukso-button>
+      </div>
+    `
+  }
+}
+
+// Register custom element
+customElements.define('connection-view', ConnectionView as any)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'connection-view': ConnectionView
+  }
+}