@openzeppelin/ui-components 3.4.0 → 3.5.0

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "3.4.0";
+const VERSION = "3.5.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -276,7 +276,7 @@ function sanitizeVerifiedNameForDisplay(name) {
 * <AddressDisplay address="G..." truncateWhenLabeled />
 * ```
 */
-function AddressDisplay({ address, truncate: truncateProp, truncateWhenLabeled = false, untruncateOnHover = false, startChars = 6, endChars = 4, showCopyButton = false, showCopyButtonOnHover = false, explorerUrl, label: labelProp, onLabelEdit: onLabelEditProp, networkId, disableLabel = false, showTooltip = false, variant = "chip", avatar, avatarVariant = "fill", resolvedName, className, onPointerEnter, onPointerLeave, onMouseEnter, onMouseLeave, onClick, ...props }) {
+function AddressDisplay({ address, truncate: truncateProp, truncateWhenLabeled = false, untruncateOnHover = false, startChars = 6, endChars = 4, showCopyButton = false, showCopyButtonOnHover = false, explorerUrl, label: labelProp, onLabelEdit: onLabelEditProp, networkId, disableLabel = false, showTooltip = false, variant = "chip", avatar, avatarVariant = "fill", resolvedName, showCrossNetworkFallbackDisclaimer = true, className, onPointerEnter, onPointerLeave, onMouseEnter, onMouseLeave, onClick, ...props }) {
 	const [copied, setCopied] = react.useState(false);
 	const [isHovered, setIsHovered] = react.useState(false);
 	const copyTimeoutRef = react.useRef(null);
@@ -287,6 +287,13 @@ function AddressDisplay({ address, truncate: truncateProp, truncateWhenLabeled =
 	const record = disableLabel ? void 0 : resolvedName ?? nameResolver?.resolveAddressName(address, networkId);
 	const ensName = record?.forwardVerified === true ? sanitizeVerifiedNameForDisplay(record.name) : void 0;
 	const effectiveLabel = resolvedLabel ?? ensName;
+	const showFallbackNote = showCrossNetworkFallbackDisclaimer && ensName !== void 0 && effectiveLabel === ensName && record !== void 0 && (0, _openzeppelin_ui_utils.isCrossNetworkFallback)(record.provenance);
+	const fallbackNote = (() => {
+		if (!showFallbackNote) return void 0;
+		const networks = (0, _openzeppelin_ui_utils.getFallbackNetworks)(record.provenance);
+		if (networks === void 0) return void 0;
+		return (0, _openzeppelin_ui_utils.nameResolutionCrossNetworkFallbackMessage)(networks, (0, _openzeppelin_ui_utils.crossNetworkFallbackMessageNames)(networks, nameResolver?.resolveNetworkLabel));
+	})();
 	const effectiveTruncate = truncateProp !== void 0 ? truncateProp : truncateWhenLabeled ? Boolean(effectiveLabel) : true;
 	const contextEditHandler = react.useCallback(() => {
 		resolver?.onEditLabel?.(address, networkId);
@@ -387,9 +394,29 @@ function AddressDisplay({ address, truncate: truncateProp, truncateWhenLabeled =
 		});
 	};
 	if (effectiveLabel) {
-		const labelColumn = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate font-sans font-medium text-slate-900 leading-snug",
-			children: effectiveLabel
+		const labelColumn = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex min-w-0 max-w-full items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate font-sans font-medium text-slate-900 leading-snug",
+				children: effectiveLabel
+			}), fallbackNote && showCrossNetworkFallbackDisclaimer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipProvider, {
+				delayDuration: 300,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "inline-flex shrink-0 rounded-sm text-amber-500 outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50",
+						"aria-label": fallbackNote,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TriangleAlert, {
+							className: "h-3 w-3",
+							"aria-hidden": true
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+					className: "max-w-xs font-sans text-xs font-normal normal-case",
+					children: fallbackNote
+				})] })
+			}) : null]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex min-w-0 items-center font-mono text-[10px] text-slate-400 leading-snug",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -553,8 +580,11 @@ function useAddressLabel(address, networkId) {
 *
 * @param props - Resolver function and children
 */
-function AddressNameProvider({ children, resolveAddressName }) {
-	const value = react.useMemo(() => ({ resolveAddressName }), [resolveAddressName]);
+function AddressNameProvider({ children, resolveAddressName, resolveNetworkLabel }) {
+	const value = react.useMemo(() => ({
+		resolveAddressName,
+		resolveNetworkLabel
+	}), [resolveAddressName, resolveNetworkLabel]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressNameContext.Provider, {
 		value,
 		children
@@ -3409,7 +3439,7 @@ function normalizeResolvedName(value) {
 * The component stays capability-free: it never reads a runtime or wallet
 * state; everything arrives through the injected context (INV-118).
 */
-function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, addressing, readOnly, suggestions: suggestionsProp, onSuggestionSelect, onResolvedNameChange }) {
+function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, addressing, readOnly, suggestions: suggestionsProp, onSuggestionSelect, onResolvedNameChange, showCrossNetworkFallbackDisclaimer = true }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -3419,6 +3449,7 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 	const isValidName = resolver?.isValidName;
 	const activeNetworkId = resolver?.activeNetworkId;
 	const activeNetworkName = resolver?.activeNetworkName;
+	const resolveNetworkLabel = resolver?.resolveNetworkLabel;
 	const lastSetValueRef = (0, react.useRef)("");
 	const [inputValue, setInputValue] = (0, react.useState)("");
 	const watchedFieldValue = (0, react_hook_form.useWatch)({
@@ -3609,12 +3640,18 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 					className: "text-destructive text-sm",
 					children: (0, _openzeppelin_ui_utils.nameResolutionChainScopeMismatchMessage)({ activeNetworkName })
 				});
+				const fallbackNetworks = showCrossNetworkFallbackDisclaimer && (0, _openzeppelin_ui_utils.isCrossNetworkFallback)(resolution.data.provenance) ? (0, _openzeppelin_ui_utils.getFallbackNetworks)(resolution.data.provenance) : void 0;
+				const fallbackMessage = fallbackNetworks && (0, _openzeppelin_ui_utils.nameResolutionCrossNetworkFallbackMessage)(fallbackNetworks, (0, _openzeppelin_ui_utils.crossNetworkFallbackMessageNames)(fallbackNetworks, resolveNetworkLabel));
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "text-sm",
-					children: ["Resolved to ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Resolved to ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 						className: "font-mono",
 						children: resolution.data.address
-					})]
+					})] }), fallbackMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "mt-1 block text-muted-foreground text-xs",
+						role: "note",
+						children: fallbackMessage
+					}) : null]
 				});
 			case "error": {
 				const networkName = resolution.error.code === "UNSUPPORTED_NETWORK" ? resolution.error.networkId || void 0 : void 0;
@@ -4294,17 +4331,19 @@ function useAddressSuggestions(query, networkId) {
 *
 * @param props - Injected resolver functions and children
 */
-function NameResolverProvider({ children, isValidName, resolveName, activeNetworkId, activeNetworkName }) {
+function NameResolverProvider({ children, isValidName, resolveName, activeNetworkId, activeNetworkName, resolveNetworkLabel }) {
 	const value = react.useMemo(() => ({
 		isValidName,
 		resolveName,
 		activeNetworkId,
-		activeNetworkName
+		activeNetworkName,
+		resolveNetworkLabel
 	}), [
 		isValidName,
 		resolveName,
 		activeNetworkId,
-		activeNetworkName
+		activeNetworkName,
+		resolveNetworkLabel
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NameResolverContext.Provider, {
 		value,