# useTxFee

Estimates transaction fees with automatic loading and error state management. Accepts a transaction created with `useTx` and automatically estimates fees based on the provided arguments.

#### Props

<table><thead><tr><th width="134.03515625">Name</th><th width="247.8671875">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>tx</code></td><td><code>UseTxReturnType</code></td><td>Transaction instance from <code>useTx</code> hook.</td></tr><tr><td><code>args</code></td><td><code>any[]</code></td><td>Arguments for the transaction. Required if transaction has parameters.</td></tr><tr><td><code>txOptions</code></td><td><code>Partial&#x3C;PayloadOptions>?</code></td><td>Transaction options to include in fee estimation (e.g., tip, nonce).</td></tr><tr><td><code>enabled</code></td><td><code>boolean?</code></td><td>Whether to automatically fetch the fee estimate. Default: <code>true</code>.</td></tr><tr><td><code>networkId</code></td><td><code>NetworkId?</code></td><td>Optional network ID to specify which client to use.</td></tr></tbody></table>

#### Return Type

<table><thead><tr><th width="142.21875">Name</th><th width="205.1015625">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>fee</code></td><td><code>bigint | null</code></td><td>The estimated fee in the smallest unit (e.g., Planck for Polkadot). <code>null</code> if not available.</td></tr><tr><td><code>isLoading</code></td><td><code>boolean</code></td><td>Whether fee estimation is in progress.</td></tr><tr><td><code>error</code></td><td><code>string | null</code></td><td>Error message if estimation failed, <code>null</code> otherwise.</td></tr><tr><td><code>refresh</code></td><td><code>() => Promise&#x3C;void></code></td><td>Function to manually trigger fee estimation.</td></tr></tbody></table>

#### Basic Usage

**Fee estimation with validation:**

```tsx
import { useTx, useTxFee, formatBalance } from 'typink';

function RemarkWithFee() {
  const [message, setMessage] = useState('Hello!');
  const remarkTx = useTx((tx) => tx.system.remark);

  const { fee, isLoading, error } = useTxFee({
    tx: remarkTx,
    args: [message],
    enabled: message.trim().length > 0,
  });

  return (
    <div>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Enter message"
      />

      {isLoading && <p>Calculating fee...</p>}
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
      {fee && <p>Estimated Fee: {formatBalance(fee)}</p>}

      <button onClick={() => remarkTx.signAndSend({ args: [message] })}>
        Send Remark
      </button>
    </div>
  );
}
```

**Conditional fee estimation:**

```tsx
function TransferWithFee() {
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');

  const transferTx = useTx((tx) => tx.balances.transferKeepAlive);

  const isValidRecipient = recipient.length === 48;
  const parsedAmount = amount ? BigInt(amount) : 0n;

  const { fee, isLoading, error } = useTxFee({
    tx: transferTx,
    args: [recipient, parsedAmount],
    enabled: isValidRecipient && parsedAmount > 0n,
  });

  return (
    <div>
      <input
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
        placeholder="Recipient address"
      />
      <input
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Amount"
        type="number"
      />

      {fee && (
        <div>
          <p>Estimated Fee: {formatBalance(fee)}</p>
          <p>Total: {formatBalance(fee + parsedAmount)}</p>
        </div>
      )}

      <button
        onClick={() => transferTx.signAndSend({ args: [recipient, parsedAmount] })}
        disabled={isLoading || transferTx.inProgress}>
        Transfer
      </button>
    </div>
  );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dedot.dev/typink/hooks-and-providers/usetxfee.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.