Fix: Steps for purchasing a domain #950

lfglabs-dev · Jan 26, 2025 · 13f3920 · 13f3920
1 parent 5cbdb64
commit 13f3920
Show file tree

Hide file tree

Showing 33 changed files with 912 additions and 590 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,20 @@
+NEXT_PUBLIC_SERVER_LINK=https://api.starknet.id
+NEXT_PUBLIC_STARKNET_ID=https://starknet.id
+NEXT_PUBLIC_IDENTITY_CONTRACT=0x05dbdedc203e92749e2e746e2d40a768d966bd243df04a6b712e222bc040a9af
+NEXT_PUBLIC_STARKNETID_CONTRACT=0x05dbdedc203e92749e2e746e2d40a768d966bd243df04a6b712e222bc040a9af
+NEXT_PUBLIC_NAMING_CONTRACT=0x6ac597f8116f886fa1c97a23fa4e08299975ecaf6b598873ca6792b9bbfb678
+NEXT_PUBLIC_PRICING_CONTRACT=0x035F2ca59fE00Ef8968B98EA4b79de0e82a8daC4CBc0f48E93F3dE90e65Ae568
+NEXT_PUBLIC_VERIFIER_CONTRACT=0x07d14dfd8ee95b41fce179170d88ba1f0d5a512e13aeb232f19cfeec0a88f8bf
+NEXT_PUBLIC_DEPRECATED_VERIFIER_CONTRACT=0x019e5204152a72891bf8cd0bed8f03593fdb29ceacd14fca587be5d9fcf87c0e
+NEXT_PUBLIC_OLD_VERIFIER_CONTRACT=0x4d546c8d60cfd591557ac0613be5ceeb0ea6f797e7d11c0b5160d145fa3089f
+NEXT_PUBLIC_VERIFIER_POP_CONTRACT=0x0293eb2ba9862f762bd3036586d5755a782bd22e6f5028320f1d0405fd47bff4
+NEXT_PUBLIC_ETHER_CONTRACT=0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7
+NEXT_PUBLIC_L1BUYING_CONTRACT=0x2a8f4E6A844A7cAa602E77B45651635e81EeF0ce
+NEXT_PUBLIC_VERIFIER_LINK=https://verifier.starknet.id
+NEXT_PUBLIC_IS_TESTNET=false
+NEXT_PUBLIC_TRIBE_CONTRACT=0x021b4b01282f11c7847007c7f064e20413c66f3e71f2c36b4cacaaf2a244dca6
+NEXT_PUBLIC_NFT_PP_VERIFIER=0x070aaa20ec4a46da57c932d9fd89ca5e6bb9ca3188d3df361a32306aff7d59c7
+NEXT_PUBLIC_RPC_URL=https://rpc.starknet.id
+NEXT_PUBLIC_MULTICALL_CONTRACT=0x034ffb8f4452df7a613a0210824d6414dbadcddce6c6e19bf4ddc9e22ce5f970
+NEXT_PUBLIC_DOMAIN_GIFT_CONTRACT=0x040803720a1723355f652e1b3609275f561541e65ebffdf87e4075f9181df452
+NEXT_PUBLIC_AVNU_API=https://starknet.impulse.avnu.fi/v1
diff --git a/components/UI/AddButtonIdentities.tsx b/components/UI/AddButtonIdentities.tsx
@@ -0,0 +1,31 @@
+import React, { FunctionComponent, ReactNode } from "react";
+import styles from "../../styles/components/addIdentitiesButton.module.css";
+
+type ButtonProps = {
+  onClick: () => void;
+  children: string | ReactNode;
+  disabled?: boolean;
+  variation?: string;
+  radius?: string; 
+};
+
+const AddButton: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick,
+  disabled = false,
+  variation = "primary",
+  radius,
+}) => {
+  return (
+    <button
+      disabled={disabled}
+      onClick={onClick}
+      className={` ${styles["iq-button"]} ${styles[variation]}`}
+       style={radius ? { borderRadius: radius } : undefined}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default AddButton;
diff --git a/components/UI/button.tsx b/components/UI/button.tsx
@@ -6,19 +6,22 @@ type ButtonProps = {
   children: string | ReactNode;
   disabled?: boolean;
   variation?: string;
+  radius?: string; 
 };
 
 const Button: FunctionComponent<ButtonProps> = ({
   children,
   onClick,
   disabled = false,
   variation = "primary",
+  radius,
 }) => {
   return (
     <button
       disabled={disabled}
       onClick={onClick}
       className={` ${styles["nq-button"]} ${styles[variation]}`}
+       style={radius ? { borderRadius: radius } : undefined}
     >
       {children}
     </button>

diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -85,6 +85,8 @@ const Navbar: FunctionComponent = () => {
 
   const connectWallet = async (connector: Connector) => {
     try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       await connectAsync({ connector });
       localStorage.setItem("SID-connectedWallet", connector.id);
       localStorage.setItem("SID-lastUsedConnector", connector.id);
@@ -155,16 +157,16 @@ const Navbar: FunctionComponent = () => {
 
   return (
     <>
-      <div className={"fixed w-full z-20 bg-background top-0"}>
+      <div className={"fixed w-full z-20 bg-background-nav top-0"}>
         <div className={styles.navbarContainer}>
           <div className="ml-4">
             <Link href="/" className="cursor-pointer">
               <img
                 className={styles.starknetIdLogo}
-                src="/visuals/StarknetIdLogo.svg"
+                src={isMobile ? "/visuals/MbLogo.svg" : "/visuals/Logo.svg"}
                 alt="Starknet.id Logo"
-                width={90}
-                height={90}
+                width={ isMobile ? 48 :170}
+                height={isMobile ? 48 :90}
               />
             </Link>
           </div>
@@ -198,6 +200,7 @@ const Navbar: FunctionComponent = () => {
                       : () => setShowWalletConnectModal(true)
                   }
                   variation={isConnected ? "white" : "primary"}
+                  radius={isConnected ?'8px':'500px'}
                 >
                   {isConnected ? (
                     <>
@@ -285,7 +288,7 @@ const Navbar: FunctionComponent = () => {
                   <Link href="/" className="cursor-pointer">
                     <img
                       className="cursor-pointer"
-                      src="/visuals/StarknetIdLogo.svg"
+                      src={isMobile ? "/visuals/MbLogo.svg" : "/visuals/Logo.svg"}
                       alt="Starknet.id Logo"
                       width={72}
                       height={72}
@@ -420,4 +423,4 @@ const Navbar: FunctionComponent = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
diff --git a/components/UI/textField.tsx b/components/UI/textField.tsx
@@ -5,17 +5,18 @@ import { TextField as TextFieldMui } from "@mui/material";
 import InputHelper from "./inputHelper";
 
 type TextFieldProps = {
-  label: string;
-  value: string;
-  onChange: OutlinedInputProps["onChange"];
-  color: "primary" | "secondary" | "error" | "info" | "success" | "warning";
-  required?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-  placeholder?: string;
-  helperText?: string;
-  type?: React.InputHTMLAttributes<unknown>["type"];
-  variant?: "default" | "white";
+	label: string;
+	value: string;
+	onChange: OutlinedInputProps["onChange"];
+	color: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+	required?: boolean;
+	error?: boolean;
+	errorMessage?: string;
+	placeholder?: string;
+	helperText?: string;
+	type?: React.InputHTMLAttributes<unknown>["type"];
+	variant?: "default" | "white";
+	centerLabel?: true | false;
 };
 
 const TextField: FunctionComponent<TextFieldProps> = ({
@@ -30,38 +31,48 @@ const TextField: FunctionComponent<TextFieldProps> = ({
   helperText,
   type,
   variant = "default",
+  centerLabel = false,
 }) => {
-  return (
-    <div className="flex flex-col w-full">
-      <div className="flex gap-1 my-1">
-        {error ? (
-          <p className={styles.errorLegend}>{errorMessage}</p>
-        ) : (
-          <p className={styles.legend}>{label}</p>
-        )}
-        {required ? "*" : ""}
-      </div>
-      <InputHelper helperText={helperText} error={error}>
-        <TextFieldMui
-          type={type}
-          error={error}
-          fullWidth
-          value={value}
-          variant="outlined"
-          onChange={onChange}
-          color={color}
-          InputProps={{
-            classes: {
-              root: styles.textfield,
-              input: variant === "white" ? styles.inputWhite : "",
-            },
-          }}
-          required={required}
-          placeholder={placeholder}
-        />
-      </InputHelper>
-    </div>
-  );
+	return (
+		<div className="flex flex-col w-full">
+			<div className={`flex gap-1 mb-[9.8px] ${centerLabel && "justify-center"}`}>
+				{error ? <p className={styles.errorLegend}>{errorMessage}</p> : <p className={styles.legend}>{label}</p>}
+				{required ? "*" : ""}
+			</div>
+			<InputHelper helperText={helperText} error={error}>
+				<TextFieldMui
+					type={type}
+					error={error}
+					fullWidth
+					value={value}
+					variant="outlined"
+					onChange={onChange}
+					color={color}
+					InputProps={{
+						classes: {
+							root: styles.textfield,
+							input: variant === "white" ? styles.inputWhite : "",
+						},
+					}}
+					sx={{
+						"& .MuiOutlinedInput-root": {
+							"boxShadow": "0px 2px 30px 0px #0000000F", // Adds shadow
+              "height": "56px",
+              "background-color": "#FFFFFF",
+							"& fieldset": {
+								borderColor: "#CDCCCC",
+							},
+							"&:hover fieldset": {
+								borderColor: "#CDCCDD",
+							},
+						},
+					}}
+					required={required}
+					placeholder={placeholder}
+				/>
+			</InputHelper>
+		</div>
+	);
 };
 
 export default TextField;
diff --git a/components/domains/registerV3.tsx b/components/domains/registerV3.tsx
@@ -57,8 +57,8 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
 
   return (
     <>
-      <div className="flex flex-col md:flex-row gap-10">
-        <aside className={styles.purchaseStepNav}>
+      <div className="w-full flex flex-col lg:flex-row md:flex-row justify-center gap-4 px-8 py-4 lg:px-32 md:px-16 sm:py-12">
+        <aside className={`${styles.purchaseStepNav}`}>
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
@@ -71,7 +71,7 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
     />
         </aside>
 
-        <div className={styles.purchaseStepNavMobile}>
+        <div className={`${styles.purchaseStepNavMobile}`}>
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}

diff --git a/components/domains/steps/checkoutCard.tsx b/components/domains/steps/checkoutCard.tsx
@@ -34,6 +34,7 @@ import { usePriceManagement } from "@/hooks/checkout/usePriceManagement";
 import { useCheckoutState } from "@/hooks/checkout/useCheckoutState";
 import { useRegisterTxPrep } from "@/hooks/checkout/useRegisterTxPrep";
 import { useRenewalTxPrep } from "@/hooks/checkout/useRenewalTxPrep";
+import CloseIcon from "@/components/UI/iconsComponents/icons/closeIcon";
 
 type CheckoutCardProps = {
   type: FormType;
@@ -237,17 +238,6 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
 
   return (
     <>
-      {formState.durationInYears === 1 ? (
-        <UpsellCard
-          upsellData={discount as Upsell}
-          enabled={formState.isUpselled}
-          onUpsellChoice={onUpsellChoice}
-          invalidBalance={invalidBalance}
-          hasUserSelectedOffer={hasUserSelectedOffer}
-          setHasUserSelectedOffer={setHasUserSelectedOffer}
-          loadingPrice={loadingPrice}
-        />
-      ) : null}
       {reducedDuration > 0 &&
         invalidBalance &&
         reducedDuration !== formState.durationInYears * 365 ? (
@@ -260,6 +250,17 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
       ) : null}
 
       <div className={styles.container}>
+        {formState.durationInYears === 1 ? (
+          <UpsellCard
+            upsellData={discount as Upsell}
+            enabled={formState.isUpselled}
+            onUpsellChoice={onUpsellChoice}
+            invalidBalance={invalidBalance}
+            hasUserSelectedOffer={hasUserSelectedOffer}
+            setHasUserSelectedOffer={setHasUserSelectedOffer}
+            loadingPrice={loadingPrice}
+          />
+        ) : null}
         <div className={styles.checkout}>
           <RegisterSummary
             priceInEth={
@@ -281,7 +282,7 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
             discountedPrice={discountedPrice}
             discountedPriceInEth={discountedPriceInEth}
           />
-          <Divider className="w-full" />
+          <Divider className={styles.divider} />
           <div className={styles.checkoutSummary}>
             <RegisterCheckboxes
               onChangeTermsBox={onChangeTermsBox}
@@ -297,27 +298,46 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
               displayedCurrency={displayedCurrency}
               maxPriceRange={maxPriceRange}
             />
-            <div>
-              <Button
-                onClick={() =>
-                  execute().then(() => {
-                    setDomainsMinting(formState.selectedDomains);
-                  })
-                }
-                disabled={
-                  domainsMinting === formState.selectedDomains ||
-                  !account ||
-                  !formState.durationInYears ||
-                  formState.durationInYears < 1 ||
-                  invalidBalance ||
-                  !termsBox
-                }
+            <div className={styles.checkoutButton}>
+              <div
+                className={(!termsBox || invalidBalance) ? "flex flex-col-reverse gap-4" : "flex gap-4"}
               >
-                {getButtonText()}
-              </Button>
+                <div className="flex sm:hidden">
+                  <Button
+                    variation="white"
+                    onClick={() => router.push("/")}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+                <Button
+                  onClick={() =>
+                    execute().then(() => {
+                      setDomainsMinting(formState.selectedDomains);
+                    })
+                  }
+                  disabled={
+                    domainsMinting === formState.selectedDomains ||
+                    !account ||
+                    !formState.durationInYears ||
+                    formState.durationInYears < 1 ||
+                    invalidBalance ||
+                    !termsBox
+                  }
+                >
+                  {getButtonText()}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
+        <div className="absolute right-0 top-0 w-5 h-5">
+          <button
+            onClick={() => router.push("/")}
+          >
+            <CloseIcon />
+          </button>
+        </div>
       </div>
       <Notification
         visible={currencyError}

diff --git a/components/domains/steps/registerSteps.tsx b/components/domains/steps/registerSteps.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from "react";
+import Image from "next/image";
 import styles from "../../../styles/components/registerV3.module.css";
 import ContactCardIcon from "@/components/UI/iconsComponents/icons/contactCardIcon";
 import PfpIcon from "@/components/UI/iconsComponents/icons/pfpIcon";