@lukso/transaction-view-core 0.6.3-dev.e33b252 → 0.6.4-dev.ba618e9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.6.3-dev.e33b252",
+  "version": "0.6.4-dev.ba618e9",
   "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.17",
+    "@lukso/web-components": "^1.172.18",
     "@preact/signals-core": "^1.12.1",
     "ethereum-blockies-base64": "^1.0.2",
-    "lit": "^3.3.1",
-    "@lukso/transaction-decoder": "1.3.3-dev.e33b252",
-    "@lukso/transaction-view-headless": "0.4.3-dev.e33b252"
+    "lit": "3.3.1",
+    "@lukso/transaction-decoder": "1.3.4-dev.ba618e9",
+    "@lukso/transaction-view-headless": "0.4.4-dev.ba618e9"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",

package/src/components/transaction-playback.ts

@@ -1,17 +1,21 @@
 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 { css, html, LitElement, type PropertyValues } from 'lit'
+import { html, 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
@@ -34,6 +38,11 @@ import { safeCustomElement } from '../shared/safe-custom-element'
  * - 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 -->
@@ -42,6 +51,7 @@ import { safeCustomElement } from '../shared/safe-custom-element'
  *   index="1"
  *   context="feed"
  *   variant="compact"
+ *   @header-info="${(e) => console.log('Header:', e.detail)}"
  * ></transaction-playback>
  *
  * <!-- Approval flow: full detailed view -->
@@ -62,7 +72,7 @@ import { safeCustomElement } from '../shared/safe-custom-element'
  * ```
  */
 @safeCustomElement('transaction-playback')
-export class TransactionPlayback extends LitElement {
+export class TransactionPlayback extends CoreLitElement {
   /** The root transaction to display */
   @property({ type: Object })
   transaction?: DecoderResult
@@ -71,9 +81,9 @@ export class TransactionPlayback extends LitElement {
   @property({ type: Number })
   index = 1 // Default to index 1 (main transaction, skips batch summary)
 
-  /** Fallback view ID if no match found */
+  /** Fallback view ID if no match found (optional - fallback-screen is registered with lowest priority) */
   @property({ type: String })
-  fallbackViewId = 'universal-execute'
+  fallbackViewId?: string
 
   /** Context: WHERE the transaction is displayed */
   @property({ type: String })
@@ -102,123 +112,12 @@ export class TransactionPlayback extends LitElement {
   @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 (
@@ -241,6 +140,38 @@ export class TransactionPlayback extends LitElement {
     }
   }
 
+  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'
@@ -250,6 +181,7 @@ export class TransactionPlayback extends LitElement {
     this.isLoading = true
     this.error = undefined
     this.loadedComponent = undefined
+    this.headerInfo = undefined // Reset header info on new load
 
     try {
       // Create playback state
@@ -281,13 +213,11 @@ export class TransactionPlayback extends LitElement {
       )
 
       // 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,
-        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.context && { context: this.context }),
+        ...(this.variant && { variant: this.variant }),
       })
 
       this.isLoading = false
@@ -299,87 +229,92 @@ export class TransactionPlayback extends LitElement {
     }
   }
 
-  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 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>
-        <div class="debug-item">
-          <span class="debug-label">Is Valid:</span>
-          <span class="${this.currentResult.indexInfo.isValid ? 'debug-valid' : 'debug-invalid'}">
+        <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'}">
             ${this.currentResult.indexInfo.isValid ? '✓ Yes' : '✗ No'}
           </span>
         </div>
-        <div class="debug-item">
-          <span class="debug-label">Is Batch:</span>
-          <span class="debug-value">
+        <div class="flex gap-2 mb-1">
+          <span class="font-500 text-neutral-60">Is Batch:</span>
+          <span class="text-neutral-100">
             ${this.playbackState.isBatch ? 'Yes' : 'No'}
           </span>
         </div>
-        <div class="debug-item">
-          <span class="debug-label">Is Batch Summary:</span>
-          <span class="debug-value">
+        <div class="flex gap-2 mb-1">
+          <span class="font-500 text-neutral-60">Is Batch Summary:</span>
+          <span class="text-neutral-100">
             ${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 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>
           `
         )}
-        <div class="debug-item">
-          <span class="debug-label">Available Indices:</span>
-          <span class="debug-value">
+        <div class="flex gap-2 mb-1">
+          <span class="font-500 text-neutral-60">Available Indices:</span>
+          <span class="text-neutral-100">
             [${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 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>
           `
         )}
@@ -391,9 +326,9 @@ export class TransactionPlayback extends LitElement {
     // 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 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>
       `
     }
@@ -401,19 +336,42 @@ export class TransactionPlayback extends LitElement {
     // 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 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>
         ${this.renderDebugPanel()}
       `
     }
 
-    // Render loaded component
+    // 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)
     return html`
-      <div class="playback-container">
-        <div class="component-container" ${ref(this.componentContainerRef)}>
+      <div class="relative">
+        <div class="contents" ${ref(this.componentContainerRef)}>
           <!-- Component will be mounted here via updated() lifecycle -->
         </div>
         ${this.renderDebugPanel()}

package/src/index.ts

@@ -18,6 +18,7 @@ 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