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

package/src/shared/image-list.ts

@@ -0,0 +1,261 @@
+import { Task } from '@lit/task'
+import { useAddressResolver } from '@lukso/transaction-view-headless'
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { safeCustomElement } from './safe-custom-element'
+import './icon-view.js'
+import { CoreLitElement } from '../styles'
+
+/**
+ * Image list component for displaying arrays of images/assets
+ *
+ * Displays a list of images from a resolved address property (e.g., 'images', 'assets').
+ * If items have an 'index' property, shows only items with matching indices.
+ * Handles different file types (images, videos, audio, generic files).
+ *
+ * @example
+ * ```html
+ * <!-- Display all images -->
+ * <image-list
+ *   address="0x1234..."
+ *   image-hint="images"
+ * ></image-list>
+ *
+ * <!-- Display images with index 0-5 -->
+ * <image-list
+ *   address="0x1234..."
+ *   image-hint="images"
+ *   min-index="0"
+ *   max-index="5"
+ * ></image-list>
+ * ```
+ */
+@safeCustomElement('image-list')
+export class ImageList extends CoreLitElement {
+  /**
+   * The address to display (required)
+   */
+  @property() address!: string
+
+  /**
+   * Property name to use for loading images (e.g., 'images', 'assets')
+   * This should point to an array property on the resolved data
+   */
+  @property({ type: String, attribute: 'image-hint' }) imageHint!: string
+
+  /**
+   * Minimum index to display (only applies if items have index property)
+   */
+  @property({ type: Number, attribute: 'min-index' }) minIndex?: number
+
+  /**
+   * Maximum index to display (only applies if items have index property)
+   */
+  @property({ type: Number, attribute: 'max-index' }) maxIndex?: number
+
+  /**
+   * Display size for images
+   */
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' = 'small'
+
+  /**
+   * Optional card view: wrap list in a bordered, padded container
+   */
+  @property({ type: Boolean, attribute: 'is-card-view' }) isCardView = false
+
+  // Internal state
+  @state() private isLoading = false
+
+  // Composables
+  private addressResolver = useAddressResolver()
+
+  // Task for resolving address data
+  private addressTask = new Task(this, {
+    task: async ([address], { signal }) => {
+      if (!address) return null
+
+      this.isLoading = true
+      try {
+        const resolved = await this.addressResolver.resolveAddress(address)
+        return resolved
+      } catch (error) {
+        console.warn('❌ ImageList: Failed to resolve address:', error)
+        return null
+      } finally {
+        this.isLoading = false
+      }
+    },
+    args: () => [this.address],
+  })
+
+  /**
+   * Get the list of items to display from resolved data
+   */
+  private getDisplayItems(): any[] {
+    const resolved = this.addressTask.value
+    if (!resolved) return []
+    console.log('resolved images are', resolved)
+    const items = (resolved as any)[this.imageHint]
+    if (!Array.isArray(items)) return []
+
+    // Check if items have an index property
+    const hasIndex = items.length > 0 && items[0]?.index !== undefined
+
+    if (!hasIndex) {
+      // No index property, return all items
+      return items
+    }
+
+    // Filter by index range
+    return items.filter((item) => {
+      const index = item.index
+      if (this.minIndex !== undefined && index < this.minIndex) return false
+      if (this.maxIndex !== undefined && index > this.maxIndex) return false
+      return true
+    })
+  }
+
+  /**
+   * Check if an item is an actual image based on fileType
+   */
+  private isImageFile(item: any): boolean {
+    if (!item.fileType) return true // Assume image if no fileType
+    return item.fileType.startsWith('image/')
+  }
+
+  /**
+   * Get file type icon for non-image files
+   */
+  private getFileTypeIcon(item: any): string {
+    if (!item.fileType) return '📄'
+
+    if (item.fileType.startsWith('video/')) return '🎥'
+    if (item.fileType.startsWith('audio/')) return '🎵'
+    if (item.fileType.startsWith('application/pdf')) return '📕'
+    return '📄'
+  }
+
+  /**
+   * Render a single image item
+   */
+  private renderImageItem(item: any, index: number) {
+    const itemIndex = item.index !== undefined ? item.index : index
+    const isImage = this.isImageFile(item)
+
+    if (isImage) {
+      // Show broken image placeholder if image doesn't exist or can't load
+      const imageSrc = item.src || item.url
+
+      if (!imageSrc) {
+        return html`
+          <div class="image-item broken-image-item">
+            <div class="broken-image-icon">🖼️❌</div>
+            ${
+              item.index !== undefined
+                ? html`<div class="broken-image-label">#${item.index}</div>`
+                : ''
+            }
+            <div class="broken-image-text">No image</div>
+          </div>
+        `
+      }
+
+      // Use direct image display instead of icon-view to avoid identicons
+      return html`
+        <div class="">
+          <img
+            class="min-h-20 min-w-20 object-cover rounded-lg"
+            src=${imageSrc}
+            alt=${item.index !== undefined ? `#${item.index}` : 'Image'}
+            @error=${(e: Event) => {
+              const target = e.target as HTMLImageElement
+              target.style.display = 'none'
+              const parent = target.parentElement
+              if (parent) {
+                parent.innerHTML = `
+                  <div class="broken-image-icon">🖼️❌</div>
+                  <div class="broken-image-text">Failed to load</div>
+                `
+              }
+            }}
+          />
+          ${
+            item.index !== undefined
+              ? html`<div class="image-label">#${item.index}</div>`
+              : ''
+          }
+        </div>
+      `
+    } else {
+      // Show file type icon for non-images
+      return html`
+        <div class="image-item file-item">
+          <div class="file-icon">${this.getFileTypeIcon(item)}</div>
+          ${
+            item.index !== undefined
+              ? html`<div class="file-label">#${item.index}</div>`
+              : ''
+          }
+          <div class="file-type">${item.fileType || 'Unknown'}</div>
+        </div>
+      `
+    }
+  }
+
+  private getImageMinSizePx(): number {
+    switch (this.size) {
+      case 'x-small':
+        return 80
+      case 'small':
+        return 120
+      case 'medium':
+        return 160
+      case 'large':
+        return 240
+      default:
+        return 160
+    }
+  }
+
+  override render() {
+    if (this.isLoading) {
+      return html`
+        <div class="flex flex-col items-center justify-center py-10 px-5 text-neutral-60">
+          <div class="text-[24px] mb-2 animate-spin">⏳</div>
+          <div class="text-[14px]">Loading images...</div>
+        </div>
+      `
+    }
+
+    const items = this.getDisplayItems()
+
+    if (items.length === 0) {
+      return html`
+        <div class="flex flex-col items-center justify-center py-10 px-5 text-neutral-70">
+          <div class="text-[14px]">No images found</div>
+        </div>
+      `
+    }
+
+    const grid = html`
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(${this.getImageMinSizePx()}px,300px))] gap-3 p-2">
+        ${repeat(
+          items,
+          (item, index) => item.index ?? index,
+          (item, index) => this.renderImageItem(item, index)
+        )}
+      </div>
+    `
+
+    return this.isCardView
+      ? html`<div class="flex flex-row flex-wrap border border-neutral-90 rounded-xl p-3 bg-neutral-100">${grid}</div>`
+      : grid
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'image-list': ImageList
+  }
+}

package/src/shared/image-loader-controller.ts

@@ -0,0 +1,160 @@
+import {
+  type AddressImageData,
+  type ImageLoadOptions,
+  type ImageResult,
+  useImageLoader as useImageLoaderHeadless,
+} from '@lukso/transaction-view-headless'
+import type { Signal } from '@preact/signals-core'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+
+/**
+ * Lit controller state for image loading
+ */
+export interface ImageLoadState {
+  result: ImageResult | null
+  loading: boolean
+  error: string | null
+}
+
+/**
+ * Lit Reactive Controller for image loading functionality
+ * Integrates the headless image loader with Lit elements
+ */
+export class ImageLoaderController implements ReactiveController {
+  private host: ReactiveControllerHost
+  private headlessLoader = useImageLoaderHeadless()
+
+  // Internal state
+  private _state: ImageLoadState = {
+    result: null,
+    loading: false,
+    error: null,
+  }
+
+  constructor(host: ReactiveControllerHost) {
+    this.host = host
+    host.addController(this)
+  }
+
+  hostConnected() {
+    // Controller is ready
+  }
+
+  hostDisconnected() {
+    // Cleanup if needed
+  }
+
+  get state(): ImageLoadState {
+    return this._state
+  }
+
+  get isLoading(): boolean {
+    return this._state.loading
+  }
+
+  get error(): string | null {
+    return this._state.error
+  }
+
+  get result(): ImageResult | null {
+    return this._state.result
+  }
+
+  /**
+   * Load image from data array
+   */
+  async loadImage(
+    imageData: any[],
+    options: ImageLoadOptions = {}
+  ): Promise<ImageResult | null> {
+    this.updateState({ loading: true, error: null })
+
+    try {
+      const result = await this.headlessLoader.loadImage(imageData, options)
+      this.updateState({ result, loading: false })
+      return result
+    } catch (err) {
+      const error = err instanceof Error ? err.message : 'Failed to load image'
+      this.updateState({ loading: false, error })
+      return null
+    }
+  }
+
+  /**
+   * Load profile image from address data
+   */
+  async loadProfileImage(
+    addressData: AddressImageData,
+    options: ImageLoadOptions = {}
+  ): Promise<ImageResult | null> {
+    this.updateState({ loading: true, error: null })
+
+    try {
+      const result =
+        (await this.headlessLoader.loadProfileImage(addressData, options)) ||
+        this.headlessLoader.getFallbackImage(addressData)
+
+      this.updateState({ result, loading: false })
+      return result
+    } catch (err) {
+      const error =
+        err instanceof Error ? err.message : 'Failed to load profile image'
+      const fallback = this.headlessLoader.getFallbackImage(addressData)
+      this.updateState({ result: fallback, loading: false, error })
+      return fallback
+    }
+  }
+
+  /**
+   * Load image from address signal (reactive)
+   */
+  loadFromSignal(
+    addressSignal: Signal<{ data?: AddressImageData }>,
+    options: ImageLoadOptions = {}
+  ): void {
+    const addressData = addressSignal.value?.data
+
+    if (!addressData) {
+      const fallback = this.headlessLoader.getFallbackImage({})
+      this.updateState({ result: fallback, loading: false, error: null })
+      return
+    }
+
+    this.loadProfileImage(addressData, options)
+  }
+
+  /**
+   * Get fallback image synchronously
+   */
+  getFallbackImage(addressData: AddressImageData): ImageResult {
+    return this.headlessLoader.getFallbackImage(addressData)
+  }
+
+  /**
+   * Check if address is a contract
+   */
+  isContractAddress(addressData: AddressImageData): boolean {
+    return this.headlessLoader.isContractAddress(addressData)
+  }
+
+  /**
+   * Clear current state
+   */
+  clear(): void {
+    this.updateState({ result: null, loading: false, error: null })
+  }
+
+  private updateState(updates: Partial<ImageLoadState>): void {
+    this._state = { ...this._state, ...updates }
+    this.host.requestUpdate()
+  }
+}
+
+/**
+ * Utility function to create an image loader controller
+ */
+export function useImageLoader(
+  host: ReactiveControllerHost
+): ImageLoaderController {
+  return new ImageLoaderController(host)
+}

package/src/shared/index.ts

@@ -0,0 +1,34 @@
+// Shared atomic components
+
+export * from './address-display'
+// Export types
+export type { AddressData } from './address-display.js'
+export * from './address-view'
+export * from './custom-select'
+export * from './function-name-view'
+export * from './gas-provider-view'
+export * from './icon-view'
+export {
+  ImageLoaderController,
+  type ImageLoadState,
+  useImageLoader,
+} from './image-loader-controller.js'
+export * from './notification-view'
+export * from './progress-view'
+export * from './scroll-to-bottom-button'
+// Export signal integration controllers and utilities
+export {
+  MultiSignalController,
+  SignalController,
+  useSignal,
+  useSignals,
+} from './signal-controller.js'
+export {
+  TransactionSignalController,
+  TransactionViewController,
+  type TransactionViewState,
+  useTransactionSignal,
+  useTransactionView,
+} from './transaction-view-controller.js'
+export * from './url-view'
+export * from './value-view'

package/src/shared/load-web-components.ts

@@ -0,0 +1,56 @@
+/**
+ * SSR-safe centralized import point for @lukso/web-components.
+ *
+ * ## Why this exists
+ *
+ * Web components crash during SSR, so apps use dynamic imports:
+ * ```ts
+ * // In an SSR app
+ * const { TransactionPlayback } = await import('@lukso/transaction-view-core')
+ * ```
+ *
+ * However, if the app ALSO needs to import @lukso/web-components directly:
+ * ```ts
+ * const webComponents = await import('@lukso/web-components')
+ * ```
+ *
+ * This creates TWO dynamic import paths to the same components, causing
+ * duplicate registration errors. This wrapper prevents that by making
+ * registration idempotent.
+ *
+ * ## Usage
+ *
+ * Import this module instead of directly importing '@lukso/web-components':
+ * ```ts
+ * import './load-web-components'
+ * ```
+ */
+
+// Store the original customElements.define
+const originalDefine =
+  typeof customElements !== 'undefined'
+    ? customElements.define.bind(customElements)
+    : null
+
+// Wrap customElements.define to catch duplicate registration errors
+if (typeof customElements !== 'undefined' && originalDefine) {
+  customElements.define = function (
+    name: string,
+    constructor: CustomElementConstructor,
+    options?: ElementDefinitionOptions
+  ) {
+    // Check if already defined
+    if (!customElements.get(name)) {
+      originalDefine(name, constructor, options)
+    }
+    // Silently ignore if already defined
+  }
+}
+
+// Now import the web components (they'll use our wrapped define)
+import './load-web-components'
+
+// Restore original define after import
+if (originalDefine && typeof customElements !== 'undefined') {
+  customElements.define = originalDefine
+}

package/src/shared/notification-view.ts

@@ -0,0 +1,132 @@
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+import './load-web-components'
+import { CoreLitElement } from '../styles'
+
+@safeCustomElement('notification-view')
+export class NotificationView extends CoreLitElement {
+  /** Variant controls background/emphasis */
+  @property() variant: 'success' | 'warning' | 'error' | 'info' = 'info'
+
+  /** Notification message content */
+  @property() message = ''
+
+  /** Optional title shown above the description */
+  @property() title = ''
+
+  /** Whether the acknowledge button is shown */
+  @property({ type: Boolean, attribute: 'acknowledgeable' }) acknowledgeable =
+    false
+
+  /** Text shown next to acknowledge checkbox */
+  @property({ attribute: 'acknowledge-text' }) acknowledgeText =
+    'I understand and want to continue'
+
+  /** Internal acknowledged state (for default behavior) */
+  @state() private acknowledged = false
+
+  /** External control for acknowledge checkbox */
+  @property({ type: Boolean, reflect: true }) checked = false
+
+  private handleAcknowledgeChange(e: Event) {
+    e.stopPropagation()
+    const target: any = e.target as any
+    const checked = !!(target?.checked ?? (e as any).detail?.checked ?? false)
+    if (checked !== this.checked) {
+      this.checked = checked
+    }
+    if (this.checked) {
+      this.acknowledged = true
+      this.dispatchEvent(
+        new CustomEvent('notification-acknowledged', {
+          detail: {
+            variant: this.variant,
+            message: this.message,
+            title: this.title,
+            checked: this.checked,
+          },
+          bubbles: true,
+        })
+      )
+    }
+  }
+
+  override render() {
+    if (this.acknowledged) return html``
+
+    return html`
+      <div class="grid grid-cols-[24px_1fr] items-start gap-3 p-3 rounded-xl text-neutral-10 leading-snug ${this.getVariantBackgroundClass()}">
+        <div class="flex items-center justify-center text-[16px] text-neutral-20 self-center" aria-hidden="true">
+        <lukso-icon name="${this.renderIcon()}" size="large" color="${this.getVariantColor()}"></lukso-icon>
+        </div>
+        <div class="text-[14px] flex flex-col gap-1.5">
+          ${
+            this.title
+              ? html`<div class="font-semibold text-neutral-20 paragraph-inter-14-semi-bold">${this.title}</div>`
+              : ''
+          }
+          <div class="text-neutral-30"><slot>${this.message}</slot></div>
+          ${
+            this.acknowledgeable
+              ? html`
+                <div class="inline-flex items-center gap-2 mt-1 text-[12px] text-neutral-20 select-none cursor-pointer paragraph-inter-12-medium">
+                  <lukso-checkbox 
+                    size="x-small" 
+                    ?checked=${this.checked}
+                    @change=${this.handleAcknowledgeChange}
+                  ><span class="paragraph-inter-14-semi-bold">${this.acknowledgeText}</span></lukso-checkbox>
+                </div>
+              `
+              : ''
+          }
+        </div>
+      </div>
+    `
+  }
+
+  private renderIcon() {
+    switch (this.variant) {
+      case 'success':
+        return 'bulb-outline'
+      case 'warning':
+        return 'warning-round'
+      case 'error':
+        return 'warning-triangle'
+      default:
+        return 'bulb-outline'
+    }
+  }
+
+  private getVariantColor() {
+    switch (this.variant) {
+      case 'success':
+        return 'green-45'
+      case 'warning':
+        return 'yellow-55'
+      case 'error':
+        return 'red-55'
+      default:
+        return 'blue-50'
+    }
+  }
+
+  private getVariantBackgroundClass() {
+    switch (this.variant) {
+      case 'success':
+        return 'bg-green-85'
+      case 'warning':
+        return 'bg-yellow-85'
+      case 'error':
+        return 'bg-red-85'
+      default:
+        return 'bg-blue-85'
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'notification-view': NotificationView
+  }
+}