integrating into contract

src/abi/main.json

@@ -0,0 +1,251 @@
+[
+  {
+    "inputs": [],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "user",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "assembleBombs",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_address",
+        "type": "address"
+      }
+    ],
+    "name": "bombBalance",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "bombPrice",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_address",
+        "type": "address"
+      }
+    ],
+    "name": "boomerBalance",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "boomerPrice",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "mailbomb",
+    "outputs": [
+      {
+        "internalType": "contract Mailbomb",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "radicalizeBoomers",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "sendBombs",
+    "outputs": [
+      {
+        "internalType": "bool[]",
+        "name": "results",
+        "type": "bool[]"
+      },
+      {
+        "internalType": "uint256[]",
+        "name": "tokensKilled",
+        "type": "uint256[]"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_price",
+        "type": "uint256"
+      }
+    ],
+    "name": "setBombPrice",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_price",
+        "type": "uint256"
+      }
+    ],
+    "name": "setBoomerPrice",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_address",
+        "type": "address"
+      }
+    ],
+    "name": "setMailbombContract",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_address",
+        "type": "address"
+      }
+    ],
+    "name": "setUnaboomerContract",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "unaboomer",
+    "outputs": [
+      {
+        "internalType": "contract Unaboomer",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "withdraw",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

src/template/Sections.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ethers } from 'ethers';
+import { useAccount, useContractReads, usePrepareContractWrite, useContractWrite } from 'wagmi';
 import Typewriter from 'react-ts-typewriter';
 import Slider from 'rc-slider';
 import { Parallax } from 'react-parallax';
@@ -12,11 +13,15 @@ import Newspapers from '../img/newspapers.png';
 import Bomb from '../img/bomb.png';
 import Explosion from '../img/explosion.png';
 import SeizedItems from '../img/seizeditems.png';
+import MainABI from '../abi/main.json';
 
 import 'rc-slider/assets/index.css';
 import '../styles/sections.css';
 
 
+const contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
+
+
 export class Section1 extends React.Component {
     constructor(props) {
         super(props);
@@ -63,34 +68,75 @@ export function Section3() {
     const [boomerAmount, setBoomerAmount] = useState(1);
     const [bombAmount, setBombAmount] = useState(1);
     const [sendBombAmount, setSendBombAmount] = useState(1);
-    const price = ethers.utils.parseEther('.01');
+    const [boomerPrice, setBoomerPrice] = useState(0);
+    const [bombPrice, setBombPrice] = useState(0);
+    const [boomerBalance, setBoomerBalance] = useState(0);
+    const [bombBalance, setBombBalance] = useState(0);
+    const { isConnected, address } = useAccount();
+    useContractReads({
+        contracts: [
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'boomerPrice'
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'bombPrice'
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'boomerBalance',
+                args: [address]
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'bombBalance',
+                args: [address]
+            }
+        ],
+        onSuccess(data) {
+            setBoomerPrice(data[0].toString());
+            setBombPrice(data[1].toString());
+            setBoomerBalance(data[2].toString());
+            setBombBalance(data[3].toString());
+        }
         
-    console.log(bombAmount)
+    });
     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>You have {boomerBalance} BOOMR</p>
                     <img src={Boomer} alt="" width="120px" />
                     <p>
                         <AwesomeButton type="secondary" ripple={true}>
-                            mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)
+                            mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)
                         </AwesomeButton>
                     </p>
                     <Slider className="slider" min={1} max={30} trackStyle={{
                         backgroundColor:'rgba(125, 46, 104, .8)', 
                         borderColor:'rgba(37, 19, 81, .8)'
                     }} onChange={v => setBoomerAmount(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 - send to other Unaboomers to kill them.</p>
+                    <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>You have {bombBalance} BOMB</p>
                     <img src={Bomb} alt="" width="100px" />
                     <p>
                         <AwesomeButton type="secondary" ripple={true}>
-                            mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)
+                            mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)
                         </AwesomeButton>
                     </p>
                     <Slider className="slider" min={1} max={30} trackStyle={{
@@ -100,10 +146,11 @@ export function Section3() {
                 </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>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>
                     <img src={Explosion} alt="" width="120px" />
                     <p>
-                        <AwesomeButton type="secondary" ripple={true}>
+                        <AwesomeButton type="secondary" ripple={true} disabled={bombAmount}>
                             send {sendBombAmount} (~0 Ξ)
                         </AwesomeButton>
                     </p>
@@ -113,6 +160,11 @@ export function Section3() {
                     }} onChange={v => setSendBombAmount(v)} />
                 </div>
             </div>
+            ||
+            <div id="heroText">
+                <h1>connect your wallet to play</h1>
+            </div>
+            }
         </section>
     )
 }