solforge 0.1.7 → 0.2.0

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

@@ -0,0 +1,127 @@
+import { type ReactNode, useEffect } from "react";
+
+interface ModalProps {
+	isOpen: boolean;
+	title: string;
+	onClose: () => void;
+	children: ReactNode;
+	footer?: ReactNode;
+	icon?: string;
+	iconColor?: string;
+}
+
+export function Modal({
+	isOpen,
+	title,
+	onClose,
+	children,
+	footer,
+	icon = "fa-window-maximize",
+	iconColor = "purple",
+}: ModalProps) {
+	useEffect(() => {
+		if (!isOpen || typeof window === "undefined") return undefined;
+		const handler = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [isOpen, onClose]);
+
+	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',
+	};
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fadeIn">
+			{/* Backdrop */}
+			<div 
+				className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+				onClick={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`}>
+								<i className={`fas ${icon}`}></i>
+							</div>
+							<h3 className="text-xl font-bold text-white">{title}</h3>
+						</div>
+						<button
+							type="button"
+							onClick={onClose}
+							className="btn-icon hover:bg-red-500/20 hover:border-red-500/30 hover:text-red-400"
+							aria-label="Close modal"
+						>
+							<i className="fas fa-times"></i>
+						</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">
+						{footer}
+					</div>
+				)}
+			</div>
+			
+			<style jsx>{`
+				@keyframes fadeIn {
+					from {
+						opacity: 0;
+					}
+					to {
+						opacity: 1;
+					}
+				}
+				
+				@keyframes modalSlideIn {
+					from {
+						opacity: 0;
+						transform: scale(0.95) translateY(20px);
+					}
+					to {
+						opacity: 1;
+						transform: scale(1) translateY(0);
+					}
+				}
+				
+				.animate-fadeIn {
+					animation: fadeIn 0.2s ease-out;
+				}
+				
+				.animate-modalSlideIn {
+					animation: modalSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+				}
+				
+				.custom-scrollbar::-webkit-scrollbar {
+					width: 8px;
+				}
+				
+				.custom-scrollbar::-webkit-scrollbar-track {
+					background: transparent;
+				}
+				
+				.custom-scrollbar::-webkit-scrollbar-thumb {
+					background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-secondary));
+					border-radius: 4px;
+				}
+			`}</style>
+		</div>
+	);
+}

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

@@ -0,0 +1,112 @@
+import type { ProgramSummary } from "../api";
+
+interface Props {
+	programs: ProgramSummary[];
+	loading: boolean;
+	onRefresh: () => void;
+	onAdd: () => void;
+}
+
+export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
+	return (
+		<section className="glass-panel p-6">
+			<header className="flex flex-wrap items-center justify-between gap-3 mb-6">
+				<div className="flex items-center gap-3">
+					<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center">
+						<i className="fas fa-code text-blue-400"></i>
+					</div>
+					<div>
+						<h2 className="text-xl font-bold text-white">Programs</h2>
+						<p className="text-xs text-gray-500">
+							{programs.length} deployed programs
+						</p>
+					</div>
+				</div>
+				<div className="flex items-center gap-2">
+					<button
+						type="button"
+						onClick={onRefresh}
+						disabled={loading}
+						className={`btn-secondary text-sm ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+					>
+						<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"
+					>
+						<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">
+						<div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-600/20 to-cyan-600/20 flex items-center justify-center mb-4">
+							<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>
+					</div>
+				) : (
+					<table className="table-modern">
+						<thead>
+							<tr>
+								<th>Program ID</th>
+								<th>Owner</th>
+								<th>Status</th>
+								<th>Data Size</th>
+								<th>Balance</th>
+							</tr>
+						</thead>
+						<tbody>
+							{programs.map((program, index) => (
+								<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)}
+											</span>
+										</div>
+									</td>
+									<td>
+										<span className="font-mono text-xs text-gray-400">
+											{program.owner.slice(0, 8)}...
+										</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>
+									</td>
+									<td>
+										<div className="flex items-center gap-2">
+											<i className="fas fa-database text-gray-400 text-xs"></i>
+											<span className="text-gray-300">
+												{(program.dataLen / 1024).toFixed(1)} KB
+											</span>
+										</div>
+									</td>
+									<td>
+										<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
+											</span>
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				)}
+			</div>
+		</section>
+	);
+}

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

@@ -0,0 +1,122 @@
+import type { ApiStatus } from "../api";
+
+interface Props {
+	status: ApiStatus | null;
+	loading: boolean;
+	onRefresh: () => void;
+}
+
+const formatter = new Intl.NumberFormat("en-US");
+
+export function StatusPanel({ status, loading, onRefresh }: Props) {
+	return (
+		<section className="glass-panel p-6">
+			<div className="flex items-center justify-between mb-6">
+				<div className="flex items-center gap-3">
+					<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center">
+						<i className="fas fa-server text-green-400"></i>
+					</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>
+					</div>
+				</div>
+				<button
+					type="button"
+					onClick={onRefresh}
+					disabled={loading}
+					className={`btn-secondary ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+				>
+					<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">
+						<StatusCard
+							title="Current Slot"
+							value={formatter.format(status.slot)}
+							subtitle={`Raw: ${status.slotBigint}`}
+							icon="fa-cube"
+							color="purple"
+						/>
+						<StatusCard
+							title="Block Height"
+							value={formatter.format(status.blockHeight)}
+							subtitle={`Raw: ${status.blockHeightBigint}`}
+							icon="fa-layer-group"
+							color="blue"
+						/>
+						<StatusCard
+							title="Transactions"
+							value={formatter.format(status.txCount)}
+							subtitle={`Raw: ${status.txCountBigint}`}
+							icon="fa-exchange-alt"
+							color="amber"
+						/>
+						<StatusCard
+							title="Faucet Balance"
+							value={`${status.faucet.sol.toFixed(3)} SOL`}
+							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>
+							</div>
+							<p className="text-sm font-mono text-violet-300 break-all">{status.latestBlockhash}</p>
+						</div>
+					)}
+				</>
+			) : (
+				<div className="flex flex-col items-center justify-center py-12 text-center">
+					<div className="w-16 h-16 rounded-full bg-gradient-to-br from-gray-600/20 to-gray-700/20 flex items-center justify-center mb-4">
+						<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>
+				</div>
+			)}
+		</section>
+	);
+}
+
+interface StatusCardProps {
+	title: string;
+	value: string;
+	subtitle?: string;
+	icon: string;
+	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',
+};
+
+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`}>
+					<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-2xl font-bold text-white">{value}</p>
+			{subtitle && (
+				<p className="mt-2 text-xs text-gray-500 font-mono truncate">{subtitle}</p>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,116 @@
+import type { TokenSummary } from "../api";
+
+interface Props {
+	tokens: TokenSummary[];
+	loading: boolean;
+	onRefresh: () => void;
+	onAdd: () => void;
+}
+
+export function TokensPanel({ tokens, loading, onRefresh, onAdd }: Props) {
+	return (
+		<section className="glass-panel p-6">
+			<header className="flex flex-wrap items-center justify-between gap-3 mb-6">
+				<div className="flex items-center gap-3">
+					<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center">
+						<i className="fas fa-coins text-amber-400"></i>
+					</div>
+					<div>
+						<h2 className="text-xl font-bold text-white">Tokens</h2>
+						<p className="text-xs text-gray-500">
+							{tokens.length} SPL tokens
+						</p>
+					</div>
+				</div>
+				<div className="flex items-center gap-2">
+					<button
+						type="button"
+						onClick={onRefresh}
+						disabled={loading}
+						className={`btn-secondary text-sm ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+					>
+						<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"
+					>
+						<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">
+						<div className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-600/20 to-orange-600/20 flex items-center justify-center mb-4">
+							<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>
+					</div>
+				) : (
+					<table className="table-modern">
+						<thead>
+							<tr>
+								<th>Token Mint</th>
+								<th>Supply</th>
+								<th>Decimals</th>
+								<th>Authority</th>
+								<th>Status</th>
+							</tr>
+						</thead>
+						<tbody>
+							{tokens.map((token, index) => (
+								<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>
+											<span className="font-mono text-xs text-amber-300">
+												{token.mint.slice(0, 8)}...{token.mint.slice(-6)}
+											</span>
+										</div>
+									</td>
+									<td>
+										<div className="flex items-center gap-2">
+											<i className="fas fa-chart-line text-gray-400 text-xs"></i>
+											<span className="text-gray-300 font-semibold">
+												{token.uiAmountString}
+											</span>
+										</div>
+									</td>
+									<td>
+										<span className="badge">
+											{token.decimals}
+										</span>
+									</td>
+									<td>
+										{token.mintAuthority ? (
+											<div className="flex items-center gap-2">
+												<i className="fas fa-key text-purple-400 text-xs"></i>
+												<span className="font-mono text-xs text-purple-300">
+													{token.mintAuthority.slice(0, 8)}...
+												</span>
+											</div>
+										) : (
+											<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>{token.isInitialized ? "Active" : "Pending"}</span>
+										</span>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				)}
+			</div>
+		</section>
+	);
+}

package/src/gui/src/hooks/use-interval.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+
+// Minimal interval hook to avoid stale closures
+export function useInterval(callback: () => void, delay: number | null) {
+	const savedCallback = useRef(callback);
+
+	useEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+
+	useEffect(() => {
+		if (delay === null) return undefined;
+		const tick = () => savedCallback.current();
+		const id = setInterval(tick, delay);
+		return () => clearInterval(id);
+	}, [delay]);
+}