From b2490587d946ede5c0b035fb2cd66e7854021135 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Fri, 26 Jun 2026 16:01:25 -0700 Subject: [PATCH] [Smart Contract Page] Auto-fetch contract methods on valid contract id Debounced effect fetches contract data as soon as a valid contract id is filled in, instead of requiring a button click. Replaces the mount-only auto-fetch and is gated on contract id validation. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../FetchContractMethodPickerWithQuery.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/FormElements/FetchContractMethodPickerWithQuery.tsx b/src/components/FormElements/FetchContractMethodPickerWithQuery.tsx index 6fbd397ff..bdd13d11a 100644 --- a/src/components/FormElements/FetchContractMethodPickerWithQuery.tsx +++ b/src/components/FormElements/FetchContractMethodPickerWithQuery.tsx @@ -142,14 +142,22 @@ export const FetchContractMethodPickerWithQuery = ({ } }, [contractClientError, sacDataError]); - // Auto-fetch contract methods when remounting with a saved contract_id + // Auto-fetch contract methods once a valid contract id is filled in. + // Debounced so we only fetch after the user stops typing/pasting, and + // gated on validation so we never fetch an incomplete/invalid id. This also + // covers remounting with a saved contract_id. useEffect(() => { - if (contractIdInput && value?.function_name && !contractMethods.length) { - fetchContractData(); + if (!contractIdInput || validate.getContractIdError(contractIdInput)) { + return; } - // Run only on mount + + const timeoutId = setTimeout(() => { + fetchContractData(); + }, 500); + + return () => clearTimeout(timeoutId); // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [contractIdInput]); const handleContractIdChange = (e: React.ChangeEvent) => { // reset the error