"latest" Block

src/components/Minter.js

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Web3 from "web3";
 import contract from "../contracts/contract.json";
 import Hero from "../assets/hero.png";
+import Logo from "../assets/logo.png";
 
 const initialInfoState = {
   connected: false,
@@ -15,10 +16,11 @@ const initialInfoState = {
 
 const initialMintState = {
   loading: false,
-  status: `Mint your ${contract.name}`,
+  status: `Mint your ${contract.name} NFT`,
   amount: 1,
   supply: "0",
   cost: "0",
+  paused: 1,
 };
 
 function Minter() {
@@ -90,7 +92,7 @@ function Minter() {
     try {
       const result = await window.ethereum.request({
         method: "eth_call",
-        params: [params],
+        params: [params, "latest"],
       });
       console.log(info.web3.utils.hexToNumberString(result));
       setMintInfo((prevState) => ({
@@ -114,7 +116,7 @@ function Minter() {
     try {
       const result = await window.ethereum.request({
         method: "eth_call",
-        params: [params],
+        params: [params, "latest"],
       });
       console.log(info.web3.utils.hexToNumberString(result));
       setMintInfo((prevState) => ({
@@ -129,16 +131,43 @@ function Minter() {
     }
   };
 
+  const getPaused = async () => {
+    const params = {
+      to: info.contractJSON.address,
+      from: info.account,
+      data: info.contract.methods.paused().encodeABI(),
+    };
+    try {
+      const result = await window.ethereum.request({
+        method: "eth_call",
+        params: [params, "latest"],
+      });
+      console.log(info.web3.utils.hexToNumber(result));
+      setMintInfo((prevState) => ({
+        ...prevState,
+        paused: info.web3.utils.hexToNumber(result),
+      }));
+    } catch (err) {
+      setMintInfo((prevState) => ({
+        ...prevState,
+        paused: 1,
+      }));
+    }
+  };
+
   const mint = async () => {
     const params = {
       to: info.contractJSON.address,
       from: info.account,
+      gas: String(
+        info.web3.utils.toHex(
+          contract.gas_limit + contract.gas_multiplier * mintInfo.amount
+        )
+      ),
       value: String(
         info.web3.utils.toHex(Number(mintInfo.cost) * mintInfo.amount)
       ),
-      data: info.contract.methods
-        .mint(info.account, mintInfo.amount)
-        .encodeABI(),
+      data: info.contract.methods.mint(mintInfo.amount).encodeABI(),
     };
     try {
       setMintInfo((prevState) => ({
@@ -156,7 +185,6 @@ function Minter() {
         status:
           "Nice! Your NFT will show up on Opensea, once the transaction is successful.",
       }));
-      getSupply();
     } catch (err) {
       setMintInfo((prevState) => ({
         ...prevState,
@@ -188,6 +216,7 @@ function Minter() {
     if (info.connected) {
       getSupply();
       getCost();
+      getPaused();
     }
   }, [info.connected]);
 
@@ -197,7 +226,18 @@ function Minter() {
         <div className="card_header colorGradient">
           <img className="card_header_image ns" alt={"banner"} src={Hero} />
         </div>
-        {mintInfo.supply < contract.total_supply ? (
+        {mintInfo.paused == 1 ? (
+          <div className="card_body">
+            {!info.connected ? (
+              <p className="statusText">{info.status}</p>
+            ) : (
+              <p style={{ color: "var(--statusText)", textAlign: "center" }}>
+                You can not mint yet. Please wait for the announcement to start
+                minting.
+              </p>
+            )}
+          </div>
+        ) : mintInfo.supply < contract.total_supply ? (
           <div className="card_body">
             <div
               style={{
@@ -230,11 +270,14 @@ function Minter() {
                 +
               </button>
             </div>
+
             {info.connected ? (
               <div style={{ display: "flex", justifyContent: "space-between" }}>
                 <p style={{ color: "var(--statusText)", textAlign: "center" }}>
-                  {info.web3?.utils.fromWei(mintInfo.cost, "ether") *
-                    mintInfo.amount}{" "}
+                  {Number(
+                    info.web3?.utils.fromWei(mintInfo.cost, "ether") *
+                      mintInfo.amount
+                  ).toFixed(3)}{" "}
                   {contract.chain_symbol}
                 </p>
                 <div style={{ width: 20 }}></div>
@@ -247,9 +290,11 @@ function Minter() {
                 </p>
               </div>
             ) : null}
+
             {mintInfo.status ? (
               <p className="statusText">{mintInfo.status}</p>
             ) : null}
+
             {info.status ? (
               <p className="statusText" style={{ color: "var(--error)" }}>
                 {info.status}
@@ -262,7 +307,7 @@ function Minter() {
               {mintInfo.supply}/{contract.total_supply}
             </p>
             <p className="statusText">
-              We've sold out! .You can still buy and trade the {contract.name}{" "}
+              We've sold out!. You can still buy and trade the {contract.name}{" "}
               on marketplaces such as Opensea.
             </p>
           </div>
@@ -295,11 +340,12 @@ function Minter() {
           }}
           className="_90"
           target="_blank"
-          href="https://polygonscan.com/token/0x827acb09a2dc20e39c9aad7f7190d9bc53534192"
+          href={contract.scan}
         >
-          View Contract
+          {contract.symbol} Contract
         </a>
       </div>
+      <img className="card_logo_image ns" alt={"banner"} src={Logo} />
     </div>
   );
 }

src/contracts/contract.json

@@ -1,11 +1,14 @@
 {
-  "name": "Nerdy Coder Clones",
-  "symbol": "NCC",
-  "total_supply": 1000,
-  "chain_symbol": "MATIC",
-  "chain": "Polygon",
-  "chain_id": 137,
-  "address": "0x827acb09a2dc20e39c9aad7f7190d9bc53534192",
+  "name": "RuShroom(s)z",
+  "symbol": "RSRMZ",
+  "total_supply": 5000,
+  "chain_symbol": "ETH",
+  "chain": "Ethereum",
+  "chain_id": 1,
+  "address": "0x1483c67d318951ea7ffdc01c4aba798288e7835c",
+  "gas_limit": 120000,
+  "gas_multiplier": 120000,
+  "scan": "https://etherscan.io/token/0x1483c67d318951ea7ffdc01c4aba798288e7835c",
   "abi": [
     {
       "inputs": [

src/styles/styles.css

@@ -1,17 +1,17 @@
 :root {
-  --button-bg: #8522c7;
-  --button-active-bg: #681d9b;
+  --button-bg: #ec780c;
+  --button-active-bg: #cc6505;
   --small-button-bg: #919191;
   --small-button-active-bg: #646464;
   --button-text: #ffffff;
   --card: #ffffff;
   --accountText: #ffffff;
-  --statusText: #470068;
-  --bg-gradient_1: rgb(162, 196, 240);
-  --bg-gradient_2: rgb(240, 162, 217);
-  --gradient_1: rgb(83, 152, 243);
-  --gradient_2: rgb(236, 71, 214);
-  --gradient_3: rgb(241, 204, 80);
+  --statusText: #5e2d00;
+  --bg-gradient_1: rgb(54, 54, 54);
+  --bg-gradient_2: rgb(226, 117, 67);
+  --gradient_1: rgb(243, 107, 83);
+  --gradient_2: rgb(66, 66, 66);
+  --gradient_3: rgb(83, 80, 241);
   --success: #24a13f;
   --warning: #ca5824;
   --error: #ca2f24;
@@ -82,7 +82,16 @@ body {
 
 .card_header_image {
   position: absolute;
-  width: 120%;
+  width: 100%;
+}
+
+.card_logo_image {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  top: 20px;
+  left: 20px;
 }
 
 .card_body {