final fixes

thenamespace · Nov 19, 2024 · 7950477 · 7950477
1 parent 9290cca
commit 7950477
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 43 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/MintForm.tsx b/src/components/MintForm.tsx
@@ -28,7 +28,7 @@ const namespaceClient = createNamespaceClient({
 const ETH_COIN = 60;
 const OP_COIN = 2147483658;
 
-const MAX_COUNT = 469;
+const MAX_COUNT = 737;
 
 const getRandomPunkImage = () => {
   const randomIndex = Math.floor(Math.random() * MAX_COUNT) + 1;
@@ -155,10 +155,23 @@ export const MintForm = () => {
       );
     } catch (err: any) {
       setMintState({ ...mintState, waitingWallet: false });
-      if (err.details) {
-        toast(err.details);
-      } else if (err?.response?.data) {
-        toast(err.response?.data?.message);
+      if (err.details && err.details.includes) {
+        const deniedErr =
+          err.details.includes("User rejected the request") ||
+          err.details.includes("User denied transaction signature");
+          const noFundsErr = err.details.includes("insufficient funds for gas")
+        if (!deniedErr && !noFundsErr) {
+          toast(err.details, { className: "tech-toasty", type: "error"});
+        }
+
+        if (noFundsErr) {
+          toast("Insufficient balance", { className: "tech-toasty", type:"error" });
+        }
+
+      } else if (err.response && err.response?.data?.message) {
+        toast(err.response?.data?.message, { className: "tech-toasty", type: "error"});
+      } else {
+        toast("Unexpected error happened :(", { className: "tech-toasty", type: "error"})
       }
       return;
     }
@@ -181,11 +194,16 @@ export const MintForm = () => {
       }, 8000);
     } catch (err: any) {
       setMintStep(MintSteps.Start);
-      const deniedErr =
-        err.details.includes("User rejected the request") ||
-        err.details.includes("User denied transaction signature");
-      if (!deniedErr) {
-        toast(err.details);
+      console.error(err);
+      if (err.details && err.details.includes) {
+        const deniedErr =
+          err.details.includes("User rejected the request") ||
+          err.details.includes("User denied transaction signature");
+        if (!deniedErr) {
+          toast(err.details, { className: "tech-toasty", type: "error"});
+        }
+      } else {
+        toast("Unexpected error happened :(", { className: "tech-toasty", type: "error"})
       }
     } finally {
       setMintState({ ...mintState, waitingTx: false, waitingWallet: false });
@@ -210,22 +228,18 @@ export const MintForm = () => {
             <p style={{fontSize:24, color:"white"}} className="text-center">Credit Cost</p>
             <div className="d-flex price justify-content-between align-items-center w-100" style={{color:"white"}}>
                <p>1 Letters</p>
-               <p>100$</p>
+               <p>50$</p>
             </div>
             <div className="d-flex price justify-content-between align-items-center w-100" style={{color:"white"}}>
                <p>2 Letters</p>
-               <p>45$</p>
-            </div>
-            <div className="d-flex price justify-content-between align-items-center w-100" style={{color:"white"}}>
-               <p>3 Letters</p>
                <p>25$</p>
             </div>
             <div className="d-flex price justify-content-between align-items-center w-100" style={{color:"white"}}>
-               <p>4 Letters</p>
+               <p>3 Letters</p>
                <p>5$</p>
             </div>
             <div className="d-flex price justify-content-between align-items-center w-100" style={{color:"white"}}>
-               <p>5+ Letters</p>
+               <p>4+ Letters</p>
                <p>Free</p>
             </div>
           </div>
@@ -240,7 +254,7 @@ export const MintForm = () => {
               <div className="d-flex flex-column align-items-center">
                 <div className="cost-info d-flex align-items-center" onClick={() => setShowCostModal(true)}>
                   <TbAlertSquare className="me-1"/>
-                  <div>Credit cost</div>
+                  <div>Subname cost</div>
                 </div>
                 <div className="tech-avatar-cont mb-3 d-flex align-items-center justify-content-center m-auto">
                   {!punkAvatar.generating && (

diff --git a/src/components/SideModal.scss b/src/components/SideModal.scss
@@ -57,10 +57,16 @@
       border-top-left-radius: 25px;
       border-top-right-radius: 25px;
       position: fixed;
-      top: 100px;
+      top: 50px;
       right: 0px;
       z-index: 10;
       border: 1px solid $lightblue;
+      .btn-container {
+        height: 60px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
     }
   }
 }
diff --git a/src/components/SinglePunk.scss b/src/components/SinglePunk.scss
@@ -22,6 +22,11 @@
         }
     }
 
+    .update-btn {
+        padding: 0px 10px;
+        margin-top: 10px;
+    }
+
     .record-container {
         padding: 20px;
         display: flex;
@@ -55,4 +60,39 @@
             }
         }
     }
-}
+}
+
+@media (max-width: 660px) {
+    .single-punk {
+        .avatar {
+            width: 90px;
+            height: 90px;
+            border-radius: 100%;
+            outline: 2px solid #FFF;
+        }
+        .subtext {
+            font-size: 18px;
+        }
+        .mainnav {
+            font-size: 14px;
+        }
+        .record-container {
+            padding: 5px !important;
+        }
+        .record-badge {
+            font-size: 13px;
+            .address {
+                width: 15px;
+                height: 15px;
+            }
+        }
+        .btn-plain {
+            height: 35px;
+        }
+
+        .input-label {
+            font-size: 13px;
+        }
+    }
+  }
+
diff --git a/src/components/SinglePunk.tsx b/src/components/SinglePunk.tsx
@@ -8,7 +8,6 @@ import {
   isAddress,
   namehash,
   parseAbi,
-  toBytes,
   toHex,
   hexToBytes,
 } from "viem";
@@ -26,12 +25,14 @@ import {
 } from "wagmi";
 import { optimism } from "viem/chains";
 import { validate as isValidBtcAddress } from "bitcoin-address-validation";
+import { toast } from "react-toastify";
 
 const resolverAbi = parseAbi([
   "function setText(bytes32 node, string key, string value) external",
   "function setAddr(bytes32 node, uint256 coinType, bytes value) external",
 ]);
 const opResolver = getL2ChainContracts("optimism").resolver;
+type TxState = "pending" | "success" | "failed"
 
 export const SinglePunk = ({
   punk,
@@ -46,11 +47,19 @@ export const SinglePunk = ({
   const { chain, address } = useAccount();
 
   const [selectedCoin, setSelectedCoin] = useState(60);
-  const [selectedText, setSelectedText] = useState("");
+  const [selectedText, setSelectedText] = useState("nick");
   const [addresseValues, setAddressValues] = useState<Record<number, string>>(
     {}
   );
 
+  const [btnState, setBtnState] = useState<{
+    waitingWallet: boolean
+    waitingTx: boolean
+  }>({
+    waitingTx: false,
+    waitingWallet: false
+  })
+
   const [textValues, setTextValues] = useState<Record<string, string>>({});
   const [currentNav, setCurrentNav] = useState<"text" | "addr">("addr");
 
@@ -255,18 +264,57 @@ export const SinglePunk = ({
 
     const resolverData = toResolverData();
 
-    const resp = await publicClient!!.simulateContract({
-      abi: parseAbi(["function multicall(bytes[] data) external"]),
-      address: opResolver,
-      functionName: "multicall",
-      args: [resolverData],
-      account: address!!,
-    });
+    try {
+      const resp = await publicClient!!.simulateContract({
+        abi: parseAbi(["function multicall(bytes[] data) external"]),
+        address: opResolver,
+        functionName: "multicall",
+        args: [resolverData],
+        account: address!!,
+      });
+
+      try {
+        setBtnState({waitingWallet: true, waitingTx: false})
+        const tx =  await walletClient!!.writeContract(resp.request);
+        setBtnState({waitingTx: true, waitingWallet: false})
+
+
+        await publicClient?.waitForTransactionReceipt({hash: tx, confirmations:2})
+        setBtnState({waitingTx: false, waitingWallet: false})
+
+        toast("Records updated successfully!", {position: "top-center", className: "tech-toasty"})
+
+        setTimeout(() => {
+          onUpdate()
+        },3000)
+
+      } catch(err: any) {
+        if (err.details) {
+          sendToast(err.details)
+        }
+      } finally {
+        setBtnState({waitingTx: false, waitingWallet: false})
+      }
+
+    } catch(err:any) {
+      if (err.details) {
+        sendToast(err.details)
+      } else if (err.response) {
+        sendToast(err.response?.data?.message)
+      } else {
+        sendToast("Unknown error ocurred :(")
+      }
 
-    const tx = await walletClient!!.writeContract(resp.request);
-    console.log(tx);
+    }
   };
 
+  const sendToast = (obj: any) => {
+    toast(obj,  {type: "error", className: "tech-toasty"});
+  }
+
+  const mintBtnLabel = btnState.waitingTx ? "Waiting for tx..." : btnState.waitingWallet ? "Waiting for wallet..." : "Update"
+  const mintBtnLoading = btnState.waitingTx || btnState.waitingWallet;
+
   return (
     <div className="single-punk">
       <div className="d-flex align-items-center flex-column">
@@ -287,13 +335,14 @@ export const SinglePunk = ({
           Texts
         </div>
       </div>
-      <div className="p-3">
+      <div className="update-btn">
         <PlainBtn
-          disabled={!hasRecordUpdates}
+          loading={mintBtnLoading}
+          disabled={!hasRecordUpdates || mintBtnLoading}
           onClick={handleUpdate}
           className="w-100"
         >
-          Update
+         {mintBtnLabel}
         </PlainBtn>
       </div>
       {/* ADDRESSES */}
@@ -314,8 +363,8 @@ export const SinglePunk = ({
                 </div>
               ))}
             </div>
-            <div className="w-100 mt-3">
-              <div style={{ color: "white" }} className="mt-1 mb-2">
+            <div className="w-100 mt-2">
+              <div style={{ color: "white" }} className="mt-1 mb-1 input-label">
                 {addressMetadata.name} address
               </div>
               <input
@@ -340,7 +389,7 @@ export const SinglePunk = ({
       {/* TEXTS */}
       {currentNav === "text" && (
         <>
-          <div className="record-container d-flex flex-column mt-3 align-items-center">
+          <div className="record-container d-flex flex-column align-items-center">
             <div className="d-flex flex-wrap justify-content-center">
               {Object.values(KnownTexts).map((txt) => (
                 <div
@@ -374,8 +423,8 @@ export const SinglePunk = ({
             </div>
             {selectedText && (
               <div className="w-100">
-                <div className="mb-2 mb-2">
-                  {textMetadata.label} record value
+                <div className="mb-1 input-label mb-1">
+                  {textMetadata.label} record
                 </div>
                 <input
                   value={textValues[selectedText] || ""}
@@ -392,4 +441,4 @@ export const SinglePunk = ({
       )}
     </div>
   );
-};
+}
diff --git a/src/components/TechBtn.tsx b/src/components/TechBtn.tsx
@@ -1,8 +1,10 @@
 import { ButtonHTMLAttributes, forwardRef } from "react";
+import { Spinner } from "./Spinner";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   text?: string;
   disabled?: boolean;
+  loading?: boolean
 }
 
 export const TechButton = forwardRef((props: ButtonProps, ref) => {
@@ -39,7 +41,11 @@ export const PlainBtn = (props: ButtonProps) => {
         props.className || ""
       }`}
     >
+      <div className="d-flex align-items-center justify-content-center">
+        {props.loading && <div className="me-2"><Spinner/></div>}
       {props.children}
+      </div>
+
     </button>
   );
 };
diff --git a/src/components/TechToasty.scss b/src/components/TechToasty.scss
@@ -0,0 +1,4 @@
+.tech-toasty {
+    border: 1px solid $lightblue !important;
+    background-color: rgb(0,0,0, 0.76) !important;
+}
diff --git a/src/components/_styles.scss b/src/components/_styles.scss
@@ -6,4 +6,5 @@
 @import "./TechContainerBg.scss";
 @import "./MyPunks.scss";
 @import "./SideModal.scss";
-@import "./SinglePunk.scss";
+@import "./SinglePunk.scss";
+@import "./TechToasty.scss";