MEP 16/09/2024

components/UI/modalProfilePic.tsx

@@ -7,7 +7,7 @@ import ClickableAction from "./iconsComponents/clickableAction";
 import theme from "../../styles/theme";
 import DoneFilledIcon from "./iconsComponents/icons/doneFilledIcon";
 import ArrowLeftIcon from "./iconsComponents/icons/arrowLeftIcon";
-import { useContractWrite } from "@starknet-react/core";
+import { useSendTransaction } from "@starknet-react/core";
 import { Call } from "starknet";
 import identityChangeCalls from "../../utils/callData/identityChangeCalls";
 import { hexToDecimal, toUint256 } from "../../utils/feltService";
@@ -32,7 +32,7 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
 }) => {
   const [callData, setCallData] = useState<Call[]>([]);
   const { addTransaction } = useNotificationManager();
-  const { writeAsync: execute, data: updateData } = useContractWrite({
+  const { sendAsync: execute, data: updateData } = useSendTransaction({
     calls: callData,
   });
 

components/discount/freeRegisterCheckout.tsx

@@ -24,7 +24,7 @@ import usePaymaster from "@/hooks/paymaster";
 
 type FreeRegisterCheckoutProps = {
   domain: string;
-  duration: number;
+  durationInDays: number;
   goBack: () => void;
   couponCode?: boolean;
   couponHelper?: string;
@@ -33,14 +33,15 @@ type FreeRegisterCheckoutProps = {
 
 const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
   domain,
-  duration,
+  durationInDays,
   goBack,
   couponCode,
   couponHelper,
   banner,
 }) => {
   const [targetAddress, setTargetAddress] = useState<string>("");
   const [callData, setCallData] = useState<Call[]>([]);
+  const [loadingCallData, setLoadingCallData] = useState<boolean>(true);
   const [salt, setSalt] = useState<string | undefined>();
   const encodedDomain = utils
     .encodeDomain(domain)
@@ -67,6 +68,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
     loadingDeploymentData,
     refreshRewards,
     invalidTx,
+    txError,
     loadingTypedData,
   } = usePaymaster(
     callData,
@@ -76,7 +78,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
       );
       if (transactionHash) setTransactionHash(transactionHash);
     },
-    !coupon
+    loadingCallData
   );
 
   useEffect(() => {
@@ -107,7 +109,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
   }, [salt]);
 
   useEffect(() => {
-    if (signature[0] === null) return;
+    if (!signature[0]) return;
     // Variables
     const newTokenId: number = Math.floor(Math.random() * 1000000000000);
     setTokenId(newTokenId);
@@ -118,7 +120,8 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
       signature,
       txMetadataHash
     );
-    return setCallData(freeRegisterCalls);
+    setCallData(freeRegisterCalls);
+    setLoadingCallData(false);
   }, [metadataHash, encodedDomain, signature]);
 
   function changeCoupon(value: string): void {
@@ -146,17 +149,8 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
 
   useEffect(() => {
     if (!coupon) return setLoadingCoupon(false);
-    const lastSuccessCoupon = localStorage.getItem("lastSuccessCoupon");
-    if (coupon === lastSuccessCoupon) {
-      setCouponError("");
-      setLoadingCoupon(false);
-      const signature = JSON.parse(
-        localStorage.getItem("couponSignature") as string
-      );
-      setSignature(signature);
-      return;
-    }
     if (!address) return;
+    setLoadingCallData(true);
     getFreeDomain(address, `${domain}.stark`, coupon).then((res) => {
       if (res.error)
         setCouponError(
@@ -166,9 +160,6 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
         const signature = [res.r, res.s];
         setSignature(signature);
         setCouponError("");
-        // Write in local storage
-        localStorage.setItem("lastSuccessCoupon", coupon);
-        localStorage.setItem("couponSignature", JSON.stringify(signature));
       }
       setLoadingCoupon(false);
     });
@@ -198,20 +189,26 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
           </div>
         </div>
         <div className={styles.summary}>
-          <FreeRegisterSummary duration={duration} domain={domain} />
+          <FreeRegisterSummary
+            durationInDays={durationInDays}
+            domain={domain}
+          />
           <Divider className="w-full" />
           <TermCheckbox
             checked={termsBox}
             onChange={() => setTermsBox(!termsBox)}
           />
+          {invalidTx && txError?.message ? (
+            <p className={styles.errorMessage}>{txError.message}</p>
+          ) : null}
           {address ? (
             <Button
               onClick={handleRegister}
               disabled={
                 (domainsMinting.get(encodedDomain) as boolean) ||
                 !account ||
                 !coupon ||
-                !duration ||
+                !durationInDays ||
                 !targetAddress ||
                 !termsBox ||
                 Boolean(couponError) ||
@@ -225,9 +222,11 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
                 ? "Please accept terms & policies"
                 : couponError || !coupon
                 ? "Enter a valid Coupon"
+                : loadingCallData
+                ? "Loading call data"
                 : loadingGas
                 ? invalidTx
-                  ? "Invalid signature"
+                  ? txError?.short
                   : "Loading gas"
                 : loadingTypedData
                 ? "Building typed data"

components/discount/freeRegisterPresentation.tsx

@@ -10,7 +10,7 @@ type FreeRegisterPresentationProps = {
   title: { desc: string; catch: string; descAfter?: string };
   desc: string;
   image: string;
-  expiry: number;
+  expiry?: number;
 };
 
 const FreeRegisterPresentation: FunctionComponent<
@@ -42,7 +42,7 @@ const FreeRegisterPresentation: FunctionComponent<
             className={styles.illustrationVariant}
             alt="Registration illustration"
           />
-          <Timer expiry={expiry} fixed />
+          {expiry && <Timer expiry={expiry} fixed />}
         </div>
       </div>
     </div>

components/discount/freeRegisterSummary.tsx

@@ -1,22 +1,22 @@
 import React, { FunctionComponent } from "react";
 import styles from "../../styles/components/registerV3.module.css";
-import { getYearlyPrice } from "@/utils/priceService";
+import { getDisplayablePrice, getYearlyPriceWei } from "@/utils/priceService";
 import DoneIcon from "../UI/iconsComponents/icons/doneIcon";
 import { useAccount } from "@starknet-react/core";
 
 type FreeRegisterSummaryProps = {
-  duration: number;
+  durationInDays: number;
   domain: string;
 };
 
 const FreeRegisterSummary: FunctionComponent<FreeRegisterSummaryProps> = ({
   domain,
-  duration,
+  durationInDays,
 }) => {
   const { address } = useAccount();
 
   function getMessage() {
-    return `${Math.floor(duration / 30)} months of domain registration`;
+    return `${Math.floor(durationInDays / 30)} months of domain registration`;
   }
 
   return (
@@ -26,7 +26,9 @@ const FreeRegisterSummary: FunctionComponent<FreeRegisterSummaryProps> = ({
         <div className={styles.priceContainer}>
           <p className={styles.legend}>{getMessage()}</p>
           <p>
-            <span className="line-through">{getYearlyPrice(domain)} ETH</span>
+            <span className="line-through">
+              {getDisplayablePrice(getYearlyPriceWei(domain))} ETH
+            </span>
             &nbsp;&nbsp;
             <strong>Free</strong>
           </p>