@lukso/transaction-view-core 0.7.9-dev.a7b3604 → 0.7.9

package/dist/index.d.ts

@@ -0,0 +1,594 @@
+export { safeCustomElement } from '@lukso/core/utils';
+export { AddressData, AddressDisplay, AddressView, CustomOption, CustomSelect, FunctionNameView, GasProviderView, IconView, ImageLoadState, ImageLoaderController, MultiSignalController, NotificationView, ProgressSegment, ProgressView, ScrollToBottomButton, SelectOption, SignalController, TransactionSignalController, TransactionViewController, TransactionViewState, UrlView, ValueView, useImageLoader, useSignal, useSignals, useTransactionSignal, useTransactionView } from './shared/index.js';
+import * as lit from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import { CoreLitElement } from './styles/index.js';
+import { ResolvedAddress, ViewContext, ViewVariant, ViewMatch, FrameworkViewConfig } from '@lukso/transaction-view-headless';
+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';
+
+/**
+ * Image list component for displaying arrays of images/assets
+ *
+ * Displays a list of images from a resolved address property (e.g., 'images', 'assets').
+ * If items have an 'index' property, shows only items with matching indices.
+ * Handles different file types (images, videos, audio, generic files).
+ *
+ * @example
+ * ```html
+ * <!-- Display all images -->
+ * <image-list
+ *   address="0x1234..."
+ *   image-hint="images"
+ * ></image-list>
+ *
+ * <!-- Display images with index 0-5 -->
+ * <image-list
+ *   address="0x1234..."
+ *   image-hint="images"
+ *   min-index="0"
+ *   max-index="5"
+ * ></image-list>
+ * ```
+ */
+declare class ImageList extends CoreLitElement {
+    /**
+     * The address to display (required)
+     */
+    address: string;
+    /**
+     * Property name to use for loading images (e.g., 'images', 'assets')
+     * This should point to an array property on the resolved data
+     */
+    imageHint: string;
+    /**
+     * Minimum index to display (only applies if items have index property)
+     */
+    minIndex?: number;
+    /**
+     * Maximum index to display (only applies if items have index property)
+     */
+    maxIndex?: number;
+    /**
+     * Display size for images
+     */
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    /**
+     * Optional card view: wrap list in a bordered, padded container
+     */
+    isCardView: boolean;
+    private isLoading;
+    private addressResolver;
+    private addressTask;
+    /**
+     * Get the list of items to display from resolved data
+     */
+    private getDisplayItems;
+    /**
+     * Check if an item is an actual image based on fileType
+     */
+    private isImageFile;
+    /**
+     * Get file type icon for non-image files
+     */
+    private getFileTypeIcon;
+    /**
+     * Render a single image item
+     */
+    private renderImageItem;
+    private getImageMinSizePx;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'image-list': ImageList;
+    }
+}
+
+/**
+ * Expandable info panel for displaying detailed asset information
+ * Auto-resolves data from address or address-tokenId
+ */
+declare class InfoPanel extends LitElement {
+    /**
+     * Address or address-tokenId to display info for
+     */
+    address: string;
+    open: boolean;
+    standard: string;
+    type: 'transfer' | 'mint' | 'burn' | 'approve';
+    private _resolvedData?;
+    private _extractBaseAddress;
+    private _extractTokenId;
+    static styles: lit.CSSResult;
+    private _handleClose;
+    private _copyToClipboard;
+    private _renderHeader;
+    private _renderContractAddress;
+    private _renderTokenId;
+    private _renderDescription;
+    private _renderLinks;
+    private _renderImages;
+    private _renderAssets;
+    private _handleBackdropClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'info-panel': InfoPanel;
+    }
+}
+
+/**
+ * Asset card component for displaying token/NFT information
+ * Replaces the DigitalAssetInfo helper component
+ */
+declare class AssetCard extends CoreLitElement {
+    address: string | undefined;
+    tokenId: string | undefined;
+    amount: string | undefined;
+    /** Function name associated with the asset (e.g., "LSP4DigitalAsset") */
+    functionName: string | undefined;
+    /** Standard associated with the asset (e.g., "LSP4") */
+    standard: string | undefined;
+    /** Function icon name */
+    functionIcon: string;
+    showInfoButton: boolean;
+    showCreator: boolean;
+    private displayDetails;
+    private _resolvedData?;
+    private _handleInfoClick;
+    private addressResolver;
+    private _resolutionTask;
+    private _extractBaseAddress;
+    private _renderAddressSection;
+    private _renderCreatorSection;
+    private _renderContractAddress;
+    private _renderAssetLongName;
+    private _renderAssetSymbol;
+    private get displayedTokenId();
+    private _renderTokenId;
+    private _renderDescription;
+    private _renderLinks;
+    private _renderImages;
+    private _renderAssets;
+    private _renderStandards;
+    private _renderTokenDetails;
+    private _formattedAmount;
+    private renderFormattedTokenIdBadge;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'asset-card': AssetCard;
+    }
+}
+
+type EnhancedInfo$1 = {
+    address: `0x${string}`;
+    standard?: string;
+    tokenId?: `0x${string}`;
+    name?: string;
+    __gqltype?: 'Profile' | 'Asset' | 'Token';
+    [key: string]: unknown;
+};
+interface TransactionInfo {
+    /** Transaction hash */
+    hash?: string;
+    /** Block number */
+    blockNumber?: bigint | string;
+    /** Block timestamp */
+    timestamp?: bigint | string | Date;
+    /** Gas used */
+    gasUsed?: bigint | string;
+    /** Gas price */
+    gasPrice?: bigint | string;
+    /** Transaction status */
+    status?: 'success' | 'failed' | 'pending';
+    /** Network/chain name */
+    network?: string;
+}
+interface DescriptionItem {
+    /** Label for the description item */
+    label: string;
+    /** Value to display */
+    value: string;
+    /** Optional secondary value or subtitle */
+    subtitle?: string;
+    /** Whether this item is highlighted */
+    highlighted?: boolean;
+    /** Whether to show copy button */
+    copyable?: boolean;
+    /** Custom icon for this item */
+    icon?: string;
+    /** Link URL if this item should be clickable */
+    link?: string;
+}
+interface DescriptionViewData {
+    /** Main title/heading */
+    title?: string;
+    /** Main description text */
+    description?: string;
+    /** Address key (format: "ADDRESS" or "ADDRESS-TOKENID") */
+    address?: string;
+    /** Value being transferred */
+    value?: bigint | string;
+    /** Raw transaction object */
+    transaction?: any;
+    /** Enhanced info from decoder (contains metadata) */
+    enhancedInfo?: EnhancedInfo$1;
+    /** Transaction-specific information */
+    transactionInfo?: TransactionInfo;
+    /** Additional custom items to display */
+    customItems?: DescriptionItem[];
+    /** Transaction type for styling */
+    type?: 'transfer' | 'mint' | 'burn' | 'approve' | 'execute' | 'deploy';
+    /** Loading state */
+    loading?: boolean;
+}
+/**
+ * Description view component for displaying transaction details and metadata
+ * Provides flexible key-value display with support for various transaction types
+ */
+declare class DescriptionView extends LitElement {
+    data: DescriptionViewData;
+    variant: 'default' | 'compact' | 'detailed';
+    static styles: lit.CSSResult;
+    private _copyToClipboard;
+    private _handleItemClick;
+    private _renderHeader;
+    private _renderItems;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'description-view': DescriptionView;
+    }
+}
+
+type EnhancedInfo = {
+    address: `0x${string}`;
+    standard?: string;
+    tokenId?: `0x${string}`;
+    name?: string;
+    __gqltype?: 'Profile' | 'Asset' | 'Token';
+    [key: string]: unknown;
+};
+interface UniversalTokenViewData {
+    /** Main transaction address key (ADDRESS or ADDRESS-TOKENID) */
+    address?: string;
+    /** Value being transferred */
+    value?: bigint | string;
+    /** Raw transaction object (DecoderResult) */
+    transaction?: any;
+    /** Enhanced info from resolver */
+    enhancedInfo?: EnhancedInfo;
+    /** Transaction type */
+    type?: 'transfer' | 'mint' | 'burn' | 'approve' | 'execute' | 'deploy';
+    /** Title text (e.g., "Transfer Token", "Mint Token") */
+    title?: string;
+    /** Title icon name */
+    icon?: string;
+    /** Standard tag text (e.g., "LSP7-DigitalAsset", "LSP8-IdentifiableDigitalAsset") */
+    standard?: string;
+    /** Loading states */
+    loading?: {
+        asset?: boolean;
+        metadata?: boolean;
+        transaction?: boolean;
+    };
+}
+/**
+ * Universal token view component that combines all core components
+ * Can replace most individual Vue transaction views
+ */
+declare class UniversalTokenView extends LitElement {
+    data: UniversalTokenViewData;
+    private _infoPanelOpen;
+    static styles: lit.CSSResult;
+    private _handleInfoPanelToggle;
+    private _handleInfoPanelClose;
+    private _buildAssetCardData;
+    private _renderLoadingState;
+    private _renderErrorState;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'universal-token-view': UniversalTokenView;
+    }
+}
+
+/**
+ * ContractCard Component
+ *
+ * A wrapper around lukso-card that auto-resolves contract/token metadata from an address or address-tokenId.
+ * Provides the same variants and styling as lukso-card with automatic data population.
+ *
+ * @example
+ * ```html
+ * <!-- Basic contract card -->
+ * <contract-card address="0x1234..."></contract-card>
+ *
+ * <!-- Profile variant with token ID -->
+ * <contract-card
+ *   address="0x1234..."
+ *   variant="profile"
+ * ></contract-card>
+ *
+ * <!-- With custom slots -->
+ * <contract-card address="0x1234..." variant="with-header">
+ *   <div slot="header">Custom Header</div>
+ *   <div slot="content">Custom Content</div>
+ * </contract-card>
+ * ```
+ *
+ * @slot header - Custom header content (for with-header variant)
+ * @slot content - Custom content area
+ * @slot bottom - Bottom slot content
+ *
+ * @fires address-click - Fired when the card is clicked (if clickable=true)
+ */
+declare class ContractCard extends LitElement {
+    /**
+     * Contract address or address-tokenId format
+     */
+    address: string;
+    /**
+     * Pre-resolved address data (optional, for performance optimization)
+     */
+    resolved?: ResolvedAddress;
+    /**
+     * Card variant (maps to lukso-card variants)
+     * - basic: Simple card with content slot
+     * - with-header: Card with header and content sections
+     * - profile: Profile card layout
+     * - profile-2: Alternative profile layout
+     * - hero: Large hero-style card
+     * - dapp: DApp-specific card layout
+     */
+    variant: 'basic' | 'with-header' | 'profile' | 'profile-2' | 'hero' | 'dapp';
+    /**
+     * Border radius size
+     */
+    borderRadius: 'small' | 'medium' | 'none';
+    /**
+     * Shadow size
+     */
+    shadow: 'small' | 'medium' | 'large';
+    /**
+     * Card width in pixels
+     */
+    width?: number;
+    /**
+     * Card height in pixels
+     */
+    height?: number;
+    /**
+     * Whether the card is hoverable
+     */
+    isHoverable: boolean;
+    /**
+     * Whether the card has an overlay
+     */
+    hasOverlay: boolean;
+    /**
+     * Custom CSS class for the card
+     */
+    customClass: string;
+    /**
+     * Custom CSS class for the header
+     */
+    headerClass: string;
+    private _resolvedData?;
+    private _profileImageUrl?;
+    private _backgroundImageUrl?;
+    private _extractBaseAddress;
+    private _handleClick;
+    static styles: lit.CSSResult;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'contract-card': ContractCard;
+    }
+}
+
+type PermissionLevels = {
+    permissionName: string;
+    type: string;
+    icon?: string;
+    isActive: boolean;
+    isForward?: boolean;
+    info: string;
+};
+/**
+ * Permissions block card
+ *
+ * Lit/Web Component equivalent of the provided Vue PermissionsBlock.
+ * - Uses Tailwind utility classes for styling
+ * - Uses LUKSO web components where applicable (lukso-icon)
+ */
+declare class PermissionsBlock extends CoreLitElement {
+    /** Header icon name */
+    icon: string;
+    /** Optional action icon name (reserved, not displayed yet) */
+    actionIcon: string;
+    /** CSS color (e.g., var(--blue-75)) applied to icons */
+    color: string;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description: string;
+    /** Control identifier used by parent (informational only here) */
+    control: string;
+    /** Permission levels to render */
+    permissions: PermissionLevels[];
+    render(): lit.TemplateResult<1>;
+    private renderPermission;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'permissions-block': PermissionsBlock;
+    }
+}
+
+/**
+ * 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,
+ * 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
+ * - index="1" → renders the transaction (same)
+ * - index="2" → null/error
+ *
+ * **Batch Transaction:**
+ * - index="0" → renders batch summary/expandable view
+ * - index="1" → renders first child transaction
+ * - index="2" → renders second child transaction
+ * - etc.
+ *
+ * **Context & Variant:**
+ * - 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
+ * <!-- With decoded transaction -->
+ * <transaction-playback
+ *   .transaction="${decodedTransaction}"
+ *   index="1"
+ *   context="feed"
+ *   variant="compact"
+ * ></transaction-playback>
+ *
+ * <!-- With raw transaction (local decoding) -->
+ * <transaction-playback
+ *   .rawTransaction="${rawTx}"
+ *   .chain="${lukso}"
+ *   index="1"
+ *   context="approval"
+ *   variant="full"
+ * ></transaction-playback>
+ * ```
+ */
+declare class TransactionPlayback extends CoreLitElement {
+    /** 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) */
+    fallbackViewId?: string;
+    /** Context: WHERE the transaction is displayed */
+    context?: ViewContext;
+    /** Variant: HOW the transaction should be rendered */
+    variant?: ViewVariant;
+    /** Show debug information */
+    debug: boolean;
+    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;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'transaction-playback': TransactionPlayback;
+    }
+}
+
+/**
+ * Lit component view loader
+ * Handles loading of Lit web components for transaction views
+ */
+declare class LitViewLoader {
+    private loadedComponents;
+    /**
+     * Load a component from a view match
+     */
+    loadFromMatch(match: ViewMatch): Promise<any>;
+    /**
+     * Load a component based on framework config
+     */
+    loadComponent(config: FrameworkViewConfig): Promise<any>;
+    /**
+     * Load a custom element (Web Component)
+     */
+    private loadCustomElement;
+    /**
+     * Load via dynamic import
+     */
+    private loadDynamicImport;
+    /**
+     * Load via static import (not really possible at runtime, but for completeness)
+     */
+    private loadStaticImport;
+    /**
+     * Create a component instance with data
+     */
+    createInstance(componentClass: any, data: any): HTMLElement;
+    /**
+     * Clear component cache
+     */
+    clearCache(): void;
+}
+/**
+ * Get the global Lit view loader
+ */
+declare function getGlobalLitLoader(): LitViewLoader;
+/**
+ * Set a custom global Lit loader (useful for testing)
+ */
+declare function setGlobalLitLoader(loader: LitViewLoader): void;
+/**
+ * Reset the global Lit loader (mainly for testing)
+ */
+declare function resetGlobalLitLoader(): void;
+
+export { LitViewLoader, getGlobalLitLoader, resetGlobalLitLoader, setGlobalLitLoader };