track minted tokens for users

src/index.js

@@ -40,11 +40,11 @@ const wagmiClient = createClient({
 ReactDOM.createRoot(document.getElementById("root")).render(
   <ParallaxProvider>
     <WagmiConfig client={wagmiClient}>
-        <RainbowKitProvider chains={chains} initialChain={5}>
+        <RainbowKitProvider chains={chains} initialChain={1337}>
             <Wallet />
             <div className="scrollContainer">
               <AllSections 
-                contractAddress={'0x97a8a91563a9c6a9fbdb5d37656d4022f2838928'} 
+                contractAddress={'0x5FbDB2315678afecb367f032d93F642f64180aa3'} 
                 ws={'wss://lzahq.tech/ws'} 
               />
             </div>
@@ -53,4 +53,5 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   </ParallaxProvider>
 );
 
+// 0x97a8a91563a9c6a9fbdb5d37656d4022f2838928 - goerli
 // 0x5FbDB2315678afecb367f032d93F642f64180aa3 - local

src/styles/sections.css

@@ -175,18 +175,6 @@
     100% { opacity: 1 }
 }
 
-#killLeader {
-    margin: .5em 0 .5em 0;
-    position: absolute;
-    z-index: 99;
-    background-color: rgba(0,0,0,.6);
-    padding: 2px;
-    border-radius: 4px;
-    text-align: center;
-    right: 0;
-    padding: .75em;
-}
-
 .nopad {
     padding: 0;
     margin: 0;
@@ -274,3 +262,23 @@
     line-height: 1em;
     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%;
+}

src/template/Sections.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { ethers, BigNumber } from 'ethers';
-import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction } from 'wagmi';
+import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction, erc721ABI } from 'wagmi';
 import { Parallax } from 'react-parallax';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { AwesomeButton } from 'react-awesome-button';
@@ -10,6 +10,7 @@ import Slider from 'rc-slider';
 
 import LZA from '../img/lza_menace.png';
 import Carty from '../img/cartyisme.png';
+import BoomerBW from '../img/unaboomer_bw.png';
 import Boomer from '../img/unaboomer.png';
 import Newspapers from '../img/newspapers.png';
 import Bomb from '../img/bomb.png';
@@ -41,7 +42,7 @@ export class Section1 extends React.Component {
                 <h1 id="heroText">
                     <Typewriter text={this.state.title} cursor={true} random={20} />
                 </h1>
-                <img src={Boomer} id="heroImage" className={!this.state.showImage ? "hidden": "" } alt="Pixelated police sketch of the Unabomber suspect." />
+                <img src={BoomerBW} id="heroImage" className={!this.state.showImage ? "hidden": "" } alt="Pixelated police sketch of the Unabomber suspect." />
                 <div className={!this.state.showImage ? "hidden fadeIn": "fadeIn" }>
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M7.75735 5.63605L6.34314 7.05026L12 12.7071L17.6569 7.05029L16.2427 5.63608L12 9.87872L7.75735 5.63605Z" fill="currentColor" />
@@ -170,6 +171,15 @@ class GameMap extends React.Component {
 
 function Section3(props) {
     const contractAddress = props.contractAddress;
+    const [tokensMinted, setTokensMinted] = useState(() => {
+        const saved = localStorage.getItem('tokensMinted0');
+        return saved || JSON.stringify([])
+    });
+
+    useEffect(() => {
+        localStorage.setItem('tokensMinted0', tokensMinted);
+    }, [tokensMinted]);
+
     const [options, setOptions] = useState({ 
         unaboomerAmount: 1,
         bombAmount: 1,
@@ -193,7 +203,8 @@ function Section3(props) {
         unaboomerMaxSurvivorCount: 0,
         unaboomerMaxMintPerWallet: 0,
         readWTF: false,
-        balancesFetched: false
+        balancesFetched: false,
+        unaboomersByAddress: []
     });
     function handleStateChange(obj) {
         setOptions(preState => ({...preState , ...obj}));
@@ -372,6 +383,23 @@ function Section3(props) {
             if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
         }
     });
+    useWaitForTransaction({
+        hash: radicalizeBoomersWrite.data?.hash,
+        enabled: radicalizeBoomersWrite.status === 'success',
+        onSuccess(data) {
+            let tm = JSON.parse(tokensMinted);
+            const iface = new ethers.utils.Interface(erc721ABI);
+            data.logs.filter(log => 
+                log.topics[0] === '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef'
+            ).map((log) => {
+                const res = iface.decodeEventLog("Transfer", log.data, log.topics);
+                NotificationManager.success(`You radicalized Unaboomer #${res.tokenId.toString()}`, '', 4000);
+                tm.push(Number(res.tokenId));
+            });
+            setTokensMinted(JSON.stringify(tm));
+            console.log(tm);
+        }
+    })
     useWaitForTransaction({
         hash: sendBombsWrite.data?.hash,
         enabled: sendBombsWrite.status === 'success',
@@ -383,15 +411,14 @@ function Section3(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()}`, 'oof', 8000);
+                        NotificationManager.error(`Your bomb exploded during assembly and killed your Unaboomer ${res.tokenId.toString()}`, '', 8000);
                     } else {
-                        NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, 'Got em!', 8000);
+                        NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, '', 8000);
                     }
                 } else {
-                    NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, 'oof', 8000);
+                    NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, '', 8000);
                 }
-                
-            })
+            });
         }
     });
     return (
@@ -523,10 +550,27 @@ function Section3(props) {
                                 </>) || <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={Boomer} width="80px" />
+                                            </div>
+                                        ))}
+                                    </div>
+                                </>
+                            )}
+                        </div>
                     </>
                 )}
 
-                <NotificationContainer/>
+
+                
+                <NotificationContainer />
             </>}
             {isConnected && options.unaboomerMaxSupply > 0 && (
                 <>
@@ -578,7 +622,7 @@ function Trollbox(props) {
 
     useEffect(() => {
         localStorage.setItem('trollboxHistory', history);
-    }, [history])
+    }, [history]);
 
     const connectionStatus = {
         [ReadyState.CONNECTING]: 'Connecting',