useSendTransaction

The useSendTransaction hook provides functionality to send transactions to the blockchain with comprehensive status tracking and error handling.

Import

import { useSendTransaction } from '@luno-kit/react'

Usage

Basic Usage

index.tsx

import { useSendTransaction } from '@luno-kit/react'

function SendTransactionButton() {
  const { api } = useApi();
  const { sendTransaction, isPending, error, detailedStatus } = useSendTransaction()

  const handleSend = () => {
    const transferExtrinsic = api.tx.balances.transferKeepAlive(to, amount)

    sendTransaction({
      extrinsic: transferExtrinsic
    })
  }

  return (
    <div>
      <button onClick={handleSend} disabled={isPending}>
        {'Send Transaction'}
      </button>
      {error && <p>Error: {error.message}</p>}
      <p>Status: {detailedStatus}</p>
    </div>
  )
}

config.ts

import { createConfig, kusama, polkadot, polkadotjsConnector } from '@luno-kit/react'

const config = createConfig({
  appName: 'luno with-vite example',
  chains: [polkadot, kusama],
  connectors: [polkadotjsConnector()],
  autoConnect: true,
});

Async Usage with Callbacks

AsyncTransaction.tsx

import { useSendTransaction } from '@luno-kit/react'

function AsyncTransactionButton() {
  const { api } = useApi();
  const { sendTransactionAsync, isPending } = useSendTransaction()

  const handleSendAsync = async () => {
    try {
      const transferExtrinsic = api.tx.balances.transferKeepAlive(to, amount)

      const receipt = await sendTransactionAsync({
        extrinsic: transferExtrinsic
      })

      if (receipt.status === 'success') {
        console.log('Transaction successful:', receipt.transactionHash)
      } else {
        console.log('Transaction failed:', receipt.errorMessage)
      }
    } catch (error) {
      console.error('Transaction error:', error)
    }
  }

  return (
    <button onClick={handleSendAsync} disabled={isPending}>
      Send Transaction (Async)
    </button>
  )
}

config.ts

import { createConfig, kusama, polkadot, polkadotjsConnector } from '@luno-kit/react'

const config = createConfig({
  appName: 'luno with-vite example',
  chains: [polkadot, kusama],
  connectors: [polkadotjsConnector()],
  autoConnect: true,
});

Parameters

The hook accepts an optional configuration object:

Parameter	Type	Required	Description
onSuccess	(data: TransactionReceipt) => void	No	Callback when transaction succeeds
onError	(error: Error) => void	No	Callback when transaction fails
onSettled	() => void	No	Callback when transaction completes (success or failure)

Return Value

The hook returns an object with the following properties:

Methods

These are the functions you can call to send transactions.

Property	Type	Description
sendTransaction	(variables: { extrinsic: ISubmittableExtrinsic }, options?: { onSuccess?: () => void; onError?: (error: Error) => void; onSettled?: () => void }) => void	Send transaction synchronously
sendTransactionAsync	(variables: { extrinsic: ISubmittableExtrinsic }, options?: { onSuccess?: () => void; onError?: (error: Error) => void; onSettled?: () => void }) => Promise<TransactionReceipt>	Send transaction asynchronously
reset	() => void	Reset the transaction state

Data & State

These properties provide information about the current state of the transaction.

Property	Type	Description
data	TransactionReceipt | undefined	Transaction receipt after completion
error	Error | null	Transaction error if any
isError	boolean	Whether there's an error
isIdle	boolean	Whether the hook is idle
isPending	boolean	Whether transaction is in progress
isSuccess	boolean	Whether transaction was successful
status	'idle' | 'pending' | 'error' | 'success'	Overall transaction status
variables	SendTransactionVariables | undefined	Last used transaction variables
txStatus	TxStatus	High-level transaction status
detailedStatus	DetailedTxStatus	Detailed transaction status

Related Types

SendTransactionVariables

interface SendTransactionVariables {
  extrinsic: ISubmittableExtrinsic;  // The transaction to send
}

TransactionReceipt

interface TransactionReceipt {
  transactionHash: HexString;         // Transaction hash, `0x${string}`
  blockHash: HexString;               // Block hash where transaction was included
  blockNumber?: number;               // Block number
  readonly events: EventRecord[];     // Events emitted during transaction
  status: 'failed' | 'success';      // Transaction result
  dispatchError?: DispatchError;      // Dispatch error if failed
  errorMessage?: string;              // Human-readable error message
  dispatchInfo?: DispatchInfo;        // Dispatch information
}

TxStatus

type TxStatus = 'idle' | 'signing' | 'success' | 'failed';

DetailedTxStatus

type DetailedTxStatus = 'idle' | 'broadcasting' | 'inBlock' | 'finalized' | 'invalid' | 'dropped';

WARNING

In Polkadot, transaction hashes are not guaranteed to be unique across the entire chain, although they are generally unique within a block. This means you cannot reliably query transaction information by hash alone. For more information, refer to the Polkadot.js documentation.

Related Hooks

• useSendTransactionHash - Send transaction and get hash
• useSignMessage - Sign messages with the connected account
• useSigner - Get transaction signer