setting up contract interactions

src/template/Sections.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ethers } from 'ethers';
+import { ethers, BigNumber } from 'ethers';
 import { useAccount, useContractReads, usePrepareContractWrite, useContractWrite } from 'wagmi';
 import Typewriter from 'react-ts-typewriter';
 import Slider from 'rc-slider';
@@ -102,14 +102,38 @@ export function Section3() {
                 args: [address]
             }
         ],
+        watch: true,
         onSuccess(data) {
             setBoomerPrice(data[0].toString());
             setBombPrice(data[1].toString());
             setBoomerBalance(data[2].toString());
             setBombBalance(data[3].toString());
         }
-        
     });
+    const radicalizeBoomersPrepare = usePrepareContractWrite({
+        address: contractAddress,
+        abi: MainABI,
+        enabled: isConnected,
+        functionName: 'radicalizeBoomers',
+        args: [boomerAmount],
+        overrides: {
+            from: address,
+            value: BigNumber.from((boomerPrice * boomerAmount).toString())
+        }
+    });
+    const radicalizeBoomersWrite = useContractWrite(radicalizeBoomersPrepare.config);
+    const assembleBombsPrepare = usePrepareContractWrite({
+        address: contractAddress,
+        abi: MainABI,
+        enabled: isConnected,
+        functionName: 'assembleBombs',
+        args: [bombAmount],
+        overrides: {
+            from: address,
+            value: BigNumber.from((bombPrice * bombAmount).toString())
+        }
+    });
+    const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config);
     return (
         <section className="section">
             {isConnected &&
@@ -120,8 +144,8 @@ export function Section3() {
                     <p>You have {boomerBalance} BOOMR</p>
                     <img src={Boomer} alt="" width="120px" />
                     <p>
-                        <AwesomeButton type="secondary" ripple={true}>
-                            mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)
+                        <AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
+                            {radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
                         </AwesomeButton>
                     </p>
                     <Slider className="slider" min={1} max={30} trackStyle={{
@@ -135,8 +159,8 @@ export function Section3() {
                     <p>You have {bombBalance} BOMB</p>
                     <img src={Bomb} alt="" width="100px" />
                     <p>
-                        <AwesomeButton type="secondary" ripple={true}>
-                            mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)
+                        <AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
+                            {assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
                         </AwesomeButton>
                     </p>
                     <Slider className="slider" min={1} max={30} trackStyle={{