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

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

@@ -1,418 +0,0 @@
-/**
- * EOA Connection View - Lit Component
- *
- * Displays available EOA (Externally Owned Account) wallets for connection.
- */
-
-import { Task } from '@lit/task'
-import {
-  withDeviceService,
-  withIntlService,
-  withTheme,
-} 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'
-import { getWagmiSetup } from '../services/wagmi'
-
-const logInfo = debug('connect-modal:info')
-
-export class EoaConnectionView extends withTheme(
-  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
-
-        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
-      }
-    }
-  }
-
-  /**
-   * 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
-            .theme=${this.theme}
-            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="${this.device?.isMobile ? 'x-small' : 'small'}"
-                  text-color="green-45"
-                  background-color="${this.theme === 'dark' ? 'neutral-20' : 'neutral-100'}"
-                  border-color="green-45"
-                >
-                  ${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(this.theme)}
-        </button>
-
-        <button
-          @click=${this.handleClose}
-        >
-          ${renderCloseButton(this.theme)}
-        </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

@@ -1,86 +0,0 @@
-/**
- * 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, withTheme } from '@lukso/core/mixins'
-import type { QRCodeOptions } from '@lukso/web-components'
-import { property } from 'lit/decorators.js'
-import {
-  renderBackButton,
-  renderCloseButton,
-  renderTitle,
-} from '../connect-modal.templates'
-import cubeGlassImage from '../images/up-cube-glass.png'
-
-export class QrCodeView extends withTheme(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 })
-    )
-  }
-
-  private get qrCodeOptions(): QRCodeOptions {
-    return {
-      dotsOptions: {
-        color: this.isDark ? '#F5F8FA' : '#243542',
-      },
-      backgroundOptions: {
-        color: this.isDark ? '#243542' : '#FFFFFF',
-      },
-    }
-  }
-
-  render(): TemplateResult<1> {
-    return html`<div class="flex justify-between">
-        <button
-          @click=${this.handleBack}
-        >
-          ${renderBackButton(this.theme)}
-        </button>
-
-        <button
-          @click=${this.handleClose}
-        >
-          ${renderCloseButton(this.theme)}
-        </button>
-      </div>
-      <div class="flex flex-col items-center text-center">
-        ${renderTitle(this.formatMessage('connect_modal_qr_code_title'))}
-
-      <div class="paragraph-inter-16-regular text-neutral-20 dark:text-neutral-100 mb-4">
-        ${this.formatMessage('connect_modal_qr_code_description')}
-      </div>
-        <lukso-qr-code size="320" .value="${this.data}" image="${cubeGlassImage}" .options="${this.qrCodeOptions}" class="rounded-12 overflow-hidden"></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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-import type { Theme } from '@lukso/core'
-import { cn } from '@lukso/web-components/tools'
-import { html } from 'lit'
-import cubeGlassImage from './images/up-cube-glass.png'
-
-export const renderCloseButton = (theme: Theme) =>
-  html`<lukso-icon name="close-lg"
-    class="cursor-pointer transition-opacity hover:opacity-60" color="${theme === 'dark' ? 'neutral-100' : 'neutral-20'}"></lukso-icon>`
-
-export const renderBackButton = (theme: Theme) =>
-  html`<lukso-icon name="arrow-left-lg" class="cursor-pointer transition-opacity hover:opacity-60" color="${theme === 'dark' ? 'neutral-100' : 'neutral-20'}"></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-neutral-100 heading-inter-21-semi-bold">
-    ${title}
-  </h2>`
-
-export const renderPlaceholder = (style: string) =>
-  html`<div class="${cn('bg-neutral-90 dark:bg-neutral-20 rounded-4 animate-pulse', style)}"></div>`