@tuwaio/nova-transactions 0.2.5 → 0.2.6

package/dist/{TransactionsInfoModal-6RO18o9e.d.cts → TransactionsInfoModal-DSBueMY4.d.cts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DialogContent } from '@tuwaio/nova-core';
+import { ToastCloseButtonProps, DialogContent } from '@tuwaio/nova-core';
 import { TransactionStatus, Transaction, TxAdapter, TransactionPool, ITxTrackingStore, InitialTransaction } from '@tuwaio/pulsar-core';
 import { ReactNode, ComponentType, JSX, ComponentPropsWithoutRef } from 'react';
 import { OrbitAdapter } from '@tuwaio/orbit-core';
@@ -21,8 +21,21 @@ type HashLinkProps = {
     variant?: 'default' | 'compact';
     /** Additional CSS classes to apply to the container element for custom styling. */
     className?: string;
+    /** Granular class names for sub-elements */
+    classNames?: {
+        /** Classes for the label text */
+        label?: string;
+        /** Classes for the link element */
+        link?: string;
+        /** Classes for the hash text */
+        hash?: string;
+        /** Classes for the copy button */
+        copyButton?: string;
+        /** Classes for the link icon */
+        linkIcon?: string;
+    };
 };
-declare function HashLink({ label, hash, explorerUrl, variant, className }: HashLinkProps): react_jsx_runtime.JSX.Element;
+declare function HashLink({ label, hash, explorerUrl, variant, className, classNames }: HashLinkProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @file This file contains the `StatusAwareText` component, which displays different text based on a transaction's status.
@@ -194,6 +207,7 @@ type NovaTransactionsProviderProps<T extends Transaction> = {
     };
     customization?: {
         toast?: ToastTransactionCustomization<T>;
+        toastCloseButton?: Omit<ToastCloseButtonProps, 'closeToast'>;
         transactionsInfoModal?: TransactionsInfoModalCustomization<T>;
         trackingTxModal?: TrackingTxModalCustomization<T>;
     };
@@ -210,14 +224,27 @@ type TransactionKeyProps<T extends Transaction> = Pick<NovaTransactionsProviderP
     className?: string;
     renderHashLink?: (props: HashLinkProps) => ReactNode;
     confirmations?: number;
+    /** ClassNames to pass to HashLink components (default and replaced hash) */
+    hashLinkClassNames?: HashLinkProps['classNames'];
+    /** ClassNames for original hash link in replaced transactions (falls back to hashLinkClassNames) */
+    originalHashLinkClassNames?: HashLinkProps['classNames'];
 };
-declare function TransactionKey<T extends Transaction>({ tx, adapter, variant, className, renderHashLink, confirmations, }: TransactionKeyProps<T>): react_jsx_runtime.JSX.Element | null;
+declare function TransactionKey<T extends Transaction>({ tx, adapter, variant, className, renderHashLink, confirmations, hashLinkClassNames, originalHashLinkClassNames, }: TransactionKeyProps<T>): react_jsx_runtime.JSX.Element | null;
 
 type TransactionStatusBadgeProps<T extends Transaction> = {
     tx: T;
     className?: string;
+    /** Granular class names for sub-elements */
+    classNames?: {
+        /** Classes for the badge container */
+        container?: string;
+        /** Classes for the status icon */
+        icon?: string;
+        /** Classes for the label text */
+        label?: string;
+    };
 };
-declare function TransactionStatusBadge<T extends Transaction>({ tx, className }: TransactionStatusBadgeProps<T>): react_jsx_runtime.JSX.Element;
+declare function TransactionStatusBadge<T extends Transaction>({ tx, className, classNames, }: TransactionStatusBadgeProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * @file This file contains the `ToastTransaction` component, which serves as the main body for a transaction notification toast.
@@ -226,8 +253,10 @@ declare function TransactionStatusBadge<T extends Transaction>({ tx, className }
 type CustomActionButtonProps = {
     onClick: () => void;
     children: ReactNode;
+    className?: string;
 };
 type ToastTransactionCustomization<T extends Transaction> = {
+    /** Custom components */
     components?: {
         StatusAwareText?: ComponentType<StatusAwareTextProps>;
         TransactionKey?: ComponentType<TransactionKeyProps<T>>;
@@ -236,6 +265,51 @@ type ToastTransactionCustomization<T extends Transaction> = {
         SpeedUpButton?: ComponentType<CustomActionButtonProps>;
         CancelButton?: ComponentType<CustomActionButtonProps>;
     };
+    /** Granular classNames for all sub-elements */
+    classNames?: {
+        /** Classes for the toast container */
+        container?: string;
+        /** Classes for the header section (icon + content) */
+        header?: string;
+        /** Classes for the icon wrapper */
+        iconWrapper?: string;
+        /** Classes for the content wrapper */
+        contentWrapper?: string;
+        /** Classes for the title text */
+        title?: string;
+        /** Classes for the description text */
+        description?: string;
+        /** Classes for the transaction key section */
+        transactionKey?: string;
+        /** Classes for the default hash label */
+        hashLabel?: string;
+        /** Classes for the default hash link */
+        hashLink?: string;
+        /** Classes for the default hash copy button */
+        hashCopyButton?: string;
+        /** Classes for the original hash label (replaced transactions) */
+        originalHashLabel?: string;
+        /** Classes for the original hash link (replaced transactions) */
+        originalHashLink?: string;
+        /** Classes for the original hash copy button (replaced transactions) */
+        originalHashCopyButton?: string;
+        /** Classes for the footer section */
+        footer?: string;
+        /** Classes for the status badge container */
+        statusBadge?: string;
+        /** Classes for the status badge icon */
+        statusBadgeIcon?: string;
+        /** Classes for the status badge label */
+        statusBadgeLabel?: string;
+        /** Classes for the actions container */
+        actionsContainer?: string;
+        /** Classes for the SpeedUp button */
+        speedUpButton?: string;
+        /** Classes for the Cancel button */
+        cancelButton?: string;
+        /** Classes for the TxInfo button */
+        txInfoButton?: string;
+    };
 };
 type ToastTransactionProps<T extends Transaction> = {
     tx: T;
@@ -266,6 +340,7 @@ type CustomFooterProps = {
 type TrackingTxModalCustomization<T extends Transaction> = {
     modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>;
     motionProps?: MotionProps;
+    /** Custom components to override default elements */
     components?: {
         Header?: ComponentType<CustomHeaderProps$1>;
         Footer?: ComponentType<CustomFooterProps>;
@@ -274,6 +349,58 @@ type TrackingTxModalCustomization<T extends Transaction> = {
         InfoBlock?: ComponentType<TxInfoBlockProps<T>>;
         ErrorBlock?: ComponentType<TxErrorBlockProps>;
     };
+    /** Granular classNames for all sub-elements */
+    classNames?: {
+        /** Classes for the outer container */
+        container?: string;
+        /** Classes for the header section */
+        header?: string;
+        /** Classes for the header title */
+        headerTitle?: string;
+        /** Classes for the close button */
+        closeButton?: string;
+        /** Classes for the main content area */
+        main?: string;
+        /** Classes for the footer section */
+        footer?: string;
+        /** Classes for the actions container (left side of footer) */
+        footerActions?: string;
+        /** Classes for the buttons container (right side of footer) */
+        footerButtons?: string;
+        /** Classes for the SpeedUp button */
+        speedUpButton?: string;
+        /** Classes for the Cancel button */
+        cancelButton?: string;
+        /** Classes for the Retry button */
+        retryButton?: string;
+        /** Classes for the All Transactions button */
+        allTransactionsButton?: string;
+        /** Classes for the Close button */
+        closeModalButton?: string;
+    };
+    /** Customization for TxInfoBlock */
+    infoBlockCustomization?: TxInfoBlockCustomization<T>;
+    /** Customization for TxProgressIndicator */
+    progressIndicatorCustomization?: {
+        /** Container className */
+        className?: string;
+        /** Step classNames */
+        stepClassNames?: TxProgressIndicatorProps['stepClassNames'];
+    };
+    /** Customization for TxStatusVisual */
+    statusVisualCustomization?: {
+        /** Container className */
+        className?: string;
+        /** Icon classNames with status-specific overrides */
+        iconClassNames?: TxStatusVisualClassNames;
+    };
+    /** Customization for TxErrorBlock */
+    errorBlockCustomization?: {
+        /** Container className */
+        className?: string;
+        /** Granular classNames */
+        classNames?: TxErrorBlockClassNames;
+    };
 };
 type TrackingTxModalProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'executeTxAction' | 'initialTx' | 'transactionsPool' | 'adapter' | 'connectedWalletAddress'> & {
     onClose: (txKey?: string) => void;
@@ -286,28 +413,70 @@ declare function TrackingTxModal<T extends Transaction>({ adapter, onClose, onOp
 /**
  * @file This file contains the `TxErrorBlock` component for displaying transaction error messages.
  */
+type TxErrorBlockClassNames = {
+    /** Classes for the container */
+    container?: string;
+    /** Classes for the header row */
+    header?: string;
+    /** Classes for the title container (icon + text) */
+    title?: string;
+    /** Classes for the error icon */
+    icon?: string;
+    /** Classes for the copy button */
+    copyButton?: string;
+    /** Classes for the message container */
+    messageContainer?: string;
+    /** Classes for the message text */
+    messageText?: string;
+};
 type TxErrorBlockProps = {
     /** The error message string to display. If undefined or empty, the component renders nothing. */
     error?: string;
     /** Optional additional CSS classes for the container. */
     className?: string;
+    /** Granular classNames for sub-elements */
+    classNames?: TxErrorBlockClassNames;
 };
 /**
  * A component that displays a formatted block for a transaction error message.
  * It includes a title, an icon, the error message in a scrollable area,
  * and a button to copy the message to the clipboard.
  */
-declare function TxErrorBlock({ error, className }: TxErrorBlockProps): react_jsx_runtime.JSX.Element | null;
+declare function TxErrorBlock({ error, className, classNames }: TxErrorBlockProps): react_jsx_runtime.JSX.Element | null;
 
 type CustomInfoRowProps = {
     label: ReactNode;
     value: ReactNode;
+    classNames?: InfoRowClassNames;
+};
+type InfoRowClassNames = {
+    row?: string;
+    label?: string;
+    value?: string;
 };
 type TxInfoBlockCustomization<T extends Transaction> = {
+    /** Custom components */
     components?: {
         InfoRow?: ComponentType<CustomInfoRowProps>;
         transactionKey?: TransactionKeyProps<T>['renderHashLink'];
     };
+    /** Granular classNames for sub-elements */
+    classNames?: {
+        /** Classes for the container */
+        container?: string;
+        /** Classes for info row */
+        row?: string;
+        /** Classes for row label */
+        rowLabel?: string;
+        /** Classes for row value */
+        rowValue?: string;
+        /** Classes for the transaction key section separator */
+        separator?: string;
+        /** ClassNames for the hash link (Tx Hash row) */
+        hashLink?: HashLinkProps['classNames'];
+        /** ClassNames for original hash link in replaced transactions (falls back to hashLink) */
+        originalHashLink?: HashLinkProps['classNames'];
+    };
 };
 type TxInfoBlockProps<T extends Transaction> = {
     /** The transaction object to display, which can be a full transaction or an initial one. */
@@ -322,11 +491,29 @@ type TxInfoBlockProps<T extends Transaction> = {
 declare function TxInfoBlock<T extends Transaction>({ tx, adapter, className, customization }: TxInfoBlockProps<T>): react_jsx_runtime.JSX.Element | null;
 
 type StepStatus = 'active' | 'completed' | 'error' | 'inactive' | 'replaced';
+/** ClassNames for step styling overrides */
+type StepClassNames = {
+    /** Classes for the step container */
+    container?: string;
+    /** Classes for the connecting line */
+    line?: string;
+    /** Classes for the circle element */
+    circle?: string;
+    /** Classes for the label text */
+    label?: string;
+    /** Status-specific overrides */
+    statusOverrides?: Partial<Record<StepStatus, {
+        line?: string;
+        circle?: string;
+        label?: string;
+    }>>;
+};
 type StepProps = {
     status: StepStatus;
     label: string;
     isFirst?: boolean;
     isLast?: boolean;
+    classNames?: StepClassNames;
 };
 interface TxProgressIndicatorProps {
     isProcessing?: boolean;
@@ -335,12 +522,21 @@ interface TxProgressIndicatorProps {
     isReplaced?: boolean;
     className?: string;
     StepComponent?: ComponentType<StepProps>;
+    /** ClassNames for step customization */
+    stepClassNames?: StepClassNames;
 }
-declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, }: TxProgressIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, stepClassNames, }: TxProgressIndicatorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @file This file contains the `TxStatusVisual` component, which displays a large icon representing the transaction's status.
  */
+type StatusKey = 'succeed' | 'failed' | 'replaced' | 'processing' | 'initializing';
+type TxStatusVisualClassNames = {
+    /** Base icon className applied to all statuses */
+    icon?: string;
+    /** Status-specific icon overrides */
+    statusOverrides?: Partial<Record<StatusKey, string>>;
+};
 type TxStatusVisualProps = {
     /** True if the transaction is currently being processed (e.g., in the mempool). */
     isProcessing?: boolean;
@@ -350,12 +546,16 @@ type TxStatusVisualProps = {
     isFailed?: boolean;
     /** True if the transaction was replaced (e.g., sped up). */
     isReplaced?: boolean;
+    /** Additional class names for the container */
+    className?: string;
+    /** ClassNames for icon styling */
+    iconClassNames?: TxStatusVisualClassNames;
 };
 /**
  * A component that renders a large, animated icon to visually represent the
  * current state of a transaction within the tracking modal.
  */
-declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced }: TxStatusVisualProps): react_jsx_runtime.JSX.Element;
+declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced, className: containerClassName, iconClassNames, }: TxStatusVisualProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @file This file contains the `TransactionHistoryItem` component, which renders a single transaction
@@ -364,11 +564,18 @@ declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced
 
 type CustomIconProps = {
     chainId: number | string;
+    className?: string;
 };
 type CustomTimestampProps = {
     timestamp?: number;
+    className?: string;
 };
+/**
+ * Customization options for TransactionHistoryItem component.
+ * Allows styling of all sub-elements including icon, text, badge, and hash link.
+ */
 type TransactionHistoryItemCustomization<T extends Transaction> = {
+    /** Custom components */
     components?: {
         Icon?: ComponentType<CustomIconProps>;
         Title?: ComponentType<StatusAwareTextProps>;
@@ -377,6 +584,43 @@ type TransactionHistoryItemCustomization<T extends Transaction> = {
         StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>;
         TransactionKey?: ComponentType<TransactionKeyProps<T>>;
     };
+    /** Custom class name generators for all sub-elements */
+    classNames?: {
+        /** Classes for the item container */
+        container?: string;
+        /** Classes for the icon wrapper */
+        iconWrapper?: string;
+        /** Classes for the icon itself */
+        icon?: string;
+        /** Classes for the content wrapper */
+        contentWrapper?: string;
+        /** Classes for the title */
+        title?: string;
+        /** Classes for the timestamp */
+        timestamp?: string;
+        /** Classes for the description */
+        description?: string;
+        /** Classes for the status badge container */
+        statusBadge?: string;
+        /** Classes for the status badge icon */
+        statusBadgeIcon?: string;
+        /** Classes for the status badge label */
+        statusBadgeLabel?: string;
+        /** Classes for the transaction key container */
+        txKeyContainer?: string;
+        /** Classes for default hash link label */
+        hashLabel?: string;
+        /** Classes for default hash link */
+        hashLink?: string;
+        /** Classes for default copy button */
+        hashCopyButton?: string;
+        /** Classes for original hash link label (replaced transactions) */
+        originalHashLabel?: string;
+        /** Classes for original hash link (replaced transactions) */
+        originalHashLink?: string;
+        /** Classes for original hash copy button (replaced transactions) */
+        originalHashCopyButton?: string;
+    };
 };
 type TransactionHistoryItemProps<T extends Transaction> = {
     /** The transaction object to display. */
@@ -391,14 +635,69 @@ declare function TransactionHistoryItem<T extends Transaction>({ tx, adapter, cl
 type CustomPlaceholderProps = {
     title: string;
     message: string;
+    className?: string;
 };
+/**
+ * Customization options for TransactionsHistory component.
+ * Allows styling of all sub-elements including individual transaction items.
+ */
 type TransactionsHistoryCustomization<T extends Transaction> = {
+    /** Custom title for the transactions history section */
     title?: string;
+    /** Custom class name generators for all elements */
     classNames?: {
+        /** Classes for the outer container */
+        container?: string;
+        /** Classes for the title element */
+        titleText?: string;
+        /** Classes for the list wrapper container */
         listWrapper?: string;
+        /** Classes for the placeholder container */
+        placeholderContainer?: string;
+        /** Classes for the placeholder title */
+        placeholderTitle?: string;
+        /** Classes for the placeholder message */
+        placeholderMessage?: string;
+        /** Classes for individual transaction item container */
+        itemContainer?: string;
+        /** Classes for the icon wrapper */
+        itemIconWrapper?: string;
+        /** Classes for the icon itself */
+        itemIcon?: string;
+        /** Classes for the content wrapper (title, timestamp, description) */
+        itemContentWrapper?: string;
+        /** Classes for the title text */
+        itemTitle?: string;
+        /** Classes for the timestamp text */
+        itemTimestamp?: string;
+        /** Classes for the description text */
+        itemDescription?: string;
+        /** Classes for the status badge container */
+        itemStatusBadge?: string;
+        /** Classes for the status badge icon */
+        itemStatusBadgeIcon?: string;
+        /** Classes for the status badge label */
+        itemStatusBadgeLabel?: string;
+        /** Classes for the transaction key container */
+        itemTxKeyContainer?: string;
+        /** Classes for the default hash link label */
+        itemHashLabel?: string;
+        /** Classes for the default hash link */
+        itemHashLink?: string;
+        /** Classes for the default hash copy button */
+        itemHashCopyButton?: string;
+        /** Classes for the original hash link label (replaced transactions) */
+        itemOriginalHashLabel?: string;
+        /** Classes for the original hash link (replaced transactions) */
+        itemOriginalHashLink?: string;
+        /** Classes for the original hash copy button (replaced transactions) */
+        itemOriginalHashCopyButton?: string;
     };
+    /** Custom components */
     components?: {
+        /** Custom placeholder component */
         Placeholder?: ComponentType<CustomPlaceholderProps>;
+        /** Custom history item component */
         HistoryItem?: ComponentType<TransactionHistoryItemProps<T>>;
     };
 };
@@ -413,9 +712,20 @@ type CustomHeaderProps = {
 };
 type TransactionsInfoModalCustomization<T extends Transaction> = {
     modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>;
+    /** Granular classNames for modal elements */
     classNames?: {
+        /** Classes for the content wrapper */
         contentWrapper?: string;
+        /** Classes for the header section */
+        header?: string;
+        /** Classes for the header title */
+        headerTitle?: string;
+        /** Classes for the close button */
+        closeButton?: string;
     };
+    /** Customization for TransactionsHistory component */
+    historyCustomization?: TransactionsHistoryProps<T>['customization'];
+    /** Custom components */
     components?: {
         Header?: ComponentType<CustomHeaderProps>;
         History?: ComponentType<TransactionsHistoryProps<T>>;
@@ -428,4 +738,4 @@ type TransactionsInfoModalProps<T extends Transaction> = Pick<NovaTransactionsPr
 };
 declare function TransactionsInfoModal<T extends Transaction>({ isOpen, setIsOpen, customization, adapter, connectedWalletAddress, transactionsPool, }: TransactionsInfoModalProps<T>): react_jsx_runtime.JSX.Element;
 
-export { type TransactionsInfoModalCustomization as A, type TransactionsInfoModalProps as B, TransactionsInfoModal as C, type TransactionStatusBadgeProps as D, TransactionStatusBadge as E, type NovaTransactionsProviderProps as F, NovaTransactionsProvider as G, type HashLinkProps as H, type NovaTransactionsLabels as N, type StatusAwareTextProps as S, type ToastTransactionCustomization as T, HashLink as a, StatusAwareText as b, type ToastTransactionProps as c, ToastTransaction as d, type TrackingTxModalCustomization as e, type TrackingTxModalProps as f, TrackingTxModal as g, type TxErrorBlockProps as h, TxErrorBlock as i, type TxInfoBlockCustomization as j, type TxInfoBlockProps as k, TxInfoBlock as l, type StepStatus as m, type StepProps as n, type TxProgressIndicatorProps as o, TxProgressIndicator as p, type TxStatusVisualProps as q, TxStatusVisual as r, type TransactionHistoryItemCustomization as s, type TransactionHistoryItemProps as t, TransactionHistoryItem as u, type TransactionKeyProps as v, TransactionKey as w, type TransactionsHistoryCustomization as x, type TransactionsHistoryProps as y, TransactionsHistory as z };
+export { type TransactionsHistoryCustomization as A, type TransactionsHistoryProps as B, TransactionsHistory as C, type TransactionsInfoModalCustomization as D, type TransactionsInfoModalProps as E, TransactionsInfoModal as F, type TransactionStatusBadgeProps as G, type HashLinkProps as H, TransactionStatusBadge as I, type NovaTransactionsProviderProps as J, NovaTransactionsProvider as K, type NovaTransactionsLabels as N, type StatusAwareTextProps as S, type ToastTransactionCustomization as T, HashLink as a, StatusAwareText as b, type ToastTransactionProps as c, ToastTransaction as d, type TrackingTxModalCustomization as e, type TrackingTxModalProps as f, TrackingTxModal as g, type TxErrorBlockClassNames as h, type TxErrorBlockProps as i, TxErrorBlock as j, type TxInfoBlockCustomization as k, type TxInfoBlockProps as l, TxInfoBlock as m, type StepStatus as n, type StepClassNames as o, type StepProps as p, type TxProgressIndicatorProps as q, TxProgressIndicator as r, type TxStatusVisualClassNames as s, type TxStatusVisualProps as t, TxStatusVisual as u, type TransactionHistoryItemCustomization as v, type TransactionHistoryItemProps as w, TransactionHistoryItem as x, type TransactionKeyProps as y, TransactionKey as z };