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

TransactionManager

On this page