Tx Notification
A comprehensive transaction lifecycle component with real-time status updates and block explorer integration.
Introduction
tx-notification provides a simple API to show toast notifications for the full transaction lifecycle — from signing to submission, inclusion, and finalization. It integrates with your chain metadata to show a chain logo and optional explorer link.
Installation
npx polkadot-ui@latest add tx-notificationThe txNotification component depends on sonner to show the notifications. So you need to add the <Toaster /> component from sonner to your app. It is bundled with the component.
Usage
Tx Notification - Basic
Show notifications across the tx lifecycle.
Tx Notification - Custom Texts
Customize titles and descriptions for each status.
Tx Notification - Cancel/Error
Show a cancellation/error toast when the tx fails or is rejected.
API
beginTxStatusNotification({ network, title, description, toastId? }): Shows an initial loading toast and returns atoastId.txStatusNotification({ result, toastId, network, successDuration?, title?, titles?, descriptions? }): Updates the toast based on the tx status (Broadcasting→BestChainBlockIncluded→Finalized).cancelTxStatusNotification({ toastId, network, title?, description? }): Replaces the toast with an error/cancelled state.
All examples above focus on dedot, but the API is provider-agnostic as long as you pass result.status.type and a compatible network object.