@lukso/up-connector 0.4.0-dev.a8c9315

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

@@ -0,0 +1,408 @@
+/**
+ * EOA Connection View - Lit Component
+ *
+ * Displays available EOA (Externally Owned Account) wallets for connection.
+ */
+
+import { Task } from '@lit/task'
+import { withDeviceService, withIntlService } from '@lukso/core/mixins'
+import debug from 'debug'
+import { html, nothing, type TemplateResult } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+
+import { ConnectModalBase } from '../connect-modal.base'
+import {
+  REOWN_PROJECT_ID,
+  SUPPORTED_WALLET_IDS_DESKTOP,
+  SUPPORTED_WALLET_IDS_MOBILE,
+  WALLETS_API_URL,
+} from '../connect-modal.config'
+import {
+  renderBackButton,
+  renderCloseButton,
+  renderLogo,
+  renderPlaceholder,
+  renderTitle,
+} from '../connect-modal.templates'
+import type {
+  Wallet,
+  WalletAppType,
+  WalletConnector,
+  WalletResponse,
+} from '../connect-modal.types'
+
+// Import lukso web components
+import '@lukso/web-components/dist/components/lukso-button'
+import '@lukso/web-components/dist/components/lukso-icon'
+import '@lukso/web-components/dist/components/lukso-tag'
+
+const logInfo = debug('connect-modal:info')
+
+export class EoaConnectionView extends withIntlService(
+  withDeviceService(ConnectModalBase)
+) {
+  @property({ type: Array }) connectors: WalletConnector[] = []
+
+  @state() private isConnecting = false
+  @state() private connectingRdns: string | undefined = undefined
+
+  /**
+   * Get WalletConnect connector
+   */
+  private get walletConnectConnector(): WalletConnector | undefined {
+    return this.connectors.find((connector) => connector.type === 'mobile')
+  }
+
+  /**
+   * Get EOA connectors
+   */
+  private get eoaConnectors(): WalletConnector[] {
+    return this.connectors.filter(
+      (connector) =>
+        connector.type !== 'embedded' &&
+        connector.type !== 'extension' &&
+        connector.type !== 'mobile' &&
+        connector.rdns !== 'io.lukso.up-extension' &&
+        connector.slug !== 'injected'
+    )
+  }
+
+  /**
+   * Get supported wallet IDs based on device type
+   *
+   * @returns
+   */
+  private supportedWalletIds(): string[] {
+    return this.device?.isMobile
+      ? SUPPORTED_WALLET_IDS_MOBILE
+      : SUPPORTED_WALLET_IDS_DESKTOP
+  }
+
+  /**
+   * Task to fetch EOA wallets - handles loading/error states automatically
+   */
+  private walletsTask = new Task(this as any, {
+    task: async ([_isMobile], { signal }): Promise<Wallet[]> => {
+      const walletIds: string[] = this.supportedWalletIds()
+      const url = `${WALLETS_API_URL}?projectId=${REOWN_PROJECT_ID}&ids=${walletIds.join(',')}`
+
+      const response = await fetch(url, { signal })
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch wallets')
+      }
+
+      const data = (await response.json()) as WalletResponse
+
+      return (
+        Object.entries(data.listings || {})
+          // map to attach installed status and connector
+          .map(([, wallet]) => {
+            const connector = this.eoaConnectors.find(
+              (connector: WalletConnector) => connector.rdns === wallet.rdns
+            )
+
+            return {
+              ...wallet,
+              isInstalled: connector?.rdns === wallet.rdns,
+              connector,
+            }
+          })
+          // sort by installed wallets first
+          .sort((a: Wallet, b: Wallet) =>
+            a.isInstalled === b.isInstalled ? 0 : a.isInstalled ? -1 : 1
+          )
+      )
+    },
+    args: () => [this.device?.isMobile],
+  })
+
+  /**
+   * Get device type
+   */
+  private deviceType(): WalletAppType {
+    if (this.device?.isMobile || this.device?.isTablet) {
+      if (this.device?.isIOS) {
+        return 'ios'
+      }
+
+      return 'android'
+    }
+
+    if (this.device?.isChrome) {
+      return 'chrome'
+    }
+
+    if (this.device?.isFirefox) {
+      return 'firefox'
+    }
+
+    if (this.device?.isSafari) {
+      return 'safari'
+    }
+
+    if (this.device?.isEdge) {
+      return 'edge'
+    }
+
+    if (this.device?.isOpera) {
+      return 'opera'
+    }
+
+    return 'browser'
+  }
+
+  /**
+   * Close modal
+   */
+  private handleClose(): void {
+    this.dispatchEvent(
+      new CustomEvent('on-close', { bubbles: true, composed: true })
+    )
+  }
+
+  /**
+   * Back to initial screen
+   */
+  private handleBack(): void {
+    this.dispatchEvent(
+      new CustomEvent('on-back', { bubbles: true, composed: true })
+    )
+  }
+
+  /**
+   * Handle wallet connect click
+   *
+   * @param wallet
+   */
+  private handleConnect(wallet: Wallet, event: CustomEvent): void {
+    event.stopPropagation() // Prevent event bubbling
+    this.connectingRdns = wallet.rdns
+
+    if (this.device?.isMobile) {
+      this.connectMobile(wallet)
+      return
+    }
+
+    this.connectDesktop(wallet)
+  }
+
+  /**
+   * Connect to wallet on desktop using selected connector
+   *
+   * @param wallet
+   */
+  private async connectDesktop(wallet: Wallet): Promise<void> {
+    // Open wallet app store link if wallet is not installed
+    if (!wallet.isInstalled) {
+      window.open(wallet.app[this.deviceType()], '_blank')
+      return
+    }
+
+    const connector = wallet.connector
+
+    if (connector) {
+      try {
+        logInfo('Connecting via connector:', connector)
+        this.isConnecting = true
+
+        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
+      }
+    }
+  }
+
+  /**
+   * Connect to wallet on mobile using WalletConnect
+   */
+  private async connectMobile(wallet: Wallet): Promise<void> {
+    const connector = this.walletConnectConnector
+
+    if (connector) {
+      try {
+        logInfo('Connecting via WalletConnect connector:', connector)
+        this.isConnecting = true
+
+        // 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 URI received:', displayUri)
+
+            const encodedUri = encodeURIComponent(displayUri)
+
+            // Use native deep link if available
+            if (wallet.mobile?.native) {
+              window.location.href = `${wallet.mobile.native}wc?uri=${encodedUri}`
+            } else if (wallet.rdns === 'com.coinbase.wallet') {
+              // Coinbase has no native deep link provided, use custom scheme
+              window.location.href = `cbwallet://wc?uri=${encodedUri}`
+            } else {
+              // For other wallets, use universal wc: scheme
+              window.location.href = displayUri
+            }
+
+            // 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,
+          })
+        )
+      } finally {
+        this.isConnecting = false
+      }
+    }
+  }
+
+  /**
+   * Render the list of EOA wallets
+   */
+  private renderWalletsList(): TemplateResult<1> | undefined {
+    return this.walletsTask.render({
+      // Success state
+      complete: (wallets: any) =>
+        html`${wallets.map((wallet: any) => {
+          const isLoading =
+            this.isConnecting && this.connectingRdns === wallet.rdns
+          const isInstalled = this.eoaConnectors.some(
+            (connector: WalletConnector) => connector.rdns === wallet.rdns
+          )
+          const logo = wallet.image_url?.sm
+            ? html`<img src="${wallet.image_url.sm}" alt="${wallet.name} logo" class="h-8 rounded-full mr-2" />`
+            : nothing
+
+          return keyed(
+            wallet.slug,
+            html`<lukso-button
+            variant="secondary"
+            size=${this.device?.isMobile ? 'medium' : 'large'}
+            is-full-width
+            ?disabled=${this.isConnecting}
+            ?is-loading=${isLoading}
+            loading-text=${wallet.name}
+            @click=${(event: CustomEvent) => this.handleConnect(wallet, event)}
+          >
+            <div
+              class="grid w-full grid-cols-[max-content,auto,max-content] items-center gap-3 text-left animate-fade-in"
+            >
+              ${logo}
+              <div class="truncate">${wallet.name}</div>
+              <div class="flex items-center">
+                ${
+                  isInstalled
+                    ? html`<lukso-tag
+                  size="x-small"
+                  text-color="green-45"
+                  background-color="green-85"
+                >
+                  ${this.formatMessage('connect_modal_installed')}
+                </lukso-tag>`
+                    : nothing
+                }
+              </div>
+            </div>
+          </lukso-button>`
+          )
+        })}`,
+      // Loading state
+      pending: () =>
+        html`${this.supportedWalletIds().map(() =>
+          renderPlaceholder(
+            `w-full ${this.device?.isMobile ? 'h-10 !rounded-10' : 'h-12 !rounded-12'}`
+          )
+        )}`,
+      // Error state
+      error: (_error: unknown) => {
+        return html`<div class="flex flex-col justify-center items-center py-10">
+          <div class="mb-4">${this.formatMessage('connect_modal_failed_to_load')}</div>
+          <lukso-button size="medium" variant="secondary" @click=${() => this.walletsTask.run()}>${this.formatMessage('connect_modal_try_again')}</lukso-button>
+        </div>`
+      },
+    })
+  }
+
+  /**
+   * Main render method
+   */
+  render(): TemplateResult<1> {
+    return html`
+      <div class="flex justify-between">
+        <button
+          @click=${this.handleBack}
+        >
+          ${renderBackButton()}
+        </button>
+
+        <button
+          @click=${this.handleClose}
+        >
+          ${renderCloseButton()}
+        </button>
+      </div>
+      <div class="flex flex-col items-center text-center">
+        ${renderLogo()}
+        ${renderTitle(this.formatMessage('connect_modal_eoa_title'))}
+        <div class="mt-2 flex w-full flex-col gap-2">
+          ${this.renderWalletsList()}
+        </div>
+      </div>
+    `
+  }
+}
+
+// Register custom element
+customElements.define('eoa-connection-view', EoaConnectionView as any)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'eoa-connection-view': EoaConnectionView
+  }
+}

package/src/connect-modal/components/qr-code-view.ts

@@ -0,0 +1,71 @@
+/**
+ * QR Code View - Lit Component
+ *
+ * Displays Wallet Connect QR code for mobile connection.
+ */
+
+import { html, type TemplateResult } from 'lit'
+
+import { ConnectModalBase } from '../connect-modal.base'
+
+// Import lukso web components
+import '@lukso/web-components/dist/components/lukso-qr-code'
+import { withIntlService } from '@lukso/core/mixins'
+import { property } from 'lit/decorators.js'
+import { renderBackButton, renderCloseButton } from '../connect-modal.templates'
+import cubeGlassImage from '../images/up-cube-glass.png'
+
+export class QrCodeView extends withIntlService(ConnectModalBase) {
+  @property({ type: String }) data: string | undefined = undefined
+
+  /**
+   * Back to initial screen
+   */
+  private handleBack(): void {
+    this.dispatchEvent(
+      new CustomEvent('on-back', { bubbles: true, composed: true })
+    )
+  }
+
+  /**
+   * Close modal
+   */
+  private handleClose(): void {
+    this.dispatchEvent(
+      new CustomEvent('on-close', { bubbles: true, composed: true })
+    )
+  }
+
+  render(): TemplateResult<1> {
+    return html`<div class="flex justify-between">
+        <button
+          @click=${this.handleBack}
+        >
+          ${renderBackButton()}
+        </button>
+
+        <button
+          @click=${this.handleClose}
+        >
+          ${renderCloseButton()}
+        </button>
+      </div>
+      <div class="flex flex-col items-center text-center">
+        <div class="heading-inter-21-semi-bold mb-4">
+        ${this.formatMessage('connect_modal_qr_code_title')}
+      </div>
+      <div class="paragraph-inter-16-regular mb-6">
+        ${this.formatMessage('connect_modal_qr_code_description')}
+      </div>
+        <lukso-qr-code size="340" .value="${this.data}" image="${cubeGlassImage}"></lukso-qr-code></div>`
+  }
+}
+
+// Register custom element
+customElements.define('qr-code-view', QrCodeView as any)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'qr-code-view': QrCodeView
+  }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Connect Modal Base - Lit Component
+ *
+ * Base component for Connect Modal. Provides shared styles for all components.
+ */
+
+import { css, LitElement, unsafeCSS } from 'lit'
+import output from './styles/styles.css?raw'
+
+const style = css`
+  ${unsafeCSS(output)}
+`
+
+export class ConnectModalBase extends LitElement {
+  static styles = [style]
+}
+
+export default style

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

@@ -0,0 +1,27 @@
+/**
+ * Supported wallet IDs (from Reown) for mobile
+ */
+export const SUPPORTED_WALLET_IDS_MOBILE = [
+  'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
+]
+
+/**
+ * Supported wallet IDs (from Reown) for desktop
+ */
+export const SUPPORTED_WALLET_IDS_DESKTOP = [
+  'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
+  'ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18', // Zerion
+  'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Coinbase
+  // '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369', // Rainbow - temporary hide due to issue in Wagmi detection of this wallet
+]
+
+// Wallets api from https://walletguide.walletconnect.network/
+export const WALLETS_API_URL =
+  'https://explorer-api.walletconnect.com/v3/wallets'
+
+// Reown project id
+export const REOWN_PROJECT_ID = '68cee9cbecf1293488f207237e89f337'
+
+// deep link prefix used by Mobile App
+export const MOBILE_APP_DEEP_LINK_PREFIX =
+  'io.universaleverything.universalprofiles'

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

@@ -0,0 +1,21 @@
+import { cn } from '@lukso/web-components/tools'
+import { html } from 'lit'
+import cubeGlassImage from './images/up-cube-glass.png'
+
+export const renderCloseButton = () =>
+  html`<lukso-icon name="close-lg"
+    class="cursor-pointer transition-opacity hover:opacity-60"></lukso-icon>`
+
+export const renderBackButton = () =>
+  html`<lukso-icon name="arrow-left-lg" class="cursor-pointer transition-opacity hover:opacity-60"></lukso-icon>`
+
+export const renderLogo = () =>
+  html`<img src="${cubeGlassImage}" alt="" class="mb-5 w-14 animate-bounce2" />`
+
+export const renderTitle = (title: string) =>
+  html`<h2 class="m-0 mb-4 text-neutral-20 dark:text-white heading-inter-21-semi-bold">
+    ${title}
+  </h2>`
+
+export const renderPlaceholder = (style: string) =>
+  html`<div class="${cn('bg-neutral-90 dark:bg-neutral-80 rounded-4 animate-pulse', style)}"></div>`