get the minting stuff working

src/components/Hero.jsx

@@ -235,7 +235,9 @@ export function Hero(props) {
             <div id='heroFlex'>
                 <div className='heroFlexItem'>
                     <img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
+                    <p>
                         
+                    </p>
                     {options.unaboomersMinted > 0 && (
                         <p>
                             You have minted {options.unaboomersMinted} Unaboomers.
@@ -248,7 +250,7 @@ export function Hero(props) {
                     && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply
                     && (
                             <>
-                                <input type='number' step='1' name='bombAmountPreview' defaultValue={1} min={1} max={options.unaboomerMaxMintPerWallet - options.unaboomersMinted} onChange={(v) => {
+                                <input type='number' step='1' defaultValue={1} min={1} max={options.unaboomerMaxMintPerWallet - options.unaboomersMinted} onChange={(v) => {
                                     handleStateChange({unaboomerAmount: v.target.value});
                                     radicalizeBoomersWrite.reset()
                                 }}></input>
@@ -273,10 +275,31 @@ export function Hero(props) {
                     <img src={Mailbomb} width='280px' alt='Pixelated Mailbomb image - handle with caution.' />
                     <p>
                         Don't let the Boomers win, fight back! Assemble a mailbomb and blow 'em to smithereens. <br /><br />
-                        (Warning: Some bombs are duds!)
+                        (Warning: Some bombs are duds!)<br /><br />
                     </p>
-                    <button className='doThing buttom'>assemble mailbomb</button>
-                    <p>(.01 ETH)</p>
+                    {options.bombBalance > 0 && (
+                        <p>
+                            You have {options.bombBalance} Mailbombs.
+                        </p>
+                    )}
+                    <br />
+                    {isConnected 
+                    && options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
+                    && (
+                            <>
+                                <input type='number' step='1' defaultValue={1} min={1} onChange={(v) => {
+                                    handleStateChange({bombAmount: v.target.value});
+                                    assembleBombsWrite.reset()
+                                }}></input>
+                                <button className='doThing' disabled={assembleBombsPrepare.status == 'error'} onClick={() => assembleBombsWrite.write?.()}>
+                                    {assembleBombsWrite.isLoading && <>assembling {options.bombAmount}</>} 
+                                    {assembleBombsWrite.isIdle && <>Assemble {options.bombAmount == 1 ? 'a Mailbomb': <>{options.bombAmount} Mailbombs</>}</>}
+                                    {assembleBombsWrite.isSuccess && <>sent</>}
+                                    {assembleBombsWrite.isError && <>error</>}
+                                </button>
+                                <p>({ethers.utils.formatEther((options.bombPrice * options.bombAmount).toString())} ETH)</p>
+                            </>
+                    )}
                 </div>
                 <div className='heroFlexArrow'>
                     <img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
@@ -288,8 +311,24 @@ export function Hero(props) {
                         If your bomb is live it will destroy a Boomer PFP forever. <br /><br />
                         (Warning: Your Boomer might explode!)
                     </p>
-                    <button className='doThing buttom'>mail a bomb</button>
-                    <p>(0 ETH)</p>
+                    {isConnected 
+                    && options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
+                    && (
+                            <>
+                                <input type='number' step='1' defaultValue={1} min={1} max={options.bombBalance} onChange={(v) => {
+                                    handleStateChange({sendBombAmount: v.target.value});
+                                    sendBombsWrite.reset()
+                                }}></input>
+                                <button className='doThing' disabled={sendBombsPrepare.status == 'error'} onClick={() => sendBombsWrite.write?.()}>
+                                    {sendBombsWrite.isLoading && <>mailing {options.sendBombAmount}</>} 
+                                    {sendBombsWrite.isIdle && <>Mail {options.sendBombAmount == 1 ? 'a bomb': <>{options.sendBombAmount} Mailbombs</>}</>}
+                                    {sendBombsWrite.isSuccess && <>sent</>}
+                                    {sendBombsWrite.isError && <>error</>}
+                                </button>
+                                <p>(tx fee)</p>
+                            </>
+                        )
+                    }
                 </div>
             </div>
         </div>