@tuwaio/nova-transactions

import * as react_jsx_runtime from 'react/jsx-runtime'; import { 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'; import { ToastContainerProps, ToastContentProps } from 'react-toastify'; import { MotionProps } from 'framer-motion'; /** * @file This file contains the `HashLink` component, a UI element for displaying * blockchain hashes with copy-to-clipboard and block explorer link functionality. */ type HashLinkProps = { /** The full hash string to display and copy (e.g., a transaction hash or wallet address). */ hash: string; /** An optional label to display before the hash (e.g., "From", "Tx Hash"). */ label?: string; /** An optional URL to a block explorer. If provided, the hash becomes a clickable link. */ explorerUrl?: string; /** The visual style of the component. 'default' is larger, 'compact' is smaller. */ variant?: 'default' | 'compact'; /** Additional CSS classes to apply to the container element for custom styling. */ className?: string; }; declare function HashLink({ label, hash, explorerUrl, variant, className }: HashLinkProps): react_jsx_runtime.JSX.Element; /** * @file This file contains the `StatusAwareText` component, which displays different text based on a transaction's status. */ type StatusAwareTextProps = { /** The current status of the transaction, used to select the correct text and color. */ txStatus?: TransactionStatus; /** * The source for the text. Can be a single string for static text, or an array of strings * for dynamic text based on status. The array format must be: `[pending, success, error, replaced]`. */ source?: string | readonly string[]; /** A fallback string to display if `source` is not provided or is invalid. */ fallback?: string; /** The visual variant, which determines the base text style ('title' or 'description'). */ variant: 'title' | 'description'; /** If true, applies a status-specific color to the text. Defaults to false. */ applyColor?: boolean; /** Optional additional CSS classes for custom styling. */ className?: string; }; /** * A component that renders text conditionally based on a transaction's status. * It's designed to work with the `title` and `description` fields of a transaction object. */ declare function StatusAwareText({ txStatus, source, fallback, variant, className, applyColor, }: StatusAwareTextProps): ReactNode; /** * @file This file defines the TypeScript type for the library's internationalization (i18n) labels. * It provides a strict structure for all text used in the UI components, ensuring type safety for different languages. */ /** * Represents the set of labels used for various UI elements and features in a Tuwa-based application. * This type defines structured labels for wallet modals, transaction statuses, toast notifications, and more. */ type NovaTransactionsLabels = { /** Labels for the main wallet information modal. */ transactionsModal: { history: { /** The title for the transaction history section. */ title: string; /** The title displayed when the user needs to connect a wallet to see history. */ connectWalletTitle: string; /** The message displayed when the user needs to connect a wallet. */ connectWalletMessage: string; /** The title displayed when the connected wallet has no transaction history. */ noTransactionsTitle: string; /** The message displayed when there are no transactions to show. */ noTransactionsMessage: string; }; }; /** Labels related to toast notifications. */ toast: { /** Text for the button/link within a toast to open the wallet modal. */ openTransactionsInfo: string; }; /** Standard labels for transaction statuses. */ statuses: { /** Text for a pending transaction. */ pending: string; /** Text for a successful transaction. */ success: string; /** Text for a failed transaction. */ failed: string; /** Text for a reverted transaction. */ reverted: string; /** Text for a replaced transaction (e.g., sped up). */ replaced: string; /** Text for an unknown or indeterminate status. */ unknown: string; /** Text for a confirmation count label, e.g., "1 confirmation" or "10 confirmations" */ confirmationsLabel: string; }; /** Labels for different types of transaction hashes/keys. */ hashLabels: { /** Label for a Gelato Task ID. */ gelato: string; /** Label for a Safe Transaction Hash. */ safe: string; /** Label for the original transaction hash (before replacement). */ original: string; /** Label for the new transaction hash that replaced the original. */ replaced: string; /** Default label for a standard transaction hash. */ default: string; /** Special label for the most recent blockhash. This is used for the "Recent Blockhash" field in the transaction details modal. */ recentBlockhash: string; /** Special label for the Solana signature. This is used for the "Signature" field in the transaction details modal. */ solana: string; }; /** Labels for the transaction information block. */ txInfo: { /** Label indicating when the transaction was started. */ started: string; /** Label for the network name. */ network: string; /** Slot number for the transaction. This is used for the "Slot" field in the transaction details modal. */ slot: string; }; /** Labels for the transaction error block. */ txError: { /** The title for the error details section. */ title: string; /** Confirmation text shown after copying an error message. */ copied: string; }; /** Labels for the detailed transaction tracking modal. */ trackingModal: { /** The main title of the tracking modal. */ title: string; /** Text indicating that the transaction is being processed. */ processing: string; /** Label for the close button. */ close: string; /** Label for the button to open the main wallet info modal. */ allTransactions: string; /** Label for a button to retry a transaction. */ retry: string; /** Labels for the step-by-step progress indicator. */ progressIndicator: { /** Label for the "transaction created" step. */ created: string; /** Label for the "processing" step. */ processing: string; /** Label for the "succeed" or final step. */ succeed: string; }; }; /** Labels for the main transaction action button. */ trackedTxButton: { /** Text shown on the button while the transaction is initializing. */ loading: string; /** Text shown on the button after the transaction succeeds. */ succeed: string; /** Text shown on the button if the transaction fails to initialize. */ failed: string; /** Text shown on the button if the transaction replaced to initialize. */ replaced: string; }; /** Labels for common action buttons/links. */ actions: { /** Text for a "Copy" action (e.g., copy address or hash). */ copy: string; /** Text for a link to view the transaction on a block explorer. */ viewOnExplorer: string; /** Text for a generic "Close" action. */ close: string; /** Text for a generic "Cancel" action. */ cancel: string; /** Text for a generic "Speed up" action. */ speedUp: string; }; }; /** * Defines the props for the NovaTransactionsProvider component. */ type NovaTransactionsProviderProps<T extends Transaction> = { adapter: TxAdapter<T> | TxAdapter<T>[]; connectedWalletAddress?: string; connectedAdapterType?: OrbitAdapter; transactionsPool: TransactionPool<T>; labels?: Partial<NovaTransactionsLabels>; features?: { toasts?: boolean; transactionsModal?: boolean; trackingTxModal?: boolean; }; customization?: { toast?: ToastTransactionCustomization<T>; transactionsInfoModal?: TransactionsInfoModalCustomization<T>; trackingTxModal?: TrackingTxModalCustomization<T>; }; } & Pick<ITxTrackingStore<T>, 'closeTxTrackedModal' | 'executeTxAction' | 'initialTx'> & Omit<ToastContainerProps, 'containerId'>; /** * The main component for the Nova UI ecosystem. It renders and orchestrates all * UI elements like toasts and modals, and provides the i18n context. */ declare function NovaTransactionsProvider<T extends Transaction>({ adapter, connectedWalletAddress, connectedAdapterType, transactionsPool, initialTx, executeTxAction, closeTxTrackedModal, labels, features, customization, ...toastProps }: NovaTransactionsProviderProps<T>): react_jsx_runtime.JSX.Element; type TransactionKeyProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter'> & { tx: T; variant?: 'toast' | 'history'; className?: string; renderHashLink?: (props: HashLinkProps) => ReactNode; confirmations?: number; }; declare function TransactionKey<T extends Transaction>({ tx, adapter, variant, className, renderHashLink, confirmations, }: TransactionKeyProps<T>): react_jsx_runtime.JSX.Element | null; type TransactionStatusBadgeProps<T extends Transaction> = { tx: T; className?: string; }; declare function TransactionStatusBadge<T extends Transaction>({ tx, className }: 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. */ type CustomActionButtonProps = { onClick: () => void; children: ReactNode; }; type ToastTransactionCustomization<T extends Transaction> = { components?: { StatusAwareText?: ComponentType<StatusAwareTextProps>; TransactionKey?: ComponentType<TransactionKeyProps<T>>; StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>; TxInfoButton?: ComponentType<CustomActionButtonProps>; SpeedUpButton?: ComponentType<CustomActionButtonProps>; CancelButton?: ComponentType<CustomActionButtonProps>; }; }; type ToastTransactionProps<T extends Transaction> = { tx: T; openTxInfoModal?: () => void; icon?: ReactNode; className?: string; customization?: ToastTransactionCustomization<T>; closeToast?: ToastContentProps['closeToast']; toastProps?: ToastContainerProps; } & Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'connectedWalletAddress'>; declare function ToastTransaction<T extends Transaction>({ openTxInfoModal, tx, icon, className, customization, connectedWalletAddress, adapter, }: ToastTransactionProps<T>): JSX.Element; type CustomHeaderProps$1 = { onClose: () => void; title: ReactNode; }; type CustomFooterProps = { onClose: () => void; onOpenAllTransactions: () => void; onRetry?: () => void; onSpeedUp?: () => void; onCancel?: () => void; isProcessing?: boolean; isFailed?: boolean; canReplace?: boolean; connectedWalletAddress?: string; }; type TrackingTxModalCustomization<T extends Transaction> = { modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>; motionProps?: MotionProps; components?: { Header?: ComponentType<CustomHeaderProps$1>; Footer?: ComponentType<CustomFooterProps>; StatusVisual?: ComponentType<TxStatusVisualProps>; ProgressIndicator?: ComponentType<TxProgressIndicatorProps>; InfoBlock?: ComponentType<TxInfoBlockProps<T>>; ErrorBlock?: ComponentType<TxErrorBlockProps>; }; }; type TrackingTxModalProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'executeTxAction' | 'initialTx' | 'transactionsPool' | 'adapter' | 'connectedWalletAddress'> & { onClose: (txKey?: string) => void; onOpenAllTransactions: () => void; className?: string; customization?: TrackingTxModalCustomization<T>; }; declare function TrackingTxModal<T extends Transaction>({ adapter, onClose, onOpenAllTransactions, className, customization, transactionsPool, executeTxAction, initialTx, connectedWalletAddress, }: TrackingTxModalProps<T>): react_jsx_runtime.JSX.Element | null; /** * @file This file contains the `TxErrorBlock` component for displaying transaction error messages. */ 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; }; /** * 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; type CustomInfoRowProps = { label: ReactNode; value: ReactNode; }; type TxInfoBlockCustomization<T extends Transaction> = { components?: { InfoRow?: ComponentType<CustomInfoRowProps>; transactionKey?: TransactionKeyProps<T>['renderHashLink']; }; }; type TxInfoBlockProps<T extends Transaction> = { /** The transaction object to display, which can be a full transaction or an initial one. */ tx: T | InitialTransaction; className?: string; customization?: TxInfoBlockCustomization<T>; } & Pick<NovaTransactionsProviderProps<T>, 'adapter'>; /** * A component that displays a block of essential transaction details, * such as network, timestamps, Solana-specific details, and relevant hashes/keys. */ 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'; type StepProps = { status: StepStatus; label: string; isFirst?: boolean; isLast?: boolean; }; interface TxProgressIndicatorProps { isProcessing?: boolean; isSucceed?: boolean; isFailed?: boolean; isReplaced?: boolean; className?: string; StepComponent?: ComponentType<StepProps>; } declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, }: TxProgressIndicatorProps): react_jsx_runtime.JSX.Element; /** * @file This file contains the `TxStatusVisual` component, which displays a large icon representing the transaction's status. */ type TxStatusVisualProps = { /** True if the transaction is currently being processed (e.g., in the mempool). */ isProcessing?: boolean; /** True if the transaction has successfully completed. */ isSucceed?: boolean; /** True if the transaction has failed or was reverted. */ isFailed?: boolean; /** True if the transaction was replaced (e.g., sped up). */ isReplaced?: boolean; }; /** * 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; /** * @file This file contains the `TransactionHistoryItem` component, which renders a single transaction * in a list format for the transaction history view. */ type CustomIconProps = { chainId: number | string; }; type CustomTimestampProps = { timestamp?: number; }; type TransactionHistoryItemCustomization<T extends Transaction> = { components?: { Icon?: ComponentType<CustomIconProps>; Title?: ComponentType<StatusAwareTextProps>; Description?: ComponentType<StatusAwareTextProps>; Timestamp?: ComponentType<CustomTimestampProps>; StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>; TransactionKey?: ComponentType<TransactionKeyProps<T>>; }; }; type TransactionHistoryItemProps<T extends Transaction> = { /** The transaction object to display. */ tx: T; /** An object to customize and override the default internal components. */ customization?: TransactionHistoryItemCustomization<T>; /** Optional additional CSS classes for the container. */ className?: string; } & Pick<NovaTransactionsProviderProps<T>, 'adapter'>; declare function TransactionHistoryItem<T extends Transaction>({ tx, adapter, className, customization, }: TransactionHistoryItemProps<T>): JSX.Element; type CustomPlaceholderProps = { title: string; message: string; }; type TransactionsHistoryCustomization<T extends Transaction> = { title?: string; classNames?: { listWrapper?: string; }; components?: { Placeholder?: ComponentType<CustomPlaceholderProps>; HistoryItem?: ComponentType<TransactionHistoryItemProps<T>>; }; }; type TransactionsHistoryProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'transactionsPool' | 'connectedWalletAddress'> & { className?: string; customization?: TransactionsHistoryCustomization<T>; }; declare function TransactionsHistory<T extends Transaction>({ adapter, connectedWalletAddress, transactionsPool, className, customization, }: TransactionsHistoryProps<T>): react_jsx_runtime.JSX.Element; type CustomHeaderProps = { closeModal: () => void; }; type TransactionsInfoModalCustomization<T extends Transaction> = { modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>; classNames?: { contentWrapper?: string; }; components?: { Header?: ComponentType<CustomHeaderProps>; History?: ComponentType<TransactionsHistoryProps<T>>; }; }; type TransactionsInfoModalProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'connectedAdapterType' | 'connectedWalletAddress' | 'transactionsPool'> & { isOpen?: boolean; setIsOpen: (value: boolean) => void; customization?: TransactionsInfoModalCustomization<T>; }; 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 };