@thenamespace/ens-components 0.20.0 → 0.22.0

package/dist/index.js

@@ -1476,12 +1476,24 @@ function convertEVMChainIdToCoinType(chainId) {
 }
 
 const getEnsRecordsDiff = (oldRecords, newRecords) => {
-  const { textsAdded, textsModified, textsRemoved } = getEnsTextDiff(
-    oldRecords.texts,
-    newRecords.texts
-  );
-  const { addressesAdded, addressesModified, addressesRemoved } = getEnsAddressDiff(oldRecords.addresses, newRecords.addresses);
-  const { contenthashAdded, contenthashModified, contenthashRemoved } = getEnsContenthashDiff(oldRecords.contenthash, newRecords.contenthash);
+  const {
+    textsAdded,
+    textsModified,
+    textsRemoved,
+    isDifferent: isTxtDifferent
+  } = getEnsTextDiff(oldRecords.texts, newRecords.texts);
+  const {
+    addressesAdded,
+    addressesModified,
+    addressesRemoved,
+    isDifferent: isAddrDifferent
+  } = getEnsAddressDiff(oldRecords.addresses, newRecords.addresses);
+  const {
+    contenthashAdded,
+    contenthashModified,
+    contenthashRemoved,
+    isDifferent: isChashDifferent
+  } = getEnsContenthashDiff(oldRecords.contenthash, newRecords.contenthash);
   return {
     addressesAdded,
     addressesModified,
@@ -1491,7 +1503,8 @@ const getEnsRecordsDiff = (oldRecords, newRecords) => {
     textsRemoved,
     contenthashAdded,
     contenthashModified,
-    contenthashRemoved
+    contenthashRemoved,
+    isDifferent: isTxtDifferent || isAddrDifferent || isChashDifferent
   };
 };
 const getEnsTextDiff = (oldTexts, newTexts) => {
@@ -1499,15 +1512,18 @@ const getEnsTextDiff = (oldTexts, newTexts) => {
     return {
       textsAdded: newTexts,
       textsModified: [],
-      textsRemoved: []
+      textsRemoved: [],
+      isDifferent: newTexts.length > 0
     };
   }
+  let hasDifferences = false;
   const oldTextMap = {};
   const textsRemoved = [];
   oldTexts.forEach((text) => {
     oldTextMap[text.key] = text;
     const existsInNew = newTexts.find((newText) => newText.key === text.key);
     if (!existsInNew) {
+      hasDifferences = true;
       textsRemoved.push(text);
     }
   });
@@ -1516,15 +1532,18 @@ const getEnsTextDiff = (oldTexts, newTexts) => {
   newTexts.forEach((newText) => {
     const matchingOldText = oldTextMap[newText.key];
     if (!matchingOldText) {
+      hasDifferences = true;
       textsAdded.push(newText);
     } else if (matchingOldText.value !== newText.value) {
+      hasDifferences = true;
       textsModified.push(newText);
     }
   });
   return {
     textsAdded,
     textsModified,
-    textsRemoved
+    textsRemoved,
+    isDifferent: hasDifferences
   };
 };
 const getEnsAddressDiff = (oldAddresses, newAddresses) => {
@@ -1532,9 +1551,11 @@ const getEnsAddressDiff = (oldAddresses, newAddresses) => {
     return {
       addressesAdded: newAddresses,
       addressesModified: [],
-      addressesRemoved: []
+      addressesRemoved: [],
+      isDifferent: newAddresses.length > 0
     };
   }
+  let hasDifference = false;
   const oldAddressMap = {};
   const addressesRemoved = [];
   oldAddresses.forEach((address) => {
@@ -1543,6 +1564,7 @@ const getEnsAddressDiff = (oldAddresses, newAddresses) => {
       (newAddress) => newAddress.coinType === address.coinType
     );
     if (!existsInNew) {
+      hasDifference = true;
       addressesRemoved.push(address);
     }
   });
@@ -1551,15 +1573,18 @@ const getEnsAddressDiff = (oldAddresses, newAddresses) => {
   newAddresses.forEach((newAddress) => {
     const matchinOldAddress = oldAddressMap[newAddress.coinType];
     if (!matchinOldAddress) {
+      hasDifference = true;
       addressesAdded.push(newAddress);
     } else if (matchinOldAddress.value !== newAddress.value) {
+      hasDifference = true;
       addressesModified.push(newAddress);
     }
   });
   return {
     addressesAdded,
     addressesModified,
-    addressesRemoved
+    addressesRemoved,
+    isDifferent: hasDifference
   };
 };
 const getEnsContenthashDiff = (oldRecord, newRecord) => {
@@ -1567,21 +1592,78 @@ const getEnsContenthashDiff = (oldRecord, newRecord) => {
     return {
       contenthashRemoved: false,
       contenthashAdded: void 0,
-      contenthashModified: void 0
+      contenthashModified: void 0,
+      isDifferent: false
     };
   }
   if (!oldRecord && newRecord) {
     return {
       contenthashRemoved: false,
       contenthashAdded: newRecord,
-      contenthashModified: void 0
+      contenthashModified: void 0,
+      isDifferent: true
     };
   }
   const isSame = oldRecord?.protocol === newRecord?.protocol && oldRecord?.value === newRecord?.value;
   return {
     contenthashAdded: void 0,
     contenthashModified: isSame ? void 0 : newRecord,
-    contenthashRemoved: false
+    contenthashRemoved: false,
+    isDifferent: !isSame
+  };
+};
+const validateEnsRecords = (ensRecords) => {
+  const { texts, addresses, contenthash } = ensRecords;
+  let validationErrs = [];
+  let validationFailed = false;
+  if (addresses && addresses.length > 0) {
+    addresses.forEach((addr) => {
+      const validator = getSupportedAddressByCoin(addr.coinType);
+      if (addr.value.length === 0) {
+        validationFailed = true;
+        validationErrs.push({
+          type: "address",
+          reason: `${validator ? validator.label : addr.coinType} address cannot be blank.`
+        });
+        return;
+      }
+      if (validator) {
+        if (!validator.validateFunc?.(addr.value)) {
+          validationFailed = true;
+          validationErrs.push({
+            type: "address",
+            reason: `${validator.label} address value is not valid.`
+          });
+          return;
+        }
+      }
+    });
+  }
+  if (texts && texts.length > 0) {
+    texts.forEach((txt) => {
+      if (!txt.value || txt.value.length === 0) {
+        validationFailed = true;
+        validationErrs.push({
+          type: "text",
+          reason: `Text -> '${txt.key}' cannot be blank.`
+        });
+      }
+    });
+  }
+  if (contenthash) {
+    const { value, protocol } = contenthash;
+    const validator = getSupportedChashByProtocol(protocol);
+    if (value?.trim?.().length == 0 || !isContenthashValid(protocol, value)) {
+      validationFailed = true;
+      validationErrs.push({
+        type: "contenthash",
+        reason: `Contenthash value is invalid for ${validator ? validator.label : protocol} protocol`
+      });
+    }
+  }
+  return {
+    validationFailed,
+    errors: validationErrs
   };
 };
 
@@ -22292,8 +22374,7 @@ const convertToResolverData = (name, records) => {
     addressesModified: [],
     addressesRemoved: [],
     contenthashRemoved: false,
-    contenthashAdded: records.contenthash
-  });
+    contenthashAdded: records.contenthash});
 };
 const convertToMulticallResolverData = (name, recordsDiff) => {
   const node = namehash(name);
@@ -23968,7 +24049,7 @@ function requireAddresses () {
 	        nameWrapperProxy: "0x25ADB7e69390FbfeEe26F3C8053955d4D4428Afd",
 	        hybridResolver: "0xe5A0277018879679d18cCDb66B52BD06f7fE95FD",
 	        oldHybridResolver: "0x0dcD506D1Be162E50A2b434028A9a148F2686444",
-	        bulkEnsRegistrar: "0x99393f6ceb39a6fdefdfeed1606669b16c49c453"
+	        bulkEnsRegistrar: "0x99393f6ceb39a6fdefdfeed1606669b16c49c453",
 	    },
 	    [sepoliaId]: {
 	        mintController: "0x313442ba3A0b12193787BD162f99Ed3C415F2886",
@@ -24003,15 +24084,17 @@ function requireAddresses () {
 	        ensRegistry: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",
 	        nameWrapper: "0xd4416b13d2b3a9abae7acd5d6c2bbdbe25686401",
 	        ethRegistrarController: "0x59E16fcCd424Cc24e280Be16E11Bcd56fb0CE547",
-	        publicResolver: "0x231b0Ee14048e9dCcD1d247744d114a4EB5E8E63",
-	        universalResolver: "0xce01f8eee7E479C928F8919abD53E553a36CeF67"
+	        publicResolver: "0xF29100983E058B709F3D539b0c765937B804AC15",
+	        universalResolver: "0xce01f8eee7E479C928F8919abD53E553a36CeF67",
+	        unwrappedRegistrarController: "0x59E16fcCd424Cc24e280Be16E11Bcd56fb0CE547"
 	    },
 	    [sepoliaId]: {
 	        ensRegistry: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",
 	        nameWrapper: "0x0635513f179D50A207757E05759CbD106d7dFcE8",
 	        ethRegistrarController: "0xfb3cE5D01e0f33f41DbB39035dB9745962F1f968",
-	        publicResolver: "0x8FADE66B79cC9f707aB26799354482EB93a5B7dD",
-	        universalResolver: "0xc8af999e38273d658be1b921b88a9ddf005769cc"
+	        publicResolver: "0xE99638b40E4Fff0129D56f03b55b6bbC4BBE49b5",
+	        universalResolver: "0xc8af999e38273d658be1b921b88a9ddf005769cc",
+	        unwrappedRegistrarController: "0xfb3cE5D01e0f33f41DbB39035dB9745962F1f968"
 	    }
 	};
 	const getEnsContracts = (isTestnet = false) => {
@@ -24832,7 +24915,6 @@ const useRegisterENS = ({ isTestnet }) => {
     }
     const fullName = `${request.label}.eth`;
     const resolverData = convertToResolverData(fullName, request.records);
-    console.log("Generating resolver data for name: " + fullName, resolverData);
     const registration = {
       label: request.label,
       owner: request.owner,
@@ -24855,7 +24937,11 @@ const useRegisterENS = ({ isTestnet }) => {
       account: walletClient.account,
       value: price.wei
     });
-    return walletClient.writeContract(contractRequest);
+    const tx = await walletClient.writeContract(contractRequest);
+    return {
+      txHash: tx,
+      price
+    };
   };
   const getEthController = () => {
     return distExports.getEnsContracts(isTestnet).ethRegistrarController;
@@ -24925,6 +25011,7 @@ const RegistrationSummary = ({
   years,
   price,
   nameValidation,
+  transactionFees,
   isTestnet = false,
   onLabelChange,
   onYearsChange,
@@ -24936,6 +25023,24 @@ const RegistrationSummary = ({
   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)
+    };
+  }, [price, transactionFees]);
   const checkAvailability = async (labelToCheck) => {
     let _available = false;
     try {
@@ -25008,6 +25113,8 @@ const RegistrationSummary = ({
     return label.length >= MIN_ENS_LEN && !nameValidation.isChecking && !nameValidation.isTaken;
   }, [label.length, nameValidation.isChecking, nameValidation.isTaken]);
   const nextBtnDisabled = label.length < MIN_ENS_LEN || nameValidation.isChecking || nameValidation.isTaken;
+  const totalPriceLoading = transactionFees?.isChecking || price.isChecking;
+  const transactionFeesLoading = transactionFees?.isChecking || false;
   return /* @__PURE__ */ jsxs("div", { className: "ens-registration-summary", children: [
     /* @__PURE__ */ jsx("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ jsx(
       "img",
@@ -25069,17 +25176,23 @@ const RegistrationSummary = ({
         /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [
           /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", children: "Registration Fee" }),
           price.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Text$1, { size: "sm", color: "grey", children: [
-            price.eth,
+            regPrice,
             " ETH"
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [
-          /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", children: "Est. network fee" }),
-          /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", children: "0.04 ETH" })
+          /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", children: "Est. network fees" }),
+          transactionFeesLoading ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Text$1, { size: "sm", color: "grey", children: [
+            regFees,
+            " ETH"
+          ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mt-2 total-fee", children: [
           /* @__PURE__ */ jsx(Text$1, { size: "lg", weight: "bold", children: "Total" }),
-          /* @__PURE__ */ jsx(Text$1, { size: "lg", weight: "bold", children: "0.08 ETH" })
+          totalPriceLoading ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 20 }) : /* @__PURE__ */ jsxs(Text$1, { size: "lg", weight: "bold", children: [
+            regTotal,
+            " ETH"
+          ] })
         ] })
       ] }),
       /* @__PURE__ */ jsx(
@@ -25127,26 +25240,43 @@ const SetNameRecords = ({
   records,
   onRecordsChange,
   onCancel,
-  onSave
+  onSave,
+  hasChanges
 }) => {
+  const [error, setError] = useState();
+  const handleSave = () => {
+    setError(null);
+    const validation = validateEnsRecords(records);
+    if (validation.validationFailed) {
+      setError(validation.errors?.length > 0 ? validation.errors[0].reason : "Something went wrong");
+      return;
+    }
+    onSave();
+  };
   return /* @__PURE__ */ jsx(
     SelectRecordsForm,
     {
       records,
       onRecordsUpdated: onRecordsChange,
-      actionButtons: /* @__PURE__ */ jsx("div", { style: { padding: 15, paddingTop: 0 }, children: /* @__PURE__ */ jsxs("div", { className: "d-flex", style: { gap: "8px", width: "100%" }, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "lg",
-            style: { flex: 1 },
-            onClick: onCancel,
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { size: "lg", style: { flex: 1 }, onClick: onSave, children: "Save" })
-      ] }) })
+      actionButtons: /* @__PURE__ */ jsxs("div", { style: { padding: 15, paddingTop: 0 }, children: [
+        error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
+        /* @__PURE__ */ jsxs("div", { className: "d-flex", style: { gap: "8px", width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "lg",
+              style: { flex: 1 },
+              onClick: () => {
+                setError(null);
+                onCancel?.();
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { disabled: !hasChanges, size: "lg", style: { flex: 1 }, onClick: handleSave, children: "Save" })
+        ] })
+      ] })
     }
   );
 };
@@ -25222,8 +25352,7 @@ const TransactionPendingScreen = ({
 const CommitmentStep = ({
   state,
   isTestnet,
-  onStateUpdated,
-  referrer
+  onStateUpdated
 }) => {
   const { sendCommitmentTx } = useRegisterENS({ isTestnet });
   const { waitTx } = useWaitTransaction({ isTestnet });
@@ -25250,17 +25379,17 @@ const CommitmentStep = ({
   const handleCommitment = async () => {
     setError(null);
     let tx = null;
-    console.log("MAking commitment with records", state.records);
     try {
       setBtnState({ ...btnState, waitingWallet: true });
-      tx = await sendCommitmentTx({
+      const request = {
         label: state.label,
         owner: address,
         expiryInYears: state.expiryInYears,
         secret: state.secret,
         records: state.records,
-        referrer
-      });
+        referrer: state.referrer
+      };
+      tx = await sendCommitmentTx(request);
       setCommitTxStatus({ sent: true, completed: false, hash: tx });
       onStateUpdated({
         ...state,
@@ -25425,15 +25554,19 @@ const TimerStep = ({
     }
     const int = setInterval(() => {
       setSecondsToWait((prev) => {
-        if (prev <= 0) {
-          onTimerCompleted?.();
+        if (prev <= 1) {
           return 0;
         }
         return prev - 1;
       });
     }, 1e3);
     return () => clearInterval(int);
-  }, [onTimerCompleted, shouldStartTimer]);
+  }, [shouldStartTimer]);
+  useEffect(() => {
+    if (secondsToWait === 0 && shouldStartTimer) {
+      onTimerCompleted?.();
+    }
+  }, [secondsToWait, shouldStartTimer, onTimerCompleted]);
   const progress = Math.ceil(
     (INITIAL_SECONDS - secondsToWait) / INITIAL_SECONDS * 100
   );
@@ -25475,20 +25608,26 @@ const RegistrationStep = ({
     completed: false,
     hash: ""
   });
-  const { sendRegisterTx, getRegistrationPrice } = useRegisterENS({ isTestnet });
+  const { sendRegisterTx, getRegistrationPrice } = useRegisterENS({
+    isTestnet
+  });
   const handleRegistration = async () => {
     setError(null);
     let tx = null;
+    let registrationPrice = 0;
     try {
       setBtnState({ ...btnState, waitingWallet: true });
-      console.log("Sending tx with records", state.records);
-      tx = await sendRegisterTx({
+      const request = {
         label: state.label,
         owner: address,
         expiryInYears: state.expiryInYears,
         secret: state.secret,
-        records: state.records
-      });
+        records: state.records,
+        referrer: state.referrer
+      };
+      const regData = await sendRegisterTx(request);
+      tx = regData.txHash;
+      registrationPrice = formatFloat(regData.price.eth, 5);
       setCommitTxStatus({ sent: true, completed: false, hash: tx });
       onStateUpdated({
         ...state,
@@ -25515,15 +25654,11 @@ const RegistrationStep = ({
     try {
       const receipt = await waitTx({ hash: tx });
       setCommitTxStatus({ sent: true, completed: true, hash: tx });
-      const registrationPrice = await getRegistrationPrice(
-        state.label,
-        state.expiryInYears
-      );
       const gasUsed = receipt.gasUsed;
       const gasPrice = receipt.effectiveGasPrice || BigInt(0);
       const transactionFees = gasUsed * gasPrice;
       const transactionFeesEth = formatEther(transactionFees);
-      const totalCost = (registrationPrice.eth + parseFloat(transactionFeesEth)).toString();
+      const totalCost = (registrationPrice + parseFloat(transactionFeesEth)).toString();
       const expiryDate = /* @__PURE__ */ new Date();
       expiryDate.setFullYear(expiryDate.getFullYear() + state.expiryInYears);
       const formattedExpiryDate = expiryDate.toLocaleDateString("en-US", {
@@ -25531,11 +25666,6 @@ const RegistrationStep = ({
         month: "long",
         day: "numeric"
       });
-      console.log("=== Registration Completed ===");
-      console.log("1. Expiration Years:", state.expiryInYears);
-      console.log("2. Transaction Value:", registrationPrice.eth, "ETH");
-      console.log("3. Transaction Fees:", transactionFeesEth, "ETH");
-      console.log("==============================");
       setTimeout(() => {
         onStateUpdated({
           ...state,
@@ -25545,10 +25675,13 @@ const RegistrationStep = ({
         setCommitTxStatus({ sent: false, completed: false, hash: "" });
         onSuccess?.({
           expiryInYears: state.expiryInYears,
-          registrationCost: registrationPrice.eth.toString(),
+          registrationCost: registrationPrice.toString(),
           transactionFees: transactionFeesEth,
           total: totalCost,
-          expiryDate: formattedExpiryDate
+          expiryDate: formattedExpiryDate,
+          thHash: tx,
+          name: `${state.label}.eth`,
+          records: state.records
         });
       }, 1e3);
     } catch (err) {
@@ -26272,7 +26405,7 @@ const SuccessScreen = ({
   total,
   expiryDate,
   isTestnet = false,
-  onClose,
+  onGreat,
   onRegisterAnother,
   onViewName
 }) => {
@@ -26323,8 +26456,8 @@ const SuccessScreen = ({
         /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-card", style: { position: "relative", zIndex: 1 }, children: [
           /* @__PURE__ */ jsx("div", { className: "ens-registration-success-illustration", children: /* @__PURE__ */ jsx("img", { src: img, alt: "Success Illustration" }) }),
           /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-title-section", children: [
-            /* @__PURE__ */ jsx(Text$1, { size: "lg", weight: "bold", className: "ens-registration-success-message", children: "Hooray! You've registered" }),
-            /* @__PURE__ */ jsxs(Text$1, { size: "lg", weight: "bold", className: "ens-registration-success-name", children: [
+            /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", className: "mb-2", children: "Hooray! You've registered" }),
+            /* @__PURE__ */ jsxs(Text$1, { size: "lg", weight: "bold", children: [
               ensName,
               ".eth"
             ] })
@@ -26364,7 +26497,6 @@ const SuccessScreen = ({
               Button,
               {
                 variant: "outline",
-                size: "lg",
                 onClick: onRegisterAnother,
                 className: "ens-registration-success-register-another-btn",
                 children: "Register another"
@@ -26373,8 +26505,7 @@ const SuccessScreen = ({
             /* @__PURE__ */ jsx(
               Button,
               {
-                variant: "solid",
-                size: "lg",
+                variant: "outline",
                 onClick: () => {
                   if (onViewName) {
                     onViewName();
@@ -26386,20 +26517,41 @@ const SuccessScreen = ({
                 children: "View Name"
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => onGreat?.(), size: "lg", className: "ns-wd-100 mt-2", children: "Great!" })
         ] })
       ]
     }
   );
 };
 
+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 RegistrationProcess = ({
   label,
   expiryInYears,
   isTestnet = false,
   records,
   onBack,
-  onSuccess
+  onSuccess,
+  referrer
 }) => {
   const { chain } = useAccount();
   const { switchChain } = useSwitchChain();
@@ -26407,18 +26559,15 @@ const RegistrationProcess = ({
   const isOnCorrectNetwork = chain?.id === expectedChainId;
   const shouldSwitchNetwork = chain && !isOnCorrectNetwork;
   const [registrationState, setRegistrationState] = useState(
-    {
-      step: ProcessSteps.Start,
+    getBlankRegistrationState(
       label,
-      commitment: { completed: false, time: 0 },
-      registration: { completed: false },
-      timerStartedAt: 0,
       expiryInYears,
-      secret: "0x0",
       records,
-      isTestnet
-    }
+      isTestnet,
+      referrer
+    )
   );
+  const [showConfirmClose, setShowConfirmClose] = useState(false);
   useEffect(() => {
     setRegistrationState({ ...registrationState, records });
   }, [records]);
@@ -26428,18 +26577,33 @@ const RegistrationProcess = ({
     }
   };
   const handleTimerPassed = () => {
-    setRegistrationState({
+    const newState = {
       ...registrationState,
       step: ProcessSteps.TimerCompleted
-    });
+    };
+    setRegistrationState(newState);
   };
   const networkName = isTestnet ? "Sepolia" : "Mainnet";
+  const handleCloseClick = () => {
+    if (registrationState.step > ProcessSteps.Start && registrationState.step < ProcessSteps.RegistrationCompleted) {
+      setShowConfirmClose(true);
+    } else {
+      onBack?.();
+    }
+  };
+  const handleConfirmClose = () => {
+    setShowConfirmClose(false);
+    onBack?.(true);
+  };
+  const handleCancelClose = () => {
+    setShowConfirmClose(false);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "ens-registration-progress", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         className: "ens-registration-close-btn",
-        onClick: () => onBack?.(),
+        onClick: handleCloseClick,
         type: "button",
         "aria-label": "Close",
         children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
@@ -26474,14 +26638,18 @@ const RegistrationProcess = ({
         {
           state: registrationState,
           isTestnet,
-          onStateUpdated: (state) => setRegistrationState(state)
+          onStateUpdated: (state) => {
+            setRegistrationState(state);
+          }
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
         TimerStep,
         {
           state: registrationState,
-          onTimerCompleted: handleTimerPassed
+          onTimerCompleted: () => {
+            handleTimerPassed();
+          }
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
@@ -26489,20 +26657,69 @@ const RegistrationProcess = ({
         {
           state: registrationState,
           isTestnet,
-          onStateUpdated: (state) => setRegistrationState(state),
+          onStateUpdated: (state) => {
+            setRegistrationState(state);
+          },
           onSuccess
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: showConfirmClose,
+        onClose: handleCancelClose,
+        title: "Leave Registration?",
+        size: "sm",
+        footer: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: handleCancelClose,
+              style: { flex: 1 },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              onClick: handleConfirmClose,
+              style: { flex: 1 },
+              children: "Leave"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx(Text$1, { size: "sm", children: "If you leave now, you will lose all your registration progress. Are you sure you want to continue?" })
+      }
+    )
   ] });
 };
 
+const getLabel = (name) => {
+  if (!name) {
+    return "";
+  }
+  if (name.split(".").length !== 1) {
+    return name.split(".")[0];
+  }
+  return name;
+};
 const EnsNameRegistrationForm = (props) => {
-  const [label, setLabel] = useState(props.name || "");
+  const [label, setLabel] = useState(getLabel(props.name));
   const [step, setStep] = useState(
     0 /* Summary */
   );
   const [years, setYears] = useState(1);
+  const [regTxFees, setRegTxFees] = useState({
+    estimatedGas: 0,
+    isChecking: false,
+    price: {
+      wei: 0n,
+      eth: 1e-4
+    }
+  });
   const [price, setPrice] = useState({
     isChecking: false,
     wei: 0n,
@@ -26522,6 +26739,9 @@ const EnsNameRegistrationForm = (props) => {
     addresses: [],
     texts: []
   });
+  const hasRecordsDifference = useMemo(() => {
+    return getEnsRecordsDiff(ensRecords, ensRecordTemplate).isDifferent;
+  }, [ensRecords, ensRecordTemplate]);
   const [successData, setSuccessData] = useState(null);
   const handleSaveRecords = () => {
     setEnsRecords(deepCopy(ensRecordTemplate));
@@ -26533,77 +26753,87 @@ const EnsNameRegistrationForm = (props) => {
   };
   const clearInputState = () => {
     setLabel("");
-    setYears(0);
+    setYears(1);
     setEnsRecords({ addresses: [], texts: [] });
     setEnsRecordsTemplate({ addresses: [], texts: [] });
     setNameValidation({ isChecking: false, isTaken: false });
     setPrice({ isChecking: false, wei: 0n, eth: 0 });
   };
-  return /* @__PURE__ */ jsxs("div", { className: `ens-registration-form-container ${props.className || ""} ${props.noBorder ? "no-boder" : ""}`, children: [
-    step === 0 /* Summary */ && /* @__PURE__ */ jsxs(Fragment, { children: [
-      showProfile && /* @__PURE__ */ jsx(
-        SetNameRecords,
-        {
-          records: ensRecordTemplate,
-          onRecordsChange: setEnsRecordsTemplate,
-          onCancel: handleCancelRecords,
-          onSave: handleSaveRecords
-        }
-      ),
-      !showProfile && /* @__PURE__ */ jsx(
-        RegistrationSummary,
-        {
-          label,
-          years,
-          price,
-          nameValidation,
-          isTestnet: props.isTestnet || false,
-          onLabelChange: setLabel,
-          onYearsChange: setYears,
-          onPriceChange: setPrice,
-          onNameValidationChange: setNameValidation,
-          onSetProfile: () => setShowProfile(true),
-          onStart: () => setStep(1 /* Progress */)
-        }
-      )
-    ] }),
-    step === 1 /* Progress */ && /* @__PURE__ */ jsx(
-      RegistrationProcess,
-      {
-        isTestnet: props.isTestnet || false,
-        label,
-        expiryInYears: years,
-        records: ensRecords,
-        onBack: (clearState) => {
-          if (clearState) {
-            clearInputState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `ens-registration-form-container ${props.className || ""} ${props.noBorder ? "no-boder" : ""}`,
+      children: [
+        step === 0 /* Summary */ && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showProfile && /* @__PURE__ */ jsx(
+            SetNameRecords,
+            {
+              records: ensRecordTemplate,
+              onRecordsChange: setEnsRecordsTemplate,
+              onCancel: handleCancelRecords,
+              onSave: handleSaveRecords,
+              hasChanges: hasRecordsDifference
+            }
+          ),
+          !showProfile && /* @__PURE__ */ jsx(
+            RegistrationSummary,
+            {
+              label,
+              years,
+              price,
+              nameValidation,
+              isTestnet: props.isTestnet || false,
+              transactionFees: regTxFees,
+              onLabelChange: setLabel,
+              onYearsChange: setYears,
+              onPriceChange: setPrice,
+              onNameValidationChange: setNameValidation,
+              onSetProfile: () => setShowProfile(true),
+              onStart: () => setStep(1 /* Progress */)
+            }
+          )
+        ] }),
+        step === 1 /* Progress */ && /* @__PURE__ */ jsx(
+          RegistrationProcess,
+          {
+            isTestnet: props.isTestnet || false,
+            label,
+            expiryInYears: years,
+            records: ensRecords,
+            onBack: (clearState) => {
+              if (clearState) {
+                clearInputState();
+              }
+              setStep(0 /* Summary */);
+            },
+            onSuccess: (data) => {
+              setSuccessData(data);
+              props.onRegistrationSuccess?.(data);
+              setStep(2 /* Success */);
+            }
           }
-          setStep(0 /* Summary */);
-        },
-        onSuccess: (data) => {
-          setSuccessData(data);
-          setStep(2 /* Success */);
-        }
-      }
-    ),
-    step === 2 /* Success */ && successData && /* @__PURE__ */ jsx(
-      SuccessScreen,
-      {
-        ensName: label,
-        expiryInYears: successData.expiryInYears,
-        registrationCost: successData.registrationCost,
-        transactionFees: successData.transactionFees,
-        total: successData.total,
-        expiryDate: successData.expiryDate,
-        isTestnet: props.isTestnet || false,
-        onRegisterAnother: () => {
-          clearInputState();
-          setSuccessData(null);
-          setStep(0 /* Summary */);
-        }
-      }
-    )
-  ] });
+        ),
+        step === 2 /* Success */ && successData && /* @__PURE__ */ jsx(
+          SuccessScreen,
+          {
+            ensName: label,
+            expiryInYears: successData.expiryInYears,
+            registrationCost: successData.registrationCost,
+            transactionFees: successData.transactionFees,
+            total: successData.total,
+            expiryDate: successData.expiryDate,
+            isTestnet: props.isTestnet || false,
+            onGreat: () => props.onClose?.(true),
+            onRegisterAnother: () => {
+              clearInputState();
+              setSuccessData(null);
+              setStep(0 /* Summary */);
+            }
+          }
+        )
+      ]
+    }
+  );
 };
 
 const ThemeContext = createContext(void 0);
@@ -34360,5 +34590,5 @@ var walletConnectWalletYHWKVTDY = /*#__PURE__*/Object.freeze({
   default: walletConnectWallet_default
 });
 
-export { Accordion, Alert, Button, Card, ChainIcon, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, ENS_RESOLVER_ABI, EnsNameRegistrationForm, Icon, Input, MULTICALL, Modal, PendingTransaction, ProfileHeader, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, ShurikenSpinner, Text$1 as Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionState, WalletConnectProvider, capitalize, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce$1 as debounce, deepCopy, ensureFloatInput, equalsIgnoreCase, formatFloat, getEnsRecordsDiff, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isUserDeniedError, supportedAddresses, supportedContenthashRecords, supportedTexts, useRegisterENS, useTheme, useWaitTransaction };
+export { Accordion, Alert, Button, Card, ChainIcon, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, ENS_RESOLVER_ABI, EnsNameRegistrationForm, Icon, Input, MULTICALL, Modal, PendingTransaction, ProfileHeader, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, ShurikenSpinner, Text$1 as Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionState, WalletConnectProvider, capitalize, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce$1 as debounce, deepCopy, ensureFloatInput, equalsIgnoreCase, formatFloat, getEnsRecordsDiff, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isUserDeniedError, supportedAddresses, supportedContenthashRecords, supportedTexts, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords };
 //# sourceMappingURL=index.js.map