From 3cf64b39754531abe4e8d295e55caa248ef66900 Mon Sep 17 00:00:00 2001
From: Nico <nicomarchand29@gmail.com>
Date: Thu, 12 Sep 2024 19:09:37 +0200
Subject: [PATCH] fix: coupon errors (#875)

* fix: coupon errors

* improve call data loading message

* fix: reset error message when trying another ticket

* removing one setter
---
 components/discount/freeRegisterCheckout.tsx | 30 +++++++++-----------
 hooks/paymaster.tsx                          | 12 ++++++++
 styles/components/registerV2.module.css      |  7 +++++
 styles/components/textField.module.css       |  4 ++-
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/components/discount/freeRegisterCheckout.tsx b/components/discount/freeRegisterCheckout.tsx
index 0e002233..42a4842a 100644
--- a/components/discount/freeRegisterCheckout.tsx
+++ b/components/discount/freeRegisterCheckout.tsx
@@ -41,6 +41,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
 }) => {
   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);
     });
@@ -207,6 +198,9 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
             checked={termsBox}
             onChange={() => setTermsBox(!termsBox)}
           />
+          {invalidTx && txError?.message ? (
+            <p className={styles.errorMessage}>{txError.message}</p>
+          ) : null}
           {address ? (
             <Button
               onClick={handleRegister}
@@ -228,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"
diff --git a/hooks/paymaster.tsx b/hooks/paymaster.tsx
index be15b6f7..6399cfc9 100644
--- a/hooks/paymaster.tsx
+++ b/hooks/paymaster.tsx
@@ -28,6 +28,11 @@ import isStarknetDeployed from "./isDeployed";
 import { gaslessOptions } from "@/utils/constants";
 import { decimalToHex } from "@/utils/feltService";
 
+type ErrorMessage = {
+  message: string;
+  short: string;
+};
+
 const usePaymaster = (
   callData: Call[],
   then: (transactionHash: string) => void,
@@ -51,6 +56,7 @@ const usePaymaster = (
   const { isDeployed, deploymentData } = isStarknetDeployed(account?.address);
   const [deploymentTypedData, setDeploymentTypedData] = useState<TypedData>();
   const [invalidTx, setInvalidTx] = useState<boolean>(false);
+  const [txError, setTxError] = useState<ErrorMessage>();
 
   const argentWallet = useMemo(
     () => connector?.id === "argentX" /*|| connector?.id === "argentMobile"*/,
@@ -105,6 +111,10 @@ const usePaymaster = (
         )
         .catch((e) => {
           console.error(e);
+          const stringError = e.toString();
+          if (stringError.includes("Invalid signature"))
+            setTxError({ message: "", short: "Invalid signature" });
+          else setTxError({ message: stringError, short: "TX error" });
           setInvalidTx(true);
         });
     },
@@ -123,6 +133,7 @@ const usePaymaster = (
     if (!account || !gasTokenPrice || !gaslessCompatibility || loadingCallData)
       return;
     setLoadingGas(true);
+    setInvalidTx(false);
     estimateCalls(account, callData).then((fees) => {
       if (!fees) return;
       setInvalidTx(false);
@@ -258,6 +269,7 @@ const usePaymaster = (
     refreshRewards,
     invalidTx,
     loadingTypedData,
+    txError,
   };
 };
 
diff --git a/styles/components/registerV2.module.css b/styles/components/registerV2.module.css
index 06059c68..029310a6 100644
--- a/styles/components/registerV2.module.css
+++ b/styles/components/registerV2.module.css
@@ -180,6 +180,13 @@
   opacity: 0.7;
 }
 
+.errorMessage {
+  font-size: 12px;
+  color: rgb(210, 27, 27);
+  max-width: 100%;
+  word-break: break-word;
+}
+
 @media (max-width: 1084px) {
   .image {
     visibility: hidden;
diff --git a/styles/components/textField.module.css b/styles/components/textField.module.css
index 356a9220..774c3bef 100644
--- a/styles/components/textField.module.css
+++ b/styles/components/textField.module.css
@@ -10,7 +10,7 @@
 }
 
 .radioWhite {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border-radius: 7.983px;
   padding: 8px 15px;
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
@@ -30,6 +30,8 @@
   font-weight: 500;
   line-height: 20px; /* 142.857% */
   align-self: flex-start;
+  max-width: 100%;
+  word-break: break-word;
 }
 
 .errorLegend {