Merge branch 'testnet' into feat/add-renewal-page

lfglabs-dev · Oct 11, 2023 · 3201e33 · 3201e33
2 parents d0aee95 + 62d920b
commit 3201e33
Show file tree

Hide file tree

Showing 67 changed files with 2,260 additions and 3,613 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+bun.lockb
 
 # testing
 /coverage

diff --git a/components/UI/backButton.tsx b/components/UI/backButton.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/components/backButton.module.css";
+import ArrowLeftIcon from "./iconsComponents/icons/arrowLeftIcon";
+import theme from "../../styles/theme";
+
+type BackButtonProps = {
+  onClick: () => void;
+};
+
+const BackButton: FunctionComponent<BackButtonProps> = ({ onClick }) => (
+  <button onClick={onClick} className={styles.backButton}>
+    <ArrowLeftIcon color={theme.palette.secondary.main} width="24" />
+    <p className={styles.backButtonLabel}>Back</p>
+  </button>
+);
+
+export default BackButton;
diff --git a/components/UI/inputHelper.tsx b/components/UI/inputHelper.tsx
@@ -0,0 +1,45 @@
+import React, { FunctionComponent, ReactNode } from "react";
+import { Tooltip, TooltipProps, styled, tooltipClasses } from "@mui/material";
+import InfoIcon from "./iconsComponents/icons/infoIcon";
+
+type InputHelperProps = {
+  children: ReactNode;
+  helperText?: string;
+  error?: boolean;
+};
+
+const StyledToolTip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} arrow classes={{ popper: className }} />
+))(() => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: "#454545",
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "#454545",
+  },
+}));
+
+const InputHelper: FunctionComponent<InputHelperProps> = ({
+  children,
+  helperText,
+  error = false,
+}) => {
+  return (
+    <div className="relative">
+      {children}
+      {helperText ? (
+        <StyledToolTip
+          className="cursor-pointer"
+          title={helperText}
+          placement="top"
+        >
+          <div className="absolute top-1/2 -translate-y-1/2 right-2 bg-white">
+            <InfoIcon width="28px" color={error ? "red" : "#454545"} />
+          </div>
+        </StyledToolTip>
+      ) : null}
+    </div>
+  );
+};
+
+export default InputHelper;
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -137,7 +137,7 @@ const Navbar: FunctionComponent = () => {
 
   return (
     <>
-      <div className={"fixed w-full z-[1] bg-background"}>
+      <div className={"fixed w-full z-[1] bg-background top-0"}>
         <div className={styles.navbarContainer}>
           <div className="ml-4">
             <Link href="/" className="cursor-pointer">

diff --git a/components/UI/textField.tsx b/components/UI/textField.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
 import styles from "../../styles/components/textField.module.css";
-import { OutlinedInputProps, Tooltip } from "@mui/material";
-import InfoIcon from "./iconsComponents/icons/infoIcon";
+import { OutlinedInputProps } from "@mui/material";
 import { TextField as TextFieldMui } from "@mui/material";
+import InputHelper from "./inputHelper";
 
 type TextFieldProps = {
   label: string;
@@ -32,41 +32,31 @@ const TextField: FunctionComponent<TextFieldProps> = ({
   return (
     <div className="flex flex-col w-full">
       <div className="flex gap-1 my-1">
-        {helperText ? (
-          <Tooltip
-            className="cursor-pointer"
-            title={helperText}
-            placement="top"
-          >
-            <div>
-              <InfoIcon width="20px" color={error ? "red" : "#454545"} />
-            </div>
-          </Tooltip>
-        ) : null}
         {error ? (
           <p className={styles.errorLegend}>{errorMessage}</p>
         ) : (
           <p className={styles.legend}>{label}</p>
         )}
         {required ? "*" : ""}
       </div>
-
-      <TextFieldMui
-        type={type}
-        error={error}
-        fullWidth
-        value={value}
-        variant="outlined"
-        onChange={onChange}
-        color={color}
-        InputProps={{
-          classes: {
-            root: styles.textfield,
-          },
-        }}
-        required={required}
-        placeholder={placeholder}
-      />
+      <InputHelper helperText={helperText} error={error}>
+        <TextFieldMui
+          type={type}
+          error={error}
+          fullWidth
+          value={value}
+          variant="outlined"
+          onChange={onChange}
+          color={color}
+          InputProps={{
+            classes: {
+              root: styles.textfield,
+            },
+          }}
+          required={required}
+          placeholder={placeholder}
+        />
+      </InputHelper>
     </div>
   );
 };

diff --git a/components/discount/discountEndScreen.tsx b/components/discount/discountEndScreen.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from "react";
 import styles from "../../styles/discount.module.css";
+import homeStyles from "../../styles/Home.module.css";
 
 type DiscountEndScreenProps = {
   image: string;
@@ -11,9 +12,11 @@ const DiscountEndScreen: FunctionComponent<DiscountEndScreenProps> = ({
   title,
 }) => {
   return (
-    <div className={styles.container}>
-      <img src={image} className={styles.illustration} />
-      <h1 className={styles.title}>{title}</h1>
+    <div className={homeStyles.wrapperScreen}>
+      <div className="flex flex-col justify-center items-center">
+        <img src={image} width={350} />
+        <h1 className={`${styles.title} mt-5`}>{title}</h1>
+      </div>
     </div>
   );
 };

diff --git a/components/discount/registerDiscount.tsx b/components/discount/registerDiscount.tsx
@@ -27,7 +27,7 @@ import RegisterCheckboxes from "../domains/registerCheckboxes";
 import RegisterSummary from "../domains/registerSummary";
 import salesTax from "sales-tax";
 import Wallets from "../UI/wallets";
-import registerCalls from "../../utils/registerCalls";
+import registrationCalls from "../../utils/callData/registrationCalls";
 import UsForm from "../domains/usForm";
 import { computeMetadataHash, generateSalt } from "../../utils/userDataService";
 import ArrowLeftIcon from "../UI/iconsComponents/icons/arrows/arrowLeftIcon";
@@ -83,7 +83,7 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
     });
   const { writeAsync: execute, data: registerData } = useContractWrite({
     // calls: renewalBox
-    //   ? callData.concat(registerCalls.renewal(encodedDomain, price))
+    //   ? callData.concat(registrationCalls.renewal(encodedDomain, price))
     //   : callData,
     calls: callData,
   });
@@ -161,9 +161,9 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
       hexToDecimal(address) === hexToDecimal(targetAddress);
     // Common calls
     const calls = [
-      registerCalls.mint(newTokenId),
-      registerCalls.approve(price),
-      registerCalls.buy_discounted(
+      registrationCalls.mint(newTokenId),
+      registrationCalls.approve(price),
+      registrationCalls.buy_discounted(
         encodedDomain,
         newTokenId,
         targetAddress,
@@ -175,12 +175,12 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
 
     // If the user is a US resident, we add the sales tax
     if (salesTaxRate) {
-      calls.unshift(registerCalls.vatTransfer(salesTaxAmount)); // IMPORTANT: We use unshift to put the call at the beginning of the array
+      calls.unshift(registrationCalls.vatTransfer(salesTaxAmount)); // IMPORTANT: We use unshift to put the call at the beginning of the array
     }
 
     // If the user do not have a main domain and the address match
     if (addressesMatch && !hasMainDomain) {
-      calls.push(registerCalls.addressToDomain(encodedDomain));
+      calls.push(registrationCalls.addressToDomain(encodedDomain));
     }
 
     // Merge and set the call data
@@ -198,7 +198,7 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
 
   useEffect(() => {
     if (!registerData?.transaction_hash) return;
-    posthog?.capture("register", { onForceEmail });
+    posthog?.capture("register");
 
     // register the metadata to the sales manager db
     fetch(`${process.env.NEXT_PUBLIC_SALES_SERVER_LINK}/add_metadata`, {
@@ -236,22 +236,6 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
     }
   }, [isUsResident, usState, price]);
 
-  // AB Testing
-  const [onForceEmail, setOnForceEmail] = useState<boolean>();
-  useEffect(() => {
-    posthog.onFeatureFlags(function () {
-      // feature flags should be available at this point
-      if (
-        posthog.getFeatureFlag("onforceEmail") == "test" ||
-        process.env.NEXT_PUBLIC_IS_TESTNET === "true"
-      ) {
-        setOnForceEmail(true);
-      } else {
-        setOnForceEmail(false);
-      }
-    });
-  }, []);
-
   return (
     <div className={styles.container}>
       <div className={styles.card}>
@@ -266,7 +250,7 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
           </div>
           <div className="flex flex-col items-start gap-6 self-stretch">
             <TextField
-              helperText="Please understand that entering your email is not mandatory to register a domain, we won't share your email with anyone. We'll use it only to inform you about your domain and our news."
+              helperText="We won't share your email with anyone. We'll use it only to inform you about your domain and our news, you can unsubscribe at any moment."
               label="Email address"
               value={email}
               onChange={(e) => changeEmail(e.target.value)}

diff --git a/components/domains/domainMenu.tsx b/components/domains/domainMenu.tsx