feat: free registration starknetCC problems

lfglabs-dev · Jul 15, 2024 · 3975779 · 3975779
1 parent bd658e6
commit 3975779
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 210 deletions.
diff --git a/components/UI/connectButton.tsx b/components/UI/connectButton.tsx
@@ -40,7 +40,7 @@ const ConnectButton: FunctionComponent = () => {
               className={styles.btnIcon}
             />
           ) : null}
-          <p>Connect wallet</p>
+          <p className="mx-auto">Connect wallet</p>
           {lastConnector ? (
             <div
               className={styles.arrowDown}

diff --git a/components/discount/freeRegisterCheckout.tsx b/components/discount/freeRegisterCheckout.tsx
@@ -7,7 +7,7 @@ import { getDomainWithStark } from "../../utils/stringService";
 import { posthog } from "posthog-js";
 import styles from "../../styles/components/registerV2.module.css";
 import TextField from "../UI/textField";
-import { Divider } from "@mui/material";
+import { Divider, useMediaQuery } from "@mui/material";
 import registrationCalls from "../../utils/callData/registrationCalls";
 import { computeMetadataHash, generateSalt } from "../../utils/userDataService";
 import BackButton from "../UI/backButton";
@@ -61,30 +61,21 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
   const [transactionHash, setTransactionHash] = useState<string | undefined>();
   const {
     handleRegister,
-    data: registerData,
     paymasterRewards,
     gasTokenPrices,
     gasTokenPrice,
     loadingGas,
-    gasMethod,
-    setGasMethod,
     gaslessCompatibility,
     setGasTokenPrice,
-    sponsoredDeploymentAvailable,
     maxGasTokenAmount,
     loadingDeploymentData,
   } = usePaymaster(callData, async (transactionHash) => {
     setDomainsMinting((prev) =>
       new Map(prev).set(encodedDomain.toString(), true)
     );
-    console.log(transactionHash);
     if (transactionHash) setTransactionHash(transactionHash);
   });
-
-  useEffect(() => {
-    if (!registerData?.transaction_hash) return;
-    setTransactionHash(registerData.transaction_hash);
-  }, [registerData]);
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   // on first load, we generate a salt
   useEffect(() => {
@@ -142,11 +133,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
   }, [transactionHash, tokenId]);
 
   useEffect(() => {
-    if (!coupon) {
-      setCouponError("Please enter a coupon code");
-      setLoadingCoupon(false);
-      return;
-    }
+    if (!coupon) return setLoadingCoupon(false);
     const lastSuccessCoupon = localStorage.getItem("lastSuccessCoupon");
     if (coupon === lastSuccessCoupon) {
       setCouponError("");
@@ -178,78 +165,82 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
   return (
     <div className={styles.container}>
       <div className={styles.card}>
-        <div className={styles.form}>
-          <BackButton onClick={() => goBack()} />
-          <div className="flex flex-col items-start gap-4 self-stretch">
-            <p className={styles.legend}>Your registration</p>
-            <h3 className={styles.domain}>{getDomainWithStark(domain)}</h3>
-          </div>
-          <div className="flex flex-col items-start gap-6 self-stretch">
-            {couponCode ? (
-              <TextField
-                helperText={couponHelper}
-                label="Coupon code"
-                value={coupon}
-                onChange={(e) => changeCoupon(e.target.value)}
-                color="secondary"
-                error={Boolean(couponError)}
-                errorMessage={couponError}
+        {address || !isMobile ? (
+          <>
+            <div className={styles.form}>
+              <BackButton onClick={() => goBack()} />
+              <div className="flex flex-col items-start gap-4 self-stretch">
+                <p className={styles.legend}>Your registration</p>
+                <h3 className={styles.domain}>{getDomainWithStark(domain)}</h3>
+              </div>
+              <div className="flex flex-col items-start gap-6 self-stretch">
+                {couponCode ? (
+                  <TextField
+                    helperText={couponHelper}
+                    label="Coupon code"
+                    value={coupon}
+                    onChange={(e) => changeCoupon(e.target.value)}
+                    color="secondary"
+                    error={Boolean(couponError)}
+                    errorMessage={couponError}
+                  />
+                ) : null}
+              </div>
+            </div>
+            <div className={styles.summary}>
+              <FreeRegisterSummary
+                duration={duration}
+                domain={domain}
+                hasPaymasterRewards={paymasterRewards.length > 0}
+                gasTokenPrices={gasTokenPrices}
+                gasTokenPrice={gasTokenPrice}
+                setGasTokenPrice={setGasTokenPrice}
+                maxGasTokenAmount={maxGasTokenAmount}
+                deployed={gaslessCompatibility?.isCompatible}
               />
-            ) : null}
-          </div>
-        </div>
-        <div className={styles.summary}>
-          <FreeRegisterSummary
-            duration={duration}
-            domain={domain}
-            hasPaymasterRewards={paymasterRewards.length > 0}
-            gasTokenPrices={gasTokenPrices}
-            gasTokenPrice={gasTokenPrice}
-            setGasTokenPrice={setGasTokenPrice}
-            gasMethod={gasMethod}
-            setGasMethod={setGasMethod}
-            paymasterAvailable={
-              gaslessCompatibility?.isCompatible || sponsoredDeploymentAvailable
-            }
-            maxGasTokenAmount={maxGasTokenAmount}
-            deployed={gaslessCompatibility?.isCompatible}
-          />
-          <Divider className="w-full" />
-          <TermCheckbox
-            checked={termsBox}
-            onChange={() => setTermsBox(!termsBox)}
-          />
-          {address ? (
-            <Button
-              onClick={handleRegister}
-              disabled={
-                (domainsMinting.get(encodedDomain) as boolean) ||
-                !account ||
-                !duration ||
-                !targetAddress ||
-                !termsBox ||
-                Boolean(couponError) ||
-                loadingCoupon ||
-                loadingGas ||
-                loadingDeploymentData
-              }
-            >
-              {!termsBox
-                ? "Please accept terms & policies"
-                : couponError
-                ? "Enter a valid Coupon"
-                : loadingGas
-                ? "Loading gas"
-                : loadingDeploymentData
-                ? paymasterRewards.length > 0
-                  ? "Loading deployment data"
-                  : "No Paymaster reward available"
-                : "Register my domain"}
-            </Button>
-          ) : (
+              <Divider className="w-full" />
+              <TermCheckbox
+                checked={termsBox}
+                onChange={() => setTermsBox(!termsBox)}
+              />
+              {address ? (
+                <Button
+                  onClick={handleRegister}
+                  disabled={
+                    (domainsMinting.get(encodedDomain) as boolean) ||
+                    !account ||
+                    !duration ||
+                    !targetAddress ||
+                    !termsBox ||
+                    Boolean(couponError) ||
+                    loadingCoupon ||
+                    loadingGas ||
+                    loadingDeploymentData
+                  }
+                >
+                  {!termsBox
+                    ? "Please accept terms & policies"
+                    : couponError
+                    ? "Enter a valid Coupon"
+                    : loadingGas
+                    ? "Loading gas"
+                    : loadingDeploymentData
+                    ? paymasterRewards.length > 0
+                      ? "Loading deployment data"
+                      : "No Paymaster reward available"
+                    : "Register my domain"}
+                </Button>
+              ) : (
+                <ConnectButton />
+              )}
+            </div>
+          </>
+        ) : (
+          <div className={styles.form}>
+            <BackButton onClick={() => goBack()} />
             <ConnectButton />
-          )}
-        </div>
+          </div>
+        )}
       </div>
       <div
         className={styles.image}

diff --git a/components/discount/freeRegisterSummary.tsx b/components/discount/freeRegisterSummary.tsx
@@ -5,9 +5,8 @@ import DoneIcon from "../UI/iconsComponents/icons/doneIcon";
 import { GasTokenPrice } from "@avnu/gasless-sdk";
 import { tokenNames } from "@/utils/altcoinService";
 import { shortenDomain } from "@/utils/stringService";
-import StyledToolTip from "../UI/styledTooltip";
-import { GasMethod } from "@/hooks/paymaster";
 import { Alert } from "@mui/material";
+import { useAccount } from "@starknet-react/core";
 
 type FreeRegisterSummaryProps = {
   duration: number;
@@ -16,9 +15,6 @@ type FreeRegisterSummaryProps = {
   gasTokenPrices?: GasTokenPrice[];
   gasTokenPrice?: GasTokenPrice;
   setGasTokenPrice: (price: GasTokenPrice) => void;
-  gasMethod: GasMethod;
-  setGasMethod: (method: GasMethod) => void;
-  paymasterAvailable: boolean;
   maxGasTokenAmount?: bigint;
   deployed?: boolean;
 };
@@ -30,12 +26,11 @@ const FreeRegisterSummary: FunctionComponent<FreeRegisterSummaryProps> = ({
   gasTokenPrices,
   gasTokenPrice,
   setGasTokenPrice,
-  gasMethod,
-  setGasMethod,
-  paymasterAvailable,
   maxGasTokenAmount,
   deployed,
 }) => {
+  const { address } = useAccount();
+
   function getMessage() {
     return `${Math.floor(duration / 30)} months of domain registration`;
   }
@@ -56,41 +51,7 @@ const FreeRegisterSummary: FunctionComponent<FreeRegisterSummaryProps> = ({
             <strong>Free</strong>
           </p>
         </div>
-        <div className={styles.gasMethods}>
-          <button
-            disabled={gasMethod === "traditional"}
-            onClick={() => setGasMethod("traditional")}
-            className={
-              gasMethod === "traditional"
-                ? styles.gasMethodSelected
-                : styles.gasMethod
-            }
-            type="button"
-          >
-            Traditional Transaction
-          </button>
-          <StyledToolTip
-            title={`Allows you to pay less gas and choose other currencies to pay fees. ${
-              paymasterAvailable
-                ? ""
-                : "Wallet not compatible. Please deploy it or switch to ArgentX in order to use Paymaster."
-            }`}
-          >
-            <button
-              onClick={() => setGasMethod("paymaster")}
-              className={
-                gasMethod === "paymaster"
-                  ? styles.gasMethodSelected
-                  : styles.gasMethod
-              }
-              type="button"
-              disabled={!paymasterAvailable}
-            >
-              Gasless Transaction
-            </button>
-          </StyledToolTip>
-        </div>
-        {gasMethod === "paymaster" ? (
+        {address ? (
           hasPaymasterRewards ? (
             <div className="flex items-center gap-2">
               <DoneIcon width="24" color="green" />