add mint status bar

src/components/Hero.jsx

@@ -243,6 +243,25 @@ export function Hero(props) {
                 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>
+            {isConnected && options.unaboomersMinted > 0 && (
+                <>
+                <div className="progress">
+                    <p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p>
+                    <div className="progress-value" style={{ 
+                        width: (options.unaboomersMinted / options.unaboomerMaxSupply * 100) + '%'
+                    }}>
+                    </div>
+                </div>
+                <div className="progress">
+                    <p>{options.unaboomersKilled} / {options.unaboomerMaxSurvivorCount} killed</p>
+                    <div className="progress-value" style={{ 
+                        width: (options.unaboomersKilled / options.unaboomerMaxSurvivorCount * 100) + '%',
+                        backgroundColor: 'red'
+                    }}>
+                    </div>
+                </div>
+                </>
+            )}
             <div id='heroFlex'>
                 <div className='heroFlexItem'>
                     <img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
@@ -348,7 +367,7 @@ export function Hero(props) {
             <div id="userInventory">
                 {isConnected && JSON.parse(tokensMinted).length > 0 && (
                     <>
-                        <h1>Your Unaboomers</h1>
+                        <h1>You Minted</h1>
                         <div className="ownedTokens">
                             {JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
                                     <div className="ownedToken" key={idx}>

src/styles/hero.css

@@ -8,6 +8,34 @@
     margin: 1em auto;
 }
 
+.progress {
+    background: rgba(255,255,255,0.1);
+    justify-content: flex-start;
+    border-radius: 100px;
+    align-items: center;
+    position: relative;
+    padding: 0 5px;
+    display: flex;
+    height: 40px;
+    width: 80%;
+    max-width: 800px;
+    margin: 2em auto;
+}
+
+.progress-value {
+    animation: load 3s normal forwards;
+    box-shadow: 0 10px 40px -10px #fff;
+    border-radius: 100px;
+    background: #fff;
+    height: 30px;
+}
+
+.progress p {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+}
+
 .section {
     text-align: center;
     padding-bottom: 1em;