@lukso/transaction-view-core 0.6.5 → 0.6.6-dev.2b7df2e

package/dist/index.d.cts

@@ -6,6 +6,7 @@ import { ResolvedAddress, ViewContext, ViewVariant, ViewMatch, FrameworkViewConf
 export { DecoderRecordForSelection, DefaultViewRegistry, FrameworkSupport, FrameworkViewConfig, ViewContext, ViewDefinition, ViewLoader, ViewMatch, ViewMatchOptions, ViewRegistry, getGlobalRegistry, resetGlobalRegistry, setGlobalRegistry } from '@lukso/transaction-view-headless';
 import { DecoderResult } from '@lukso/transaction-decoder';
 export { DecoderResult } from '@lukso/transaction-decoder';
+import { Transaction, Chain } from 'viem';
 import '@preact/signals-core';
 
 /**
@@ -434,11 +435,20 @@ declare global {
     }
 }
 
+/**
+ * Raw transaction input type - accepts transactions with JSON, BigintJSON, or bigint values
+ */
+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
@@ -462,35 +472,31 @@ declare global {
  *
  * @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>
  * ```
  */
 declare class TransactionPlayback extends CoreLitElement {
-    /** The root transaction to display */
+    /** The decoded transaction to display */
     transaction?: DecoderResult;
+    /** Raw transaction to decode internally (alternative to passing decoded transaction) */
+    rawTransaction?: RawTransactionInput;
+    /** Chain configuration for decoding (required when using rawTransaction) */
+    chain?: Chain;
     /** Index to display (0, 1, 2, ...) */
     index: number;
     /** Fallback view ID if no match found (optional - fallback-screen is registered with lowest priority) */
@@ -504,15 +510,27 @@ declare class TransactionPlayback extends CoreLitElement {
     private playbackState?;
     private currentResult?;
     private isLoading;
+    private isDecoding;
     private error?;
     private loadedComponent?;
     private headerInfo?;
+    private decodedTransaction?;
     private componentContainerRef;
     private loader;
+    private decodingUnsubscribe?;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 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 decodeRawTransaction;
     private handleHeaderInfo;
     private loadView;
     private renderDebugPanel;

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { ResolvedAddress, ViewContext, ViewVariant, ViewMatch, FrameworkViewConf
 export { DecoderRecordForSelection, DefaultViewRegistry, FrameworkSupport, FrameworkViewConfig, ViewContext, ViewDefinition, ViewLoader, ViewMatch, ViewMatchOptions, ViewRegistry, getGlobalRegistry, resetGlobalRegistry, setGlobalRegistry } from '@lukso/transaction-view-headless';
 import { DecoderResult } from '@lukso/transaction-decoder';
 export { DecoderResult } from '@lukso/transaction-decoder';
+import { Transaction, Chain } from 'viem';
 import '@preact/signals-core';
 
 /**
@@ -434,11 +435,20 @@ declare global {
     }
 }
 
+/**
+ * Raw transaction input type - accepts transactions with JSON, BigintJSON, or bigint values
+ */
+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
@@ -462,35 +472,31 @@ declare global {
  *
  * @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>
  * ```
  */
 declare class TransactionPlayback extends CoreLitElement {
-    /** The root transaction to display */
+    /** The decoded transaction to display */
     transaction?: DecoderResult;
+    /** Raw transaction to decode internally (alternative to passing decoded transaction) */
+    rawTransaction?: RawTransactionInput;
+    /** Chain configuration for decoding (required when using rawTransaction) */
+    chain?: Chain;
     /** Index to display (0, 1, 2, ...) */
     index: number;
     /** Fallback view ID if no match found (optional - fallback-screen is registered with lowest priority) */
@@ -504,15 +510,27 @@ declare class TransactionPlayback extends CoreLitElement {
     private playbackState?;
     private currentResult?;
     private isLoading;
+    private isDecoding;
     private error?;
     private loadedComponent?;
     private headerInfo?;
+    private decodedTransaction?;
     private componentContainerRef;
     private loader;
+    private decodingUnsubscribe?;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 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 decodeRawTransaction;
     private handleHeaderInfo;
     private loadView;
     private renderDebugPanel;

package/dist/index.js

@@ -4262,6 +4262,10 @@ PermissionsBlock = __decorateClass([
 ], PermissionsBlock);
 
 // src/components/transaction-playback.ts
+import {
+  decodeTransaction,
+  JSONbigString
+} from "@lukso/transaction-decoder";
 import {
   createTransactionPlayback,
   isHeaderInfoEvent,
@@ -4416,6 +4420,7 @@ var TransactionPlayback = class extends CoreLitElement {
     this.index = 1;
     this.debug = false;
     this.isLoading = false;
+    this.isDecoding = false;
     this.componentContainerRef = createRef();
     this.loader = getGlobalLitLoader();
     this.handleHeaderInfo = (event) => {
@@ -4432,7 +4437,13 @@ var TransactionPlayback = class extends CoreLitElement {
     };
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("transaction") || changedProperties.has("index") || changedProperties.has("context") || changedProperties.has("variant")) {
+    if (changedProperties.has("rawTransaction") || changedProperties.has("chain")) {
+      if (this.rawTransaction) {
+        this.decodeRawTransaction();
+        return;
+      }
+    }
+    if (changedProperties.has("transaction") || changedProperties.has("decodedTransaction") || changedProperties.has("index") || changedProperties.has("context") || changedProperties.has("variant")) {
       this.loadView();
     }
   }
@@ -4455,9 +4466,80 @@ var TransactionPlayback = class extends CoreLitElement {
       TransactionViewEvents.HEADER_INFO,
       this.handleHeaderInfo
     );
+    if (this.decodingUnsubscribe) {
+      this.decodingUnsubscribe();
+      this.decodingUnsubscribe = void 0;
+    }
+  }
+  /**
+   * 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
+   */
+  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 = void 0;
+    this.decodedTransaction = void 0;
+    if (this.decodingUnsubscribe) {
+      this.decodingUnsubscribe();
+      this.decodingUnsubscribe = void 0;
+    }
+    try {
+      const normalizedTx = JSONbigString.read(this.rawTransaction);
+      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)
+      });
+      if (!Array.isArray(result)) {
+        this.decodedTransaction = result.immediate;
+        this.isDecoding = false;
+        this.loadView();
+        this.decodingUnsubscribe = result.signal.subscribe((state11) => {
+          if (state11.data && state11.data !== this.decodedTransaction) {
+            this.decodedTransaction = state11.data;
+            this.loadView();
+          }
+        });
+      } else {
+        const firstResult = result[0];
+        this.decodedTransaction = firstResult.immediate;
+        this.isDecoding = false;
+        this.loadView();
+        this.decodingUnsubscribe = firstResult.signal.subscribe(
+          (state11) => {
+            if (state11.data && state11.data !== this.decodedTransaction) {
+              this.decodedTransaction = state11.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);
+    }
   }
   async loadView() {
-    if (!this.transaction) {
+    const txToDisplay = this.decodedTransaction || this.transaction;
+    if (!txToDisplay) {
       this.error = "No transaction provided";
       return;
     }
@@ -4466,7 +4548,7 @@ var TransactionPlayback = class extends CoreLitElement {
     this.loadedComponent = void 0;
     this.headerInfo = void 0;
     try {
-      this.playbackState = createTransactionPlayback(this.transaction, {
+      this.playbackState = createTransactionPlayback(txToDisplay, {
         framework: "lit",
         fallbackViewId: this.fallbackViewId,
         context: this.context,
@@ -4588,6 +4670,14 @@ var TransactionPlayback = class extends CoreLitElement {
     `;
   }
   render() {
+    if (this.isDecoding) {
+      return html19`
+        <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>
+      `;
+    }
     if (this.isLoading) {
       return html19`
         <div class="flex flex-col items-center justify-center py-15 px-5 text-neutral-60">
@@ -4640,6 +4730,12 @@ var TransactionPlayback = class extends CoreLitElement {
 __decorateClass([
   property19({ type: Object })
 ], TransactionPlayback.prototype, "transaction", 2);
+__decorateClass([
+  property19({ type: Object })
+], TransactionPlayback.prototype, "rawTransaction", 2);
+__decorateClass([
+  property19({ type: Object })
+], TransactionPlayback.prototype, "chain", 2);
 __decorateClass([
   property19({ type: Number })
 ], TransactionPlayback.prototype, "index", 2);
@@ -4664,6 +4760,9 @@ __decorateClass([
 __decorateClass([
   state10()
 ], TransactionPlayback.prototype, "isLoading", 2);
+__decorateClass([
+  state10()
+], TransactionPlayback.prototype, "isDecoding", 2);
 __decorateClass([
   state10()
 ], TransactionPlayback.prototype, "error", 2);
@@ -4673,6 +4772,9 @@ __decorateClass([
 __decorateClass([
   state10()
 ], TransactionPlayback.prototype, "headerInfo", 2);
+__decorateClass([
+  state10()
+], TransactionPlayback.prototype, "decodedTransaction", 2);
 TransactionPlayback = __decorateClass([
   safeCustomElement("transaction-playback")
 ], TransactionPlayback);