@thenamespace/ens-components 1.2.1 → 1.3.1

package/dist/index.js

@@ -4,7 +4,7 @@ import * as zlib from 'zlib';
 import * as crypto$5 from 'crypto';
 import * as net from 'net';
 import * as viem from 'viem';
-import { ContractFunctionExecutionError, parseAbi, namehash as namehash$1, encodeFunctionData, toHex, toBytes as toBytes$1, pad, isAddress as isAddress$1, keccak256, formatEther, zeroAddress, zeroHash } from 'viem';
+import { ContractFunctionExecutionError, parseAbi, namehash as namehash$1, encodeFunctionData, toHex, toBytes as toBytes$1, pad, isAddress as isAddress$1, keccak256, parseEther, padHex, formatEther, zeroAddress, concatHex, zeroHash } from 'viem';
 import * as chains$1 from 'viem/chains';
 import { baseSepolia, sepolia, mainnet, optimism, base as base$3, zoraSepolia, zora, celoAlfajores, celo, polygonMumbai, polygon, arbitrumSepolia, arbitrum, optimismSepolia } from 'viem/chains';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -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,
@@ -11868,42 +12030,31 @@ const PricingDisplay = ({
     if (!ethUsdRate || totalLoading || total.amount === "Free" || total.amount === "N/A") {
       return null;
     }
-    const eth = parseFloat(String(total.amount));
+    const eth = parseFloat(String(total.amount).replace(/^~/, ""));
     if (isNaN(eth) || eth <= 0) return null;
     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` })
+      primaryFee.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 16 }) : /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: primaryFee.amount === "Free" || primaryFee.amount === "N/A" ? primaryFee.amount : `${primaryFee.amount} ETH` })
     ] }),
     networkFees && /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [
       /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Est. network fees" }),
-      networkFees.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
-        networkFees.amount,
-        " ETH"
-      ] })
+      networkFees.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 16 }) : /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: networkFees.amount === "N/A" ? "N/A" : `${networkFees.amount} ETH` })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mt-2 total-fee", children: [
       /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: "Total" }),
       totalLoading ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 20 }) : /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
-        /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: total.amount === "Free" ? "Free" : `${total.amount} ETH` }),
+        /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: total.amount === "Free" || total.amount === "N/A" ? total.amount : `${total.amount} ETH` }),
         totalUsd && /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
           "\u2248 $",
           totalUsd
@@ -63982,7 +64133,18 @@ const ABIS = {
   RESOLVER
 };
 
-const SECONDS_IN_YEAR = 31536e3;
+const COMMITMENTS_SLOT = 1n;
+const FIVE_MINUTES_SECONDS = 5 * 60;
+const HEURISTIC_COMMIT_GAS = 50000n;
+const HEURISTIC_REGISTER_BASE_GAS = 240000n;
+const HEURISTIC_GAS_PER_RECORD = 50000n;
+const isStateOverrideRejection = (err) => {
+  const e = err;
+  const code = e?.code ?? e?.cause?.code;
+  if (code === -32602 || code === -32601 || code === -32e3) return true;
+  const msg = `${e?.shortMessage ?? ""} ${e?.message ?? ""}`.toLowerCase();
+  return msg.includes("state override") || msg.includes("stateoverride") || msg.includes("too many arguments") || msg.includes("invalid argument 2") || msg.includes("3rd parameter") || msg.includes("does not support");
+};
 const NAMESPACE_REFERRER_ADDRESS = "0xb7B18611b8C51B4B3F400BaF09DB49E61e0aF044";
 const ENS_REGISTRY_ABI = parseAbi([
   "function owner(bytes32) view returns (address)"
@@ -63995,12 +64157,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 +64187,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 +64201,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 +64224,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 +64241,92 @@ const useRegisterENS = ({ isTestnet }) => {
       value: price.wei
     });
     const tx = await walletClient.writeContract(contractRequest);
+    return { txHash: tx, price };
+  };
+  const getEffectiveGasPrice = () => publicClient.getGasPrice();
+  const commitmentStorageSlot = (commitment) => keccak256(
+    concatHex([padHex(commitment, { size: 32 }), padHex(toHex(COMMITMENTS_SLOT), { size: 32 })])
+  );
+  const estimateRegistrationFees = async (request) => {
+    const fullName = `${request.label}.eth`;
+    const resolverData = convertToResolverData(fullName, request.records);
+    const controller = getEthController();
+    const commitmentParams = {
+      label: request.label,
+      owner: request.owner,
+      duration: BigInt(request.durationInSeconds),
+      secret: keccak256(toBytes$1(request.secret)),
+      resolver: getPublicResolver(),
+      data: resolverData,
+      reverseRecord: 0,
+      referrer: getRegReferrer(request)
+    };
+    const commitment = await publicClient.readContract({
+      functionName: "makeCommitment",
+      abi: ABIS.ETH_REGISTRAR_CONTOLLER,
+      address: controller,
+      args: [commitmentParams]
+    });
+    const price = await getRegistrationPrice(request.label, request.durationInSeconds);
+    const fiveMinAgo = BigInt(Math.floor(Date.now() / 1e3) - FIVE_MINUTES_SECONDS);
+    const balanceOverride = price.wei * 2n + parseEther("1000000");
+    const gasPricePromise = getEffectiveGasPrice();
+    const commitGasPromise = publicClient.estimateContractGas({
+      address: controller,
+      abi: ABIS.ETH_REGISTRAR_CONTOLLER,
+      functionName: "commit",
+      args: [commitment],
+      account: request.owner
+    }).catch(() => HEURISTIC_COMMIT_GAS);
+    const registerGasPromise = publicClient.estimateContractGas({
+      address: controller,
+      abi: ABIS.ETH_REGISTRAR_CONTOLLER,
+      functionName: "register",
+      args: [commitmentParams],
+      account: request.owner,
+      value: price.wei,
+      stateOverride: [
+        {
+          address: controller,
+          stateDiff: [
+            {
+              slot: commitmentStorageSlot(commitment),
+              value: padHex(toHex(fiveMinAgo), { size: 32 })
+            }
+          ]
+        },
+        { address: request.owner, balance: balanceOverride }
+      ]
+    }).then((g) => ({ gas: g, isHeuristic: false })).catch((err) => {
+      if (typeof console !== "undefined") {
+        console.warn(
+          "[useRegisterENS] register-gas estimation failed; using heuristic.",
+          isStateOverrideRejection(err) ? "(state override unsupported)" : "",
+          err
+        );
+      }
+      const recordCount = (request.records.addresses?.length ?? 0) + (request.records.texts?.length ?? 0);
+      const heuristic = HEURISTIC_REGISTER_BASE_GAS + BigInt(recordCount) * HEURISTIC_GAS_PER_RECORD;
+      return { gas: heuristic, isHeuristic: true };
+    });
+    const [commitGas, registerResult, gasPrice] = await Promise.all([
+      commitGasPromise,
+      registerGasPromise,
+      gasPricePromise
+    ]);
+    const totalGas = commitGas + registerResult.gas;
+    const totalWei = totalGas * gasPrice;
     return {
-      txHash: tx,
-      price
+      wei: totalWei,
+      eth: parseFloat(formatEther(totalWei)),
+      gasEstimate: totalGas,
+      gasPrice,
+      isHeuristic: registerResult.isHeuristic
     };
   };
-  const getEthController = () => {
-    return distExports$1.getEnsContracts(isTestnet).ethRegistrarController;
-  };
-  const getEnsRegistry = () => {
-    return distExports$1.getEnsContracts(isTestnet).ensRegistry;
-  };
-  const getPublicResolver = () => {
-    return distExports$1.getEnsContracts(isTestnet).publicResolver;
-  };
+  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);
@@ -64106,6 +64334,7 @@ const useRegisterENS = ({ isTestnet }) => {
   return {
     isEnsAvailable,
     getRegistrationPrice,
+    estimateRegistrationFees,
     sendCommitmentTx,
     sendRegisterTx
   };
@@ -89328,7 +89557,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 +89568,7 @@ const RegistrationSummary = ({
   hideBanner = false,
   bannerWidth = 250,
   onLabelChange,
-  onYearsChange,
+  onDurationChange,
   onPriceChange,
   onNameValidationChange,
   onSetProfile,
@@ -89348,33 +89577,21 @@ 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;
-    let total = 0;
-    if (price) {
-      regPrice2 += price.eth;
-      total += price.eth;
-    }
-    if (transactionFees) {
-      regFees2 += transactionFees.price.eth;
-      total += transactionFees.price.eth;
-    }
-    return {
-      regFees: regFees2,
-      regPrice: regPrice2,
-      regTotal: formatFloat(total, 5)
-    };
+    const priceEth = price?.eth ?? 0;
+    const feesEth = transactionFees?.price.eth ?? 0;
+    const heuristicPrefix = transactionFees?.isHeuristic ? "~" : "";
+    const regPrice2 = priceEth > 0 ? priceEth.toFixed(4) : "0.0000";
+    const regFees2 = transactionFees?.failed ? "N/A" : `${heuristicPrefix}${feesEth.toFixed(4)}`;
+    const regTotal2 = transactionFees?.failed ? "N/A" : `${heuristicPrefix}${(priceEth + feesEth).toFixed(4)}`;
+    return { regPrice: regPrice2, regFees: regFees2, regTotal: regTotal2 };
   }, [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 +89599,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 +89613,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 +89631,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;
@@ -89493,17 +89699,15 @@ const RegistrationSummary = ({
             amount: regPrice,
             isChecking: price.isChecking
           },
-          networkFees: {
-            amount: regFees,
-            isChecking: transactionFeesLoading
-          },
+          networkFees: transactionFees ? { amount: regFees, isChecking: transactionFeesLoading } : void 0,
           total: {
             amount: regTotal,
             isChecking: totalPriceLoading
           },
           expiryPicker: {
-            years,
-            onYearsChange: handleYearsChange
+            durationSeconds,
+            onDurationChange: handleDurationChange,
+            minSeconds: MIN_REGISTRATION_SECONDS
           },
           ethUsdRate
         }
@@ -89516,15 +89720,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 +89731,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 +89895,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
@@ -89742,13 +89929,19 @@ const CommitmentStep = ({
       return;
     }
     try {
-      await waitTx({ hash: tx });
+      const receipt = await waitTx({ hash: tx });
+      const commitFeeWei = receipt.gasUsed * (receipt.effectiveGasPrice || 0n);
       setCommitTxStatus({ sent: true, completed: true, hash: tx });
       setTimeout(() => {
         onStateUpdated({
           ...state,
           step: ProcessSteps.TimerStarted,
-          commitment: { tx, completed: true, time: (/* @__PURE__ */ new Date()).getTime() }
+          commitment: {
+            tx,
+            completed: true,
+            time: (/* @__PURE__ */ new Date()).getTime(),
+            feeWei: commitFeeWei
+          }
         });
         setCommitTxStatus({ sent: false, completed: false, hash: "" });
       }, 1e3);
@@ -89922,33 +90115,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 +90150,23 @@ 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 registerFeeWei = receipt.gasUsed * (receipt.effectiveGasPrice || 0n);
+      const commitFeeWei = state.commitment?.feeWei ?? 0n;
+      const totalFeeWei = registerFeeWei + commitFeeWei;
+      const transactionFeesEth = formatEther(totalFeeWei);
       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 +90176,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 +90195,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 +90225,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 +90890,7 @@ var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACBCAYAAABpepAsAAA
 
 const SuccessScreen$1 = ({
   ensName,
-  expiryInYears,
+  durationLabel,
   registrationCost,
   transactionFees,
   total,
@@ -90789,8 +90952,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 +91016,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 +91044,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 +91064,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 +91075,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 +91105,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 +91120,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 +91128,7 @@ const RegistrationProcess = ({
             Button,
             {
               variant: "outline",
-              onClick: handleCancelClose,
+              onClick: () => setShowConfirmClose(false),
               style: { flex: 1 },
               children: "Cancel"
             }
@@ -91013,7 +91137,10 @@ const RegistrationProcess = ({
             Button,
             {
               variant: "destructive",
-              onClick: handleConfirmClose,
+              onClick: () => {
+                setShowConfirmClose(false);
+                onBack?.(true);
+              },
               style: { flex: 1 },
               children: "Leave"
             }
@@ -91025,38 +91152,27 @@ const RegistrationProcess = ({
   ] });
 };
 
+const REG_SECRET_PLACEHOLDER = "0x0000000000000000000000000000000000000000000000000000000000000001";
 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 { address: connectedAddress } = useAccount();
+  const { estimateRegistrationFees } = useRegisterENS({ isTestnet: props.isTestnet });
   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
+    failed: false,
+    isHeuristic: false,
+    price: { wei: 0n, eth: 0 }
   });
+  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,10 +91182,76 @@ 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 feeRequestRef = useRef(0);
+  const estimateFnRef = useRef(estimateRegistrationFees);
+  const referrerRef = useRef(props.referrer);
+  estimateFnRef.current = estimateRegistrationFees;
+  referrerRef.current = props.referrer;
+  const debouncedEstimate = useMemo(
+    () => debounce(
+      (requestId, params) => {
+        estimateFnRef.current({
+          label: params.label,
+          owner: params.owner,
+          durationInSeconds: params.durationInSeconds,
+          secret: REG_SECRET_PLACEHOLDER,
+          records: params.records,
+          referrer: referrerRef.current
+        }).then((result) => {
+          if (feeRequestRef.current !== requestId) return;
+          setRegTxFees({
+            isChecking: false,
+            failed: false,
+            isHeuristic: result.isHeuristic,
+            estimatedGas: Number(result.gasEstimate),
+            price: { wei: result.wei, eth: result.eth }
+          });
+        }).catch(() => {
+          if (feeRequestRef.current !== requestId) return;
+          setRegTxFees({
+            isChecking: false,
+            failed: true,
+            isHeuristic: false,
+            estimatedGas: 0,
+            price: { wei: 0n, eth: 0 }
+          });
+        });
+      },
+      500
+    ),
+    []
+  );
+  useEffect(() => {
+    if (!connectedAddress || !label || label.length < 3 || nameValidation.isChecking || nameValidation.isTaken || price.isChecking || price.eth <= 0) {
+      feeRequestRef.current += 1;
+      return;
+    }
+    const requestId = feeRequestRef.current + 1;
+    feeRequestRef.current = requestId;
+    setRegTxFees(
+      (prev) => prev.isChecking && !prev.failed ? prev : { ...prev, isChecking: true, failed: false }
+    );
+    debouncedEstimate(requestId, {
+      label,
+      owner: connectedAddress,
+      durationInSeconds: durationSeconds,
+      records: ensRecords
+    });
+  }, [
+    connectedAddress,
+    label,
+    durationSeconds,
+    ensRecords,
+    nameValidation.isChecking,
+    nameValidation.isTaken,
+    price.isChecking,
+    price.eth
+  ]);
   const handleSaveRecords = () => {
     setEnsRecords(deepCopy(ensRecordTemplate));
     setShowProfile(false);
@@ -91080,7 +91262,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,18 +91293,18 @@ const EnsNameRegistrationForm = (props) => {
             RegistrationSummary,
             {
               label,
-              years,
+              durationSeconds,
               price,
               nameValidation,
               isTestnet: props.isTestnet || false,
-              transactionFees: regTxFees,
+              transactionFees: connectedAddress ? regTxFees : void 0,
               title: props.title,
               subtitle: props.subtitle,
               bannerImage: props.bannerImage,
               hideBanner: props.hideBanner,
               bannerWidth: props.bannerWidth,
               onLabelChange: setLabel,
-              onYearsChange: setYears,
+              onDurationChange: setDurationSeconds,
               onPriceChange: setPrice,
               onNameValidationChange: setNameValidation,
               onSetProfile: () => setShowProfile(true),
@@ -91136,13 +91318,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 +91337,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 +92800,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 +92894,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 +93198,8 @@ const SubnameMintFormContent = ({
             isChecking: totalPriceLoading
           },
           expiryPicker: isExpirable ? {
-            years,
-            onYearsChange: handleYearsChange
+            durationSeconds,
+            onDurationChange: handleDurationChange
           } : void 0,
           ethUsdRate
         }
@@ -93629,5 +93806,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