@lukso/transaction-view-core 0.6.3-dev.a07a66f → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.6.3-dev.a07a66f",
+  "version": "0.6.3",
   "description": "Core components and hooks for LUKSO transaction display",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -31,12 +31,12 @@
   },
   "dependencies": {
     "@lit/task": "^1.0.3",
-    "@lukso/web-components": "^1.172.18",
+    "@lukso/web-components": "^1.172.17",
     "@preact/signals-core": "^1.12.1",
     "ethereum-blockies-base64": "^1.0.2",
-    "lit": "3.3.1",
-    "@lukso/transaction-decoder": "1.3.3-dev.a07a66f",
-    "@lukso/transaction-view-headless": "0.4.3-dev.a07a66f"
+    "lit": "^3.3.1",
+    "@lukso/transaction-decoder": "1.3.3",
+    "@lukso/transaction-view-headless": "0.4.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",

package/src/components/transaction-playback.ts

@@ -1,21 +1,17 @@
 import type { DecoderResult } from '@lukso/transaction-decoder'
 import {
   createTransactionPlayback,
-  isHeaderInfoEvent,
   type PlaybackIndexResult,
-  type TransactionHeaderInfo,
   type TransactionPlaybackState,
-  TransactionViewEvents,
   type ViewContext,
   type ViewVariant,
 } from '@lukso/transaction-view-headless'
-import { html, type PropertyValues } from 'lit'
+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'
-import { CoreLitElement } from '../styles'
 
 /**
  * Lit Transaction Playback Component
@@ -38,11 +34,6 @@ import { CoreLitElement } from '../styles'
  * - context: WHERE the transaction is displayed (approval, feed, list, detail, etc.)
  * - variant: HOW the transaction should be rendered (full, collapsed, minimal, etc.)
  *
- * **Header Events:**
- * - Listens for 'header-info' events from child views
- * - Child views can emit header-info to override default from/to addresses
- * - Example: Transfer view can show transfer's from/to instead of execute's from/to
- *
  * @example
  * ```html
  * <!-- Activity feed: compact view -->
@@ -51,7 +42,6 @@ import { CoreLitElement } from '../styles'
  *   index="1"
  *   context="feed"
  *   variant="compact"
- *   @header-info="${(e) => console.log('Header:', e.detail)}"
  * ></transaction-playback>
  *
  * <!-- Approval flow: full detailed view -->
@@ -72,7 +62,7 @@ import { CoreLitElement } from '../styles'
  * ```
  */
 @safeCustomElement('transaction-playback')
-export class TransactionPlayback extends CoreLitElement {
+export class TransactionPlayback extends LitElement {
   /** The root transaction to display */
   @property({ type: Object })
   transaction?: DecoderResult
@@ -81,9 +71,9 @@ export class TransactionPlayback extends CoreLitElement {
   @property({ type: Number })
   index = 1 // Default to index 1 (main transaction, skips batch summary)
 
-  /** Fallback view ID if no match found (optional - fallback-screen is registered with lowest priority) */
+  /** Fallback view ID if no match found */
   @property({ type: String })
-  fallbackViewId?: string
+  fallbackViewId = 'universal-execute'
 
   /** Context: WHERE the transaction is displayed */
   @property({ type: String })
@@ -112,12 +102,123 @@ export class TransactionPlayback extends CoreLitElement {
   @state()
   private loadedComponent?: HTMLElement
 
-  @state()
-  private headerInfo?: TransactionHeaderInfo
-
   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 (
@@ -140,38 +241,6 @@ export class TransactionPlayback extends CoreLitElement {
     }
   }
 
-  connectedCallback(): void {
-    super.connectedCallback()
-    // Listen for header-info events from child views
-    this.addEventListener(
-      TransactionViewEvents.HEADER_INFO,
-      this.handleHeaderInfo as EventListener
-    )
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.removeEventListener(
-      TransactionViewEvents.HEADER_INFO,
-      this.handleHeaderInfo as EventListener
-    )
-  }
-
-  private handleHeaderInfo = (event: Event): void => {
-    if (isHeaderInfoEvent(event)) {
-      this.headerInfo = event.detail
-
-      // Re-emit the event so parent containers can also listen
-      this.dispatchEvent(
-        new CustomEvent(TransactionViewEvents.HEADER_INFO, {
-          bubbles: true,
-          composed: true,
-          detail: event.detail,
-        })
-      )
-    }
-  }
-
   private async loadView() {
     if (!this.transaction) {
       this.error = 'No transaction provided'
@@ -181,7 +250,6 @@ export class TransactionPlayback extends CoreLitElement {
     this.isLoading = true
     this.error = undefined
     this.loadedComponent = undefined
-    this.headerInfo = undefined // Reset header info on new load
 
     try {
       // Create playback state
@@ -213,11 +281,13 @@ export class TransactionPlayback extends CoreLitElement {
       )
 
       // Create component instance with transaction data
-      // Pass transaction (required) and context/variant (optional) for context-aware rendering
       this.loadedComponent = this.loader.createInstance(componentClass, {
         transaction: this.currentResult.transaction,
-        ...(this.context && { context: this.context }),
-        ...(this.variant && { variant: this.variant }),
+        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
@@ -229,92 +299,87 @@ export class TransactionPlayback extends CoreLitElement {
     }
   }
 
+  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="mt-4 p-3 bg-neutral-10 border border-neutral-20 rounded-lg text-12 font-mono">
-        <div class="font-600 mb-2 text-neutral-80">🐛 Playback Debug Info</div>
-        <div class="flex gap-2 mb-1">
-          <span class="font-500 text-neutral-60">Requested Index:</span>
-          <span class="text-neutral-100">${this.currentResult.indexInfo.requested}</span>
+      <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="flex gap-2 mb-1">
-          <span class="font-500 text-neutral-60">Is Valid:</span>
-          <span class="${this.currentResult.indexInfo.isValid ? 'text-green-600' : 'text-red-600'}">
+        <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="flex gap-2 mb-1">
-          <span class="font-500 text-neutral-60">Is Batch:</span>
-          <span class="text-neutral-100">
+        <div class="debug-item">
+          <span class="debug-label">Is Batch:</span>
+          <span class="debug-value">
             ${this.playbackState.isBatch ? 'Yes' : 'No'}
           </span>
         </div>
-        <div class="flex gap-2 mb-1">
-          <span class="font-500 text-neutral-60">Is Batch Summary:</span>
-          <span class="text-neutral-100">
+        <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="flex gap-2 mb-1">
-              <span class="font-500 text-neutral-60">Child Index:</span>
-              <span class="text-neutral-100">${this.currentResult?.indexInfo.childIndex}</span>
+            <div class="debug-item">
+              <span class="debug-label">Child Index:</span>
+              <span class="debug-value">${this.currentResult?.indexInfo.childIndex}</span>
             </div>
           `
         )}
-        <div class="flex gap-2 mb-1">
-          <span class="font-500 text-neutral-60">Available Indices:</span>
-          <span class="text-neutral-100">
+        <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="flex gap-2 mb-1">
-              <span class="font-500 text-neutral-60">Matched View:</span>
-              <span class="text-neutral-100">${this.currentResult?.match?.view.id}</span>
-            </div>
-          `
-        )}
-        ${when(
-          this.headerInfo,
-          () => html`
-            <div class="mt-2 pt-2 border-t border-neutral-20">
-              <div class="font-600 mb-1 text-neutral-80">📋 Header Info</div>
-              ${when(
-                this.headerInfo?.from,
-                () => html`
-                  <div class="flex gap-2 mb-1">
-                    <span class="font-500 text-neutral-60">From:</span>
-                    <span class="text-neutral-100">${this.headerInfo?.from}</span>
-                  </div>
-                `
-              )}
-              ${when(
-                this.headerInfo?.to,
-                () => html`
-                  <div class="flex gap-2 mb-1">
-                    <span class="font-500 text-neutral-60">To:</span>
-                    <span class="text-neutral-100">${this.headerInfo?.to}</span>
-                  </div>
-                `
-              )}
-              ${when(
-                this.headerInfo?.title,
-                () => html`
-                  <div class="flex gap-2 mb-1">
-                    <span class="font-500 text-neutral-60">Title:</span>
-                    <span class="text-neutral-100">${this.headerInfo?.title}</span>
-                  </div>
-                `
-              )}
+            <div class="debug-item">
+              <span class="debug-label">Matched View:</span>
+              <span class="debug-value">${this.currentResult?.match?.view.id}</span>
             </div>
           `
         )}
@@ -326,9 +391,9 @@ export class TransactionPlayback extends CoreLitElement {
     // Loading state
     if (this.isLoading) {
       return html`
-        <div class="flex flex-col items-center justify-center py-15 px-5 text-neutral-60">
-          <div class="text-32 mb-4 animate-spin">⏳</div>
-          <div class="text-16 font-500">Loading transaction view...</div>
+        <div class="loading-state">
+          <div class="loading-spinner">⏳</div>
+          <div class="loading-text">Loading transaction view...</div>
         </div>
       `
     }
@@ -336,42 +401,19 @@ export class TransactionPlayback extends CoreLitElement {
     // Error state
     if (this.error) {
       return html`
-        <div class="flex flex-col items-center justify-center py-15 px-5 text-red-600 bg-red-50 border border-red-200 rounded-xl m-5">
-          <div class="text-48 mb-4">❌</div>
-          <div class="text-18 font-600 mb-2">Error</div>
-          <div class="text-14 text-center leading-normal">${this.error}</div>
+        <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()}
       `
     }
 
-    // Batch summary rendering (index 0 of executeBatch)
-    if (this.currentResult?.indexInfo.isBatchSummary && this.transaction) {
-      const children = (this.transaction as any).children || []
-      return html`
-        <div class="relative">
-          <div class="flex flex-col gap-4">
-            ${children.map(
-              (child: any) => html`
-              <transaction-playback
-                .transaction=${child}
-                .index=${1}
-                context="summary"
-                .variant=${this.variant}
-                ?debug=${this.debug}
-              ></transaction-playback>
-            `
-            )}
-          </div>
-          ${this.renderDebugPanel()}
-        </div>
-      `
-    }
-
-    // Render loaded component (single transaction or batch child)
+    // Render loaded component
     return html`
-      <div class="relative">
-        <div class="contents" ${ref(this.componentContainerRef)}>
+      <div class="playback-container">
+        <div class="component-container" ${ref(this.componentContainerRef)}>
           <!-- Component will be mounted here via updated() lifecycle -->
         </div>
         ${this.renderDebugPanel()}

package/src/index.ts

@@ -18,7 +18,6 @@ import './components/description-view.js'
 import './components/universal-token-view.js'
 import './components/contract-card.js'
 import './components/permissions-block.js'
-import './components/transaction-playback.js'
 
 // Explicit import/export for fonts to ensure d.ts generation doesn't tree-shake it