@1sat/sweep-ui 0.0.1

package/src/components/asset-preview.tsx

@@ -0,0 +1,224 @@
+import { useState } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { formatSats, formatTokenAmount } from "../lib/utils";
+import type { EnrichedOrdinal, TokenBalance } from "../lib/scanner";
+import type { IndexedOutput } from "@1sat/types";
+
+const ORDINALS_PER_PAGE = 20;
+
+function isImageType(ct: string): boolean {
+	return ct.startsWith("image/") && ct !== "image/svg+xml";
+}
+
+function OrdinalCard({ ordinal, isSelected, onToggle }: { ordinal: EnrichedOrdinal; isSelected: boolean; onToggle: () => void }) {
+	const ct = ordinal.contentType ?? "";
+	const isImage = isImageType(ct);
+	const subtype = ct.includes("/") ? ct.split("/")[1] : ct;
+
+	return (
+		<div
+			className={`relative p-2 rounded-lg border cursor-pointer transition-all ${isSelected ? "border-blue-500 bg-blue-500/10 ring-1 ring-blue-500/30" : "border-border/50 hover:border-border bg-black/20"}`}
+			onClick={onToggle}
+		>
+			<div className="absolute top-1.5 right-1.5 z-10">
+				<div className={`w-4 h-4 rounded border-2 flex items-center justify-center text-[10px] ${isSelected ? "bg-blue-500 border-blue-500 text-white" : "border-muted-foreground/40"}`}>
+					{isSelected && "\u2713"}
+				</div>
+			</div>
+			<div className="w-full aspect-square mb-1.5 rounded overflow-hidden bg-black/30 flex items-center justify-center">
+				{!ordinal.contentUrl ? (
+					<span className="text-muted-foreground text-lg">{"\u25C6"}</span>
+				) : isImage ? (
+					<img src={ordinal.contentUrl} alt={ordinal.name || "Ordinal"} className="w-full h-full object-cover" loading="lazy" />
+				) : (
+					<iframe src={ordinal.contentUrl} title={ordinal.name || "Ordinal"} className="w-full h-full border-0 pointer-events-none" sandbox="allow-scripts" loading="lazy" />
+				)}
+			</div>
+			{subtype && (
+				<div className="mb-1">
+					<span className="px-1 py-0.5 text-[9px] rounded bg-blue-500/20 text-blue-400 truncate">{subtype}</span>
+				</div>
+			)}
+			{ordinal.name ? (
+				<a href={ordinal.contentUrl} target="_blank" rel="noopener noreferrer" className="text-[10px] text-foreground truncate font-medium hover:text-blue-400" title={ordinal.name}>{ordinal.name}</a>
+			) : (
+				<a href={ordinal.contentUrl} target="_blank" rel="noopener noreferrer" className="text-[9px] text-muted-foreground truncate font-mono hover:text-blue-400">{ordinal.outpoint.substring(0, 8)}...</a>
+			)}
+		</div>
+	);
+}
+
+export function FundingSection({ funding, totalBsv, sweepAmount, onSweepAmountChange, onSweep, onSend, walletConnected }: {
+	funding: IndexedOutput[]; totalBsv: number; sweepAmount: number | null; onSweepAmountChange: (amount: number | null) => void; onSweep: () => void; onSend: (destination: string) => void; walletConnected: boolean;
+}) {
+	const [address, setAddress] = useState("");
+	if (funding.length === 0) return null;
+	const isMax = sweepAmount === null;
+	const displayAmount = isMax ? formatSats(totalBsv) : formatSats(sweepAmount!);
+
+	return (
+		<div className="border border-green-500/20 bg-green-500/5 p-4 rounded-lg">
+			<div className="flex items-center gap-2 mb-2">
+				<span className="h-2 w-2 rounded-full bg-green-500" />
+				<span className="text-sm font-semibold text-green-500">BSV Funding</span>
+			</div>
+			<div className="flex items-baseline justify-between mb-3">
+				<div>
+					<div className="text-2xl font-bold text-green-500">{formatSats(totalBsv)} sats</div>
+					<div className="text-xs text-muted-foreground">{(totalBsv / 100_000_000).toFixed(8)} BSV</div>
+				</div>
+				<Badge variant="secondary">{funding.length} UTXO{funding.length !== 1 ? "s" : ""}</Badge>
+			</div>
+			<div className="flex items-center gap-2">
+				<Input type="number" min={0} max={totalBsv} placeholder="Max" value={isMax ? "" : sweepAmount} onChange={(e) => { const val = e.target.value; onSweepAmountChange(val === "" ? null : Math.max(0, Math.min(totalBsv, Number(val)))); }} className="flex-1 font-mono" />
+				<span className="text-xs text-muted-foreground">sats</span>
+				<Button variant="outline" size="sm" className="h-9 text-xs" onClick={() => onSweepAmountChange(null)} disabled={isMax}>Max</Button>
+			</div>
+			<div className="mt-3 space-y-2">
+				<Input type="text" placeholder="Destination address..." value={address} onChange={(e) => setAddress(e.target.value)} className="font-mono text-xs" />
+				<div className="flex gap-2">
+					<Button variant="outline" size="sm" className="flex-1" disabled={!address.trim()} onClick={() => onSend(address.trim())}>Send {displayAmount} sats</Button>
+					<Button size="sm" className="flex-1" onClick={onSweep} disabled={!walletConnected} title={walletConnected ? undefined : "Connect BRC-100 wallet to sweep"}>Sweep to Wallet</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function OrdinalsSection({ ordinals, selectedOrdinals, onToggle, onSelectAll, onDeselectAll, onSweep, onSend, onBurn, walletConnected }: {
+	ordinals: EnrichedOrdinal[]; selectedOrdinals: Set<string>; onToggle: (outpoint: string) => void; onSelectAll: () => void; onDeselectAll: () => void; onSweep: () => void; onSend: (destination: string) => void; onBurn: () => void; walletConnected: boolean;
+}) {
+	const [page, setPage] = useState(0);
+	const [address, setAddress] = useState("");
+	if (ordinals.length === 0) return null;
+	const totalPages = Math.ceil(ordinals.length / ORDINALS_PER_PAGE);
+	const start = page * ORDINALS_PER_PAGE;
+	const pageItems = ordinals.slice(start, start + ORDINALS_PER_PAGE);
+
+	return (
+		<div className="border border-blue-500/20 bg-blue-500/5 p-4 rounded-lg">
+			<div className="flex items-start justify-between mb-3">
+				<div>
+					<div className="flex items-center gap-2 mb-1">
+						<span className="h-2 w-2 rounded-full bg-blue-500" />
+						<span className="text-sm font-semibold text-blue-500">Ordinals</span>
+					</div>
+					<div className="text-xs text-muted-foreground">
+						{ordinals.length} inscription{ordinals.length !== 1 ? "s" : ""}
+						{selectedOrdinals.size > 0 && <span className="text-blue-400 ml-1">({selectedOrdinals.size} selected)</span>}
+					</div>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={onSelectAll}>Select All</Button>
+					<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={onDeselectAll} disabled={selectedOrdinals.size === 0}>Deselect</Button>
+				</div>
+			</div>
+			<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 mb-3">
+				{pageItems.map((ord) => (<OrdinalCard key={ord.outpoint} ordinal={ord} isSelected={selectedOrdinals.has(ord.outpoint)} onToggle={() => onToggle(ord.outpoint)} />))}
+			</div>
+			{totalPages > 1 && (
+				<div className="flex items-center justify-center gap-4">
+					<Button variant="ghost" size="sm" className="text-xs" onClick={() => setPage(page - 1)} disabled={page === 0}>Prev</Button>
+					<span className="text-xs text-muted-foreground">Page {page + 1} of {totalPages}</span>
+					<Button variant="ghost" size="sm" className="text-xs" onClick={() => setPage(page + 1)} disabled={page >= totalPages - 1}>Next</Button>
+				</div>
+			)}
+			{selectedOrdinals.size > 0 && (
+				<div className="mt-3 space-y-2">
+					<Input type="text" placeholder="Destination address..." value={address} onChange={(e) => setAddress(e.target.value)} className="font-mono text-xs" />
+					<div className="flex gap-2">
+						<Button variant="outline" size="sm" className="flex-1" disabled={!address.trim()} onClick={() => onSend(address.trim())}>Send {selectedOrdinals.size} Ordinal{selectedOrdinals.size !== 1 ? "s" : ""}</Button>
+						<Button size="sm" className="flex-1" onClick={onSweep} disabled={!walletConnected} title={walletConnected ? undefined : "Connect BRC-100 wallet to sweep"}>Sweep to Wallet</Button>
+						<Button size="sm" className="bg-red-600 hover:bg-red-700 text-white" onClick={() => { if (window.confirm(`Permanently burn ${selectedOrdinals.size} ordinal${selectedOrdinals.size !== 1 ? "s" : ""}? This cannot be undone.`)) onBurn(); }}>Burn</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function TokenRow({ tb }: { tb: TokenBalance }) {
+	return (
+		<div className={`flex items-center justify-between p-3 rounded-lg border ${tb.isActive ? "bg-black/20 border-purple-500/10" : "bg-black/10 border-muted/20 opacity-60"}`}>
+			<div className="flex items-center gap-3">
+				<img src={tb.icon} alt={tb.symbol || "Token"} className="w-8 h-8 rounded-full object-cover" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+				<div>
+					<div className="flex items-center gap-2">
+						<span className="font-medium text-foreground">{tb.symbol || tb.tokenId.slice(0, 8) + "..."}</span>
+						{tb.isActive ? (
+							<span className="px-1.5 py-0.5 text-[9px] rounded bg-green-600/20 text-green-700 dark:text-green-400">active</span>
+						) : (
+							<span className="px-1.5 py-0.5 text-[9px] rounded bg-muted text-muted-foreground">inactive</span>
+						)}
+					</div>
+					<div className="text-xs text-muted-foreground">
+						{formatTokenAmount(tb.totalAmount.toString(), tb.decimals)} {tb.symbol || ""}
+						<span className="ml-2">({tb.outputs.length} output{tb.outputs.length !== 1 ? "s" : ""})</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function Bsv21Section({ tokens }: { tokens: TokenBalance[] }) {
+	if (tokens.length === 0) return null;
+	const active = tokens.filter((t) => t.isActive);
+	const inactive = tokens.filter((t) => !t.isActive);
+
+	return (
+		<div className="border border-purple-500/20 bg-purple-500/5 p-4 rounded-lg">
+			<div className="flex items-center gap-2 mb-3">
+				<span className="h-2 w-2 rounded-full bg-purple-500" />
+				<span className="text-sm font-semibold text-purple-500">BSV-21 Tokens</span>
+			</div>
+			<div className="space-y-3">
+				{active.map((tb) => (<TokenRow key={tb.tokenId} tb={tb} />))}
+				{inactive.length > 0 && active.length > 0 && (
+					<div className="border-t border-purple-500/10 pt-3 mt-3">
+						<div className="text-xs text-muted-foreground mb-2">Inactive overlays ({inactive.length}) — cannot be swept</div>
+					</div>
+				)}
+				{inactive.map((tb) => (<TokenRow key={tb.tokenId} tb={tb} />))}
+			</div>
+		</div>
+	);
+}
+
+export function Bsv20Section({ tokens }: { tokens: IndexedOutput[] }) {
+	if (tokens.length === 0) return null;
+	return (
+		<div className="border border-muted/30 bg-muted/10 p-4 rounded-lg">
+			<div className="flex items-center gap-2 mb-2">
+				<span className="h-2 w-2 rounded-full bg-muted-foreground" />
+				<span className="text-sm font-semibold text-muted-foreground">BSV-20 Tokens</span>
+			</div>
+			<p className="text-xs text-muted-foreground mb-2">Cannot be swept automatically.</p>
+			<div className="flex flex-wrap gap-2">
+				{tokens.slice(0, 10).map((o) => {
+					const tickEvent = o.events?.find((e) => e.startsWith("tick:"));
+					const tick = tickEvent ? tickEvent.slice(5) : "Token";
+					return (<span key={o.outpoint} className="px-2 py-1 text-xs rounded bg-muted/30 text-muted-foreground">{tick}</span>);
+				})}
+				{tokens.length > 10 && <span className="text-xs text-muted-foreground">+{tokens.length - 10} more</span>}
+			</div>
+		</div>
+	);
+}
+
+export function LockedSection({ locked }: { locked: IndexedOutput[] }) {
+	if (locked.length === 0) return null;
+	return (
+		<div className="border border-yellow-500/20 bg-yellow-500/5 p-4 rounded-lg">
+			<div className="flex items-center gap-2 mb-2">
+				<span className="h-2 w-2 rounded-full bg-yellow-500" />
+				<span className="text-sm font-semibold text-yellow-500">Locked Outputs</span>
+			</div>
+			<p className="text-xs text-muted-foreground">
+				{locked.length} locked output{locked.length !== 1 ? "s" : ""}. These are in contracts and cannot be swept directly.
+			</p>
+		</div>
+	);
+}

package/src/components/connect-wallet.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Loader2, Wallet, X } from "lucide-react";
+import { Button } from "./ui/button";
+import { connectWallet, disconnectWallet, getIdentityKey, getProvider } from "../lib/wallet";
+
+interface Props {
+	onConnected: () => void;
+	onDisconnected: () => void;
+	connected: boolean;
+}
+
+export function ConnectWallet({ onConnected, onDisconnected, connected }: Props) {
+	const [connecting, setConnecting] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	async function handleConnect() {
+		setConnecting(true);
+		setError(null);
+		try {
+			await connectWallet();
+			onConnected();
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Failed to connect wallet");
+		} finally {
+			setConnecting(false);
+		}
+	}
+
+	function handleDisconnect() {
+		disconnectWallet();
+		onDisconnected();
+	}
+
+	if (connected) {
+		return (
+			<div className="flex items-center justify-between px-3 py-2 rounded-lg border border-green-500/20 bg-green-500/5">
+				<div className="flex items-center gap-2 text-sm">
+					<span className="h-2 w-2 rounded-full bg-green-500" />
+					<span className="text-muted-foreground">
+						{getProvider() === "brc100" ? "BRC-100" : "OneSat"} · {getIdentityKey()?.slice(0, 12)}...
+					</span>
+				</div>
+				<Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleDisconnect}>
+					<X className="h-3 w-3" />
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-1">
+			<Button variant="outline" size="sm" className="w-full text-xs gap-2" onClick={handleConnect} disabled={connecting}>
+				{connecting ? <Loader2 className="h-3 w-3 animate-spin" /> : <Wallet className="h-3 w-3" />}
+				{connecting ? "Connecting..." : "Connect BRC-100 Wallet (optional)"}
+			</Button>
+			{error && <p className="text-xs text-destructive text-center">{error}</p>}
+		</div>
+	);
+}

package/src/components/opns-section.tsx

@@ -0,0 +1,108 @@
+import { useState, useEffect } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import type { EnrichedOrdinal } from "../lib/scanner";
+import { getServices } from "../lib/services";
+
+export function OpnsSection({ opnsNames, selectedOpns, onToggle, onSelectAll, onDeselectAll, onSweep, onSend, onBurn, walletConnected }: {
+	opnsNames: EnrichedOrdinal[]; selectedOpns: Set<string>; onToggle: (outpoint: string) => void; onSelectAll: () => void; onDeselectAll: () => void; onSweep: () => void; onSend: (destination: string) => void; onBurn: () => void; walletConnected: boolean;
+}) {
+	const [address, setAddress] = useState("");
+	const [resolvedNames, setResolvedNames] = useState<Map<string, string>>(new Map());
+	const [overlayValid, setOverlayValid] = useState<Map<string, boolean>>(new Map());
+	const [validating, setValidating] = useState(false);
+
+	useEffect(() => {
+		if (opnsNames.length === 0) return;
+		const controller = new AbortController();
+		const pending = new Map<string, string>();
+		Promise.all(
+			opnsNames.map(async (item) => {
+				try {
+					const res = await fetch(item.contentUrl, { signal: controller.signal });
+					if (res.ok) pending.set(item.outpoint, await res.text());
+				} catch { /* fetch aborted or failed */ }
+			}),
+		).then(() => { if (!controller.signal.aborted) setResolvedNames(new Map(pending)); });
+		return () => controller.abort();
+	}, [opnsNames]);
+
+	useEffect(() => {
+		if (opnsNames.length === 0) return;
+		let cancelled = false;
+		setValidating(true);
+		const originToOutpoints = new Map<string, string[]>();
+		for (const item of opnsNames) {
+			const origin = item.origin ?? item.outpoint;
+			const list = originToOutpoints.get(origin) ?? [];
+			list.push(item.outpoint);
+			originToOutpoints.set(origin, list);
+		}
+		getServices().opns.validateOrigins([...originToOutpoints.keys()])
+			.then((result) => {
+				if (cancelled) return;
+				const map = new Map<string, boolean>();
+				for (const [origin, valid] of Object.entries(result)) {
+					for (const outpoint of originToOutpoints.get(origin) ?? []) map.set(outpoint, valid);
+				}
+				setOverlayValid(map);
+			})
+			.catch(() => {})
+			.finally(() => { if (!cancelled) setValidating(false); });
+		return () => { cancelled = true; };
+	}, [opnsNames]);
+
+	if (opnsNames.length === 0) return null;
+
+	return (
+		<div className="border border-orange-500/20 bg-orange-500/5 p-4 rounded-lg">
+			<div className="flex items-start justify-between mb-3">
+				<div>
+					<div className="flex items-center gap-2 mb-1">
+						<span className="h-2 w-2 rounded-full bg-orange-500" />
+						<span className="text-sm font-semibold text-orange-500">OPNS Domains</span>
+					</div>
+					<div className="text-xs text-muted-foreground">
+						{opnsNames.length} domain{opnsNames.length !== 1 ? "s" : ""}
+						{selectedOpns.size > 0 && <span className="text-orange-400 ml-1">({selectedOpns.size} selected)</span>}
+					</div>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={onSelectAll}>Select All</Button>
+					<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={onDeselectAll} disabled={selectedOpns.size === 0}>Deselect</Button>
+				</div>
+			</div>
+			<div className="space-y-1">
+				{opnsNames.map((item) => {
+					const isSelected = selectedOpns.has(item.outpoint);
+					const displayName = resolvedNames.get(item.outpoint) ?? item.outpoint.substring(0, 8) + "...";
+					return (
+						<div key={item.outpoint} className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? "border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30" : "border border-border/50 hover:border-border bg-black/20"}`} onClick={() => onToggle(item.outpoint)}>
+							<div className={`w-4 h-4 rounded border-2 flex items-center justify-center text-[10px] shrink-0 ${isSelected ? "bg-orange-500 border-orange-500 text-white" : "border-muted-foreground/40"}`}>
+								{isSelected && "\u2713"}
+							</div>
+							<span className="text-sm text-foreground truncate">{displayName}</span>
+							{!validating && overlayValid.has(item.outpoint) && (
+								overlayValid.get(item.outpoint) ? (
+									<span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">valid</span>
+								) : (
+									<span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">invalid</span>
+								)
+							)}
+						</div>
+					);
+				})}
+			</div>
+			{selectedOpns.size > 0 && (
+				<div className="mt-3 space-y-2">
+					<Input type="text" placeholder="Destination address..." value={address} onChange={(e) => setAddress(e.target.value)} className="font-mono text-xs" />
+					<div className="flex gap-2">
+						<Button variant="outline" size="sm" className="flex-1" disabled={!address.trim()} onClick={() => onSend(address.trim())}>Send {selectedOpns.size} Domain{selectedOpns.size !== 1 ? "s" : ""}</Button>
+						<Button size="sm" className="flex-1" onClick={onSweep} disabled={!walletConnected} title={walletConnected ? undefined : "Connect BRC-100 wallet to sweep"}>Sweep to Wallet</Button>
+						<Button size="sm" className="bg-red-600 hover:bg-red-700 text-white" onClick={() => { if (window.confirm(`Permanently burn ${selectedOpns.size} domain${selectedOpns.size !== 1 ? "s" : ""}? This cannot be undone.`)) onBurn(); }}>Burn</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

package/src/components/sweep-progress.tsx

@@ -0,0 +1,69 @@
+import { CheckCircle2, Loader2, AlertTriangle, ExternalLink } from "lucide-react";
+import type { SweepResult } from "../lib/sweeper";
+
+const EXPLORER_BASE = "https://bananablocks.com/tx/";
+
+function TxLink({ label, txid }: { label: string; txid: string }) {
+	return (
+		<div className="border-b border-border/30 pb-2 space-y-1">
+			<div className="flex items-center justify-between text-sm">
+				<span className="text-muted-foreground">{label}</span>
+				<a href={`${EXPLORER_BASE}${txid}`} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 flex items-center gap-1">
+					<ExternalLink className="h-3 w-3" />
+					<span className="text-xs">View</span>
+				</a>
+			</div>
+			<code className="text-xs font-mono text-muted-foreground break-all">{txid}</code>
+		</div>
+	);
+}
+
+interface Props {
+	sweeping: boolean;
+	progress: string;
+	result: SweepResult | null;
+}
+
+export function SweepProgress({ sweeping, progress, result }: Props) {
+	if (sweeping) {
+		return (
+			<div className="text-center space-y-4 py-8">
+				<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
+				<p className="text-sm text-muted-foreground animate-pulse">{progress}</p>
+				<p className="text-xs text-destructive/80">Do not close this page.</p>
+			</div>
+		);
+	}
+
+	if (!result) return null;
+
+	const hasErrors = result.errors.length > 0;
+	const hasTxids = result.bsvTxid || result.ordinalTxids.length > 0 || result.bsv21Txids.length > 0;
+
+	return (
+		<div className="space-y-4 py-4">
+			<div className="flex items-center gap-2">
+				{hasErrors ? (
+					<AlertTriangle className="h-5 w-5 text-yellow-500" />
+				) : (
+					<CheckCircle2 className="h-5 w-5 text-green-500" />
+				)}
+				<span className="font-semibold">
+					{hasErrors && !hasTxids ? "Failed" : hasErrors ? "Completed with Errors" : "Complete"}
+				</span>
+			</div>
+
+			{result.bsvTxid && <TxLink label="BSV" txid={result.bsvTxid} />}
+			{result.ordinalTxids.map((txid) => (
+				<TxLink key={txid} label="Ordinals" txid={txid} />
+			))}
+			{result.bsv21Txids.map((txid) => (
+				<TxLink key={txid} label="Tokens" txid={txid} />
+			))}
+
+			{result.errors.map((err) => (
+				<p key={err} className="text-xs text-destructive">{err}</p>
+			))}
+		</div>
+	);
+}

package/src/components/tx-history.tsx

@@ -0,0 +1,63 @@
+import { Loader2, ExternalLink } from "lucide-react";
+
+const EXPLORER_BASE = "https://bananablocks.com/tx/";
+
+export interface TxRecord {
+	label: string;
+	txid: string;
+	timestamp: Date;
+	error?: string;
+}
+
+interface Props {
+	sweeping: boolean;
+	progress: string;
+	history: TxRecord[];
+}
+
+export function TxHistory({ sweeping, progress, history }: Props) {
+	return (
+		<>
+			{sweeping && (
+				<div className="text-center space-y-4 py-8">
+					<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
+					<p className="text-sm text-muted-foreground animate-pulse">{progress}</p>
+					<p className="text-xs text-destructive/80">Do not close this page.</p>
+				</div>
+			)}
+
+			{history.length > 0 && !sweeping && (
+				<div className="border border-border/50 rounded-lg p-3 space-y-2">
+					<div className="text-xs font-medium text-muted-foreground">
+						Transactions ({history.length})
+					</div>
+					<div className="space-y-2 max-h-48 overflow-y-auto">
+						{[...history].reverse().map((tx, i) => (
+							<div key={`${tx.txid}-${i}`} className="flex items-center justify-between gap-2 text-xs">
+								<div className="flex items-center gap-2 min-w-0">
+									<span className={tx.error ? "text-red-500" : "text-green-500"}>
+										{tx.error ? "\u2717" : "\u2713"}
+									</span>
+									<span className="text-muted-foreground truncate">{tx.label}</span>
+								</div>
+								{tx.error ? (
+									<span className="text-red-500 text-[10px] truncate max-w-[200px]">{tx.error}</span>
+								) : (
+									<a
+										href={`${EXPLORER_BASE}${tx.txid}`}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="text-blue-400 hover:text-blue-300 flex items-center gap-1 shrink-0"
+									>
+										<code className="text-[10px] font-mono">{tx.txid.substring(0, 12)}...</code>
+										<ExternalLink className="h-3 w-3" />
+									</a>
+								)}
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+	"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+				outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 [a&]:hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+)
+
+function Badge({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+	return (
+		<span
+			data-slot="badge"
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	)
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+	"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+				outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+)
+
+function Button({
+	className,
+	variant = "default",
+	size = "default",
+	...props
+}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+	return (
+		<button
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card" className={cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className)} {...props} />)
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card-header" className={cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className)} {...props} />)
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />)
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card-description" className={cn("text-sm text-muted-foreground", className)} {...props} />)
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card-action" className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props} />)
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card-content" className={cn("px-6", className)} {...props} />)
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />)
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }