@thenamespace/ens-components 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -172,6 +172,45 @@ declare const yearsFromSeconds: (seconds: number) => number;
  */
 declare const formatDurationSummary: (durationSeconds: number) => string;
 
+/**
+ * Pure helpers for formatting ETH/USD pricing in the registration UI.
+ *
+ * Display rules:
+ *  - ETH is rendered at a fixed 4 decimals.
+ *  - Non-zero values smaller than 0.0001 ETH render as the literal "<0.0001"
+ *    so cheap-gas rows stay informative without claiming a misleading exact
+ *    figure. The USD subtitle is derived from wei (when available) so it
+ *    stays numerically honest even when the ETH cell is rounded.
+ *  - "Free" and "N/A" are sentinel strings — they bypass formatting and
+ *    suppress the USD subtitle.
+ */
+declare const ETH_SENTINELS: readonly ["Free", "N/A"];
+type EthSentinel = (typeof ETH_SENTINELS)[number];
+declare const isSentinel: (amount: number | string) => amount is EthSentinel;
+/**
+ * Format an ETH amount for display at a fixed 4 decimals.
+ *
+ * Any positive value below the 4-decimal threshold renders as the literal
+ * "<0.0001" — honest about the rounding direction, and (crucially) avoids
+ * the misleading 1:1 read against the wei-derived USD subtitle when the
+ * true amount is much smaller than 0.0001 ETH.
+ */
+declare const formatEth: (eth: number) => string;
+/**
+ * Convert wei → USD. Note the `Number(bigint)` cast loses exactness above
+ * 2^53 wei (~0.009 ETH); the resulting error is < 1e-7 relative, which is
+ * invisible after `.toFixed(2)` for any realistic ENS registration total.
+ */
+declare const usdFromWei: (wei: bigint, rate: number) => number;
+/**
+ * Compute the `≈ $X.XX` subtitle for a fee row.
+ *
+ * Prefers `weiAmount` (precise) over the displayed string (which may have
+ * been rounded by `formatEth`). Returns `null` when the row is loading,
+ * unpriced, a sentinel ("Free"/"N/A"), or otherwise unparseable.
+ */
+declare const computeUsd: (amount: number | string, weiAmount: bigint | undefined, ethUsdRate: number | null | undefined, isChecking: boolean) => string | null;
+
 interface EnsRecordsFormProps {
     resolverChainId?: number;
     resolverAddress?: Address;
@@ -459,20 +498,20 @@ interface ProgressBarProps {
 }
 declare function ProgressBar({ progress }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
+interface FeeRow {
+    amount: number | string;
+    isChecking: boolean;
+    /** Optional precise wei value. When provided, USD is computed from wei
+     *  rather than from the (possibly rounded) display string. See
+     *  `usdFromWei` for the precision bound. */
+    weiAmount?: bigint;
+}
 interface PricingDisplayProps {
-    primaryFee: {
+    primaryFee: FeeRow & {
         label: string;
-        amount: number | string;
-        isChecking: boolean;
-    };
-    networkFees?: {
-        amount: number | string;
-        isChecking: boolean;
-    };
-    total: {
-        amount: number | string;
-        isChecking: boolean;
     };
+    networkFees?: FeeRow;
+    total: FeeRow;
     expiryPicker?: {
         durationSeconds: number;
         onDurationChange: (seconds: number) => void;
@@ -628,6 +667,15 @@ interface RentPriceResponse {
     wei: bigint;
     eth: number;
 }
+interface RegistrationFeeEstimate {
+    wei: bigint;
+    eth: number;
+    gasEstimate: bigint;
+    gasPrice: bigint;
+    /** True when the precise eth_estimateGas+stateOverride path failed and we
+     *  fell back to a heuristic. UI can mark the value as approximate. */
+    isHeuristic: boolean;
+}
 interface RegistrationRequest {
     label: string;
     owner: Address;
@@ -641,6 +689,7 @@ declare const useRegisterENS: ({ isTestnet }: {
 }) => {
     isEnsAvailable: (label: string) => Promise<boolean>;
     getRegistrationPrice: (label: string, durationInSeconds?: number) => Promise<RentPriceResponse>;
+    estimateRegistrationFees: (request: RegistrationRequest) => Promise<RegistrationFeeEstimate>;
     sendCommitmentTx: (request: RegistrationRequest) => Promise<Hash>;
     sendRegisterTx: (request: RegistrationRequest) => Promise<{
         txHash: Hash;
@@ -879,5 +928,5 @@ declare const useAvatarClient: ({ isTestnet, domain }: UseAvatarClientParams) =>
     getErrorMessage: (err: unknown, imageType?: UploadImageType) => string;
 };
 
-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 };
-export type { AccordionProps, AlertPosition, AlertProps, AlertVariant, ButtonProps, ButtonSize, ButtonVariant, ChainName$1 as ChainName, ConnectAndSetChainProps, ContractErrorLabelProps, DropdownProps, DurationPickerProps, EnsAddressRecord$1 as EnsAddressRecord, EnsContenthashRecord, EnsRecords$1 as EnsRecords, EnsRecordsDiff, EnsTextRecord$1 as EnsTextRecord, EstimatedFees, IconName, IconProps, InputProps, InputSize, InputType, ModalPresentation, ModalProps, ModalResponsivePresentation, ModalSize, NameListing, OffchainSubnameCreatedData, PricingDisplayProps, ProfileHeaderProps, RecordValidationError, RegistrationRequest, ShurikenSpinnerProps, SupportedContenthashRecord, SupportedEnsAddress, SupportedText, SupportedTextRecord, TextCategory, TextColor, TextProps, TextSize, TextWeight, TextareaProps, TextareaSize, ThemeContextValue, ThemeName, ThemeProviderProps, TooltipPosition, TooltipProps, UploadAvatarParams, UploadImageType };
+export { Accordion, Alert, Button, Card, ChainIcon, ConnectAndSetChain, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, DurationPicker, ENS_RESOLVER_ABI, ETH_SENTINELS, 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, computeUsd, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce, deepCopy, diffToEnsRecords, ensureFloatInput, equalsIgnoreCase, formatDurationSummary, formatEth, formatFloat, getAvatarUploadErrorMessage, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerName, getBlockExplorerTransactionUrl, getChainIdForListingNetwork, getEnsAppUrl, getEnsRecordsDiff, getImageUploadErrorMessage, getSupportedAddressByChainId, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isSentinel, isUserDeniedError, roundDurationWithDay, secondsFromYears, secondsToDateInput, supportedAddresses, supportedContenthashRecords, supportedTexts, usdFromWei, useAvatarClient, useENSResolver, useEthDollarValue, useMintManager, useMintSubname, useOffchainManager, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords, wait, yearsFromSeconds };
+export type { AccordionProps, AlertPosition, AlertProps, AlertVariant, ButtonProps, ButtonSize, ButtonVariant, ChainName$1 as ChainName, ConnectAndSetChainProps, ContractErrorLabelProps, DropdownProps, DurationPickerProps, EnsAddressRecord$1 as EnsAddressRecord, EnsContenthashRecord, EnsRecords$1 as EnsRecords, EnsRecordsDiff, EnsTextRecord$1 as EnsTextRecord, EstimatedFees, EthSentinel, IconName, IconProps, InputProps, InputSize, InputType, ModalPresentation, ModalProps, ModalResponsivePresentation, ModalSize, NameListing, OffchainSubnameCreatedData, PricingDisplayProps, ProfileHeaderProps, RecordValidationError, RegistrationFeeEstimate, RegistrationRequest, ShurikenSpinnerProps, SupportedContenthashRecord, SupportedEnsAddress, SupportedText, SupportedTextRecord, TextCategory, TextColor, TextProps, TextSize, TextWeight, TextareaProps, TextareaSize, ThemeContextValue, ThemeName, ThemeProviderProps, TooltipPosition, TooltipProps, UploadAvatarParams, UploadImageType };

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';
@@ -11686,6 +11686,24 @@ const formatDurationSummary = (durationSeconds) => {
   return parts.slice(0, 2).join(", ") || "0 days";
 };
 
+const ETH_SENTINELS = ["Free", "N/A"];
+const isSentinel = (amount) => amount === "Free" || amount === "N/A";
+const formatEth = (eth) => {
+  if (!isFinite(eth) || eth <= 0) return "0.0000";
+  if (eth < 1e-4) return "<0.0001";
+  return eth.toFixed(4);
+};
+const usdFromWei = (wei, rate) => Number(wei) * rate / 1e18;
+const computeUsd = (amount, weiAmount, ethUsdRate, isChecking) => {
+  if (!ethUsdRate || isChecking || isSentinel(amount)) return null;
+  if (weiAmount !== void 0 && weiAmount > 0n) {
+    return usdFromWei(weiAmount, ethUsdRate).toFixed(2);
+  }
+  const eth = parseFloat(String(amount).replace(/^~/, ""));
+  if (isNaN(eth) || eth <= 0) return null;
+  return (eth * ethUsdRate).toFixed(2);
+};
+
 const isValidEmvAddress = (value) => {
   return isAddress$1(value);
 };
@@ -12017,6 +12035,7 @@ const DurationPicker = ({
   ] });
 };
 
+const NBSP = "\xA0";
 const PricingDisplay = ({
   primaryFee,
   networkFees,
@@ -12026,14 +12045,10 @@ const PricingDisplay = ({
   className = ""
 }) => {
   const totalLoading = total.isChecking || primaryFee.isChecking || networkFees?.isChecking;
-  const totalUsd = React__default.useMemo(() => {
-    if (!ethUsdRate || totalLoading || total.amount === "Free" || total.amount === "N/A") {
-      return null;
-    }
-    const eth = parseFloat(String(total.amount));
-    if (isNaN(eth) || eth <= 0) return null;
-    return (eth * ethUsdRate).toFixed(2);
-  }, [ethUsdRate, total.amount, totalLoading]);
+  const totalUsd = React__default.useMemo(
+    () => computeUsd(total.amount, total.weiAmount, ethUsdRate, !!totalLoading),
+    [ethUsdRate, total.amount, total.weiAmount, totalLoading]
+  );
   return /* @__PURE__ */ jsxs("div", { className: `ens-registration-pricing ${className}`, children: [
     expiryPicker && /* @__PURE__ */ jsx("div", { className: "ens-expiry-picker mb-2", children: /* @__PURE__ */ jsx(
       DurationPicker,
@@ -12045,23 +12060,17 @@ const PricingDisplay = ({
     ) }),
     /* @__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` })
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: primaryFee.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }) : isSentinel(primaryFee.amount) ? 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"
-      ] })
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: networkFees.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }) : 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` }),
-        totalUsd && /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
-          "\u2248 $",
-          totalUsd
-        ] })
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
+        /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: totalLoading ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 18 }) : isSentinel(total.amount) ? total.amount : `${total.amount} ETH` }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: totalUsd ? `\u2248 $${totalUsd}` : NBSP })
       ] })
     ] })
   ] });
@@ -64136,6 +64145,18 @@ const ABIS = {
   RESOLVER
 };
 
+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)"
@@ -64160,7 +64181,7 @@ const useRegisterENS = ({ isTestnet }) => {
     const totalPrice = price.base + price.premium;
     return {
       wei: totalPrice,
-      eth: formatFloat(formatEther(totalPrice, "wei"), 4)
+      eth: parseFloat(formatEther(totalPrice))
     };
   };
   const isEnsAvailable = async (label) => {
@@ -64234,6 +64255,87 @@ const useRegisterENS = ({ isTestnet }) => {
     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 {
+      wei: totalWei,
+      eth: parseFloat(formatEther(totalWei)),
+      gasEstimate: totalGas,
+      gasPrice,
+      isHeuristic: registerResult.isHeuristic
+    };
+  };
   const getEthController = () => distExports$1.getEnsContracts(isTestnet).ethRegistrarController;
   const getEnsRegistry = () => distExports$1.getEnsContracts(isTestnet).ensRegistry;
   const getPublicResolver = () => distExports$1.getEnsContracts(isTestnet).publicResolver;
@@ -64244,6 +64346,7 @@ const useRegisterENS = ({ isTestnet }) => {
   return {
     isEnsAvailable,
     getRegistrationPrice,
+    estimateRegistrationFees,
     sendCommitmentTx,
     sendRegisterTx
   };
@@ -89487,19 +89590,15 @@ const RegistrationSummary = ({
   const { isConnected } = useAccount();
   const { ethUsdRate } = useEthDollarValue();
   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 { regPrice, regFees, regTotal, regTotalWei } = useMemo(() => {
+    const priceEth = price?.eth ?? 0;
+    const feesEth = transactionFees?.price.eth ?? 0;
+    const heuristicPrefix = transactionFees?.isHeuristic ? "~" : "";
+    const regPrice2 = priceEth > 0 ? formatEth(priceEth) : "0.0000";
+    const regFees2 = transactionFees?.failed ? "N/A" : `${heuristicPrefix}${formatEth(feesEth)}`;
+    const regTotal2 = transactionFees?.failed ? "N/A" : `${heuristicPrefix}${formatEth(priceEth + feesEth)}`;
+    const regTotalWei2 = (price?.wei ?? 0n) + (transactionFees?.price.wei ?? 0n);
+    return { regPrice: regPrice2, regFees: regFees2, regTotal: regTotal2, regTotalWei: regTotalWei2 };
   }, [price, transactionFees]);
   const checkAvailability = async (labelToCheck) => {
     try {
@@ -89521,6 +89620,14 @@ const RegistrationSummary = ({
       onPriceChange({ isChecking: false, eth: -1, wei: 0n });
     }
   };
+  useEffect(() => {
+    if (label.length >= MIN_ENS_LEN$2) {
+      onNameValidationChange({ isChecking: true, isTaken: false });
+      onPriceChange({ isChecking: true, eth: 0, wei: 0n });
+      checkAvailability(label);
+      checkRegistrationPrice(label, durationSeconds);
+    }
+  }, []);
   const debouncedCheckAvailability = useCallback(
     debounce((labelToCheck) => checkAvailability(labelToCheck), 500),
     []
@@ -89562,7 +89669,7 @@ const RegistrationSummary = ({
   );
   const nextBtnDisabled = label.length < MIN_ENS_LEN$2 || nameValidation.isChecking || nameValidation.isTaken;
   const totalPriceLoading = transactionFees?.isChecking || price.isChecking;
-  const transactionFeesLoading = transactionFees?.isChecking || false;
+  const transactionFeesLoading = transactionFees?.isChecking || price.isChecking;
   return /* @__PURE__ */ jsxs("div", { className: "ens-registration-summary", children: [
     !hideBanner && /* @__PURE__ */ jsx("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ jsx(
       "img",
@@ -89613,13 +89720,11 @@ 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
+            isChecking: totalPriceLoading,
+            weiAmount: regTotalWei
           },
           expiryPicker: {
             durationSeconds,
@@ -89846,13 +89951,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);
@@ -90072,9 +90183,10 @@ const RegistrationStep = ({
     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 transactionFeesEth = formatEther(gasUsed * gasPrice);
+      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 = new Date(Date.now() + state.durationInSeconds * 1e3);
       const formattedExpiryDate = expiryDate.toLocaleDateString("en-US", {
@@ -91062,19 +91174,25 @@ const RegistrationProcess = ({
   ] });
 };
 
+const REG_SECRET_PLACEHOLDER = "0x0000000000000000000000000000000000000000000000000000000000000001";
+const FEE_ESTIMATE_OWNER_PLACEHOLDER = "0x0000000000000000000000000000000000000001";
 const getLabel = (name) => {
   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 [durationSeconds, setDurationSeconds] = useState(() => secondsFromYears(/* @__PURE__ */ new Date(), 1));
   const [regTxFees, setRegTxFees] = useState({
     estimatedGas: 0,
     isChecking: false,
-    price: { wei: 0n, eth: 1e-4 }
+    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 });
@@ -91092,6 +91210,74 @@ const EnsNameRegistrationForm = (props) => {
     [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 (!label || label.length < 3 || nameValidation.isChecking || nameValidation.isTaken || price.isChecking || price.eth <= 0) {
+      feeRequestRef.current += 1;
+      setRegTxFees((prev) => prev.isChecking ? { ...prev, isChecking: false } : prev);
+      return;
+    }
+    const requestId = feeRequestRef.current + 1;
+    feeRequestRef.current = requestId;
+    setRegTxFees(
+      (prev) => prev.isChecking && !prev.failed ? prev : { ...prev, isChecking: true, failed: false }
+    );
+    debouncedEstimate(requestId, {
+      label,
+      // Estimation works without a wallet — gas price comes from the network
+      // and the owner's balance is state-overridden in the estimator.
+      owner: connectedAddress ?? FEE_ESTIMATE_OWNER_PLACEHOLDER,
+      durationInSeconds: durationSeconds,
+      records: ensRecords
+    });
+  }, [
+    connectedAddress,
+    label,
+    durationSeconds,
+    ensRecords,
+    nameValidation.isChecking,
+    nameValidation.isTaken,
+    price.isChecking,
+    price.eth
+  ]);
   const handleSaveRecords = () => {
     setEnsRecords(deepCopy(ensRecordTemplate));
     setShowProfile(false);
@@ -93646,5 +93832,5 @@ const useTheme = () => {
   return ctx;
 };
 
-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 };
+export { Accordion, Alert, Button, Card, ChainIcon, ConnectAndSetChain, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, DurationPicker, ENS_RESOLVER_ABI, ETH_SENTINELS, 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, computeUsd, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce, deepCopy, diffToEnsRecords, ensureFloatInput, equalsIgnoreCase, formatDurationSummary, formatEth, formatFloat, getAvatarUploadErrorMessage, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerName, getBlockExplorerTransactionUrl, getChainIdForListingNetwork, getEnsAppUrl, getEnsRecordsDiff, getImageUploadErrorMessage, getSupportedAddressByChainId, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isSentinel, isUserDeniedError, roundDurationWithDay, secondsFromYears, secondsToDateInput, supportedAddresses, supportedContenthashRecords, supportedTexts, usdFromWei, useAvatarClient, useENSResolver, useEthDollarValue, useMintManager, useMintSubname, useOffchainManager, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords, wait, yearsFromSeconds };
 //# sourceMappingURL=index.js.map