@thenamespace/ens-components 1.2.1 → 1.3.0

package/dist/index.js

@@ -11642,6 +11642,50 @@ const wait = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
+const ONE_DAY = 86400;
+const ONE_YEAR = 365 * ONE_DAY;
+const MIN_REGISTRATION_SECONDS = 28 * ONE_DAY;
+const secondsToDateInput = (expirySeconds) => {
+  const date = new Date(expirySeconds * 1e3);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+const roundDurationWithDay = (valueAsDate, nowSeconds) => {
+  const start = new Date(nowSeconds * 1e3);
+  const endDay = Date.UTC(valueAsDate.getFullYear(), valueAsDate.getMonth(), valueAsDate.getDate());
+  const startDay = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate());
+  const days = Math.floor((endDay - startDay) / 864e5);
+  return Math.max(0, days * 86400);
+};
+const secondsFromYears = (startDate, years) => {
+  const end = new Date(startDate.getTime());
+  end.setFullYear(end.getFullYear() + years);
+  return Math.floor((end.getTime() - startDate.getTime()) / 1e3);
+};
+const yearsFromSeconds = (seconds) => seconds / ONE_YEAR;
+const formatDurationSummary = (durationSeconds) => {
+  const now = /* @__PURE__ */ new Date();
+  const end = new Date(now.getTime() + durationSeconds * 1e3);
+  let years = end.getFullYear() - now.getFullYear();
+  let months = end.getMonth() - now.getMonth();
+  let days = end.getDate() - now.getDate();
+  if (days < 0) {
+    months -= 1;
+    days += new Date(end.getFullYear(), end.getMonth(), 0).getDate();
+  }
+  if (months < 0) {
+    years -= 1;
+    months += 12;
+  }
+  const parts = [];
+  if (years > 0) parts.push(`${years} year${years !== 1 ? "s" : ""}`);
+  if (months > 0) parts.push(`${months} month${months !== 1 ? "s" : ""}`);
+  if (days > 0 && years === 0) parts.push(`${days} day${days !== 1 ? "s" : ""}`);
+  return parts.slice(0, 2).join(", ") || "0 days";
+};
+
 const isValidEmvAddress = (value) => {
   return isAddress$1(value);
 };
@@ -11855,6 +11899,124 @@ function ProgressBar({ progress }) {
   ) }) });
 }
 
+const CalendarSVG = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M19 3h-1V1h-2v2H8V1H6v2H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" }) });
+const DurationPicker = ({
+  durationSeconds,
+  onDurationChange,
+  minSeconds = MIN_REGISTRATION_SECONDS
+}) => {
+  const [durationType, setDurationType] = useState("years");
+  const dateInputRef = useRef(null);
+  const nowSecondsRef = useRef(Math.floor(Date.now() / 1e3));
+  const nowSeconds = nowSecondsRef.current;
+  const years = Math.max(1, Math.floor(yearsFromSeconds(durationSeconds)));
+  const minusSeconds = secondsFromYears(/* @__PURE__ */ new Date(), years - 1);
+  const handleMinusYear = () => {
+    if (minusSeconds >= minSeconds) {
+      onDurationChange(minusSeconds);
+    }
+  };
+  const handlePlusYear = () => {
+    onDurationChange(secondsFromYears(/* @__PURE__ */ new Date(), years + 1));
+  };
+  const handleDateChange = (e) => {
+    const { valueAsDate } = e.currentTarget;
+    if (!valueAsDate) return;
+    const normalised = new Date(
+      valueAsDate.getTime() + valueAsDate.getTimezoneOffset() * 60 * 1e3
+    );
+    const minDate = new Date((nowSeconds + minSeconds) * 1e3);
+    const clamped = normalised < minDate ? minDate : normalised;
+    onDurationChange(roundDurationWithDay(clamped, nowSeconds));
+  };
+  const handleToggleMode = () => {
+    if (durationType === "years") {
+      setDurationType("date");
+    } else {
+      const snapped = secondsFromYears(
+        /* @__PURE__ */ new Date(),
+        Math.max(1, Math.floor(yearsFromSeconds(durationSeconds)))
+      );
+      onDurationChange(snapped);
+      setDurationType("years");
+    }
+  };
+  const minusDisabled = minusSeconds < minSeconds;
+  const expirySeconds = nowSeconds + durationSeconds;
+  const expiryDateDisplay = new Date(expirySeconds * 1e3).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "ns-duration-picker", children: [
+    durationType === "years" ? /* @__PURE__ */ jsxs("div", { className: "ns-duration-picker__control", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "ns-duration-picker__btn",
+          onClick: handleMinusYear,
+          disabled: minusDisabled,
+          children: "\u2212"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "ns-duration-picker__label", children: [
+        years,
+        " year",
+        years !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "ns-duration-picker__btn ns-duration-picker__btn--plus",
+          onClick: handlePlusYear,
+          children: "+"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "ns-duration-picker__calendar", children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-duration-picker__date-display", children: expiryDateDisplay }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: dateInputRef,
+          type: "date",
+          className: "ns-duration-picker__date-input",
+          value: secondsToDateInput(expirySeconds),
+          min: secondsToDateInput(nowSeconds + minSeconds),
+          onChange: handleDateChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ns-duration-picker__calendar-btn",
+          onClick: () => dateInputRef.current?.showPicker?.(),
+          "aria-label": "Open calendar",
+          children: /* @__PURE__ */ jsx(CalendarSVG, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ns-duration-picker__footer", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
+        formatDurationSummary(durationSeconds),
+        " registration.\xA0"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ns-duration-picker__toggle",
+          onClick: handleToggleMode,
+          children: [
+            "Pick by ",
+            durationType === "years" ? "date" : "years"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
 const PricingDisplay = ({
   primaryFee,
   networkFees,
@@ -11873,22 +12035,14 @@ const PricingDisplay = ({
     return (eth * ethUsdRate).toFixed(2);
   }, [ethUsdRate, total.amount, totalLoading]);
   return /* @__PURE__ */ jsxs("div", { className: `ens-registration-pricing ${className}`, children: [
-    expiryPicker && /* @__PURE__ */ jsxs("div", { className: "ens-expiry-picker d-flex justify-content-between mb-2", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          disabled: expiryPicker.years <= 1,
-          onClick: () => expiryPicker.onYearsChange(expiryPicker.years - 1),
-          children: "-"
-        }
-      ),
-      /* @__PURE__ */ jsxs(Text, { children: [
-        expiryPicker.years,
-        " year",
-        expiryPicker.years > 1 ? "s" : ""
-      ] }),
-      /* @__PURE__ */ jsx(Button, { onClick: () => expiryPicker.onYearsChange(expiryPicker.years + 1), children: "+" })
-    ] }),
+    expiryPicker && /* @__PURE__ */ jsx("div", { className: "ens-expiry-picker mb-2", children: /* @__PURE__ */ jsx(
+      DurationPicker,
+      {
+        durationSeconds: expiryPicker.durationSeconds,
+        onDurationChange: expiryPicker.onDurationChange,
+        minSeconds: expiryPicker.minSeconds
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [
       /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: primaryFee.label }),
       primaryFee.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 16 }) : /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: primaryFee.amount === "Free" ? "Free" : `${primaryFee.amount} ETH` })
@@ -63982,7 +64136,6 @@ const ABIS = {
   RESOLVER
 };
 
-const SECONDS_IN_YEAR = 31536e3;
 const NAMESPACE_REFERRER_ADDRESS = "0xb7B18611b8C51B4B3F400BaF09DB49E61e0aF044";
 const ENS_REGISTRY_ABI = parseAbi([
   "function owner(bytes32) view returns (address)"
@@ -63995,12 +64148,12 @@ const useRegisterENS = ({ isTestnet }) => {
   const { data: walletClient } = useWalletClient({
     chainId: isTestnet ? sepolia.id : mainnet.id
   });
-  const getRegistrationPrice = async (label, expiryInYears = 1) => {
+  const getRegistrationPrice = async (label, durationInSeconds = ONE_YEAR) => {
     const ethController = getEthController();
     const price = await publicClient.readContract({
       abi: ABIS.ETH_REGISTRAR_CONTOLLER,
       functionName: "rentPrice",
-      args: [label, BigInt(expiryInYears * SECONDS_IN_YEAR)],
+      args: [label, BigInt(durationInSeconds)],
       address: ethController,
       account: address
     });
@@ -64025,7 +64178,7 @@ const useRegisterENS = ({ isTestnet }) => {
     const c = {
       label: request.label,
       owner: request.owner,
-      duration: BigInt(yearsToSeconds(request.expiryInYears)),
+      duration: BigInt(request.durationInSeconds),
       secret: keccak256(toBytes$1(request.secret)),
       resolver: getPublicResolver(),
       data: resolverData,
@@ -64039,9 +64192,6 @@ const useRegisterENS = ({ isTestnet }) => {
       args: [c]
     });
   };
-  const yearsToSeconds = (years) => {
-    return Math.ceil(years * SECONDS_IN_YEAR);
-  };
   const sendCommitmentTx = async (request) => {
     if (!walletClient || !walletClient.account) {
       throw new Error("Wallet client is not available");
@@ -64065,17 +64215,14 @@ const useRegisterENS = ({ isTestnet }) => {
     const registration = {
       label: request.label,
       owner: request.owner,
-      duration: BigInt(yearsToSeconds(request.expiryInYears)),
+      duration: BigInt(request.durationInSeconds),
       secret: keccak256(toBytes$1(request.secret)),
       resolver: getPublicResolver(),
       data: resolverData,
       reverseRecord: 0,
       referrer: getRegReferrer(request)
     };
-    const price = await getRegistrationPrice(
-      request.label,
-      request.expiryInYears
-    );
+    const price = await getRegistrationPrice(request.label, request.durationInSeconds);
     const { request: contractRequest } = await publicClient.simulateContract({
       address: getEthController(),
       abi: ABIS.ETH_REGISTRAR_CONTOLLER,
@@ -64085,20 +64232,11 @@ const useRegisterENS = ({ isTestnet }) => {
       value: price.wei
     });
     const tx = await walletClient.writeContract(contractRequest);
-    return {
-      txHash: tx,
-      price
-    };
-  };
-  const getEthController = () => {
-    return distExports$1.getEnsContracts(isTestnet).ethRegistrarController;
-  };
-  const getEnsRegistry = () => {
-    return distExports$1.getEnsContracts(isTestnet).ensRegistry;
-  };
-  const getPublicResolver = () => {
-    return distExports$1.getEnsContracts(isTestnet).publicResolver;
+    return { txHash: tx, price };
   };
+  const getEthController = () => distExports$1.getEnsContracts(isTestnet).ethRegistrarController;
+  const getEnsRegistry = () => distExports$1.getEnsContracts(isTestnet).ensRegistry;
+  const getPublicResolver = () => distExports$1.getEnsContracts(isTestnet).publicResolver;
   const getRegReferrer = (request) => {
     const referrerAddress = request.referrer && isAddress$1(request.referrer) ? request.referrer : NAMESPACE_REFERRER_ADDRESS;
     return createEnsReferer(referrerAddress);
@@ -89328,7 +89466,7 @@ var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvQAAAGjCAYAAABDv4HEA
 const MIN_ENS_LEN$2 = 3;
 const RegistrationSummary = ({
   label,
-  years,
+  durationSeconds,
   price,
   nameValidation,
   transactionFees,
@@ -89339,7 +89477,7 @@ const RegistrationSummary = ({
   hideBanner = false,
   bannerWidth = 250,
   onLabelChange,
-  onYearsChange,
+  onDurationChange,
   onPriceChange,
   onNameValidationChange,
   onSetProfile,
@@ -89348,9 +89486,7 @@ const RegistrationSummary = ({
 }) => {
   const { isConnected } = useAccount();
   const { ethUsdRate } = useEthDollarValue();
-  const { isEnsAvailable, getRegistrationPrice } = useRegisterENS({
-    isTestnet
-  });
+  const { isEnsAvailable, getRegistrationPrice } = useRegisterENS({ isTestnet });
   const { regPrice, regFees, regTotal } = useMemo(() => {
     let regPrice2 = 0;
     let regFees2 = 0;
@@ -89363,18 +89499,13 @@ const RegistrationSummary = ({
       regFees2 += transactionFees.price.eth;
       total += transactionFees.price.eth;
     }
-    return {
-      regFees: regFees2,
-      regPrice: regPrice2,
-      regTotal: formatFloat(total, 5)
-    };
+    return { regFees: regFees2, regPrice: regPrice2, regTotal: formatFloat(total, 5) };
   }, [price, transactionFees]);
   const checkAvailability = async (labelToCheck) => {
-    let _available = false;
     try {
-      _available = await isEnsAvailable(labelToCheck);
-      onNameValidationChange({ isChecking: false, isTaken: !_available });
-    } catch (err) {
+      const available = await isEnsAvailable(labelToCheck);
+      onNameValidationChange({ isChecking: false, isTaken: !available });
+    } catch {
       onNameValidationChange({
         isChecking: false,
         isTaken: false,
@@ -89382,20 +89513,12 @@ const RegistrationSummary = ({
       });
     }
   };
-  const checkRegistrationPrice = async (labelToCheck, expiry) => {
+  const checkRegistrationPrice = async (labelToCheck, durationSecs) => {
     try {
-      const rentPrice = await getRegistrationPrice(labelToCheck, expiry);
-      onPriceChange({
-        isChecking: false,
-        eth: rentPrice.eth,
-        wei: rentPrice.wei
-      });
-    } catch (err) {
-      onPriceChange({
-        isChecking: false,
-        eth: -1,
-        wei: 0n
-      });
+      const rentPrice = await getRegistrationPrice(labelToCheck, durationSecs);
+      onPriceChange({ isChecking: false, eth: rentPrice.eth, wei: rentPrice.wei });
+    } catch {
+      onPriceChange({ isChecking: false, eth: -1, wei: 0n });
     }
   };
   const debouncedCheckAvailability = useCallback(
@@ -89404,19 +89527,17 @@ const RegistrationSummary = ({
   );
   const debouncedCheckPrice = useCallback(
     debounce(
-      (labelToCheck, expiryYears) => checkRegistrationPrice(labelToCheck, expiryYears),
+      (labelToCheck, durationSecs) => checkRegistrationPrice(labelToCheck, durationSecs),
       500
     ),
     []
   );
   const handleNameChanged = async (value) => {
     const _value = value.toLocaleLowerCase().trim();
-    if (_value.includes(".")) {
-      return;
-    }
+    if (_value.includes(".")) return;
     try {
       normalize(_value);
-    } catch (err) {
+    } catch {
       return;
     }
     onLabelChange(_value);
@@ -89424,22 +89545,21 @@ const RegistrationSummary = ({
       onNameValidationChange({ isChecking: true, isTaken: false });
       onPriceChange({ isChecking: true, eth: 0, wei: 0n });
       debouncedCheckAvailability(_value);
-      debouncedCheckPrice(_value, years);
+      debouncedCheckPrice(_value, durationSeconds);
     } else {
       onNameValidationChange({ isChecking: false, isTaken: false });
     }
   };
-  const handleYearsChange = (newYears) => {
-    if (newYears < 1) {
-      return;
-    }
+  const handleDurationChange = (newSeconds) => {
+    if (newSeconds < MIN_REGISTRATION_SECONDS) return;
     onPriceChange({ ...price, isChecking: true });
-    onYearsChange(newYears);
-    debouncedCheckPrice(label, newYears);
+    onDurationChange(newSeconds);
+    debouncedCheckPrice(label, newSeconds);
   };
-  const isNameAvailable = useMemo(() => {
-    return label.length >= MIN_ENS_LEN$2 && !nameValidation.isChecking && !nameValidation.isTaken;
-  }, [label.length, nameValidation.isChecking, nameValidation.isTaken]);
+  const isNameAvailable = useMemo(
+    () => label.length >= MIN_ENS_LEN$2 && !nameValidation.isChecking && !nameValidation.isTaken,
+    [label.length, nameValidation.isChecking, nameValidation.isTaken]
+  );
   const nextBtnDisabled = label.length < MIN_ENS_LEN$2 || nameValidation.isChecking || nameValidation.isTaken;
   const totalPriceLoading = transactionFees?.isChecking || price.isChecking;
   const transactionFeesLoading = transactionFees?.isChecking || false;
@@ -89502,8 +89622,9 @@ const RegistrationSummary = ({
             isChecking: totalPriceLoading
           },
           expiryPicker: {
-            years,
-            onYearsChange: handleYearsChange
+            durationSeconds,
+            onDurationChange: handleDurationChange,
+            minSeconds: MIN_REGISTRATION_SECONDS
           },
           ethUsdRate
         }
@@ -89516,15 +89637,7 @@ const RegistrationSummary = ({
           style: { cursor: "pointer" },
           children: /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
             /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
-              /* @__PURE__ */ jsx("div", { className: "shuriken-cont d-flex align-items-center justify-content-center", children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  className: "shuriken",
-                  width: 50,
-                  src: img$3,
-                  alt: "shuricken"
-                }
-              ) }),
+              /* @__PURE__ */ jsx("div", { className: "shuriken-cont d-flex align-items-center justify-content-center", children: /* @__PURE__ */ jsx("img", { className: "shuriken", width: 50, src: img$3, alt: "shuricken" }) }),
               /* @__PURE__ */ jsxs("div", { className: "ms-3", children: [
                 /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: "Complete your profile" }),
                 /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Make your ENS more discoverable" })
@@ -89535,16 +89648,7 @@ const RegistrationSummary = ({
         }
       )
     ] }),
-    !isConnected && onConnectWallet ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        style: { width: "100%" },
-        size: "lg",
-        className: "mt-2",
-        onClick: onConnectWallet,
-        children: "Connect Wallet"
-      }
-    ) : /* @__PURE__ */ jsx(
+    !isConnected && onConnectWallet ? /* @__PURE__ */ jsx(Button, { style: { width: "100%" }, size: "lg", className: "mt-2", onClick: onConnectWallet, children: "Connect Wallet" }) : /* @__PURE__ */ jsx(
       Button,
       {
         style: { width: "100%" },
@@ -89708,11 +89812,11 @@ const CommitmentStep = ({
     setError(null);
     let tx = null;
     try {
-      setBtnState({ ...btnState, waitingWallet: true });
+      setBtnState({ waitingWallet: true, waitingTx: false });
       const request = {
         label: state.label,
         owner: address,
-        expiryInYears: state.expiryInYears,
+        durationInSeconds: state.durationInSeconds,
         secret: state.secret,
         records: state.records,
         referrer: state.referrer
@@ -89922,33 +90026,22 @@ const RegistrationStep = ({
   onStateUpdated,
   onSuccess
 }) => {
-  const [btnState, setBtnState] = useState({
-    waitingTx: false,
-    waitingWallet: false
-  });
+  const [btnState, setBtnState] = useState({ waitingWallet: false, waitingTx: false });
   const { address } = useAccount();
   const { waitTx } = useWaitTransaction({ isTestnet });
-  const [error, setError] = useState(
-    null
-  );
-  const [commitTxStatus, setCommitTxStatus] = useState({
-    sent: false,
-    completed: false,
-    hash: ""
-  });
-  const { sendRegisterTx, getRegistrationPrice } = useRegisterENS({
-    isTestnet
-  });
+  const [error, setError] = useState(null);
+  const [commitTxStatus, setCommitTxStatus] = useState({ sent: false, completed: false, hash: "" });
+  const { sendRegisterTx } = useRegisterENS({ isTestnet });
   const handleRegistration = async () => {
     setError(null);
     let tx = null;
     let registrationPrice = 0;
     try {
-      setBtnState({ ...btnState, waitingWallet: true });
+      setBtnState({ waitingWallet: true, waitingTx: false });
       const request = {
         label: state.label,
         owner: address,
-        expiryInYears: state.expiryInYears,
+        durationInSeconds: state.durationInSeconds,
         secret: state.secret,
         records: state.records,
         referrer: state.referrer
@@ -89968,27 +90061,22 @@ const RegistrationStep = ({
       if (err instanceof ContractFunctionExecutionError && !isUserDeniedError(err)) {
         setError(err);
       } else if (!isUserDeniedError(err)) {
-        const genericError = new Error(
-          err?.shortMessage || err?.message || "Transaction failed"
+        setError(
+          new Error(err?.shortMessage || err?.message || "Transaction failed")
         );
-        setError(genericError);
       }
     } finally {
       setBtnState({ waitingTx: false, waitingWallet: false });
     }
-    if (!tx) {
-      return;
-    }
+    if (!tx) return;
     try {
       const receipt = await waitTx({ hash: tx });
       setCommitTxStatus({ sent: true, completed: true, hash: tx });
       const gasUsed = receipt.gasUsed;
       const gasPrice = receipt.effectiveGasPrice || BigInt(0);
-      const transactionFees = gasUsed * gasPrice;
-      const transactionFeesEth = formatEther(transactionFees);
+      const transactionFeesEth = formatEther(gasUsed * gasPrice);
       const totalCost = (registrationPrice + parseFloat(transactionFeesEth)).toString();
-      const expiryDate = /* @__PURE__ */ new Date();
-      expiryDate.setFullYear(expiryDate.getFullYear() + state.expiryInYears);
+      const expiryDate = new Date(Date.now() + state.durationInSeconds * 1e3);
       const formattedExpiryDate = expiryDate.toLocaleDateString("en-US", {
         year: "numeric",
         month: "long",
@@ -89998,11 +90086,11 @@ const RegistrationStep = ({
         onStateUpdated({
           ...state,
           step: ProcessSteps.RegistrationCompleted,
-          commitment: { tx, completed: true, time: (/* @__PURE__ */ new Date()).getTime() }
+          commitment: { tx, completed: true, time: Date.now() }
         });
         setCommitTxStatus({ sent: false, completed: false, hash: "" });
         onSuccess?.({
-          expiryInYears: state.expiryInYears,
+          durationLabel: formatDurationSummary(state.durationInSeconds),
           registrationCost: registrationPrice.toString(),
           transactionFees: transactionFeesEth,
           total: totalCost,
@@ -90017,26 +90105,19 @@ const RegistrationStep = ({
       setCommitTxStatus({ sent: false, completed: false, hash: "" });
     }
   };
-  const { isCurrentStep, isDisabled, isPending, isCompleted } = useMemo(() => {
-    const isPending2 = state.step < ProcessSteps.TimerCompleted;
+  const { isCurrentStep, isDisabled, isCompleted } = useMemo(() => {
     const isCurrentStep2 = state.step >= ProcessSteps.TimerCompleted && state.step < ProcessSteps.RegistrationCompleted;
     const isCompleted2 = state.step >= ProcessSteps.RegistrationCompleted;
     const isDisabled2 = state.step < ProcessSteps.TimerCompleted;
-    return {
-      isCurrentStep: isCurrentStep2,
-      isDisabled: isDisabled2,
-      isPending: isPending2,
-      isCompleted: isCompleted2
-    };
+    return { isCurrentStep: isCurrentStep2, isDisabled: isDisabled2, isCompleted: isCompleted2 };
   }, [state]);
   const getProgressStatusBadge = () => {
     if (isCurrentStep) {
       return /* @__PURE__ */ jsx("div", { className: "ns-process-badge me-2", children: /* @__PURE__ */ jsx(Text, { color: "white", weight: "bold", size: "sm", children: "3" }) });
     } else if (isCompleted) {
       return /* @__PURE__ */ jsx("div", { className: "ns-process-badge ns-process-badge--inactive ns-process-badge--completed me-2", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, color: "black" }) });
-    } else {
-      return /* @__PURE__ */ jsx("div", { className: "ns-process-badge ns-process-badge--inactive me-2", children: /* @__PURE__ */ jsx(Text, { color: "primary", weight: "bold", size: "sm", children: "3" }) });
     }
+    return /* @__PURE__ */ jsx("div", { className: "ns-process-badge ns-process-badge--inactive me-2", children: /* @__PURE__ */ jsx(Text, { color: "primary", weight: "bold", size: "sm", children: "3" }) });
   };
   const btnDisabled = btnState.waitingTx || btnState.waitingWallet;
   const btnLabel = btnState.waitingWallet ? "Waiting Wallet..." : "Open Wallet";
@@ -90054,15 +90135,7 @@ const RegistrationStep = ({
         !commitTxStatus.sent && /* @__PURE__ */ jsxs("div", { className: "ns-text-center", children: [
           /* @__PURE__ */ jsx(Text, { weight: "medium", className: "mb-2", children: "Register Name" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Your name is not registered until you've completed the second transaction. You have 23 hours remaining to complete it." }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled: btnDisabled,
-              onClick: () => handleRegistration(),
-              className: "mt-3 ns-wd-100",
-              children: btnLabel
-            }
-          ),
+          /* @__PURE__ */ jsx(Button, { disabled: btnDisabled, onClick: handleRegistration, className: "mt-3 ns-wd-100", children: btnLabel }),
           /* @__PURE__ */ jsx(ContractErrorLabel, { error })
         ] }),
         commitTxStatus.sent && /* @__PURE__ */ jsx(
@@ -90727,7 +90800,7 @@ var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACBCAYAAABpepAsAAA
 
 const SuccessScreen$1 = ({
   ensName,
-  expiryInYears,
+  durationLabel,
   registrationCost,
   transactionFees,
   total,
@@ -90789,8 +90862,8 @@ const SuccessScreen$1 = ({
           /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary", children: [
             /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row", children: [
               /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
-                expiryInYears,
-                " year registration"
+                durationLabel,
+                " registration"
               ] }),
               /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
                 parseFloat(registrationCost).toFixed(4),
@@ -90853,24 +90926,21 @@ const generateEnsRegistrationSecret = () => {
   return toHex(Math.floor(Math.random() * 1e9));
 };
 
-const getBlankRegistrationState = (label, exiryInYears, records, isTestnet, referrer) => {
-  const blankRegistrationState = {
-    step: ProcessSteps.Start,
-    label,
-    commitment: { completed: false, time: 0 },
-    registration: { completed: false },
-    timerStartedAt: 0,
-    expiryInYears: exiryInYears,
-    secret: generateEnsRegistrationSecret(),
-    records,
-    isTestnet,
-    referrer
-  };
-  return blankRegistrationState;
-};
+const getBlankRegistrationState = (label, durationInSeconds, records, isTestnet, referrer) => ({
+  step: ProcessSteps.Start,
+  label,
+  commitment: { completed: false, time: 0 },
+  registration: { completed: false },
+  timerStartedAt: 0,
+  durationInSeconds,
+  secret: generateEnsRegistrationSecret(),
+  records,
+  isTestnet,
+  referrer
+});
 const RegistrationProcess = ({
   label,
-  expiryInYears,
+  durationInSeconds,
   isTestnet = false,
   records,
   onBack,
@@ -90884,29 +90954,17 @@ const RegistrationProcess = ({
   const isOnCorrectNetwork = chain?.id === expectedChainId;
   const shouldSwitchNetwork = chain && !isOnCorrectNetwork;
   const [registrationState, setRegistrationState] = useState(
-    getBlankRegistrationState(
-      label,
-      expiryInYears,
-      records,
-      isTestnet,
-      referrer
-    )
+    () => getBlankRegistrationState(label, durationInSeconds, records, isTestnet, referrer)
   );
   const [showConfirmClose, setShowConfirmClose] = useState(false);
   useEffect(() => {
-    setRegistrationState({ ...registrationState, records });
+    setRegistrationState((prev) => ({ ...prev, records }));
   }, [records]);
   const handleSwitchNetwork = () => {
-    if (switchChain) {
-      switchChain({ chainId: expectedChainId });
-    }
+    if (switchChain) switchChain({ chainId: expectedChainId });
   };
   const handleTimerPassed = () => {
-    const newState = {
-      ...registrationState,
-      step: ProcessSteps.TimerCompleted
-    };
-    setRegistrationState(newState);
+    setRegistrationState((prev) => ({ ...prev, step: ProcessSteps.TimerCompleted }));
   };
   const networkName = isTestnet ? "Sepolia" : "Mainnet";
   const handleCloseClick = () => {
@@ -90916,13 +90974,6 @@ const RegistrationProcess = ({
       onBack?.();
     }
   };
-  const handleConfirmClose = () => {
-    setShowConfirmClose(false);
-    onBack?.(true);
-  };
-  const handleCancelClose = () => {
-    setShowConfirmClose(false);
-  };
   return /* @__PURE__ */ jsxs("div", { className: "ens-registration-progress", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -90934,14 +90985,7 @@ const RegistrationProcess = ({
         children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        style: { width: "250px", margin: "auto" },
-        src: img$1,
-        alt: "Ninja Image"
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ jsx("img", { style: { width: "250px", margin: "auto" }, src: img$1, alt: "Ninja Image" }) }),
     /* @__PURE__ */ jsxs("div", { className: "ns-text-center mt-2 mb-2", children: [
       /* @__PURE__ */ jsx(Text, { size: "lg", weight: "medium", children: "ENS Registration Process" }),
       /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Registration Consists of 3 Steps" })
@@ -90971,23 +91015,13 @@ const RegistrationProcess = ({
           }
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
-        TimerStep,
-        {
-          state: registrationState,
-          onTimerCompleted: () => {
-            handleTimerPassed();
-          }
-        }
-      ) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(TimerStep, { state: registrationState, onTimerCompleted: handleTimerPassed }) }),
       /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
         RegistrationStep,
         {
           state: registrationState,
           isTestnet,
-          onStateUpdated: (state) => {
-            setRegistrationState(state);
-          },
+          onStateUpdated: setRegistrationState,
           onSuccess
         }
       ) })
@@ -90996,7 +91030,7 @@ const RegistrationProcess = ({
       Modal,
       {
         isOpen: showConfirmClose,
-        onClose: handleCancelClose,
+        onClose: () => setShowConfirmClose(false),
         title: "Leave Registration?",
         size: "sm",
         footer: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, width: "100%" }, children: [
@@ -91004,7 +91038,7 @@ const RegistrationProcess = ({
             Button,
             {
               variant: "outline",
-              onClick: handleCancelClose,
+              onClick: () => setShowConfirmClose(false),
               style: { flex: 1 },
               children: "Cancel"
             }
@@ -91013,7 +91047,10 @@ const RegistrationProcess = ({
             Button,
             {
               variant: "destructive",
-              onClick: handleConfirmClose,
+              onClick: () => {
+                setShowConfirmClose(false);
+                onBack?.(true);
+              },
               style: { flex: 1 },
               children: "Leave"
             }
@@ -91026,37 +91063,21 @@ const RegistrationProcess = ({
 };
 
 const getLabel = (name) => {
-  if (!name) {
-    return "";
-  }
-  if (name.split(".").length !== 1) {
-    return name.split(".")[0];
-  }
+  if (!name) return "";
+  if (name.split(".").length !== 1) return name.split(".")[0];
   return name;
 };
 const EnsNameRegistrationForm = (props) => {
   const [label, setLabel] = useState(getLabel(props.name));
-  const [step, setStep] = useState(
-    0 /* Summary */
-  );
-  const [years, setYears] = useState(1);
+  const [step, setStep] = useState(0 /* Summary */);
+  const [durationSeconds, setDurationSeconds] = useState(() => secondsFromYears(/* @__PURE__ */ new Date(), 1));
   const [regTxFees, setRegTxFees] = useState({
     estimatedGas: 0,
     isChecking: false,
-    price: {
-      wei: 0n,
-      eth: 1e-4
-    }
-  });
-  const [price, setPrice] = useState({
-    isChecking: false,
-    wei: 0n,
-    eth: 0
-  });
-  const [nameValidation, setNameValidation] = useState({
-    isChecking: false,
-    isTaken: false
+    price: { wei: 0n, eth: 1e-4 }
   });
+  const [price, setPrice] = useState({ isChecking: false, wei: 0n, eth: 0 });
+  const [nameValidation, setNameValidation] = useState({ isChecking: false, isTaken: false });
   const [showProfile, setShowProfile] = useState(false);
   const [ensRecordTemplate, setEnsRecordsTemplate] = useState({
     addresses: [],
@@ -91066,9 +91087,10 @@ const EnsNameRegistrationForm = (props) => {
     addresses: [],
     texts: []
   });
-  const hasRecordsDifference = useMemo(() => {
-    return getEnsRecordsDiff(ensRecords, ensRecordTemplate).isDifferent;
-  }, [ensRecords, ensRecordTemplate]);
+  const hasRecordsDifference = useMemo(
+    () => getEnsRecordsDiff(ensRecords, ensRecordTemplate).isDifferent,
+    [ensRecords, ensRecordTemplate]
+  );
   const [successData, setSuccessData] = useState();
   const handleSaveRecords = () => {
     setEnsRecords(deepCopy(ensRecordTemplate));
@@ -91080,7 +91102,7 @@ const EnsNameRegistrationForm = (props) => {
   };
   const clearInputState = () => {
     setLabel("");
-    setYears(1);
+    setDurationSeconds(secondsFromYears(/* @__PURE__ */ new Date(), 1));
     setEnsRecords({ addresses: [], texts: [] });
     setEnsRecordsTemplate({ addresses: [], texts: [] });
     setNameValidation({ isChecking: false, isTaken: false });
@@ -91111,7 +91133,7 @@ const EnsNameRegistrationForm = (props) => {
             RegistrationSummary,
             {
               label,
-              years,
+              durationSeconds,
               price,
               nameValidation,
               isTestnet: props.isTestnet || false,
@@ -91122,7 +91144,7 @@ const EnsNameRegistrationForm = (props) => {
               hideBanner: props.hideBanner,
               bannerWidth: props.bannerWidth,
               onLabelChange: setLabel,
-              onYearsChange: setYears,
+              onDurationChange: setDurationSeconds,
               onPriceChange: setPrice,
               onNameValidationChange: setNameValidation,
               onSetProfile: () => setShowProfile(true),
@@ -91136,13 +91158,11 @@ const EnsNameRegistrationForm = (props) => {
           {
             isTestnet: props.isTestnet || false,
             label,
-            expiryInYears: years,
+            durationInSeconds: durationSeconds,
             records: ensRecords,
             referrer: props.referrer,
             onBack: (clearState) => {
-              if (clearState) {
-                clearInputState();
-              }
+              if (clearState) clearInputState();
               setStep(0 /* Summary */);
             },
             onStart: props.onRegistrationStart,
@@ -91157,7 +91177,7 @@ const EnsNameRegistrationForm = (props) => {
           SuccessScreen$1,
           {
             ensName: label,
-            expiryInYears: successData.expiryInYears,
+            durationLabel: successData.durationLabel,
             registrationCost: successData.registrationCost,
             transactionFees: successData.transactionFees,
             total: successData.total,
@@ -92620,7 +92640,7 @@ const SubnameMintFormContent = ({
   const hasRecordsDifference = useMemo(() => {
     return getEnsRecordsDiff(ensRecords, ensRecordTemplate).isDifferent;
   }, [ensRecords, ensRecordTemplate]);
-  const [years, setYears] = useState(1);
+  const [durationSeconds, setDurationSeconds] = useState(() => secondsFromYears(/* @__PURE__ */ new Date(), 1));
   const [availability, setAvailability] = useState({
     isChecking: false,
     isAvailable: true
@@ -92714,11 +92734,8 @@ const SubnameMintFormContent = ({
       isFree: isFree2
     };
   }, [mintDetails, transactionFees]);
-  const handleYearsChange = (newYears) => {
-    if (newYears < 1) {
-      return;
-    }
-    setYears(newYears);
+  const handleDurationChange = (seconds) => {
+    setDurationSeconds(seconds);
   };
   const totalPriceLoading = transactionFees.isChecking || mintDetails.isChecking;
   const transactionFeesLoading = transactionFees.isChecking;
@@ -93021,8 +93038,8 @@ const SubnameMintFormContent = ({
             isChecking: totalPriceLoading
           },
           expiryPicker: isExpirable ? {
-            years,
-            onYearsChange: handleYearsChange
+            durationSeconds,
+            onDurationChange: handleDurationChange
           } : void 0,
           ethUsdRate
         }
@@ -93629,5 +93646,5 @@ const useTheme = () => {
   return ctx;
 };
 
-export { Accordion, Alert, Button, Card, ChainIcon, ConnectAndSetChain, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, ENS_RESOLVER_ABI, EnsNameRegistrationForm, EnsRecordsForm, Icon, Input, ListingNetwork, ListingType, MULTICALL, Modal, OffchainSubnameForm, PricingDisplay, ProfileHeader, ProgressBar, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, ShurikenSpinner, SubnameMintForm, Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionPendingScreen, TxProgress, capitalize, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce, deepCopy, diffToEnsRecords, ensureFloatInput, equalsIgnoreCase, formatFloat, getAvatarUploadErrorMessage, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerName, getBlockExplorerTransactionUrl, getChainIdForListingNetwork, getEnsAppUrl, getEnsRecordsDiff, getImageUploadErrorMessage, getSupportedAddressByChainId, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isUserDeniedError, supportedAddresses, supportedContenthashRecords, supportedTexts, useAvatarClient, useENSResolver, useEthDollarValue, useMintManager, useMintSubname, useOffchainManager, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords, wait };
+export { Accordion, Alert, Button, Card, ChainIcon, ConnectAndSetChain, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, DurationPicker, ENS_RESOLVER_ABI, EnsNameRegistrationForm, EnsRecordsForm, Icon, Input, ListingNetwork, ListingType, MIN_REGISTRATION_SECONDS, MULTICALL, Modal, ONE_DAY, ONE_YEAR, OffchainSubnameForm, PricingDisplay, ProfileHeader, ProgressBar, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, ShurikenSpinner, SubnameMintForm, Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionPendingScreen, TxProgress, capitalize, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce, deepCopy, diffToEnsRecords, ensureFloatInput, equalsIgnoreCase, formatDurationSummary, formatFloat, getAvatarUploadErrorMessage, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerName, getBlockExplorerTransactionUrl, getChainIdForListingNetwork, getEnsAppUrl, getEnsRecordsDiff, getImageUploadErrorMessage, getSupportedAddressByChainId, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isUserDeniedError, roundDurationWithDay, secondsFromYears, secondsToDateInput, supportedAddresses, supportedContenthashRecords, supportedTexts, useAvatarClient, useENSResolver, useEthDollarValue, useMintManager, useMintSubname, useOffchainManager, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords, wait, yearsFromSeconds };
 //# sourceMappingURL=index.js.map