@openzeppelin/ui-components 3.4.0 → 3.5.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { a as getValidationStateClasses, c as isDuplicateMapKey, d as INTEGER_HTML_PATTERN, f as INTEGER_INPUT_PATTERN, i as getErrorMessage, l as validateField, n as createValidationResult, o as handleValidationError, p as INTEGER_PATTERN, r as formatValidationError, s as hasFieldError, t as ErrorMessage, u as validateMapEntries } from "./ErrorMessage-BqOEJm84.mjs";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cva } from "class-variance-authority";
-import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, ClipboardPaste, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, MoreHorizontal, Network, Pencil, PencilLine, Plus, Search, Settings, Timer, Upload, X } from "lucide-react";
+import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, ClipboardPaste, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, MoreHorizontal, Network, Pencil, PencilLine, Plus, Search, Settings, Timer, TriangleAlert, Upload, X } from "lucide-react";
 import * as React$1 from "react";
 import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { classifyAddressCandidates, classifyAddressInput, cn, getDefaultValueForType, getHostedNetworkAvailabilityNoticeCopy, getInvalidUrlMessage, getServiceDisplayName, isChainScopeMismatch, isNetworkAvailabilityPolicyActive, isValidUrl, logger, nameResolutionChainScopeMismatchMessage, nameResolutionMessageForCode, parseDelimitedAddressInput, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
+import { classifyAddressCandidates, classifyAddressInput, cn, crossNetworkFallbackMessageNames, getDefaultValueForType, getFallbackNetworks, getHostedNetworkAvailabilityNoticeCopy, getInvalidUrlMessage, getServiceDisplayName, isChainScopeMismatch, isCrossNetworkFallback, isNetworkAvailabilityPolicyActive, isValidUrl, logger, nameResolutionChainScopeMismatchMessage, nameResolutionCrossNetworkFallbackMessage, nameResolutionMessageForCode, parseDelimitedAddressInput, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Slot, Slottable } from "@radix-ui/react-slot";
@@ -26,7 +26,7 @@ import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
 
 //#region src/version.ts
-const VERSION = "3.4.0";
+const VERSION = "3.5.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -264,7 +264,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$1.useState(false);
 	const [isHovered, setIsHovered] = React$1.useState(false);
 	const copyTimeoutRef = React$1.useRef(null);
@@ -275,6 +275,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 && isCrossNetworkFallback(record.provenance);
+	const fallbackNote = (() => {
+		if (!showFallbackNote) return void 0;
+		const networks = getFallbackNetworks(record.provenance);
+		if (networks === void 0) return void 0;
+		return nameResolutionCrossNetworkFallbackMessage(networks, crossNetworkFallbackMessageNames(networks, nameResolver?.resolveNetworkLabel));
+	})();
 	const effectiveTruncate = truncateProp !== void 0 ? truncateProp : truncateWhenLabeled ? Boolean(effectiveLabel) : true;
 	const contextEditHandler = React$1.useCallback(() => {
 		resolver?.onEditLabel?.(address, networkId);
@@ -375,9 +382,29 @@ function AddressDisplay({ address, truncate: truncateProp, truncateWhenLabeled =
 		});
 	};
 	if (effectiveLabel) {
-		const labelColumn = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-			className: "truncate font-sans font-medium text-slate-900 leading-snug",
-			children: effectiveLabel
+		const labelColumn = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "inline-flex min-w-0 max-w-full items-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate font-sans font-medium text-slate-900 leading-snug",
+				children: effectiveLabel
+			}), fallbackNote && showCrossNetworkFallbackDisclaimer ? /* @__PURE__ */ jsx(TooltipProvider, {
+				delayDuration: 300,
+				children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ 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__ */ jsx(TriangleAlert, {
+							className: "h-3 w-3",
+							"aria-hidden": true
+						})
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					className: "max-w-xs font-sans text-xs font-normal normal-case",
+					children: fallbackNote
+				})] })
+			}) : null]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center font-mono text-[10px] text-slate-400 leading-snug",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -541,8 +568,11 @@ function useAddressLabel(address, networkId) {
 *
 * @param props - Resolver function and children
 */
-function AddressNameProvider({ children, resolveAddressName }) {
-	const value = React$1.useMemo(() => ({ resolveAddressName }), [resolveAddressName]);
+function AddressNameProvider({ children, resolveAddressName, resolveNetworkLabel }) {
+	const value = React$1.useMemo(() => ({
+		resolveAddressName,
+		resolveNetworkLabel
+	}), [resolveAddressName, resolveNetworkLabel]);
 	return /* @__PURE__ */ jsx(AddressNameContext.Provider, {
 		value,
 		children
@@ -3385,7 +3415,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`;
@@ -3395,6 +3425,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 = useRef("");
 	const [inputValue, setInputValue] = useState("");
 	const watchedFieldValue = useWatch({
@@ -3585,12 +3616,18 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 					className: "text-destructive text-sm",
 					children: nameResolutionChainScopeMismatchMessage({ activeNetworkName })
 				});
+				const fallbackNetworks = showCrossNetworkFallbackDisclaimer && isCrossNetworkFallback(resolution.data.provenance) ? getFallbackNetworks(resolution.data.provenance) : void 0;
+				const fallbackMessage = fallbackNetworks && nameResolutionCrossNetworkFallbackMessage(fallbackNetworks, crossNetworkFallbackMessageNames(fallbackNetworks, resolveNetworkLabel));
 				return /* @__PURE__ */ jsxs("span", {
 					className: "text-sm",
-					children: ["Resolved to ", /* @__PURE__ */ jsx("code", {
+					children: [/* @__PURE__ */ jsxs("span", { children: ["Resolved to ", /* @__PURE__ */ jsx("code", {
 						className: "font-mono",
 						children: resolution.data.address
-					})]
+					})] }), fallbackMessage ? /* @__PURE__ */ 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;
@@ -4270,17 +4307,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$1.useMemo(() => ({
 		isValidName,
 		resolveName,
 		activeNetworkId,
-		activeNetworkName
+		activeNetworkName,
+		resolveNetworkLabel
 	}), [
 		isValidName,
 		resolveName,
 		activeNetworkId,
-		activeNetworkName
+		activeNetworkName,
+		resolveNetworkLabel
 	]);
 	return /* @__PURE__ */ jsx(NameResolverContext.Provider, {
 		value,