Experiencia de Usuario de Transacciones

Notificaciones, confirmaciones, reintentos y decodificación de errores para envíos dirigidos al usuario.

Receta

type TxState = "idle" | "building" | "signing" | "sending" | "confirmed" | "failed";

Cuándo usar esto:

• Cualquier botón que active la aprobación de la billetera.
• Reducción de tickets de soporte por fallos opacos.
• Pulido profesional en lanzamientos en mainnet.

Ejemplo Funcional

"use client";
import { useState } from "react";
 
export function useTxToast() {
  const [state, setState] = useState<TxState>("idle");
  const [signature, setSignature] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  async function run(sendFn: () => Promise<string>) {
    try {
      setError(null);
      setState("signing");
      const sig = await sendFn();
      setSignature(sig);
      setState("confirmed");
      return sig;
    } catch (e) {
      setError(e instanceof Error ? e.message : "Transaction failed");
      setState("failed");
      throw e;
    }
  }
 
  return { state, signature, error, run };
}

Lo que esto demuestra:

• Máquina de estados explícita para spinners de UI.
• Captura de la firma para enlace al explorador.
• Diferenciación entre rechazo de billetera y error de programa en la capa de UI.

Análisis Profundo

Cómo Funciona

• Simular antes de firmar para mapear logs del programa a texto.
• Mostrar enlace al explorador al confirmar.
• Reintentar con un blockhash nuevo en caso de errores de expiración.
• Deshabilitar envíos duplicados mientras están en curso.

Errores Comunes

• Notificación genérica de "fallido": los usuarios reintentan ciegamente. Solución: decodificar logs de simulación.
• Sin estado pendiente: clics dobles. Solución: deshabilitar el botón.
• Asumir finalización instantánea: éxito prematuro. Solución: indicar el nivel de compromiso.
• Falta de enlace al explorador: fricción de soporte. Solución: plantilla de URL consciente del clúster.
• Bucle de reintento infinito: mismo error de programa. Solución: limitar reintentos; mostrar guía de solución.

Alternativas

Preguntas Frecuentes

Relacionado

• Firma del Lado del Cliente - pipeline de envío
• Firma y Envío - confirmación con kit
• Depuración de Transacciones Fallidas - operaciones

Versiones de Stack: Esta página fue escrita para Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0, y LiteSVM 0.6.x.