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

lfglabs-dev · Oct 10, 2023 · 127b875 · 127b875
2 parents d0aee95 + 62d920b
commit 127b875
Show file tree

Hide file tree

Showing 52 changed files with 1,946 additions and 3,005 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
@@ -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/registerV2.tsx b/components/domains/registerV2.tsx
@@ -219,9 +219,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
 
   useEffect(() => {
     if (!registerData?.transaction_hash || !salt) 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`, {
@@ -272,22 +270,6 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
     }
   }, [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}>
@@ -297,18 +279,16 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
             <h3 className={styles.domain}>{getDomainWithStark(domain)}</h3>
           </div>
           <div className="flex flex-col items-start gap-6 self-stretch">
-            {onForceEmail ? (
-              <TextField
-                helperText="Secure your domain's future and stay ahead with vital updates. Your email stays private with us, always."
-                label="Email address"
-                value={email}
-                onChange={(e) => changeEmail(e.target.value)}
-                color="secondary"
-                error={emailError}
-                errorMessage={"Please enter a valid email address"}
-                type="email"
-              />
-            ) : null}
+            <TextField
+              helperText="Secure your domain's future and stay ahead with vital updates. Your email stays private with us, always."
+              label="Email address"
+              value={email}
+              onChange={(e) => changeEmail(e.target.value)}
+              color="secondary"
+              error={emailError}
+              errorMessage={"Please enter a valid email address"}
+              type="email"
+            />
 
             <UsForm
               isUsResident={isUsResident}
@@ -377,7 +357,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
                 invalidBalance ||
                 !termsBox ||
                 (isUsResident && !usState) ||
-                (emailError && onForceEmail)
+                emailError
               }
             >
               {!termsBox
@@ -386,7 +366,7 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
                 ? "We need your US State"
                 : invalidBalance
                 ? "You don't have enough eth"
-                : emailError && onForceEmail
+                : emailError
                 ? "Enter a valid Email"
                 : "Register my domain"}
             </Button>

diff --git a/components/domains/selectState.tsx b/components/domains/selectState.tsx
@@ -1,4 +1,4 @@
-import { ListItemText, MenuItem, Select, useMediaQuery } from "@mui/material";
+import { ListItemText, MenuItem, Select } from "@mui/material";
 import React, { FunctionComponent } from "react";
 import textFieldStyles from "../../styles/components/textField.module.css";
 import allUsStates from "../../public/usa/allUsStates.json";
@@ -12,16 +12,10 @@ const SelectState: FunctionComponent<SelectStateProps> = ({
   usState,
   changeUsState,
 }) => {
-  const matches = useMediaQuery("(max-width: 1084px)");
-
   return (
     <div className="flex flex-col w-full">
       <div className="flex my-1">
-        <p className={textFieldStyles.legend}>
-          {matches
-            ? "Select an identity*"
-            : "Select an identity to link with your domain*"}
-        </p>
+        <p className={textFieldStyles.legend}>Select your state*</p>
       </div>
       <Select
         fullWidth