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

package/src/components/transaction-playback.ts

@@ -0,0 +1,429 @@
+import type { DecoderResult } from '@lukso/transaction-decoder'
+import {
+  createTransactionPlayback,
+  type PlaybackIndexResult,
+  type TransactionPlaybackState,
+  type ViewContext,
+  type ViewVariant,
+} from '@lukso/transaction-view-headless'
+import { css, html, LitElement, type PropertyValues } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { createRef, type Ref, ref } from 'lit/directives/ref.js'
+import { when } from 'lit/directives/when.js'
+import { getGlobalLitLoader } from '../registry/lit-view-loader'
+import { safeCustomElement } from '../shared/safe-custom-element'
+
+/**
+ * Lit Transaction Playback Component
+ *
+ * Provides index-based rendering of transactions with support for batch navigation
+ * and context-aware view matching.
+ *
+ * **Single Transaction:**
+ * - index="0" → renders the transaction
+ * - index="1" → renders the transaction (same)
+ * - index="2" → null/error
+ *
+ * **Batch Transaction:**
+ * - index="0" → renders batch summary/expandable view
+ * - index="1" → renders first child transaction
+ * - index="2" → renders second child transaction
+ * - etc.
+ *
+ * **Context & Variant:**
+ * - context: WHERE the transaction is displayed (approval, feed, list, detail, etc.)
+ * - variant: HOW the transaction should be rendered (full, collapsed, minimal, etc.)
+ *
+ * @example
+ * ```html
+ * <!-- Activity feed: compact view -->
+ * <transaction-playback
+ *   .transaction="${transaction}"
+ *   index="1"
+ *   context="feed"
+ *   variant="compact"
+ * ></transaction-playback>
+ *
+ * <!-- Approval flow: full detailed view -->
+ * <transaction-playback
+ *   .transaction="${transaction}"
+ *   index="1"
+ *   context="approval"
+ *   variant="full"
+ * ></transaction-playback>
+ *
+ * <!-- Batch summary: collapsed view -->
+ * <transaction-playback
+ *   .transaction="${transaction}"
+ *   index="0"
+ *   context="batch-summary"
+ *   variant="collapsed"
+ * ></transaction-playback>
+ * ```
+ */
+@safeCustomElement('transaction-playback')
+export class TransactionPlayback extends LitElement {
+  /** The root transaction to display */
+  @property({ type: Object })
+  transaction?: DecoderResult
+
+  /** Index to display (0, 1, 2, ...) */
+  @property({ type: Number })
+  index = 1 // Default to index 1 (main transaction, skips batch summary)
+
+  /** Fallback view ID if no match found */
+  @property({ type: String })
+  fallbackViewId = 'universal-execute'
+
+  /** Context: WHERE the transaction is displayed */
+  @property({ type: String })
+  context?: ViewContext
+
+  /** Variant: HOW the transaction should be rendered */
+  @property({ type: String })
+  variant?: ViewVariant
+
+  /** Show debug information */
+  @property({ type: Boolean })
+  debug = false
+
+  @state()
+  private playbackState?: TransactionPlaybackState
+
+  @state()
+  private currentResult?: PlaybackIndexResult
+
+  @state()
+  private isLoading = false
+
+  @state()
+  private error?: string
+
+  @state()
+  private loadedComponent?: HTMLElement
+
+  private componentContainerRef: Ref<HTMLDivElement> = createRef()
+  private loader = getGlobalLitLoader()
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    .playback-container {
+      position: relative;
+    }
+
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #6b7280;
+    }
+
+    .loading-spinner {
+      font-size: 32px;
+      margin-bottom: 16px;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .loading-text {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .error-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #dc2626;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 12px;
+      margin: 20px;
+    }
+
+    .error-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    .error-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .error-message {
+      font-size: 14px;
+      text-align: center;
+      line-height: 1.4;
+    }
+
+    .debug-panel {
+      margin-top: 16px;
+      padding: 12px;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      font-size: 12px;
+      font-family: 'Monaco', 'Menlo', monospace;
+    }
+
+    .debug-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: #374151;
+    }
+
+    .debug-item {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+
+    .debug-label {
+      font-weight: 500;
+      color: #6b7280;
+    }
+
+    .debug-value {
+      color: #111827;
+    }
+
+    .debug-valid {
+      color: #059669;
+    }
+
+    .debug-invalid {
+      color: #dc2626;
+    }
+
+    /* Component container for dynamically loaded content */
+    .component-container {
+      display: contents;
+    }
+  `
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    // Reload when transaction, index, context, or variant changes
+    if (
+      changedProperties.has('transaction') ||
+      changedProperties.has('index') ||
+      changedProperties.has('context') ||
+      changedProperties.has('variant')
+    ) {
+      this.loadView()
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    // Mount component after render
+    if (this.loadedComponent && this.componentContainerRef.value) {
+      // Clear existing content
+      this.componentContainerRef.value.innerHTML = ''
+      // Append the new component
+      this.componentContainerRef.value.appendChild(this.loadedComponent)
+    }
+  }
+
+  private async loadView() {
+    if (!this.transaction) {
+      this.error = 'No transaction provided'
+      return
+    }
+
+    this.isLoading = true
+    this.error = undefined
+    this.loadedComponent = undefined
+
+    try {
+      // Create playback state
+      this.playbackState = createTransactionPlayback(this.transaction, {
+        framework: 'lit',
+        fallbackViewId: this.fallbackViewId,
+        context: this.context,
+        variant: this.variant,
+      })
+
+      // Get view at current index
+      this.currentResult = this.playbackState.getViewAtIndex(this.index)
+
+      // Validate index
+      if (!this.currentResult.indexInfo.isValid) {
+        throw new Error(
+          `Invalid index ${this.index}. Valid indices: ${this.playbackState.batchInfo.availableIndices.join(', ')}`
+        )
+      }
+
+      // Check if we have a match
+      if (!this.currentResult.match) {
+        throw new Error(`No view found for transaction at index ${this.index}`)
+      }
+
+      // Load the component
+      const componentClass = await this.loader.loadFromMatch(
+        this.currentResult.match
+      )
+
+      // Create component instance with transaction data
+      this.loadedComponent = this.loader.createInstance(componentClass, {
+        transaction: this.currentResult.transaction,
+        address: (this.currentResult.transaction as any).address,
+        value: (this.currentResult.transaction as any).value,
+        enhancedInfo: (this.currentResult.transaction as any).enhancedInfo,
+        title: this.generateTitle(this.currentResult),
+        standard: (this.currentResult.transaction as any).standard,
+      })
+
+      this.isLoading = false
+    } catch (err) {
+      this.error =
+        err instanceof Error ? err.message : 'Failed to load transaction view'
+      this.isLoading = false
+      console.error('Transaction playback error:', err)
+    }
+  }
+
+  private generateTitle(result: PlaybackIndexResult): string {
+    if (result.indexInfo.isBatchSummary) {
+      const childCount = result.batchInfo.childCount
+      return `Batch Operation (${childCount} ${childCount === 1 ? 'transaction' : 'transactions'})`
+    }
+
+    const transaction = result.transaction
+    if (!transaction) return 'Transaction'
+
+    const resultType = transaction.resultType
+
+    if (!resultType) return 'Transaction'
+
+    switch (resultType) {
+      case 'setData':
+      case 'setDataBatch':
+        return 'Set Data'
+      case 'execute':
+      case 'executeBatch':
+        return 'Execute'
+      case 'create':
+        return 'Contract Deployment'
+      default:
+        if (resultType.includes('transfer')) {
+          return 'Transfer'
+        }
+        return resultType.charAt(0).toUpperCase() + resultType.slice(1)
+    }
+  }
+
+  private renderDebugPanel() {
+    if (!this.debug || !this.playbackState || !this.currentResult) {
+      return html``
+    }
+
+    return html`
+      <div class="debug-panel">
+        <div class="debug-title">🐛 Playback Debug Info</div>
+        <div class="debug-item">
+          <span class="debug-label">Requested Index:</span>
+          <span class="debug-value">${this.currentResult.indexInfo.requested}</span>
+        </div>
+        <div class="debug-item">
+          <span class="debug-label">Is Valid:</span>
+          <span class="${this.currentResult.indexInfo.isValid ? 'debug-valid' : 'debug-invalid'}">
+            ${this.currentResult.indexInfo.isValid ? '✓ Yes' : '✗ No'}
+          </span>
+        </div>
+        <div class="debug-item">
+          <span class="debug-label">Is Batch:</span>
+          <span class="debug-value">
+            ${this.playbackState.isBatch ? 'Yes' : 'No'}
+          </span>
+        </div>
+        <div class="debug-item">
+          <span class="debug-label">Is Batch Summary:</span>
+          <span class="debug-value">
+            ${this.currentResult.indexInfo.isBatchSummary ? 'Yes' : 'No'}
+          </span>
+        </div>
+        ${when(
+          this.currentResult.indexInfo.childIndex != null,
+          () => html`
+            <div class="debug-item">
+              <span class="debug-label">Child Index:</span>
+              <span class="debug-value">${this.currentResult!.indexInfo.childIndex}</span>
+            </div>
+          `
+        )}
+        <div class="debug-item">
+          <span class="debug-label">Available Indices:</span>
+          <span class="debug-value">
+            [${this.playbackState!.batchInfo.availableIndices.join(', ')}]
+          </span>
+        </div>
+        ${when(
+          this.currentResult.match,
+          () => html`
+            <div class="debug-item">
+              <span class="debug-label">Matched View:</span>
+              <span class="debug-value">${this.currentResult!.match!.view.id}</span>
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+
+  render() {
+    // Loading state
+    if (this.isLoading) {
+      return html`
+        <div class="loading-state">
+          <div class="loading-spinner">⏳</div>
+          <div class="loading-text">Loading transaction view...</div>
+        </div>
+      `
+    }
+
+    // Error state
+    if (this.error) {
+      return html`
+        <div class="error-state">
+          <div class="error-icon">❌</div>
+          <div class="error-title">Error</div>
+          <div class="error-message">${this.error}</div>
+        </div>
+        ${this.renderDebugPanel()}
+      `
+    }
+
+    // Render loaded component
+    return html`
+      <div class="playback-container">
+        <div class="component-container" ${ref(this.componentContainerRef)}>
+          <!-- Component will be mounted here via updated() lifecycle -->
+        </div>
+        ${this.renderDebugPanel()}
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'transaction-playback': TransactionPlayback
+  }
+}

package/src/components/universal-token-view.ts

@@ -0,0 +1,281 @@
+import { css, html, LitElement } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { when } from 'lit/directives/when.js'
+import { safeCustomElement } from '../shared/safe-custom-element'
+import './asset-card.js'
+import './description-view.js'
+import './info-panel.js'
+
+// Import EnhancedInfo type
+type EnhancedInfo = {
+  address: `0x${string}`
+  standard?: string
+  tokenId?: `0x${string}`
+  name?: string
+  __gqltype?: 'Profile' | 'Asset' | 'Token'
+  [key: string]: unknown
+}
+
+export interface UniversalTokenViewData {
+  /** Main transaction address key (ADDRESS or ADDRESS-TOKENID) */
+  address?: string
+  /** Value being transferred */
+  value?: bigint | string
+  /** Raw transaction object (DecoderResult) */
+  transaction?: any
+  /** Enhanced info from resolver */
+  enhancedInfo?: EnhancedInfo
+  /** Transaction type */
+  type?: 'transfer' | 'mint' | 'burn' | 'approve' | 'execute' | 'deploy'
+  /** Title text (e.g., "Transfer Token", "Mint Token") */
+  title?: string
+  /** Title icon name */
+  icon?: string
+  /** Standard tag text (e.g., "LSP7-DigitalAsset", "LSP8-IdentifiableDigitalAsset") */
+  standard?: string
+  /** Loading states */
+  loading?: {
+    asset?: boolean
+    metadata?: boolean
+    transaction?: boolean
+  }
+}
+
+/**
+ * Universal token view component that combines all core components
+ * Can replace most individual Vue transaction views
+ */
+@safeCustomElement('universal-token-view')
+export class UniversalTokenView extends LitElement {
+  @property({ type: Object })
+  data: UniversalTokenViewData = {}
+
+  @state()
+  private _infoPanelOpen = false
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    /* Match the original LSP7Transfer.vue structure exactly */
+    .universal-view {
+      padding: 16px; /* matches p-4 in Tailwind */
+    }
+
+    /* Title wrapper - matches original layout */
+    .title-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    /* Title section with icon - replicates Title.vue */
+    .title-section {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--neutral-20, #374151);
+    }
+
+    .title-icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      margin-right: 4px;
+    }
+
+    /* LSP tag - matches original styling exactly */
+    .lsp-tag {
+      background: #eedde4;
+      border-radius: 8px;
+      height: 28px;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 500;
+      color: #374151;
+    }
+
+    /* Info panel spacing - matches mt-4 */
+    .info-panel {
+      margin-top: 16px;
+    }
+
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #6b7280;
+    }
+
+    .loading-spinner {
+      font-size: 32px;
+      margin-bottom: 16px;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .loading-text {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .error-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #dc2626;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 12px;
+      margin: 20px;
+    }
+
+    .error-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    .error-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .error-message {
+      font-size: 14px;
+      text-align: center;
+      line-height: 1.4;
+    }
+  `
+
+  private _handleInfoPanelToggle() {
+    this._infoPanelOpen = !this._infoPanelOpen
+  }
+
+  private _handleInfoPanelClose() {
+    this._infoPanelOpen = false
+  }
+
+  private _buildAssetCardData() {
+    const [contractAddress, tokenId] = (this.data.address || '').split('-')
+
+    return {
+      name: this.data.enhancedInfo?.name,
+      symbol:
+        (this.data.enhancedInfo as any)?.symbol ||
+        (this.data.enhancedInfo as any)?.lsp4TokenSymbol,
+      icon:
+        (this.data.enhancedInfo as any)?.icon ||
+        (this.data.enhancedInfo as any)?.images?.[0]?.url,
+      address: contractAddress,
+      tokenId: tokenId,
+      formattedTokenId: tokenId ? `${parseInt(tokenId, 16)}` : undefined,
+      amount: this.data.value?.toString(),
+      decimals: (this.data.enhancedInfo as any)?.decimals,
+      loadingImages: this.data.loading?.asset,
+      creator: (this.data.enhancedInfo as any)?.creator,
+    }
+  }
+
+  private _renderLoadingState() {
+    return html`
+      <div class="loading-state">
+        <div class="loading-spinner">⏳</div>
+        <div class="loading-text">Loading transaction details...</div>
+      </div>
+    `
+  }
+
+  private _renderErrorState(message: string) {
+    return html`
+      <div class="error-state">
+        <div class="error-icon">❌</div>
+        <div class="error-title">Error Loading Transaction</div>
+        <div class="error-message">${message}</div>
+      </div>
+    `
+  }
+
+  render() {
+    // Handle loading states
+    const isLoading =
+      this.data.loading?.transaction ||
+      (this.data.loading?.metadata && !this.data.enhancedInfo) ||
+      (this.data.loading?.asset && !this.data.address)
+
+    if (isLoading) {
+      return this._renderLoadingState()
+    }
+
+    // Handle error states
+    if (
+      !this.data.address &&
+      !this.data.enhancedInfo &&
+      !this.data.transaction
+    ) {
+      return this._renderErrorState('No transaction data provided')
+    }
+
+    // Replicate the exact structure from LSP7Transfer.vue
+    return html`
+      <div class="universal-view">
+        <!-- Title wrapper with title and LSP tag - exact match -->
+        <div class="title-wrapper">
+          <div class="title-section">
+            ${when(
+              this.data.icon,
+              () => html`
+                <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M7 16l-4-4 4-4M17 8l4 4-4 4" />
+                </svg>
+              `
+            )}
+            ${this.data.title || 'Transaction'}
+          </div>
+          ${when(
+            this.data.standard,
+            () => html`<div class="lsp-tag">${this.data.standard}</div>`
+          )}
+        </div>
+
+        <!-- AssetCard replaces DigitalAssetInfo - exact same functionality -->
+        <asset-card
+          .data=${this._buildAssetCardData()}
+          size="medium"
+          ?show-info-button=${true}
+          @info-click=${this._handleInfoPanelToggle}
+        ></asset-card>
+
+        <!-- InfoPanel replaces BackPanelAsset with class="mt-4" spacing -->
+        <info-panel
+          class="info-panel"
+          address=${this.data.address || ''}
+          ?open=${this._infoPanelOpen}
+          standard=${this.data.standard || this.data.enhancedInfo?.standard || ''}
+          type=${this.data.type || 'transfer'}
+          @close=${this._handleInfoPanelClose}
+        ></info-panel>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'universal-token-view': UniversalTokenView
+  }
+}

package/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*?raw' {
+  const content: string
+  export default content
+}