From cc7355b38ee41461545bc7756e8cfed0765aec60 Mon Sep 17 00:00:00 2001
From: lza_menace <lza_menace@protonmail.com>
Date: Thu, 29 Dec 2022 08:52:50 -0800
Subject: [PATCH] update

---
 src/template/Sections.jsx | 85 ++++++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx
index d28625d..6cdfc36 100644
--- a/src/template/Sections.jsx
+++ b/src/template/Sections.jsx
@@ -118,17 +118,22 @@ class GameMap extends React.Component {
 }
 
 function Section3() {
-    const [boomerAmount, setBoomerAmount] = useState(1);
-    const [bombAmount, setBombAmount] = useState(1);
-    const [sendBombAmount, setSendBombAmount] = useState(1);
-    const [boomerPrice, setBoomerPrice] = useState(ethers.utils.parseEther('.01'));
-    const [bombPrice, setBombPrice] = useState(ethers.utils.parseEther('.01'));
-    const [boomerBalance, setBoomerBalance] = useState(0);
-    const [bombBalance, setBombBalance] = useState(0);
-    const [bombSupply, setBombSupply] = useState(0);
-    const [boomerSupply, setBoomerSupply] = useState(0);
-    const [bombsExploded, setBombsExploded] = useState(0);
-    const [boomerKillCount, setBoomerKillCount] = useState(0);
+    const [options, setOptions] = useState({ 
+        unaboomerAmount: 1,
+        bombAmount: 1,
+        sendBombAmount: 1,
+        unaboomerPrice: ethers.utils.parseEther('.01'),
+        bombPrice: ethers.utils.parseEther('.01'),
+        unaboomerBalance: 0,
+        bombBalance: 0,
+        unaboomerSupply: 0,
+        bombSupply: 0,
+        bombsExploded: 0,
+        unaboomersKilled: 0
+    });
+    const handleStateChange = (obj) =>{
+        setOptions(preState => ({...preState , obj}))
+    }
     const { isConnected, address } = useAccount();
     useContractReads({
         contracts: [
@@ -136,7 +141,7 @@ function Section3() {
                 address: contractAddress,
                 abi: MainABI,
                 enabled: isConnected,
-                functionName: 'boomerPrice'
+                functionName: 'unaboomerPrice'
             },
             {
                 address: contractAddress,
@@ -148,7 +153,7 @@ function Section3() {
                 address: contractAddress,
                 abi: MainABI,
                 enabled: isConnected,
-                functionName: 'boomerBalance',
+                functionName: 'unaboomerBalance',
                 args: [address]
             },
             {
@@ -162,7 +167,7 @@ function Section3() {
                 address: contractAddress,
                 abi: MainABI,
                 enabled: isConnected,
-                functionName: 'boomerSupply'
+                functionName: 'unaboomerSupply'
             },
             {
                 address: contractAddress,
@@ -180,19 +185,23 @@ function Section3() {
                 address: contractAddress,
                 abi: MainABI,
                 enabled: isConnected,
-                functionName: 'boomerKillCount'
+                functionName: 'unaboomersKilled'
             }
         ],
         watch: true,
+        cacheTime: 5000,
         onSuccess(data) {
-            setBoomerPrice(data[0].toString());
-            setBombPrice(data[1].toString());
-            setBoomerBalance(data[2].toString());
-            setBombBalance(data[3].toString());
-            setBoomerSupply(data[4].toString());
-            setBombSupply(data[5].toString());
-            setBombsExploded(data[6].toString());
-            setBoomerKillCount(data[7].toString());
+            handleStateChange({
+                unaboomerPrice: data[0].toString(),
+                bombPrice: data[1].toString(),
+                unaboomerBalance: data[2].toString(),
+                bombBalance: data[3].toString(),
+                unaboomerSupply: data[4].toString(),
+                bombSupply: data[5].toString(),
+                bombsExploded: data[6].toString(),
+                unaboomersKilled: data[7].toString(),
+            });
+            console.log(options)
         }
     });
     const radicalizeBoomersPrepare = usePrepareContractWrite({
@@ -200,10 +209,10 @@ function Section3() {
         abi: MainABI,
         enabled: isConnected,
         functionName: 'radicalizeBoomers',
-        args: [boomerAmount],
+        args: [options.unaboomerAmount],
         overrides: {
             from: address,
-            value: BigNumber.from((boomerPrice * boomerAmount).toString())
+            value: BigNumber.from((options.unaboomerPrice * options.unaboomerAmount).toString())
         }
     });
     const radicalizeBoomersWrite = useContractWrite(radicalizeBoomersPrepare.config);
@@ -212,10 +221,10 @@ function Section3() {
         abi: MainABI,
         enabled: isConnected,
         functionName: 'assembleBombs',
-        args: [bombAmount],
+        args: [options.bombAmount],
         overrides: {
             from: address,
-            value: BigNumber.from((bombPrice * bombAmount).toString())
+            value: BigNumber.from((options.bombPrice * options.bombAmount).toString())
         }
     });
     const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config);
@@ -224,7 +233,7 @@ function Section3() {
         abi: MainABI,
         enabled: isConnected,
         functionName: 'sendBombs',
-        args: [sendBombAmount]
+        args: [options.sendBombAmount]
     });
     const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
     return (
@@ -235,41 +244,41 @@ function Section3() {
                     <div className="mintItem">
                         <h1>Radicalize a Boomer</h1>
                         <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
-                        <p>You have {boomerBalance} BOOMR</p>
+                        <p>You have {options.unaboomerBalance} BOOMR</p>
                         <img src={Boomer} alt="" width="120px" />
                         <p>
                             <AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
-                                {radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
+                                {radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</> || <>mint {options.unaboomerAmount} ({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} Ξ)</>}
                             </AwesomeButton>
                         </p>
-                        <Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
+                        <Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({unaboomerAmount: v})} />
                     </div>
                     <div className="mintItem">
                         <h1>Assemble Bombs</h1>
                         <p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them.</p>
-                        <p>You have {bombBalance} BOMB</p>
+                        <p>You have {options.bombBalance} BOMB</p>
                         <img src={Bomb} alt="" width="100px" />
                         <p>
                             <AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
-                                {assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
+                                {assembleBombsWrite.isLoading && <>minting {options.bombAmount}</> || <>mint {options.bombAmount} ({ethers.utils.formatEther((options.bombPrice * options.bombAmount).toString())} Ξ)</>}
                             </AwesomeButton>
                         </p>
-                        <Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
+                        <Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({bombAmount: v})} />
                     </div>
                     <div className="mintItem">
                         <h1>Send Bombs</h1>
                         <p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process.</p>
-                        <p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
+                        <p>There are {options.unaboomerSupply - options.unaboomersKilled} BOOMR available to kill</p>
                         <img src={Explosion} alt="" width="120px" />
                         <p>
                             <AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
-                                send {sendBombAmount} (~0 Ξ)
+                                send {options.sendBombAmount} (~0 Ξ)
                             </AwesomeButton>
                         </p>
-                        <Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
+                        <Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({sendBombAmount: v})} />
                     </div>
                 </div>
-                <GameMap bombSupply={bombSupply} bombBalance={bombBalance} bombsExploded={bombsExploded} />
+                <GameMap bombSupply={options.bombSupply} bombBalance={options.bombBalance} bombsExploded={options.bombsExploded} />
             </>
             ||
             <div id="heroText">