useTransactionStatus

$npx shadcn@latest add https://uxdotsol.xyz/r/use-transaction-status.json

"use client";
 
import type { Connection } from "@solana/web3.js";
import { useTransactionStatus } from "@/hooks/use-transaction-status";
 
export function PaymentReceipt({
  connection,
  signature,
}: {
  connection: Connection;
  signature: string;
}) {
  const transaction = useTransactionStatus({
    client: connection,
    signature,
    commitment: "confirmed",
    cluster: "mainnet-beta",
  });
 
  return (
    <section aria-live="polite">
      <h2>Payment receipt</h2>
      <p>Status: {transaction.status}</p>
      {transaction.status === "failed" || transaction.status === "expired" ? (
        <button onClick={transaction.retry}>Check again</button>
      ) : null}
      {transaction.explorerLink ? (
        <a href={transaction.explorerLink} target="_blank" rel="noreferrer">
          View transaction
        </a>
      ) : null}
    </section>
  );
}