@thenamespace/ens-components 1.3.0 → 1.3.1

package/dist/index.d.ts

@@ -628,6 +628,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 +650,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;
@@ -880,4 +890,4 @@ declare const useAvatarClient: ({ isTestnet, domain }: UseAvatarClientParams) =>
 };
 
 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 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, 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';
@@ -12030,7 +12030,7 @@ 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]);
@@ -12045,19 +12045,16 @@ 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` })
+      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
@@ -64136,6 +64133,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)"
@@ -64234,6 +64243,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 +64334,7 @@ const useRegisterENS = ({ isTestnet }) => {
   return {
     isEnsAvailable,
     getRegistrationPrice,
+    estimateRegistrationFees,
     sendCommitmentTx,
     sendRegisterTx
   };
@@ -89488,18 +89579,13 @@ const RegistrationSummary = ({
   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 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) => {
     try {
@@ -89613,10 +89699,7 @@ 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
@@ -89846,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);
@@ -90072,9 +90161,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 +91152,24 @@ const RegistrationProcess = ({
   ] });
 };
 
+const REG_SECRET_PLACEHOLDER = "0x0000000000000000000000000000000000000000000000000000000000000001";
 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 +91187,71 @@ 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 (!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);
@@ -91137,7 +91297,7 @@ const EnsNameRegistrationForm = (props) => {
               price,
               nameValidation,
               isTestnet: props.isTestnet || false,
-              transactionFees: regTxFees,
+              transactionFees: connectedAddress ? regTxFees : void 0,
               title: props.title,
               subtitle: props.subtitle,
               bannerImage: props.bannerImage,