@lukso/transaction-view-core 0.3.1-dev.a8c9315

package/src/registry/lit-view-loader.ts

@@ -0,0 +1,191 @@
+import type {
+  FrameworkViewConfig,
+  ViewMatch,
+} from '@lukso/transaction-view-headless'
+import { ViewLoadingError } from '@lukso/transaction-view-headless'
+
+/**
+ * Lit component view loader
+ * Handles loading of Lit web components for transaction views
+ */
+export class LitViewLoader {
+  private loadedComponents = new Map<string, any>()
+
+  /**
+   * Load a component from a view match
+   */
+  async loadFromMatch(match: ViewMatch): Promise<any> {
+    if (!match.frameworkConfig) {
+      throw new ViewLoadingError(
+        `No framework config for view "${match.view.id}"`,
+        { type: 'custom-element', tagName: '' },
+        {} as FrameworkViewConfig
+      )
+    }
+
+    return this.loadComponent(match.frameworkConfig)
+  }
+
+  /**
+   * Load a component based on framework config
+   */
+  async loadComponent(config: FrameworkViewConfig): Promise<any> {
+    const { loader, component } = config
+
+    // Check if already loaded
+    if (this.loadedComponents.has(component)) {
+      return this.loadedComponents.get(component)
+    }
+
+    try {
+      let loadedComponent: any
+
+      switch (loader.type) {
+        case 'custom-element':
+          loadedComponent = await this.loadCustomElement(loader.tagName)
+          break
+        case 'dynamic-import':
+          loadedComponent = await this.loadDynamicImport(loader.path)
+          break
+        case 'static-import':
+          loadedComponent = await this.loadStaticImport(loader.path)
+          break
+        case 'custom':
+          loadedComponent = await loader.loader(config)
+          break
+        default:
+          throw new ViewLoadingError(
+            `Unsupported loader type: ${(loader as any).type}`,
+            loader,
+            config
+          )
+      }
+
+      // Cache the loaded component
+      this.loadedComponents.set(component, loadedComponent)
+      return loadedComponent
+    } catch (error) {
+      throw new ViewLoadingError(
+        `Failed to load component "${component}"`,
+        loader,
+        config,
+        error instanceof Error ? error : new Error(String(error))
+      )
+    }
+  }
+
+  /**
+   * Load a custom element (Web Component)
+   */
+  private async loadCustomElement(tagName: string): Promise<any> {
+    // Check if the custom element is already defined
+    if (customElements.get(tagName)) {
+      return customElements.get(tagName)
+    }
+
+    // For our core components, they should be imported already
+    // This is a fallback to wait for definition
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(
+          new Error(`Custom element "${tagName}" not found after 5s timeout`)
+        )
+      }, 5000)
+
+      customElements
+        .whenDefined(tagName)
+        .then(() => {
+          clearTimeout(timeout)
+          resolve(customElements.get(tagName))
+        })
+        .catch(reject)
+    })
+  }
+
+  /**
+   * Load via dynamic import
+   */
+  private async loadDynamicImport(
+    path: string | (() => Promise<any>)
+  ): Promise<any> {
+    // Handle callback functions (lazy loading)
+    if (typeof path === 'function') {
+      const module = await path()
+      return module.default || module
+    }
+
+    // Handle string paths
+    const module = await import(/* @vite-ignore */ path)
+    return module.default || module
+  }
+
+  /**
+   * Load via static import (not really possible at runtime, but for completeness)
+   */
+  private async loadStaticImport(
+    path: string | (() => Promise<any>)
+  ): Promise<any> {
+    // This would typically be handled at build time
+    // For runtime, fallback to dynamic import
+    return this.loadDynamicImport(path)
+  }
+
+  /**
+   * Create a component instance with data
+   */
+  createInstance(componentClass: any, data: any): HTMLElement {
+    const element = new componentClass()
+
+    // Set data properties
+    Object.keys(data).forEach((key) => {
+      if (key in element) {
+        element[key] = data[key]
+      } else {
+        element.setAttribute(
+          key,
+          typeof data[key] === 'object'
+            ? JSON.stringify(data[key])
+            : String(data[key])
+        )
+      }
+    })
+
+    return element
+  }
+
+  /**
+   * Clear component cache
+   */
+  clearCache(): void {
+    this.loadedComponents.clear()
+  }
+}
+
+/**
+ * Global Lit view loader instance
+ */
+let globalLitLoader: LitViewLoader | null = null
+
+/**
+ * Get the global Lit view loader
+ */
+export function getGlobalLitLoader(): LitViewLoader {
+  if (!globalLitLoader) {
+    globalLitLoader = new LitViewLoader()
+  }
+  return globalLitLoader
+}
+
+/**
+ * Set a custom global Lit loader (useful for testing)
+ */
+export function setGlobalLitLoader(loader: LitViewLoader): void {
+  globalLitLoader = loader
+}
+
+/**
+ * Reset the global Lit loader (mainly for testing)
+ */
+export function resetGlobalLitLoader(): void {
+  globalLitLoader = null
+}

package/src/shared/address-display.ts

@@ -0,0 +1,370 @@
+import { Task } from '@lit/task'
+import {
+  useAddressResolver,
+  useImageLoader,
+} from '@lukso/transaction-view-headless'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+
+// LUKSO web components are loaded dynamically via plugin
+
+/**
+ * Address data interface for display
+ */
+export interface AddressData {
+  address: string
+  name?: string
+  lsp4TokenName?: string
+  lsp4TokenSymbol?: string
+  baseAsset?: {
+    lsp4TokenName?: string
+    lsp4TokenSymbol?: string
+  }
+  profileImages?: any[]
+  avatar?: any[]
+  icon?: any[]
+  images?: any[]
+  __gqltype?: string
+  __identity?: string
+  identity?: string
+}
+
+/**
+ * Universal address display component with profile resolution
+ *
+ * Displays an address with profile image and name, supporting both
+ * Universal Profiles and contract addresses with proper styling.
+ *
+ * @example
+ * ```html
+ * <address-display
+ *   address="0x1234..."
+ *   .resolved="${resolvedData}"
+ *   size="medium"
+ *   show-copy-button
+ * ></address-display>
+ * ```
+ */
+@safeCustomElement('address-display')
+export class AddressDisplay extends LitElement {
+  /**
+   * The address to display (required)
+   */
+  @property() value!: string
+
+  /**
+   * @deprecated Use `value` instead
+   */
+  @property() address?: string
+
+  /**
+   * Resolved address data (profile, images, etc.)
+   */
+  @property({ type: Object }) resolved?: AddressData
+
+  /**
+   * Display size
+   */
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' = 'small'
+
+  /**
+   * Optional label to display above the address
+   */
+  @property() label?: string
+
+  /**
+   * Whether to show the copy button
+   */
+  @property({ type: Boolean, attribute: 'show-copy-button' }) showCopyButton =
+    false
+
+  /**
+   * Whether to show the full address or just the name
+   */
+  @property({ type: Boolean, attribute: 'name-only' }) nameOnly = false
+
+  /**
+   * Maximum width for the name display (in pixels)
+   */
+  @property({ type: Number, attribute: 'max-width' }) maxWidth = 200
+
+  /**
+   * Get the effective address value (supports both `value` and legacy `address` props)
+   */
+  private get effectiveAddress(): string {
+    return this.value || this.address || ''
+  }
+
+  // Internal state
+  @state() private imageData?: { src: string }
+  @state() private isLoadingImage = false
+
+  // Composables
+  private imageLoader = useImageLoader()
+  private addressResolver = useAddressResolver()
+
+  // Task for loading profile image
+  private imageTask = new Task(this, {
+    task: async ([resolved], { signal }) => {
+      if (!resolved) return null
+
+      this.isLoadingImage = true
+      try {
+        const image = await this.imageLoader.loadProfileImage(resolved, {
+          width: this.getSizePixels(),
+          height: this.getSizePixels(),
+          dpr: window.devicePixelRatio || 1,
+        })
+
+        return image || this.imageLoader.getFallbackImage(resolved)
+      } catch (error) {
+        console.warn('Failed to load address image:', error)
+        return this.imageLoader.getFallbackImage(resolved || {})
+      } finally {
+        this.isLoadingImage = false
+      }
+    },
+    args: () => [this.resolved],
+  })
+
+  /**
+   * Get pixel size for the current size setting
+   */
+  private getSizePixels(): number {
+    switch (this.size) {
+      case 'x-small':
+        return 16
+      case 'small':
+        return 24
+      case 'medium':
+        return 32
+      case 'large':
+        return 48
+      default:
+        return 24
+    }
+  }
+
+  /**
+   * Get display name for the address
+   */
+  private getDisplayName(): string {
+    if (!this.resolved) return 'Anonymous'
+
+    const computedName = this.addressResolver.formatDisplayName(this.resolved)
+    return computedName || 'Anonymous'
+  }
+
+  /**
+   * Check if this is a contract address (shows square icon)
+   */
+  private get isContract(): boolean {
+    return this.resolved
+      ? this.imageLoader.isContractAddress(this.resolved)
+      : false
+  }
+
+  /**
+   * Get prefix for the address display
+   */
+  private get addressPrefix(): string {
+    return this.resolved
+      ? this.addressResolver.getAddressPrefix(this.resolved)
+      : '@'
+  }
+
+  /**
+   * Check if should show name colors
+   */
+  private get shouldShowNameColor(): boolean {
+    return this.resolved
+      ? this.addressResolver.shouldShowNameColor(this.resolved)
+      : true
+  }
+
+  /**
+   * Handle copy button click
+   */
+  private handleCopy() {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.effectiveAddress)
+      // Dispatch copy event for parent components
+      this.dispatchEvent(
+        new CustomEvent('address-copied', {
+          detail: { address: this.effectiveAddress },
+          bubbles: true,
+        })
+      )
+    }
+  }
+
+  /**
+   * Handle address click
+   */
+  private handleAddressClick() {
+    this.dispatchEvent(
+      new CustomEvent('address-click', {
+        detail: {
+          address: this.effectiveAddress,
+          resolved: this.resolved,
+        },
+        bubbles: true,
+      })
+    )
+  }
+
+  override render() {
+    const imageResult = this.imageTask.value
+
+    return html`
+      <div class="address-container">
+        ${this.label ? html`<div class="label">${this.label}</div>` : ''}
+        
+        <div class="address-display" @click=${this.handleAddressClick}>
+          <!-- Identity prefix (if present) -->
+          ${
+            this.resolved?.__identity
+              ? html`
+            <span class="identity">
+              ${this.resolved.__identity}
+              <lukso-username
+                address=${this.resolved.identity}
+                size=${this.size}
+                max-width="200"
+                has-name-color="false"
+                has-address-color="false"
+              ></lukso-username>
+              of
+            </span>
+          `
+              : ''
+          }
+
+          <!-- Profile image and name -->
+          <lukso-profile
+            size=${this.size}
+            profile-address=${this.effectiveAddress}
+            profile-url=${imageResult?.src || ''}
+            has-identicon
+            ?is-square=${this.isContract}
+          ></lukso-profile>
+
+          <!-- Address/Name display -->
+          ${
+            this.nameOnly
+              ? html`
+            <lukso-username
+              name=${this.getDisplayName()}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              prefix=${this.addressPrefix}
+              ?has-name-color=${this.shouldShowNameColor}
+              has-address-color="false"
+            ></lukso-username>
+          `
+              : html`
+            <lukso-username
+              name=${this.getDisplayName()}
+              address=${!this.isContract ? this.effectiveAddress : undefined}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              prefix=${this.addressPrefix}
+              ?has-name-color=${this.shouldShowNameColor}
+              ?has-address-color=${this.shouldShowNameColor}
+            ></lukso-username>
+          `
+          }
+
+
+          <!-- Copy button -->
+          ${
+            this.showCopyButton
+              ? html`
+            <button 
+              class="copy-button"
+              @click=${this.handleCopy}
+              title="Copy address"
+            >
+              📋
+            </button>
+          `
+              : ''
+          }
+        </div>
+      </div>
+    `
+  }
+
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .address-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .label {
+      font-size: 12px;
+      color: var(--neutral-60, #666);
+      font-weight: 500;
+    }
+
+    .address-display {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+      min-width: 200px;
+    }
+
+    .address-display:hover {
+      background-color: var(--neutral-95, #f5f5f5);
+    }
+
+    .identity {
+      font-size: 12px;
+      color: var(--neutral-60, #666);
+      margin-right: 4px;
+    }
+
+    .copy-button {
+      background: none;
+      border: 1px solid var(--neutral-80, #ccc);
+      border-radius: 4px;
+      padding: 2px 4px;
+      cursor: pointer;
+      font-size: 12px;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    .copy-button:hover {
+      background-color: var(--neutral-90, #eee);
+    }
+
+    .address-display:hover .copy-button {
+      opacity: 1;
+    }
+
+
+    /* Ensure LUKSO web components are properly styled */
+    lukso-profile,
+    lukso-username {
+      display: inline-flex;
+      align-items: center;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'address-display': AddressDisplay
+  }
+}