solforge 0.1.7 → 0.2.1

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

@@ -0,0 +1,183 @@
+import { type ChangeEvent, useState } from "react";
+import { Modal } from "./modal";
+
+interface Props {
+	isOpen: boolean;
+	onClose: () => void;
+	onSubmit: (payload: {
+		programId: string;
+		endpoint?: string;
+		withAccounts: boolean;
+		accountsLimit?: number;
+	}) => Promise<void>;
+}
+
+export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
+	const [programId, setProgramId] = useState("");
+	const [endpoint, setEndpoint] = useState("");
+	const [withAccounts, setWithAccounts] = useState(true);
+	const [accountsLimit, setAccountsLimit] = useState("100");
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleSubmit = async () => {
+		setPending(true);
+		setError(null);
+		try {
+			await onSubmit({
+				programId: programId.trim(),
+				endpoint: endpoint.trim() ? endpoint.trim() : undefined,
+				withAccounts,
+				accountsLimit:
+					withAccounts && accountsLimit.trim()
+						? Number(accountsLimit)
+						: undefined,
+			});
+			onClose();
+			setProgramId("");
+			setEndpoint("");
+			setAccountsLimit("100");
+		} catch (err: any) {
+			setError(err?.message ?? String(err));
+		} finally {
+			setPending(false);
+		}
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onClose={() => {
+				if (!pending) onClose();
+			}}
+			title="Clone Program"
+			icon="fa-code"
+			iconColor="blue"
+			footer={
+				<div className="flex justify-between items-center">
+					<div className="text-xs text-gray-500">
+						<i className="fas fa-info-circle mr-1"></i>
+						Clone from Solana mainnet or custom RPC
+					</div>
+					<div className="flex gap-3">
+						<button
+							type="button"
+							onClick={() => !pending && onClose()}
+							disabled={pending}
+							className="btn-secondary"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onClick={handleSubmit}
+							disabled={pending || programId.trim().length === 0}
+							className={`btn-primary ${(pending || programId.trim().length === 0) ? 'opacity-50 cursor-not-allowed' : ''}`}
+						>
+							{pending ? (
+								<>
+									<div className="spinner"></div>
+									<span>Cloning Program</span>
+								</>
+							) : (
+								<>
+									<i className="fas fa-download"></i>
+									<span>Clone Program</span>
+								</>
+							)}
+						</button>
+					</div>
+				</div>
+			}
+		>
+			<div className="space-y-5">
+				<div className="space-y-2">
+					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+						Program ID *
+					</label>
+					<div className="relative">
+						<input
+							value={programId}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setProgramId(event.target.value)
+							}
+							placeholder="Enter program public key (e.g., TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA)"
+							className="input pl-10 font-mono text-sm"
+						/>
+						<i className="fas fa-fingerprint 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">
+						RPC Endpoint (Optional)
+					</label>
+					<div className="relative">
+						<input
+							value={endpoint}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setEndpoint(event.target.value)
+							}
+							placeholder="https://api.mainnet-beta.solana.com (default)"
+							className="input pl-10"
+						/>
+						<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
+							type="checkbox"
+							checked={withAccounts}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setWithAccounts(event.target.checked)
+							}
+							className="checkbox"
+						/>
+						<div>
+							<span className="text-sm text-white group-hover:text-purple-300 transition-colors">
+								Clone Program Accounts
+							</span>
+							<p className="text-xs text-gray-500 mt-0.5">
+								Include accounts owned by this program
+							</p>
+						</div>
+					</label>
+					
+					{withAccounts && (
+						<div className="ml-8 space-y-2 pt-2 border-t border-white/5">
+							<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+								Account Limit
+							</label>
+							<div className="relative">
+								<input
+									value={accountsLimit}
+									onChange={(event: ChangeEvent<HTMLInputElement>) =>
+										setAccountsLimit(event.target.value)
+									}
+									placeholder="100"
+									type="number"
+									min="1"
+									max="1000"
+									className="input pl-10"
+								/>
+								<i className="fas fa-list-ol absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
+							</div>
+							<p className="text-xs text-gray-500">
+								Maximum number of accounts to clone
+							</p>
+						</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>
+						<p className="text-sm text-red-300">{error}</p>
+					</div>
+				)}
+			</div>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,211 @@
+import { type ChangeEvent, useState } from "react";
+import { Modal } from "./modal";
+
+interface Props {
+	isOpen: boolean;
+	onClose: () => void;
+	onSubmit: (payload: {
+		mint: string;
+		endpoint?: string;
+		cloneAccounts: boolean;
+		holders?: number;
+		allAccounts?: boolean;
+	}) => Promise<void>;
+}
+
+export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
+	const [mint, setMint] = useState("");
+	const [endpoint, setEndpoint] = useState("");
+	// Default OFF to avoid hitting public RPC rate limits by cloning holders.
+	const [cloneAccounts, setCloneAccounts] = useState(false);
+	const [holders, setHolders] = useState("20");
+	const [allAccounts, setAllAccounts] = useState(false);
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleSubmit = async () => {
+		setPending(true);
+		setError(null);
+		try {
+			await onSubmit({
+				mint: mint.trim(),
+				endpoint: endpoint.trim() ? endpoint.trim() : undefined,
+				cloneAccounts,
+				holders:
+					cloneAccounts && !allAccounts && holders.trim()
+						? Number(holders)
+						: undefined,
+				allAccounts,
+			});
+			onClose();
+			setMint("");
+			setEndpoint("");
+			setHolders("20");
+			setAllAccounts(false);
+		} catch (err: any) {
+			setError(err?.message ?? String(err));
+		} finally {
+			setPending(false);
+		}
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onClose={() => {
+				if (!pending) onClose();
+			}}
+			title="Clone Token"
+			icon="fa-coins"
+			iconColor="amber"
+			footer={
+				<div className="flex justify-between items-center">
+					<div className="text-xs text-gray-500">
+						<i className="fas fa-info-circle mr-1"></i>
+						Clone SPL tokens from mainnet
+					</div>
+					<div className="flex gap-3">
+						<button
+							type="button"
+							onClick={() => !pending && onClose()}
+							disabled={pending}
+							className="btn-secondary"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onClick={handleSubmit}
+							disabled={pending || mint.trim().length === 0}
+							className={`btn-primary ${(pending || mint.trim().length === 0) ? 'opacity-50 cursor-not-allowed' : ''}`}
+						>
+							{pending ? (
+								<>
+									<div className="spinner"></div>
+									<span>Cloning Token</span>
+								</>
+							) : (
+								<>
+									<i className="fas fa-download"></i>
+									<span>Clone Token</span>
+								</>
+							)}
+						</button>
+					</div>
+				</div>
+			}
+		>
+			<div className="space-y-5">
+				<div className="space-y-2">
+					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+						Mint Address *
+					</label>
+					<div className="relative">
+						<input
+							value={mint}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setMint(event.target.value)
+							}
+							placeholder="Enter token mint address (e.g., EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v)"
+							className="input pl-10 font-mono text-sm"
+						/>
+						<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">
+						RPC Endpoint (Optional)
+					</label>
+					<div className="relative">
+						<input
+							value={endpoint}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setEndpoint(event.target.value)
+							}
+							placeholder="https://api.mainnet-beta.solana.com (default)"
+							className="input pl-10"
+						/>
+						<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
+							type="checkbox"
+							checked={cloneAccounts}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setCloneAccounts(event.target.checked)
+							}
+							className="checkbox"
+						/>
+						<div>
+							<span className="text-sm text-white group-hover:text-purple-300 transition-colors">
+								Clone Token Accounts
+							</span>
+							<p className="text-xs text-gray-500 mt-0.5">
+								Include holder accounts for this token
+							</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">
+								<input
+									type="checkbox"
+									checked={allAccounts}
+									onChange={(event: ChangeEvent<HTMLInputElement>) =>
+										setAllAccounts(event.target.checked)
+									}
+									className="checkbox"
+								/>
+								<div>
+									<span className="text-sm text-white group-hover:text-purple-300 transition-colors">
+										Clone All Accounts
+									</span>
+									<p className="text-xs text-gray-500 mt-0.5">
+										Warning: This may be slow for popular tokens
+									</p>
+								</div>
+							</label>
+							
+							{!allAccounts && (
+								<div className="space-y-2">
+									<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+										Top Holders Limit
+									</label>
+									<div className="relative">
+										<input
+											value={holders}
+											onChange={(event: ChangeEvent<HTMLInputElement>) =>
+												setHolders(event.target.value)
+											}
+											placeholder="20"
+											type="number"
+											min="1"
+											max="100"
+											className="input pl-10"
+										/>
+										<i className="fas fa-users absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
+									</div>
+									<p className="text-xs text-gray-500">
+										Number of top holders to clone
+									</p>
+								</div>
+							)}
+						</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>
+						<p className="text-sm text-red-300">{error}</p>
+					</div>
+				)}
+			</div>
+		</Modal>
+	);
+}

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>
+	);
+}