FlowToast

Toast notification for transaction flow events (success, error, step completion). Renders via portal, automatically connects to TransactionButton through TxKitProvider context.

Quick Start

import { TransactionButton, FlowToast, txStep } from '@txkit/react'
 
<TransactionButton
  steps={[ txStep('send', 'Send', { to: '0x...', value: parseEther('1') }) ]}
/>
<FlowToast position="bottom-right" />

Three Tiers of Customization

Tier 1: Zero-Config

<FlowToast />

Tier 2: Custom Render

<FlowToast>
  {({ visible, message, type, dismiss }) => (
    visible && (
      <div className={`toast toast-${type}`}>
        <span>{message}</span>
        <button onClick={dismiss}>x</button>
      </div>
    )
  )}
</FlowToast>

Props

Prop	Type	Default	Description
`className`	`string`	-	CSS class
`children`	`(data: RenderData) => ReactNode`	-	Custom render function
`data-testid`	`string`	-	Test ID for automated testing
`flowId`	`string`	`'__default__'`	Flow ID to display
`autoDismiss`	`number`	`5000`	Auto-dismiss in ms (0 = manual)
`position`	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Toast position

Render Data

type FlowToastRenderData = {
  visible: boolean
  message: string
  description?: string
  type: 'success' | 'error' | 'info' | 'warning'
  stepId: string | undefined
  dismiss: () => void
}

Toast Types & Triggers

Type	Triggered when
`success`	`FlowStatus` becomes `completed`
`error`	`FlowStatus` becomes `error` (unexpected error during execution)
`warning`	`FlowStatus` becomes `rejected` (user rejected wallet popup)
`info`	`FlowStatus` becomes `canceled` (user canceled flow) - neutral copy

Toasts auto-dismiss after autoDismiss ms (default: 5000). Pass autoDismiss={0} to keep them open until explicitly dismissed.

Portal Placement

<FlowToast /> renders into a portal mounted on document.body. Pass position to control the corner: top-right, top-left, bottom-right (default), or bottom-left.