Usage
const {
data,
isLoading,
isError,
isSuccess,
error,
refetch,
fetchTransactionStatus,
} = useGetTransactionStatus({
hash: "0x...",
getBearerToken: getToken,
refetchInterval: 3000, // polls every 3s, stops on terminal status
});
Input Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
hash | string | Yes | Transaction hash (0x...) |
getBearerToken | () => Promise<string> | Yes | Function returning the auth token |
refetchInterval | number | false | No | Polling interval in ms (default: 3000). false to disable. |
queryOptions | UseQueryOptions | No | React Query options |
Return Value
| Property | Type | Description |
|---|---|---|
data | TransactionStatusResponse | undefined | Transaction status data |
isLoading | boolean | True while fetching |
isError | boolean | True if an error occurred |
isSuccess | boolean | True if the query succeeded |
error | Error | null | Error when isError is true |
refetch | () => Promise<QueryObserverResult> | Re-run the query |
fetchTransactionStatus | (input) => Promise<TransactionStatusResponse> | Imperatively fetch |
Polling automatically stops when the status reaches a terminal state:
ACCEPTED_ON_L1, REJECTED, or REVERTED.Example Implementation
import { useGetTransactionStatus } from "@chipi-stack/chipi-react";
import { OnChainTxStatus } from "@chipi-stack/types";
export function TransactionTracker({
txHash,
getBearerToken,
}: {
txHash: string;
getBearerToken: () => Promise<string>;
}) {
const { data, isLoading } = useGetTransactionStatus({
hash: txHash,
getBearerToken,
refetchInterval: 3000,
});
if (isLoading) return <p>Checking status...</p>;
const confirmed = data?.status === OnChainTxStatus.ACCEPTED_ON_L2
|| data?.status === OnChainTxStatus.ACCEPTED_ON_L1;
return (
<div>
<p>Status: {data?.status}</p>
{data?.blockNumber && <p>Block: {data.blockNumber}</p>}
{data?.revertReason && <p>Revert reason: {data.revertReason}</p>}
{confirmed && <p>Transaction confirmed!</p>}
</div>
);
}