Merge branch 'lfglabs-dev:testnet' into fix-#969

lfglabs-dev · Feb 26, 2025 · e51c595 · e51c595
2 parents 2f790de + 844b3bf
commit e51c595
Show file tree

Hide file tree

Showing 29 changed files with 595 additions and 352 deletions.
diff --git a/components/UI/iconsComponents/clickableAction.tsx b/components/UI/iconsComponents/clickableAction.tsx
@@ -20,7 +20,7 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
 }) => {
   return (
     <div
-      className={` mx-auto -space-x-1 
+      className={`
         ${
           style === "secondary"
             ? styles.clickableActionSecondary
@@ -31,9 +31,9 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
     >
       <div
         className={
-          ` ${style === "secondary"
+          style === "secondary"
             ? styles.clickableIconSecondary
-            : styles.clickableIconPrimary}`
+            : styles.clickableIconPrimary
         }
       >
         {icon}

diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -6,7 +6,9 @@ import React, {
   useContext,
 } from "react";
 import { AiOutlineMenu } from "react-icons/ai";
-import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
+import TwitterIcon from "./iconsComponents/icons/twitterIcon";
+import DiscordIcon from "./iconsComponents/icons/discordIcon";
+import GitHubIcon2 from "./iconsComponents/icons/githubIcon2";
 import styles from "../../styles/components/navbar.module.css";
 import connectStyles from "../../styles/components/walletConnect.module.css";
 import Button from "./button";
@@ -289,7 +291,7 @@ const Navbar: FunctionComponent = () => {
           }
         >
           <div
-            className={`fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in flex justify-between flex-col overflow-auto
+            className={`fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-[#FCFFFE] px-5 ease-in flex justify-between flex-col overflow-auto
               ${nav ? styles.mobileNavbarShown : styles.mobileNavbarHidden}`}
           >
             <div className="h-full flex flex-col">
@@ -378,25 +380,25 @@ const Navbar: FunctionComponent = () => {
 
             <div className="flex flex-col items-center my-4 w-full">
               <div className="text-background">
-                <Button onClick={onTopButtonClick}>{topButtonText()}</Button>
+                <Button className="!text-lg" onClick={onTopButtonClick}>{topButtonText()}</Button>
               </div>
               <div className="flex">
-                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
                   <Link href="https://twitter.com/Starknet_id" target="_blank">
-                    <FaTwitter size={28} color={theme.palette.grey[800]} />
+                    <TwitterIcon width="28" color="black" />{" "}
                   </Link>
                 </div>
-                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
                   <Link
                     href="https://discord.com/invite/8uS2Mgcsza"
                     target="_blank"
                   >
-                    <FaDiscord size={28} color={theme.palette.grey[800]} />
+                    <DiscordIcon width="28" color="#5865F2" />
                   </Link>
                 </div>
-                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                <div className="rounded-full shadow-gray-400 p-4">
                   <Link href="https://github.com/lfglabs-dev" target="_blank">
-                    <FaGithub size={28} color={theme.palette.grey[800]} />
+                    <GitHubIcon2 width="28" color="black" />
                   </Link>
                 </div>
               </div>

diff --git a/components/UI/numberTextField.tsx b/components/UI/numberTextField.tsx
@@ -34,7 +34,7 @@ const NumberTextField: FunctionComponent<NumberTextFieldProps> = ({
 }) => {
   return (
     <div className="flex flex-col w-full">
-      <div className="flex gap-1 my-[8px]">
+      <div className="flex gap-1 my-[8px] justify-center md:justify-start lg:justify-start">
         {helperText ? (
           <Tooltip
             className="cursor-pointer"

diff --git a/components/UI/timer.tsx b/components/UI/timer.tsx
@@ -30,7 +30,7 @@ const Timer: FunctionComponent<TimerProps> = ({ expiry, fixed = true }) => {
   const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
 
   return (
-    <div className={`${fixed ? `${styles.timerFixed}` : `${styles.timer}`}`}>
+    <div className={fixed ? styles.timerFixed : styles.timer}>
       <div className={styles.title}>Expires in</div>
       <div className={styles.categories}>
         <div>days</div>

diff --git a/components/domains/registerV3.tsx b/components/domains/registerV3.tsx
@@ -55,7 +55,7 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({ domain }) => {
   return (
     <>
       <div className="w-full flex flex-col xl:flex-row justify-center gap-4 px-3 py-4 lg:px-32 md:px-16 sm:py-12 xl:h-[88vh]">
-        <aside className={`${styles.purchaseStepNav}`} role="navigation">
+        <aside className={styles.purchaseStepNav} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
@@ -69,7 +69,7 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({ domain }) => {
           />
         </aside>
 
-        <div className={`${styles.purchaseStepNavMobile}`} role="navigation">
+        <div className={styles.purchaseStepNavMobile} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}

diff --git a/components/domains/renewalV2.tsx b/components/domains/renewalV2.tsx
@@ -76,7 +76,7 @@ const RenewalV2: FunctionComponent = () => {
   return (
     <>
       <div className="w-full flex flex-col xl:flex-row justify-center gap-4 px-3 py-3 lg:px-32 md:px-16 sm:pb-12 xl:min-h-[88vh] ">
-        <aside className={`${styles.purchaseStepNav}`} role="navigation">
+        <aside className={styles.purchaseStepNav} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
@@ -89,7 +89,7 @@ const RenewalV2: FunctionComponent = () => {
           />
         </aside>
 
-        <div className={`${styles.purchaseStepNavMobile}`} role="navigation">
+        <div className={styles.purchaseStepNavMobile} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}

diff --git a/components/domains/selectIdentity.tsx b/components/domains/selectIdentity.tsx
@@ -28,8 +28,7 @@ const SelectIdentity: FunctionComponent<SelectIdentityProps> = ({
   useEffect(() => {
     if (account) {
       fetch(
-        `${
-          process.env.NEXT_PUBLIC_SERVER_LINK
+        `${process.env.NEXT_PUBLIC_SERVER_LINK
         }/addr_to_available_ids?addr=${hexToDecimal(account.address)}`
       )
         .then((response) => response.json())
@@ -46,7 +45,7 @@ const SelectIdentity: FunctionComponent<SelectIdentityProps> = ({
 
   return (
     <div className="flex flex-col w-full">
-      <div className="grid place-content-center my-2 ">
+      <div className="grid place-content-center my-2 md:justify-start lg:justify-start ">
         <p className={textFieldStyles.legend}>
           Select an identity to link with your domain*
         </p>

diff --git a/components/domains/steps/getStepColor.tsx b/components/domains/steps/getStepColor.tsx
@@ -0,0 +1,7 @@
+import theme from "@/styles/theme";
+
+export const getStepColor = (currentStep: number, step: number): string => {
+  if (currentStep > step) return theme.palette.primary.main;
+  if (currentStep === step) return theme.palette.secondary.main;
+  return theme.palette.grey[200];
+};
diff --git a/components/domains/steps/registerSteps.tsx b/components/domains/steps/registerSteps.tsx
@@ -3,9 +3,8 @@ import styles from "../../../styles/components/registerV3.module.css";
 import ContactCardIcon from "@/components/UI/iconsComponents/icons/contactCardIcon";
 import PfpIcon from "@/components/UI/iconsComponents/icons/pfpIcon";
 import CartIcon from "@/components/UI/iconsComponents/icons/cartIcon";
-import theme from "@/styles/theme";
 import { Skeleton } from "@mui/material";
-import DoneFilledIcon from "@/components/UI/iconsComponents/icons/doneFilledIcon";
+import Step from "./step";
 
 type registerStepsProps = {
   currentStep: number;
@@ -14,106 +13,63 @@ type registerStepsProps = {
   isLoading?: boolean;
 };
 
-const getStep = (currentStep: number, stepIndex: number): string => {
-  if (currentStep > stepIndex) return styles.passedStep;
-  if (currentStep === stepIndex) return styles.activeStep;
-  return styles.disabledStep;
-};
-
-const getStepColor = (currentStep: number, step: number): string => {
-  if (currentStep > step) return theme.palette.primary.main;
-  if (currentStep === step) return theme.palette.secondary.main;
-  return theme.palette.grey[200];
-};
-
 const RegisterSteps: FunctionComponent<registerStepsProps> = ({
   currentStep,
   setStep,
   showPfp = true,
   isLoading = false,
 }) => {
   return isLoading ? (
-    <div className={styles.stepsContainer} role="status" aria-label="Loading registration steps">
-<div className="flex gap-2 items-center p-2">
-  <Skeleton variant="circular" width={24} height={24} />
-  <div className="w-12 sm:w-16 md:w-24 lg:w-36">
-    <Skeleton variant="text" height={20} />
-  </div>
-</div>
-<div className="flex gap-2 items-center p-2">
-  <Skeleton variant="circular" width={24} height={24} />
-  <div className="w-12 sm:w-16 md:w-24 lg:w-36">
-    <Skeleton variant="text" height={20} />
-  </div>
-</div>
-<div className="flex gap-2 items-center p-2">
-  <Skeleton variant="circular" width={24} height={24} />
-  <div className="w-12 sm:w-16 md:w-24 lg:w-36">
-    <Skeleton variant="text" height={20} />
-  </div>
-</div>
-
-    </div>
-  ) : (
-    <div className={styles.stepsContainer} aria-label="Registration steps">
-      <div
-        className={`${styles.step} ${getStep(currentStep, 1)}`}
-        onClick={() => currentStep >= 1 && setStep(1)}
-      >
-        <div className={styles.stepContent}>
-          <ContactCardIcon
-            width="20"
-            color={getStepColor(currentStep, 1)}
-          />
-          <p className={styles.stepText}>Domain</p>
+    <div
+      className={styles.stepsContainer}
+      role="status"
+      aria-label="Loading registration steps"
+    >
+      <div className="flex gap-2 items-center p-2">
+        <Skeleton variant="circular" width={24} height={24} />
+        <div className="w-12 sm:w-16 md:w-24 lg:w-36">
+          <Skeleton variant="text" height={20} />
         </div>
-        {currentStep > 1 && (
-          <DoneFilledIcon
-            width="16"
-            secondColor={theme.palette.primary.main}
-            color="#FFF"
-          />
-        )}
       </div>
-
-      {showPfp && (
-        <div
-          className={`${styles.step} ${getStep(currentStep, 2)}`}
-          onClick={() => currentStep >= 2 && setStep(2)}
-        >
-          <div className={styles.stepContent}>
-            <PfpIcon
-              width="20"
-              color={getStepColor(currentStep, 2)}
-            />
-            <p className={styles.stepText}>PFP</p>
-          </div>
-          {currentStep > 2 && (
-            <DoneFilledIcon
-              width="16"
-              secondColor={theme.palette.primary.main}
-              color="#FFF"
-            />
-          )}
+      <div className="flex gap-2 items-center p-2">
+        <Skeleton variant="circular" width={24} height={24} />
+        <div className="w-12 sm:w-16 md:w-24 lg:w-36">
+          <Skeleton variant="text" height={20} />
         </div>
-      )}
-
-      <div
-        className={`${styles.step} ${getStep(currentStep, 3)}`}
-        onClick={() => currentStep >= 3 && setStep(3)}
-      >
-        <div className={styles.stepContent}>
-          <CartIcon
-            width="20"
-            color={getStepColor(currentStep, 3)}
-          />
-          <p className={styles.stepText}>Checkout</p>
+      </div>
+      <div className="flex gap-2 items-center p-2">
+        <Skeleton variant="circular" width={24} height={24} />
+        <div className="w-12 sm:w-16 md:w-24 lg:w-36">
+          <Skeleton variant="text" height={20} />
         </div>
-        {currentStep > 3 && (
-          <DoneFilledIcon width="16" color={theme.palette.primary.main} />
-        )}
       </div>
     </div>
+  ) : (
+    <div className={styles.stepsContainer} aria-label="Registration steps">
+      <Step
+        stepIndex={1}
+        currentStep={currentStep}
+        setStep={setStep}
+        icon={<ContactCardIcon color={""} width={""} />}
+        label="Domain"
+      />
+      {showPfp && (
+        <Step
+          stepIndex={2}
+          currentStep={currentStep}
+          setStep={setStep}
+          icon={<PfpIcon color={""} width={""} />}
+          label="PFP"
+        />
+      )}
+      <Step
+        stepIndex={3}
+        currentStep={currentStep}
+        setStep={setStep}
+        icon={<CartIcon color={""} width={""} />}
+        label="Checkout"
+      />
+    </div>
   );
 };
 

diff --git a/components/domains/steps/step.tsx b/components/domains/steps/step.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import styles from "../../../styles/components/registerV3.module.css";
+import DoneFilledIcon from "@/components/UI/iconsComponents/icons/doneFilledIcon";
+import theme from "@/styles/theme";
+
+type StepProps = {
+  stepIndex: number;
+  currentStep: number;
+  setStep: (step: number) => void;
+  icon: React.ReactNode;
+  label: string;
+  showDoneIcon?: boolean;
+  allowSwitchAnytime?: boolean;
+};
+
+const Step: React.FC<StepProps> = ({
+  stepIndex,
+  currentStep,
+  setStep,
+  icon,
+  label,
+  showDoneIcon = true,
+  allowSwitchAnytime = false,
+}) => {
+  const getStep = (currentStep: number, stepIndex: number): string => {
+    if (currentStep > stepIndex)
+      return allowSwitchAnytime ? styles.unselectedStep : styles.passedStep;
+    if (currentStep === stepIndex) return styles.activeStep;
+    return allowSwitchAnytime ? styles.unselectedStep : styles.disabledStep;
+  };
+
+  const getStepColor = (currentStep: number, step: number): string => {
+    if (currentStep > step)
+      return allowSwitchAnytime ? "" : theme.palette.primary.main;
+    if (currentStep === step)
+      return allowSwitchAnytime ? "" : theme.palette.secondary.main;
+    return theme.palette.grey[200];
+  };
+
+  return (
+    <div
+      className={`${styles.step} ${getStep(currentStep, stepIndex)}`}
+      onClick={() =>
+        (allowSwitchAnytime || currentStep >= stepIndex) && setStep(stepIndex)
+      }
+    >
+      <div className={styles.stepContent}>
+        {React.cloneElement(icon as React.ReactElement, {
+          width: "20",
+          color: getStepColor(currentStep, stepIndex),
+        })}
+        <p className={styles.stepText}>{label}</p>
+      </div>
+      {showDoneIcon && currentStep > stepIndex && (
+        <DoneFilledIcon
+          width="16"
+          secondColor={theme.palette.primary.main}
+          color="#FFF"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Step;