add debouncing

src/components/Hero.jsx

@@ -20,6 +20,7 @@ import Loading from '../img/loading.svg';
 export function Hero(props) {
     const contractAddress = props.contractAddress;
     const { isConnected, address } = useAccount();
+    const [throttled, setThrottled] = useState('');
 
     const [tokensMinted, setTokensMinted] = useState(() => {
         const saved = localStorage.getItem('tokensMinted-v3-' + address);
@@ -58,6 +59,14 @@ export function Hero(props) {
     function handleStateChange(obj) {
         setOptions(preState => ({...preState , ...obj}));
     }
+    function throttleStateChange(obj) {
+        const og = throttled;
+        let t = setTimeout(function() {
+            setOptions(preState => ({...preState , ...obj}));
+        }, 600);
+        setThrottled(t);
+        clearTimeout(og);
+    }
     const defOpt = {
         address: contractAddress,
         abi: MainABI,
@@ -283,7 +292,7 @@ export function Hero(props) {
                     && (
                             <>
                                 <input type='number' step='1' defaultValue={1} min={1} max={options.unaboomerMaxMintPerWallet - options.unaboomersMinted} onChange={(v) => {
-                                    handleStateChange({unaboomerAmount: v.target.value});
+                                    throttleStateChange({unaboomerAmount: v.target.value});
                                     radicalizeBoomersWrite.reset()
                                 }}></input>
                                 <button className='doThing' disabled={radicalizeBoomersPrepare.status == 'error'} onClick={() => radicalizeBoomersWrite.write?.()}>
@@ -320,7 +329,7 @@ export function Hero(props) {
                     && (
                             <>
                                 <input type='number' step='1' defaultValue={1} min={1} onChange={(v) => {
-                                    handleStateChange({bombAmount: v.target.value});
+                                    throttleStateChange({bombAmount: v.target.value});
                                     assembleBombsWrite.reset()
                                 }}></input>
                                 <button className='doThing' disabled={assembleBombsPrepare.status == 'error'} onClick={() => assembleBombsWrite.write?.()}>
@@ -349,7 +358,7 @@ export function Hero(props) {
                     && (
                             <>
                                 <input type='number' step='1' defaultValue={1} min={1} max={options.bombBalance} onChange={(v) => {
-                                    handleStateChange({sendBombAmount: v.target.value});
+                                    throttleStateChange({sendBombAmount: v.target.value});
                                     sendBombsWrite.reset()
                                 }}></input>
                                 <button className='doThing' disabled={sendBombsPrepare.status == 'error'} onClick={() => sendBombsWrite.write?.()}>