Reset ConfigInput when initialValue changes

apps/contract-verification/src/app/components/ConfigInput.tsx

@@ -14,6 +14,12 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
   const [value, setValue] = useState(initialValue)
   const [enabled, setEnabled] = useState(false)
 
+  // Reset state when initialValue changes
+  useEffect(() => {
+    setValue(initialValue)
+    setEnabled(false)
+  }, [initialValue])
+
   const handleChange = () => {
     setEnabled(true)
   }
@@ -26,7 +32,7 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
   return (
     <div className="form-group">
       <label htmlFor={id}>{label}</label>
-      <input type={secret ? 'password' : 'text'} className="form-control mb-2" id={id} placeholder="0x2738d13E81e..." value={value} onChange={(e) => setValue(e.target.value)} disabled={!enabled} />
+      <input type={secret ? 'password' : 'text'} className="form-control mb-2" id={id} placeholder={`Add ${label}`} value={value} onChange={(e) => setValue(e.target.value)} disabled={!enabled} />
       <div className="d-flex flex-row justify-content-start">
         <button type="button" className="btn btn-secondary mr-3" disabled={enabled} onClick={handleChange}>
           Change

apps/contract-verification/src/app/views/SettingsView.tsx

@@ -30,7 +30,7 @@ export const SettingsView = () => {
       <SearchableChainDropdown label="Chain" id="network-dropdown" setSelectedChain={setSelectedChain} selectedChain={selectedChain} />
 
       {selectedChain && (
-        <>
+        <div>
           <div className="pt-2">
             <span className="font-weight-bold">Sourcify</span>
             <ConfigInput label="API URL" id="sourcify-api-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.apiUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'apiUrl', result)} />
@@ -46,7 +46,7 @@ export const SettingsView = () => {
             <span className="font-weight-bold">Blockscout</span>
             <ConfigInput label="Instance URL" id="blockscout-api-url" secret={false} initialValue={chainSettings.verifiers['Blockscout']?.apiUrl ?? ''} saveResult={(result) => handleChange('Blockscout', 'apiUrl', result)} />
           </div>
-        </>
+        </div>
       )}
     </>
   )