gf

src/abi/main.json

@@ -68,6 +68,19 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [],
+    "name": "bombSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [
       {
@@ -87,6 +100,32 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [],
+    "name": "boomerKillCount",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "boomerMaxSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [],
     "name": "boomerPrice",
@@ -100,6 +139,32 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [],
+    "name": "boomerSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "boomerSurvivorCount",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [],
     "name": "mailbomb",

src/index.js

@@ -36,7 +36,7 @@ const wagmiClient = createClient({
 ReactDOM.createRoot(document.getElementById("root")).render(
   <ParallaxProvider>
     <WagmiConfig client={wagmiClient}>
-        <RainbowKitProvider chains={chains} initialChain={5}>
+        <RainbowKitProvider chains={chains} initialChain={1337}>
             <Wallet />
             <div className="scrollContainer">
               <AllSections />

src/styles/sections.css

@@ -93,4 +93,13 @@
     background-color: red;
     border-radius: 50%;
     filter: drop-shadow(0 0 4px crimson);
+    animation: pulse .75s ease-out infinite alternate;
+}
+
+@keyframes pulse {
+    0% { opacity: .3 }
+    25% { opacity: .5}
+    50% { opacity: .7 }
+    75% { opacity: .9 }
+    100% { opacity: 1 }
 }

src/template/Sections.jsx

@@ -78,11 +78,11 @@ class GenerateBombOverlay extends React.Component {
         let bombCoords = [];
         for (let i = 0; i < props.amount; i++) {
             let min = Math.ceil(0);
-            let randX = Math.floor(Math.random() * (Math.floor(window.innerWidth) - min) + min);
+            let randX = Math.floor(Math.random() * (Math.floor(100) - min) + min);
-            let randY = Math.floor(Math.random() * (Math.floor(window.innerHeight) - min) + min);
+            let randY = Math.floor(Math.random() * (Math.floor(100) - min) + min);
             let o = {
-                x: `${randX}px`,
+                x: `${randX}%`,
-                y: `${randY}px`
+                y: `${randY}%`
             }
             bombCoords.push(o);
         }
@@ -102,7 +102,8 @@ export function Section3() {
     const [bombPrice, setBombPrice] = useState(ethers.utils.parseEther('.01'));
     const [boomerBalance, setBoomerBalance] = useState(0);
     const [bombBalance, setBombBalance] = useState(0);
-    const [bombSupply, setBombSupply] = useState(100);
+    const [bombSupply, setBombSupply] = useState(0);
+    const [boomerSupply, setBoomerSupply] = useState(0);
     const { isConnected, address } = useAccount();
     useContractReads({
         contracts: [
@@ -131,6 +132,18 @@ export function Section3() {
                 enabled: isConnected,
                 functionName: 'bombBalance',
                 args: [address]
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'boomerSupply'
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'bombSupply'
             }
         ],
         watch: true,
@@ -140,6 +153,8 @@ export function Section3() {
             setBombPrice(data[1].toString());
             setBoomerBalance(data[2].toString());
             setBombBalance(data[3].toString());
+            setBoomerSupply(data[4].toString());
+            setBombSupply(data[5].toString());
         }
     });
     const radicalizeBoomersPrepare = usePrepareContractWrite({
@@ -166,14 +181,13 @@ export function Section3() {
         }
     });
     const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config);
-
     return (
         <section className="section">
             {isConnected &&
             <div className="mintContainer">
                 <div className="mintItem">
                     <h1>Radicalize a Boomer</h1>
-                    <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Unabomber - a Web3 Unaboomer.</p>
+                    <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>
                     <img src={Boomer} alt="" width="120px" />
                     <p>
@@ -188,7 +202,7 @@ export function Section3() {
                 </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 - send to random Unaboomers to kill them.</p>
+                    <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>
                     <img src={Bomb} alt="" width="100px" />
                     <p>
@@ -204,7 +218,7 @@ export function Section3() {
                 <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 123 BOOMR available to kill</p>
+                    <p>There are {boomerSupply} BOOMR available to kill</p>
                     <img src={Explosion} alt="" width="120px" />
                     <p>
                         <AwesomeButton type="secondary" ripple={true} disabled={bombAmount}>