@cmdoss/walrus-site-builder-react 2.2.0 → 2.4.0

package/dist/index.js

@@ -921,11 +921,38 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 	const [isSwapping, setIsSwapping] = useState(false);
 	const [estimatedPrice, setEstimatedPrice] = useState(null);
 	const [error, setError] = useState(null);
+	const [selectedYears, setSelectedYears] = useState(1);
+	const [pricePerYear, setPricePerYear] = useState(null);
+	const [pricePerYearFormatted, setPricePerYearFormatted] = useState(null);
+	const [pricePerYearUsdc, setPricePerYearUsdc] = useState(null);
+	const [totalPriceUsdc, setTotalPriceUsdc] = useState(null);
+	const priceRefreshIntervalRef = useRef(null);
 	const normalizedName = searchName.toLowerCase().trim();
 	const fullName = normalizedName ? `${normalizedName}.sui` : "";
 	const network = suiClient.network;
 	const isMainnet = network === "mainnet";
 	const isTestnet = network === "testnet";
+	const expirationDate = useMemo(() => {
+		if (!selectedYears) return null;
+		const date = /* @__PURE__ */ new Date();
+		date.setFullYear(date.getFullYear() + selectedYears);
+		return date;
+	}, [selectedYears]);
+	const totalPrice = useMemo(() => {
+		if (!pricePerYear || !selectedYears) return null;
+		return pricePerYear * selectedYears;
+	}, [pricePerYear, selectedYears]);
+	const totalPriceFormatted = useMemo(() => {
+		if (!totalPrice || !pricePerYearFormatted) return null;
+		const perYearValue = parseFloat(pricePerYearFormatted.replace(/[^\d.]/g, ""));
+		if (Number.isNaN(perYearValue)) return null;
+		const totalValue = perYearValue * selectedYears;
+		return pricePerYearFormatted.replace(/[\d.]+/, totalValue.toFixed(4));
+	}, [
+		totalPrice,
+		pricePerYearFormatted,
+		selectedYears
+	]);
 	const WAL_COIN_TYPE = mainPackage[network]?.walrusCoinType;
 	const aggregatorClient = useMemo(() => {
 		if (!suiClient || !currentAccount || !isMainnet) return null;
@@ -939,6 +966,131 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 		currentAccount,
 		isMainnet
 	]);
+	const updatePriceEstimate = useCallback(async () => {
+		if (!suinsClient || !currentAccount || !isMainnet || !WAL_COIN_TYPE || !aggregatorClient || !normalizedName) return;
+		const priceList = await suinsClient.getPriceList();
+		const nameLength = normalizedName.length;
+		let pricePerYearValue = 0;
+		for (const [[from, to], price] of priceList.entries()) if (nameLength >= from && nameLength <= to) {
+			pricePerYearValue = price;
+			break;
+		}
+		if (pricePerYearValue > 0) {
+			setPricePerYear(pricePerYearValue);
+			const totalPriceValue = pricePerYearValue * selectedYears;
+			const requiredAmount = BigInt(Math.floor(totalPriceValue * 1.05));
+			const usdcBalance = (await suiClient.getCoins({
+				owner: currentAccount.address,
+				coinType: suinsClient.config.coins.USDC.type
+			})).data?.reduce((sum, coin) => sum + BigInt(coin.balance), 0n) ?? 0n;
+			const missingUsdc = usdcBalance < requiredAmount ? requiredAmount - usdcBalance : requiredAmount;
+			const baseWalAtomic = 1000000000n;
+			const rateRouter = await aggregatorClient.findRouters({
+				from: WAL_COIN_TYPE,
+				target: suinsClient.config.coins.USDC.type,
+				amount: new BN(baseWalAtomic.toString()),
+				byAmountIn: true,
+				providers: ["CETUS"]
+			});
+			if (rateRouter && !rateRouter.error && rateRouter.amountOut) {
+				const rawAmountOut = rateRouter.amountOut;
+				const usdcOutForOneWal = BigInt(rawAmountOut instanceof BN ? rawAmountOut.toString() : new BN(String(rawAmountOut)).toString());
+				if (usdcOutForOneWal > 0n) {
+					const exchangeRate = Number(baseWalAtomic) / Number(usdcOutForOneWal);
+					const estimatedWalNeeded = missingUsdc * BigInt(Math.ceil(exchangeRate));
+					const walNeededFormatted = (Number(estimatedWalNeeded) / 1e9).toFixed(4);
+					setPricePerYearFormatted(`${(Number(estimatedWalNeeded) / selectedYears / 1e9).toFixed(4)} WAL`);
+					setEstimatedPrice(`~${walNeededFormatted} WAL`);
+				} else {
+					const usdcPrice = (Number(requiredAmount) / 1e6).toFixed(2);
+					setPricePerYearFormatted(`${(pricePerYearValue / 1e6).toFixed(2)} USDC`);
+					setEstimatedPrice(`~${usdcPrice} USDC`);
+				}
+			} else {
+				const usdcPrice = (Number(requiredAmount) / 1e6).toFixed(2);
+				setPricePerYearFormatted(`${(pricePerYearValue / 1e6).toFixed(2)} USDC`);
+				setEstimatedPrice(`~${usdcPrice} USDC`);
+			}
+		}
+	}, [
+		suinsClient,
+		currentAccount,
+		isMainnet,
+		WAL_COIN_TYPE,
+		aggregatorClient,
+		normalizedName,
+		selectedYears,
+		suiClient
+	]);
+	const updateTestnetPriceEstimate = useCallback(async () => {
+		if (!suinsClient || !currentAccount || !isTestnet || !normalizedName) return;
+		const priceList = await suinsClient.getPriceList();
+		const nameLength = normalizedName.length;
+		let pricePerYearValue = 0;
+		for (const [[from, to], price] of priceList.entries()) if (nameLength >= from && nameLength <= to) {
+			pricePerYearValue = price;
+			break;
+		}
+		if (pricePerYearValue > 0) {
+			setPricePerYear(pricePerYearValue);
+			const totalPriceValue = pricePerYearValue * selectedYears;
+			const usdcAmountAtomic = BigInt(Math.floor(totalPriceValue));
+			const suiNeededAtomic = usdcAmountAtomic * 2n * 1000000000n / (3n * 1000000n);
+			const suiPerYearAtomic = BigInt(Math.floor(pricePerYearValue)) * 2n * 1000000000n / (3n * 1000000n);
+			const suiNeededFormatted = (Number(suiNeededAtomic) / 1e9).toFixed(4);
+			const suiPerYearFormatted = (Number(suiPerYearAtomic) / 1e9).toFixed(4);
+			const usdcPrice = (Number(usdcAmountAtomic) / 1e6).toFixed(2);
+			const usdcPerYear = (pricePerYearValue / 1e6).toFixed(2);
+			setPricePerYearFormatted(`${suiPerYearFormatted} SUI`);
+			setEstimatedPrice(`${suiNeededFormatted} SUI`);
+			setPricePerYearUsdc(`${usdcPerYear} USDC`);
+			setTotalPriceUsdc(`${usdcPrice} USDC`);
+		}
+	}, [
+		suinsClient,
+		currentAccount,
+		isTestnet,
+		normalizedName,
+		selectedYears
+	]);
+	useEffect(() => {
+		if (isMainnet && isAvailable && normalizedName && !isRegistering && aggregatorClient) {
+			if (priceRefreshIntervalRef.current) clearInterval(priceRefreshIntervalRef.current);
+			priceRefreshIntervalRef.current = setInterval(() => {
+				updatePriceEstimate().catch((err) => {
+					console.error("Error refreshing price:", err);
+				});
+			}, 1e4);
+			return () => {
+				if (priceRefreshIntervalRef.current) clearInterval(priceRefreshIntervalRef.current);
+			};
+		}
+	}, [
+		isMainnet,
+		isAvailable,
+		normalizedName,
+		isRegistering,
+		aggregatorClient,
+		updatePriceEstimate
+	]);
+	useEffect(() => {
+		if (isAvailable && pricePerYear !== null) {
+			if (isMainnet && aggregatorClient) updatePriceEstimate().catch((err) => {
+				console.error("Error updating price:", err);
+			});
+			else if (isTestnet) updateTestnetPriceEstimate().catch((err) => {
+				console.error("Error updating price:", err);
+			});
+		}
+	}, [
+		isAvailable,
+		pricePerYear,
+		isMainnet,
+		isTestnet,
+		aggregatorClient,
+		updatePriceEstimate,
+		updateTestnetPriceEstimate
+	]);
 	return {
 		searchName,
 		setSearchName,
@@ -950,6 +1102,15 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 		error,
 		normalizedName,
 		fullName,
+		selectedYears,
+		setSelectedYears,
+		pricePerYear,
+		pricePerYearFormatted,
+		pricePerYearUsdc,
+		totalPrice,
+		totalPriceFormatted,
+		totalPriceUsdc,
+		expirationDate,
 		handleSearch: useCallback(async () => {
 			if (!normalizedName || !suinsClient) return;
 			if (normalizedName.length < 3) {
@@ -965,40 +1126,9 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 			try {
 				const available = !(await suinsClient.getNameRecord(fullName))?.nftId;
 				setIsAvailable(available);
-				if (available && currentAccount && isMainnet && WAL_COIN_TYPE && aggregatorClient) try {
-					const priceList = await suinsClient.getPriceList();
-					const nameLength = normalizedName.length;
-					let pricePerYear = 0;
-					for (const [[from, to], price] of priceList.entries()) if (nameLength >= from && nameLength <= to) {
-						pricePerYear = price;
-						break;
-					}
-					if (pricePerYear > 0) {
-						const totalPrice = pricePerYear * 1;
-						const requiredAmount = BigInt(Math.floor(totalPrice * 1.05));
-						const usdcBalance = (await suiClient.getCoins({
-							owner: currentAccount.address,
-							coinType: suinsClient.config.coins.USDC.type
-						})).data?.reduce((sum, coin) => sum + BigInt(coin.balance), 0n) ?? 0n;
-						const missingUsdc = usdcBalance < requiredAmount ? requiredAmount - usdcBalance : requiredAmount;
-						const baseWalAtomic = 1000000000n;
-						const rateRouter = await aggregatorClient.findRouters({
-							from: WAL_COIN_TYPE,
-							target: suinsClient.config.coins.USDC.type,
-							amount: new BN(baseWalAtomic.toString()),
-							byAmountIn: true,
-							providers: ["CETUS"]
-						});
-						if (rateRouter && !rateRouter.error && rateRouter.amountOut) {
-							const rawAmountOut = rateRouter.amountOut;
-							const usdcOutForOneWal = BigInt(rawAmountOut instanceof BN ? rawAmountOut.toString() : new BN(String(rawAmountOut)).toString());
-							if (usdcOutForOneWal > 0n) {
-								const exchangeRate = Number(baseWalAtomic) / Number(usdcOutForOneWal);
-								const estimatedWalNeeded = missingUsdc * BigInt(Math.ceil(exchangeRate));
-								setEstimatedPrice(`~${(Number(estimatedWalNeeded) / 1e9).toFixed(4)} WAL`);
-							} else setEstimatedPrice(`~${(Number(requiredAmount) / 1e6).toFixed(2)} USDC`);
-						} else setEstimatedPrice(`~${(Number(requiredAmount) / 1e6).toFixed(2)} USDC`);
-					}
+				if (available && currentAccount && aggregatorClient) try {
+					if (isMainnet && WAL_COIN_TYPE) await updatePriceEstimate();
+					else if (isTestnet) await updateTestnetPriceEstimate();
 				} catch (priceError) {
 					console.error("Error estimating price:", priceError);
 				}
@@ -1014,9 +1144,11 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 			suinsClient,
 			currentAccount,
 			isMainnet,
+			isTestnet,
 			WAL_COIN_TYPE,
 			aggregatorClient,
-			suiClient
+			updatePriceEstimate,
+			updateTestnetPriceEstimate
 		]),
 		handleRegister: useCallback(async () => {
 			if (!suinsClient || !currentAccount || !isAvailable || !normalizedName) return;
@@ -1029,14 +1161,14 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 			try {
 				const priceList = await suinsClient.getPriceList();
 				const nameLength = normalizedName.length;
-				let pricePerYear = 0;
+				let pricePerYear$1 = 0;
 				for (const [[from, to], price] of priceList.entries()) if (nameLength >= from && nameLength <= to) {
-					pricePerYear = price;
+					pricePerYear$1 = price;
 					break;
 				}
-				if (pricePerYear === 0) throw new Error("Unable to determine price for this domain");
-				const years = 1;
-				const totalPrice = pricePerYear * years;
+				if (pricePerYear$1 === 0) throw new Error("Unable to determine price for this domain");
+				const years = selectedYears;
+				const totalPrice$1 = pricePerYear$1 * years;
 				const coinType = isTestnet ? "SUI" : "USDC";
 				const coinConfig = suinsClient.config.coins[coinType];
 				const [usdcCoins, walCoins] = await Promise.all([isMainnet ? suiClient.getCoins({
@@ -1048,7 +1180,7 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 				}) : Promise.resolve({ data: [] })]);
 				const usdcBalance = usdcCoins.data?.reduce((sum, coin) => sum + BigInt(coin.balance), 0n) ?? 0n;
 				const walBalance = walCoins.data?.reduce((sum, coin) => sum + BigInt(coin.balance), 0n) ?? 0n;
-				const requiredAmount = BigInt(Math.floor(totalPrice * 1.05));
+				const requiredAmount = BigInt(Math.floor(totalPrice$1 * 1.05));
 				if (isMainnet && coinType === "USDC") {
 					if (usdcBalance < requiredAmount) {
 						if (!aggregatorClient || !WAL_COIN_TYPE) throw new Error("Swap client not ready. Please try again in a few seconds.");
@@ -1115,7 +1247,7 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 					coinType: coinConfig.type
 				});
 				if (coins.data.length === 0) throw new Error(`No ${coinType} coins found in your wallet`);
-				const maxPaymentAmount = Math.floor(totalPrice * 1.05);
+				const maxPaymentAmount = Math.floor(totalPrice$1 * 1.05);
 				const totalBalance = coins.data.reduce((sum, coin) => sum + BigInt(coin.balance), 0n);
 				const requiredBalance = BigInt(maxPaymentAmount) + 10000000n;
 				if (totalBalance < requiredBalance) throw new Error(`Insufficient balance. Need approximately ${(Number(requiredBalance) / 1e9).toFixed(4)} ${coinType}`);
@@ -1174,6 +1306,7 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 			isAvailable,
 			normalizedName,
 			fullName,
+			selectedYears,
 			txExecutor,
 			isTestnet,
 			isMainnet,
@@ -1191,6 +1324,15 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 			setIsSearching(false);
 			setIsRegistering(false);
 			setIsSwapping(false);
+			setSelectedYears(1);
+			setPricePerYear(null);
+			setPricePerYearFormatted(null);
+			setPricePerYearUsdc(null);
+			setTotalPriceUsdc(null);
+			if (priceRefreshIntervalRef.current) {
+				clearInterval(priceRefreshIntervalRef.current);
+				priceRefreshIntervalRef.current = null;
+			}
 		}, [])
 	};
 }
@@ -4331,7 +4473,7 @@ var title = "SuiNsModal_title__lh8k8k3";
 //#endregion
 //#region src/components/suins-modal/RegisterSuiNsDialog.tsx
 const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, clients: { suiClient, queryClient, suinsClient }, signAndExecuteTransaction, sponsorConfig }) => {
-	const { searchName, setSearchName, isSearching, isAvailable, isRegistering, isSwapping, estimatedPrice, error, normalizedName, fullName, handleSearch, handleRegister: handleRegisterInternal, reset } = useSuiNsRegistration({
+	const { searchName, setSearchName, isSearching, isAvailable, isRegistering, isSwapping, estimatedPrice, error, normalizedName, fullName, selectedYears, setSelectedYears, pricePerYearFormatted, pricePerYearUsdc, totalPriceFormatted, totalPriceUsdc, expirationDate, handleSearch, handleRegister: handleRegisterInternal, reset } = useSuiNsRegistration({
 		currentAccount,
 		clients: {
 			suiClient,
@@ -4341,6 +4483,7 @@ const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, cl
 		signAndExecuteTransaction,
 		sponsorConfig
 	});
+	const isTestnet = suiClient.network === "testnet";
 	const handleRegister = async () => {
 		if (await handleRegisterInternal()) {
 			if (onRegistered) onRegistered();
@@ -4519,25 +4662,230 @@ const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, cl
 								width: "1.25rem",
 								height: "1.25rem",
 								flexShrink: 0
-							} }), /* @__PURE__ */ jsxs("div", {
+							} }), /* @__PURE__ */ jsx("div", {
 								style: {
 									flex: 1,
 									minWidth: 0
 								},
-								children: [/* @__PURE__ */ jsx("p", {
+								children: /* @__PURE__ */ jsx("p", {
 									style: {
 										fontSize: "0.875rem",
 										fontWeight: 600
 									},
 									children: isAvailable ? `${fullName} is available!` : `${fullName} is already taken`
-								}), isAvailable && estimatedPrice && /* @__PURE__ */ jsxs("p", {
+								})
+							})]
+						}),
+						isAvailable && /* @__PURE__ */ jsxs("div", {
+							style: { marginBottom: "1rem" },
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: "year-select",
+								style: {
+									display: "block",
+									fontSize: "0.875rem",
+									fontWeight: 500,
+									marginBottom: "0.5rem"
+								},
+								children: "Registration Period"
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									display: "flex",
+									gap: "0.5rem",
+									flexWrap: "wrap"
+								},
+								children: [
+									1,
+									2,
+									3,
+									4,
+									5
+								].map((year) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => setSelectedYears(year),
+									disabled: isRegistering || isSwapping,
 									style: {
-										fontSize: "0.75rem",
-										opacity: .8,
-										marginTop: "0.125rem"
+										padding: "0.5rem 1rem",
+										borderRadius: "0.375rem",
+										border: `1px solid ${selectedYears === year ? "rgba(59, 130, 246, 0.5)" : "rgba(229, 231, 235, 1)"}`,
+										backgroundColor: selectedYears === year ? "rgba(59, 130, 246, 0.1)" : "transparent",
+										color: selectedYears === year ? "rgb(37, 99, 235)" : "inherit",
+										fontWeight: selectedYears === year ? 600 : 400,
+										cursor: isRegistering || isSwapping ? "not-allowed" : "pointer",
+										fontSize: "0.875rem",
+										transition: "all 0.2s",
+										opacity: isRegistering || isSwapping ? .5 : 1
 									},
-									children: ["Estimated cost: ", estimatedPrice]
-								})]
+									children: [
+										year,
+										" ",
+										year === 1 ? "Year" : "Years"
+									]
+								}, year))
+							})]
+						}),
+						isAvailable && (pricePerYearFormatted || estimatedPrice) && /* @__PURE__ */ jsxs("div", {
+							style: {
+								padding: "1rem",
+								borderRadius: "0.5rem",
+								backgroundColor: "rgba(249, 250, 251, 1)",
+								border: "1px solid rgba(229, 231, 235, 1)",
+								marginBottom: "1rem"
+							},
+							children: [/* @__PURE__ */ jsx("h3", {
+								style: {
+									fontSize: "0.875rem",
+									fontWeight: 600,
+									marginBottom: "0.75rem",
+									color: "rgb(17, 24, 39)"
+								},
+								children: "Price Breakdown"
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									flexDirection: "column",
+									gap: "0.5rem"
+								},
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "flex",
+											justifyContent: "space-between",
+											alignItems: "center"
+										},
+										children: [/* @__PURE__ */ jsx("span", {
+											style: {
+												fontSize: "0.875rem",
+												color: "rgb(107, 114, 128)"
+											},
+											children: "Price per year:"
+										}), /* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												flexDirection: "column",
+												alignItems: "flex-end",
+												gap: "0.125rem"
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: "0.875rem",
+													fontWeight: 600,
+													color: "rgb(17, 24, 39)"
+												},
+												children: pricePerYearFormatted || estimatedPrice
+											}), isTestnet && pricePerYearUsdc && /* @__PURE__ */ jsxs("span", {
+												style: {
+													fontSize: "0.75rem",
+													color: "rgb(107, 114, 128)",
+													opacity: .8
+												},
+												children: [
+													"(",
+													pricePerYearUsdc,
+													")"
+												]
+											})]
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "flex",
+											justifyContent: "space-between",
+											alignItems: "center"
+										},
+										children: [/* @__PURE__ */ jsx("span", {
+											style: {
+												fontSize: "0.875rem",
+												color: "rgb(107, 114, 128)"
+											},
+											children: "Number of years:"
+										}), /* @__PURE__ */ jsx("span", {
+											style: {
+												fontSize: "0.875rem",
+												fontWeight: 600,
+												color: "rgb(17, 24, 39)"
+											},
+											children: selectedYears
+										})]
+									}),
+									/* @__PURE__ */ jsx("div", { style: {
+										height: "1px",
+										backgroundColor: "rgba(229, 231, 235, 1)",
+										margin: "0.5rem 0"
+									} }),
+									/* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "flex",
+											justifyContent: "space-between",
+											alignItems: "center"
+										},
+										children: [/* @__PURE__ */ jsx("span", {
+											style: {
+												fontSize: "0.875rem",
+												fontWeight: 600,
+												color: "rgb(17, 24, 39)"
+											},
+											children: "Total:"
+										}), /* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												flexDirection: "column",
+												alignItems: "flex-end",
+												gap: "0.125rem"
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: "1rem",
+													fontWeight: 700,
+													color: "rgb(17, 24, 39)"
+												},
+												children: totalPriceFormatted || estimatedPrice
+											}), isTestnet && totalPriceUsdc && /* @__PURE__ */ jsxs("span", {
+												style: {
+													fontSize: "0.75rem",
+													color: "rgb(107, 114, 128)",
+													opacity: .8
+												},
+												children: [
+													"(",
+													totalPriceUsdc,
+													")"
+												]
+											})]
+										})]
+									}),
+									expirationDate && /* @__PURE__ */ jsx("div", {
+										style: {
+											marginTop: "0.5rem",
+											paddingTop: "0.5rem",
+											borderTop: "1px solid rgba(229, 231, 235, 1)"
+										},
+										children: /* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												justifyContent: "space-between",
+												alignItems: "center"
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: "0.75rem",
+													color: "rgb(107, 114, 128)"
+												},
+												children: "Expires on:"
+											}), /* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: "0.75rem",
+													fontWeight: 500,
+													color: "rgb(17, 24, 39)"
+												},
+												children: expirationDate.toLocaleDateString("en-US", {
+													year: "numeric",
+													month: "long",
+													day: "numeric"
+												})
+											})]
+										})
+									})
+								]
 							})]
 						}),
 						error && /* @__PURE__ */ jsx("div", {
@@ -4567,7 +4915,7 @@ const RegisterSuiNsDialog = ({ isOpen, onClose, onRegistered, currentAccount, cl
 								height: "1rem",
 								animation: "spin 1s linear infinite",
 								marginRight: "0.5rem"
-							} }), "Registering..."] }) : `Register ${fullName}`
+							} }), "Registering..."] }) : `Register ${fullName} for ${selectedYears} ${selectedYears === 1 ? "year" : "years"}`
 						})
 					]
 				})