@lukso/transaction-view-core 0.3.1-dev.a8c9315

package/dist/shared/index.d.cts

@@ -0,0 +1,887 @@
+import * as lit from 'lit';
+import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import { CoreLitElement } from '../styles/index.cjs';
+import { ImageResult, ImageLoadOptions, AddressImageData, UseTransactionViewOptions, ViewMatch } from '@lukso/transaction-view-headless';
+import { Signal } from '@preact/signals-core';
+import { DecoderResult } from '@lukso/transaction-decoder';
+
+/**
+ * Address data interface for display
+ */
+interface AddressData$1 {
+    address: string;
+    name?: string;
+    lsp4TokenName?: string;
+    lsp4TokenSymbol?: string;
+    baseAsset?: {
+        lsp4TokenName?: string;
+        lsp4TokenSymbol?: string;
+    };
+    profileImages?: any[];
+    avatar?: any[];
+    icon?: any[];
+    images?: any[];
+    __gqltype?: string;
+    __identity?: string;
+    identity?: string;
+}
+/**
+ * Universal address display component with profile resolution
+ *
+ * Displays an address with profile image and name, supporting both
+ * Universal Profiles and contract addresses with proper styling.
+ *
+ * @example
+ * ```html
+ * <address-display
+ *   address="0x1234..."
+ *   .resolved="${resolvedData}"
+ *   size="medium"
+ *   show-copy-button
+ * ></address-display>
+ * ```
+ */
+declare class AddressDisplay extends LitElement {
+    /**
+     * The address to display (required)
+     */
+    value: string;
+    /**
+     * @deprecated Use `value` instead
+     */
+    address?: string;
+    /**
+     * Resolved address data (profile, images, etc.)
+     */
+    resolved?: AddressData$1;
+    /**
+     * Display size
+     */
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    /**
+     * Optional label to display above the address
+     */
+    label?: string;
+    /**
+     * Whether to show the copy button
+     */
+    showCopyButton: boolean;
+    /**
+     * Whether to show the full address or just the name
+     */
+    nameOnly: boolean;
+    /**
+     * Maximum width for the name display (in pixels)
+     */
+    maxWidth: number;
+    /**
+     * Get the effective address value (supports both `value` and legacy `address` props)
+     */
+    private get effectiveAddress();
+    private imageData?;
+    private isLoadingImage;
+    private imageLoader;
+    private addressResolver;
+    private imageTask;
+    /**
+     * Get pixel size for the current size setting
+     */
+    private getSizePixels;
+    /**
+     * Get display name for the address
+     */
+    private getDisplayName;
+    /**
+     * Check if this is a contract address (shows square icon)
+     */
+    private get isContract();
+    /**
+     * Get prefix for the address display
+     */
+    private get addressPrefix();
+    /**
+     * Check if should show name colors
+     */
+    private get shouldShowNameColor();
+    /**
+     * Handle copy button click
+     */
+    private handleCopy;
+    /**
+     * Handle address click
+     */
+    private handleAddressClick;
+    render(): lit.TemplateResult<1>;
+    static styles: lit.CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'address-display': AddressDisplay;
+    }
+}
+
+/**
+ * Address text view component (text only, no image)
+ *
+ * A text-only address display component that shows name and/or address.
+ * Use alongside <icon-view> for complete address presentation.
+ *
+ * @example
+ * ```html
+ * <address-view
+ *   address="0x1234..."
+ *   size="medium"
+ * ></address-view>
+ * ```
+ */
+declare class AddressView extends CoreLitElement {
+    /**
+     * The address to display (required)
+     */
+    address: string;
+    /**
+     * Display size
+     */
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    /**
+     * Whether to show only the name (no address)
+     */
+    nameOnly: boolean;
+    /**
+     * Whether to show only the address (no name)
+     */
+    addressOnly: boolean;
+    /**
+     * Card view: render with bordered container, header label and copy button
+     */
+    isCardView: boolean;
+    /**
+     * Optional label to show in card header (only when isCardView)
+     */
+    label?: string;
+    /**
+     * Whether to show a copy button (only relevant for card view)
+     */
+    showCopyButton: boolean;
+    /**
+     * Maximum width for the display (in pixels)
+     */
+    maxWidth: number;
+    /**
+     * Whether to show the small identicon next to the name/address
+     */
+    showIdenticon: boolean;
+    /**
+     * Address text color token (e.g., "red-55")
+     */
+    addressColor?: string;
+    /**
+     * Name text color token (e.g., "blue-50")
+     */
+    nameColor?: string;
+    private isLoadingAddress;
+    private identicon?;
+    private addressResolver;
+    private addressTask;
+    /**
+     * Get the display address (first segment only for compound addresses)
+     * e.g., "0x123...-0x456..." becomes "0x123..."
+     */
+    private get displayAddress();
+    /**
+     * Get display name for the address
+     */
+    private getDisplayName;
+    /**
+     * Check if this is a contract address (non-profile)
+     */
+    private get isContract();
+    /**
+     * Check if this should show the address hash (profiles show hash, contracts don't)
+     */
+    private get shouldShowAddressHash();
+    /**
+     * Get prefix for the address display
+     */
+    private get addressPrefix();
+    /**
+     * Check if should show name colors
+     */
+    private get shouldShowNameColor();
+    /**
+     * Handle address click
+     */
+    private handleClick;
+    /** Generate identicon when address changes */
+    protected willUpdate(changed: Map<string, unknown>): void;
+    /** Copy the display address to clipboard (card view) */
+    private handleCopy;
+    /** ========== RENDER HELPERS (Use Cases) ========== */
+    /** Pixel size mapping for identicon based on component size */
+    private getIdenticonSizePx;
+    /**
+     * Render only the name (and optionally the address hash when allowed for profiles)
+     */
+    private renderNameOnly;
+    /**
+     * Render only the raw address (no name)
+     */
+    private renderAddressOnly;
+    /**
+     * Render both name and (conditionally) the address hash (profiles show hash, contracts may hide it)
+     */
+    private renderNameAndAddress;
+    private renderIdenticon;
+    /** Map size to a typography class for the label */
+    private getLabelClass;
+    private renderDisplayName;
+    /**
+     * Decide which of the three core inline variants to render
+     */
+    private renderInlineVariant;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'address-view': AddressView;
+    }
+}
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled: boolean;
+}
+declare class CustomOption extends CoreLitElement {
+    selected: boolean;
+    disabled: boolean;
+    hoverable: boolean;
+    render(): lit.TemplateResult<1>;
+}
+declare class CustomSelect extends CoreLitElement {
+    value?: string;
+    open: boolean;
+    options: SelectOption[];
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    private toggleOpen;
+    private close;
+    private onOptionClick;
+    private onKeyDown;
+    private onOutsideClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private getSelectedOption;
+    private getIdenticonSizePx;
+    private renderIdenticon;
+    private renderOptionLabel;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'custom-select': CustomSelect;
+        'custom-option': CustomOption;
+    }
+}
+
+/**
+ * Compact function name badge with icon
+ * Props:
+ * - label (deprecated): text to display; use default slot instead
+ * - icon: lukso-icon name
+ * - size: x-small | small | medium | large (affects paddings and font)
+ * - color: optional lukso-icon color token (e.g., "blue-50")
+ */
+declare class FunctionNameView extends CoreLitElement {
+    /**
+     * Deprecated: Prefer slot content for the label. Will be used as fallback
+     * when no slot is provided to maintain backward compatibility.
+     */
+    label: string;
+    icon: string;
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    color?: string;
+    private getPadding;
+    private getFontSize;
+    private getIconSize;
+    private getHeight;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'function-name-view': FunctionNameView;
+    }
+}
+
+type GasProvider = {
+    type: 'relayer' | 'controller';
+    id: string;
+};
+type Relayer = {
+    id: string;
+    name: string;
+    isCustom: boolean;
+    apiUrl: string;
+    chainIds: string[];
+    createdAt: number;
+    website?: string;
+};
+declare class GasProviderView extends CoreLitElement {
+    allRelayers: Relayer[];
+    balance: number;
+    selectedGasProvider?: GasProvider;
+    controllerAddress?: string;
+    controllerName?: string;
+    symbol: string;
+    decimals: number;
+    transactionFee: number;
+    relayerAvailable: number;
+    relayerUsed: number;
+    relayerToBeUsed: number;
+    relayerResetDate: string;
+    private formatToken;
+    private onSelectChanged;
+    private renderProgress;
+    private renderControllerProgress;
+    private renderRelayerProgress;
+    private displayRelayerResetDate;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gas-provider-view': GasProviderView;
+    }
+}
+
+/**
+ * Address data interface for display
+ */
+interface AddressData {
+    address: string;
+    name?: string;
+    lsp4TokenName?: string;
+    lsp4TokenSymbol?: string;
+    baseAsset?: {
+        lsp4TokenName?: string;
+        lsp4TokenSymbol?: string;
+    };
+    profileImages?: any[];
+    avatar?: any[];
+    icon?: any[];
+    images?: any[];
+    __gqltype?: string;
+    __identity?: string;
+    identity?: string;
+}
+/**
+ * Icon/Avatar display component for addresses
+ *
+ * Displays just the profile image/avatar for an address with proper styling.
+ * Supports both Universal Profiles and contract addresses.
+ *
+ * @example
+ * ```html
+ * <icon-view
+ *   address="0x1234..."
+ *   .resolved="${resolvedData}"
+ *   size="medium"
+ * ></icon-view>
+ * ```
+ */
+declare class IconView extends CoreLitElement {
+    /**
+     * The address to display (required)
+     */
+    address: string;
+    /**
+     * Resolved address data (profile, images, etc.)
+     */
+    resolved?: AddressData;
+    /**
+     * Display size
+     */
+    size: 'x-small' | 'small' | 'medium' | 'large' | '2x-large';
+    /**
+     * Optional label to display above the icon
+     */
+    label?: string;
+    /**
+     * Whether to show the resolved display name below/beside the icon
+     */
+    showName: boolean;
+    /**
+     * Name placement relative to the icon: 'below' (stacked) or 'beside' (inline)
+     */
+    namePosition: 'below' | 'beside';
+    /**
+     * Maximum width for the name label (pixels)
+     */
+    maxWidth: number;
+    /**
+     * Whether to show small identicon badge on the avatar
+     */
+    showIconIdenticon: boolean;
+    /**
+     * Whether to show small identicon badge on the label
+     */
+    showLabelIdenticon: boolean;
+    /**
+     * Force unresolved display (for testing)
+     */
+    forceUnresolved: boolean;
+    /**
+     * Property name to use for loading images (e.g., 'images', 'icons', 'profileImages')
+     * If not set, uses default image loading logic
+     */
+    imageHint?: string;
+    /**
+     * Index to use when loading from an image array (e.g., images[0])
+     * Only used when imageHint points to an array property
+     */
+    imageIndex?: number;
+    private imageData?;
+    private isLoadingImage;
+    private isLoadingAddress;
+    private imageLoader;
+    private addressResolver;
+    private addressTask;
+    private imageTask;
+    /**
+     * Get pixel size for the current size setting
+     */
+    private getSizePixels;
+    /**
+     * Check if this is a contract address (shows square icon)
+     */
+    private get isContract();
+    /**
+     * Handle icon click
+     */
+    private handleClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icon-view': IconView;
+    }
+}
+
+/**
+ * Lit controller state for image loading
+ */
+interface ImageLoadState {
+    result: ImageResult | null;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Lit Reactive Controller for image loading functionality
+ * Integrates the headless image loader with Lit elements
+ */
+declare class ImageLoaderController implements ReactiveController {
+    private host;
+    private headlessLoader;
+    private _state;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get state(): ImageLoadState;
+    get isLoading(): boolean;
+    get error(): string | null;
+    get result(): ImageResult | null;
+    /**
+     * Load image from data array
+     */
+    loadImage(imageData: any[], options?: ImageLoadOptions): Promise<ImageResult | null>;
+    /**
+     * Load profile image from address data
+     */
+    loadProfileImage(addressData: AddressImageData, options?: ImageLoadOptions): Promise<ImageResult | null>;
+    /**
+     * Load image from address signal (reactive)
+     */
+    loadFromSignal(addressSignal: Signal<{
+        data?: AddressImageData;
+    }>, options?: ImageLoadOptions): void;
+    /**
+     * Get fallback image synchronously
+     */
+    getFallbackImage(addressData: AddressImageData): ImageResult;
+    /**
+     * Check if address is a contract
+     */
+    isContractAddress(addressData: AddressImageData): boolean;
+    /**
+     * Clear current state
+     */
+    clear(): void;
+    private updateState;
+}
+/**
+ * Utility function to create an image loader controller
+ */
+declare function useImageLoader(host: ReactiveControllerHost): ImageLoaderController;
+
+declare class NotificationView extends CoreLitElement {
+    /** Variant controls background/emphasis */
+    variant: 'success' | 'warning' | 'error' | 'info';
+    /** Notification message content */
+    message: string;
+    /** Optional title shown above the description */
+    title: string;
+    /** Whether the acknowledge button is shown */
+    acknowledgeable: boolean;
+    /** Text shown next to acknowledge checkbox */
+    acknowledgeText: string;
+    /** Internal acknowledged state (for default behavior) */
+    private acknowledged;
+    /** External control for acknowledge checkbox */
+    checked: boolean;
+    private handleAcknowledgeChange;
+    render(): lit.TemplateResult<1>;
+    private renderIcon;
+    private getVariantColor;
+    private getVariantBackgroundClass;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'notification-view': NotificationView;
+    }
+}
+
+type ProgressSegment = {
+    value: number;
+    color?: string;
+    title?: string;
+};
+declare class ProgressView extends CoreLitElement {
+    data: ProgressSegment[];
+    label?: string;
+    unit?: string;
+    address?: string;
+    labelPosition: 'left' | 'right';
+    private renderGasProviderLabel;
+    private renderAddressLabel;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'progress-view': ProgressView;
+    }
+}
+
+/**
+ * ScrollToBottomButton (core) - reusable scroll helper.
+ * Emits `scroll-to-bottom` when clicked.
+ */
+declare class ScrollToBottomButton extends CoreLitElement {
+    /** Controls visibility */
+    show: boolean;
+    /** Icon color (CSS var or token) */
+    color: string;
+    /** Icon size token */
+    iconSize: 'x-small' | 'small' | 'medium' | 'large';
+    /** Icon name (attribute: icon-name) */
+    iconName: string;
+    private handleClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-to-bottom-button': ScrollToBottomButton;
+    }
+}
+
+/**
+ * Lit Reactive Controller for @preact/signals-core integration
+ * This controller allows Lit elements to reactively update when signals change
+ */
+declare class SignalController<T = any> implements ReactiveController {
+    private host;
+    private signal;
+    private unsubscribe?;
+    constructor(host: ReactiveControllerHost, signal: Signal<T>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get value(): T;
+    /**
+     * Create a new SignalController for a different signal
+     */
+    static create<U>(host: ReactiveControllerHost, signal: Signal<U>): SignalController<U>;
+}
+/**
+ * Lit Reactive Controller for multiple signals
+ * Updates the host when any of the tracked signals change
+ */
+declare class MultiSignalController implements ReactiveController {
+    private host;
+    private signals;
+    private unsubscribes;
+    constructor(host: ReactiveControllerHost, signals: Signal<any>[]);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    getValue(index: number): any;
+    getValues(): any[];
+}
+/**
+ * Utility function to create a signal controller
+ */
+declare function useSignal<T>(host: ReactiveControllerHost, signal: Signal<T>): SignalController<T>;
+/**
+ * Utility function to create a multi-signal controller
+ */
+declare function useSignals(host: ReactiveControllerHost, signals: Signal<any>[]): MultiSignalController;
+
+/**
+ * Lit controller state for transaction view
+ */
+interface TransactionViewState {
+    matches: ViewMatch[];
+    bestMatch: ViewMatch | null;
+    component: any;
+    loading: boolean;
+    error: Error | null;
+    isResolvingAddresses: boolean;
+    resolvedAddresses: Record<string, any>;
+}
+/**
+ * Lit Reactive Controller for transaction view functionality
+ * Integrates the headless transaction view system with Lit elements
+ */
+declare class TransactionViewController implements ReactiveController {
+    private transaction;
+    private options;
+    private host;
+    private headlessInstance;
+    private _state;
+    private syncInterval?;
+    constructor(host: ReactiveControllerHost, transaction: DecoderResult, options: UseTransactionViewOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get state(): TransactionViewState;
+    get matches(): ViewMatch[];
+    get bestMatch(): ViewMatch | null;
+    get component(): any;
+    get isLoading(): boolean;
+    get error(): Error | null;
+    get isResolvingAddresses(): boolean;
+    get resolvedAddresses(): Record<string, any>;
+    /**
+     * Load a specific match
+     */
+    loadMatch(match: ViewMatch): Promise<any>;
+    /**
+     * Load the best match
+     */
+    loadBestMatch(): Promise<any>;
+    /**
+     * Refresh matches
+     */
+    refreshMatches(): void;
+    /**
+     * Resolve addresses
+     */
+    resolveAddresses(): Promise<void>;
+    /**
+     * Update transaction and options
+     */
+    update(transaction: DecoderResult, options: UseTransactionViewOptions): void;
+    /**
+     * Get the best matching view without loading
+     */
+    static findBestMatch(transaction: DecoderResult, framework?: 'lit' | 'rn'): ViewMatch | null;
+    /**
+     * Get all matching views without loading
+     */
+    static findAllMatches(transaction: DecoderResult, framework?: 'lit' | 'rn'): ViewMatch[];
+    private initialize;
+    private setupSync;
+    private syncState;
+    private updateState;
+}
+/**
+ * Utility function to create a transaction view controller
+ */
+declare function useTransactionView(host: ReactiveControllerHost, transaction: DecoderResult, options: UseTransactionViewOptions): TransactionViewController;
+/**
+ * Controller for working with transaction signals from the decoder
+ */
+declare class TransactionSignalController<T = any> implements ReactiveController {
+    private host;
+    private signal;
+    private unsubscribe?;
+    private _data;
+    private _loading;
+    private _error;
+    constructor(host: ReactiveControllerHost, signal: Signal<{
+        data: DecoderResult;
+        loading: boolean;
+        error?: string;
+    }>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get data(): DecoderResult | null;
+    get loading(): boolean;
+    get error(): string | null;
+    get isReady(): boolean;
+    private setupSignalSync;
+}
+/**
+ * Utility function to create a transaction signal controller
+ */
+declare function useTransactionSignal(host: ReactiveControllerHost, signal: Signal<{
+    data: DecoderResult;
+    loading: boolean;
+    error?: string;
+}>): TransactionSignalController;
+
+/**
+ * UrlView - display a URL with favicon/logo and human-friendly name
+ *
+ * Props:
+ * - url (required): full URL like https://example.com/path
+ * - size: x-small | small | medium | large
+ * - label?: optional label displayed above
+ * - showLogo: whether to show favicon/logo (default true)
+ * - logoUrl?: explicit logo URL to use instead of favicon
+ * - maxWidth: name truncation width in px
+ */
+declare class UrlView extends CoreLitElement {
+    url: string;
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    label?: string;
+    showLogo: boolean;
+    logoUrl?: string;
+    maxWidth: number;
+    private favicon?;
+    private displayName;
+    private faviconCandidates;
+    private faviconIndex;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private computeMeta;
+    private handleImageError;
+    private getSizePixels;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'url-view': UrlView;
+    }
+}
+
+/**
+ * Value display component
+ *
+ * Displays various types of values with appropriate formatting and styling.
+ * Supports numbers, strings, booleans, BigInt values, and special handling
+ * for Ethereum values with currency symbols.
+ *
+ * @example
+ * ```html
+ * <value-view
+ *   value="1000000000000000000"
+ *   type="currency"
+ *   currency-symbol="LYX"
+ *   decimals="18"
+ * ></value-view>
+ * ```
+ */
+declare class ValueView extends CoreLitElement {
+    /**
+     * The value to display (required)
+     * Can be string, number, boolean, or bigint
+     */
+    value?: string | number | boolean | bigint | null;
+    /**
+     * The key name (used for special formatting logic)
+     */
+    keyName?: string;
+    containerClassNames?: string;
+    /**
+     * Value type for formatting
+     */
+    type: 'string' | 'number' | 'boolean' | 'currency' | 'bigint' | 'address' | 'auto';
+    /**
+     * Currency symbol for currency type
+     */
+    currencySymbol: string;
+    /**
+     * Number of decimals for currency formatting
+     */
+    decimals: number;
+    /**
+     * Display size
+     */
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    /**
+     * Whether to show copy button
+     */
+    showCopyButton: boolean;
+    /**
+     * Render as a card with bordered container and label
+     */
+    isCardView: boolean;
+    /**
+     * Optional label to show in card header
+     */
+    label?: string;
+    /**
+     * Maximum width for truncation
+     */
+    maxWidth?: number;
+    /**
+     * Token/contract address for automatic metadata resolution
+     * When provided, ValueView will automatically resolve token symbol and decimals
+     */
+    address?: string;
+    private resolvedMetadata?;
+    private _hasSlotContent;
+    private _onSlotChange;
+    protected firstUpdated(): void;
+    private get addressResolver();
+    private addressTask;
+    /**
+     * Get the effective type for the value
+     */
+    private getEffectiveType;
+    /**
+     * Get CSS class for the value type
+     */
+    private getValueClass;
+    /**
+     * Format the value for display
+     */
+    private getFormattedValue;
+    /**
+     * Compute currency display parts: numeric portion and symbol
+     */
+    private getCurrencyParts;
+    /** Typography class for numeric value based on size */
+    private getNumericClass;
+    /** Typography class for currency symbol based on size */
+    private getCurrencyClass;
+    /**
+     * Get size-appropriate font size
+     */
+    private getContainerTextClass;
+    /**
+     * Handle copy to clipboard
+     */
+    private handleCopy;
+    /**
+     * Handle value click
+     */
+    private handleClick;
+    render(): lit.TemplateResult<1>;
+    /** Whether to use monospace font for the value content */
+    private getUseMonospace;
+    /** Map size to a typography class for the label */
+    private getLabelClass;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'value-view': ValueView;
+    }
+}
+
+export { type AddressData$1 as AddressData, AddressDisplay, AddressView, CustomOption, CustomSelect, FunctionNameView, GasProviderView, IconView, type ImageLoadState, ImageLoaderController, MultiSignalController, NotificationView, type ProgressSegment, ProgressView, ScrollToBottomButton, type SelectOption, SignalController, TransactionSignalController, TransactionViewController, type TransactionViewState, UrlView, ValueView, useImageLoader, useSignal, useSignals, useTransactionSignal, useTransactionView };