useOptimisticTransaction

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

"use client";
 
import { useOptimisticTransaction } from "@/hooks/use-optimistic-transaction";
 
type UsdcPaymentProps = {
  currentBalance: number;
  amount: number;
  sendPayment: () => Promise<string>;
  confirmPayment: (signature: string) => Promise<void>;
};
 
export function UsdcPayment({
  currentBalance,
  amount,
  sendPayment,
  confirmPayment,
}: UsdcPaymentProps) {
  const payment = useOptimisticTransaction({
    initialState: { balance: currentBalance },
    apply: (state) => ({ balance: state.balance - amount }),
    transaction: sendPayment,
    confirm: confirmPayment,
  });
 
  async function pay() {
    try {
      await payment.run();
    } catch {
      // The balance is rolled back and the hook exposes the error.
    }
  }
 
  return (
    <section>
      <p>USDC balance: {payment.state.balance.toFixed(2)}</p>
      <button disabled={payment.isPending} onClick={pay}>
        {payment.isPending ? "Confirming payment..." : `Pay ${amount} USDC`}
      </button>
      {payment.status === "rolled-back" ? (
        <p role="alert">Payment failed. Your displayed balance was restored.</p>
      ) : null}
    </section>
  );
}