@openzeppelin/ui-renderer 1.0.0

package/dist/index.js

@@ -0,0 +1,2052 @@
+import { AlertCircle, AlertTriangle, CheckCircle, CheckCircle2, ExternalLink, FileText, Info, Key, Loader2, Minimize2, Network, RefreshCw, Settings, Shield, User, Users, XCircle } from "lucide-react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { appConfigService, cn, logger, rateLimitedBatch, sanitizeHtml, userNetworkServiceConfigService, userRpcConfigService } from "@openzeppelin/ui-utils";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, BigIntField, BooleanField, Button, BytesField, Card, CardContent, CardHeader, CardTitle, CodeEditorField, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, EmptyState, EnumField, FileUploadField, LoadingButton, MapField, NetworkStatusBadge, NumberField, ObjectField, PasswordField, RadioField, RelayerDetailsCard, SelectField, SelectGroupedField, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, UrlField, ViewContractStateButton, useNetworkErrors } from "@openzeppelin/ui-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { WalletConnectionUI, useWalletState } from "@openzeppelin/ui-react";
+
+//#region src/components/ExecutionConfigDisplay/components/EoaConfigDetails.tsx
+const EoaConfigDetails = ({ config }) => /* @__PURE__ */ jsxs("div", {
+	className: "space-y-4",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-start space-x-3 p-3 bg-slate-50 rounded-md",
+		children: [/* @__PURE__ */ jsx(User, { className: "size-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+			className: "text-sm font-medium mb-1",
+			children: "Externally Owned Account (EOA)"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "Transaction will be executed directly from the connected wallet."
+		})] })]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start space-x-3 p-3 bg-slate-50 rounded-md",
+		children: [/* @__PURE__ */ jsx(Key, { className: "size-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("h4", {
+				className: "text-sm font-medium mb-1",
+				children: "Execution Restrictions"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: config.allowAny ? "Any connected wallet can try to execute this transaction." : config.specificAddress ? "Only this address can try to execute this transaction:" : "No specific address restrictions defined."
+			}),
+			config.specificAddress && !config.allowAny && /* @__PURE__ */ jsx(AddressDisplay, {
+				className: "mt-2",
+				address: config.specificAddress
+			})
+		] })]
+	})]
+});
+
+//#endregion
+//#region src/components/ExecutionConfigDisplay/components/ExecutionMethodTrigger.tsx
+const ExecutionMethodTrigger = ({ executionConfig, isValid, error, className }) => {
+	const getMethodIcon = (method) => {
+		const iconColorClass = !isValid ? "text-red-500" : "text-primary";
+		switch (method) {
+			case "eoa": return /* @__PURE__ */ jsx(User, { className: `size-3.5 ${iconColorClass}` });
+			case "relayer": return /* @__PURE__ */ jsx(Shield, { className: `size-3.5 ${iconColorClass}` });
+			case "multisig": return /* @__PURE__ */ jsx(Users, { className: `size-3.5 ${iconColorClass}` });
+			default: return /* @__PURE__ */ jsx(Key, { className: `size-3.5 ${!isValid ? "text-red-500" : "text-muted"}` });
+		}
+	};
+	return /* @__PURE__ */ jsxs(DialogTrigger, {
+		className: cn("inline-flex items-center gap-2 px-3 py-2 text-xs rounded-md border group", "transition-all duration-200 hover:bg-accent hover:text-accent-foreground", !isValid ? "border-red-300 bg-red-50 text-red-800 hover:bg-red-50/80" : "border-slate-200 bg-white text-slate-700", className),
+		style: !isValid ? { animation: "subtle-pulse-scale 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" } : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [
+					getMethodIcon(executionConfig.method),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: "Execution:"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "uppercase",
+						children: executionConfig.method
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center ml-2",
+				children: !isValid ? /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 text-red-500" }) : /* @__PURE__ */ jsx(Info, { className: "size-3.5 text-muted-foreground transition-colors group-hover:text-foreground" })
+			}),
+			!isValid && error && /* @__PURE__ */ jsx("div", {
+				className: "sr-only group-hover:not-sr-only group-hover:absolute group-hover:top-full group-hover:left-0 group-hover:mt-1 group-hover:px-2 group-hover:py-1 group-hover:bg-red-900 group-hover:text-white group-hover:text-xs group-hover:rounded group-hover:shadow-lg group-hover:z-50 group-hover:max-w-xs",
+				children: error
+			}),
+			/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+          @keyframes subtle-pulse-scale {
+            0%, 100% {
+              opacity: 0.65;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 1;
+              transform: scale(1.02);
+            }
+          }
+        ` } })
+		]
+	});
+};
+
+//#endregion
+//#region src/components/ExecutionConfigDisplay/components/ExecutionConfigCard.tsx
+const ExecutionConfigCard = ({ config }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start space-x-3 p-3 bg-slate-50 rounded-md",
+		children: [/* @__PURE__ */ jsx(Settings, { className: "size-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1",
+			children: [
+				/* @__PURE__ */ jsx("h4", {
+					className: "text-sm font-medium mb-1",
+					children: "Execution Configuration"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground mb-2",
+					children: "Configuration parameters that will be used for transaction execution."
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [config.transactionOptions && Object.keys(config.transactionOptions).length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground font-medium",
+						children: "Transaction Options:"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-1 bg-white border rounded p-2",
+						children: Object.entries(config.transactionOptions).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between py-1 border-b last:border-b-0",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "text-xs font-mono text-slate-600",
+								children: [key, ":"]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-xs font-mono bg-slate-100 px-2 py-0.5 rounded",
+								children: typeof value === "object" && value !== null ? JSON.stringify(value) : String(value)
+							})]
+						}, key))
+					})] }), (!config.transactionOptions || Object.keys(config.transactionOptions).length === 0) && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground font-medium",
+						children: "Transaction Options:"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground ml-2",
+						children: "None configured"
+					})] })]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/ExecutionConfigDisplay/components/RelayerConfigDetails.tsx
+const RelayerConfigDetails = ({ config, enhancedDetails, loading = false }) => {
+	const { relayer } = config;
+	const { activeAdapter } = useWalletState();
+	const labels = activeAdapter?.getUiLabels?.();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start space-x-3 p-3 bg-slate-50 rounded-md",
+				children: [/* @__PURE__ */ jsx(Shield, { className: "size-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+					className: "text-sm font-medium mb-1",
+					children: "OpenZeppelin Relayer"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Transaction will be sent via the selected OpenZeppelin Relayer."
+				})] })]
+			}),
+			/* @__PURE__ */ jsx(RelayerDetailsCard, {
+				details: relayer,
+				enhancedDetails,
+				loading,
+				labels
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start space-x-3 p-3 bg-slate-50 rounded-md",
+				children: [/* @__PURE__ */ jsx(Network, { className: "size-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+					className: "text-sm font-medium mb-1",
+					children: "Service Endpoint"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground font-mono break-all",
+					children: config.serviceUrl
+				})] })]
+			}),
+			/* @__PURE__ */ jsx(ExecutionConfigCard, { config })
+		]
+	});
+};
+
+//#endregion
+//#region src/components/ExecutionConfigDisplay/hooks/useExecutionValidation.ts
+const useExecutionValidation = ({ executionConfig, adapter, runtimeApiKey }) => {
+	const [validationResult, setValidationResult] = useState({ isValid: true });
+	const validateConfig = useCallback(async () => {
+		if (!adapter) {
+			setValidationResult({
+				isValid: false,
+				error: "No adapter available for validation"
+			});
+			return;
+		}
+		try {
+			const result = await adapter.validateExecutionConfig(executionConfig);
+			if (result === true) {
+				let runtimeError;
+				if (executionConfig.method === "relayer" && (!runtimeApiKey || runtimeApiKey.trim() === "")) runtimeError = "Relayer API key is required for transaction execution";
+				setValidationResult({
+					isValid: !runtimeError,
+					error: runtimeError
+				});
+			} else setValidationResult({
+				isValid: false,
+				error: result
+			});
+		} catch (error) {
+			setValidationResult({
+				isValid: false,
+				error: error instanceof Error ? error.message : "Validation failed"
+			});
+		}
+	}, [
+		executionConfig,
+		adapter,
+		runtimeApiKey
+	]);
+	useEffect(() => {
+		validateConfig();
+	}, [validateConfig]);
+	return validationResult;
+};
+
+//#endregion
+//#region src/components/ExecutionConfigDisplay/ExecutionConfigDisplay.tsx
+const ExecutionConfigDisplay = ({ executionConfig, adapter, error, onRuntimeApiKeyChange }) => {
+	const { control, watch } = useForm({ defaultValues: { runtimeApiKey: "" } });
+	const runtimeApiKey = watch("runtimeApiKey");
+	const [isOpen, setIsOpen] = useState(false);
+	const [enhancedRelayerDetails, setEnhancedRelayerDetails] = useState(null);
+	const [relayerDetailsLoading, setRelayerDetailsLoading] = useState(false);
+	const { isValid, error: validationError } = useExecutionValidation({
+		executionConfig,
+		adapter,
+		runtimeApiKey
+	});
+	useEffect(() => {
+		onRuntimeApiKeyChange?.(runtimeApiKey);
+	}, [runtimeApiKey, onRuntimeApiKeyChange]);
+	useEffect(() => {
+		if (isOpen && executionConfig.method === "relayer" && runtimeApiKey && adapter?.getRelayer) {
+			const relayerConfig = executionConfig;
+			setRelayerDetailsLoading(true);
+			adapter.getRelayer(relayerConfig.serviceUrl, runtimeApiKey, relayerConfig.relayer.relayerId).then((details) => {
+				setEnhancedRelayerDetails(details);
+			}).catch((err) => {
+				logger.error("ExecutionConfigDisplay", "Failed to fetch enhanced relayer details:", err);
+				setEnhancedRelayerDetails(null);
+			}).finally(() => {
+				setRelayerDetailsLoading(false);
+			});
+		}
+	}, [
+		isOpen,
+		executionConfig,
+		runtimeApiKey,
+		adapter
+	]);
+	const getExecutionContent = () => {
+		switch (executionConfig.method) {
+			case "eoa": return /* @__PURE__ */ jsx(EoaConfigDetails, { config: executionConfig });
+			case "relayer": return /* @__PURE__ */ jsx(RelayerConfigDetails, {
+				config: executionConfig,
+				enhancedDetails: enhancedRelayerDetails,
+				loading: relayerDetailsLoading
+			});
+			default: return /* @__PURE__ */ jsx(EmptyState, {
+				icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-muted-foreground" }),
+				title: "Unknown Execution Method",
+				description: "The selected execution method is not recognized. Please check your configuration or contact support.",
+				size: "small"
+			});
+		}
+	};
+	const displayError = validationError || error || void 0;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex justify-end w-full",
+			children: /* @__PURE__ */ jsx(ExecutionMethodTrigger, {
+				executionConfig,
+				isValid,
+				error: displayError
+			})
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-[550px] max-h-[90vh] flex flex-col",
+			children: [/* @__PURE__ */ jsxs(DialogHeader, {
+				className: "border-b pb-4 shrink-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-start justify-between",
+					children: /* @__PURE__ */ jsxs(DialogTitle, {
+						className: "flex items-center gap-2 text-xl",
+						children: ["Execution Method", displayError && /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-red-500" })]
+					})
+				}), /* @__PURE__ */ jsx(DialogDescription, {
+					className: "mt-2",
+					children: "This outlines how the transaction will be signed and submitted to the blockchain."
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "overflow-y-auto grow",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "p-6",
+						children: getExecutionContent()
+					}),
+					executionConfig.method === "relayer" && /* @__PURE__ */ jsx("div", {
+						className: "px-6 pb-4",
+						children: /* @__PURE__ */ jsx(PasswordField, {
+							id: "runtime-api-key",
+							label: "Relayer API Key",
+							name: "runtimeApiKey",
+							control,
+							placeholder: "Enter your API key",
+							validation: { required: true },
+							helperText: "This key is required to send the transaction and is not stored."
+						})
+					}),
+					displayError && /* @__PURE__ */ jsx("div", {
+						className: "px-6 pb-4",
+						children: /* @__PURE__ */ jsx(Alert, {
+							variant: "destructive",
+							className: "p-3 border border-red-300",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start",
+								children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0" }), /* @__PURE__ */ jsx(AlertDescription, {
+									className: "pl-2 text-sm",
+									children: displayError
+								})]
+							})
+						})
+					})
+				]
+			})]
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/transaction/TransactionExecuteButton.tsx
+/**
+* TransactionExecuteButton Component
+*
+* Displays a button for executing a transaction, which is disabled if the wallet is not connected,
+* the form is invalid, or a transaction is currently being submitted.
+*
+* @param props The component props
+* @returns A React component
+*/
+function TransactionExecuteButton({ isWalletConnected, isSubmitting, isFormValid, variant = "default", functionDetails, canExecuteLocally = false }) {
+	const canExecute = canExecuteLocally || functionDetails?.stateMutability === "pure";
+	return /* @__PURE__ */ jsx(LoadingButton, {
+		type: "submit",
+		disabled: !isWalletConnected && !canExecute || !isFormValid,
+		loading: isSubmitting,
+		variant,
+		size: "lg",
+		className: "w-full md:w-auto",
+		children: canExecute ? isSubmitting ? "Executing..." : "Execute Locally" : isSubmitting ? "Executing..." : "Execute Transaction"
+	});
+}
+
+//#endregion
+//#region src/utils/formUtils.ts
+/**
+* Validate a field value against validation rules
+*/
+function validateField(value, validation) {
+	if (validation?.required && (value === "" || value === null || value === void 0)) return "This field is required";
+	if (validation?.min !== void 0 && typeof value === "number" && value < validation.min) return `Value must be at least ${validation.min}`;
+	if (validation?.max !== void 0 && typeof value === "number" && value > validation.max) return `Value must be at most ${validation.max}`;
+	if (validation?.pattern !== void 0 && typeof value === "string" && new RegExp(validation.pattern).test(value) === false) return "Value does not match the required pattern";
+	return null;
+}
+/**
+* Creates a transform for address fields
+*
+* @param adapter The blockchain adapter to use for validation
+* @returns Transform functions for address fields
+*/
+function createAddressTransform(adapter) {
+	return {
+		input: (value) => {
+			if (value === null || value === void 0) return "";
+			return String(value);
+		},
+		output: (value) => {
+			const address = String(value || "");
+			if (adapter.isValidAddress?.(address)) return address;
+			return "";
+		}
+	};
+}
+/**
+* Creates a transform for number fields
+*
+* @returns Transform functions for number fields
+*/
+function createNumberTransform() {
+	return {
+		input: (value) => {
+			if (value === void 0 || value === null) return "";
+			return String(value);
+		},
+		output: (value) => {
+			const num = Number(value);
+			return isNaN(num) ? 0 : num;
+		}
+	};
+}
+/**
+* Creates a transform for bigint fields (large integers beyond JS Number precision)
+*
+* @returns Transform functions for bigint fields
+*/
+function createBigIntTransform() {
+	return {
+		input: (value) => {
+			if (value === void 0 || value === null) return "";
+			return String(value);
+		},
+		output: (value) => {
+			const str = String(value || "");
+			if (str && !/^-?\d+$/.test(str)) return "";
+			return str;
+		}
+	};
+}
+/**
+* Creates a transform for boolean fields
+*
+* @returns Transform functions for boolean fields
+*/
+function createBooleanTransform() {
+	return {
+		input: (value) => {
+			if (value === void 0 || value === null) return false;
+			if (typeof value === "string") return value.toLowerCase() === "true" || value === "1";
+			return Boolean(value);
+		},
+		output: (value) => {
+			if (typeof value === "string") return value.toLowerCase() === "true" || value === "1";
+			return Boolean(value);
+		}
+	};
+}
+/**
+* Creates a transform for complex type fields (arrays, objects, etc.)
+*
+* @returns Transform functions for complex fields
+*/
+function createComplexTypeTransform() {
+	return {
+		input: (value) => {
+			if (value === void 0 || value === null) return "";
+			if (typeof value === "string") return value;
+			try {
+				return JSON.stringify(value, null, 2);
+			} catch {
+				return "";
+			}
+		},
+		output: (value) => {
+			if (typeof value !== "string" || !value) return null;
+			try {
+				return JSON.parse(value);
+			} catch {
+				return null;
+			}
+		}
+	};
+}
+/**
+* Creates a transform for text fields
+*
+* @returns Transform functions for text-based fields
+*/
+function createTextTransform() {
+	return {
+		input: (value) => {
+			if (value === null || value === void 0) return "";
+			return String(value);
+		},
+		output: (value) => {
+			return String(value || "");
+		}
+	};
+}
+/**
+* Creates a transform function based on field type
+*
+* @param fieldType The type of field to create transforms for
+* @param adapter Optional adapter for address validation
+* @returns Transform functions for the field type
+*/
+function createTransformForFieldType(fieldType, adapter) {
+	switch (fieldType) {
+		case "blockchain-address":
+			if (!adapter) throw new Error(`createTransformForFieldType: Adapter is required for 'blockchain-address' field type but was not provided.`);
+			return createAddressTransform(adapter);
+		case "number":
+		case "amount": return createNumberTransform();
+		case "bigint": return createBigIntTransform();
+		case "checkbox": return createBooleanTransform();
+		case "text":
+		case "email":
+		case "password":
+		case "textarea": return createTextTransform();
+		case "array": return createArrayTransform();
+		case "object": return createObjectTransform();
+		case "array-object": return createArrayObjectTransform();
+		case "enum": return createComplexTypeTransform();
+		default:
+			logger.warn("formUtils", `createTransformForFieldType: No specific transform for fieldType "${fieldType}". Falling back to createComplexTypeTransform. Ensure adapter maps all expected ABI types to specific FieldTypes.`);
+			return createComplexTypeTransform();
+	}
+}
+/**
+* Generate a default value for a given field type based on parameter constraints
+*/
+function generateDefaultValue(parameterType, constraints = {}) {
+	const type = parameterType.toLowerCase();
+	if (type.includes("bool")) return false;
+	else if (type.includes("int") || type.includes("number")) return constraints.min !== void 0 ? constraints.min : 0;
+	else if (type.includes("string") || type.includes("address")) return "";
+	else if (type.includes("array") || type.includes("[]")) return [];
+	else return null;
+}
+/**
+* Returns the appropriate default value based on field type
+*/
+function getDefaultValueByFieldType(fieldType) {
+	switch (fieldType) {
+		case "checkbox": return false;
+		case "number": return "";
+		default: return "";
+	}
+}
+/**
+* Creates a complete default values object for form initialization
+* Ensures all fields have appropriate default values to avoid React controlled/uncontrolled input warnings
+*
+* @param fields The form field definitions
+* @param existingDefaults Any existing default values to preserve
+* @returns A complete form values object with no undefined values
+*/
+function createDefaultFormValues(fields, existingDefaults = {}) {
+	const defaults = { ...existingDefaults };
+	if (!fields) return defaults;
+	fields.forEach((field) => {
+		if (defaults[field.name] === void 0) defaults[field.name] = getDefaultValueByFieldType(field.type);
+	});
+	return defaults;
+}
+/**
+* Creates a transform for array fields
+*
+* @returns Transform functions for array fields
+*/
+function createArrayTransform() {
+	return {
+		input: (value) => {
+			if (!Array.isArray(value)) {
+				logger.warn("formUtils", "createArrayTransform input received non-array value:", value);
+				return "[]";
+			}
+			try {
+				return JSON.stringify(value, null, 2);
+			} catch {
+				return "[]";
+			}
+		},
+		output: (value) => {
+			if (typeof value === "string") try {
+				const parsed = JSON.parse(value);
+				return Array.isArray(parsed) ? parsed : [];
+			} catch {
+				return [];
+			}
+			return Array.isArray(value) ? value : [];
+		}
+	};
+}
+/**
+* Creates a transform for object fields
+*
+* @returns Transform functions for object fields
+*/
+function createObjectTransform() {
+	return {
+		input: (value) => {
+			if (typeof value !== "object" || value === null || Array.isArray(value)) {
+				logger.warn("formUtils", "createObjectTransform input received non-object or null value:", value);
+				return "{}";
+			}
+			try {
+				return JSON.stringify(value, null, 2);
+			} catch {
+				return "{}";
+			}
+		},
+		output: (value) => {
+			if (typeof value === "string") {
+				if (!value.trim()) return {};
+				try {
+					const parsed = JSON.parse(value);
+					if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed;
+					return {};
+				} catch {
+					return {};
+				}
+			}
+			if (value && typeof value === "object" && !Array.isArray(value)) return value;
+			return {};
+		}
+	};
+}
+/**
+* Creates a transform for array-object fields
+*
+* @returns Transform functions for array-object fields
+*/
+function createArrayObjectTransform() {
+	return {
+		input: (value) => {
+			if (!Array.isArray(value)) {
+				logger.warn("formUtils", "createArrayObjectTransform input received non-array value:", value);
+				return "[]";
+			}
+			try {
+				const validItems = value.filter((item) => item && typeof item === "object" && !Array.isArray(item));
+				return JSON.stringify(validItems, null, 2);
+			} catch {
+				return "[]";
+			}
+		},
+		output: (value) => {
+			if (typeof value === "string") {
+				if (!value.trim()) return [];
+				try {
+					const parsed = JSON.parse(value);
+					if (Array.isArray(parsed)) return parsed.filter((item) => item && typeof item === "object" && !Array.isArray(item));
+					return [];
+				} catch {
+					return [];
+				}
+			}
+			if (Array.isArray(value)) return value.filter((item) => item && typeof item === "object" && !Array.isArray(item));
+			return [];
+		}
+	};
+}
+
+//#endregion
+//#region src/utils/runtimeSecretExtractor.ts
+/**
+* Extracts runtime secrets from form submission data and field configuration.
+*
+* Handles two cases:
+* 1. User-provided runtime secret (field value in form data)
+* 2. Hardcoded readonly runtime secret (from field configuration)
+*
+* Returns both the extracted secrets and the cleaned contract arguments
+* (with runtimeSecret fields removed).
+*
+* @param data - Form submission data from React Hook Form
+* @param fields - Field configuration array from the schema
+* @returns Object containing extracted secrets and cleaned contract arguments
+*/
+function extractRuntimeSecrets(data, fields) {
+	const runtimeSecrets = {};
+	const contractArgs = { ...data };
+	logger.debug("TransactionForm", "All form data values:", data);
+	logger.debug("TransactionForm", "Schema fields:", fields.map((f) => ({
+		name: f.name,
+		type: f.type,
+		readOnly: f.readOnly
+	})));
+	fields.forEach((field) => {
+		if (field.type === "runtimeSecret" && field.adapterBinding?.key) {
+			let secretValue = data[field.name];
+			if (field.readOnly && !secretValue && "hardcodedValue" in field) {
+				secretValue = field.hardcodedValue;
+				logger.debug("TransactionForm", `Using hardcoded value for readonly runtimeSecret field: ${field.name}`, { secretValue });
+			}
+			logger.debug("TransactionForm", `Processing runtimeSecret field: ${field.name}`, {
+				secretValue,
+				readOnly: field.readOnly
+			});
+			if (secretValue) runtimeSecrets[field.adapterBinding.key] = secretValue;
+			delete contractArgs[field.name];
+		}
+	});
+	logger.debug("TransactionForm", "Extracted runtime secrets:", Object.keys(runtimeSecrets), runtimeSecrets);
+	return {
+		runtimeSecrets,
+		contractArgs
+	};
+}
+
+//#endregion
+//#region src/components/fieldRegistry.ts
+/**
+* Registry of field components mapped to their respective types.
+* All field components in this registry are designed specifically for React Hook Form integration
+* and are meant to be used within the DynamicFormField system, not as standalone components.
+*/
+const fieldComponents = {
+	text: TextField,
+	number: NumberField,
+	bigint: BigIntField,
+	"blockchain-address": AddressField,
+	checkbox: BooleanField,
+	radio: RadioField,
+	select: SelectField,
+	"select-grouped": SelectGroupedField,
+	textarea: TextAreaField,
+	bytes: BytesField,
+	"code-editor": CodeEditorField,
+	date: () => React.createElement("div", null, "Date field not implemented yet"),
+	email: () => React.createElement("div", null, "Email field not implemented yet"),
+	password: PasswordField,
+	amount: AmountField,
+	array: ArrayField,
+	object: ObjectField,
+	"array-object": ArrayObjectField,
+	map: MapField,
+	url: UrlField,
+	enum: EnumField,
+	hidden: () => null,
+	"file-upload": FileUploadField,
+	runtimeSecret: PasswordField
+};
+
+//#endregion
+//#region src/components/DynamicFormField.tsx
+/**
+* Evaluates whether a field should be rendered based on its visibility conditions
+*/
+function useShouldRenderField(field, control) {
+	const formValues = useWatch({ control });
+	if (field.isHidden) return false;
+	if (!field.visibleWhen) return true;
+	return (Array.isArray(field.visibleWhen) ? field.visibleWhen : [field.visibleWhen]).every((condition) => {
+		const dependentValue = formValues[condition.field];
+		switch (condition.operator) {
+			case "equals": return dependentValue === condition.value;
+			case "notEquals": return dependentValue !== condition.value;
+			case "contains": return String(dependentValue).includes(String(condition.value || ""));
+			case "greaterThan": return Number(dependentValue) > Number(condition.value || 0);
+			case "lessThan": return Number(dependentValue) < Number(condition.value || 0);
+			case "matches":
+				if (typeof condition.value === "string") return new RegExp(condition.value).test(String(dependentValue || ""));
+				return false;
+			default: return true;
+		}
+	});
+}
+/**
+* Dynamic Form Field Component
+*
+* Renders the appropriate field component based on the field type defined in the form schema.
+* This component is part of the app rendering system architecture where:
+* 1. Form schemas are generated from contract functions using adapters
+* 2. The schemas are rendered using the TransactionForm component
+* 3. TransactionForm uses DynamicFormField to render appropriate field components based on the schema
+*
+* The field components (TextField, NumberField, AddressField, etc.) are specifically designed
+* for React Hook Form integration and should not be used as standalone components.
+*
+* @returns The rendered form field component or null if the field should not be visible
+*/
+function DynamicFormField({ field, control, adapter, contractSchema }) {
+	const renderPayloadField = useCallback((payloadField, payloadIndex) => {
+		let enhancedPayloadField;
+		if (payloadField.originalParameterType) {
+			const generatedField = adapter.generateDefaultField({
+				name: payloadField.name || `payload_${payloadIndex}`,
+				type: payloadField.originalParameterType
+			}, contractSchema);
+			enhancedPayloadField = {
+				...generatedField,
+				...payloadField,
+				type: generatedField.type,
+				label: payloadField.label ?? generatedField.label,
+				placeholder: payloadField.placeholder ?? generatedField.placeholder,
+				helperText: payloadField.helperText ?? generatedField.helperText
+			};
+		} else enhancedPayloadField = {
+			...payloadField,
+			type: payloadField.type ?? "text"
+		};
+		return /* @__PURE__ */ jsx(DynamicFormField, {
+			field: enhancedPayloadField,
+			control,
+			adapter,
+			contractSchema
+		}, `${field.id}-payload-${payloadIndex}`);
+	}, [
+		field.id,
+		control,
+		adapter,
+		contractSchema
+	]);
+	const renderKeyField = useCallback((keyField, entryIndex) => {
+		const mappedKeyType = keyField.originalParameterType ? adapter.mapParameterTypeToFieldType(keyField.originalParameterType) : keyField.type;
+		return /* @__PURE__ */ jsx(DynamicFormField, {
+			field: {
+				...keyField,
+				type: mappedKeyType,
+				readOnly: keyField.readOnly ?? field.readOnly
+			},
+			control,
+			adapter,
+			contractSchema
+		}, `${field.id}-key-${entryIndex}`);
+	}, [
+		field.id,
+		field.readOnly,
+		control,
+		adapter,
+		contractSchema
+	]);
+	const renderValueField = useCallback((valueField, entryIndex) => {
+		const mappedValueType = valueField.originalParameterType ? adapter.mapParameterTypeToFieldType(valueField.originalParameterType) : valueField.type;
+		return /* @__PURE__ */ jsx(DynamicFormField, {
+			field: {
+				...valueField,
+				type: mappedValueType,
+				readOnly: valueField.readOnly ?? field.readOnly
+			},
+			control,
+			adapter,
+			contractSchema
+		}, `${field.id}-value-${entryIndex}`);
+	}, [
+		field.id,
+		field.readOnly,
+		control,
+		adapter,
+		contractSchema
+	]);
+	if (!useShouldRenderField(field, control)) return null;
+	const FieldComponent = fieldComponents[field.type];
+	if (!FieldComponent) {
+		logger.warn("DynamicFormField", `No component registered for field type: ${field.type}`);
+		return null;
+	}
+	const enhancedProps = {
+		...getFieldSpecificProps(field, {
+			renderPayloadField,
+			renderKeyField,
+			renderValueField
+		}, contractSchema),
+		...field.type === "array" && { renderElement: (elementField, index) => /* @__PURE__ */ jsx(DynamicFormField, {
+			field: {
+				...elementField,
+				readOnly: elementField.readOnly ?? field.readOnly
+			},
+			control,
+			adapter,
+			contractSchema
+		}, `${field.id}-element-${index}`) },
+		...field.type === "object" && { renderProperty: (propertyField, propertyName) => /* @__PURE__ */ jsx(DynamicFormField, {
+			field: {
+				...propertyField,
+				readOnly: propertyField.readOnly ?? field.readOnly
+			},
+			control,
+			adapter,
+			contractSchema
+		}, `${field.id}-property-${propertyName}`) },
+		...field.type === "array-object" && { renderProperty: (propertyField, itemIndex, propertyName) => /* @__PURE__ */ jsx(DynamicFormField, {
+			field: {
+				...propertyField,
+				readOnly: propertyField.readOnly ?? field.readOnly
+			},
+			control,
+			adapter,
+			contractSchema
+		}, `${field.id}-item-${itemIndex}-property-${propertyName}`) }
+	};
+	return /* @__PURE__ */ jsx(FieldComponent, {
+		id: field.id,
+		label: field.label,
+		placeholder: field.placeholder,
+		helperText: field.helperText,
+		width: field.width,
+		validation: field.validation,
+		control,
+		name: field.name,
+		adapter,
+		readOnly: field.readOnly,
+		contractSchema,
+		...enhancedProps
+	});
+}
+/**
+* Extract field-specific props based on field type
+*/
+function getFieldSpecificProps(field, renderFunctions, contractSchema) {
+	switch (field.type) {
+		case "number": return {
+			min: field.validation?.min,
+			max: field.validation?.max,
+			step: field.options?.find((opt) => opt.label === "step")?.value
+		};
+		case "array": return {
+			elementType: field.elementType || "text",
+			minItems: field.validation?.min,
+			maxItems: field.validation?.max,
+			elementFieldConfig: field.elementFieldConfig
+		};
+		case "object": return {
+			components: field.components || [],
+			showCard: true,
+			contractSchema
+		};
+		case "array-object": return {
+			components: field.components || [],
+			minItems: field.validation?.min,
+			maxItems: field.validation?.max,
+			collapsible: true,
+			defaultCollapsed: false
+		};
+		case "blockchain-address": return {};
+		case "checkbox": return {};
+		case "code-editor": return {
+			language: field.codeEditorProps?.language || "json",
+			theme: field.codeEditorProps?.theme || "light",
+			height: field.codeEditorProps?.height || "200px",
+			maxHeight: field.codeEditorProps?.maxHeight || "400px",
+			performanceThreshold: field.codeEditorProps?.performanceThreshold || 5e3
+		};
+		case "enum": return {
+			enumMetadata: field.enumMetadata,
+			renderPayloadField: renderFunctions.renderPayloadField
+		};
+		case "select": return {
+			options: field.options || [],
+			defaultValue: field.defaultValue || void 0
+		};
+		case "radio": return { options: field.options || [] };
+		case "map": return {
+			mapMetadata: field.mapMetadata,
+			minItems: field.validation?.min,
+			renderKeyField: renderFunctions.renderKeyField,
+			renderValueField: renderFunctions.renderValueField
+		};
+		default: return {};
+	}
+}
+
+//#endregion
+//#region src/components/transaction/TransactionHashDisplay.tsx
+/**
+* Renders a transaction hash with proper formatting and optional explorer link.
+* This component ensures transaction hashes are displayed in a consistent way
+* with proper word-breaking for long strings.
+*/
+function TransactionHashDisplay({ txHash, explorerUrl }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-sm mt-2 relative",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground text-xs mb-1",
+				children: "Transaction:"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ jsx("code", {
+					className: "font-mono text-xs bg-gray-100 px-2 py-1.5 rounded break-all inline-block",
+					children: txHash
+				})
+			}),
+			explorerUrl && /* @__PURE__ */ jsx("div", {
+				className: "relative z-10 pointer-events-auto",
+				children: /* @__PURE__ */ jsxs("a", {
+					href: explorerUrl,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "inline-flex items-center text-xs text-primary hover:text-primary/80 hover:underline py-1 px-2 cursor-pointer",
+					onClick: () => {
+						logger.info("TransactionHashDisplay", "Explorer link clicked", explorerUrl);
+					},
+					children: [/* @__PURE__ */ jsx(ExternalLink, {
+						size: 12,
+						className: "mr-1 flex-shrink-0"
+					}), /* @__PURE__ */ jsx("span", { children: "View on explorer" })]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/transaction/TransactionStatusDisplay.tsx
+/**
+* Helper function to format error messages that contain transaction hashes
+* This adds proper word breaking for transaction hashes while maintaining readability
+*/
+function formatErrorWithHash(errorMsg) {
+	if (!errorMsg) return "An unknown error occurred.";
+	const hashRegex = /(0x[a-fA-F0-9]{40,})/g;
+	if (!hashRegex.test(errorMsg)) return /* @__PURE__ */ jsx("span", {
+		className: "break-word",
+		children: errorMsg
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "break-word",
+		children: errorMsg.split(hashRegex).map((part, i) => {
+			if (part.match(/^0x[a-fA-F0-9]{40,}$/)) return /* @__PURE__ */ jsx("code", {
+				className: "font-mono px-1 py-0.5 bg-gray-100 rounded text-xs break-all",
+				children: part
+			}, i);
+			return part;
+		})
+	});
+}
+/** Displays the current status of a transaction with appropriate icons and messages. */
+function TransactionStatusDisplay({ status, txHash, error, explorerUrl, className, customTitle, customMessage, result, functionDetails, adapter }) {
+	if (status === "idle") return null;
+	let variant = "default";
+	let defaultTitle = "";
+	let defaultMessage = null;
+	let icon = null;
+	if (status === "pendingSignature") {
+		defaultTitle = "Pending Signature";
+		icon = /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin text-primary" });
+		defaultMessage = "Please check your wallet to sign. After signing, your transaction will be submitted and confirmed automatically.";
+		variant = "default";
+	} else if (status === "pendingConfirmation") {
+		defaultTitle = "Processing Transaction";
+		icon = /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin text-primary" });
+		defaultMessage = "Waiting for the transaction to be confirmed on the blockchain...";
+		variant = "default";
+	} else if (status === "pendingRelayer") {
+		defaultTitle = "Waiting for Relayer";
+		icon = /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin text-primary" });
+		defaultMessage = "The transaction is pending with the relayer and will be submitted shortly.";
+		variant = "default";
+	} else if (status === "success") {
+		defaultTitle = "Transaction Successful";
+		icon = /* @__PURE__ */ jsx(CheckCircle, { className: "size-5 text-green-600" });
+		defaultMessage = "Your transaction has been confirmed.";
+		variant = "success";
+	} else if (status === "error") {
+		defaultTitle = "Transaction Failed";
+		icon = /* @__PURE__ */ jsx(AlertCircle, { className: "size-5 text-destructive" });
+		variant = "destructive";
+	}
+	const title = customTitle || defaultTitle;
+	let formattedResult = null;
+	if (result !== void 0 && result !== null && adapter && functionDetails) try {
+		formattedResult = adapter.formatFunctionResult(result, functionDetails);
+	} catch {
+		formattedResult = JSON.stringify(result, null, 2);
+	}
+	else if (result !== void 0 && result !== null) formattedResult = JSON.stringify(result, null, 2);
+	let content = null;
+	if (status === "error") content = /* @__PURE__ */ jsxs("div", { children: [error ? formatErrorWithHash(error) : customMessage ? /* @__PURE__ */ jsx("span", {
+		className: "break-word",
+		children: customMessage
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "break-word",
+		children: "An unknown error occurred."
+	}), txHash && /* @__PURE__ */ jsx(TransactionHashDisplay, {
+		txHash,
+		explorerUrl: explorerUrl || null
+	})] });
+	else {
+		const messageText = customMessage || defaultMessage || "";
+		content = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [
+				messageText && /* @__PURE__ */ jsx("p", { children: messageText }),
+				txHash && /* @__PURE__ */ jsx(TransactionHashDisplay, {
+					txHash,
+					explorerUrl: explorerUrl || null
+				}),
+				formattedResult && /* @__PURE__ */ jsxs("div", {
+					className: "mt-3 pt-3 border-t border-border",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium mb-2",
+						children: "Result:"
+					}), /* @__PURE__ */ jsx("pre", {
+						className: "text-xs bg-muted p-3 rounded-md overflow-auto max-h-48",
+						children: formattedResult
+					})]
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(Alert, {
+		variant,
+		className: cn("relative py-4 px-5 overflow-hidden", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "shrink-0 mr-3 mt-0.5",
+				children: icon
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ jsx(AlertTitle, {
+					className: "mb-1 text-base font-medium",
+					children: title
+				}), /* @__PURE__ */ jsx(AlertDescription, {
+					className: "text-sm overflow-hidden",
+					children: content
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/TransactionForm.tsx
+/**
+* Transaction states that should disable the form (pending operations)
+*/
+const PENDING_STATES = [
+	"pendingSignature",
+	"pendingConfirmation",
+	"pendingRelayer"
+];
+/**
+* Transaction Form Component
+*
+* This is the main entry point for the app rendering system. It represents the top level of
+* the app rendering architecture:
+*
+* 1. TransactionForm receives a schema and adapter from the transaction builder app
+* 2. It sets up React Hook Form for state management and validation
+* 3. It renders fields dynamically using the DynamicFormField component
+* 4. Provides wallet connection UI (demo implementation)
+* 5. On submission, it processes data through the adapter before passing to handlers
+*
+* Note: The previewMode prop is currently used only for demo purposes and does not affect
+* the visibility of wallet connection or transaction execution UI. In the future, it will be used
+* to enable/disable actual blockchain interactions without changing the UI structure.
+*
+* @returns The rendered form component
+*/
+function TransactionForm({ schema, contractSchema, adapter, isWalletConnected = false, executionConfig }) {
+	const [formError, setFormError] = useState(null);
+	const [executionConfigError, setExecutionConfigError] = useState(null);
+	const [runtimeApiKey, setRuntimeApiKey] = useState("");
+	const [txStatus, setTxStatus] = useState("idle");
+	const [txHash, setTxHash] = useState(null);
+	const [txError, setTxError] = useState(null);
+	const [txStatusDetails, setTxStatusDetails] = useState(null);
+	const [txResult, setTxResult] = useState(null);
+	const networkConfig = adapter.networkConfig;
+	const methods = useForm({
+		mode: schema.validation?.mode || "onChange",
+		defaultValues: createDefaultFormValues(schema.fields, schema.defaultValues)
+	});
+	const { isValid } = methods.formState;
+	const currentFunction = contractSchema?.functions.find((fn) => fn.id === schema.functionId);
+	const canExecuteLocally = currentFunction?.stateMutability === "pure";
+	useEffect(() => {
+		methods.reset(createDefaultFormValues(schema.fields, schema.defaultValues));
+		setTxStatus("idle");
+		setTxHash(null);
+		setTxError(null);
+		setFormError(null);
+		setExecutionConfigError(null);
+		setTxStatusDetails(null);
+		setTxResult(null);
+	}, [schema, methods]);
+	useEffect(() => {
+		const validateExecConfig = async () => {
+			if (executionConfig && adapter && adapter.validateExecutionConfig) try {
+				logger.info("TransactionForm", "Re-validating execution config:", executionConfig);
+				const validationResult = await adapter.validateExecutionConfig(executionConfig);
+				if (typeof validationResult === "string") setExecutionConfigError(`Execution Configuration Error: ${validationResult}`);
+				else setExecutionConfigError(null);
+			} catch (error) {
+				logger.error("TransactionForm", "Error reactive exec config validation:", error);
+				setExecutionConfigError(`Exec Config Validation Failed: ${error instanceof Error ? error.message : "Unknown error"}`);
+			}
+			else setExecutionConfigError(null);
+		};
+		validateExecConfig();
+	}, [
+		executionConfig,
+		adapter,
+		isWalletConnected
+	]);
+	const executeTransaction = async (data) => {
+		logger.info("TransactionForm", "Internal form submission attempt", data);
+		setTxStatus("idle");
+		setTxHash(null);
+		setTxError(null);
+		setTxStatusDetails(null);
+		setTxResult(null);
+		if (!adapter) {
+			logger.error("TransactionForm", "Adapter not provided.");
+			setTxError("Configuration error: Adapter not available.");
+			setTxStatus("error");
+			return;
+		}
+		if (!canExecuteLocally && !isWalletConnected) {
+			logger.warn("TransactionForm", "Wallet not connected for submission.");
+			setTxError("Please connect your wallet to submit the transaction.");
+			setTxStatus("error");
+			return;
+		}
+		try {
+			const { contractArgs, runtimeSecrets } = extractRuntimeSecrets(data, schema.fields);
+			const formattedData = adapter.formatTransactionData(contractSchema, schema.functionId, contractArgs, schema.fields);
+			logger.info("TransactionForm", "Formatted transaction data:", formattedData);
+			const onStatusChange = (status, details) => {
+				logger.info("TransactionForm", `Status Update: ${status}`, details);
+				setTxStatus(status);
+				setTxStatusDetails(details);
+				if (details.transactionId) setTxHash(details.transactionId);
+				if (details.txHash) setTxHash(details.txHash);
+			};
+			const firstSecretValue = Object.values(runtimeSecrets)[0];
+			const { txHash: finalTxHash, result } = await adapter.signAndBroadcast(formattedData, executionConfig || {
+				method: "eoa",
+				allowAny: true
+			}, onStatusChange, runtimeApiKey, firstSecretValue);
+			logger.info("TransactionForm", `Transaction submitted with final hash: ${finalTxHash}`);
+			setTxHash(finalTxHash);
+			if (result !== void 0) {
+				setTxResult(result);
+				logger.info("TransactionForm", "Execution result received:", result);
+			}
+			if (canExecuteLocally) {
+				setTxStatus("success");
+				setTxError(null);
+				return;
+			}
+			if (adapter.waitForTransactionConfirmation) {
+				setTxStatus("pendingConfirmation");
+				logger.info("TransactionForm", `Waiting for confirmation for tx: ${finalTxHash}`);
+				const confirmationResult = await adapter.waitForTransactionConfirmation(finalTxHash);
+				if (confirmationResult.status === "success") {
+					logger.info("TransactionForm", `Transaction confirmed: ${finalTxHash}`, confirmationResult.receipt);
+					setTxStatus("success");
+					setTxError(null);
+				} else {
+					logger.error("TransactionForm", `Transaction failed confirmation: ${finalTxHash}`, confirmationResult.error);
+					setTxError(confirmationResult.error?.message ?? "Transaction failed during confirmation.");
+					setTxStatus("error");
+				}
+			} else {
+				logger.warn("TransactionForm", "Adapter does not support waitForTransactionConfirmation. Marking as success after submission.");
+				setTxStatus("success");
+				setTxError(null);
+			}
+		} catch (error) {
+			logger.error("TransactionForm", "Transaction error during submission process:", error);
+			setTxError(error instanceof Error ? error.message : "An unknown error occurred.");
+			setTxStatus("error");
+		}
+	};
+	const renderFormContent = () => {
+		if (!schema.fields || schema.fields.length === 0) return /* @__PURE__ */ jsx("div", {
+			className: "form-empty-state",
+			children: "No fields defined in schema"
+		});
+		const { errors } = methods.formState;
+		return /* @__PURE__ */ jsx("div", {
+			className: "form-fields-container space-y-4",
+			children: schema.fields.map((field) => /* @__PURE__ */ jsx(DynamicFormField, {
+				field,
+				control: methods.control,
+				error: errors[field.name]?.message,
+				adapter,
+				contractSchema
+			}, field.id))
+		});
+	};
+	const getLayoutClasses = () => {
+		return "grid grid-cols-1 gap-4";
+	};
+	const getButtonVariant = () => {
+		const { submitButton } = schema;
+		if (!submitButton?.variant) return "default";
+		switch (submitButton.variant) {
+			case "primary": return "default";
+			case "secondary": return "secondary";
+			case "outline": return "outline";
+			default: return "default";
+		}
+	};
+	const getExplorerTxUrl = (hash) => {
+		if (!adapter || !hash || !networkConfig) return null;
+		if (adapter.getExplorerTxUrl) return adapter.getExplorerTxUrl(hash);
+		logger.warn("TransactionForm", "getExplorerTxUrl not implemented by adapter, trying getExplorerUrl as fallback (might expect address).");
+		return adapter.getExplorerUrl ? adapter.getExplorerUrl(hash) : null;
+	};
+	return /* @__PURE__ */ jsxs(FormProvider, {
+		...methods,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: schema.title && /* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-bold",
+					children: schema.title
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "description-container mb-6",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground rounded-md border border-gray-100 bg-gray-50 p-3 text-sm",
+					children: schema.description || "No description provided."
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col space-y-4",
+				children: [
+					formError && /* @__PURE__ */ jsx("div", {
+						className: "form-error rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700",
+						children: formError
+					}),
+					txStatus !== "idle" && /* @__PURE__ */ jsx("div", {
+						className: "mb-8 pointer-events-auto",
+						children: /* @__PURE__ */ jsx(TransactionStatusDisplay, {
+							status: txStatus,
+							txHash,
+							error: txError,
+							explorerUrl: txHash ? getExplorerTxUrl(txHash) : null,
+							customTitle: txStatusDetails?.title,
+							customMessage: txStatusDetails?.message,
+							result: txResult,
+							functionDetails: currentFunction,
+							adapter
+						})
+					}),
+					/* @__PURE__ */ jsxs("form", {
+						className: `transaction-form flex flex-col ${getLayoutClasses()} ${PENDING_STATES.includes(txStatus) ? "opacity-70 pointer-events-none" : ""}`,
+						noValidate: true,
+						onSubmit: methods.handleSubmit(executeTransaction),
+						children: [
+							executionConfigError && /* @__PURE__ */ jsxs("div", {
+								className: "form-error rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700",
+								children: [/* @__PURE__ */ jsx(AlertCircle, { className: "mr-2 h-4 w-4" }), executionConfigError]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "mb-6",
+								children: renderFormContent()
+							}),
+							executionConfig && /* @__PURE__ */ jsx("div", {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(ExecutionConfigDisplay, {
+									executionConfig,
+									adapter,
+									error: executionConfigError,
+									onRuntimeApiKeyChange: setRuntimeApiKey
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "mt-4 border-t border-gray-100 pt-4",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex justify-end items-center gap-2",
+									children: /* @__PURE__ */ jsx(TransactionExecuteButton, {
+										isWalletConnected,
+										isSubmitting: txStatus === "pendingSignature" || txStatus === "pendingConfirmation",
+										isFormValid: isValid && executionConfigError === null,
+										variant: getButtonVariant(),
+										functionDetails: currentFunction,
+										canExecuteLocally
+									})
+								})
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/ContractStateWidget/components/FunctionResult.tsx
+/**
+* Component for displaying formatted function results (strings)
+*/
+function FunctionResult({ functionDetails, result, loading }) {
+	const formattedResult = result ?? "";
+	const hasResult = typeof result === "string";
+	const isError = hasResult && (result.startsWith("Error:") || result.startsWith("[Error:"));
+	const headerRef = useRef(null);
+	const [fontSize, setFontSize] = useState("xs");
+	const hasScaledDownRef = useRef(false);
+	const lastContentRef = useRef("");
+	const outputs = useMemo(() => functionDetails.outputs || [], [functionDetails.outputs]);
+	const currentContent = `${functionDetails.name}-${outputs.map((o) => o.type).join(",")}`;
+	useEffect(() => {
+		if (lastContentRef.current !== currentContent) {
+			lastContentRef.current = currentContent;
+			hasScaledDownRef.current = false;
+			setFontSize("xs");
+			return;
+		}
+		const checkOverflow = () => {
+			if (!headerRef.current) return;
+			const container = headerRef.current;
+			if (container.scrollWidth > container.clientWidth && fontSize === "xs" && !hasScaledDownRef.current) {
+				hasScaledDownRef.current = true;
+				setFontSize("2xs");
+			}
+		};
+		const timeoutId = setTimeout(checkOverflow, 10);
+		return () => {
+			clearTimeout(timeoutId);
+		};
+	}, [
+		functionDetails.name,
+		outputs,
+		fontSize,
+		currentContent
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border rounded-sm p-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: headerRef,
+			className: cn("font-medium mb-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 leading-tight overflow-hidden", fontSize === "xs" ? "text-xs" : "text-[10px]"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex-shrink-0 min-w-0 break-all",
+				children: functionDetails.name
+			}), outputs.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground flex-shrink-0 whitespace-nowrap",
+				children: `→ ${outputs.map((o) => o.type).join(", ")}`
+			})]
+		}), loading ? /* @__PURE__ */ jsx("div", {
+			className: "text-xs text-muted-foreground italic animate-pulse",
+			children: "Loading..."
+		}) : hasResult ? /* @__PURE__ */ jsx("pre", {
+			className: cn("text-xs p-1 max-h-24 bg-muted overflow-auto rounded whitespace-pre-wrap break-all", "animate-fade-in", isError && "text-destructive"),
+			children: formattedResult
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "text-xs text-muted-foreground italic",
+			children: "Click Refresh to fetch result"
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/ContractStateWidget/components/ViewFunctionsPanel.tsx
+/**
+* Panel for displaying and querying simple view functions (functions without parameters)
+*/
+function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchema, className }) {
+	const safeFunctions = adapter.filterAutoQueryableFunctions ? adapter.filterAutoQueryableFunctions(functions) : functions;
+	const [results, setResults] = useState({});
+	const [loadingStates, setLoadingStates] = useState({});
+	const [hasQueried, setHasQueried] = useState(false);
+	const [isQueryInProgress, setIsQueryInProgress] = useState(false);
+	const handleQueryAll = useCallback(async () => {
+		if (safeFunctions.length === 0) return;
+		if (isQueryInProgress) {
+			logger.info("ViewFunctionsPanel", "Query already in progress, skipping...");
+			return;
+		}
+		setIsQueryInProgress(true);
+		const initialLoadingStates = {};
+		safeFunctions.forEach((func) => {
+			initialLoadingStates[func.id] = true;
+		});
+		setLoadingStates(initialLoadingStates);
+		try {
+			await rateLimitedBatch(safeFunctions.map((func) => async () => {
+				try {
+					const result = await adapter.queryViewFunction(contractAddress, func.id, [], contractSchema);
+					let formattedResult;
+					try {
+						formattedResult = adapter.formatFunctionResult(result, func);
+					} catch (formatError) {
+						logger.error("ViewFunctionsPanel", `Error formatting result for ${func.name}:`, formatError);
+						formattedResult = `Error formatting result: ${formatError instanceof Error ? formatError.message : "Unknown error"}`;
+					}
+					setResults((prev) => ({
+						...prev,
+						[func.id]: formattedResult
+					}));
+					setLoadingStates((prev) => ({
+						...prev,
+						[func.id]: false
+					}));
+					return {
+						funcId: func.id,
+						success: true
+					};
+				} catch (err) {
+					logger.error("ViewFunctionsPanel", `Error calling ${func.name}:`, err);
+					const errorMessage = `Error: ${err instanceof Error ? err.message : "Unknown error"}`;
+					setResults((prev) => ({
+						...prev,
+						[func.id]: errorMessage
+					}));
+					setLoadingStates((prev) => ({
+						...prev,
+						[func.id]: false
+					}));
+					return {
+						funcId: func.id,
+						success: false
+					};
+				}
+			}), 1, 200);
+		} catch (err) {
+			logger.error("ViewFunctionsPanel", "Error querying functions:", err);
+			setLoadingStates({});
+		} finally {
+			setHasQueried(true);
+			setIsQueryInProgress(false);
+		}
+	}, [
+		safeFunctions,
+		contractAddress,
+		adapter,
+		contractSchema,
+		isQueryInProgress
+	]);
+	useEffect(() => {
+		let mounted = true;
+		let timeoutId = null;
+		const performInitialQuery = async () => {
+			if (safeFunctions.length > 0 && mounted && !hasQueried && !isQueryInProgress) timeoutId = setTimeout(() => {
+				if (mounted) handleQueryAll();
+			}, 100);
+		};
+		performInitialQuery();
+		return () => {
+			mounted = false;
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	}, [
+		safeFunctions.length,
+		hasQueried,
+		isQueryInProgress,
+		handleQueryAll
+	]);
+	useEffect(() => {
+		const networkId = adapter.networkConfig?.id;
+		if (!networkId) return;
+		return userRpcConfigService.subscribe(networkId, (event) => {
+			logger.info("ViewFunctionsPanel", "RPC configuration changed:", event);
+			handleQueryAll();
+		});
+	}, [adapter.networkConfig?.id, handleQueryAll]);
+	if (safeFunctions.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-xs text-muted-foreground",
+		children: "No simple view functions found in this contract."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("h4", {
+				className: "text-xs font-medium",
+				children: "View Functions"
+			}), /* @__PURE__ */ jsxs(Button, {
+				onClick: () => {
+					setHasQueried(false);
+					handleQueryAll();
+				},
+				disabled: isQueryInProgress,
+				size: "sm",
+				variant: "outline",
+				className: "h-6 w-6 p-0 rounded-full",
+				title: "Refresh all view functions",
+				children: [/* @__PURE__ */ jsx(RefreshCw, {
+					size: 14,
+					className: `${isQueryInProgress ? "animate-spin" : ""}`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: isQueryInProgress ? "Querying..." : "Refresh All"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-2 overflow-y-auto pr-1 flex-grow min-h-0",
+			children: safeFunctions.map((func) => /* @__PURE__ */ jsx(FunctionResult, {
+				functionDetails: func,
+				result: results[func.id],
+				loading: loadingStates[func.id] || false
+			}, func.id))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/ContractStateWidget/ContractStateWidget.tsx
+/**
+* ContractStateWidget - Compact widget for displaying contract state
+* Shows contract state by allowing users to query simple view functions (no parameters)
+*/
+function ContractStateWidget({ contractSchema, contractAddress, adapter, isVisible = true, onToggle, className, error }) {
+	const [viewFunctions, setViewFunctions] = useState([]);
+	const [animationState, setAnimationState] = useState(isVisible ? "entered" : "exited");
+	const networkConfig = adapter?.networkConfig;
+	const [lastSchema, setLastSchema] = useState(contractSchema ?? null);
+	useEffect(() => {
+		if (contractSchema) setLastSchema(contractSchema);
+	}, [contractSchema]);
+	const effectiveSchema = useMemo(() => contractSchema ?? lastSchema, [contractSchema, lastSchema]);
+	useEffect(() => {
+		if (!effectiveSchema || !adapter) return;
+		setViewFunctions(effectiveSchema.functions.filter((fn) => adapter.isViewFunction(fn)).filter((fn) => fn.inputs.length === 0));
+	}, [effectiveSchema, adapter]);
+	useEffect(() => {
+		if (isVisible) {
+			setAnimationState("entering");
+			const timer = setTimeout(() => {
+				setAnimationState("entered");
+			}, 300);
+			return () => clearTimeout(timer);
+		} else {
+			setAnimationState("exiting");
+			const timer = setTimeout(() => {
+				setAnimationState("exited");
+			}, 500);
+			return () => clearTimeout(timer);
+		}
+	}, [isVisible]);
+	const handleToggle = () => {
+		if (onToggle) onToggle();
+	};
+	if (!contractAddress || !adapter || !networkConfig) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [(animationState === "entering" || animationState === "entered" || animationState === "exiting") && /* @__PURE__ */ jsx("div", {
+		className: cn("fixed inset-0 z-[9998] md:hidden bg-background/60 backdrop-blur-sm transition-opacity duration-500 ease-in-out", animationState === "entering" || animationState === "entered" ? "opacity-100" : "opacity-0"),
+		"aria-hidden": "true",
+		onClick: onToggle ? handleToggle : void 0
+	}), /* @__PURE__ */ jsxs(Card, {
+		className: cn("overflow-hidden p-0 gap-0 flex flex-col transition-transform duration-500 ease-in-out will-change-transform transform-gpu", animationState === "entering" || animationState === "entered" ? "translate-y-0" : "translate-y-[120%]", animationState === "entering" || animationState === "entered" ? "md:scale-100 md:opacity-100" : "md:scale-95 md:opacity-0", "fixed bottom-4 inset-x-4 z-[9999] max-h-[50vh] shadow-xl bg-background backdrop-blur-md rounded-lg border border-border", "md:relative md:inset-auto md:bottom-auto md:shadow-none md:bg-card md:backdrop-blur-none md:z-auto md:mb-2 md:max-h-160", (animationState === "exiting" || animationState === "exited") && "pointer-events-none", animationState === "exited" && "md:hidden", className),
+		"aria-hidden": animationState === "exited",
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "pb-2 pt-2 px-3 flex-shrink-0 flex flex-row items-center justify-between",
+			children: [/* @__PURE__ */ jsx(CardTitle, {
+				className: "text-sm font-medium",
+				children: "Contract State"
+			}), onToggle && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "h-7 w-7 p-0",
+				onClick: handleToggle,
+				title: "Minimize Contract State",
+				children: [/* @__PURE__ */ jsx(Minimize2, { size: 14 }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Minimize Contract State"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(CardContent, {
+			className: "space-y-3 px-3 py-2 flex-grow overflow-y-auto flex flex-col min-h-0",
+			children: error ? /* @__PURE__ */ jsxs("div", {
+				className: "text-sm text-red-500 bg-red-50 border border-red-200 rounded-md p-3 flex flex-col items-center justify-center h-full",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-center",
+					children: "Error loading contract state"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-center",
+					children: error.message
+				})]
+			}) : !effectiveSchema && !lastSchema || !adapter ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center h-full space-y-3 py-6",
+				children: [/* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 text-primary animate-spin opacity-70" }), /* @__PURE__ */ jsxs("div", {
+					className: "text-center space-y-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium text-muted-foreground",
+						children: "Loading contract info..."
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: "Retrieving contract data and available functions"
+					})]
+				})]
+			}) : viewFunctions.length > 0 && effectiveSchema ? /* @__PURE__ */ jsx(ViewFunctionsPanel, {
+				functions: viewFunctions,
+				contractAddress,
+				adapter,
+				contractSchema: effectiveSchema,
+				className: "flex-grow flex flex-col min-h-0"
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center h-full py-4 text-center",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "rounded-full bg-muted p-3 mb-3",
+						children: /* @__PURE__ */ jsx(FileText, { className: "h-6 w-6 text-muted-foreground" })
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium",
+						children: "No simple view functions found"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground mt-1 mb-4 max-w-[220px]",
+						children: "This contract doesn't have any simple view functions that can be queried without parameters"
+					})
+				]
+			})
+		})]
+	})] });
+}
+
+//#endregion
+//#region src/components/ContractActionBar/ContractActionBar.tsx
+/**
+* ContractActionBar - A composable action bar for contract forms
+* Displays network information and contract state toggle button
+* Can be extended with additional actions via children
+*/
+function ContractActionBar({ networkConfig, contractAddress = null, onToggleContractState, isWidgetExpanded = false, children, className = "" }) {
+	if (!networkConfig) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `bg-background border-b mb-6 pb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 sm:flex-row sm:items-center",
+			children: [/* @__PURE__ */ jsx(NetworkStatusBadge, { network: networkConfig }), contractAddress && onToggleContractState && !isWidgetExpanded && /* @__PURE__ */ jsx(ViewContractStateButton, {
+				contractAddress,
+				onToggle: onToggleContractState
+			})]
+		}), children && /* @__PURE__ */ jsx("div", {
+			className: "flex gap-2 sm:ml-auto",
+			children
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/network/NetworkServiceSettingsPanel.tsx
+/** Panel for configuring network service settings like RPC endpoints. */
+function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsChanged }) {
+	const [isTesting, setIsTesting] = useState(false);
+	const [result, setResult] = useState(null);
+	const { control, handleSubmit, setValue, getValues, watch, formState: { isDirty } } = useForm({ defaultValues: {} });
+	const fields = useMemo(() => service.fields, [service]);
+	const primaryFields = useMemo(() => fields.filter((f) => !f.metadata?.section), [fields]);
+	const sectionGroups = useMemo(() => {
+		const groups = {};
+		for (const f of fields) {
+			const md = f.metadata || {};
+			const section = typeof md.section === "string" ? md.section : void 0;
+			if (!section) continue;
+			if (!groups[section]) groups[section] = {
+				label: typeof md.sectionLabel === "string" ? md.sectionLabel : void 0,
+				help: typeof md.sectionHelp === "string" ? md.sectionHelp : void 0,
+				fields: []
+			};
+			if (!groups[section].label && typeof md.sectionLabel === "string") groups[section].label = md.sectionLabel;
+			if (!groups[section].help && typeof md.sectionHelp === "string") groups[section].help = md.sectionHelp;
+			groups[section].fields.push(f);
+		}
+		return groups;
+	}, [fields]);
+	useEffect(() => {
+		try {
+			const existing = userNetworkServiceConfigService.get(networkId, service.id);
+			if (existing && typeof existing === "object") for (const f of fields) {
+				const v = existing[f.name];
+				if (v !== void 0) setValue(f.name, v);
+			}
+			for (const f of fields) {
+				const current = getValues()[f.name];
+				if (!(current !== void 0 && current !== null && current !== "") && "defaultValue" in f && f.defaultValue !== void 0) setValue(f.name, f.defaultValue);
+			}
+		} catch (e) {
+			logger.error("NetworkServiceSettingsPanel", "Error loading config", e);
+		}
+	}, [
+		networkId,
+		service.id,
+		fields,
+		setValue,
+		getValues
+	]);
+	const testConnection = useCallback(async () => {
+		if (!adapter.testNetworkServiceConnection) return;
+		setIsTesting(true);
+		setResult(null);
+		try {
+			const data = getValues();
+			const r = await adapter.testNetworkServiceConnection(service.id, data);
+			setResult({
+				success: r.success,
+				message: r.error || (r.success ? "Connection successful" : "Connection failed"),
+				latencyMs: r.latency
+			});
+		} catch (e) {
+			setResult({
+				success: false,
+				message: e instanceof Error ? e.message : "Connection test failed"
+			});
+		} finally {
+			setIsTesting(false);
+		}
+	}, [
+		adapter,
+		service.id,
+		getValues
+	]);
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: handleSubmit(useCallback(async (formData) => {
+			const data = formData;
+			if (adapter.validateNetworkServiceConfig) {
+				if (!await adapter.validateNetworkServiceConfig(service.id, data)) {
+					setResult({
+						success: false,
+						message: "Invalid configuration"
+					});
+					return;
+				}
+			}
+			if (Object.values(data).some((v) => v !== void 0 && v !== null && v !== "")) userNetworkServiceConfigService.save(networkId, service.id, data);
+			else userNetworkServiceConfigService.clear(networkId, service.id);
+			onSettingsChanged?.();
+			setResult({
+				success: true,
+				message: "Settings saved successfully"
+			});
+		}, [
+			adapter,
+			networkId,
+			service.id,
+			onSettingsChanged
+		])),
+		className: "space-y-6",
+		children: [
+			service.description && /* @__PURE__ */ jsxs(Alert, { children: [
+				/* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+				/* @__PURE__ */ jsx(AlertTitle, {
+					className: "text-sm",
+					children: service.label
+				}),
+				/* @__PURE__ */ jsx(AlertDescription, {
+					className: "space-y-1 text-xs",
+					children: /* @__PURE__ */ jsx("p", {
+						className: "mt-2",
+						children: service.description
+					})
+				})
+			] }),
+			fields.filter((f) => f.metadata?.note).length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: fields.filter((f) => f.metadata?.note).map((f) => {
+					const note = f.metadata?.note;
+					return /* @__PURE__ */ jsxs(Alert, { children: [
+						/* @__PURE__ */ jsx(note?.variant === "warning" ? AlertTriangle : Info, { className: "h-4 w-4" }),
+						note?.title && /* @__PURE__ */ jsx(AlertTitle, {
+							className: "text-sm",
+							children: note.title
+						}),
+						note?.lines && note.lines.length > 0 && /* @__PURE__ */ jsx(AlertDescription, {
+							className: "space-y-1 text-xs",
+							children: note.lines.map((ln, idx) => note.html ? /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: sanitizeHtml(ln) } }, idx) : /* @__PURE__ */ jsx("p", { children: ln }, idx))
+						})
+					] }, f.id);
+				})
+			}),
+			primaryFields.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: primaryFields.map((field) => /* @__PURE__ */ jsx(DynamicFormField, {
+					field,
+					control,
+					adapter
+				}, field.id))
+			}),
+			Object.keys(sectionGroups).length > 0 && /* @__PURE__ */ jsx(Accordion, {
+				type: "single",
+				collapsible: true,
+				className: "w-full",
+				children: /* @__PURE__ */ jsxs(AccordionItem, {
+					value: "advanced-settings",
+					className: "border rounded-md",
+					children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+						className: "text-sm font-medium px-3 py-2 hover:no-underline",
+						children: "Advanced Settings"
+					}), /* @__PURE__ */ jsx(AccordionContent, {
+						className: "px-3 pb-4",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "space-y-6 pt-2",
+							children: Object.entries(sectionGroups).map(([sectionId, group]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-3",
+								children: [/* @__PURE__ */ jsx("h4", {
+									className: "text-sm font-medium text-foreground",
+									children: group.label || sectionId.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+								}), group.help && /* @__PURE__ */ jsx("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: group.help
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "space-y-4",
+								children: group.fields.map((field) => {
+									const md = field.metadata || {};
+									const indentUnder = typeof md["nestUnder"] === "string" ? md["nestUnder"] : void 0;
+									const disabledWhen = md["disabledWhen"];
+									let isDisabled = false;
+									if (disabledWhen && typeof disabledWhen.field === "string") {
+										const depVal = watch(disabledWhen.field);
+										if ("equals" in disabledWhen) isDisabled = depVal === disabledWhen.equals;
+										else if ("notEquals" in disabledWhen) isDisabled = depVal !== disabledWhen.notEquals;
+									}
+									const wrappedField = {
+										...field,
+										readOnly: isDisabled
+									};
+									return /* @__PURE__ */ jsx("div", {
+										className: indentUnder ? "ml-6" : "",
+										children: /* @__PURE__ */ jsx(DynamicFormField, {
+											field: wrappedField,
+											control,
+											adapter
+										})
+									}, field.id);
+								})
+							})] }, sectionId))
+						})
+					})]
+				})
+			}),
+			result && /* @__PURE__ */ jsxs("div", {
+				className: `flex items-center gap-2 text-sm ${result.success ? "text-green-600" : "text-red-600"}`,
+				children: [
+					result.success ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" }),
+					/* @__PURE__ */ jsx("span", { children: result.message }),
+					result.latencyMs && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [
+							"(",
+							result.latencyMs,
+							"ms)"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: () => {
+							for (const f of fields) setValue(f.name, void 0);
+							userNetworkServiceConfigService.clear(networkId, service.id);
+							setResult(null);
+							onSettingsChanged?.();
+						},
+						children: "Reset to Default"
+					}),
+					(() => {
+						if (service.supportsConnectionTest === false) return false;
+						const hideTest = fields.some((f) => {
+							return f.metadata?.hideTestConnection === true;
+						});
+						return Boolean(adapter.testNetworkServiceConnection) && !hideTest;
+					})() ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: testConnection,
+						disabled: isTesting,
+						children: isTesting ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Testing..."] }) : "Test Connection"
+					}) : null,
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: !isDirty,
+						children: "Save Settings"
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/network/NetworkSettingsDialog.tsx
+const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, adapter }) => {
+	const services = adapter?.getNetworkServiceForms?.() ?? [];
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-2xl sm:max-w-3xl",
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Network Settings" }), /* @__PURE__ */ jsxs(DialogDescription, { children: ["Configure settings for ", networkConfig?.name] })] }), networkConfig && adapter && services.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
+				defaultValue: services[0]?.id,
+				className: "w-full",
+				children: [/* @__PURE__ */ jsx(TabsList, {
+					className: `grid w-full ${services.length <= 2 ? "grid-cols-2" : services.length === 3 ? "grid-cols-3" : "grid-cols-4"}`,
+					children: services.map((svc) => /* @__PURE__ */ jsx(TabsTrigger, {
+						value: svc.id,
+						children: svc.label
+					}, svc.id))
+				}), services.map((svc) => /* @__PURE__ */ jsx(TabsContent, {
+					value: svc.id,
+					className: "px-2",
+					children: /* @__PURE__ */ jsx(NetworkServiceSettingsPanel, {
+						adapter,
+						networkId: networkConfig.id,
+						service: svc,
+						onSettingsChanged: () => {
+							const cfg = appConfigService.getTypedNestedConfig("walletui", "config");
+							adapter.configureUiKit?.(cfg ?? {
+								kitName: "custom",
+								kitConfig: {}
+							});
+						}
+					})
+				}, svc.id))]
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center py-8",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-center text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm",
+						children: "No network configuration available"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-xs mt-1",
+						children: "This network uses default settings that cannot be customized"
+					})]
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/WalletConnectionWithSettings.tsx
+/**
+* Enhanced wallet connection header with network settings menu.
+* Used in exported apps to provide access to RPC and Explorer configuration.
+*/
+const WalletConnectionWithSettings = () => {
+	const { isAdapterLoading, activeAdapter, activeNetworkConfig } = useWalletState();
+	const { setOpenNetworkSettingsHandler } = useNetworkErrors();
+	const [showNetworkSettings, setShowNetworkSettings] = useState(false);
+	const openNetworkSettings = useCallback((networkId) => {
+		if (activeNetworkConfig && networkId === activeNetworkConfig.id) setShowNetworkSettings(true);
+	}, [activeNetworkConfig]);
+	useEffect(() => {
+		setOpenNetworkSettingsHandler(openNetworkSettings);
+	}, [openNetworkSettings, setOpenNetworkSettingsHandler]);
+	if (isAdapterLoading) return /* @__PURE__ */ jsx("div", { className: "h-9 w-28 animate-pulse rounded bg-muted" });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx(WalletConnectionUI, {}), activeAdapter && activeNetworkConfig && /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-9 w-9",
+			title: "Network Settings",
+			onClick: () => setShowNetworkSettings(true),
+			children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
+		})]
+	}), /* @__PURE__ */ jsx(NetworkSettingsDialog, {
+		isOpen: showNetworkSettings,
+		onOpenChange: setShowNetworkSettings,
+		networkConfig: activeNetworkConfig,
+		adapter: activeAdapter
+	})] });
+};
+
+//#endregion
+export { ContractActionBar, ContractStateWidget, DynamicFormField, ExecutionConfigDisplay, NetworkSettingsDialog, TransactionExecuteButton, TransactionForm, WalletConnectionWithSettings, createAddressTransform, createArrayObjectTransform, createArrayTransform, createBigIntTransform, createBooleanTransform, createComplexTypeTransform, createDefaultFormValues, createNumberTransform, createObjectTransform, createTextTransform, createTransformForFieldType, generateDefaultValue, getDefaultValueByFieldType, validateField };
+//# sourceMappingURL=index.js.map