@rainlanguage/ui-components 0.0.1-alpha.115 → 0.0.1-alpha.117

package/dist/__mocks__/mockTransactionStore.js

@@ -1,5 +1,6 @@
 import { writable } from 'svelte/store';
-import { TransactionStatus, initialState, TransactionErrorMessage } from '../stores/transactionStore';
+import { initialState, TransactionErrorMessage } from '../stores/transactionStore';
+import { TransactionStatusMessage } from '../types/transaction';
 const mockTransactionWritable = writable(initialState);
 export const mockTransactionStore = {
     subscribe: mockTransactionWritable.subscribe,
@@ -7,7 +8,7 @@ export const mockTransactionStore = {
     handleDeploymentTransaction: async () => {
         mockTransactionWritable.update((state) => ({
             ...state,
-            status: TransactionStatus.SUCCESS,
+            status: TransactionStatusMessage.SUCCESS,
             message: 'Strategy deployed successfully!',
             hash: '0x123'
         }));
@@ -16,40 +17,31 @@ export const mockTransactionStore = {
     handleDepositOrWithdrawTransaction: async () => {
         mockTransactionWritable.update((state) => ({
             ...state,
-            status: TransactionStatus.SUCCESS,
+            status: TransactionStatusMessage.SUCCESS,
             message: 'Transaction successful!',
             hash: '0x456'
         }));
         return Promise.resolve();
     },
-    handleRemoveOrderTransaction: async () => {
-        mockTransactionWritable.update((state) => ({
-            ...state,
-            status: TransactionStatus.SUCCESS,
-            message: 'Order removed successfully',
-            hash: '0x789'
-        }));
-        return Promise.resolve();
-    },
     checkingWalletAllowance: (message = '') => mockTransactionWritable.update((state) => ({
         ...state,
-        status: TransactionStatus.CHECKING_ALLOWANCE,
+        status: TransactionStatusMessage.CHECKING_ALLOWANCE,
         message
     })),
     awaitWalletConfirmation: (message = '') => mockTransactionWritable.update((state) => ({
         ...state,
-        status: TransactionStatus.PENDING_WALLET,
+        status: TransactionStatusMessage.PENDING_WALLET,
         message
     })),
     awaitApprovalTx: (hash) => mockTransactionWritable.update((state) => ({
         ...state,
         hash,
-        status: TransactionStatus.PENDING_APPROVAL,
+        status: TransactionStatusMessage.PENDING_APPROVAL,
         message: 'Approving token spend...'
     })),
     transactionSuccess: (hash, message = '', newOrderHash = '', network = '') => mockTransactionWritable.update((state) => ({
         ...state,
-        status: TransactionStatus.SUCCESS,
+        status: TransactionStatusMessage.SUCCESS,
         hash,
         message,
         newOrderHash,
@@ -57,7 +49,7 @@ export const mockTransactionStore = {
     })),
     transactionError: (error, hash = '') => mockTransactionWritable.update((state) => ({
         ...state,
-        status: TransactionStatus.ERROR,
+        status: TransactionStatusMessage.ERROR,
         error,
         hash
     })),

package/dist/components/transactions/FixedBottomTransaction.svelte

@@ -0,0 +1,63 @@
+<script>import { useTransactions } from "../../providers/transactions/useTransactions";
+import { CloseOutline } from "flowbite-svelte-icons";
+import { writable } from "svelte/store";
+import { getStatusEmoji } from "./getStatusEmoji";
+const { transactions } = useTransactions();
+const isDismissed = writable(false);
+$: latestTransaction = $transactions.length > 0 ? $transactions[$transactions.length - 1].state : null;
+$: if (latestTransaction) {
+  isDismissed.set(false);
+}
+function dismissTransaction() {
+  isDismissed.set(true);
+}
+</script>
+
+{#if $latestTransaction && !$isDismissed}
+	<div
+		class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white lg:hidden dark:border-gray-700 dark:bg-gray-900"
+	>
+		<div class="flex items-start gap-3 p-3">
+			<!-- Transaction details -->
+			<div class="min-w-0 flex-1">
+				<div class="mb-1 flex items-center gap-2">
+					<span class="text-lg">{getStatusEmoji($latestTransaction.status)}</span>
+					<p class="truncate text-sm font-semibold text-gray-600 dark:text-gray-400">
+						{$latestTransaction.name}
+					</p>
+				</div>
+				<p class="truncate text-xs text-gray-600 dark:text-gray-400">
+					{$latestTransaction.status}
+				</p>
+				{#if $latestTransaction.errorDetails}
+					<p class="truncate text-xs text-red-600 dark:text-red-400">
+						{$latestTransaction.errorDetails}
+					</p>
+				{/if}
+				{#if $latestTransaction.links.length > 0}
+					<div class="mt-1 flex gap-2">
+						{#each $latestTransaction.links.slice(0, 2) as link}
+							<a
+								href={link.link}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="truncate text-xs text-blue-500 hover:underline"
+							>
+								{link.label}
+							</a>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Close button -->
+			<button
+				on:click={dismissTransaction}
+				class="flex-shrink-0 p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+				aria-label="Dismiss transaction"
+			>
+				<CloseOutline class="h-4 w-4" />
+			</button>
+		</div>
+	</div>
+{/if}

package/dist/components/transactions/FixedBottomTransaction.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FixedBottomTransactionProps = typeof __propDef.props;
+export type FixedBottomTransactionEvents = typeof __propDef.events;
+export type FixedBottomTransactionSlots = typeof __propDef.slots;
+export default class FixedBottomTransaction extends SvelteComponent<FixedBottomTransactionProps, FixedBottomTransactionEvents, FixedBottomTransactionSlots> {
+}
+export {};

package/dist/components/transactions/TransactionDetail.svelte

@@ -0,0 +1,31 @@
+<script>import {} from "svelte/store";
+import { getStatusEmoji } from "./getStatusEmoji";
+export let state;
+</script>
+
+<div class="flex w-full flex-col gap-1 rounded-md bg-gray-300 p-2 dark:bg-gray-700">
+	<p class="break-words font-semibold">{$state.name}</p>
+	<div class="flex flex-col gap-1 text-sm">
+		<p class="break-words">{getStatusEmoji($state.status)} {$state.status}</p>
+		{#if $state.errorDetails}
+			<p class="break-words">{$state.errorDetails}</p>
+		{/if}
+		{#if $state.links.length > 0}
+			<div class="flex flex-col gap-1">
+				{#each $state.links as link}
+					<p class="break-words">
+						<a
+							href={link.link}
+							data-testid={`transaction-detail-link-${link.label}`}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="text-blue-500 hover:underline"
+						>
+							{link.label}
+						</a>
+					</p>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/components/transactions/TransactionDetail.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { TransactionStoreState } from '../../models/Transaction';
+import { type Readable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        state: Readable<TransactionStoreState>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TransactionDetailProps = typeof __propDef.props;
+export type TransactionDetailEvents = typeof __propDef.events;
+export type TransactionDetailSlots = typeof __propDef.slots;
+export default class TransactionDetail extends SvelteComponent<TransactionDetailProps, TransactionDetailEvents, TransactionDetailSlots> {
+}
+export {};

package/dist/components/transactions/TransactionList.svelte

@@ -0,0 +1,17 @@
+<script>import TransactionDetail from "./TransactionDetail.svelte";
+import { useTransactions } from "../../providers/transactions/useTransactions";
+const { transactions } = useTransactions();
+</script>
+
+{#if $transactions.length > 0}
+	<div class="h-full overflow-y-auto" data-testid="transaction-list">
+		<ul aria-label="Transaction list" class="flex w-full flex-col gap-4">
+			{#each $transactions.slice().reverse() as transaction}
+				{@const state = transaction.state}
+				<li>
+					<TransactionDetail {state} />
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}

package/dist/components/transactions/TransactionList.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TransactionListProps = typeof __propDef.props;
+export type TransactionListEvents = typeof __propDef.events;
+export type TransactionListSlots = typeof __propDef.slots;
+export default class TransactionList extends SvelteComponent<TransactionListProps, TransactionListEvents, TransactionListSlots> {
+}
+export {};

package/dist/components/transactions/getStatusEmoji.d.ts

@@ -0,0 +1,2 @@
+import { TransactionStatusMessage } from '../../types/transaction';
+export declare function getStatusEmoji(status: TransactionStatusMessage): string;

package/dist/components/transactions/getStatusEmoji.js

@@ -0,0 +1,20 @@
+import { TransactionStatusMessage } from '../../types/transaction';
+import { match } from 'ts-pattern';
+export function getStatusEmoji(status) {
+    return match(status)
+        .with(TransactionStatusMessage.PENDING_RECEIPT, () => '🔄')
+        .with(TransactionStatusMessage.PENDING_SUBGRAPH, () => '📊')
+        .with(TransactionStatusMessage.SUCCESS, () => '✅')
+        .with(TransactionStatusMessage.ERROR, () => '❌')
+        .otherwise(() => '❓');
+}
+if (import.meta.vitest) {
+    describe('getStatusEmoji', () => {
+        it('should return the correct emoji for each status', () => {
+            expect(getStatusEmoji(TransactionStatusMessage.PENDING_RECEIPT)).toBe('🔄');
+            expect(getStatusEmoji(TransactionStatusMessage.PENDING_SUBGRAPH)).toBe('📊');
+            expect(getStatusEmoji(TransactionStatusMessage.SUCCESS)).toBe('✅');
+            expect(getStatusEmoji(TransactionStatusMessage.ERROR)).toBe('❌');
+        });
+    });
+}

package/dist/index.d.ts

@@ -64,11 +64,14 @@ export { default as DisclaimerModal } from './components/deployment/DisclaimerMo
 export { default as InvalidStrategiesSection } from './components/deployment/InvalidStrategiesSection.svelte';
 export { default as ValidStrategiesSection } from './components/deployment/ValidStrategiesSection.svelte';
 export { default as InputRegistryUrl } from './components/input/InputRegistryUrl.svelte';
+export { default as TransactionList } from './components/transactions/TransactionList.svelte';
+export { default as FixedBottomTransaction } from './components/transactions/FixedBottomTransaction.svelte';
 export type { AppStoresInterface } from './types/appStores.ts';
-export type { ConfigSource, OrderbookConfigSource, OrderbookCfgRef } from '@rainlanguage/orderbook';
-export { TransactionStatus, TransactionErrorMessage, type TransactionState, type ExtendedApprovalCalldata } from './stores/transactionStore';
-export type { DeploymentArgs, VaultActionArgs, OrderRemoveArgs } from './types/transaction';
-export type { VaultActionModalProps, OrderRemoveModalProps, QuoteDebugModalHandler, DebugTradeModalHandler, DeployModalProps, DisclaimerModalProps } from './types/modal';
+export type { OrderbookConfigSource, OrderbookCfgRef } from '@rainlanguage/orderbook';
+export { TransactionStatusMessage, TransactionStoreErrorMessage, type ExtendedApprovalCalldata, type TransactionArgs } from './types/transaction';
+export type { TransactionErrorMessage } from './stores/transactionStore';
+export type { DeploymentArgs, VaultActionArgs } from './types/transaction';
+export type { VaultActionModalProps, QuoteDebugModalHandler, DebugTradeModalHandler, DeployModalProps, DisclaimerModalProps, TransactionConfirmationProps } from './types/modal';
 export type { ValidStrategyDetail, InvalidStrategyDetail } from './types/strategy';
 export type { ToastProps } from './types/toast';
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';
@@ -78,6 +81,7 @@ export { vaultBalanceDisplay } from './utils/vault';
 export { bigintToFloat } from './utils/number';
 export { getExplorerLink } from './services/getExplorerLink';
 export { invalidateTanstackQueries } from './queries/queryClient';
+export { getToastsContext } from './providers/toasts/context';
 export { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from './queries/constants';
 export { QKEY_VAULTS, QKEY_VAULT, QKEY_VAULT_CHANGES, QKEY_ORDERS, QKEY_ORDER, QKEY_ORDER_TRADES_LIST, QKEY_ORDER_QUOTE, QKEY_VAULTS_VOL_LIST, QKEY_ORDER_APY } from './queries/keys';
 export { darkChartTheme, lightChartTheme } from './utils/lightweightChartsThemes';
@@ -90,11 +94,15 @@ export { default as GuiProvider } from './providers/GuiProvider.svelte';
 export { default as WalletProvider } from './providers/wallet/WalletProvider.svelte';
 export { default as RegistryProvider } from './providers/registry/RegistryProvider.svelte';
 export { default as ToastProvider } from './providers/toasts/ToastProvider.svelte';
+export { default as TransactionProvider } from './providers/transactions/TransactionProvider.svelte';
 export { useGui } from './hooks/useGui';
 export { useAccount } from './providers/wallet/useAccount';
 export { useRegistry } from './providers/registry/useRegistry';
 export { useToasts } from './providers/toasts/useToasts';
+export { useTransactions } from './providers/transactions/useTransactions';
 export { RegistryManager } from './providers/registry/RegistryManager';
+export { TransactionStore } from './models/Transaction';
+export { TransactionManager } from './providers/transactions/TransactionManager';
 export { mockPageStore } from './__mocks__/stores';
 export { mockConfigSource } from './__mocks__/settings';
 export { mockSettingsStore } from './__mocks__/settings';

package/dist/index.js

@@ -65,7 +65,9 @@ export { default as DisclaimerModal } from './components/deployment/DisclaimerMo
 export { default as InvalidStrategiesSection } from './components/deployment/InvalidStrategiesSection.svelte';
 export { default as ValidStrategiesSection } from './components/deployment/ValidStrategiesSection.svelte';
 export { default as InputRegistryUrl } from './components/input/InputRegistryUrl.svelte';
-export { TransactionStatus, TransactionErrorMessage } from './stores/transactionStore';
+export { default as TransactionList } from './components/transactions/TransactionList.svelte';
+export { default as FixedBottomTransaction } from './components/transactions/FixedBottomTransaction.svelte';
+export { TransactionStatusMessage, TransactionStoreErrorMessage } from './types/transaction';
 // Functions
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';
 export { formatTimestampSecondsAsLocal, timestampSecondsToUTCTimestamp, promiseTimeout } from './services/time';
@@ -74,6 +76,7 @@ export { vaultBalanceDisplay } from './utils/vault';
 export { bigintToFloat } from './utils/number';
 export { getExplorerLink } from './services/getExplorerLink';
 export { invalidateTanstackQueries } from './queries/queryClient';
+export { getToastsContext } from './providers/toasts/context';
 // Constants
 export { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from './queries/constants';
 export { QKEY_VAULTS, QKEY_VAULT, QKEY_VAULT_CHANGES, QKEY_ORDERS, QKEY_ORDER, QKEY_ORDER_TRADES_LIST, QKEY_ORDER_QUOTE, QKEY_VAULTS_VOL_LIST, QKEY_ORDER_APY } from './queries/keys';
@@ -90,13 +93,17 @@ export { default as GuiProvider } from './providers/GuiProvider.svelte';
 export { default as WalletProvider } from './providers/wallet/WalletProvider.svelte';
 export { default as RegistryProvider } from './providers/registry/RegistryProvider.svelte';
 export { default as ToastProvider } from './providers/toasts/ToastProvider.svelte';
+export { default as TransactionProvider } from './providers/transactions/TransactionProvider.svelte';
 // Hooks
 export { useGui } from './hooks/useGui';
 export { useAccount } from './providers/wallet/useAccount';
 export { useRegistry } from './providers/registry/useRegistry';
 export { useToasts } from './providers/toasts/useToasts';
+export { useTransactions } from './providers/transactions/useTransactions';
 // Classes
 export { RegistryManager } from './providers/registry/RegistryManager';
+export { TransactionStore } from './models/Transaction';
+export { TransactionManager } from './providers/transactions/TransactionManager';
 // Mocks
 export { mockPageStore } from './__mocks__/stores';
 export { mockConfigSource } from './__mocks__/settings';

package/dist/models/Transaction.d.ts

@@ -0,0 +1,79 @@
+import { TransactionStatusMessage, TransactionStoreErrorMessage } from '../types/transaction';
+import type { TransactionArgs, TransactionName } from '../types/transaction';
+import type { Config } from '@wagmi/core';
+import { type Writable } from 'svelte/store';
+/**
+ * Represents the state of a transaction.
+ * @typedef {Object} TransactionStoreState
+ * @property {TransactionName} name - The user-friendly name of the transaction (e.g., "Order Removal").
+ * @property {TransactionStatusMessage} status - The current status of the transaction (e.g., PENDING_RECEIPT, SUCCESS, ERROR).
+ * @property {TransactionStoreErrorMessage} [errorDetails] - Optional error message if the transaction failed.
+ * @property {Array<{link: string, label: string}>} links - An array of relevant links for the transaction (e.g., explorer link, link to the affected entity).
+ */
+export type TransactionStoreState = {
+    name: TransactionName;
+    status: TransactionStatusMessage;
+    errorDetails?: TransactionStoreErrorMessage;
+    links: {
+        link: string;
+        label: string;
+    }[];
+};
+/**
+ * Interface defining the structure of a transaction object.
+ * @interface Transaction
+ * @property {Writable<TransactionStoreState>} state - A writable store holding the current state of the transaction.
+ */
+export type Transaction = {
+    readonly state: Writable<TransactionStoreState>;
+};
+/**
+ * Manages the lifecycle of an individual transaction, including waiting for
+ * blockchain confirmation (receipt) and subgraph indexing.
+ * It exposes its state as a Svelte writable store.
+ * @class TransactionStore
+ * @implements {Transaction}
+ */
+export declare class TransactionStore implements Transaction {
+    private name;
+    private config;
+    private txHash;
+    private links;
+    private onSuccess;
+    private onError;
+    private awaitSubgraphConfig;
+    readonly state: Writable<TransactionStoreState>;
+    /**
+     * Creates a new TransactionStore instance.
+     * @param {TransactionArgs & { config: Config }} args - Configuration arguments for the transaction, including the wagmi `Config`.
+     * @param {() => void} onSuccess - Callback invoked when the transaction successfully completes (including indexing).
+     * @param {() => void} onError - Callback invoked if the transaction fails at any stage.
+     */
+    constructor(args: TransactionArgs & {
+        config: Config;
+    }, onSuccess: () => void, onError: () => void);
+    /**
+     * Updates the internal Svelte store with new state values.
+     * @param {Partial<TransactionStoreState>} partialState - An object containing the state properties to update.
+     * @private
+     */
+    private updateState;
+    /**
+     * Executes the transaction and begins monitoring its status
+     * @returns {Promise<void>}
+     */
+    execute(): Promise<void>;
+    /**
+     * Waits for the transaction receipt to be confirmed on the blockchain
+     * @param {Hex} hash - The transaction hash to monitor
+     * @returns {Promise<void>}
+     * @private
+     */
+    private waitForTxReceipt;
+    /**
+     * Monitors the transaction indexing status in the subgraph
+     * @returns {Promise<void>}
+     * @private
+     */
+    private indexTransaction;
+}

package/dist/models/Transaction.js

@@ -0,0 +1,110 @@
+import { waitForTransactionReceipt } from '@wagmi/core';
+import { TransactionStatusMessage, TransactionStoreErrorMessage } from '../types/transaction';
+import { awaitSubgraphIndexing } from '../services/awaitTransactionIndexing';
+import { writable } from 'svelte/store';
+/**
+ * Manages the lifecycle of an individual transaction, including waiting for
+ * blockchain confirmation (receipt) and subgraph indexing.
+ * It exposes its state as a Svelte writable store.
+ * @class TransactionStore
+ * @implements {Transaction}
+ */
+export class TransactionStore {
+    name;
+    config;
+    txHash;
+    links;
+    onSuccess;
+    onError;
+    awaitSubgraphConfig;
+    state;
+    /**
+     * Creates a new TransactionStore instance.
+     * @param {TransactionArgs & { config: Config }} args - Configuration arguments for the transaction, including the wagmi `Config`.
+     * @param {() => void} onSuccess - Callback invoked when the transaction successfully completes (including indexing).
+     * @param {() => void} onError - Callback invoked if the transaction fails at any stage.
+     */
+    constructor(args, onSuccess, onError) {
+        this.config = args.config;
+        this.txHash = args.txHash;
+        this.name = args.name;
+        this.links = args.toastLinks;
+        this.state = writable({
+            name: this.name,
+            status: TransactionStatusMessage.IDLE,
+            links: this.links
+        });
+        this.awaitSubgraphConfig = args.awaitSubgraphConfig;
+        this.onSuccess = onSuccess;
+        this.onError = onError;
+    }
+    /**
+     * Updates the internal Svelte store with new state values.
+     * @param {Partial<TransactionStoreState>} partialState - An object containing the state properties to update.
+     * @private
+     */
+    updateState(partialState) {
+        this.state.update((currentState) => ({
+            ...currentState,
+            ...partialState
+        }));
+    }
+    /**
+     * Executes the transaction and begins monitoring its status
+     * @returns {Promise<void>}
+     */
+    async execute() {
+        this.updateState({
+            status: TransactionStatusMessage.PENDING_RECEIPT
+        });
+        await this.waitForTxReceipt(this.txHash);
+    }
+    /**
+     * Waits for the transaction receipt to be confirmed on the blockchain
+     * @param {Hex} hash - The transaction hash to monitor
+     * @returns {Promise<void>}
+     * @private
+     */
+    async waitForTxReceipt(hash) {
+        try {
+            await waitForTransactionReceipt(this.config, { hash });
+            await this.indexTransaction();
+        }
+        catch {
+            this.updateState({
+                status: TransactionStatusMessage.ERROR,
+                errorDetails: TransactionStoreErrorMessage.RECEIPT_FAILED
+            });
+            return this.onError();
+        }
+    }
+    /**
+     * Monitors the transaction indexing status in the subgraph
+     * @returns {Promise<void>}
+     * @private
+     */
+    async indexTransaction() {
+        this.updateState({
+            status: TransactionStatusMessage.PENDING_SUBGRAPH
+        });
+        const result = await awaitSubgraphIndexing(this.awaitSubgraphConfig);
+        if (result.error === TransactionStoreErrorMessage.SUBGRAPH_TIMEOUT_ERROR) {
+            this.updateState({
+                status: TransactionStatusMessage.ERROR,
+                errorDetails: TransactionStoreErrorMessage.SUBGRAPH_TIMEOUT_ERROR
+            });
+            return this.onError();
+        }
+        if (result.value) {
+            this.updateState({
+                status: TransactionStatusMessage.SUCCESS
+            });
+            return this.onSuccess();
+        }
+        this.updateState({
+            status: TransactionStatusMessage.ERROR,
+            errorDetails: TransactionStoreErrorMessage.SUBGRAPH_FAILED
+        });
+        return this.onError();
+    }
+}

package/dist/providers/transactions/TransactionManager.d.ts

@@ -0,0 +1,92 @@
+import { type Readable } from 'svelte/store';
+import type { QueryClient } from '@tanstack/svelte-query';
+import { type Transaction } from '../../models/Transaction';
+import type { InternalTransactionArgs } from '../../types/transaction';
+import type { Config } from '@wagmi/core';
+import type { ToastProps } from '../../types/toast';
+/**
+ * Function type for adding toast notifications to the UI
+ * @param toast - The toast notification configuration object
+ * @param toast.message - The message text to display in the toast
+ * @param toast.type - The type of toast notification (success, error, or info)
+ * @param toast.color - The color theme of the toast
+ * @param toast.links - Optional array of links to display in the toast
+ */
+export type AddToastFunction = (toast: Omit<ToastProps, 'id'>) => void;
+/**
+ * Manages blockchain transactions with toast notifications and query invalidation.
+ * Handles transaction lifecycle, status updates, and UI feedback.
+ * Provides functionality for creating, tracking, and managing blockchain transactions.
+ *
+ * @class TransactionManager
+ * @description A class that manages the lifecycle of blockchain transactions, including
+ * tracking their status, displaying notifications, and invalidating relevant queries.
+ */
+export declare class TransactionManager {
+    /** Writable store tracking all active transactions */
+    private transactions;
+    /** Query client for cache invalidation after successful transactions */
+    private queryClient;
+    /** Function to display toast notifications in the UI */
+    private addToast;
+    /** Wagmi configuration for blockchain interactions */
+    private wagmiConfig;
+    /**
+     * Initializes a new TransactionManager instance
+     * @param queryClient - Query client for cache invalidation
+     * @param addToast - Function to display toast notifications
+     * @param wagmiConfig - Wagmi configuration for blockchain interactions
+     * @throws {Error} If required dependencies are not provided
+     */
+    constructor(queryClient: QueryClient, addToast: AddToastFunction, wagmiConfig: Config);
+    /**
+     * Creates and initializes a new transaction for removing an order from the orderbook
+     * @param args - Configuration for the remove order transaction
+     * @param args.subgraphUrl - URL of the subgraph to query for transaction status
+     * @param args.txHash - Hash of the transaction to track
+     * @param args.orderHash - Hash of the order to be removed
+     * @param args.chainId - Chain ID where the transaction is being executed
+     * @param args.queryKey - Key for query invalidation and UI links, often the order hash.
+     * @param args.networkKey - Network identifier for UI links.
+     * @returns A new Transaction instance configured for order removal
+     * @throws {Error} If required transaction parameters are missing
+     * @example
+     * const tx = await manager.createRemoveOrderTransaction({
+     *   subgraphUrl: 'https://api.thegraph.com/subgraphs/name/...',
+     *   txHash: '0x123...',
+     *   orderHash: '0x456...',
+     *   chainId: 1
+     * });
+     */
+    createRemoveOrderTransaction(args: InternalTransactionArgs): Promise<Transaction>;
+    /**
+     * Creates and executes a new transaction instance
+     * @param args - Configuration for the transaction
+     * @param args.pendingMessage - Message to display on pending transaction
+     * @param args.errorMessage - Message to display on transaction failure
+     * @param args.successMessage - Message to display on transaction success
+     * @param args.queryKey - Key used for query invalidation
+     * @param args.toastLinks - Array of links to display in toast notifications
+     * @returns A new Transaction instance that has been initialized and started
+     * @throws {Error} If transaction creation fails
+     * @private
+     */
+    private createTransaction;
+    /**
+     * Retrieves the store containing all active transactions
+     * @returns A writable store containing all active Transaction instances
+     * @throws {Error} If transaction store is not initialized
+     * @example
+     * const transactions = manager.getTransactions();
+     * $: console.log($transactions); // Log all active transactions
+     */
+    getTransactions(): Readable<Transaction[]>;
+    /**
+     * Removes all transactions from the store
+     * Resets the transaction tracking state
+     * @throws {Error} If transaction store is not initialized
+     * @example
+     * manager.clearTransactions(); // Clear all tracked transactions
+     */
+    clearTransactions(): void;
+}