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

package/dist/index.js

@@ -4,10 +4,10 @@ import { ALLOWED_METADATA, SuinsClient, SuinsTransaction, mainPackage as mainPac
 import { MAINNET_WALRUS_PACKAGE_CONFIG, TESTNET_WALRUS_PACKAGE_CONFIG } from "@mysten/walrus";
 import { useStore } from "@nanostores/react";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useQueries, useQuery } from "@tanstack/react-query";
+import { useMutation, useQueries, useQuery } from "@tanstack/react-query";
 import { atom, computed } from "nanostores";
 import * as Dialog from "@radix-ui/react-dialog";
-import { AlertCircle, AlertTriangle, Calendar, CalendarClock, CheckCircle, CheckCircle2, Clock, ExternalLink, Globe2, Info, Link2, Loader2, Pencil, Search, Upload, X, XCircle } from "lucide-react";
+import { AlertCircle, AlertTriangle, Calendar, CalendarClock, CheckCircle, CheckCircle2, Clock, DollarSign, ExternalLink, Globe2, Info, Link2, Loader2, Pencil, Search, Upload, X, XCircle } from "lucide-react";
 import { AggregatorClient, Env } from "@cetusprotocol/aggregator-sdk";
 import BN from "bn.js";
 import { ZenFsFileManager } from "@cmdoss/file-manager";
@@ -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,10 +1324,56 @@ 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;
+			}
 		}, [])
 	};
 }
 
+//#endregion
+//#region src/hooks/useUpdateSiteMetadata.ts
+function useUpdateSiteMetadata({ siteId, clients: { suiClient, queryClient, walrusClient }, currentAccount, signAndExecuteTransaction, sponsorConfig }) {
+	const network = suiClient.network;
+	const sdk = useMemo(() => {
+		if (!currentAccount || !suiClient || !walrusClient) return null;
+		return new WalrusSiteBuilderSdk(walrusClient, suiClient, currentAccount.address, signAndExecuteTransaction, sponsorConfig);
+	}, [
+		currentAccount,
+		suiClient,
+		walrusClient,
+		signAndExecuteTransaction,
+		sponsorConfig
+	]);
+	const mutation = useMutation({
+		mutationFn: async ({ siteName, metadata }) => {
+			if (!sdk) throw new Error("SDK not initialized");
+			return await sdk.updateSiteMetadata(siteId, siteName, metadata);
+		},
+		onSuccess: (digest) => {
+			queryClient.invalidateQueries({ queryKey: queryKeys.walrusSite(siteId) });
+			if (currentAccount?.address) queryClient.invalidateQueries({ queryKey: queryKeys.walrusSites(currentAccount.address, network) });
+			console.log("✅ Site metadata updated successfully:", digest);
+		},
+		onError: (error) => {
+			console.error("❌ Failed to update site metadata:", error);
+		}
+	}, queryClient);
+	return {
+		updateSiteMetadata: mutation.mutateAsync,
+		isUpdating: mutation.isPending,
+		error: mutation.error,
+		isSuccess: mutation.isSuccess,
+		data: mutation.data
+	};
+}
+
 //#endregion
 //#region src/hooks/useZenFsWorkspace.ts
 function useZenFsWorkspace(workspaceDir = "/workspace", mountDir = "/workspace", queryClient) {
@@ -1219,6 +1398,27 @@ function useZenFsWorkspace(workspaceDir = "/workspace", mountDir = "/workspace",
 	};
 }
 
+//#endregion
+//#region src/queries/storage-cost.query.ts
+function useStorageCostQuery(fileSize, epochs, clients) {
+	const { walrusClient, queryClient } = clients;
+	return useQuery({
+		queryKey: queryKeys.storageCost(fileSize, epochs),
+		queryFn: async () => {
+			if (!walrusClient) throw new Error("Walrus client not available");
+			if (fileSize === null) throw new Error("Invalid file size");
+			const storageCost = await walrusClient.storageCost(fileSize, epochs);
+			return {
+				storageCost: storageCost.storageCost.toString(),
+				writeCost: storageCost.writeCost.toString(),
+				totalCost: storageCost.totalCost.toString()
+			};
+		},
+		enabled: !!walrusClient && fileSize !== null && fileSize > 0 && epochs > 0,
+		staleTime: 300 * 1e3
+	}, queryClient);
+}
+
 //#endregion
 //#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.18.0/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-166334d7.cjs.prod.js
 var require_createRuntimeFn_166334d7_cjs_prod = /* @__PURE__ */ __commonJSMin(((exports) => {
@@ -1906,9 +2106,20 @@ const Stepper = ({ steps, currentStep, isLoading }) => {
 var body$1 = "ExtendTimeDialog_body__1augvc0a";
 var closeButton = "ExtendTimeDialog_closeButton__1augvc09";
 var content$3 = "ExtendTimeDialog_content__1augvc02";
+var costContent = "ExtendTimeDialog_costContent__1augvc0u";
+var costDivider = "ExtendTimeDialog_costDivider__1augvc011";
+var costError = "ExtendTimeDialog_costError__1augvc0z";
+var costHeader = "ExtendTimeDialog_costHeader__1augvc0t";
+var costLabel = "ExtendTimeDialog_costLabel__1augvc0w";
+var costLoading = "ExtendTimeDialog_costLoading__1augvc0y";
+var costRow = "ExtendTimeDialog_costRow__1augvc0v";
+var costSection = "ExtendTimeDialog_costSection__1augvc0s";
+var costValue = "ExtendTimeDialog_costValue__1augvc0x";
+var costWarning = "ExtendTimeDialog_costWarning__1augvc010";
 var dateInputWrapper = "ExtendTimeDialog_dateInputWrapper__1augvc0d";
 var description$3 = "ExtendTimeDialog_description__1augvc08";
 var errorText = "ExtendTimeDialog_errorText__1augvc0h";
+var estimatedBadge = "ExtendTimeDialog_estimatedBadge__1augvc015";
 var fieldGroup = "ExtendTimeDialog_fieldGroup__1augvc0c";
 var footer$1 = "ExtendTimeDialog_footer__1augvc0r";
 var formSection = "ExtendTimeDialog_formSection__1augvc0b";
@@ -1938,6 +2149,7 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 	const [dateError, setDateError] = useState(null);
 	const [currentEpochsRemaining, setCurrentEpochsRemaining] = useState(null);
 	const [expirationDates, setExpirationDates] = useState(/* @__PURE__ */ new Map());
+	const [totalFileSize, setTotalFileSize] = useState(null);
 	const { epochDurationMs, formatDate } = useEpochDuration(walrusClient);
 	const txExecutor = useTransactionExecutor({
 		suiClient,
@@ -1954,6 +2166,7 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 		try {
 			const blobType = await walrusClient.getBlobType();
 			const datesMap = /* @__PURE__ */ new Map();
+			let totalSize = 0;
 			const stakingState = await walrusClient.stakingState();
 			const currentEpoch = Number(stakingState.epoch);
 			const epochDuration = Number(stakingState.epoch_duration);
@@ -1978,6 +2191,11 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 									const remainingEpochs = Number(storage.fields.end_epoch) - currentEpoch;
 									const expirationTime = Date.now() + remainingEpochs * epochDuration;
 									datesMap.set(blobId, new Date(expirationTime));
+									const sizeField = fields.size;
+									if (sizeField !== void 0) {
+										const size = typeof sizeField === "string" ? Number(sizeField) : Number(sizeField);
+										if (!Number.isNaN(size) && size > 0) totalSize += size;
+									}
 									break;
 								}
 							}
@@ -1988,6 +2206,7 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 				cursor = ownedObjects.nextCursor;
 			}
 			setExpirationDates(datesMap);
+			setTotalFileSize(totalSize > 0 ? totalSize : null);
 		} catch (error) {
 			console.error("Error fetching expiration dates:", error);
 		}
@@ -1998,6 +2217,40 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 		suiClient,
 		siteData
 	]);
+	const { data: storageCostData, isLoading: isStorageCostLoading, error: storageCostError } = useStorageCostQuery(totalFileSize, epochs, {
+		queryClient,
+		walrusClient
+	});
+	const estimatedFileSize = useMemo(() => {
+		if (totalFileSize !== null) return null;
+		if (!siteData?.resources) return null;
+		return siteData.resources.length * 10 * 1024;
+	}, [totalFileSize, siteData?.resources]);
+	const { data: estimatedCostData, isLoading: isEstimatedCostLoading } = useStorageCostQuery(estimatedFileSize, epochs, {
+		queryClient,
+		walrusClient
+	});
+	const formatFileSize = useCallback((bytes) => {
+		if (bytes === null || bytes === 0) return "Unknown";
+		const units = [
+			"B",
+			"KB",
+			"MB",
+			"GB"
+		];
+		let size = bytes;
+		let unitIndex = 0;
+		while (size >= 1024 && unitIndex < units.length - 1) {
+			size /= 1024;
+			unitIndex++;
+		}
+		return `${size.toFixed(2)} ${units[unitIndex]}`;
+	}, []);
+	const formatWalAmount = useCallback((amount) => {
+		if (!amount) return "—";
+		const num = BigInt(amount);
+		return (Number(num) / 1e9).toFixed(6);
+	}, []);
 	useEffect(() => {
 		if (isOpen && siteId) fetchExpirationDates();
 	}, [
@@ -2238,104 +2491,191 @@ const ExtendTimeDialog = ({ siteId, currentAccount, clients: { suiClient, queryC
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: formSection,
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: fieldGroup,
-								children: [
-									/* @__PURE__ */ jsx(Label, {
-										htmlFor: "expiration-date",
-										children: "Target Expiration Date"
-									}),
-									/* @__PURE__ */ jsx("div", {
-										className: dateInputWrapper,
-										children: /* @__PURE__ */ jsx(Input, {
-											id: "expiration-date",
-											type: "date",
-											value: selectedDate,
-											min: minDate,
-											max: maxDate,
-											onChange: handleDateChange,
-											disabled: currentEpochsRemaining === 0 || isExtending,
-											className: dateError ? inputError : ""
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: fieldGroup,
+									children: [
+										/* @__PURE__ */ jsx(Label, {
+											htmlFor: "expiration-date",
+											children: "Target Expiration Date"
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: dateInputWrapper,
+											children: /* @__PURE__ */ jsx(Input, {
+												id: "expiration-date",
+												type: "date",
+												value: selectedDate,
+												min: minDate,
+												max: maxDate,
+												onChange: handleDateChange,
+												disabled: currentEpochsRemaining === 0 || isExtending,
+												className: dateError ? inputError : ""
+											})
+										}),
+										epochDurationMs && /* @__PURE__ */ jsxs("div", {
+											className: infoText,
+											children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsxs("span", { children: [
+												"1 epoch ≈",
+												" ",
+												(epochDurationMs / (1e3 * 60 * 60 * 24)).toFixed(1),
+												" ",
+												"days • Duration rounded up. Maximum 365 epochs per extend."
+											] })]
+										}),
+										dateError && /* @__PURE__ */ jsx("p", {
+											className: errorText,
+											children: dateError
 										})
-									}),
-									epochDurationMs && /* @__PURE__ */ jsxs("div", {
-										className: infoText,
-										children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsxs("span", { children: [
-											"1 epoch ≈",
-											" ",
-											(epochDurationMs / (1e3 * 60 * 60 * 24)).toFixed(1),
-											" ",
-											"days • Duration rounded up. Maximum 365 epochs per extend."
-										] })]
-									}),
-									dateError && /* @__PURE__ */ jsx("p", {
-										className: errorText,
-										children: dateError
-									})
-								]
-							}), /* @__PURE__ */ jsxs("div", {
-								className: summaryGrid,
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: summaryCard,
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: summaryGrid,
 									children: [/* @__PURE__ */ jsxs("div", {
-										className: summaryHeader,
-										children: [/* @__PURE__ */ jsx(Calendar, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Current Expiration" })]
-									}), currentExpiredDateMemo ? /* @__PURE__ */ jsxs("div", {
-										className: summaryContent,
-										children: [
-											/* @__PURE__ */ jsx("div", {
+										className: summaryCard,
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: summaryHeader,
+											children: [/* @__PURE__ */ jsx(Calendar, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Current Expiration" })]
+										}), currentExpiredDateMemo ? /* @__PURE__ */ jsxs("div", {
+											className: summaryContent,
+											children: [
+												/* @__PURE__ */ jsx("div", {
+													className: summaryValue,
+													children: formatDate(currentExpiredDateMemo)
+												}),
+												currentEpochsRemaining !== null && currentEpochsRemaining > 0 && /* @__PURE__ */ jsxs("div", {
+													className: summarySubtext,
+													children: [
+														currentEpochsRemaining,
+														" epoch",
+														currentEpochsRemaining !== 1 ? "s" : "",
+														" remaining"
+													]
+												}),
+												currentEpochsRemaining === 0 && /* @__PURE__ */ jsx("div", {
+													className: summaryError,
+													children: "Expired"
+												})
+											]
+										}) : /* @__PURE__ */ jsx("div", {
+											className: summaryValue,
+											children: "Unavailable"
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: summaryCard,
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: summaryHeader,
+											children: [/* @__PURE__ */ jsx(Clock, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "New Expiration Date" })]
+										}), projectedDate ? /* @__PURE__ */ jsxs("div", {
+											className: summaryContent,
+											children: [/* @__PURE__ */ jsx("div", {
 												className: summaryValue,
-												children: formatDate(currentExpiredDateMemo)
-											}),
-											currentEpochsRemaining !== null && currentEpochsRemaining > 0 && /* @__PURE__ */ jsxs("div", {
+												children: formatDate(projectedDate)
+											}), currentEpochsRemaining !== null && /* @__PURE__ */ jsxs("div", {
 												className: summarySubtext,
 												children: [
 													currentEpochsRemaining,
-													" epoch",
-													currentEpochsRemaining !== 1 ? "s" : "",
-													" remaining"
+													" →",
+													" ",
+													currentEpochsRemaining + epochs,
+													" epochs (+",
+													epochs,
+													" ",
+													"epoch",
+													epochs !== 1 ? "s" : "",
+													")"
 												]
+											})]
+										}) : /* @__PURE__ */ jsx("div", {
+											className: summaryValue,
+											children: "Select a date"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: costSection,
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: costHeader,
+										children: [
+											/* @__PURE__ */ jsx(DollarSign, { size: 16 }),
+											/* @__PURE__ */ jsx("span", { children: "Storage Cost" }),
+											totalFileSize === null && estimatedFileSize !== null && /* @__PURE__ */ jsx("span", {
+												className: estimatedBadge,
+												children: "Estimated"
+											})
+										]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: costContent,
+										children: [
+											/* @__PURE__ */ jsxs("div", {
+												className: costRow,
+												children: [/* @__PURE__ */ jsx("span", {
+													className: costLabel,
+													children: "Size:"
+												}), /* @__PURE__ */ jsx("span", {
+													className: costValue,
+													children: totalFileSize !== null ? formatFileSize(totalFileSize) : estimatedFileSize !== null ? formatFileSize(estimatedFileSize) : "Unknown"
+												})]
 											}),
-											currentEpochsRemaining === 0 && /* @__PURE__ */ jsx("div", {
-												className: summaryError,
-												children: "Expired"
+											/* @__PURE__ */ jsxs("div", {
+												className: costRow,
+												children: [/* @__PURE__ */ jsx("span", {
+													className: costLabel,
+													children: "Resources:"
+												}), /* @__PURE__ */ jsxs("span", {
+													className: costValue,
+													children: [
+														siteData?.resources?.length || 0,
+														" resources • ",
+														epochs,
+														" ",
+														"epoch",
+														epochs !== 1 ? "s" : ""
+													]
+												})]
+											}),
+											isStorageCostLoading || isEstimatedCostLoading ? /* @__PURE__ */ jsxs("div", {
+												className: costLoading,
+												children: [/* @__PURE__ */ jsx(Loader2, {
+													size: 14,
+													className: spinner$1
+												}), /* @__PURE__ */ jsx("span", { children: "Calculating cost..." })]
+											}) : storageCostData || estimatedCostData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+												totalFileSize === null && estimatedFileSize !== null && /* @__PURE__ */ jsxs("div", {
+													className: costWarning,
+													children: [/* @__PURE__ */ jsx(Info, { size: 12 }), /* @__PURE__ */ jsxs("span", { children: [
+														"Estimated cost based on",
+														" ",
+														siteData?.resources?.length || 0,
+														" resource",
+														siteData?.resources?.length !== 1 ? "s" : ""
+													] })]
+												}),
+												/* @__PURE__ */ jsx("div", { className: costDivider }),
+												/* @__PURE__ */ jsxs("div", {
+													className: costRow,
+													children: [/* @__PURE__ */ jsx("span", {
+														className: costLabel,
+														children: "Storage Cost:"
+													}), /* @__PURE__ */ jsxs("span", {
+														className: costValue,
+														children: [
+															formatWalAmount(storageCostData?.storageCost || estimatedCostData?.storageCost),
+															" ",
+															"WAL"
+														]
+													})]
+												})
+											] }) : storageCostError ? /* @__PURE__ */ jsxs("div", {
+												className: costError,
+												children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Unable to calculate cost. Please ensure you have sufficient WAL balance." })]
+											}) : /* @__PURE__ */ jsxs("div", {
+												className: costError,
+												children: [/* @__PURE__ */ jsx(Info, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "Unable to calculate cost" })]
 											})
 										]
-									}) : /* @__PURE__ */ jsx("div", {
-										className: summaryValue,
-										children: "Unavailable"
 									})]
-								}), /* @__PURE__ */ jsxs("div", {
-									className: summaryCard,
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: summaryHeader,
-										children: [/* @__PURE__ */ jsx(Clock, { size: 14 }), /* @__PURE__ */ jsx("span", { children: "New Expiration Date" })]
-									}), projectedDate ? /* @__PURE__ */ jsxs("div", {
-										className: summaryContent,
-										children: [/* @__PURE__ */ jsx("div", {
-											className: summaryValue,
-											children: formatDate(projectedDate)
-										}), currentEpochsRemaining !== null && /* @__PURE__ */ jsxs("div", {
-											className: summarySubtext,
-											children: [
-												currentEpochsRemaining,
-												" →",
-												" ",
-												currentEpochsRemaining + epochs,
-												" epochs (+",
-												epochs,
-												" ",
-												"epoch",
-												epochs !== 1 ? "s" : "",
-												")"
-											]
-										})]
-									}) : /* @__PURE__ */ jsx("div", {
-										className: summaryValue,
-										children: "Select a date"
-									})]
-								})]
-							})]
+								})
+							]
 						})
 					]
 				}),
@@ -2543,27 +2883,6 @@ const PublishMenu = ({ children, siteId, onPublishClick, onDomainClick, portalDo
 };
 var PublishMenu_default = PublishMenu;
 
-//#endregion
-//#region src/queries/storage-cost.query.ts
-function useStorageCostQuery(fileSize, epochs, clients) {
-	const { walrusClient, queryClient } = clients;
-	return useQuery({
-		queryKey: queryKeys.storageCost(fileSize, epochs),
-		queryFn: async () => {
-			if (!walrusClient) throw new Error("Walrus client not available");
-			if (fileSize === null) throw new Error("Invalid file size");
-			const storageCost = await walrusClient.storageCost(fileSize, epochs);
-			return {
-				storageCost: storageCost.storageCost.toString(),
-				writeCost: storageCost.writeCost.toString(),
-				totalCost: storageCost.totalCost.toString()
-			};
-		},
-		enabled: !!walrusClient && fileSize !== null && fileSize > 0 && epochs > 0,
-		staleTime: 300 * 1e3
-	}, queryClient);
-}
-
 //#endregion
 //#region src/components/publish-modal/PublishModal.css.ts
 var buttonGroup = "PublishModal_buttonGroup__m8gxhre";
@@ -4331,7 +4650,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 +4660,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 +4839,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 +5092,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"}`
 						})
 					]
 				})
@@ -4904,5 +5429,5 @@ const PublishButton = ({ children, siteId, assets, onUpdateSiteMetadata, onAssoc
 var PublishButton_default = PublishButton;
 
 //#endregion
-export { Banner, Button, DeploySteps, DeploymentStatus, FlickeringGrid, Input, Label, PublishButton_default as PublishButton, PublishMenu_default as PublishMenu, PublishModal_default as PublishModal, Stepper, SuiNsModal_default as SuiNsModal, Textarea, isAssigningDomain, isDomainDialogOpen, isExtendTimeDialogOpen, isRegisterSuiNSDomainDialogOpen, siteMetadataStore, sitePublishingStore, useEpochDuration, useSitePublishing, useSuiNsDomainsQuery, useSuiNsRegistration, useTransactionExecutor, useWalrusSiteQuery, useWalrusSitesQuery, useZenFsWorkspace, useZenfsFilesQuery };
+export { Banner, Button, DeploySteps, DeploymentStatus, FlickeringGrid, Input, Label, PublishButton_default as PublishButton, PublishMenu_default as PublishMenu, PublishModal_default as PublishModal, Stepper, SuiNsModal_default as SuiNsModal, Textarea, isAssigningDomain, isDomainDialogOpen, isExtendTimeDialogOpen, isRegisterSuiNSDomainDialogOpen, siteMetadataStore, sitePublishingStore, useEpochDuration, useSitePublishing, useSuiNsDomainsQuery, useSuiNsRegistration, useTransactionExecutor, useUpdateSiteMetadata, useWalrusSiteQuery, useWalrusSitesQuery, useZenFsWorkspace, useZenfsFilesQuery };
 //# sourceMappingURL=index.js.map