Tx Button

Introduction

TxButton provides a simple way to submit Substrate transactions with fee estimation, disabled states, and status notifications. It works with typink's useTx and can be adapted to other APIs via a thin wrapper.

Installation

npm install @polkadot-ui/tx-button

Usage

pnpm dlx polkadot-ui@latest add tx-button

If you want to use txNotifications too, you need to add the <Toaster /> component from sonner to your app. It is bundled with the component.

import { Toaster } from "sonner";

<Toaster />

Usage With typink useTx

import { useTx } from "typink"
import { TxButton } from "@/components/tx-button.dedot";

function RemarkExample() { 
  const tx = useTx((tx) => tx.system.remark, {
    networkId: "paseo"
  })
  return (
    <TxButton tx={tx} args={["hello"]} networkId="paseo">
      Write a message on chain
    </TxButton>
  );
}

Usage with papi

With papi, you need to pass the transaction directly to the component.

import { TxButton } from "@/components/tx-button.papi";

function RemarkTxButton() {
  const networkId = "polkadot";
  const client = useClient({ chainId: networkId });
  const transaction = client?.getTypedApi(networkId)?.tx.System.remark({
    remark: Binary.fromText("Hello World from polkadot-ui"),
  });

  return <TxButton transaction={transaction} networkId={networkId} />;
}

Behavior

• Fee preview: Fetches and displays the estimated fee before submission
• Disabled states: Button disables when not connected, wrong network, fee error, or insufficient balance
• Progress states: Shows loading, best-block, finalized, and error icons
• Notifications: Emits toasts for status updates

Props

Notes

• Args are validated by the chain at runtime; pass the exact parameters the selected extrinsic expects (e.g., system.remark expects a bytes-like string)
• For more details on useTx and the underlying flow, see the reference implementation useTx.ts