@cmdoss/walrus-site-builder-react 2.4.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";
@@ -1337,6 +1337,43 @@ function useSuiNsRegistration({ currentAccount, clients: { suiClient, queryClien
 	};
 }
 
+//#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) {
@@ -1361,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) => {
@@ -2048,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";
@@ -2080,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,
@@ -2096,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);
@@ -2120,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;
 								}
 							}
@@ -2130,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);
 		}
@@ -2140,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();
 	}, [
@@ -2380,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"
-									})]
-								})]
-							})]
+								})
+							]
 						})
 					]
 				}),
@@ -2685,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";
@@ -5252,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