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

package/src/shared/progress-view.ts

@@ -0,0 +1,86 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { CoreLitElement } from '../styles'
+import { safeCustomElement } from './safe-custom-element'
+
+export type ProgressSegment = {
+  value: number
+  color?: string
+  title?: string
+}
+
+@safeCustomElement('progress-view')
+export class ProgressView extends CoreLitElement {
+  @property({ type: Array }) data: ProgressSegment[] = []
+  @property() label?: string
+  @property() unit?: string
+  @property() address?: string
+  @property({ attribute: 'label-position' }) labelPosition: 'left' | 'right' =
+    'right'
+
+  private renderGasProviderLabel() {
+    return html`
+    ${
+      this.label
+        ? html`
+          <span class="progress-label-value">${this.label}</span>
+          ${
+            this.unit
+              ? html`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>`
+              : ''
+          }
+        `
+        : html`
+          <slot></slot>
+          ${
+            this.unit
+              ? html`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>`
+              : ''
+          }
+        `
+    }
+    `
+  }
+
+  private renderAddressLabel() {
+    return html`
+      <value-view
+        .value=${this.address}
+        .unit=${this.unit}
+      ></value-view>
+    `
+  }
+
+  override render() {
+    const isError = (this.className || '').split(/\s+/).includes('error')
+    return html`
+      <div class="relative grid w-full ${this.className || ''}">
+        <div class="flex bg-neutral-95 h-6 rounded-lg relative col-[1] row-[1] overflow-hidden" style=${isError ? 'background-color: var(--red-65);' : ''} role="progressbar">
+          ${this.data.map((seg, index) => {
+            const width = `${Math.max(0, Math.min(100, Number(seg.value || 0)))}%`
+            const backgroundColor = seg.color || 'var(--neutral-90)'
+            const title = seg.title || ''
+            return html`<div
+              class="h-full flex items-center justify-center text-[10px] font-semibold"
+              style=${`width:${width};background-color:${backgroundColor};`}
+              data-testid=${`value-${index}`}
+            >${title}</div>`
+          })}
+        </div>
+        <div class=${`flex items-center absolute h-6 rounded-lg overflow-visible w-full col-[1] row-[1] top-0 left-0 ${
+          this.labelPosition === 'left' ? 'justify-start' : 'justify-end'
+        }`} data-testid="progress-labels">
+          <div class="text-[13px] font-semibold text-white mix-blend-difference h-inherit flex items-center p-0 right-4 absolute" data-testid="label">
+            ${this.renderGasProviderLabel()}
+          </div>
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'progress-view': ProgressView
+  }
+}

package/src/shared/safe-custom-element.ts

@@ -0,0 +1,35 @@
+/**
+ * SSR-safe custom element decorator that prevents duplicate registration errors.
+ *
+ * ## Why this exists
+ *
+ * The standard `@customElement()` decorator from Lit will throw an error if
+ * a component is registered twice. This can happen in SSR environments where:
+ * - Components are dynamically imported via multiple paths
+ * - HMR causes modules to be re-executed during development
+ * - Server and client bundles both try to register components
+ *
+ * ## Usage
+ *
+ * Use this instead of `@customElement()`:
+ * ```ts
+ * import { safeCustomElement } from './safe-custom-element'
+ *
+ * @safeCustomElement('my-component')
+ * export class MyComponent extends LitElement {
+ *   // ...
+ * }
+ * ```
+ *
+ * @param tagName - The custom element tag name (must contain a hyphen)
+ * @returns A class decorator that safely registers the element
+ */
+export function safeCustomElement(tagName: string) {
+  return <T extends CustomElementConstructor>(classOrDescriptor: T): T => {
+    // Only register if not already defined
+    if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+      customElements.define(tagName, classOrDescriptor)
+    }
+    return classOrDescriptor
+  }
+}

package/src/shared/scroll-to-bottom-button.ts

@@ -0,0 +1,55 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { CoreLitElement } from '../styles'
+import { safeCustomElement } from './safe-custom-element'
+
+/**
+ * ScrollToBottomButton (core) - reusable scroll helper.
+ * Emits `scroll-to-bottom` when clicked.
+ */
+@safeCustomElement('scroll-to-bottom-button')
+export class ScrollToBottomButton extends CoreLitElement {
+  /** Controls visibility */
+  @property({ type: Boolean, attribute: 'show' }) show = false
+
+  /** Icon color (CSS var or token) */
+  @property() color: string = 'neutral-20'
+
+  /** Icon size token */
+  @property({ attribute: 'icon-size' }) iconSize:
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large' = 'medium'
+
+  /** Icon name (attribute: icon-name) */
+  @property({ attribute: 'icon-name' }) iconName: string = 'arrow-down-lg'
+
+  private handleClick() {
+    this.dispatchEvent(new CustomEvent('scroll-to-bottom', { bubbles: true }))
+  }
+
+  override render() {
+    return html`
+      <div class="h-14 w-[140px] self-center rounded-t-[120px] bg-[radial-gradient(ellipse_75px_52px_at_bottom_center,rgba(255,255,255,0.78)_0%,rgba(255,255,255,0)_112.5%)] flex justify-center items-center transition-opacity duration-700 ease-in-out ${
+        this.show ? 'opacity-100 z-10' : 'opacity-0 -z-10'
+      }">
+        <div class="flex justify-center items-center w-10 h-10 rounded-full border border-neutral-90 shadow-[0_0_16px_rgba(189,206,219,0.4)] bg-neutral-100 cursor-pointer animate-bounce" @click=${
+          this.handleClick
+        }>
+            <lukso-icon
+              name=${this.iconName}
+              size=${this.iconSize}
+              color=${this.color}
+            ></lukso-icon>
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'scroll-to-bottom-button': ScrollToBottomButton
+  }
+}

package/src/shared/signal-controller.ts

@@ -0,0 +1,124 @@
+import type { Signal } from '@preact/signals-core'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+
+/**
+ * Lit Reactive Controller for @preact/signals-core integration
+ * This controller allows Lit elements to reactively update when signals change
+ */
+export class SignalController<T = any> implements ReactiveController {
+  private host: ReactiveControllerHost
+  private signal: Signal<T>
+  private unsubscribe?: () => void
+
+  constructor(host: ReactiveControllerHost, signal: Signal<T>) {
+    this.host = host
+    this.signal = signal
+    host.addController(this)
+  }
+
+  hostConnected() {
+    // In a real implementation, you would use signal.subscribe()
+    // For now, we'll use a polling approach
+    let lastValue = this.signal.value
+
+    const check = () => {
+      const currentValue = this.signal.value
+      if (currentValue !== lastValue) {
+        lastValue = currentValue
+        this.host.requestUpdate()
+      }
+    }
+
+    // Set up polling
+    const interval = setInterval(check, 50) // 20fps updates
+
+    this.unsubscribe = () => clearInterval(interval)
+  }
+
+  hostDisconnected() {
+    if (this.unsubscribe) {
+      this.unsubscribe()
+      this.unsubscribe = undefined
+    }
+  }
+
+  get value(): T {
+    return this.signal.value
+  }
+
+  /**
+   * Create a new SignalController for a different signal
+   */
+  static create<U>(
+    host: ReactiveControllerHost,
+    signal: Signal<U>
+  ): SignalController<U> {
+    return new SignalController(host, signal)
+  }
+}
+
+/**
+ * Lit Reactive Controller for multiple signals
+ * Updates the host when any of the tracked signals change
+ */
+export class MultiSignalController implements ReactiveController {
+  private host: ReactiveControllerHost
+  private signals: Signal<any>[]
+  private unsubscribes: (() => void)[] = []
+
+  constructor(host: ReactiveControllerHost, signals: Signal<any>[]) {
+    this.host = host
+    this.signals = signals
+    host.addController(this)
+  }
+
+  hostConnected() {
+    this.signals.forEach((signal, index) => {
+      let lastValue = signal.value
+
+      const check = () => {
+        const currentValue = signal.value
+        if (currentValue !== lastValue) {
+          lastValue = currentValue
+          this.host.requestUpdate()
+        }
+      }
+
+      const interval = setInterval(check, 50)
+      this.unsubscribes[index] = () => clearInterval(interval)
+    })
+  }
+
+  hostDisconnected() {
+    this.unsubscribes.forEach((unsubscribe) => unsubscribe())
+    this.unsubscribes = []
+  }
+
+  getValue(index: number): any {
+    return this.signals[index]?.value
+  }
+
+  getValues(): any[] {
+    return this.signals.map((signal) => signal.value)
+  }
+}
+
+/**
+ * Utility function to create a signal controller
+ */
+export function useSignal<T>(
+  host: ReactiveControllerHost,
+  signal: Signal<T>
+): SignalController<T> {
+  return new SignalController(host, signal)
+}
+
+/**
+ * Utility function to create a multi-signal controller
+ */
+export function useSignals(
+  host: ReactiveControllerHost,
+  signals: Signal<any>[]
+): MultiSignalController {
+  return new MultiSignalController(host, signals)
+}

package/src/shared/transaction-view-controller.ts

@@ -0,0 +1,345 @@
+import type { DecoderResult } from '@lukso/transaction-decoder'
+import {
+  findAllTransactionViews,
+  findBestTransactionView,
+  type UseTransactionViewOptions,
+  useTransactionView as useTransactionViewHeadless,
+  type ViewMatch,
+} from '@lukso/transaction-view-headless'
+import type { Signal } from '@preact/signals-core'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+
+/**
+ * Lit controller state for transaction view
+ */
+export interface TransactionViewState {
+  matches: ViewMatch[]
+  bestMatch: ViewMatch | null
+  component: any
+  loading: boolean
+  error: Error | null
+  isResolvingAddresses: boolean
+  resolvedAddresses: Record<string, any>
+}
+
+/**
+ * Lit Reactive Controller for transaction view functionality
+ * Integrates the headless transaction view system with Lit elements
+ */
+export class TransactionViewController implements ReactiveController {
+  private host: ReactiveControllerHost
+  private headlessInstance: any = null
+
+  // Internal state
+  private _state: TransactionViewState = {
+    matches: [],
+    bestMatch: null,
+    component: null,
+    loading: false,
+    error: null,
+    isResolvingAddresses: false,
+    resolvedAddresses: {},
+  }
+
+  private syncInterval?: number
+
+  constructor(
+    host: ReactiveControllerHost,
+    private transaction: DecoderResult,
+    private options: UseTransactionViewOptions
+  ) {
+    this.host = host
+    host.addController(this)
+    this.initialize()
+  }
+
+  hostConnected() {
+    // Set up periodic sync with headless instance
+    this.setupSync()
+  }
+
+  hostDisconnected() {
+    // Cleanup sync
+    if (this.syncInterval) {
+      clearInterval(this.syncInterval)
+      this.syncInterval = undefined
+    }
+  }
+
+  get state(): TransactionViewState {
+    return this._state
+  }
+
+  get matches(): ViewMatch[] {
+    return this._state.matches
+  }
+
+  get bestMatch(): ViewMatch | null {
+    return this._state.bestMatch
+  }
+
+  get component(): any {
+    return this._state.component
+  }
+
+  get isLoading(): boolean {
+    return this._state.loading
+  }
+
+  get error(): Error | null {
+    return this._state.error
+  }
+
+  get isResolvingAddresses(): boolean {
+    return this._state.isResolvingAddresses
+  }
+
+  get resolvedAddresses(): Record<string, any> {
+    return this._state.resolvedAddresses
+  }
+
+  /**
+   * Load a specific match
+   */
+  async loadMatch(match: ViewMatch): Promise<any> {
+    if (!this.headlessInstance) {
+      throw new Error('Transaction view not initialized')
+    }
+
+    try {
+      const result = await this.headlessInstance.loadMatch(match)
+      this.syncState()
+      return result
+    } catch (err) {
+      this.syncState()
+      throw err
+    }
+  }
+
+  /**
+   * Load the best match
+   */
+  async loadBestMatch(): Promise<any> {
+    if (!this.headlessInstance) {
+      throw new Error('Transaction view not initialized')
+    }
+
+    try {
+      const result = await this.headlessInstance.loadBestMatch()
+      this.syncState()
+      return result
+    } catch (err) {
+      this.syncState()
+      throw err
+    }
+  }
+
+  /**
+   * Refresh matches
+   */
+  refreshMatches(): void {
+    if (!this.headlessInstance) {
+      console.warn('Transaction view not initialized, cannot refresh matches')
+      return
+    }
+
+    this.headlessInstance.refreshMatches()
+    this.syncState()
+  }
+
+  /**
+   * Resolve addresses
+   */
+  async resolveAddresses(): Promise<void> {
+    if (!this.headlessInstance) {
+      throw new Error('Transaction view not initialized')
+    }
+
+    try {
+      await this.headlessInstance.resolveAddresses()
+      this.syncState()
+    } catch (err) {
+      this.syncState()
+      throw err
+    }
+  }
+
+  /**
+   * Update transaction and options
+   */
+  update(transaction: DecoderResult, options: UseTransactionViewOptions): void {
+    this.transaction = transaction
+    this.options = options
+    this.initialize()
+  }
+
+  /**
+   * Get the best matching view without loading
+   */
+  static findBestMatch(
+    transaction: DecoderResult,
+    framework: 'lit' | 'rn' = 'lit'
+  ): ViewMatch | null {
+    return findBestTransactionView(transaction, framework)
+  }
+
+  /**
+   * Get all matching views without loading
+   */
+  static findAllMatches(
+    transaction: DecoderResult,
+    framework: 'lit' | 'rn' = 'lit'
+  ): ViewMatch[] {
+    return findAllTransactionViews(transaction, framework)
+  }
+
+  private initialize(): void {
+    try {
+      this.headlessInstance = useTransactionViewHeadless(
+        this.transaction,
+        this.options
+      )
+      this.syncState()
+    } catch (err) {
+      this.updateState({
+        error:
+          err instanceof Error
+            ? err
+            : new Error('Failed to initialize transaction view'),
+      })
+      console.error('Failed to initialize transaction view:', err)
+    }
+  }
+
+  private setupSync(): void {
+    // Sync immediately
+    this.syncState()
+
+    // Set up periodic sync
+    this.syncInterval = setInterval(() => {
+      this.syncState()
+    }, 100) as any // Type assertion for browser/node compatibility
+  }
+
+  private syncState(): void {
+    if (!this.headlessInstance) return
+
+    this.updateState({
+      matches: this.headlessInstance.matches,
+      bestMatch: this.headlessInstance.bestMatch,
+      component: this.headlessInstance.component,
+      loading: this.headlessInstance.isLoading,
+      error: this.headlessInstance.error,
+      isResolvingAddresses: this.headlessInstance.isResolvingAddresses,
+      resolvedAddresses: this.headlessInstance.resolvedAddresses,
+    })
+  }
+
+  private updateState(updates: Partial<TransactionViewState>): void {
+    this._state = { ...this._state, ...updates }
+    this.host.requestUpdate()
+  }
+}
+
+/**
+ * Utility function to create a transaction view controller
+ */
+export function useTransactionView(
+  host: ReactiveControllerHost,
+  transaction: DecoderResult,
+  options: UseTransactionViewOptions
+): TransactionViewController {
+  return new TransactionViewController(host, transaction, options)
+}
+
+/**
+ * Controller for working with transaction signals from the decoder
+ */
+export class TransactionSignalController<T = any>
+  implements ReactiveController
+{
+  private host: ReactiveControllerHost
+  private signal: Signal<{
+    data: DecoderResult
+    loading: boolean
+    error?: string
+  }>
+  private unsubscribe?: () => void
+
+  private _data: DecoderResult | null = null
+  private _loading = false
+  private _error: string | null = null
+
+  constructor(
+    host: ReactiveControllerHost,
+    signal: Signal<{ data: DecoderResult; loading: boolean; error?: string }>
+  ) {
+    this.host = host
+    this.signal = signal
+    host.addController(this)
+  }
+
+  hostConnected() {
+    this.setupSignalSync()
+  }
+
+  hostDisconnected() {
+    if (this.unsubscribe) {
+      this.unsubscribe()
+      this.unsubscribe = undefined
+    }
+  }
+
+  get data(): DecoderResult | null {
+    return this._data
+  }
+
+  get loading(): boolean {
+    return this._loading
+  }
+
+  get error(): string | null {
+    return this._error
+  }
+
+  get isReady(): boolean {
+    return !this._loading && this._data !== null && !this._error
+  }
+
+  private setupSignalSync(): void {
+    const sync = () => {
+      const signalValue = this.signal.value
+      const newData = signalValue?.data || null
+      const newLoading = signalValue?.loading || false
+      const newError = signalValue?.error || null
+
+      if (
+        newData !== this._data ||
+        newLoading !== this._loading ||
+        newError !== this._error
+      ) {
+        this._data = newData
+        this._loading = newLoading
+        this._error = newError
+        this.host.requestUpdate()
+      }
+    }
+
+    // Initial sync
+    sync()
+
+    // Set up periodic sync
+    const interval = setInterval(sync, 50)
+    this.unsubscribe = () => clearInterval(interval)
+  }
+}
+
+/**
+ * Utility function to create a transaction signal controller
+ */
+export function useTransactionSignal(
+  host: ReactiveControllerHost,
+  signal: Signal<{ data: DecoderResult; loading: boolean; error?: string }>
+): TransactionSignalController {
+  return new TransactionSignalController(host, signal)
+}