solforge 0.2.4 → 0.2.6

package/src/gui/src/components/clone-token-modal.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, useState } from "react";
+import { type ChangeEvent, useId, useState } from "react";
 import { Modal } from "./modal";
 
 interface Props {
@@ -14,6 +14,9 @@ interface Props {
 }
 
 export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
+	const mintId = useId();
+	const endpointId = useId();
+	const holdersId = useId();
 	const [mint, setMint] = useState("");
 	const [endpoint, setEndpoint] = useState("");
 	// Default OFF to avoid hitting public RPC rate limits by cloning holders.
@@ -42,8 +45,12 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 			setEndpoint("");
 			setHolders("20");
 			setAllAccounts(false);
-		} catch (err: any) {
-			setError(err?.message ?? String(err));
+		} catch (err: unknown) {
+			const message =
+				err && typeof err === "object" && "message" in err
+					? String((err as { message?: unknown }).message)
+					: String(err);
+			setError(message);
 		} finally {
 			setPending(false);
 		}
@@ -77,7 +84,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 							type="button"
 							onClick={handleSubmit}
 							disabled={pending || mint.trim().length === 0}
-							className={`btn-primary ${(pending || mint.trim().length === 0) ? 'opacity-50 cursor-not-allowed' : ''}`}
+							className={`btn-primary ${pending || mint.trim().length === 0 ? "opacity-50 cursor-not-allowed" : ""}`}
 						>
 							{pending ? (
 								<>
@@ -97,11 +104,15 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 		>
 			<div className="space-y-5">
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={mintId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Mint Address *
 					</label>
 					<div className="relative">
 						<input
+							id={mintId}
 							value={mint}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setMint(event.target.value)
@@ -112,13 +123,17 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 						<i className="fas fa-coin absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
 					</div>
 				</div>
-				
+
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={endpointId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						RPC Endpoint (Optional)
 					</label>
 					<div className="relative">
 						<input
+							id={endpointId}
 							value={endpoint}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setEndpoint(event.target.value)
@@ -129,7 +144,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 						<i className="fas fa-globe absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
 					</div>
 				</div>
-				
+
 				<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-3">
 					<label className="flex items-center gap-3 cursor-pointer group">
 						<input
@@ -149,7 +164,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 							</p>
 						</div>
 					</label>
-					
+
 					{cloneAccounts && (
 						<div className="ml-8 space-y-4 pt-3 border-t border-white/5">
 							<label className="flex items-center gap-3 cursor-pointer group">
@@ -170,14 +185,18 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 									</p>
 								</div>
 							</label>
-							
+
 							{!allAccounts && (
 								<div className="space-y-2">
-									<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+									<label
+										htmlFor={holdersId}
+										className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+									>
 										Top Holders Limit
 									</label>
 									<div className="relative">
 										<input
+											id={holdersId}
 											value={holders}
 											onChange={(event: ChangeEvent<HTMLInputElement>) =>
 												setHolders(event.target.value)
@@ -198,7 +217,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 						</div>
 					)}
 				</div>
-				
+
 				{error && (
 					<div className="flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
 						<i className="fas fa-exclamation-circle text-red-400 mt-0.5"></i>
@@ -208,4 +227,4 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 			</div>
 		</Modal>
 	);
-}
+}

package/src/gui/src/components/modal.tsx

@@ -31,27 +31,34 @@ export function Modal({
 	if (!isOpen) return null;
 
 	const colorClasses = {
-		purple: 'from-purple-500/20 to-violet-500/20 text-purple-400',
-		blue: 'from-blue-500/20 to-cyan-500/20 text-blue-400',
-		amber: 'from-amber-500/20 to-orange-500/20 text-amber-400',
-		green: 'from-green-500/20 to-emerald-500/20 text-green-400',
+		purple: "from-purple-500/20 to-violet-500/20 text-purple-400",
+		blue: "from-blue-500/20 to-cyan-500/20 text-blue-400",
+		amber: "from-amber-500/20 to-orange-500/20 text-amber-400",
+		green: "from-green-500/20 to-emerald-500/20 text-green-400",
 	};
 
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fadeIn">
 			{/* Backdrop */}
-			<div 
+			<button
+				type="button"
 				className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+				aria-label="Close modal"
 				onClick={onClose}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" || e.key === " ") onClose();
+				}}
 			/>
-			
+
 			{/* Modal */}
 			<div className="w-full max-w-lg p-0 relative animate-modalSlideIn overflow-hidden rounded-2xl border border-white/20 bg-gray-900/95 backdrop-blur-xl shadow-2xl">
 				{/* Header */}
 				<div className="p-6 border-b border-white/10 bg-gradient-to-r from-white/5 to-transparent">
 					<div className="flex items-center justify-between">
 						<div className="flex items-center gap-3">
-							<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClasses[iconColor as keyof typeof colorClasses]} flex items-center justify-center`}>
+							<div
+								className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClasses[iconColor as keyof typeof colorClasses]} flex items-center justify-center`}
+							>
 								<i className={`fas ${icon}`}></i>
 							</div>
 							<h3 className="text-xl font-bold text-white">{title}</h3>
@@ -66,12 +73,12 @@ export function Modal({
 						</button>
 					</div>
 				</div>
-				
+
 				{/* Content */}
 				<div className="p-6 max-h-[60vh] overflow-y-auto custom-scrollbar">
 					{children}
 				</div>
-				
+
 				{/* Footer */}
 				{footer && (
 					<div className="p-6 border-t border-white/10 bg-gradient-to-r from-white/5 to-transparent">
@@ -79,7 +86,7 @@ export function Modal({
 					</div>
 				)}
 			</div>
-			
+
 			<style jsx>{`
 				@keyframes fadeIn {
 					from {
@@ -124,4 +131,4 @@ export function Modal({
 			`}</style>
 		</div>
 	);
-}
+}

package/src/gui/src/components/programs-panel.tsx

@@ -27,22 +27,20 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 						type="button"
 						onClick={onRefresh}
 						disabled={loading}
-						className={`btn-secondary text-sm ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+						className={`btn-secondary text-sm ${loading ? "opacity-50 cursor-not-allowed" : ""}`}
 					>
-						<i className={`fas fa-sync-alt ${loading ? 'animate-spin' : ''}`}></i>
+						<i
+							className={`fas fa-sync-alt ${loading ? "animate-spin" : ""}`}
+						></i>
 						<span>{loading ? "Refreshing" : "Refresh"}</span>
 					</button>
-					<button
-						type="button"
-						onClick={onAdd}
-						className="btn-primary text-sm"
-					>
+					<button type="button" onClick={onAdd} className="btn-primary text-sm">
 						<i className="fas fa-plus"></i>
 						<span>Add Program</span>
 					</button>
 				</div>
 			</header>
-			
+
 			<div className="overflow-x-auto rounded-xl">
 				{programs.length === 0 ? (
 					<div className="flex flex-col items-center justify-center py-12 text-center">
@@ -50,7 +48,9 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 							<i className="fas fa-code text-blue-500 text-2xl"></i>
 						</div>
 						<p className="text-gray-400 mb-2">No programs deployed</p>
-						<p className="text-sm text-gray-500">Click "Add Program" to clone from mainnet</p>
+						<p className="text-sm text-gray-500">
+							Click "Add Program" to clone from mainnet
+						</p>
 					</div>
 				) : (
 					<table className="table-modern">
@@ -65,12 +65,17 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 						</thead>
 						<tbody>
 							{programs.map((program, index) => (
-								<tr key={program.programId} style={{animationDelay: `${index * 50}ms`}} className="animate-fadeIn">
+								<tr
+									key={program.programId}
+									style={{ animationDelay: `${index * 50}ms` }}
+									className="animate-fadeIn"
+								>
 									<td>
 										<div className="flex items-center gap-2">
 											<i className="fas fa-cube text-blue-400 text-xs"></i>
 											<span className="font-mono text-xs text-blue-300">
-												{program.programId.slice(0, 8)}...{program.programId.slice(-6)}
+												{program.programId.slice(0, 8)}...
+												{program.programId.slice(-6)}
 											</span>
 										</div>
 									</td>
@@ -80,9 +85,15 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 										</span>
 									</td>
 									<td>
-										<span className={`badge ${program.executable ? 'badge-success' : 'badge-warning'}`}>
-											<i className={`fas fa-${program.executable ? 'check' : 'pause'} text-xs`}></i>
-											<span>{program.executable ? "Executable" : "Data Only"}</span>
+										<span
+											className={`badge ${program.executable ? "badge-success" : "badge-warning"}`}
+										>
+											<i
+												className={`fas fa-${program.executable ? "check" : "pause"} text-xs`}
+											></i>
+											<span>
+												{program.executable ? "Executable" : "Data Only"}
+											</span>
 										</span>
 									</td>
 									<td>
@@ -97,7 +108,8 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 										<div className="flex items-center gap-2">
 											<i className="fas fa-wallet text-gray-400 text-xs"></i>
 											<span className="text-gray-300">
-												{(Number(BigInt(program.lamports)) / 1e9).toFixed(4)} SOL
+												{(Number(BigInt(program.lamports)) / 1e9).toFixed(4)}{" "}
+												SOL
 											</span>
 										</div>
 									</td>

package/src/gui/src/components/status-panel.tsx

@@ -18,20 +18,22 @@ export function StatusPanel({ status, loading, onRefresh }: Props) {
 					</div>
 					<div>
 						<h2 className="text-xl font-bold text-white">Network Status</h2>
-						<p className="text-xs text-gray-500">Real-time blockchain metrics</p>
+						<p className="text-xs text-gray-500">
+							Real-time blockchain metrics
+						</p>
 					</div>
 				</div>
 				<button
 					type="button"
 					onClick={onRefresh}
 					disabled={loading}
-					className={`btn-secondary ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+					className={`btn-secondary ${loading ? "opacity-50 cursor-not-allowed" : ""}`}
 				>
-					<i className={`fas fa-sync-alt ${loading ? 'animate-spin' : ''}`}></i>
+					<i className={`fas fa-sync-alt ${loading ? "animate-spin" : ""}`}></i>
 					<span>{loading ? "Refreshing" : "Refresh"}</span>
 				</button>
 			</div>
-			
+
 			{status ? (
 				<>
 					<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -59,19 +61,23 @@ export function StatusPanel({ status, loading, onRefresh }: Props) {
 						<StatusCard
 							title="Faucet Balance"
 							value={`${status.faucet.sol.toFixed(3)} SOL`}
-							subtitle={status.faucet.address.slice(0, 10) + "…"}
+							subtitle={`${status.faucet.address.slice(0, 10)}…`}
 							icon="fa-wallet"
 							color="green"
 						/>
 					</div>
-					
+
 					{status.latestBlockhash && (
 						<div className="mt-6 p-4 rounded-xl bg-white/5 border border-white/10">
 							<div className="flex items-center gap-2 mb-2">
 								<i className="fas fa-fingerprint text-violet-400 text-xs"></i>
-								<span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Latest Blockhash</span>
+								<span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+									Latest Blockhash
+								</span>
 							</div>
-							<p className="text-sm font-mono text-violet-300 break-all">{status.latestBlockhash}</p>
+							<p className="text-sm font-mono text-violet-300 break-all">
+								{status.latestBlockhash}
+							</p>
 						</div>
 					)}
 				</>
@@ -81,7 +87,9 @@ export function StatusPanel({ status, loading, onRefresh }: Props) {
 						<i className="fas fa-server text-gray-500 text-2xl"></i>
 					</div>
 					<p className="text-gray-400 mb-2">No connection to RPC</p>
-					<p className="text-sm text-gray-500">Start the RPC server to see network status</p>
+					<p className="text-sm text-gray-500">
+						Start the RPC server to see network status
+					</p>
 				</div>
 			)}
 		</section>
@@ -93,30 +101,36 @@ interface StatusCardProps {
 	value: string;
 	subtitle?: string;
 	icon: string;
-	color: 'purple' | 'blue' | 'amber' | 'green';
+	color: "purple" | "blue" | "amber" | "green";
 }
 
 const colorClasses = {
-	purple: 'from-purple-500/20 to-violet-500/20 text-purple-400',
-	blue: 'from-blue-500/20 to-cyan-500/20 text-blue-400',
-	amber: 'from-amber-500/20 to-orange-500/20 text-amber-400',
-	green: 'from-green-500/20 to-emerald-500/20 text-green-400',
+	purple: "from-purple-500/20 to-violet-500/20 text-purple-400",
+	blue: "from-blue-500/20 to-cyan-500/20 text-blue-400",
+	amber: "from-amber-500/20 to-orange-500/20 text-amber-400",
+	green: "from-green-500/20 to-emerald-500/20 text-green-400",
 };
 
 function StatusCard({ title, value, subtitle, icon, color }: StatusCardProps) {
 	return (
 		<div className="card group hover:scale-[1.02] transition-all duration-200">
 			<div className="flex items-start justify-between mb-3">
-				<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClasses[color]} flex items-center justify-center group-hover:scale-110 transition-transform`}>
+				<div
+					className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClasses[color]} flex items-center justify-center group-hover:scale-110 transition-transform`}
+				>
 					<i className={`fas ${icon} text-sm`}></i>
 				</div>
 				<span className="status-dot online"></span>
 			</div>
-			<p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">{title}</p>
+			<p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">
+				{title}
+			</p>
 			<p className="text-2xl font-bold text-white">{value}</p>
 			{subtitle && (
-				<p className="mt-2 text-xs text-gray-500 font-mono truncate">{subtitle}</p>
+				<p className="mt-2 text-xs text-gray-500 font-mono truncate">
+					{subtitle}
+				</p>
 			)}
 		</div>
 	);
-}
+}

package/src/gui/src/components/tokens-panel.tsx

@@ -17,9 +17,7 @@ export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
 					</div>
 					<div>
 						<h2 className="text-xl font-bold text-white">Tokens</h2>
-						<p className="text-xs text-gray-500">
-							{tokens.length} SPL tokens
-						</p>
+						<p className="text-xs text-gray-500">{tokens.length} SPL tokens</p>
 					</div>
 				</div>
 				<div className="flex items-center gap-2">
@@ -27,22 +25,20 @@ export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
 						type="button"
 						onClick={onRefresh}
 						disabled={loading}
-						className={`btn-secondary text-sm ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+						className={`btn-secondary text-sm ${loading ? "opacity-50 cursor-not-allowed" : ""}`}
 					>
-						<i className={`fas fa-sync-alt ${loading ? 'animate-spin' : ''}`}></i>
+						<i
+							className={`fas fa-sync-alt ${loading ? "animate-spin" : ""}`}
+						></i>
 						<span>{loading ? "Refreshing" : "Refresh"}</span>
 					</button>
-					<button
-						type="button"
-						onClick={onAdd}
-						className="btn-primary text-sm"
-					>
+					<button type="button" onClick={onAdd} className="btn-primary text-sm">
 						<i className="fas fa-plus"></i>
 						<span>Add Token</span>
 					</button>
 				</div>
 			</header>
-			
+
 			<div className="overflow-x-auto rounded-xl">
 				{tokens.length === 0 ? (
 					<div className="flex flex-col items-center justify-center py-12 text-center">
@@ -50,7 +46,9 @@ export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
 							<i className="fas fa-coins text-amber-500 text-2xl"></i>
 						</div>
 						<p className="text-gray-400 mb-2">No tokens created</p>
-						<p className="text-sm text-gray-500">Click "Add Token" to clone from mainnet</p>
+						<p className="text-sm text-gray-500">
+							Click "Add Token" to clone from mainnet
+						</p>
 					</div>
 				) : (
 					<table className="table-modern">
@@ -65,7 +63,11 @@ export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
 						</thead>
 						<tbody>
 							{tokens.map((token, index) => (
-								<tr key={token.mint} style={{animationDelay: `${index * 50}ms`}} className="animate-fadeIn">
+								<tr
+									key={token.mint}
+									style={{ animationDelay: `${index * 50}ms` }}
+									className="animate-fadeIn"
+								>
 									<td>
 										<div className="flex items-center gap-2">
 											<i className="fas fa-coin text-amber-400 text-xs"></i>
@@ -83,9 +85,7 @@ export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
 										</div>
 									</td>
 									<td>
-										<span className="badge">
-											{token.decimals}
-										</span>
+										<span className="badge">{token.decimals}</span>
 									</td>
 									<td>
 										{token.mintAuthority ? (
@@ -96,12 +96,18 @@ export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
 												</span>
 											</div>
 										) : (
-											<span className="text-gray-500 text-sm">No authority</span>
+											<span className="text-gray-500 text-sm">
+												No authority
+											</span>
 										)}
 									</td>
 									<td>
-										<span className={`badge ${token.isInitialized ? 'badge-success' : 'badge-warning'}`}>
-											<i className={`fas fa-${token.isInitialized ? 'check-circle' : 'clock'} text-xs`}></i>
+										<span
+											className={`badge ${token.isInitialized ? "badge-success" : "badge-warning"}`}
+										>
+											<i
+												className={`fas fa-${token.isInitialized ? "check-circle" : "clock"} text-xs`}
+											></i>
 											<span>{token.isInitialized ? "Active" : "Pending"}</span>
 										</span>
 									</td>