solforge 0.1.7 → 0.2.1

package/src/gui/src/app.tsx

@@ -0,0 +1,390 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+	type ApiConfig,
+	type ApiStatus,
+	cloneProgram,
+	cloneToken,
+	fetchConfig,
+	fetchPrograms,
+	fetchStatus,
+	fetchTokens,
+	type ProgramSummary,
+	submitAirdrop,
+	submitMint,
+	type TokenSummary,
+} from "./api";
+import { AirdropMintForm } from "./components/airdrop-mint-form";
+import { CloneProgramModal } from "./components/clone-program-modal";
+import { CloneTokenModal } from "./components/clone-token-modal";
+import { ProgramsPanel } from "./components/programs-panel";
+import { StatusPanel } from "./components/status-panel";
+import { TokensPanel } from "./components/tokens-panel";
+import { useInterval } from "./hooks/use-interval";
+
+export function App() {
+	const [config, setConfig] = useState<ApiConfig | null>(null);
+	const [status, setStatus] = useState<ApiStatus | null>(null);
+	const [programs, setPrograms] = useState<ProgramSummary[]>([]);
+	const [tokens, setTokens] = useState<TokenSummary[]>([]);
+	const [loadingStatus, setLoadingStatus] = useState(false);
+	const [loadingPrograms, setLoadingPrograms] = useState(false);
+	const [loadingTokens, setLoadingTokens] = useState(false);
+	const [programModalOpen, setProgramModalOpen] = useState(false);
+	const [tokenModalOpen, setTokenModalOpen] = useState(false);
+	const [bannerError, setBannerError] = useState<string | null>(null);
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+	const [activeSection, setActiveSection] = useState("status");
+
+	const loadConfig = useCallback(async () => {
+		try {
+			const cfg = await fetchConfig();
+			setConfig(cfg);
+			setBannerError(null);
+		} catch (error: any) {
+			setBannerError(error?.message ?? String(error));
+		}
+	}, []);
+
+	const loadStatus = useCallback(async () => {
+		setLoadingStatus(true);
+		try {
+			const data = await fetchStatus();
+			setStatus(data);
+		} catch (error: any) {
+			setBannerError(error?.message ?? String(error));
+		} finally {
+			setLoadingStatus(false);
+		}
+	}, []);
+
+	const loadPrograms = useCallback(async () => {
+		setLoadingPrograms(true);
+		try {
+			const data = await fetchPrograms();
+			setPrograms(data);
+		} catch (error: any) {
+			setBannerError(error?.message ?? String(error));
+		} finally {
+			setLoadingPrograms(false);
+		}
+	}, []);
+
+	const loadTokens = useCallback(async () => {
+		setLoadingTokens(true);
+		try {
+			const data = await fetchTokens();
+			setTokens(data);
+		} catch (error: any) {
+			setBannerError(error?.message ?? String(error));
+		} finally {
+			setLoadingTokens(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		loadConfig();
+		loadStatus();
+		loadPrograms();
+		loadTokens();
+	}, [loadConfig, loadStatus, loadPrograms, loadTokens]);
+
+	useInterval(loadStatus, 5_000);
+
+	const onAirdrop = useCallback(
+		async (address: string, lamports: string) => {
+			const result = await submitAirdrop({ address, lamports });
+			await loadStatus();
+			return result.signature;
+		},
+		[loadStatus],
+	);
+
+	const onMint = useCallback(
+		async (mint: string, owner: string, amountRaw: string) => {
+			const result = await submitMint({ mint, owner, amountRaw });
+			await Promise.all([loadStatus(), loadTokens()]);
+			if (result && typeof result === "object" && "signature" in result) {
+				return (result as { signature?: string }).signature;
+			}
+			return undefined;
+		},
+		[loadStatus, loadTokens],
+	);
+
+	const openProgramModal = () => setProgramModalOpen(true);
+	const openTokenModal = () => setTokenModalOpen(true);
+
+	const handleCloneProgram = useCallback(
+		async (payload: {
+			programId: string;
+			endpoint?: string;
+			withAccounts: boolean;
+			accountsLimit?: number;
+		}) => {
+			await cloneProgram(payload);
+			await loadPrograms();
+		},
+		[loadPrograms],
+	);
+
+	const handleCloneToken = useCallback(
+		async (payload: {
+			mint: string;
+			endpoint?: string;
+			cloneAccounts: boolean;
+			holders?: number;
+			allAccounts?: boolean;
+		}) => {
+			await cloneToken(payload);
+			await loadTokens();
+		},
+		[loadTokens],
+	);
+
+	const scrollToSection = (sectionId: string) => {
+		setActiveSection(sectionId);
+		document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
+		setSidebarOpen(false);
+	};
+
+	return (
+		<div className="min-h-screen relative">
+			{/* Mobile Menu Button */}
+			<button
+				onClick={() => setSidebarOpen(!sidebarOpen)}
+				className="lg:hidden fixed top-4 left-4 z-50 btn-icon bg-gradient-to-br from-purple-600 to-violet-600 border-purple-500/30"
+				aria-label="Menu"
+			>
+				<i className={`fas fa-${sidebarOpen ? 'times' : 'bars'} text-white`}></i>
+			</button>
+
+			{/* Sidebar Navigation */}
+			<aside className={`fixed top-0 left-0 h-full w-72 glass-panel rounded-none border-r border-white/5 z-40 transition-transform duration-300 ${
+				sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+			}`}>
+				<div className="p-6 space-y-8">
+					{/* Logo */}
+					<div className="flex items-center gap-3">
+						<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-600 to-violet-600 flex items-center justify-center shadow-lg">
+							<i className="fas fa-fire text-white text-xl"></i>
+						</div>
+						<div>
+							<h1 className="text-xl font-bold bg-gradient-to-r from-purple-400 to-violet-400 bg-clip-text text-transparent">
+								SolForge
+							</h1>
+							<p className="text-xs text-gray-500">Development Suite</p>
+						</div>
+					</div>
+
+					{/* Navigation Items */}
+					<nav className="space-y-2">
+						<button 
+							onClick={() => scrollToSection('status')}
+							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
+								activeSection === 'status' 
+									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
+									: 'text-gray-400 hover:bg-white/5'
+							}`}
+						>
+							<i className="fas fa-server w-5"></i>
+							<span className="font-medium">Network Status</span>
+						</button>
+						<button 
+							onClick={() => scrollToSection('actions')}
+							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
+								activeSection === 'actions' 
+									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
+									: 'text-gray-400 hover:bg-white/5'
+							}`}
+						>
+							<i className="fas fa-paper-plane w-5"></i>
+							<span className="font-medium">Quick Actions</span>
+						</button>
+						<button 
+							onClick={() => scrollToSection('programs')}
+							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
+								activeSection === 'programs' 
+									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
+									: 'text-gray-400 hover:bg-white/5'
+							}`}
+						>
+							<i className="fas fa-code w-5"></i>
+							<span className="font-medium">Programs</span>
+						</button>
+						<button 
+							onClick={() => scrollToSection('tokens')}
+							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
+								activeSection === 'tokens' 
+									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
+									: 'text-gray-400 hover:bg-white/5'
+							}`}
+						>
+							<i className="fas fa-coins w-5"></i>
+							<span className="font-medium">Tokens</span>
+						</button>
+					</nav>
+
+					{/* Quick Stats */}
+					{config && (
+						<div className="space-y-3">
+							<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Connection</h3>
+							<div className="p-3 rounded-xl bg-white/5 border border-white/10">
+								<div className="flex items-center gap-2 mb-2">
+									<span className="status-dot online"></span>
+									<span className="text-xs text-gray-400">Connected</span>
+								</div>
+								<p className="text-xs text-gray-500 font-mono break-all">{config.rpcUrl}</p>
+							</div>
+						</div>
+					)}
+				</div>
+			</aside>
+
+			{/* Overlay for mobile */}
+			{sidebarOpen && (
+				<div 
+					className="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 lg:hidden"
+					onClick={() => setSidebarOpen(false)}
+				/>
+			)}
+
+			{/* Main Content */}
+			<main className={`transition-all duration-300 lg:ml-72 p-4 md:p-8`}>
+				<div className="max-w-7xl mx-auto space-y-6">
+					{/* Header - Only show on desktop */}
+					<header className="glass-panel p-6 animate-fadeIn hidden md:block">
+						<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+							<div>
+								<h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-violet-400 bg-clip-text text-transparent">
+									SolForge Dashboard
+								</h2>
+								<p className="text-gray-400 mt-1">
+									Manage your local Solana development environment
+								</p>
+							</div>
+							<button 
+								onClick={loadStatus}
+								className="btn-secondary"
+							>
+								<i className={`fas fa-sync-alt ${loadingStatus ? 'animate-spin' : ''}`}></i>
+								<span>Refresh All</span>
+							</button>
+						</div>
+
+						{/* Error Banner */}
+						{bannerError && (
+							<div className="mt-6 p-4 rounded-xl bg-gradient-to-r from-red-500/10 to-pink-500/10 border border-red-500/30 flex items-start gap-3 animate-slideIn">
+								<i className="fas fa-exclamation-circle text-red-400 mt-0.5"></i>
+								<div className="flex-1">
+									<p className="text-sm text-red-300">{bannerError}</p>
+								</div>
+								<button
+									onClick={() => setBannerError(null)}
+									className="text-red-400 hover:text-red-300"
+									aria-label="Close error"
+								>
+									<i className="fas fa-times"></i>
+								</button>
+							</div>
+						)}
+					</header>
+
+					{/* Mobile Header - Simpler version */}
+					<div className="md:hidden mb-4">
+						<h2 className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-violet-400 bg-clip-text text-transparent">
+							SolForge
+						</h2>
+						{bannerError && (
+							<div className="mt-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
+								<p className="text-xs text-red-300">{bannerError}</p>
+							</div>
+						)}
+					</div>
+
+					{/* Status Panel */}
+					<div id="status" className="animate-fadeIn scroll-mt-24">
+						<StatusPanel
+							status={status}
+							loading={loadingStatus}
+							onRefresh={loadStatus}
+						/>
+					</div>
+
+					{/* Quick Actions - Optional */}
+					<div id="actions" className="glass-panel p-6 animate-fadeIn scroll-mt-24" style={{animationDelay: '0.1s'}}>
+						<AirdropMintForm
+							tokens={tokens}
+							onAirdrop={onAirdrop}
+							onMint={onMint}
+						/>
+					</div>
+
+					{/* Programs and Tokens Stacked */}
+					<div className="space-y-6">
+						<div id="programs" className="animate-fadeIn scroll-mt-24" style={{animationDelay: '0.2s'}}>
+							<ProgramsPanel
+								programs={programs}
+								loading={loadingPrograms}
+								onRefresh={loadPrograms}
+								onAdd={openProgramModal}
+							/>
+						</div>
+						<div id="tokens" className="animate-fadeIn scroll-mt-24" style={{animationDelay: '0.3s'}}>
+							<TokensPanel
+								tokens={tokens}
+								loading={loadingTokens}
+								onRefresh={loadTokens}
+								onAdd={openTokenModal}
+							/>
+						</div>
+					</div>
+				</div>
+			</main>
+
+			{/* Modals */}
+			<CloneProgramModal
+				isOpen={programModalOpen}
+				onClose={() => setProgramModalOpen(false)}
+				onSubmit={handleCloneProgram}
+			/>
+			<CloneTokenModal
+				isOpen={tokenModalOpen}
+				onClose={() => setTokenModalOpen(false)}
+				onSubmit={handleCloneToken}
+			/>
+
+			<style jsx>{`
+				@keyframes fadeIn {
+					from {
+						opacity: 0;
+						transform: translateY(20px);
+					}
+					to {
+						opacity: 1;
+						transform: translateY(0);
+					}
+				}
+				
+				@keyframes slideIn {
+					from {
+						opacity: 0;
+						transform: translateX(-20px);
+					}
+					to {
+						opacity: 1;
+						transform: translateX(0);
+					}
+				}
+				
+				.animate-fadeIn {
+					animation: fadeIn 0.6s ease-out forwards;
+					opacity: 0;
+				}
+				
+				.animate-slideIn {
+					animation: slideIn 0.4s ease-out forwards;
+				}
+			`}</style>
+		</div>
+	);
+}

package/src/gui/src/components/airdrop-mint-form.tsx

@@ -0,0 +1,216 @@
+import { type ChangeEvent, type FormEvent, useMemo, useState } from "react";
+import type { TokenSummary } from "../api";
+
+interface Props {
+	tokens: TokenSummary[];
+	onAirdrop: (address: string, lamports: string) => Promise<string | void>;
+	onMint: (
+		mint: string,
+		owner: string,
+		amountRaw: string,
+	) => Promise<string | void>;
+}
+
+const SOL_OPTION = {
+	value: "SOL",
+	label: "SOL (Lamports)",
+	decimals: 9,
+} as const;
+
+const BIGINT_TEN = 10n;
+
+function toBaseUnits(rawInput: string, decimals: number) {
+	const input = rawInput.trim();
+	if (!input) throw new Error("Amount is required");
+	const negative = input.startsWith("-");
+	if (negative) throw new Error("Amount must be positive");
+	const [wholeRaw = "0", fracRaw = ""] = input.split(".");
+	const whole = wholeRaw.replace(/[^0-9]/g, "") || "0";
+	const fracClean = fracRaw.replace(/[^0-9]/g, "");
+	if (fracClean.length > decimals)
+		throw new Error(`Too many decimal places (max ${decimals})`);
+	const scale = BIGINT_TEN ** BigInt(decimals);
+	const wholeValue = BigInt(whole);
+	const fracPadded = decimals === 0 ? "0" : fracClean.padEnd(decimals, "0");
+	const fracValue = BigInt(fracPadded || "0");
+	const total = wholeValue * scale + fracValue;
+	if (total <= 0n) throw new Error("Amount must be greater than zero");
+	return total.toString();
+}
+
+function formatTokenLabel(token: TokenSummary) {
+	const suffix = token.mintAuthority
+		? `Authority ${token.mintAuthority.slice(0, 6)}…`
+		: "No authority";
+	return `${token.mint.slice(0, 6)}…${token.mint.slice(-4)} · ${token.decimals} dec · ${suffix}`;
+}
+
+export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
+	const [asset, setAsset] = useState<string>(SOL_OPTION.value);
+	const [recipient, setRecipient] = useState<string>("");
+	const [amount, setAmount] = useState<string>("1");
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [message, setMessage] = useState<string | null>(null);
+
+	const options = useMemo(() => {
+		const tokenOpts = tokens.map((token) => ({
+			value: token.mint,
+			label: formatTokenLabel(token),
+			decimals: token.decimals,
+		}));
+		return [SOL_OPTION, ...tokenOpts];
+	}, [tokens]);
+
+	const selected = options.find((opt) => opt.value === asset) ?? SOL_OPTION;
+
+	const submit = async () => {
+		if (!recipient.trim()) throw new Error("Recipient address is required");
+		const canonicalRecipient = recipient.trim();
+		if (asset === SOL_OPTION.value) {
+			const lamports = toBaseUnits(amount, SOL_OPTION.decimals);
+			const signature = await onAirdrop(canonicalRecipient, lamports);
+			return signature
+				? `Airdrop signature: ${signature}`
+				: "Airdrop submitted";
+		}
+		const raw = toBaseUnits(amount, selected.decimals);
+		const signature = await onMint(asset, canonicalRecipient, raw);
+		return signature ? `Mint signature: ${signature}` : "Mint submitted";
+	};
+
+	const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setPending(true);
+		setError(null);
+		setMessage(null);
+		try {
+			const note = await submit();
+			setMessage(note);
+		} catch (err: any) {
+			setError(err?.message ?? String(err));
+		} finally {
+			setPending(false);
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
+				<div className="flex items-center gap-3">
+					<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center">
+						<i className="fas fa-paper-plane text-violet-400"></i>
+					</div>
+					<div>
+						<h2 className="text-xl font-bold text-white">Quick Actions</h2>
+						<p className="text-xs text-gray-500">Airdrop SOL or mint tokens</p>
+					</div>
+				</div>
+				<div className="flex items-center gap-2">
+					<span className="badge badge-info">
+						<i className="fas fa-bolt text-xs"></i>
+						<span>Faucet Powered</span>
+					</span>
+				</div>
+			</div>
+			
+			<div className="grid gap-4 lg:grid-cols-3">
+				<div className="space-y-2">
+					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+						Recipient Address
+					</label>
+					<div className="relative">
+						<input
+							value={recipient}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setRecipient(event.target.value)
+							}
+							placeholder="Enter Solana public key"
+							className="input pl-10"
+						/>
+						<i className="fas fa-user 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">
+						Asset
+					</label>
+					<div className="relative">
+						<select
+							value={asset}
+							onChange={(event: ChangeEvent<HTMLSelectElement>) =>
+								setAsset(event.target.value)
+							}
+							className="select pl-10 appearance-none"
+						>
+							{options.map((opt) => (
+								<option key={opt.value} value={opt.value}>
+									{opt.label}
+								</option>
+							))}
+						</select>
+						<i className="fas fa-coins 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">
+						Amount
+					</label>
+					<div className="relative">
+						<input
+							value={amount}
+							onChange={(event: ChangeEvent<HTMLInputElement>) =>
+								setAmount(event.target.value)
+							}
+							placeholder="1.0"
+							inputMode="decimal"
+							className="input pl-10"
+						/>
+						<i className="fas fa-calculator absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
+					</div>
+					<p className="text-xs text-gray-500">
+						{asset === SOL_OPTION.value
+							? "In SOL (9 decimals)"
+							: `In tokens (${selected.decimals} decimals)`}
+					</p>
+				</div>
+			</div>
+			
+			<div className="mt-6 flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
+				<button
+					type="submit"
+					disabled={pending}
+					className={`btn-primary flex-1 sm:flex-initial ${pending ? 'opacity-50 cursor-not-allowed' : ''}`}
+				>
+					{pending ? (
+						<>
+							<div className="spinner"></div>
+							<span>Processing</span>
+						</>
+					) : (
+						<>
+							<i className={`fas fa-${asset === SOL_OPTION.value ? 'parachute-box' : 'coins'}`}></i>
+							<span>{asset === SOL_OPTION.value ? "Airdrop SOL" : "Mint Tokens"}</span>
+						</>
+					)}
+				</button>
+				
+				{error && (
+					<div className="flex-1 flex items-center gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
+						<i className="fas fa-exclamation-circle text-red-400"></i>
+						<p className="text-sm text-red-300">{error}</p>
+					</div>
+				)}
+				
+				{message && (
+					<div className="flex-1 flex items-center gap-2 p-3 rounded-lg bg-green-500/10 border border-green-500/30">
+						<i className="fas fa-check-circle text-green-400"></i>
+						<p className="text-sm text-green-300 font-mono text-xs break-all">{message}</p>
+					</div>
+				)}
+			</div>
+		</form>
+	);
+}