@lukso/transaction-view-core 0.6.5 → 0.6.6-dev.45215f7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.6.5",
+  "version": "0.6.6-dev.45215f7",
   "description": "Core components and hooks for LUKSO transaction display",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -30,18 +30,23 @@
     }
   },
   "dependencies": {
-    "@lit/task": "^1.0.3",
-    "@lukso/web-components": "^1.172.18",
+    "@lukso/web-components": "^1.172.19",
     "@preact/signals-core": "^1.12.1",
     "ethereum-blockies-base64": "^1.0.2",
-    "lit": "3.3.1",
-    "@lukso/transaction-decoder": "1.3.5",
-    "@lukso/transaction-view-headless": "0.4.5"
+    "viem": "^2.43.5",
+    "@lukso/transaction-decoder": "1.3.6-dev.45215f7",
+    "@lukso/transaction-view-headless": "0.4.6-dev.45215f7"
+  },
+  "peerDependencies": {
+    "@lit/task": "^1.0.3",
+    "lit": "^3.3.0"
   },
   "devDependencies": {
+    "@lit/task": "^1.0.3",
     "@tailwindcss/typography": "^0.5.19",
     "@types/postcss-import": "^14.0.3",
     "autoprefixer": "^10.4.23",
+    "lit": "3.3.1",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "tailwindcss": "^3.4.19",

package/src/components/transaction-playback.ts

@@ -1,4 +1,8 @@
-import type { DecoderResult } from '@lukso/transaction-decoder'
+import {
+  type DecoderResult,
+  decodeTransaction,
+  JSONbigString,
+} from '@lukso/transaction-decoder'
 import {
   createTransactionPlayback,
   isHeaderInfoEvent,
@@ -13,15 +17,26 @@ 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 type { Chain, Transaction } from 'viem'
 import { getGlobalLitLoader } from '../registry/lit-view-loader'
 import { safeCustomElement } from '../shared/safe-custom-element'
 import { CoreLitElement } from '../styles'
 
+/**
+ * Raw transaction input type - accepts transactions with JSON, BigintJSON, or bigint values
+ */
+export type RawTransactionInput = Transaction | Record<string, any>
+
 /**
  * Lit Transaction Playback Component
  *
- * Provides index-based rendering of transactions with support for batch navigation
- * and context-aware view matching.
+ * Provides index-based rendering of transactions with support for batch navigation,
+ * context-aware view matching, and local transaction decoding.
+ *
+ * **Transaction Input:**
+ * - Pass a decoded transaction via `transaction` prop, OR
+ * - Pass a raw transaction via `rawTransaction` + `chain` props for local decoding
+ * - Raw transactions can have JSON, BigintJSON ("123n"), or bigint values
  *
  * **Single Transaction:**
  * - index="0" → renders the transaction
@@ -45,38 +60,38 @@ import { CoreLitElement } from '../styles'
  *
  * @example
  * ```html
- * <!-- Activity feed: compact view -->
+ * <!-- With decoded transaction -->
  * <transaction-playback
- *   .transaction="${transaction}"
+ *   .transaction="${decodedTransaction}"
  *   index="1"
  *   context="feed"
  *   variant="compact"
- *   @header-info="${(e) => console.log('Header:', e.detail)}"
  * ></transaction-playback>
  *
- * <!-- Approval flow: full detailed view -->
+ * <!-- With raw transaction (local decoding) -->
  * <transaction-playback
- *   .transaction="${transaction}"
+ *   .rawTransaction="${rawTx}"
+ *   .chain="${lukso}"
  *   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 CoreLitElement {
-  /** The root transaction to display */
+  /** The decoded transaction to display */
   @property({ type: Object })
   transaction?: DecoderResult
 
+  /** Raw transaction to decode internally (alternative to passing decoded transaction) */
+  @property({ type: Object })
+  rawTransaction?: RawTransactionInput
+
+  /** Chain configuration for decoding (required when using rawTransaction) */
+  @property({ type: Object })
+  chain?: Chain
+
   /** Index to display (0, 1, 2, ...) */
   @property({ type: Number })
   index = 1 // Default to index 1 (main transaction, skips batch summary)
@@ -106,6 +121,9 @@ export class TransactionPlayback extends CoreLitElement {
   @state()
   private isLoading = false
 
+  @state()
+  private isDecoding = false
+
   @state()
   private error?: string
 
@@ -115,13 +133,29 @@ export class TransactionPlayback extends CoreLitElement {
   @state()
   private headerInfo?: TransactionHeaderInfo
 
+  @state()
+  private decodedTransaction?: DecoderResult
+
   private componentContainerRef: Ref<HTMLDivElement> = createRef()
   private loader = getGlobalLitLoader()
+  private decodingUnsubscribe?: () => void
 
   protected willUpdate(changedProperties: PropertyValues): void {
+    // Decode raw transaction if provided
+    if (
+      changedProperties.has('rawTransaction') ||
+      changedProperties.has('chain')
+    ) {
+      if (this.rawTransaction) {
+        this.decodeRawTransaction()
+        return // Don't load view yet, wait for decoding
+      }
+    }
+
     // Reload when transaction, index, context, or variant changes
     if (
       changedProperties.has('transaction') ||
+      changedProperties.has('decodedTransaction') ||
       changedProperties.has('index') ||
       changedProperties.has('context') ||
       changedProperties.has('variant')
@@ -155,6 +189,102 @@ export class TransactionPlayback extends CoreLitElement {
       TransactionViewEvents.HEADER_INFO,
       this.handleHeaderInfo as EventListener
     )
+    // Clean up decoding subscription
+    if (this.decodingUnsubscribe) {
+      this.decodingUnsubscribe()
+      this.decodingUnsubscribe = undefined
+    }
+  }
+
+  /**
+   * Decode a raw transaction locally (no server API calls)
+   * Accepts transactions with JSON, BigintJSON, or bigint values
+   *
+   * Two-phase decoding:
+   * 1. Immediate sync decoding - shows basic decoded transaction right away
+   * 2. Async enhancement - progressively enhances with additional data
+   */
+  private async decodeRawTransaction() {
+    if (!this.rawTransaction) {
+      return
+    }
+
+    if (!this.chain) {
+      this.error =
+        'Chain configuration is required when decoding raw transactions'
+      return
+    }
+
+    this.isDecoding = true
+    this.error = undefined
+    this.decodedTransaction = undefined
+
+    // Clean up previous subscription
+    if (this.decodingUnsubscribe) {
+      this.decodingUnsubscribe()
+      this.decodingUnsubscribe = undefined
+    }
+
+    try {
+      // Normalize the transaction input (convert BigintJSON strings to BigInt)
+      const normalizedTx = JSONbigString.read(this.rawTransaction)
+
+      // Decode the transaction locally with async enhancement enabled
+      // This returns immediately with sync-decoded result, then enhances asynchronously
+      const result = await decodeTransaction(normalizedTx, {
+        chain: this.chain,
+        plugins: [], // Use auto-registered plugins
+        schemaPlugins: [], // Use auto-registered schema plugins
+        wrappers: [], // No wrapper detection needed for raw transactions
+        async: true, // Enable async enhancement (ABI fetching, address resolution)
+      })
+
+      // Handle single transaction result (not batch)
+      if (!Array.isArray(result)) {
+        // PHASE 1: Store the immediate sync-decoded result and show it right away
+        this.decodedTransaction = result.immediate
+        this.isDecoding = false
+
+        // Load the view with the immediate result
+        this.loadView()
+
+        // PHASE 2: Subscribe to async enhancement updates
+        // The signal will emit updates as async decoding progresses
+        this.decodingUnsubscribe = result.signal.subscribe((state: any) => {
+          if (state.data && state.data !== this.decodedTransaction) {
+            this.decodedTransaction = state.data
+            // Re-render the view with enhanced data
+            this.loadView()
+          }
+        })
+      } else {
+        // For batch transactions, use the first result
+        const firstResult = result[0]
+
+        // PHASE 1: Immediate result
+        this.decodedTransaction = firstResult.immediate
+        this.isDecoding = false
+
+        // Load the view with the immediate result
+        this.loadView()
+
+        // PHASE 2: Subscribe to async enhancement updates
+        this.decodingUnsubscribe = firstResult.signal.subscribe(
+          (state: any) => {
+            if (state.data && state.data !== this.decodedTransaction) {
+              this.decodedTransaction = state.data
+              // Re-render the view with enhanced data
+              this.loadView()
+            }
+          }
+        )
+      }
+    } catch (err) {
+      this.error =
+        err instanceof Error ? err.message : 'Failed to decode transaction'
+      this.isDecoding = false
+      console.error('Transaction decoding error:', err)
+    }
   }
 
   private handleHeaderInfo = (event: Event): void => {
@@ -173,7 +303,10 @@ export class TransactionPlayback extends CoreLitElement {
   }
 
   private async loadView() {
-    if (!this.transaction) {
+    // Use decodedTransaction if available (from rawTransaction), otherwise use passed transaction
+    const txToDisplay = this.decodedTransaction || this.transaction
+
+    if (!txToDisplay) {
       this.error = 'No transaction provided'
       return
     }
@@ -185,7 +318,7 @@ export class TransactionPlayback extends CoreLitElement {
 
     try {
       // Create playback state
-      this.playbackState = createTransactionPlayback(this.transaction, {
+      this.playbackState = createTransactionPlayback(txToDisplay, {
         framework: 'lit',
         fallbackViewId: this.fallbackViewId,
         context: this.context,
@@ -323,6 +456,16 @@ export class TransactionPlayback extends CoreLitElement {
   }
 
   render() {
+    // Decoding state
+    if (this.isDecoding) {
+      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">Decoding transaction...</div>
+        </div>
+      `
+    }
+
     // Loading state
     if (this.isLoading) {
       return html`

package/tsup.config.ts

@@ -85,6 +85,9 @@ export default defineConfig({
     '@lukso/web-components',
     '@preact/signals-core',
     'lit',
+    'lit-html',
+    'lit-element',
+    '@lit/reactive-element',
     '@lit/task',
   ],
 })