Transaction Toast

1"use client";
2 
3import {
4  CheckCircle2Icon,
5  ExternalLinkIcon,
6  Loader2Icon,
7  XCircleIcon,
8  XIcon,
9} from "lucide-react";
10import { toast } from "sonner";
11 
12interface TxnToastProps {
13  title?: string;
14  description?: string;
15  signature?: string;
16  status?: "pending" | "confirmed" | "error";
17  explorerUrl?: string;
18}
19 
20const statusConfig = {
21  pending: {
22    icon: <Loader2Icon className="size-4 animate-spin text-muted-foreground" />,
23    defaultTitle: "Transaction pending",
24    defaultDescription: "Waiting for confirmation...",
25  },
26  confirmed: {
27    icon: <CheckCircle2Icon className="size-4 text-emerald-500" />,
28    defaultTitle: "Transaction confirmed",
29    defaultDescription: "Your transaction was successful.",
30  },
31  error: {
32    icon: <XCircleIcon className="size-4 text-red-400" />,
33    defaultTitle: "Transaction failed",
34    defaultDescription: "Something went wrong. Please try again.",
35  },
36};
37 
38const truncateSignature = (sig: string) => {
39  if (sig.length <= 12) return sig;
40  return `${sig.slice(0, 6)}...${sig.slice(-4)}`;
41};
42 
43const renderToast = (props: TxnToastProps, toastId: string | number) => {
44  const {
45    title,
46    description,
47    signature,
48    status = "confirmed",
49    explorerUrl,
50  } = props;
51  const config = statusConfig[status];
52  const resolvedExplorerUrl =
53    explorerUrl ??
54    (signature ? `https://solscan.io/tx/${signature}` : undefined);
55 
56  return (
57    <div className="flex gap-3 w-[356px] rounded-lg border bg-background p-4 shadow-lg">
58      <div className="mt-0.5 shrink-0">{config.icon}</div>
59      <div className="flex flex-1 flex-col gap-1">
60        <span className="text-sm font-medium">
61          {title ?? config.defaultTitle}
62        </span>
63        <span className="text-sm text-muted-foreground">
64          {description ?? config.defaultDescription}
65        </span>
66        {resolvedExplorerUrl && (
67          <a
68            href={resolvedExplorerUrl}
69            target="_blank"
70            rel="noopener noreferrer"
71            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
72          >
73            {signature ? truncateSignature(signature) : "View transaction"}
74            <ExternalLinkIcon className="size-3" />
75          </a>
76        )}
77      </div>
78      <button
79        type="button"
80        onClick={() => toast.dismiss(toastId)}
81        className="shrink-0 mt-0.5 text-muted-foreground hover:text-foreground transition-colors"
82      >
83// … truncated