@openzeppelin/ui-renderer 1.0.4 → 1.1.1

package/dist/index.cjs

@@ -1442,6 +1442,697 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 	});
 }
 
+//#endregion
+//#region src/components/AddressBookWidget/AddAliasDialog.tsx
+/** Dialog for creating a new address alias entry. */
+function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter: defaultAdapter, resolveAdapter, addressPlaceholder: defaultPlaceholder, resolveAddressPlaceholder, resolveNetwork, networks }) {
+	const [saving, setSaving] = (0, react.useState)(false);
+	const initialNetwork = (0, react.useMemo)(() => currentNetworkId && resolveNetwork ? resolveNetwork(currentNetworkId) : void 0, [currentNetworkId, resolveNetwork]);
+	const [selectedNetwork, setSelectedNetwork] = (0, react.useState)(initialNetwork ?? null);
+	const [activeAdapter, setActiveAdapter] = (0, react.useState)(defaultAdapter);
+	const [activePlaceholder, setActivePlaceholder] = (0, react.useState)(defaultPlaceholder);
+	(0, react.useEffect)(() => {
+		if (open) {
+			setSelectedNetwork(initialNetwork ?? null);
+			setActiveAdapter(defaultAdapter);
+			setActivePlaceholder(defaultPlaceholder);
+		}
+	}, [
+		open,
+		initialNetwork,
+		defaultAdapter,
+		defaultPlaceholder
+	]);
+	const { control, handleSubmit, reset, trigger, formState } = (0, react_hook_form.useForm)({
+		defaultValues: {
+			address: "",
+			alias: ""
+		},
+		mode: "onChange"
+	});
+	const handleNetworkChange = (0, react.useCallback)(async (network) => {
+		setSelectedNetwork(network);
+		if (resolveAddressPlaceholder) setActivePlaceholder(resolveAddressPlaceholder(network));
+		if (resolveAdapter) {
+			setActiveAdapter(await resolveAdapter(network));
+			trigger("address");
+		}
+	}, [
+		resolveAdapter,
+		resolveAddressPlaceholder,
+		trigger
+	]);
+	const canSubmit = formState.isValid && !saving;
+	const onSubmit = (0, react.useCallback)(async (data) => {
+		const networkId = selectedNetwork?.id;
+		setSaving(true);
+		try {
+			await onSave({
+				address: data.address.trim(),
+				alias: data.alias.trim(),
+				networkId
+			});
+			reset();
+			onOpenChange(false);
+		} finally {
+			setSaving(false);
+		}
+	}, [
+		onOpenChange,
+		onSave,
+		reset,
+		selectedNetwork
+	]);
+	const handleOpenChange = (0, react.useCallback)((nextOpen) => {
+		if (!nextOpen) {
+			reset();
+			setSelectedNetwork(initialNetwork ?? null);
+			setActiveAdapter(defaultAdapter);
+			setActivePlaceholder(defaultPlaceholder);
+		}
+		onOpenChange(nextOpen);
+	}, [
+		defaultAdapter,
+		defaultPlaceholder,
+		initialNetwork,
+		onOpenChange,
+		reset
+	]);
+	const hasNetworkSelection = networks && networks.length > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogContent, {
+			className: "max-w-md",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.DialogTitle, { children: "Add Alias" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.DialogDescription, { children: "Create a human-readable name for an address." })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					id: "add-alias-form",
+					onSubmit: handleSubmit(onSubmit),
+					className: "space-y-4",
+					children: [
+						hasNetworkSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Label, {
+								htmlFor: "alias-network",
+								children: "Network"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.NetworkSelector, {
+								networks,
+								selectedNetwork,
+								onSelectNetwork: handleNetworkChange,
+								getNetworkLabel: (n) => n.name,
+								getNetworkId: (n) => n.id,
+								getNetworkIcon: (n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.NetworkIcon, { network: n }),
+								getNetworkType: (n) => n.type,
+								groupByEcosystem: true,
+								getEcosystem: (n) => n.ecosystem.toUpperCase(),
+								placeholder: "Select network…"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.AddressField, {
+							id: "new-alias-address",
+							name: "address",
+							label: "Address",
+							placeholder: activePlaceholder,
+							control,
+							validation: { required: true },
+							adapter: activeAdapter
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.TextField, {
+							id: "new-alias-name",
+							name: "alias",
+							label: "Alias",
+							placeholder: "e.g. Treasury",
+							control,
+							validation: { required: true }
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => handleOpenChange(false),
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Button, {
+					type: "submit",
+					form: "add-alias-form",
+					size: "sm",
+					disabled: !canSubmit,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+						className: "mr-1.5 h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}), saving ? "Adding…" : "Add"]
+				})] })
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/AddressBookWidget/AliasRow.tsx
+/** Single row in the Address Book widget displaying an alias record. */
+function AliasRow({ alias, onSave, onRemove, resolveNetwork, resolveExplorerUrl }) {
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [editValue, setEditValue] = (0, react.useState)(alias.alias);
+	const [busy, setBusy] = (0, react.useState)(false);
+	const network = (0, react.useMemo)(() => alias.networkId && resolveNetwork ? resolveNetwork(alias.networkId) : void 0, [alias.networkId, resolveNetwork]);
+	const explorerUrl = (0, react.useMemo)(() => resolveExplorerUrl?.(alias.address, alias.networkId), [
+		alias.address,
+		alias.networkId,
+		resolveExplorerUrl
+	]);
+	const handleEdit = (0, react.useCallback)(() => {
+		setEditValue(alias.alias);
+		setEditing(true);
+	}, [alias.alias]);
+	const handleCancel = (0, react.useCallback)(() => {
+		setEditing(false);
+	}, []);
+	const handleSave = (0, react.useCallback)(async () => {
+		const trimmed = editValue.trim();
+		if (!trimmed || trimmed === alias.alias) {
+			setEditing(false);
+			return;
+		}
+		setBusy(true);
+		try {
+			await onSave({
+				address: alias.address,
+				alias: trimmed,
+				networkId: alias.networkId
+			});
+			setEditing(false);
+		} finally {
+			setBusy(false);
+		}
+	}, [
+		alias,
+		editValue,
+		onSave
+	]);
+	const handleRemove = (0, react.useCallback)(async () => {
+		setBusy(true);
+		try {
+			await onRemove(alias.id);
+		} finally {
+			setBusy(false);
+		}
+	}, [alias.id, onRemove]);
+	const handleKeyDown = (0, react.useCallback)((e) => {
+		if (e.key === "Enter") handleSave();
+		if (e.key === "Escape") handleCancel();
+	}, [handleSave, handleCancel]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3 rounded-md border p-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-2 max-w-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Input, {
+					value: editValue,
+					onChange: (e) => setEditValue(e.target.value),
+					onKeyDown: handleKeyDown,
+					className: "h-8 text-base font-semibold",
+					autoFocus: true,
+					disabled: busy
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "mb-2.5 truncate text-base font-semibold text-foreground",
+				children: alias.alias
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [alias.networkId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.NetworkStatusBadge, {
+					network: network ?? null,
+					className: "shrink-0 gap-1.5 px-2 py-1"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.AddressLabelProvider, {
+						resolveLabel: () => void 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.AddressDisplay, {
+							address: alias.address,
+							truncate: false,
+							showCopyButton: true,
+							explorerUrl,
+							className: "text-xs text-muted-foreground"
+						})
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex shrink-0 gap-1",
+			children: editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-7 w-7",
+				onClick: handleSave,
+				disabled: busy,
+				"aria-label": "Save",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-7 w-7",
+				onClick: handleCancel,
+				disabled: busy,
+				"aria-label": "Cancel",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-3.5 w-3.5" })
+			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-7 w-7",
+				onClick: handleEdit,
+				disabled: busy,
+				"aria-label": "Edit alias",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-7 w-7 text-destructive hover:text-destructive",
+				onClick: handleRemove,
+				disabled: busy,
+				"aria-label": "Remove alias",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "h-3.5 w-3.5" })
+			})] })
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/AddressBookWidget/ImportExportBar.tsx
+/** Bar for importing and exporting address book aliases. */
+function ImportExportBar({ onExport, onImport, exportDisabled }) {
+	const fileInputRef = (0, react.useRef)(null);
+	const handleImportClick = (0, react.useCallback)(() => {
+		fileInputRef.current?.click();
+	}, []);
+	const handleFileChange = (0, react.useCallback)(async (e) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+		await onImport(file);
+		if (fileInputRef.current) fileInputRef.current.value = "";
+	}, [onImport]);
+	const handleExport = (0, react.useCallback)(async () => {
+		await onExport();
+	}, [onExport]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.OverflowMenu, { items: (0, react.useMemo)(() => [{
+		id: "export",
+		label: "Export",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "mr-2 h-4 w-4" }),
+		disabled: exportDisabled,
+		onSelect: handleExport
+	}, {
+		id: "import",
+		label: "Import",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }),
+		onSelect: handleImportClick
+	}], [
+		exportDisabled,
+		handleExport,
+		handleImportClick
+	]) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref: fileInputRef,
+		type: "file",
+		accept: ".json",
+		className: "hidden",
+		onChange: handleFileChange
+	})] });
+}
+
+//#endregion
+//#region src/components/AddressBookWidget/AddressBookWidget.tsx
+/** Widget for managing a personal address book with aliases, search, and network filtering. */
+function AddressBookWidget({ aliases, isLoading, onSave, onRemove, onClear, onExport, onImport, currentNetworkId, resolveNetwork, resolveExplorerUrl, adapter, resolveAdapter, addressPlaceholder, resolveAddressPlaceholder, networks, filterNetworkIds, onFilterNetworkIdsChange, title = "Address Book", className }) {
+	const [search, setSearch] = (0, react.useState)("");
+	const [addDialogOpen, setAddDialogOpen] = (0, react.useState)(false);
+	const [confirmClear, setConfirmClear] = (0, react.useState)(false);
+	const [clearInput, setClearInput] = (0, react.useState)("");
+	const activeFilterIds = (0, react.useMemo)(() => filterNetworkIds ?? [], [filterNetworkIds]);
+	const hasActiveFilter = activeFilterIds.length > 0;
+	const filteredAliases = (0, react.useMemo)(() => {
+		if (!aliases) return void 0;
+		if (!search.trim()) return aliases;
+		const lower = search.toLowerCase();
+		return aliases.filter((a) => a.alias.toLowerCase().includes(lower) || a.address.toLowerCase().includes(lower));
+	}, [aliases, search]);
+	const handleClear = (0, react.useCallback)(async () => {
+		await onClear();
+		setConfirmClear(false);
+		setClearInput("");
+	}, [onClear]);
+	const handleCancelClear = (0, react.useCallback)(() => {
+		setConfirmClear(false);
+		setClearInput("");
+	}, []);
+	const canFilter = networks && networks.length > 0 && onFilterNetworkIdsChange;
+	if (isLoading || aliases === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Card, {
+		className: (0, _openzeppelin_ui_utils.cn)("w-full", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.CardTitle, {
+			className: "flex items-center gap-2 text-lg",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BookUser, { className: "h-5 w-5" }), title]
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.CardContent, {
+			className: "flex items-center justify-center py-12",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" })
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Card, {
+		className: (0, _openzeppelin_ui_utils.cn)("w-full", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.CardTitle, {
+					className: "flex items-center gap-2 text-lg",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BookUser, { className: "h-5 w-5" }),
+						title,
+						aliases.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "text-sm font-normal text-muted-foreground",
+							children: [
+								"(",
+								aliases.length,
+								")"
+							]
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Button, {
+						size: "sm",
+						onClick: () => setAddDialogOpen(true),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+							className: "mr-1.5 h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}), "Add Alias"]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImportExportBar, {
+						onExport,
+						onImport,
+						exportDisabled: aliases.length === 0
+					})]
+				})]
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddAliasDialog, {
+				open: addDialogOpen,
+				onOpenChange: setAddDialogOpen,
+				onSave,
+				currentNetworkId,
+				adapter,
+				resolveAdapter,
+				addressPlaceholder,
+				resolveAddressPlaceholder,
+				resolveNetwork,
+				networks
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.CardContent, {
+				className: "space-y-4",
+				children: [(aliases.length > 0 || hasActiveFilter) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "relative flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Input, {
+								placeholder: "Search by alias or address…",
+								value: search,
+								onChange: (e) => setSearch(e.target.value),
+								className: "pl-8"
+							})]
+						}), canFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.NetworkSelector, {
+							multiple: true,
+							networks,
+							selectedNetworkIds: activeFilterIds,
+							onSelectionChange: onFilterNetworkIdsChange,
+							getNetworkLabel: (n) => n.name,
+							getNetworkId: (n) => n.id,
+							getNetworkIcon: (n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.NetworkIcon, {
+								network: n,
+								size: 14
+							}),
+							getNetworkType: (n) => n.type,
+							groupByEcosystem: true,
+							getEcosystem: (n) => n.ecosystem.toUpperCase(),
+							renderTrigger: ({ selectedCount }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Button, {
+								variant: "outline",
+								size: "icon",
+								className: "relative shrink-0",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Filter, { className: "h-4 w-4" }), selectedCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground",
+									children: selectedCount
+								})]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2",
+						children: [filteredAliases?.map((alias) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AliasRow, {
+							alias,
+							onSave,
+							onRemove,
+							resolveNetwork,
+							resolveExplorerUrl
+						}, alias.id)), filteredAliases?.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "py-4 text-center text-sm text-muted-foreground",
+							children: hasActiveFilter ? "No aliases match the current filters." : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								"No aliases match “",
+								search,
+								"”"
+							] })
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "border-t pt-4",
+						children: confirmClear ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									"Type ",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "font-mono font-semibold",
+										children: "clear"
+									}),
+									" to confirm removing all aliases."
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Input, {
+										value: clearInput,
+										onChange: (e) => setClearInput(e.target.value),
+										placeholder: "Type \"clear\"",
+										className: "max-w-[200px]",
+										autoFocus: true
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+										variant: "destructive",
+										size: "sm",
+										disabled: clearInput !== "clear",
+										onClick: handleClear,
+										children: "Confirm"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: handleCancelClear,
+										children: "Cancel"
+									})
+								]
+							})]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Button, {
+							variant: "outline",
+							size: "sm",
+							className: "text-destructive hover:text-destructive",
+							onClick: () => setConfirmClear(true),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {
+								className: "mr-1.5 h-3.5 w-3.5",
+								"aria-hidden": "true"
+							}), "Clear All"]
+						})
+					})
+				] }), aliases.length === 0 && !hasActiveFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.EmptyState, {
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BookUser, { className: "h-10 w-10" }),
+					title: "No aliases yet",
+					description: "Add your first alias above to start building your address book.",
+					size: "small"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/AddressBookWidget/AliasEditPopover.tsx
+/**
+* AliasEditPopover
+*
+* Floating popover anchored to the pencil-icon click position.
+* Allows creating, editing, and removing an alias for a single address.
+*
+* This is a presentational component — all storage operations are
+* provided via callback props so it remains storage-agnostic.
+*/
+/** Inline popover for creating, editing, or removing an address alias. */
+function AliasEditPopover({ address, networkId, anchorRect, onClose, onLookup, onSave, onRemove }) {
+	const [alias, setAlias] = (0, react.useState)("");
+	const [existingId, setExistingId] = (0, react.useState)(null);
+	const [busy, setBusy] = (0, react.useState)(false);
+	const [loaded, setLoaded] = (0, react.useState)(false);
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		onLookup(address, networkId).then((record) => {
+			if (cancelled) return;
+			if (record) {
+				setAlias(record.alias);
+				setExistingId(record.id);
+			}
+			setLoaded(true);
+		}).catch(() => {
+			if (!cancelled) setLoaded(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		address,
+		networkId,
+		onLookup
+	]);
+	(0, react.useEffect)(() => {
+		if (loaded) inputRef.current?.focus();
+	}, [loaded]);
+	const handleSave = (0, react.useCallback)(async () => {
+		const trimmed = alias.trim();
+		if (!trimmed) return;
+		setBusy(true);
+		try {
+			await onSave({
+				address,
+				alias: trimmed,
+				networkId
+			});
+			onClose();
+		} finally {
+			setBusy(false);
+		}
+	}, [
+		address,
+		alias,
+		networkId,
+		onSave,
+		onClose
+	]);
+	const handleRemove = (0, react.useCallback)(async () => {
+		if (!existingId) return;
+		setBusy(true);
+		try {
+			await onRemove(existingId);
+			onClose();
+		} finally {
+			setBusy(false);
+		}
+	}, [
+		existingId,
+		onRemove,
+		onClose
+	]);
+	const handleKeyDown = (0, react.useCallback)((e) => {
+		if (e.key === "Enter") handleSave();
+		if (e.key === "Escape") onClose();
+	}, [handleSave, onClose]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Popover, {
+		open: true,
+		onOpenChange: (open) => !open && onClose(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.PopoverAnchor, { style: {
+			position: "fixed",
+			left: anchorRect.x,
+			top: anchorRect.y,
+			width: 0,
+			height: 0,
+			pointerEvents: "none"
+		} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.PopoverContent, {
+			side: "bottom",
+			align: "start",
+			className: "w-64 space-y-3 p-3",
+			children: !loaded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading…"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: "alias-edit-input",
+				className: "text-xs font-medium text-muted-foreground",
+				children: "Alias"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				id: "alias-edit-input",
+				type: "text",
+				value: alias,
+				onChange: (e) => setAlias(e.target.value),
+				onKeyDown: handleKeyDown,
+				disabled: busy,
+				placeholder: "e.g. Treasury",
+				className: "mt-1 w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleSave,
+						disabled: busy || !alias.trim(),
+						className: "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground shadow-sm hover:bg-primary/90 disabled:opacity-50",
+						children: "Save"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: onClose,
+						disabled: busy,
+						className: "rounded-md border px-3 py-1 text-xs font-medium hover:bg-accent disabled:opacity-50",
+						children: "Cancel"
+					})]
+				}), existingId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: handleRemove,
+					disabled: busy,
+					className: "rounded-md px-3 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+					children: "Remove"
+				})]
+			})] })
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/AddressBookWidget/useAliasEditState.ts
+/**
+* useAliasEditState
+*
+* Pure UI state hook for managing the inline alias edit popover.
+* Tracks which address is being edited and the click anchor position
+* so the popover can be positioned near the pencil icon.
+*
+* Returns an `onEditLabel` callback compatible with `AddressLabelProvider`.
+*/
+/** Manages the edit state for the inline alias popover. */
+function useAliasEditState(defaultNetworkId) {
+	const [editing, setEditing] = (0, react.useState)(null);
+	const lastClickRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	return {
+		editing,
+		onEditLabel: (0, react.useCallback)((address, networkId) => {
+			const { x, y } = lastClickRef.current;
+			const anchorRect = new DOMRect(x, y, 0, 0);
+			setEditing({
+				address,
+				networkId: networkId ?? defaultNetworkId,
+				anchorRect
+			});
+		}, [defaultNetworkId]),
+		handleClose: (0, react.useCallback)(() => {
+			setEditing(null);
+		}, []),
+		lastClickRef
+	};
+}
+
 //#endregion
 //#region src/components/ContractStateWidget/components/FunctionResult.tsx
 /**
@@ -2117,6 +2808,8 @@ const WalletConnectionWithSettings = () => {
 };
 
 //#endregion
+exports.AddressBookWidget = AddressBookWidget;
+exports.AliasEditPopover = AliasEditPopover;
 exports.ContractActionBar = ContractActionBar;
 exports.ContractStateWidget = ContractStateWidget;
 exports.DynamicFormField = DynamicFormField;
@@ -2139,5 +2832,6 @@ exports.createTransformForFieldType = createTransformForFieldType;
 exports.generateDefaultValue = generateDefaultValue;
 exports.getDefaultValueByFieldType = getDefaultValueByFieldType;
 exports.rendererConfig = rendererConfig;
+exports.useAliasEditState = useAliasEditState;
 exports.validateField = validateField;
 //# sourceMappingURL=index.cjs.map