Frontend Transaction UX: Status, Errors, Recovery

export type TxStatus =
  | "idle"
  | "preparing"
  | "awaiting-signature"
  | "sending"
  | "confirmed"
  | "failed";

export type TxErrorKind = "user-rejected" | "network" | "expired" | "program" | "unknown";

export function classifyTxError(err: string): TxErrorKind {
  const message = err.toLowerCase();

  if (message.includes("reject")) return "user-rejected";
  if (message.includes("blockhash") || message.includes("expired")) return "expired";
  if (message.includes("timeout") || message.includes("network")) return "network";
  if (message.includes("instruction") || message.includes("program")) return "program";

  return "unknown";
}

export function getRecoveryHint(kind: TxErrorKind) {
  switch (kind) {
    case "user-rejected":
      return "Review the transaction and sign again when you are ready.";
    case "expired":
      return "Rebuild the transaction with a fresh blockhash and retry.";
    case "network":
      return "Retry after checking RPC health and wallet connection.";
    case "program":
      return "Check the inputs and on-chain account state before retrying.";
    default:
      return "Inspect logs, then retry only after you understand the failure.";
  }
}

"use client";

import React, { useState } from "react";
import { address, lamports } from "@solana/kit";
import { getTransferSolInstruction } from "@solana-program/system";
import { useSendTransaction, useWallet } from "@solana/react-hooks";
import { classifyTxError, getRecoveryHint, type TxStatus } from "@/lib/solana/uiTxState";

type TxActionCardProps = {
  destination: string;
};

export function TxActionCard({ destination }: TxActionCardProps) {
  const wallet = useWallet();
  const { send, isSending, signature } = useSendTransaction();
  const [status, setStatus] = useState<TxStatus>("idle");
  const [error, setError] = useState("");

  const run = async () => {
    setError("");

    if (wallet.status !== "connected") {
      setStatus("failed");
      setError("Connect a wallet before sending a transaction.");
      return;
    }

    try {
      setStatus("preparing");

      const instruction = getTransferSolInstruction({
        source: wallet.session.account,
        destination: address(destination),
        amount: lamports(100_000n),
      });

      setStatus("awaiting-signature");
      setStatus("sending");

      await send({ instructions: [instruction] });
      setStatus("confirmed");
    } catch (e: any) {
      const kind = classifyTxError(String(e?.message ?? e));
      setStatus("failed");
      setError(`Failed (${kind}). ${getRecoveryHint(kind)}`);
    }
  };

  return (
    <div className="rounded-xl border border-zinc-700 p-4 space-y-2">
      <div className="text-sm">Status: {status}</div>

      <button
        onClick={run}
        disabled={wallet.status !== "connected" || isSending}
        className="px-3 py-2 rounded bg-cyan-700 text-white"
      >
        {isSending ? "Sending..." : "Send 0.0001 SOL"}
      </button>

      {signature ? <div className="text-xs">Signature: {signature}</div> : null}
      {error ? <div className="text-xs text-red-300">{error}</div> : null}
    </div>
  );
}