feat: add auto renewal button

components/UI/textField.tsx

@@ -15,6 +15,7 @@ type TextFieldProps = {
   placeholder?: string;
   helperText?: string;
   type?: React.InputHTMLAttributes<unknown>["type"];
+  variant?: "default" | "white";
 };
 
 const TextField: FunctionComponent<TextFieldProps> = ({
@@ -28,6 +29,7 @@ const TextField: FunctionComponent<TextFieldProps> = ({
   placeholder,
   helperText,
   type,
+  variant = "default",
 }) => {
   return (
     <div className="flex flex-col w-full">
@@ -51,6 +53,7 @@ const TextField: FunctionComponent<TextFieldProps> = ({
           InputProps={{
             classes: {
               root: styles.textfield,
+              input: variant === "white" ? styles.inputWhite : "",
             },
           }}
           required={required}

components/domains/registerCheckboxes.tsx

@@ -1,50 +1,63 @@
 import React, { FunctionComponent } from "react";
 import { Checkbox } from "@mui/material";
+import styles from "../../styles/components/variants.module.css";
 
 type RegisterCheckboxes = {
-  onChangeTermsBox: () => void;
+  onChangeTermsBox?: () => void;
   onChangeRenewalBox?: () => void;
-  termsBox: boolean;
+  termsBox?: boolean;
   renewalBox?: boolean;
+  variant?: "default" | "white";
 };
 
 const RegisterCheckboxes: FunctionComponent<RegisterCheckboxes> = ({
   onChangeRenewalBox,
   onChangeTermsBox,
   termsBox,
   renewalBox,
+  variant = "default",
 }) => {
   return (
     <div className="w-full mb-3">
       <div className="flex mt-2 flex-col sm:flex-row">
-        <div
-          className="flex items-center justify-left text-xs mr-2 cursor-pointer"
-          onClick={onChangeTermsBox}
-        >
-          <Checkbox checked={termsBox} sx={{ padding: 0 }} />
-          <p className="ml-2">
-            Accept{" "}
-            <a
-              className="underline"
-              href={process.env.NEXT_PUBLIC_STARKNET_ID + "/pdfs/Terms.pdf"}
-              target="_blank"
-              rel="noreferrer"
-            >
-              terms
-            </a>{" "}
-            &{" "}
-            <a
-              className="underline"
-              href={
-                process.env.NEXT_PUBLIC_STARKNET_ID + "/pdfs/PrivacyPolicy.pdf"
+        {onChangeTermsBox ? (
+          <div
+            className="flex items-center justify-left text-xs mr-2 cursor-pointer"
+            onClick={onChangeTermsBox}
+          >
+            <Checkbox
+              checked={termsBox}
+              className={
+                variant === "white"
+                  ? styles.whiteCheckbox
+                  : styles.defaultCheckbox
               }
-              target="_blank"
-              rel="noreferrer"
-            >
-              policies
-            </a>
-          </p>
-        </div>
+            />
+            <p className="ml-2">
+              Accept{" "}
+              <a
+                className="underline"
+                href={process.env.NEXT_PUBLIC_STARKNET_ID + "/pdfs/Terms.pdf"}
+                target="_blank"
+                rel="noreferrer"
+              >
+                terms
+              </a>{" "}
+              &{" "}
+              <a
+                className="underline"
+                href={
+                  process.env.NEXT_PUBLIC_STARKNET_ID +
+                  "/pdfs/PrivacyPolicy.pdf"
+                }
+                target="_blank"
+                rel="noreferrer"
+              >
+                policies
+              </a>
+            </p>
+          </div>
+        ) : null}
         {onChangeRenewalBox ? (
           <div
             className="flex items-center justify-left text-xs cursor-pointer"

components/domains/registerV2.tsx

@@ -36,6 +36,8 @@ import Wallets from "../UI/wallets";
 import registrationCalls from "../../utils/callData/registrationCalls";
 import { computeMetadataHash, generateSalt } from "../../utils/userDataService";
 import { getPriceFromDomain } from "../../utils/priceService";
+import RegisterCheckboxes from "./registerCheckboxes";
+import autoRenewalCalls from "../../utils/callData/autoRenewalCalls";
 
 type RegisterV2Props = {
   domain: string;
@@ -63,7 +65,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
   const encodedDomain = utils
     .encodeDomain(domain)
     .map((element) => element.toString())[0];
-  // const [renewalBox, setRenewalBox] = useState<boolean>(true);
+  const [renewalBox, setRenewalBox] = useState<boolean>(true);
   const [walletModalOpen, setWalletModalOpen] = useState<boolean>(false);
   const [sponsor, setSponsor] = useState<string>("0");
   const [salt, setSalt] = useState<string | undefined>();
@@ -85,9 +87,6 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
       args: [address],
     });
   const { writeAsync: execute, data: registerData } = useContractWrite({
-    // calls: renewalBox
-    //   ? callData.concat(registrationCalls.renewal(encodedDomain, price))
-    //   : callData,
     calls: callData,
   });
   const hasMainDomain = !useDisplayName(address ?? "", false).startsWith("0x");
@@ -115,7 +114,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
         )
       );
     })();
-  }, [email, usState, salt]);
+  }, [email, usState, salt, renewalBox]);
 
   useEffect(() => {
     // if price query does not work we use the off-chain hardcoded price
@@ -201,6 +200,21 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
       calls.push(registrationCalls.addressToDomain(encodedDomain));
     }
 
+    // If the user has toggled autorenewal
+    if (renewalBox) {
+      const limitPrice = salesTaxAmount
+        ? (parseInt(salesTaxAmount) + parseInt(price)).toString()
+        : price;
+      calls.push(
+        autoRenewalCalls.approve(),
+        autoRenewalCalls.enableRenewal(
+          encodedDomain,
+          limitPrice,
+          txMetadataHash
+        )
+      );
+    }
+
     // Merge and set the call data
     setCallData(calls);
   }, [
@@ -214,6 +228,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
     sponsor,
     metadataHash,
     salesTaxRate,
+    renewalBox,
   ]);
 
   useEffect(() => {
@@ -239,7 +254,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         tx_hash: formatHexString(registerData.transaction_hash),
-        groups,
+        groups: renewalBox ? groups : [groups[0]],
       }),
     })
       .then((res) => res.json())
@@ -341,12 +356,10 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
             isUsResident={isUsResident}
           />
           <Divider className="w-full" />
-          {/* <RegisterCheckboxes
-            // onChangeRenewalBox={() => setRenewalBox(!renewalBox)}
-            onChangeTermsBox={() => setTermsBox(!termsBox)}
-            termsBox={termsBox}
-            // renewalBox={renewalBox}
-          /> */}
+          <RegisterCheckboxes
+            onChangeRenewalBox={() => setRenewalBox(!renewalBox)}
+            renewalBox={renewalBox}
+          />
           {address ? (
             <Button
               onClick={() =>

components/domains/renewal.tsx

@@ -9,6 +9,7 @@ import {
   useTransactionManager,
 } from "@starknet-react/core";
 import {
+  formatHexString,
   isValidEmail,
   selectedDomainsToArray,
   selectedDomainsToEncodedArray,
@@ -31,8 +32,12 @@ import {
 } from "../../utils/priceService";
 import RenewalDomainsBox from "./renewalDomainsBox";
 import registrationCalls from "../../utils/callData/registrationCalls";
+import autoRenewalCalls from "../../utils/callData/autoRenewalCalls";
 import BackButton from "../UI/backButton";
 import { useRouter } from "next/router";
+import RegisterCheckboxes from "./registerCheckboxes";
+import { utils } from "starknetid.js";
+import { getPriceFromDomain } from "../../utils/priceService";
 
 type RenewalProps = {
   groups: string[];
@@ -52,7 +57,7 @@ const Renewal: FunctionComponent<RenewalProps> = ({ groups }) => {
   const { contract: etherContract } = useEtherContract();
   const [isTxModalOpen, setIsTxModalOpen] = useState(false);
   // const [termsBox, setTermsBox] = useState<boolean>(true);
-  // const [renewalBox, setRenewalBox] = useState<boolean>(true);
+  const [renewalBox, setRenewalBox] = useState<boolean>(true);
   const [walletModalOpen, setWalletModalOpen] = useState<boolean>(false);
   const [salt, setSalt] = useState<string | undefined>();
   const [metadataHash, setMetadataHash] = useState<string | undefined>();
@@ -67,9 +72,6 @@ const Renewal: FunctionComponent<RenewalProps> = ({ groups }) => {
       args: [address],
     });
   const { writeAsync: execute, data: renewData } = useContractWrite({
-    // calls: renewalBox
-    //   ? callData.concat(registrationCalls.renewal(encodedDomain, price))
-    //   : callData,
     calls: callData,
   });
   const [domainsMinting, setDomainsMinting] =
@@ -89,14 +91,24 @@ const Renewal: FunctionComponent<RenewalProps> = ({ groups }) => {
       body: JSON.stringify({
         meta_hash: metadataHash,
         email,
-        groups,
         tax_state: isUsResident ? usState : "none",
         salt: salt,
       }),
     })
       .then((res) => res.json())
       .catch((err) => console.log("Error on sending metadata:", err));
 
+    fetch(`${process.env.NEXT_PUBLIC_SALES_SERVER_LINK}/mail_subscribe`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        tx_hash: formatHexString(renewData.transaction_hash),
+        groups: renewalBox ? groups : [groups[0]],
+      }),
+    })
+      .then((res) => res.json())
+      .catch((err) => console.log("Error on registering to email:", err));
+
     addTransaction({ hash: renewData.transaction_hash });
     setIsTxModalOpen(true);
   }, [renewData, salt, email, usState]);
@@ -120,7 +132,7 @@ const Renewal: FunctionComponent<RenewalProps> = ({ groups }) => {
         )
       );
     })();
-  }, [email, usState, salt]);
+  }, [email, usState, salt, renewalBox]);
 
   useEffect(() => {
     if (!selectedDomains) return;
@@ -182,6 +194,28 @@ const Renewal: FunctionComponent<RenewalProps> = ({ groups }) => {
         calls.unshift(registrationCalls.vatTransfer(salesTaxAmount)); // IMPORTANT: We use unshift to put the call at the beginning of the array
       }
 
+      if (renewalBox) {
+        calls.push(autoRenewalCalls.approve());
+        selectedDomainsToArray(selectedDomains).map((domain) => {
+          const encodedDomain = utils
+            .encodeDomain(domain)
+            .map((element) => element.toString())[0];
+          const price = getPriceFromDomain(1, domain);
+          const allowance: string = salesTaxRate
+            ? (
+                Number(price) + applyRateToBigInt(price, salesTaxRate)
+              ).toString()
+            : price.toString();
+          calls.push(
+            autoRenewalCalls.enableRenewal(
+              encodedDomain,
+              allowance,
+              "0x" + metadataHash
+            )
+          );
+        });
+      }
+
       setCallData(calls);
     }
   }, [selectedDomains, price, salesTaxRate]);
@@ -228,12 +262,10 @@ const Renewal: FunctionComponent<RenewalProps> = ({ groups }) => {
             isUsResident={isUsResident}
           />
           <Divider className="w-full" />
-          {/* <RegisterCheckboxes
-            // onChangeRenewalBox={() => setRenewalBox(!renewalBox)}
-            onChangeTermsBox={() => setTermsBox(!termsBox)}
-            termsBox={termsBox}
-            // renewalBox={renewalBox}
-          /> */}
+          <RegisterCheckboxes
+            onChangeRenewalBox={() => setRenewalBox(!renewalBox)}
+            renewalBox={renewalBox}
+          />
           {address ? (
             <Button
               onClick={() =>

components/domains/selectState.tsx

@@ -6,11 +6,13 @@ import allUsStates from "../../public/usa/allUsStates.json";
 type SelectStateProps = {
   usState: string;
   changeUsState: (value: string) => void;
+  variant?: "default" | "white";
 };
 
 const SelectState: FunctionComponent<SelectStateProps> = ({
   usState,
   changeUsState,
+  variant = "default",
 }) => {
   return (
     <div className="flex flex-col w-full">
@@ -30,6 +32,7 @@ const SelectState: FunctionComponent<SelectStateProps> = ({
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
+            backgroundColor: variant ? "#FFFFFF" : "transparent",
           },
           "& .css-10hburv-MuiTypography-root": {
             fontFamily: "Poppins-Regular",

components/domains/usForm.tsx

@@ -6,6 +6,7 @@ import {
   RadioGroup,
 } from "@mui/material";
 import textFieldStyles from "../../styles/components/textField.module.css";
+import variantStyles from "../../styles/components/variants.module.css";
 import SelectState from "./selectState";
 import InputHelper from "../UI/inputHelper";
 
@@ -17,21 +18,29 @@ type UsFormProps = {
   ) => void;
   usState: string;
   changeUsState: (value: string) => void;
+  variant?: "default" | "white";
 };
 
 const UsForm: FunctionComponent<UsFormProps> = ({
   isUsResident,
   onUsResidentChange,
   usState,
   changeUsState,
+  variant = "default",
 }) => {
   return (
     <FormControl className="flex gap-4 w-full">
       <div className="flex flex-col">
         <div className="flex gap-1 my-1">
           <p className={textFieldStyles.legend}>Do you live in the USA ?*</p>
         </div>
-        <div className="border-solid border border-[#c4c4c4ff] rounded-[7.983px] pl-[16.5px] py-1">
+        <div
+          className={
+            variant === "white"
+              ? variantStyles.whiteUsForm
+              : variantStyles.defaultUsForm
+          }
+        >
           <InputHelper helperText="If you live in the US, we need your ZIP code due to the USA tax policy.">
             <RadioGroup
               aria-labelledby="demo-controlled-radio-buttons-group"