Merge branch 'testnet' into fix-944

lfglabs-dev · Jan 28, 2025 · 1d40ddb · 1d40ddb
2 parents a71c12b + b58bcf6
commit 1d40ddb
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 21,759 deletions.
diff --git a/components/UI/iconsComponents/clickableAction.tsx b/components/UI/iconsComponents/clickableAction.tsx
@@ -20,11 +20,12 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
 }) => {
   return (
     <div
-      className={`${
-        style === "secondary"
-          ? styles.clickableActionSecondary
-          : styles.clickableActionPrimary
-      }
+      className={`
+        ${
+          style === "secondary"
+            ? styles.clickableActionSecondary
+            : styles.clickableActionPrimary
+        }
         ${width === "auto" ? styles.clickableActionAutoWidth : ""}`}
       onClick={onClick}
     >

diff --git a/components/UI/iconsComponents/icons/closeIcon.tsx b/components/UI/iconsComponents/icons/closeIcon.tsx
@@ -1,8 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 const CloseIcon: FunctionComponent = () => {
-  return (
-    <svg
+  return (<svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="17"

diff --git a/components/UI/inputHelper.tsx b/components/UI/inputHelper.tsx
@@ -25,7 +25,7 @@ const InputHelper: FunctionComponent<InputHelperProps> = ({
         >
           <div className="absolute top-1/2 -translate-y-1/2 right-2">
             <InfoIcon
-              width="28px"
+              width="20px"
               color={error ? "red" : theme.palette.grey[800]}
             />
           </div>

diff --git a/components/UI/numberTextField.tsx b/components/UI/numberTextField.tsx
@@ -64,7 +64,9 @@ const NumberTextField: FunctionComponent<NumberTextFieldProps> = ({
         color={color}
         sx={{
           "& .css-1s8tl8g-MuiInputBase-root-MuiOutlinedInput-root": {
-            fontFamily: "Poppins-Regular",
+            fontFamily: "Poppins-bold",
+            fontSize: "1.1rem",
+            backgroundColor: "#ffffff",
             borderRadius: "7.983px",
           },
         }}

diff --git a/components/domains/registerV3.tsx b/components/domains/registerV3.tsx
@@ -7,7 +7,6 @@ import CheckoutCard from "./steps/checkoutCard";
 import { useAccount } from "@starknet-react/core";
 import SelectPfp from "./steps/selectPfp";
 import RegisterSteps from "./steps/registerSteps";
-import SearchBar from "../UI/searchBar";
 import evergreenDiscounts from "@/utils/discounts/evergreen";
 
 type RegisterV3Props = {
@@ -17,7 +16,6 @@ type RegisterV3Props = {
 
 const RegisterV3: FunctionComponent<RegisterV3Props> = ({
   domain,
-  setDomain,
 }) => {
   const { address } = useAccount();
   const [currentStep, setCurrentStep] = useState(1);
@@ -57,16 +55,9 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
 
   return currentStep === 1 ? (
     <>
-      <div className="sm:w-2/5 w-4/5 mt-5 mb-5">
-        <SearchBar
-          onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
-          showHistory={false}
-        />
-      </div>
       <UserInfoForm
         type={FormType.REGISTER}
         goToNextStep={goToNextStep}
-        imageUrl="/visuals/register.webp"
       />
     </>
   ) : (

diff --git a/components/domains/renewalV2.tsx b/components/domains/renewalV2.tsx
@@ -85,7 +85,6 @@ const RenewalV2: FunctionComponent = () => {
         <UserInfoForm
           type={FormType.RENEW}
           goToNextStep={goToNextStep}
-          imageUrl="/visuals/register.webp"
         />
       )}
       {currentStep === 2 && <SelectPfp goToNextStep={goToNextStep} />}

diff --git a/components/domains/selectIdentity.tsx b/components/domains/selectIdentity.tsx
@@ -9,6 +9,7 @@ import { useAccount } from "@starknet-react/core";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { hexToDecimal } from "../../utils/feltService";
 import textFieldStyles from "../../styles/components/textField.module.css";
+import InputHelper from "../UI/inputHelper";
 
 type SelectIdentityProps = {
   tokenId: number;
@@ -27,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())
@@ -52,49 +52,58 @@ const SelectIdentity: FunctionComponent<SelectIdentityProps> = ({
             : "Select an identity to link with your domain*"}
         </p>
       </div>
-      <Select
-        fullWidth
-        value={tokenId}
-        defaultValue={ownedIdentities[0]}
-        inputProps={{ MenuProps: { disableScrollLock: true } }}
-        onChange={(e) => changeTokenId(Number(e.target.value))}
-        style={{
-          borderRadius: "8.983px",
-        }}
-        sx={{
-          "& .MuiSelect-select": {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          },
-          "& .css-10hburv-MuiTypography-root": {
-            fontFamily: "Poppins-Regular",
-          },
-        }}
-      >
-        <MenuItem value={0}>
-          <ListItemIcon>
-            <img
-              width={"30px"}
-              src="/visuals/StarknetIdLogo.svg"
-              alt="starknet.id avatar"
-            />
-          </ListItemIcon>
-          <ListItemText primary={defaultText} />
-        </MenuItem>
-        {ownedIdentities.map((tokenId: number, index: number) => (
-          <MenuItem key={index} value={tokenId}>
+      <InputHelper helperText="check how to mint a new token">
+        <Select
+          fullWidth
+          value={tokenId}
+          IconComponent={() => null}
+          defaultValue={ownedIdentities[0]}
+          inputProps={{ MenuProps: { disableScrollLock: true } }}
+          onChange={(e) => changeTokenId(Number(e.target.value))}
+          style={{
+            borderRadius: "8.983px",
+          }}
+          sx={{
+            "& .MuiSelect-select": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor: "#ffffff"
+            },
+            "& .css-10hburv-MuiTypography-root": {
+              display: "flex",
+              justifyItems: "flex-start",
+              fontFamily: "Poppins-Regular",
+            },
+            "& .css-cveggr-MuiListItemIcon-root": {
+              minWidth: "40px",
+            },
+          }}
+        >
+          <MenuItem value={0}>
             <ListItemIcon>
               <img
-                width={"25px"}
-                src={`https://identicon.starknet.id/${tokenId}`}
+                width={"30px"}
+                src="/visuals/StarknetIdLogo.svg"
                 alt="starknet.id avatar"
               />
             </ListItemIcon>
-            <ListItemText primary={tokenId} />
+            <ListItemText primary={defaultText} />
           </MenuItem>
-        ))}
-      </Select>
+          {ownedIdentities.map((tokenId: number, index: number) => (
+            <MenuItem key={index} value={tokenId}>
+              <ListItemIcon>
+                <img
+                  width={"25px"}
+                  src={`https://identicon.starknet.id/${tokenId}`}
+                  alt="starknet.id avatar"
+                />
+              </ListItemIcon>
+              <ListItemText primary={tokenId} />
+            </MenuItem>
+          ))}
+        </Select>
+      </InputHelper>
     </div>
   );
 };

diff --git a/components/domains/steps/userInfoForm.tsx b/components/domains/steps/userInfoForm.tsx
@@ -12,15 +12,16 @@ import SwissForm from "../swissForm";
 import SelectIdentity from "../selectIdentity";
 import NumberTextField from "@/components/UI/numberTextField";
 import { useAccount } from "@starknet-react/core";
-import ConnectButton from "@/components/UI/connectButton";
 import Button from "@/components/UI/button";
 import RenewalDomainsBox from "../renewalDomainsBox";
 import { areDomainSelected } from "@/utils/priceService";
+import CloseIcon from "@/components/UI/iconsComponents/icons/closeIcon";
+import ConnectButton from "@/components/UI/connectButton";
+import { useRouter } from 'next/router';
 
 type UserInfoFormProps = {
   type: FormType;
   goToNextStep: () => void;
-  imageUrl: string;
   canUpdateDuration?: boolean;
   minDuration?: number;
 };
@@ -34,8 +35,8 @@ export enum IncrementType {
 const UserInfoForm: FunctionComponent<UserInfoFormProps> = ({
   type,
   goToNextStep,
-  imageUrl,
 }) => {
+  const router = useRouter();
   const maxYearsToRegister = 25;
   const { address } = useAccount();
   const { formState, updateFormState } = useContext(FormContext);
@@ -104,27 +105,29 @@ const UserInfoForm: FunctionComponent<UserInfoFormProps> = ({
     );
   };
 
+  const handleClose = () => {
+    router.push('/');
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.card}>
+        <div className={styles.closeIcon} onClick={handleClose}>
+          <CloseIcon  />
+        </div>
         <div className={styles.form}>
-          <div className="flex flex-col items-start gap-4 self-stretch">
-            <p className={styles.legend}>{type}</p>
+          <div className="flex flex-col items-center gap-4 self-stretch">
             <h3 className={styles.domain}>{getTitle()}</h3>
           </div>
           <div className="flex flex-col items-start gap-6 self-stretch">
-
-
-            {formState.needMetadata ? (
-              <SwissForm
-                isSwissResident={formState.isSwissResident}
-                onSwissResidentChange={() =>
-                  updateFormState({
-                    isSwissResident: !formState.isSwissResident,
-                  })
-                }
-              />
-            ) : null}
+            <SwissForm
+              isSwissResident={formState.isSwissResident}
+              onSwissResidentChange={() =>
+                updateFormState({
+                  isSwissResident: !formState.isSwissResident,
+                })
+              }
+            />
             {type === FormType.REGISTER ? (
               <SelectIdentity
                 tokenId={formState.tokenId}
@@ -159,12 +162,12 @@ const UserInfoForm: FunctionComponent<UserInfoFormProps> = ({
                 {getButtonText()}
               </Button>
             ) : (
-              <ConnectButton />
+                <ConnectButton />
             )}
+
           </div>
         </div>
       </div>
-      <img className={styles.image} src={imageUrl} />
     </div>
   );
 };

diff --git a/components/identities/actions/clickable/clickableTwitterIcon.tsx b/components/identities/actions/clickable/clickableTwitterIcon.tsx
@@ -82,4 +82,4 @@ const ClickableTwitterIcon: FunctionComponent<ClickableTwitterIconProps> = ({
   ) : null;
 };
 
-export default ClickableTwitterIcon;
+export default ClickableTwitterIcon;