Skip to main content

​
Overview

The usePolygonTransaction hook helps you send transactions and track their status.

​
Usage

import { usePolygonTransaction } from '@sanketsaagar/polygon-kit';

function SendTransaction() {
  const { sendTransaction, isPending, isSuccess, error } = usePolygonTransaction();

  const handleSend = () => {
    sendTransaction({
      to: '0x...',
      value: BigInt('1000000000000000000'), // 1 MATIC
    });
  };

  return (
    <div>
      <button onClick={handleSend} disabled={isPending}>
        {isPending ? 'Sending...' : 'Send Transaction'}
      </button>
      {isSuccess && <p>Transaction sent!</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

​
Return Values

​
sendTransaction
(params: TransactionParams) => Promise<string>
Function to send a transaction
​
isPending
boolean
Whether a transaction is being sent
​
isSuccess
boolean
Whether the transaction was successful
​
error
Error | null
Error object if the transaction failed
​
txHash
string | undefined
The transaction hash if successful
​
reset
() => void
Reset the transaction state

​
Examples

​
Send MATIC

function SendMatic() {
  const { sendTransaction, isPending } = usePolygonTransaction();

  const send = () => {
    sendTransaction({
      to: '0xRecipientAddress',
      value: BigInt('1000000000000000000'), // 1 MATIC
    });
  };

  return (
    <button onClick={send} disabled={isPending}>
      Send 1 MATIC
    </button>
  );
}

​
Contract Interaction

function MintNFT() {
  const { sendTransaction, isSuccess, txHash } = usePolygonTransaction();

  const mint = () => {
    sendTransaction({
      to: '0xContractAddress',
      data: '0x...', // Encoded mint function
    });
  };

  return (
    <div>
      <button onClick={mint}>Mint NFT</button>
      {isSuccess && (
        <a href={`https://polygonscan.com/tx/${txHash}`}>
          View Transaction
        </a>
      )}
    </div>
  );
}

​
With Error Handling

function SafeTransaction() {
  const { sendTransaction, isPending, error, reset } = usePolygonTransaction();

  const send = async () => {
    try {
      await sendTransaction({
        to: '0x...',
        value: BigInt('1000000000000000'),
      });
      alert('Transaction sent!');
    } catch (err) {
      console.error('Transaction failed:', err);
    }
  };

  return (
    <div>
      <button onClick={send} disabled={isPending}>
        Send Transaction
      </button>
      {error && (
        <div>
          <p className="text-red-500">{error.message}</p>
          <button onClick={reset}>Try Again</button>
        </div>
      )}
    </div>
  );
}