solforge 0.2.5 → 0.2.7

package/src/db/tx-store.ts

@@ -4,27 +4,36 @@ import { accounts } from "./schema/accounts";
 import { addressSignatures } from "./schema/address-signatures";
 import { transactions } from "./schema/transactions";
 import { txAccounts } from "./schema/tx-accounts";
+import { txAccountStates } from "./schema/tx-account-states";
 
 export type InsertTxBundle = {
-	signature: string;
-	slot: number;
-	blockTime?: number;
-	version: 0 | "legacy";
-	fee: number;
-	err: unknown | null;
-	rawBase64: string;
-	preBalances: number[];
-	postBalances: number[];
-	logs: string[];
-	accounts: Array<{
-		address: string;
-		index: number;
-		signer: boolean;
-		writable: boolean;
-		programIdIndex?: number;
-	}>;
-	preTokenBalances?: any[];
-	postTokenBalances?: any[];
+    signature: string;
+    slot: number;
+    blockTime?: number;
+    version: 0 | "legacy";
+    fee: number;
+    err: unknown | null;
+    rawBase64: string;
+    preBalances: number[];
+    postBalances: number[];
+    logs: string[];
+    innerInstructions?: unknown[];
+    computeUnits?: number | bigint | null;
+    returnData?: { programId: string; dataBase64: string } | null;
+    accounts: Array<{
+        address: string;
+        index: number;
+        signer: boolean;
+        writable: boolean;
+        programIdIndex?: number;
+    }>;
+    preTokenBalances?: unknown[];
+    postTokenBalances?: unknown[];
+    accountStates?: Array<{
+        address: string;
+        pre?: Partial<AccountSnapshot> | null;
+        post?: Partial<AccountSnapshot> | null;
+    }>;
 };
 
 export type AccountSnapshot = {
@@ -39,57 +48,81 @@ export type AccountSnapshot = {
 };
 
 export class TxStore {
-	async insertTransactionBundle(bundle: InsertTxBundle): Promise<void> {
-		const errJson = bundle.err ? JSON.stringify(bundle.err) : null;
-		await db.transaction(async (tx) => {
-			await tx
-				.insert(transactions)
-				.values({
-					signature: bundle.signature,
-					slot: bundle.slot,
-					blockTime: bundle.blockTime ?? null,
-					version: String(bundle.version),
-					errJson,
-					fee: bundle.fee,
-					rawBase64: bundle.rawBase64,
-					preBalancesJson: JSON.stringify(bundle.preBalances ?? []),
-					postBalancesJson: JSON.stringify(bundle.postBalances ?? []),
-					logsJson: JSON.stringify(bundle.logs ?? []),
-					preTokenBalancesJson: JSON.stringify(bundle.preTokenBalances ?? []),
-					postTokenBalancesJson: JSON.stringify(bundle.postTokenBalances ?? []),
-				})
-				.onConflictDoNothing();
-
-			if (Array.isArray(bundle.accounts) && bundle.accounts.length > 0) {
-				await tx
-					.insert(txAccounts)
-					.values(
-						bundle.accounts.map((a) => ({
-							signature: bundle.signature,
-							accountIndex: a.index,
-							address: a.address,
-							signer: a.signer ? 1 : 0,
-							writable: a.writable ? 1 : 0,
-							programIdIndex: a.programIdIndex ?? null,
-						})),
-					)
-					.onConflictDoNothing();
-
-				await tx
-					.insert(addressSignatures)
-					.values(
-						bundle.accounts.map((a) => ({
-							address: a.address,
-							signature: bundle.signature,
-							slot: bundle.slot,
-							err: errJson ? 1 : 0,
-							blockTime: bundle.blockTime ?? null,
-						})),
-					)
-					.onConflictDoNothing();
-			}
-		});
-	}
+    async insertTransactionBundle(bundle: InsertTxBundle): Promise<void> {
+        const errJson = bundle.err ? JSON.stringify(bundle.err) : null;
+        await db.transaction(async (tx) => {
+            await tx
+                .insert(transactions)
+                .values({
+                    signature: bundle.signature,
+                    slot: bundle.slot,
+                    blockTime: bundle.blockTime ?? null,
+                    version: String(bundle.version),
+                    errJson,
+                    fee: bundle.fee,
+                    rawBase64: bundle.rawBase64,
+                    preBalancesJson: JSON.stringify(bundle.preBalances ?? []),
+                    postBalancesJson: JSON.stringify(bundle.postBalances ?? []),
+                    logsJson: JSON.stringify(bundle.logs ?? []),
+                    preTokenBalancesJson: JSON.stringify(bundle.preTokenBalances ?? []),
+                    postTokenBalancesJson: JSON.stringify(bundle.postTokenBalances ?? []),
+                    innerInstructionsJson: JSON.stringify(bundle.innerInstructions ?? []),
+                    computeUnits:
+                        bundle.computeUnits == null
+                            ? null
+                            : Number(bundle.computeUnits),
+                    returnDataProgramId: bundle.returnData?.programId ?? null,
+                    returnDataBase64: bundle.returnData?.dataBase64 ?? null,
+                })
+                .onConflictDoNothing();
+
+            if (Array.isArray(bundle.accounts) && bundle.accounts.length > 0) {
+                await tx
+                    .insert(txAccounts)
+                    .values(
+                        bundle.accounts.map((a) => ({
+                            signature: bundle.signature,
+                            accountIndex: a.index,
+                            address: a.address,
+                            signer: a.signer ? 1 : 0,
+                            writable: a.writable ? 1 : 0,
+                            programIdIndex: a.programIdIndex ?? null,
+                        })),
+                    )
+                    .onConflictDoNothing();
+
+                await tx
+                    .insert(addressSignatures)
+                    .values(
+                        bundle.accounts.map((a) => ({
+                            address: a.address,
+                            signature: bundle.signature,
+                            slot: bundle.slot,
+                            err: errJson ? 1 : 0,
+                            blockTime: bundle.blockTime ?? null,
+                        })),
+                    )
+                    .onConflictDoNothing();
+            }
+
+            if (
+                Array.isArray(bundle.accountStates) &&
+                bundle.accountStates.length > 0
+            ) {
+                await tx
+                    .insert(txAccountStates)
+                    .values(
+                        bundle.accountStates.map((s) => ({
+                            signature: bundle.signature,
+                            address: s.address,
+                            preJson: s.pre ? JSON.stringify(s.pre) : null,
+                            postJson: s.post ? JSON.stringify(s.post) : null,
+                        })),
+                    )
+                    .onConflictDoNothing();
+            }
+        });
+    }
 
 	async upsertAccounts(snapshots: AccountSnapshot[]): Promise<void> {
 		if (!Array.isArray(snapshots) || snapshots.length === 0) return;
@@ -133,7 +166,7 @@ export class TxStore {
 
 	async getStatuses(signatures: string[]) {
 		if (!Array.isArray(signatures) || signatures.length === 0)
-			return new Map<string, { slot: number; err: any | null }>();
+			return new Map<string, { slot: number; err: unknown | null }>();
 		const results = await db
 			.select({
 				signature: transactions.signature,
@@ -142,7 +175,7 @@ export class TxStore {
 			})
 			.from(transactions)
 			.where(inArraySafe(transactions.signature, signatures));
-		const map = new Map<string, { slot: number; err: any | null }>();
+		const map = new Map<string, { slot: number; err: unknown | null }>();
 		for (const r of results)
 			map.set(r.signature, {
 				slot: Number(r.slot),
@@ -167,7 +200,7 @@ export class TxStore {
 		}
 		const limit = Math.min(Math.max(opts.limit ?? 1000, 1), 1000);
 
-		const whereClauses = [eq(addressSignatures.address, address)] as any[];
+		const whereClauses = [eq(addressSignatures.address, address)] as unknown[];
 		if (typeof beforeSlot === "number")
 			whereClauses.push(lt(addressSignatures.slot, beforeSlot));
 		if (typeof untilSlot === "number")
@@ -216,7 +249,7 @@ export class TxStore {
 	}
 }
 
-function safeParse<T = any>(s: string): T | null {
+function safeParse<T = unknown>(s: string): T | null {
 	try {
 		return JSON.parse(s) as T;
 	} catch {
@@ -224,6 +257,10 @@ function safeParse<T = any>(s: string): T | null {
 	}
 }
 
-function inArraySafe<T>(col: any, arr: T[]) {
-	return arr.length > 0 ? inArray(col, arr as any) : eq(col, "__never__");
+function inArraySafe<T>(col: unknown, arr: T[]) {
+	return arr.length > 0
+		? // biome-ignore lint/suspicious/noExplicitAny: Drizzle generic typing workaround
+			(inArray as unknown as (c: unknown, a: T[]) => any)(col, arr)
+		: // biome-ignore lint/suspicious/noExplicitAny: Force an always-false predicate without over-constraining types
+			eq(col as any, "__never__");
 }

package/src/gui/public/app.css

@@ -442,11 +442,11 @@ video {
 	line-height: 1.25rem;
 }
 .\!input {
-	background: var(--color-bg-surface) !important;
-	border: 1px solid var(--color-border-subtle) !important;
-	color: var(--color-text-primary) !important;
-	transition: var(--transition-base) !important;
-	font-family: Inter, sans-serif !important;
+	background: var(--color-bg-surface);
+	border: 1px solid var(--color-border-subtle);
+	color: var(--color-text-primary);
+	transition: var(--transition-base);
+	font-family: Inter, sans-serif;
 }
 .input {
 	background: var(--color-bg-surface);
@@ -456,18 +456,18 @@ video {
 	font-family: Inter, sans-serif;
 }
 .\!input:hover {
-	background: var(--color-bg-elevated) !important;
-	border-color: var(--color-border-default) !important;
+	background: var(--color-bg-elevated);
+	border-color: var(--color-border-default);
 }
 .input:hover {
 	background: var(--color-bg-elevated);
 	border-color: var(--color-border-default);
 }
 .\!input:focus {
-	outline: none !important;
-	border-color: var(--color-accent-primary) !important;
-	box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
-	background: var(--color-bg-elevated) !important;
+	outline: none;
+	border-color: var(--color-accent-primary);
+	box-shadow: 0 0 0 3px var(--color-accent-glow);
+	background: var(--color-bg-elevated);
 }
 .input:focus {
 	outline: none;
@@ -476,10 +476,10 @@ video {
 	background: var(--color-bg-elevated);
 }
 .\!input::-moz-placeholder {
-	color: var(--color-text-muted) !important;
+	color: var(--color-text-muted);
 }
 .\!input::placeholder {
-	color: var(--color-text-muted) !important;
+	color: var(--color-text-muted);
 }
 .input::-moz-placeholder {
 	color: var(--color-text-muted);

package/src/gui/server.ts

@@ -107,7 +107,7 @@ export function startGuiServer(opts: GuiStartOptions = {}) {
 	const rpcServer = opts.rpcServer;
 	const rpcUrl = `http://${host}:${rpcPort}`;
 
-	const callRpc = async (method: string, params: any[] = []) => {
+	const callRpc = async (method: string, params: unknown[] = []) => {
 		if (!rpcServer) throw new HttpError(503, "RPC server not available");
 		const response: JsonRpcResponse = await rpcServer.handleRequest({
 			jsonrpc: "2.0",

package/src/gui/src/api.ts

@@ -72,7 +72,7 @@ async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
 	if (!headers.has("content-type") && init.body)
 		headers.set("content-type", "application/json");
 	const response = await fetch(path, { ...init, headers });
-	let payload: any = null;
+	let payload: unknown = null;
 	const text = await response.text();
 	if (text) {
 		try {

package/src/gui/src/app.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import {
 	type ApiConfig,
 	type ApiStatus,
@@ -40,8 +40,9 @@ export function App() {
 			const cfg = await fetchConfig();
 			setConfig(cfg);
 			setBannerError(null);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		}
 	}, []);
 
@@ -50,8 +51,9 @@ export function App() {
 		try {
 			const data = await fetchStatus();
 			setStatus(data);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		} finally {
 			setLoadingStatus(false);
 		}
@@ -62,8 +64,9 @@ export function App() {
 		try {
 			const data = await fetchPrograms();
 			setPrograms(data);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		} finally {
 			setLoadingPrograms(false);
 		}
@@ -74,8 +77,9 @@ export function App() {
 		try {
 			const data = await fetchTokens();
 			setTokens(data);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		} finally {
 			setLoadingTokens(false);
 		}
@@ -141,9 +145,20 @@ export function App() {
 		[loadTokens],
 	);
 
-	const scrollToSection = (sectionId: string) => {
+	type SectionKey = "status" | "actions" | "programs" | "tokens";
+	const uid = useId();
+	const sectionIds: Record<SectionKey, string> = {
+		status: `${uid}-status`,
+		actions: `${uid}-actions`,
+		programs: `${uid}-programs`,
+		tokens: `${uid}-tokens`,
+	};
+
+	const scrollToSection = (sectionId: SectionKey) => {
 		setActiveSection(sectionId);
-		document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" });
+		document
+			.getElementById(sectionIds[sectionId])
+			?.scrollIntoView({ behavior: "smooth" });
 		setSidebarOpen(false);
 	};
 
@@ -151,6 +166,7 @@ export function App() {
 		<div className="min-h-screen relative">
 			{/* Mobile Menu Button */}
 			<button
+				type="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"
@@ -183,6 +199,7 @@ export function App() {
 					{/* Navigation Items */}
 					<nav className="space-y-2">
 						<button
+							type="button"
 							onClick={() => scrollToSection("status")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
 								activeSection === "status"
@@ -194,6 +211,7 @@ export function App() {
 							<span className="font-medium">Network Status</span>
 						</button>
 						<button
+							type="button"
 							onClick={() => scrollToSection("actions")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
 								activeSection === "actions"
@@ -205,6 +223,7 @@ export function App() {
 							<span className="font-medium">Quick Actions</span>
 						</button>
 						<button
+							type="button"
 							onClick={() => scrollToSection("programs")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
 								activeSection === "programs"
@@ -216,6 +235,7 @@ export function App() {
 							<span className="font-medium">Programs</span>
 						</button>
 						<button
+							type="button"
 							onClick={() => scrollToSection("tokens")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
 								activeSection === "tokens"
@@ -250,9 +270,16 @@ export function App() {
 
 			{/* Overlay for mobile */}
 			{sidebarOpen && (
-				<div
+				<button
+					type="button"
 					className="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 lg:hidden"
+					aria-label="Close sidebar overlay"
 					onClick={() => setSidebarOpen(false)}
+					onKeyDown={(e) => {
+						if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+							setSidebarOpen(false);
+						}
+					}}
 				/>
 			)}
 
@@ -270,7 +297,11 @@ export function App() {
 									Manage your local Solana development environment
 								</p>
 							</div>
-							<button onClick={loadStatus} className="btn-secondary">
+							<button
+								type="button"
+								onClick={loadStatus}
+								className="btn-secondary"
+							>
 								<i
 									className={`fas fa-sync-alt ${loadingStatus ? "animate-spin" : ""}`}
 								></i>
@@ -286,6 +317,7 @@ export function App() {
 									<p className="text-sm text-red-300">{bannerError}</p>
 								</div>
 								<button
+									type="button"
 									onClick={() => setBannerError(null)}
 									className="text-red-400 hover:text-red-300"
 									aria-label="Close error"
@@ -309,7 +341,7 @@ export function App() {
 					</div>
 
 					{/* Status Panel */}
-					<div id="status" className="animate-fadeIn scroll-mt-24">
+					<div id={sectionIds.status} className="animate-fadeIn scroll-mt-24">
 						<StatusPanel
 							status={status}
 							loading={loadingStatus}
@@ -319,7 +351,7 @@ export function App() {
 
 					{/* Quick Actions - Optional */}
 					<div
-						id="actions"
+						id={sectionIds.actions}
 						className="glass-panel p-6 animate-fadeIn scroll-mt-24"
 						style={{ animationDelay: "0.1s" }}
 					>
@@ -333,7 +365,7 @@ export function App() {
 					{/* Programs and Tokens Stacked */}
 					<div className="space-y-6">
 						<div
-							id="programs"
+							id={sectionIds.programs}
 							className="animate-fadeIn scroll-mt-24"
 							style={{ animationDelay: "0.2s" }}
 						>
@@ -345,7 +377,7 @@ export function App() {
 							/>
 						</div>
 						<div
-							id="tokens"
+							id={sectionIds.tokens}
 							className="animate-fadeIn scroll-mt-24"
 							style={{ animationDelay: "0.3s" }}
 						>

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

@@ -1,14 +1,20 @@
-import { type ChangeEvent, type FormEvent, useMemo, useState } from "react";
+import {
+	type ChangeEvent,
+	type FormEvent,
+	useId,
+	useMemo,
+	useState,
+} from "react";
 import type { TokenSummary } from "../api";
 
 interface Props {
 	tokens: TokenSummary[];
-	onAirdrop: (address: string, lamports: string) => Promise<string | void>;
+	onAirdrop: (address: string, lamports: string) => Promise<string | undefined>;
 	onMint: (
 		mint: string,
 		owner: string,
 		amountRaw: string,
-	) => Promise<string | void>;
+	) => Promise<string | undefined>;
 }
 
 const SOL_OPTION = {
@@ -53,6 +59,11 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 	const [error, setError] = useState<string | null>(null);
 	const [message, setMessage] = useState<string | null>(null);
 
+	const uid = useId();
+	const recipientId = `${uid}-recipient`;
+	const assetId = `${uid}-asset`;
+	const amountId = `${uid}-amount`;
+
 	const options = useMemo(() => {
 		const tokenOpts = tokens.map((token) => ({
 			value: token.mint,
@@ -87,8 +98,9 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 		try {
 			const note = await submit();
 			setMessage(note);
-		} catch (err: any) {
-			setError(err?.message ?? String(err));
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			setError(message);
 		} finally {
 			setPending(false);
 		}
@@ -116,11 +128,15 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 
 			<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">
+					<label
+						htmlFor={recipientId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Recipient Address
 					</label>
 					<div className="relative">
 						<input
+							id={recipientId}
 							value={recipient}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setRecipient(event.target.value)
@@ -133,11 +149,15 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 				</div>
 
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={assetId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Asset
 					</label>
 					<div className="relative">
 						<select
+							id={assetId}
 							value={asset}
 							onChange={(event: ChangeEvent<HTMLSelectElement>) =>
 								setAsset(event.target.value)
@@ -155,11 +175,15 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 				</div>
 
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={amountId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Amount
 					</label>
 					<div className="relative">
 						<input
+							id={amountId}
 							value={amount}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setAmount(event.target.value)

package/src/gui/src/components/clone-program-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 {
@@ -13,6 +13,9 @@ interface Props {
 }
 
 export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
+	const programIdId = useId();
+	const endpointId = useId();
+	const accountLimitId = useId();
 	const [programId, setProgramId] = useState("");
 	const [endpoint, setEndpoint] = useState("");
 	const [withAccounts, setWithAccounts] = useState(true);
@@ -37,8 +40,12 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 			setProgramId("");
 			setEndpoint("");
 			setAccountsLimit("100");
-		} 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);
 		}
@@ -92,11 +99,15 @@ export function CloneProgramModal({ 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={programIdId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Program ID *
 					</label>
 					<div className="relative">
 						<input
+							id={programIdId}
 							value={programId}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setProgramId(event.target.value)
@@ -109,11 +120,15 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 				</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)
@@ -147,11 +162,15 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 
 					{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">
+							<label
+								htmlFor={accountLimitId}
+								className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+							>
 								Account Limit
 							</label>
 							<div className="relative">
 								<input
+									id={accountLimitId}
 									value={accountsLimit}
 									onChange={(event: ChangeEvent<HTMLInputElement>) =>
 										setAccountsLimit(event.target.value)