A button component that handles blockchain transaction submission with built-in status tracking and notifications.

TransactionButton

The TransactionButton component handles individual transaction submission with built-in status tracking and notifications.

Usage

import { TransactionButton } from '@avalabs/builderkit';

// Basic usage
<TransactionButton
  chain_id={43114}
  title="Send AVAX"
  description="Sending AVAX to recipient"
  data={{
    to: "0x1234...",
    value: "1000000000000000000" // 1 AVAX
  }}
/>

// With callbacks
<TransactionButton
  chain_id={43114}
  title="Stake Tokens"
  description="Staking tokens in the protocol"
  data={stakeData}
  onTransactionSent={(timestamp) => {
    console.log('Transaction sent at:', timestamp);
  }}
  onTransactionConfirmed={(receipt) => {
    console.log('Transaction confirmed:', receipt);
  }}
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID for the transaction
`title`	`string`	-	Transaction title
`description`	`string`	-	Transaction description
`data`	`any`	-	Transaction data
`onTransactionSent`	`(timestamp: number) => void`	-	Called when transaction is sent
`onTransactionConfirmed`	`(receipt: any) => void`	-	Called when transaction is confirmed
`className`	`string`	-	Additional CSS classes

Features

Automatic wallet connection handling
Network switching support
Transaction status tracking
Toast notifications with explorer links
Loading states and error handling

Examples

Basic Transaction

<TransactionButton
  chain_id={43114}
  title="Send Tokens"
  description="Sending tokens to recipient"
  data={{
    to: recipientAddress,
    value: amount
  }}
/>

With Custom Styling

<TransactionButton
  chain_id={43114}
  title="Custom Action"
  description="Performing custom action"
  data={actionData}
  className="bg-purple-600 hover:bg-purple-700"
/>

Component States

Not Connected
- Shows "Connect Wallet" button
- Handles wallet connection
Wrong Network
- Shows "Wrong Network" button
- Handles network switching
Ready
- Shows transaction button
- Enables transaction submission
Processing
- Shows loading indicator
- Tracks transaction status

Notifications

The component provides toast notifications for:

Transaction sent
Transaction confirmed
Transaction failed

Each notification includes:

Timestamp
Transaction explorer link
Appropriate styling

TransactionButton

On this page