improvements to ux

src/components/Hero.jsx

@@ -14,6 +14,7 @@ import Explosion from '../img/explosion.png';
 import Arrow from '../img/arrow_right.png';
 import LZA from '../img/lza_menace.png';
 import Carty from '../img/cartyisme.png';
+import Loading from '../img/loading.svg';
 
 
 export function Hero(props) {
@@ -51,7 +52,6 @@ export function Hero(props) {
         unaboomerMaxSupply: 0,
         unaboomerMaxSurvivorCount: 0,
         unaboomerMaxMintPerWallet: 0,
-        readWTF: false,
         balancesFetched: false,
         unaboomersByAddress: []
     });
@@ -172,6 +172,10 @@ export function Hero(props) {
         ...assembleBombsPrepare.config,
         onError(data) {
             if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
+        },
+        onSuccess(data) {
+            NotificationManager.success(`Bombs acquired. Let's kill some Boomers.`, '', 3000);
+            assembleBombsWrite.reset();
         }
     });
     const sendBombsPrepare = usePrepareContractWrite({
@@ -203,7 +207,7 @@ export function Hero(props) {
                 tm.push(Number(res.tokenId));
             });
             setTokensMinted(JSON.stringify(tm));
-            console.log(tm);
+            radicalizeBoomersWrite.reset();
         }
     })
     useWaitForTransaction({
@@ -217,14 +221,15 @@ export function Hero(props) {
                 const res = iface.decodeEventLog("SentBomb", log.data, log.topics);
                 if (res.hit) {
                     if (res.owned) {
-                        NotificationManager.error(`Your bomb exploded during assembly and killed your Unaboomer ${res.tokenId.toString()}`, '', 8000);
+                        NotificationManager.error(`Your bomb exploded during assembly and killed your Unaboomer ${res.tokenId.toString()}`, '', 5000);
                     } else {
-                        NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, '', 8000);
+                        NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, '', 5000);
                     }
                 } else {
-                    NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, '', 8000);
+                    NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, '', 5000);
                 }
             });
+            sendBombsWrite.reset();
         }
     });
 
@@ -235,7 +240,7 @@ export function Hero(props) {
             <p id='heroText'>
                 Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin, 
                 and expensive JPEGs have made them angry. <br /><br />
-                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '35,000'} Boomers have joined forces 
+                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '7,896'} Boomers have joined forces 
                 to lash out at the system.<br /><br />
             </p>
             <div id='heroFlex'>
@@ -265,7 +270,7 @@ export function Hero(props) {
                                 <button className='doThing' disabled={radicalizeBoomersPrepare.status == 'error'} onClick={() => radicalizeBoomersWrite.write?.()}>
                                     {radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</>} 
                                     {radicalizeBoomersWrite.isIdle && <>Radicalize {options.unaboomerAmount == 1 ? 'a Unaboomer': <>{options.unaboomerAmount} Unaboomers</>}</>}
-                                    {radicalizeBoomersWrite.isSuccess && <>sent</>}
+                                    {radicalizeBoomersWrite.isSuccess && <img src={Loading} width="25px"></img>}
                                     {radicalizeBoomersWrite.isError && <>error</>}
                                 </button>
                                 <p>({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} ETH)</p>
@@ -302,7 +307,7 @@ export function Hero(props) {
                                 <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.isSuccess && <img src={Loading} width="25px"></img>}
                                     {assembleBombsWrite.isError && <>error</>}
                                 </button>
                                 <p>({ethers.utils.formatEther((options.bombPrice * options.bombAmount).toString())} ETH)</p>
@@ -331,7 +336,7 @@ export function Hero(props) {
                                 <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.isSuccess && <img src={Loading} width="25px"></img>}
                                     {sendBombsWrite.isError && <>error</>}
                                 </button>
                                 <p>(tx fee)</p>
@@ -340,10 +345,27 @@ export function Hero(props) {
                     }
                 </div>
             </div>
+            <div id="userInventory">
+                {isConnected && JSON.parse(tokensMinted).length > 0 && (
+                    <>
+                        <h1>Your Unaboomers</h1>
+                        <div className="ownedTokens">
+                            {JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
+                                    <div className="ownedToken" key={idx}>
+                                        <a href={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} target='_blank'>
+                                            <img src={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} width="80px" />
+                                        </a>
+                                    </div>
+                                )
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
             <div id="mintInfo" className="section">
                 <h1>WTF!?</h1>
                 <p>
-                    UNABOOMER is a deflationary Player vs. Player PFP NFT. 35,000 pixel Boomers, with 190 unique traits will go free-to-radicalize.
+                    UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 7,896 pixel Boomers with 190 unique traits.
                 </p>
                 <p>
                     Assemble a mailbomb and burn it to destroy a random Boomer in the collection. Destroyed Boomers will explode, lose their traits, and be burned. Mailbomb assembly is open to all.
@@ -352,7 +374,7 @@ export function Hero(props) {
                     But be careful! Your Boomer can blow itself up in the process. The more Boomers destroyed, the more likely your bomb is a dud.
                 </p>
                 <p>
-                    This is only the beginning...
+                    The round will end when 1,995 players remain standing...
                 </p>
             </div>
             <div id="teamInfo" className="section">
@@ -366,27 +388,10 @@ export function Hero(props) {
                     <div className='teamMember'>
                         <img src={LZA} width='180px' alt='lza_menace Milady PFP' />
                         <a href='https://twitter.com/lza_menace' target='_blank' className=''>@lza_menace</a>
-                        <p>Solidity dude, Monero fan, and meme consooomer.</p>
+                        <p>Coder, loser, Monero fan, and meme consooomer.</p>
                     </div>
                 </div>
             </div>
-            <div id="userInventory">
-                {isConnected && JSON.parse(tokensMinted).length > 0 && (
-                    <>
-                        <h1>Your Unaboomers</h1>
-                        <div className="ownedTokens">
-                            {JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
-                                    <div className="ownedToken" key={idx}>
-                                        <a href={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} target='_blank'>
-                                            <img src={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} width="80px" />
-                                        </a>
-                                    </div>
-                                )
-                            )}
-                        </div>
-                    </>
-                )}
-            </div>
             {isConnected && address && (
                 <>
                     <StatsPanel 

src/components/Panels.jsx

@@ -126,7 +126,7 @@ export function TrollboxPanel(props) {
                                 <li key={idx} className="messageLine">
                                     <span className="fromAddress nopad">
                                         <a href={"https://etherscan.io/address/" + message.from} target="_blank">
-                                            {message.from.slice(-6)}
+                                            {message.from.slice(-4)}
                                         </a>
                                     :</span>
                                     <span className="messageText">{message.message}</span>

src/img/loading.svg

@@ -0,0 +1,22 @@
+<svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
+<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
+  <animateTransform 
+       attributeName="transform" 
+       dur="2s"
+       type="rotate"
+       from="0 50 50"
+       to="360 50 50"
+       repeatCount="indefinite" />
+</line>
+<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
+  <animateTransform 
+       attributeName="transform" 
+       dur="15s"
+       type="rotate"
+       from="0 50 50"
+       to="360 50 50"
+       repeatCount="indefinite" />
+</line>
+</svg>

src/index.js

@@ -18,7 +18,7 @@ import { Footer } from "./components/Footer";
 const { chains, provider, webSocketProvider } = configureChains(
   [mainnet, goerli, localhost],
   [
-    // infuraProvider({ apiKey: 'e7674eea9d72437d9129b41ed018183d' }),
+    infuraProvider({ apiKey: 'e7674eea9d72437d9129b41ed018183d' }),
     publicProvider()    
   ]
 );
@@ -29,7 +29,7 @@ const { connectors } = getDefaultWallets({
 });
 
 const wagmiClient = createClient({
-  autoConnect: true,
+  autoConnect: false,
   connectors,
   provider,
   webSocketProvider
@@ -37,10 +37,10 @@ const wagmiClient = createClient({
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <WagmiConfig client={wagmiClient}>
-        <RainbowKitProvider chains={chains} initialChain={5}>
+        <RainbowKitProvider chains={chains} initialChain={1337}>
             <Navbar />
             <Hero 
-              contractAddress={'0xe19cd4bb795de9d2424498b12689761d43482137'} 
+              contractAddress={'0x5FbDB2315678afecb367f032d93F642f64180aa3'} 
               ws={'wss://lzahq.tech/ws'}
             />
             <Footer />

src/styles/hero.css

@@ -47,6 +47,11 @@
     margin: 2em auto;
 }
 
+.heroFlexItem input {
+    width: 60px;
+    height: 40px;
+}
+
 @media (min-width: 1200px) {
     #heroFlex {
         display: flex;