From 1acc51eb8c6358929922a5d2d320b9df4807f49b Mon Sep 17 00:00:00 2001
From: lza_menace <lza_menace@protonmail.com>
Date: Wed, 25 Jan 2023 00:02:53 -0800
Subject: [PATCH] ux improvements

---
 src/components/Hero.jsx | 32 ++++++++++++--------------------
 src/index.js            |  6 +++---
 src/styles/footer.css   |  6 ------
 src/styles/hero.css     |  5 +++--
 4 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 06b4f2f..c3e3909 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -251,7 +251,7 @@ export function Hero(props) {
                 <div className="progress">
                     <p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p>
                     <div className="progress-value" style={{ 
-                        width: (options.unaboomersMinted / options.unaboomerMaxSupply * 100) + '%'
+                        width: (options.unaboomersRadicalized / options.unaboomerMaxSupply * 100) + '%'
                     }}>
                     </div>
                 </div>
@@ -273,17 +273,14 @@ export function Hero(props) {
                         Now they're on a war path to disrupt the metaverse.
                         <br /><br />
                         (Warning: your BOOMER may explode!)
-                        <br /><br />
                     </p>
                     {options.unaboomersMinted > 0 && (
                         <p>
+                            <br />
                             You have minted {options.unaboomersMinted} Unaboomers.
-                            {options.unaboomersKilled > 0 && <>{options.unaboomersKilled} are dead.</>}
                         </p>
                     )}
-                    <br />
-                    {isConnected 
-                    && options.unaboomersMinted < options.unaboomerMaxMintPerWallet 
+                    {options.unaboomersMinted < options.unaboomerMaxMintPerWallet 
                     && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply
                     && (
                             <>
@@ -299,10 +296,6 @@ export function Hero(props) {
                                 </button>
                                 <p>({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} ETH)</p>
                             </>
-                    ) || options.unaboomersMinted == options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
-                        <h2>max per wallet reached</h2>
-                    ) || options.unaboomersRadicalized == options.unaboomerMaxSupply && options.unaboomerMaxSupply > 0 && (
-                        <h2>max supply reached</h2>
                     )}
                 </div>
                 <div className='heroFlexArrow'>
@@ -312,16 +305,15 @@ export function Hero(props) {
                     <img src={Mailbomb} width='280px' alt='Pixelated mail bomb image - handle with caution.' />
                     <p>
                         Don't let the Boomers win! Assemble mail bombs and blow 'em to smithereens. <br /><br />
-                        (Warning: Some bombs are duds!)<br /><br />
+                        (Warning: Some bombs are duds!)
                     </p>
                     {options.bombBalance > 0 && (
                         <p>
+                            <br />
                             You have {options.bombBalance} Mail bombs.
                         </p>
                     )}
-                    <br />
-                    {isConnected 
-                    && options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
+                    {options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
                     && (
                             <>
                                 <input type='number' step='1' defaultValue={1} min={1} onChange={(v) => {
@@ -347,8 +339,7 @@ export function Hero(props) {
                         Ready for mayhem? Mail a bomb to blow up a random BOOMER. <br /><br />
                         (Warning: Your Boomer might explode!)
                     </p>
-                    {isConnected 
-                    && options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
+                    {options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
                     &&  options.bombBalance > 0
                     && (
                             <>
@@ -364,8 +355,7 @@ export function Hero(props) {
                                 </button>
                                 <p>(tx fee)</p>
                             </>
-                        ) || options.bombBalance == 0 && <h2>no bombs</h2>
-                    }
+                        )}
                 </div>
             </div>
             
@@ -392,7 +382,7 @@ export function Hero(props) {
             <div id="mintInfo" className="section">
                 <h1>WTF!?</h1>
                 <p>
-                    UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 10,000 pixel Boomers with 190 unique traits.
+                    UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 5,000 pixel Boomers with 190 unique traits.
                 </p>
                 <p>
                     Assemble a mail bomb and burn it to destroy a random Boomer in the collection. Destroyed Boomers will explode, lose their traits, and get burned. 
@@ -401,7 +391,7 @@ export function Hero(props) {
                     Mail bomb assembly is open to all. But be careful! Your Boomer can blow itself up in the process. 
                 </p>
                 <p>
-                    The more Boomers destroyed, the more likely your bomb is a dud. Shipments begin 24HRS post-mint. Round one ends when 5,000 boomers are left standing.
+                    The more Boomers destroyed, the more likely your bomb is a dud. Shipments begin 24HRS post-mint. Round one ends when 2,500 boomers are left standing.
                 </p>
             </div>
             <div id="teamInfo" className="section">
@@ -433,6 +423,7 @@ export function Hero(props) {
 
             {isConnected && address && (
                 <>
+                    {options.boomerMaxSupply > 0 && (
                     <StatsPanel 
                         leaderKillCount={options.leaderKillCount}
                         leaderAddress={options.leaderAddress}
@@ -441,6 +432,7 @@ export function Hero(props) {
                         bombsAssembled={options.bombsAssembled}
                         bombsExploded={options.bombsExploded}
                     />
+                    )}
                     <TrollboxPanel 
                         ws={props.ws}
                         address={address} 
diff --git a/src/index.js b/src/index.js
index ca05603..4bb8f96 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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={1}>
             <Navbar />
             <Hero 
-              contractAddress={'0xF15D0e633EAD13f28e207BDc2423766810D28247'} 
+              contractAddress={''} 
               ws={'wss://lzahq.tech/ws'}
             />
             <Footer />
@@ -48,6 +48,6 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     </WagmiConfig>
 );
 
-// 0x3ecb24754a8ba06f79f0d6b1764809ef4b4ab03a - goerli
+// 0xF15D0e633EAD13f28e207BDc2423766810D28247 - goerli
 // 0x5FbDB2315678afecb367f032d93F642f64180aa3 - local
 // wss://lzahq.tech/ws
\ No newline at end of file
diff --git a/src/styles/footer.css b/src/styles/footer.css
index 7fddf97..82a0a24 100644
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -5,9 +5,3 @@ footer {
     padding: 0;
     margin: 0;
 }
-
-@media (max-width: 800px) {
-    footer {
-        height: 350px;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/hero.css b/src/styles/hero.css
index 77d9df4..32eb240 100644
--- a/src/styles/hero.css
+++ b/src/styles/hero.css
@@ -24,7 +24,7 @@
 
 .progress-value {
     animation: load 3s normal forwards;
-    box-shadow: 0 10px 40px -10px #fff;
+    box-shadow: 0 10px 20px -10px #fff;
     border-radius: 100px;
     background: #fff;
     height: 30px;
@@ -34,6 +34,7 @@
     width: 100%;
     text-align: center;
     position: absolute;
+    color: black;
 }
 
 .section {
@@ -264,5 +265,5 @@ button.doThing:disabled {
 
 #boomerPreviewBanner {
     width: 100%;
-    padding-top: 1em;
+    margin-top: 4em;
 }
\ No newline at end of file