new abi, better prop inputs, better ux for stuff

src/abi/main.json

@@ -390,6 +390,25 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_address",
+        "type": "address"
+      }
+    ],
+    "name": "unaboomersMinted",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [],
     "name": "unaboomersRadicalized",

src/index.js

@@ -37,24 +37,29 @@ const wagmiClient = createClient({
   webSocketProvider
 });
 
+let chainId;
+let contractAddress;
+
+if (process.env.CHAIN == '5') {
+  chainId = 5;
+  contractAddress = '0x31205d753eC2784160F70E6E6177581c7721bD0E';
+} else if (process.env.CHAIN == '1') {
+  chainId = 1;
+  contractAddress = '';
+} else {
+  chainId = 1337;
+  contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
+}
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <ParallaxProvider>
     <WagmiConfig client={wagmiClient}>
-        <RainbowKitProvider chains={chains} initialChain={5}>
+        <RainbowKitProvider chains={chains} initialChain={chainId}>
             <Wallet />
             <div className="scrollContainer">
-              <AllSections contractAddress={'0x31205d753eC2784160F70E6E6177581c7721bD0E'} />
+              <AllSections contractAddress={contractAddress} />
             </div>
         </RainbowKitProvider>
     </WagmiConfig>
   </ParallaxProvider>
 );
-
-
-// goerli 
-// 5
-// 0x31205d753ec2784160f70e6e6177581c7721bd0e
-
-// local 
-// 1337
-// 0x5FbDB2315678afecb367f032d93F642f64180aa3

src/template/Sections.jsx

@@ -124,7 +124,7 @@ class GameMap extends React.Component {
                 <h1 id="gameMapTitle">Metaverse Map</h1>
                 <p id="gameMapText">
                     {this.props.unaboomersRadicalized} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and ready to terrorize the metaverse. <br />
-                    {this.props.unaboomerMaxSupply - this.props.unaboomerMaxSurvivorCount} potential Unaboomers remain.<br />
+                    {this.props.unaboomerMaxSupply - this.props.unaboomerMaxSurvivorCount - this.props.unaboomersRadicalized} potential Unaboomers remain.<br />
                     This round will end and the project will fully start when {this.props.unaboomerMaxSurvivorCount} or less Unaboomers remain standing.<br />
                 </p>
                 {this.props.unaboomersRadicalized > 0 && (
@@ -174,7 +174,7 @@ function Section3(props) {
         sendBombPreviewAmount: 1,
         unaboomerPrice: 0,
         bombPrice: ethers.utils.parseEther('.01'),
-        unaboomerBalance: 0,
+        unaboomersMinted: 0,
         bombBalance: 0,
         unaboomersRadicalized: 0,
         bombsAssembled: 0,
@@ -186,7 +186,8 @@ function Section3(props) {
         unaboomerMaxSupply: 0,
         unaboomerMaxSurvivorCount: 0,
         unaboomerMaxMintPerWallet: 0,
-        readWTF: false
+        readWTF: false,
+        balancesFetched: false
     });
     function handleStateChange(obj) {
         setOptions(preState => ({...preState , ...obj}));
@@ -238,7 +239,7 @@ function Section3(props) {
         contracts: [
             {
                 ...defOpt,
-                functionName: 'unaboomerBalance',
+                functionName: 'unaboomersMinted',
                 args: [address]
             },
             {
@@ -271,13 +272,14 @@ function Section3(props) {
         cacheTime: 6_000,
         onSuccess(data) {
             handleStateChange({
-                unaboomerBalance: Number(data[0]),
+                unaboomersMinted: Number(data[0]),
                 bombBalance: Number(data[1]),
                 unaboomersRadicalized: Number(data[2]),
                 bombsAssembled: Number(data[3]),
                 bombsExploded: Number(data[4]),
                 unaboomersKilled: Number(data[5]),
-                leaderboardPointer: Number(data[6])
+                leaderboardPointer: Number(data[6]),
+                balancesFetched: true
             });
         }
     });
@@ -312,7 +314,7 @@ function Section3(props) {
     const radicalizeBoomersPrepare = usePrepareContractWrite({
         address: contractAddress,
         abi: MainABI,
-        enabled: isConnected,
+        enabled: isConnected && options.unaboomersMinted < options.unaboomerMaxMintPerWallet && options.unaboomerAmount > 0 && options.balancesFetched,
         functionName: 'radicalizeBoomers',
         args: [options.unaboomerAmount],
         overrides: {
@@ -320,11 +322,16 @@ function Section3(props) {
             value: BigNumber.from((options.unaboomerPrice * options.unaboomerAmount).toString())
         }
     });
-    const radicalizeBoomersWrite = useContractWrite(radicalizeBoomersPrepare.config);
+    const radicalizeBoomersWrite = useContractWrite({
+        ...radicalizeBoomersPrepare.config,
+        onError(data) {
+            if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
+        }
+    });
     const assembleBombsPrepare = usePrepareContractWrite({
         address: contractAddress,
         abi: MainABI,
-        enabled: isConnected,
+        enabled: isConnected && options.bombAmount > 0,
         functionName: 'assembleBombs',
         args: [options.bombAmount],
         overrides: {
@@ -332,16 +339,26 @@ function Section3(props) {
             value: BigNumber.from((options.bombPrice * options.bombAmount).toString())
         }
     });
-    const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config);
+    const assembleBombsWrite = useContractWrite({
+        ...assembleBombsPrepare.config,
+        onError(data) {
+            if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
+        }
+    });
     const sendBombsPrepare = usePrepareContractWrite({
         address: contractAddress,
         abi: MainABI,
         enabled: isConnected && options.bombBalance > 0,
-        staleTime: 2_000,
         functionName: 'sendBombs',
+        cacheTime: 1000,
         args: [options.sendBombAmount]
     });
-    const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
+    const sendBombsWrite = useContractWrite({
+        ...sendBombsPrepare.config,
+        onError(data) {
+            if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
+        }
+    });
     useWaitForTransaction({
         hash: sendBombsWrite.data?.hash,
         enabled: sendBombsWrite.status === 'success',
@@ -431,24 +448,30 @@ function Section3(props) {
                             <div className="mintItem">
                                 <h1>Radicalize a Boomer</h1>
                                 <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
-                                <p>You have {options.unaboomerBalance} / {options.unaboomerMaxMintPerWallet} BOOMR</p>
+                                <p>You have {options.unaboomersMinted} / {options.unaboomerMaxMintPerWallet} BOOMR</p>
                                 <img src={Boomer} alt="" width="120px" />
-                                {options.unaboomerBalance < options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
+                                {options.unaboomersMinted < options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
                                     <>
                                         <p>
-                                            <AwesomeButton type="secondary" ripple={true} disabled={radicalizeBoomersPrepare.status == 'error'} onPress={() => radicalizeBoomersWrite.write?.()}>
+                                            <AwesomeButton type="secondary" ripple={true} disabled={radicalizeBoomersPrepare.status == 'error'} onPress={() => {
+                                                radicalizeBoomersWrite.write?.();
+                                                handleStateChange({
+                                                    unaboomerAmount: 1,
+                                                    unaboomerPreviewAmount: 1
+                                                })
+                                            }}>
                                                 {radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</>} 
                                                 {radicalizeBoomersWrite.isIdle && <>mint {options.unaboomerPreviewAmount} ({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerPreviewAmount).toString())} Ξ)</>}
                                                 {radicalizeBoomersWrite.isSuccess && <>sent</>}
                                                 {radicalizeBoomersWrite.isError && <>error</>}
                                             </AwesomeButton>
                                         </p>
-                                        <Slider className="slider" min={1} max={options.unaboomerMaxMintPerWallet - options.unaboomerBalance} onAfterChange={(v) => handleStateChange({unaboomerAmount: v})} onChange={(v) => {
+                                        <Slider className="slider" min={1} max={options.unaboomerMaxMintPerWallet - options.unaboomersMinted} onAfterChange={(v) => handleStateChange({unaboomerAmount: v})} onChange={(v) => {
                                             handleStateChange({unaboomerPreviewAmount: v});
                                             radicalizeBoomersWrite.reset();
                                         }} />
                                     </>
-                                ) || options.unaboomerBalance < options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
+                                ) || options.unaboomersMinted == options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
                                     <h2>max per wallet reached</h2>
                                 ) || (
                                     <h2>max supply reached</h2>
@@ -479,7 +502,13 @@ function Section3(props) {
                                 <img src={Explosion} alt="" width="120px" />
                                 {options.bombBalance > 0 && (<>
                                     <p>
-                                        <AwesomeButton type="secondary" ripple={true} disabled={sendBombsPrepare.status == 'error'} onPress={() => sendBombsWrite.write?.()}>
+                                        <AwesomeButton type="secondary" ripple={true} disabled={sendBombsPrepare.status == 'error'} onPress={() => {
+                                            sendBombsWrite.write?.();
+                                            handleStateChange({
+                                                sendBombAmount: 1,
+                                                sendBombPreviewAmount: 1
+                                            });
+                                        }}>
                                             {sendBombsWrite.isLoading && <>sending {options.sendBombAmount}</>}
                                             {sendBombsWrite.isIdle && <>send {options.sendBombPreviewAmount} (~0 Ξ)</>}
                                             {sendBombsWrite.isSuccess && <>sent</>}