add inventory

src/components/Hero.jsx

@@ -14,13 +14,15 @@ import Arrow from '../img/arrow_right.png';
 
 export function Hero(props) {
     const contractAddress = props.contractAddress;
+    const { isConnected, address } = useAccount();
+
     const [tokensMinted, setTokensMinted] = useState(() => {
-        const saved = localStorage.getItem('tokensMinted-v1');
+        const saved = localStorage.getItem('tokensMinted-v2-' + address);
         return saved || JSON.stringify([])
     });
 
     useEffect(() => {
-        localStorage.setItem('tokensMinted-v1', tokensMinted);
+        localStorage.setItem('tokensMinted-v2-' + address, tokensMinted);
     }, [tokensMinted]);
 
     const [options, setOptions] = useState({ 
@@ -52,7 +54,6 @@ export function Hero(props) {
     function handleStateChange(obj) {
         setOptions(preState => ({...preState , ...obj}));
     }
-    const { isConnected, address } = useAccount();
     const defOpt = {
         address: contractAddress,
         abi: MainABI,
@@ -313,6 +314,7 @@ export function Hero(props) {
                     </p>
                     {isConnected 
                     && options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
+                    &&  options.bombBalance > 0
                     && (
                             <>
                                 <input type='number' step='1' defaultValue={1} min={1} max={options.bombBalance} onChange={(v) => {
@@ -327,10 +329,24 @@ export function Hero(props) {
                                 </button>
                                 <p>(tx fee)</p>
                             </>
-                        )
+                        ) || options.bombBalance == 0 && <h2>no bombs</h2>
                     }
                 </div>
             </div>
+            <div id="userInventory">
+                {isConnected && JSON.parse(tokensMinted).length > 0 && (
+                    <>
+                        <h1>Your Unaboomers</h1>
+                        <div className="ownedTokens">
+                            {JSON.parse(tokensMinted).map((id, idx) => (
+                                <div className="ownedToken" key={idx}>
+                                    <img src={Unaboomer} width="80px" />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+            </div>
         </div>
     )
 }

src/styles/hero.css

@@ -44,4 +44,24 @@ button.doThing:hover {
 
 button.doThing:disabled {
     background-color: grey;
+}
+
+#userInventory {
+    margin: 0 0 4em 0;
+}
+
+#userInventory h1 { 
+    margin: 0 0 1em 0;
+}
+  
+.ownedTokens {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    /* justify-content: center; */
+}
+
+.ownedToken {
+    height: 100%;
+    flex: 0 10%;
 }

src/styles/sections.css

@@ -267,22 +267,3 @@
     padding-right: 8px;
 }
 
-#userInventory {
-    margin: 0 0 4em 0;
-}
-
-#userInventory h1 { 
-    margin: 0 0 1em 0;
-}
-  
-.ownedTokens {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-.ownedToken {
-    height: 100%;
-    flex: 0 12%;
-}