@lukso/transaction-view-headless 0.4.3-dev.661418d → 0.4.3-dev.a07a66f

package/dist/view-matching-C9G3z8lQ.d.cts

@@ -0,0 +1,203 @@
+import { DecoderResult } from '@lukso/transaction-decoder';
+
+/**
+ * Different contexts WHERE transaction views are displayed
+ *
+ * Context determines the environment/location, which affects:
+ * - Available space
+ * - User intent
+ * - Security requirements
+ * - Interaction patterns
+ */
+type ViewContext = 'approval' | 'feed' | 'list' | 'detail' | 'review' | 'notification' | 'embed' | 'batch-summary';
+/**
+ * Different variants of HOW transaction views are displayed
+ *
+ * Variant determines the presentation style within a context:
+ * - Same transaction can have different variants in different contexts
+ * - Example: 'collapsed' in feed vs 'collapsed' in approval are different
+ */
+type ViewVariant = 'full' | 'collapsed' | 'minimal' | 'icon-only' | 'compact' | 'expanded' | string;
+/**
+ * Context-specific display requirements
+ */
+interface ViewContextRequirements {
+    /** Maximum height constraint */
+    maxHeight?: number;
+    /** Whether to show action buttons */
+    showActions?: boolean;
+    /** Level of detail to display */
+    detailLevel: 'minimal' | 'summary' | 'full' | 'debug';
+    /** Whether user can expand for more details */
+    expandable?: boolean;
+    /** Color scheme preference */
+    colorScheme?: 'light' | 'dark' | 'auto';
+    /** Whether to emphasize security warnings */
+    emphasizeSecurity?: boolean;
+}
+
+type DecoderRecordForSelection = DecoderResult & {
+    recordType?: string;
+    functionName?: string;
+    contractAddress?: string;
+    standard?: string;
+};
+
+/**
+ * Criteria that can be used to match transactions to views
+ */
+interface ViewMatchCriteria {
+    /** LSP standard (e.g., 'LSP7', 'LSP8', 'LSP0') */
+    standard?: string | string[];
+    /** Function name from ABI (e.g., 'transfer', 'setData', 'execute') */
+    functionName?: string | string[];
+    /** Record type from decoder (e.g., 'lsp7-transfer', 'set-data') */
+    recordType?: string | string[];
+    /** Contract address (for specific contract implementations) */
+    contractAddress?: string | string[];
+    /** Chain ID (for network-specific views) */
+    chainId?: number | number[];
+    /** Display context (opt-in) - WHERE to display (feed, approval, list, etc.) */
+    context?: ViewContext | ViewContext[];
+    /** Display variant (opt-in) - HOW to display (collapsed, minimal, full, etc.) */
+    variant?: ViewVariant | ViewVariant[];
+    /** Context requirements (opt-in) - additional constraints for context matching */
+    contextRequirements?: Partial<ViewContextRequirements>;
+    /**
+     * Custom matcher function for complex synchronous logic.
+     * Returns the number of conditions that matched (higher = better match).
+     *
+     * IMPORTANT: Must be synchronous and only use data from DecoderResult.
+     * For async operations, populate transaction.custom in an enhancer.
+     *
+     * @returns Number of matching conditions (0 = no match, higher = stronger match)
+     *
+     * @example
+     * // Match token transfers (tokenType === 0)
+     * customMatcher: (tx) => {
+     *   let matches = 0
+     *   if (tx.custom?.tokenType === 0) matches++
+     *   if (BigInt(tx.value || 0) > 0) matches++
+     *   return matches
+     * }
+     */
+    customMatcher?: (transaction: DecoderResult) => number;
+}
+/**
+ * Framework-agnostic view definition
+ */
+interface ViewDefinition {
+    /** Unique identifier for this view */
+    id: string;
+    /** Human-readable name */
+    name: string;
+    /** Criteria for matching transactions to this view */
+    criteria: ViewMatchCriteria;
+    /** Priority when multiple views match (higher = preferred) */
+    priority: number;
+    /** Supported frameworks for this view */
+    frameworks: FrameworkSupport;
+    /** Optional description */
+    description?: string;
+}
+/**
+ * Framework-specific loading configurations
+ *
+ * Strategic Framework Selection (Suffering Economics Optimized):
+ * - lit: Universal web components (works in Vue, React, Angular, Svelte, etc.)
+ * - vue: Native Vue components (optional, for Vue-specific optimizations)
+ * - rn: React Native components (mobile-native, optional - falls back to WebView)
+ *
+ * Lit is the universal fallback. Vue and React Native are optional native implementations
+ * that get priority when available in their respective environments.
+ */
+interface FrameworkSupport {
+    lit: FrameworkViewConfig;
+    vue?: FrameworkViewConfig;
+    rn?: FrameworkViewConfig;
+}
+/**
+ * Configuration for loading a view in a specific framework
+ */
+interface FrameworkViewConfig {
+    /** Loading method */
+    loader: ViewLoader;
+    /** Component name/identifier */
+    component: string;
+    /** Package where the component is located */
+    package?: string;
+}
+/**
+ * Different ways to load a view component
+ *
+ * Loaders support both static and lazy loading:
+ * - Static: `path: './Component.vue'` - bundled with app
+ * - Lazy: `path: () => import('./Component.vue')` - loaded on demand
+ */
+type ViewLoader = {
+    type: 'dynamic-import';
+    path: string | (() => Promise<any>);
+} | {
+    type: 'static-import';
+    path: string | (() => Promise<any>);
+} | {
+    type: 'custom-element';
+    tagName: string;
+} | {
+    type: 'registry-lookup';
+    registryKey: string;
+} | {
+    type: 'custom';
+    loader: (config: FrameworkViewConfig) => Promise<any>;
+};
+/**
+ * Result of matching a transaction against registered views
+ */
+interface ViewMatch {
+    /** The view definition that matched */
+    view: ViewDefinition;
+    /** Score indicating how well this view matches (0-1) */
+    score: number;
+    /** Which criteria matched */
+    matchedCriteria: (keyof ViewMatchCriteria)[];
+    /** Framework-specific loading config */
+    frameworkConfig?: FrameworkViewConfig;
+}
+/**
+ * Options for view matching
+ */
+interface ViewMatchOptions {
+    /** Target framework */
+    framework: 'lit' | 'vue' | 'rn';
+    /** Display context (optional) - WHERE to display (feed, approval, list, etc.) */
+    context?: ViewContext;
+    /** Display variant (optional) - HOW to display (collapsed, minimal, full, etc.) */
+    variant?: ViewVariant;
+    /** Context requirements (optional) - additional constraints for context-aware matching */
+    contextRequirements?: Partial<ViewContextRequirements>;
+    /** Minimum score threshold (0-1) */
+    minScore?: number;
+    /** Maximum number of matches to return */
+    maxMatches?: number;
+    /** Whether to include framework config in results */
+    includeFrameworkConfig?: boolean;
+}
+/**
+ * Registry for managing view definitions
+ */
+interface ViewRegistry {
+    /** Register a new view */
+    register(view: ViewDefinition): void;
+    /** Unregister a view by ID */
+    unregister(viewId: string): void;
+    /** Get all registered views */
+    getAllViews(): ViewDefinition[];
+    /** Find best matching views for a transaction */
+    findMatches(transaction: DecoderResult, options: ViewMatchOptions): ViewMatch[];
+    /** Get a specific view by ID */
+    getView(viewId: string): ViewDefinition | undefined;
+    /** Clear all registered views */
+    clear(): void;
+}
+
+export type { DecoderRecordForSelection as D, FrameworkSupport as F, ViewContext as V, ViewDefinition as a, ViewMatch as b, ViewMatchCriteria as c, ViewContextRequirements as d, ViewVariant as e, FrameworkViewConfig as f, ViewLoader as g, ViewMatchOptions as h, ViewRegistry as i };

package/dist/view-matching-C9G3z8lQ.d.ts

@@ -0,0 +1,203 @@
+import { DecoderResult } from '@lukso/transaction-decoder';
+
+/**
+ * Different contexts WHERE transaction views are displayed
+ *
+ * Context determines the environment/location, which affects:
+ * - Available space
+ * - User intent
+ * - Security requirements
+ * - Interaction patterns
+ */
+type ViewContext = 'approval' | 'feed' | 'list' | 'detail' | 'review' | 'notification' | 'embed' | 'batch-summary';
+/**
+ * Different variants of HOW transaction views are displayed
+ *
+ * Variant determines the presentation style within a context:
+ * - Same transaction can have different variants in different contexts
+ * - Example: 'collapsed' in feed vs 'collapsed' in approval are different
+ */
+type ViewVariant = 'full' | 'collapsed' | 'minimal' | 'icon-only' | 'compact' | 'expanded' | string;
+/**
+ * Context-specific display requirements
+ */
+interface ViewContextRequirements {
+    /** Maximum height constraint */
+    maxHeight?: number;
+    /** Whether to show action buttons */
+    showActions?: boolean;
+    /** Level of detail to display */
+    detailLevel: 'minimal' | 'summary' | 'full' | 'debug';
+    /** Whether user can expand for more details */
+    expandable?: boolean;
+    /** Color scheme preference */
+    colorScheme?: 'light' | 'dark' | 'auto';
+    /** Whether to emphasize security warnings */
+    emphasizeSecurity?: boolean;
+}
+
+type DecoderRecordForSelection = DecoderResult & {
+    recordType?: string;
+    functionName?: string;
+    contractAddress?: string;
+    standard?: string;
+};
+
+/**
+ * Criteria that can be used to match transactions to views
+ */
+interface ViewMatchCriteria {
+    /** LSP standard (e.g., 'LSP7', 'LSP8', 'LSP0') */
+    standard?: string | string[];
+    /** Function name from ABI (e.g., 'transfer', 'setData', 'execute') */
+    functionName?: string | string[];
+    /** Record type from decoder (e.g., 'lsp7-transfer', 'set-data') */
+    recordType?: string | string[];
+    /** Contract address (for specific contract implementations) */
+    contractAddress?: string | string[];
+    /** Chain ID (for network-specific views) */
+    chainId?: number | number[];
+    /** Display context (opt-in) - WHERE to display (feed, approval, list, etc.) */
+    context?: ViewContext | ViewContext[];
+    /** Display variant (opt-in) - HOW to display (collapsed, minimal, full, etc.) */
+    variant?: ViewVariant | ViewVariant[];
+    /** Context requirements (opt-in) - additional constraints for context matching */
+    contextRequirements?: Partial<ViewContextRequirements>;
+    /**
+     * Custom matcher function for complex synchronous logic.
+     * Returns the number of conditions that matched (higher = better match).
+     *
+     * IMPORTANT: Must be synchronous and only use data from DecoderResult.
+     * For async operations, populate transaction.custom in an enhancer.
+     *
+     * @returns Number of matching conditions (0 = no match, higher = stronger match)
+     *
+     * @example
+     * // Match token transfers (tokenType === 0)
+     * customMatcher: (tx) => {
+     *   let matches = 0
+     *   if (tx.custom?.tokenType === 0) matches++
+     *   if (BigInt(tx.value || 0) > 0) matches++
+     *   return matches
+     * }
+     */
+    customMatcher?: (transaction: DecoderResult) => number;
+}
+/**
+ * Framework-agnostic view definition
+ */
+interface ViewDefinition {
+    /** Unique identifier for this view */
+    id: string;
+    /** Human-readable name */
+    name: string;
+    /** Criteria for matching transactions to this view */
+    criteria: ViewMatchCriteria;
+    /** Priority when multiple views match (higher = preferred) */
+    priority: number;
+    /** Supported frameworks for this view */
+    frameworks: FrameworkSupport;
+    /** Optional description */
+    description?: string;
+}
+/**
+ * Framework-specific loading configurations
+ *
+ * Strategic Framework Selection (Suffering Economics Optimized):
+ * - lit: Universal web components (works in Vue, React, Angular, Svelte, etc.)
+ * - vue: Native Vue components (optional, for Vue-specific optimizations)
+ * - rn: React Native components (mobile-native, optional - falls back to WebView)
+ *
+ * Lit is the universal fallback. Vue and React Native are optional native implementations
+ * that get priority when available in their respective environments.
+ */
+interface FrameworkSupport {
+    lit: FrameworkViewConfig;
+    vue?: FrameworkViewConfig;
+    rn?: FrameworkViewConfig;
+}
+/**
+ * Configuration for loading a view in a specific framework
+ */
+interface FrameworkViewConfig {
+    /** Loading method */
+    loader: ViewLoader;
+    /** Component name/identifier */
+    component: string;
+    /** Package where the component is located */
+    package?: string;
+}
+/**
+ * Different ways to load a view component
+ *
+ * Loaders support both static and lazy loading:
+ * - Static: `path: './Component.vue'` - bundled with app
+ * - Lazy: `path: () => import('./Component.vue')` - loaded on demand
+ */
+type ViewLoader = {
+    type: 'dynamic-import';
+    path: string | (() => Promise<any>);
+} | {
+    type: 'static-import';
+    path: string | (() => Promise<any>);
+} | {
+    type: 'custom-element';
+    tagName: string;
+} | {
+    type: 'registry-lookup';
+    registryKey: string;
+} | {
+    type: 'custom';
+    loader: (config: FrameworkViewConfig) => Promise<any>;
+};
+/**
+ * Result of matching a transaction against registered views
+ */
+interface ViewMatch {
+    /** The view definition that matched */
+    view: ViewDefinition;
+    /** Score indicating how well this view matches (0-1) */
+    score: number;
+    /** Which criteria matched */
+    matchedCriteria: (keyof ViewMatchCriteria)[];
+    /** Framework-specific loading config */
+    frameworkConfig?: FrameworkViewConfig;
+}
+/**
+ * Options for view matching
+ */
+interface ViewMatchOptions {
+    /** Target framework */
+    framework: 'lit' | 'vue' | 'rn';
+    /** Display context (optional) - WHERE to display (feed, approval, list, etc.) */
+    context?: ViewContext;
+    /** Display variant (optional) - HOW to display (collapsed, minimal, full, etc.) */
+    variant?: ViewVariant;
+    /** Context requirements (optional) - additional constraints for context-aware matching */
+    contextRequirements?: Partial<ViewContextRequirements>;
+    /** Minimum score threshold (0-1) */
+    minScore?: number;
+    /** Maximum number of matches to return */
+    maxMatches?: number;
+    /** Whether to include framework config in results */
+    includeFrameworkConfig?: boolean;
+}
+/**
+ * Registry for managing view definitions
+ */
+interface ViewRegistry {
+    /** Register a new view */
+    register(view: ViewDefinition): void;
+    /** Unregister a view by ID */
+    unregister(viewId: string): void;
+    /** Get all registered views */
+    getAllViews(): ViewDefinition[];
+    /** Find best matching views for a transaction */
+    findMatches(transaction: DecoderResult, options: ViewMatchOptions): ViewMatch[];
+    /** Get a specific view by ID */
+    getView(viewId: string): ViewDefinition | undefined;
+    /** Clear all registered views */
+    clear(): void;
+}
+
+export type { DecoderRecordForSelection as D, FrameworkSupport as F, ViewContext as V, ViewDefinition as a, ViewMatch as b, ViewMatchCriteria as c, ViewContextRequirements as d, ViewVariant as e, FrameworkViewConfig as f, ViewLoader as g, ViewMatchOptions as h, ViewRegistry as i };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-headless",
-  "version": "0.4.3-dev.661418d",
+  "version": "0.4.3-dev.a07a66f",
   "description": "Framework-agnostic transaction decoder and view selection system",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@preact/signals-core": "^1.12.1",
     "@tanstack/query-core": "^5.90.12",
-    "viem": "^2.43.1",
-    "@lukso/transaction-decoder": "1.3.3-dev.661418d"
+    "viem": "^2.43.3",
+    "@lukso/transaction-decoder": "1.3.3-dev.a07a66f"
   },
   "devDependencies": {
     "@types/node": "^25.0.3",

package/src/composables/use-transaction-playback.ts

@@ -100,13 +100,16 @@ export interface TransactionPlaybackState {
 
 /**
  * Check if a transaction is a batch transaction
+ *
+ * Only executeBatch is a navigable batch where:
+ * - Index 0 shows batch summary
+ * - Index 1+ shows individual child transactions
+ *
+ * setDataBatch is NOT a batch - it's a single transaction with a special view
+ * that renders all key/value pairs from children.
  */
 function isBatchTransaction(transaction: DecoderResult): boolean {
-  return (
-    transaction.resultType === 'executeBatch' ||
-    transaction.resultType === 'setDataBatch' ||
-    !!(transaction as any).children?.length
-  )
+  return transaction.resultType === 'executeBatch'
 }
 
 /**

package/src/types/index.ts

@@ -3,6 +3,20 @@ export type {
   ViewContextRequirements,
   ViewVariant,
 } from './view-contexts'
+export type {
+  HeaderInfoEvent,
+  TransactionHeaderInfo,
+  TransactionModification,
+  TransactionModificationEvent,
+  TransactionModificationWithContext,
+} from './view-events'
+export {
+  dispatchHeaderInfo,
+  dispatchTransactionModification,
+  isHeaderInfoEvent,
+  isTransactionModificationEvent,
+  TransactionViewEvents,
+} from './view-events'
 export type {
   DecoderRecordForSelection,
   FrameworkSupport,