TransactionManager
A component that orchestrates multiple blockchain transactions in sequence.
TransactionManager
The TransactionManager component orchestrates multiple blockchain transactions in sequence, handling the flow between steps and providing status tracking.
Usage
import { TransactionManager } from '@avalabs/builderkit';
// Basic usage
<TransactionManager
chain_id={43114}
transactions={[
{
title: "Approve Token",
description: "Approving token for transfer",
data: approveData
},
{
title: "Transfer Token",
description: "Transferring tokens to recipient",
data: transferData
}
]}
onTransactionSent={(timestamp) => {
console.log('Step completed at:', timestamp);
}}
onTransactionConfirmed={(receipt) => {
console.log('All transactions completed:', receipt);
}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
chain_id | number | - | Chain ID for the transactions |
transactions | TransactionProps[] | - | Array of transactions to process |
onTransactionSent | (timestamp: number) => void | - | Called when a step completes |
onTransactionConfirmed | (receipt: any) => void | - | Called when all transactions complete |
className | string | - | Additional CSS classes |
Features
- Sequential transaction execution
- Step-by-step progress tracking
- Automatic state management
- Transaction dependency handling
- Consistent error handling
- Status notifications for each step
Examples
Token Approval and Transfer
<TransactionManager
chain_id={43114}
transactions={[
{
title: "Step 1: Approve",
description: "Approve token spending",
data: approveData
},
{
title: "Step 2: Transfer",
description: "Transfer tokens to recipient",
data: transferData
}
]}
/>Multi-step Protocol Interaction
<TransactionManager
chain_id={43114}
transactions={[
{
title: "Step 1: Approve USDC",
description: "Approve USDC spending",
data: approveUsdcData
},
{
title: "Step 2: Approve AVAX",
description: "Approve AVAX spending",
data: approveAvaxData
},
{
title: "Step 3: Add Liquidity",
description: "Add liquidity to pool",
data: addLiquidityData
}
]}
/>Transaction Flow
-
Initialization
- Validates transaction array
- Sets up initial state
- Prepares first transaction
-
Step Execution
- Processes current transaction
- Waits for confirmation
- Updates progress state
-
Step Transition
- Validates completion
- Moves to next transaction
- Updates UI state
-
Completion
- Confirms all steps finished
- Triggers completion callback
- Resets internal state
Is this guide helpful?