@openzeppelin/ui-renderer 1.2.0 → 2.0.0

package/dist/index.cjs

@@ -206,8 +206,8 @@ const ExecutionConfigCard = ({ config }) => {
 //#region src/components/ExecutionConfigDisplay/components/RelayerConfigDetails.tsx
 const RelayerConfigDetails = ({ config, enhancedDetails, loading = false }) => {
 	const { relayer } = config;
-	const { activeAdapter } = (0, _openzeppelin_ui_react.useWalletState)();
-	const labels = activeAdapter?.getUiLabels?.();
+	const { activeRuntime } = (0, _openzeppelin_ui_react.useWalletState)();
+	const labels = activeRuntime?.uiLabels.getUiLabels();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
 		children: [
@@ -244,18 +244,18 @@ const RelayerConfigDetails = ({ config, enhancedDetails, loading = false }) => {
 
 //#endregion
 //#region src/components/ExecutionConfigDisplay/hooks/useExecutionValidation.ts
-const useExecutionValidation = ({ executionConfig, adapter, runtimeApiKey }) => {
+const useExecutionValidation = ({ executionConfig, execution, runtimeApiKey }) => {
 	const [validationResult, setValidationResult] = (0, react.useState)({ isValid: true });
 	const validateConfig = (0, react.useCallback)(async () => {
-		if (!adapter) {
+		if (!execution) {
 			setValidationResult({
 				isValid: false,
-				error: "No adapter available for validation"
+				error: "No execution capability available for validation"
 			});
 			return;
 		}
 		try {
-			const result = await adapter.validateExecutionConfig(executionConfig);
+			const result = await execution.validateExecutionConfig(executionConfig);
 			if (result === true) {
 				let runtimeError;
 				if (executionConfig.method === "relayer" && (!runtimeApiKey || runtimeApiKey.trim() === "")) runtimeError = "Relayer API key is required for transaction execution";
@@ -274,8 +274,8 @@ const useExecutionValidation = ({ executionConfig, adapter, runtimeApiKey }) =>
 			});
 		}
 	}, [
+		execution,
 		executionConfig,
-		adapter,
 		runtimeApiKey
 	]);
 	(0, react.useEffect)(() => {
@@ -286,7 +286,7 @@ const useExecutionValidation = ({ executionConfig, adapter, runtimeApiKey }) =>
 
 //#endregion
 //#region src/components/ExecutionConfigDisplay/ExecutionConfigDisplay.tsx
-const ExecutionConfigDisplay = ({ executionConfig, adapter, error, onRuntimeApiKeyChange }) => {
+const ExecutionConfigDisplay = ({ executionConfig, execution, relayer, error, onRuntimeApiKeyChange }) => {
 	const { control, watch } = (0, react_hook_form.useForm)({ defaultValues: { runtimeApiKey: "" } });
 	const runtimeApiKey = watch("runtimeApiKey");
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
@@ -294,17 +294,17 @@ const ExecutionConfigDisplay = ({ executionConfig, adapter, error, onRuntimeApiK
 	const [relayerDetailsLoading, setRelayerDetailsLoading] = (0, react.useState)(false);
 	const { isValid, error: validationError } = useExecutionValidation({
 		executionConfig,
-		adapter,
+		execution,
 		runtimeApiKey
 	});
 	(0, react.useEffect)(() => {
 		onRuntimeApiKeyChange?.(runtimeApiKey);
 	}, [runtimeApiKey, onRuntimeApiKeyChange]);
 	(0, react.useEffect)(() => {
-		if (isOpen && executionConfig.method === "relayer" && runtimeApiKey && adapter?.getRelayer) {
+		if (isOpen && executionConfig.method === "relayer" && runtimeApiKey && relayer?.getRelayer) {
 			const relayerConfig = executionConfig;
 			setRelayerDetailsLoading(true);
-			adapter.getRelayer(relayerConfig.serviceUrl, runtimeApiKey, relayerConfig.relayer.relayerId).then((details) => {
+			relayer.getRelayer(relayerConfig.serviceUrl, runtimeApiKey, relayerConfig.relayer.relayerId).then((details) => {
 				setEnhancedRelayerDetails(details);
 			}).catch((err) => {
 				_openzeppelin_ui_utils.logger.error("ExecutionConfigDisplay", "Failed to fetch enhanced relayer details:", err);
@@ -314,10 +314,10 @@ const ExecutionConfigDisplay = ({ executionConfig, adapter, error, onRuntimeApiK
 			});
 		}
 	}, [
-		isOpen,
 		executionConfig,
-		runtimeApiKey,
-		adapter
+		isOpen,
+		relayer,
+		runtimeApiKey
 	]);
 	const getExecutionContent = () => {
 		switch (executionConfig.method) {
@@ -438,10 +438,10 @@ function validateField(value, validation) {
 /**
 * Creates a transform for address fields
 *
-* @param adapter The blockchain adapter to use for validation
+* @param addressing The addressing capability to use for validation
 * @returns Transform functions for address fields
 */
-function createAddressTransform(adapter) {
+function createAddressTransform(addressing) {
 	return {
 		input: (value) => {
 			if (value === null || value === void 0) return "";
@@ -449,7 +449,7 @@ function createAddressTransform(adapter) {
 		},
 		output: (value) => {
 			const address = String(value || "");
-			if (adapter.isValidAddress?.(address)) return address;
+			if (addressing.isValidAddress(address)) return address;
 			return "";
 		}
 	};
@@ -553,14 +553,14 @@ function createTextTransform() {
 * 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
+* @param addressing Optional addressing capability for address validation
 * @returns Transform functions for the field type
 */
-function createTransformForFieldType(fieldType, adapter) {
+function createTransformForFieldType(fieldType, addressing) {
 	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);
+			if (!addressing) throw new Error(`createTransformForFieldType: Addressing capability is required for 'blockchain-address' field type but was not provided.`);
+			return createAddressTransform(addressing);
 		case "number":
 		case "amount": return createNumberTransform();
 		case "bigint": return createBigIntTransform();
@@ -871,11 +871,15 @@ function useShouldRenderField(field, control) {
 *
 * @returns The rendered form field component or null if the field should not be visible
 */
-function DynamicFormField({ field, control, adapter, contractSchema }) {
+function DynamicFormField({ field, control, addressing, typeMapping, contractSchema }) {
+	const requireTypeMapping = (0, react.useCallback)((fieldName, fieldType) => {
+		if (!typeMapping) throw new Error(`DynamicFormField: Missing typeMapping capability for field "${fieldName}" (${fieldType}).`);
+		return typeMapping;
+	}, [typeMapping]);
 	const renderPayloadField = (0, react.useCallback)((payloadField, payloadIndex) => {
 		let enhancedPayloadField;
 		if (payloadField.originalParameterType) {
-			const generatedField = adapter.generateDefaultField({
+			const generatedField = requireTypeMapping(payloadField.name, payloadField.type).generateDefaultField({
 				name: payloadField.name || `payload_${payloadIndex}`,
 				type: payloadField.originalParameterType
 			}, contractSchema);
@@ -894,17 +898,20 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
 			field: enhancedPayloadField,
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-payload-${payloadIndex}`);
 	}, [
 		field.id,
 		control,
-		adapter,
-		contractSchema
+		contractSchema,
+		addressing,
+		requireTypeMapping,
+		typeMapping
 	]);
 	const renderKeyField = (0, react.useCallback)((keyField, entryIndex) => {
-		const mappedKeyType = keyField.originalParameterType ? adapter.mapParameterTypeToFieldType(keyField.originalParameterType) : keyField.type;
+		const mappedKeyType = keyField.originalParameterType ? requireTypeMapping(keyField.name, keyField.type).mapParameterTypeToFieldType(keyField.originalParameterType) : keyField.type;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
 			field: {
 				...keyField,
@@ -912,18 +919,21 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 				readOnly: keyField.readOnly ?? field.readOnly
 			},
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-key-${entryIndex}`);
 	}, [
 		field.id,
 		field.readOnly,
 		control,
-		adapter,
-		contractSchema
+		contractSchema,
+		addressing,
+		requireTypeMapping,
+		typeMapping
 	]);
 	const renderValueField = (0, react.useCallback)((valueField, entryIndex) => {
-		const mappedValueType = valueField.originalParameterType ? adapter.mapParameterTypeToFieldType(valueField.originalParameterType) : valueField.type;
+		const mappedValueType = valueField.originalParameterType ? requireTypeMapping(valueField.name, valueField.type).mapParameterTypeToFieldType(valueField.originalParameterType) : valueField.type;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
 			field: {
 				...valueField,
@@ -931,15 +941,18 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 				readOnly: valueField.readOnly ?? field.readOnly
 			},
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-value-${entryIndex}`);
 	}, [
 		field.id,
 		field.readOnly,
 		control,
-		adapter,
-		contractSchema
+		contractSchema,
+		addressing,
+		requireTypeMapping,
+		typeMapping
 	]);
 	if (!useShouldRenderField(field, control)) return null;
 	const FieldComponent = fieldComponents[field.type];
@@ -959,7 +972,8 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 				readOnly: elementField.readOnly ?? field.readOnly
 			},
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-element-${index}`) },
 		...field.type === "object" && { renderProperty: (propertyField, propertyName) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
@@ -968,7 +982,8 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 				readOnly: propertyField.readOnly ?? field.readOnly
 			},
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-property-${propertyName}`) },
 		...field.type === "array-object" && { renderProperty: (propertyField, itemIndex, propertyName) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
@@ -977,7 +992,8 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 				readOnly: propertyField.readOnly ?? field.readOnly
 			},
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-item-${itemIndex}-property-${propertyName}`) }
 	};
@@ -990,7 +1006,8 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 		validation: field.validation,
 		control,
 		name: field.name,
-		adapter,
+		addressing,
+		typeMapping,
 		readOnly: field.readOnly,
 		contractSchema,
 		...enhancedProps
@@ -1123,7 +1140,7 @@ function formatErrorWithHash(errorMsg) {
 	});
 }
 /** Displays the current status of a transaction with appropriate icons and messages. */
-function TransactionStatusDisplay({ status, txHash, error, explorerUrl, className, customTitle, customMessage, result, functionDetails, adapter }) {
+function TransactionStatusDisplay({ status, txHash, error, explorerUrl, className, customTitle, customMessage, result, functionDetails, query, explorer }) {
 	if (status === "idle") return null;
 	let variant = "default";
 	let defaultTitle = "";
@@ -1156,12 +1173,14 @@ function TransactionStatusDisplay({ status, txHash, error, explorerUrl, classNam
 	}
 	const title = customTitle || defaultTitle;
 	let formattedResult = null;
-	if (result !== void 0 && result !== null && adapter && functionDetails) try {
-		formattedResult = adapter.formatFunctionResult(result, functionDetails);
+	if (result !== void 0 && result !== null && query && functionDetails) try {
+		const nextFormattedResult = query.formatFunctionResult(result, functionDetails);
+		formattedResult = typeof nextFormattedResult === "string" ? nextFormattedResult : JSON.stringify(nextFormattedResult, null, 2);
 	} catch {
 		formattedResult = JSON.stringify(result, null, 2);
 	}
 	else if (result !== void 0 && result !== null) formattedResult = JSON.stringify(result, null, 2);
+	const resolvedExplorerUrl = explorerUrl ?? (txHash ? explorer?.getExplorerTxUrl?.(txHash) ?? explorer?.getExplorerUrl(txHash) ?? null : null);
 	let content = null;
 	if (status === "error") content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [error ? formatErrorWithHash(error) : customMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "break-word",
@@ -1171,7 +1190,7 @@ function TransactionStatusDisplay({ status, txHash, error, explorerUrl, classNam
 		children: "An unknown error occurred."
 	}), txHash && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransactionHashDisplay, {
 		txHash,
-		explorerUrl: explorerUrl || null
+		explorerUrl: resolvedExplorerUrl
 	})] });
 	else {
 		const messageText = customMessage || defaultMessage || "";
@@ -1181,7 +1200,7 @@ function TransactionStatusDisplay({ status, txHash, error, explorerUrl, classNam
 				messageText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: messageText }),
 				txHash && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransactionHashDisplay, {
 					txHash,
-					explorerUrl: explorerUrl || null
+					explorerUrl: resolvedExplorerUrl
 				}),
 				formattedResult && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mt-3 pt-3 border-t border-border",
@@ -1386,7 +1405,8 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 				field,
 				control: methods.control,
 				error: errors[field.name]?.message,
-				adapter,
+				addressing: adapter,
+				typeMapping: adapter,
 				contractSchema
 			}, field.id))
 		});
@@ -1445,7 +1465,8 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 							customMessage: txStatusDetails?.message,
 							result: txResult,
 							functionDetails: currentFunction,
-							adapter
+							query: adapter,
+							explorer: adapter
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
@@ -1465,7 +1486,8 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 								className: "w-full",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExecutionConfigDisplay, {
 									executionConfig,
-									adapter,
+									execution: adapter,
+									relayer: adapter,
 									error: executionConfigError,
 									onRuntimeApiKeyChange: setRuntimeApiKey
 								})
@@ -1495,22 +1517,22 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 //#endregion
 //#region src/components/AddressBookWidget/AddAliasDialog.tsx
 /** Dialog for creating a new address alias entry. */
-function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter: defaultAdapter, resolveAdapter, addressPlaceholder: defaultPlaceholder, resolveAddressPlaceholder, resolveNetwork, networks }) {
+function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, addressing: defaultAddressing, resolveAddressing, addressPlaceholder: defaultPlaceholder, resolveAddressPlaceholder, resolveNetwork, networks }) {
 	const [saving, setSaving] = (0, react.useState)(false);
 	const initialNetwork = (0, react.useMemo)(() => currentNetworkId && resolveNetwork ? resolveNetwork(currentNetworkId) : void 0, [currentNetworkId, resolveNetwork]);
 	const [selectedNetwork, setSelectedNetwork] = (0, react.useState)(initialNetwork ?? null);
-	const [activeAdapter, setActiveAdapter] = (0, react.useState)(defaultAdapter);
+	const [activeAddressing, setActiveAddressing] = (0, react.useState)(defaultAddressing);
 	const [activePlaceholder, setActivePlaceholder] = (0, react.useState)(defaultPlaceholder);
 	(0, react.useEffect)(() => {
 		if (open) {
 			setSelectedNetwork(initialNetwork ?? null);
-			setActiveAdapter(defaultAdapter);
+			setActiveAddressing(defaultAddressing);
 			setActivePlaceholder(defaultPlaceholder);
 		}
 	}, [
 		open,
 		initialNetwork,
-		defaultAdapter,
+		defaultAddressing,
 		defaultPlaceholder
 	]);
 	const { control, handleSubmit, reset, trigger, formState } = (0, react_hook_form.useForm)({
@@ -1523,12 +1545,12 @@ function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter:
 	const handleNetworkChange = (0, react.useCallback)(async (network) => {
 		setSelectedNetwork(network);
 		if (resolveAddressPlaceholder) setActivePlaceholder(resolveAddressPlaceholder(network));
-		if (resolveAdapter) {
-			setActiveAdapter(await resolveAdapter(network));
+		if (resolveAddressing) {
+			setActiveAddressing(await resolveAddressing(network));
 			trigger("address");
 		}
 	}, [
-		resolveAdapter,
+		resolveAddressing,
 		resolveAddressPlaceholder,
 		trigger
 	]);
@@ -1557,12 +1579,12 @@ function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter:
 		if (!nextOpen) {
 			reset();
 			setSelectedNetwork(initialNetwork ?? null);
-			setActiveAdapter(defaultAdapter);
+			setActiveAddressing(defaultAddressing);
 			setActivePlaceholder(defaultPlaceholder);
 		}
 		onOpenChange(nextOpen);
 	}, [
-		defaultAdapter,
+		defaultAddressing,
 		defaultPlaceholder,
 		initialNetwork,
 		onOpenChange,
@@ -1606,7 +1628,7 @@ function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter:
 							placeholder: activePlaceholder,
 							control,
 							validation: { required: true },
-							adapter: activeAdapter
+							addressing: activeAddressing
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.TextField, {
 							id: "new-alias-name",
@@ -1811,7 +1833,7 @@ function ImportExportBar({ onExport, onImport, exportDisabled }) {
 //#endregion
 //#region src/components/AddressBookWidget/AddressBookWidget.tsx
 /** Widget for managing a personal address book with aliases, search, and network filtering. */
-function AddressBookWidget({ aliases, isLoading, onSave, onRemove, onClear, onExport, onImport, currentNetworkId, resolveNetwork, resolveExplorerUrl, adapter, resolveAdapter, addressPlaceholder, resolveAddressPlaceholder, networks, filterNetworkIds, onFilterNetworkIdsChange, title = "Address Book", className }) {
+function AddressBookWidget({ aliases, isLoading, onSave, onRemove, onClear, onExport, onImport, currentNetworkId, resolveNetwork, resolveExplorerUrl, addressing, resolveAddressing, addressPlaceholder, resolveAddressPlaceholder, networks, filterNetworkIds, onFilterNetworkIdsChange, title = "Address Book", className }) {
 	const [search, setSearch] = (0, react.useState)("");
 	const [addDialogOpen, setAddDialogOpen] = (0, react.useState)(false);
 	const [confirmClear, setConfirmClear] = (0, react.useState)(false);
@@ -1884,8 +1906,8 @@ function AddressBookWidget({ aliases, isLoading, onSave, onRemove, onClear, onEx
 				onOpenChange: setAddDialogOpen,
 				onSave,
 				currentNetworkId,
-				adapter,
-				resolveAdapter,
+				addressing,
+				resolveAddressing,
 				addressPlaceholder,
 				resolveAddressPlaceholder,
 				resolveNetwork,
@@ -2253,8 +2275,8 @@ function FunctionResult({ functionDetails, result, loading }) {
 /**
 * 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;
+function ViewFunctionsPanel({ functions, contractAddress, query, schema, contractSchema, className }) {
+	const safeFunctions = schema.filterAutoQueryableFunctions ? schema.filterAutoQueryableFunctions(functions) : functions;
 	const [results, setResults] = (0, react.useState)({});
 	const [loadingStates, setLoadingStates] = (0, react.useState)({});
 	const [hasQueried, setHasQueried] = (0, react.useState)(false);
@@ -2274,10 +2296,11 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 		try {
 			await (0, _openzeppelin_ui_utils.rateLimitedBatch)(safeFunctions.map((func) => async () => {
 				try {
-					const result = await adapter.queryViewFunction(contractAddress, func.id, [], contractSchema);
+					const result = await query.queryViewFunction(contractAddress, func.id, [], contractSchema);
 					let formattedResult;
 					try {
-						formattedResult = adapter.formatFunctionResult(result, func);
+						const nextResult = query.formatFunctionResult(result, func);
+						formattedResult = typeof nextResult === "string" ? nextResult : JSON.stringify(nextResult, null, 2);
 					} catch (formatError) {
 						_openzeppelin_ui_utils.logger.error("ViewFunctionsPanel", `Error formatting result for ${func.name}:`, formatError);
 						formattedResult = `Error formatting result: ${formatError instanceof Error ? formatError.message : "Unknown error"}`;
@@ -2319,11 +2342,11 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 			setIsQueryInProgress(false);
 		}
 	}, [
-		safeFunctions,
 		contractAddress,
-		adapter,
 		contractSchema,
-		isQueryInProgress
+		isQueryInProgress,
+		query,
+		safeFunctions
 	]);
 	(0, react.useEffect)(() => {
 		let mounted = true;
@@ -2345,13 +2368,13 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 		handleQueryAll
 	]);
 	(0, react.useEffect)(() => {
-		const networkId = adapter.networkConfig?.id;
+		const networkId = query.networkConfig?.id;
 		if (!networkId) return;
 		return _openzeppelin_ui_utils.userRpcConfigService.subscribe(networkId, (event) => {
 			_openzeppelin_ui_utils.logger.info("ViewFunctionsPanel", "RPC configuration changed:", event);
 			handleQueryAll();
 		});
-	}, [adapter.networkConfig?.id, handleQueryAll]);
+	}, [handleQueryAll, query.networkConfig?.id]);
 	if (safeFunctions.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-xs text-muted-foreground",
 		children: "No simple view functions found in this contract."
@@ -2398,19 +2421,19 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 * 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 }) {
+function ContractStateWidget({ contractSchema, contractAddress, query, schema, isVisible = true, onToggle, className, error }) {
 	const [viewFunctions, setViewFunctions] = (0, react.useState)([]);
 	const [animationState, setAnimationState] = (0, react.useState)(isVisible ? "entered" : "exited");
-	const networkConfig = adapter?.networkConfig;
+	const networkConfig = query?.networkConfig;
 	const [lastSchema, setLastSchema] = (0, react.useState)(contractSchema ?? null);
 	(0, react.useEffect)(() => {
 		if (contractSchema) setLastSchema(contractSchema);
 	}, [contractSchema]);
 	const effectiveSchema = (0, react.useMemo)(() => contractSchema ?? lastSchema, [contractSchema, lastSchema]);
 	(0, react.useEffect)(() => {
-		if (!effectiveSchema || !adapter) return;
-		setViewFunctions(effectiveSchema.functions.filter((fn) => adapter.isViewFunction(fn)).filter((fn) => fn.inputs.length === 0));
-	}, [effectiveSchema, adapter]);
+		if (!effectiveSchema) return;
+		setViewFunctions(effectiveSchema.functions.filter((fn) => schema.isViewFunction(fn)).filter((fn) => fn.inputs.length === 0));
+	}, [effectiveSchema, schema]);
 	(0, react.useEffect)(() => {
 		if (isVisible) {
 			setAnimationState("entering");
@@ -2429,7 +2452,7 @@ function ContractStateWidget({ contractSchema, contractAddress, adapter, isVisib
 	const handleToggle = () => {
 		if (onToggle) onToggle();
 	};
-	if (!contractAddress || !adapter || !networkConfig) return null;
+	if (!contractAddress || !networkConfig) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(animationState === "entering" || animationState === "entered" || animationState === "exiting") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, _openzeppelin_ui_utils.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",
@@ -2464,7 +2487,7 @@ function ContractStateWidget({ contractSchema, contractAddress, adapter, isVisib
 					className: "mt-1 text-xs text-center",
 					children: error.message
 				})]
-			}) : !effectiveSchema && !lastSchema || !adapter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			}) : !effectiveSchema && !lastSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col items-center justify-center h-full space-y-3 py-6",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-8 w-8 text-primary animate-spin opacity-70" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "text-center space-y-1",
@@ -2479,7 +2502,8 @@ function ContractStateWidget({ contractSchema, contractAddress, adapter, isVisib
 			}) : viewFunctions.length > 0 && effectiveSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewFunctionsPanel, {
 				functions: viewFunctions,
 				contractAddress,
-				adapter,
+				query,
+				schema,
 				contractSchema: effectiveSchema,
 				className: "flex-grow flex flex-col min-h-0"
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2530,7 +2554,7 @@ function ContractActionBar({ networkConfig, contractAddress = null, onToggleCont
 //#endregion
 //#region src/components/network/NetworkServiceSettingsPanel.tsx
 /** Panel for configuring network service settings like RPC endpoints. */
-function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsChanged }) {
+function NetworkServiceSettingsPanel({ relayer, networkId, service, onSettingsChanged }) {
 	const [isTesting, setIsTesting] = (0, react.useState)(false);
 	const [result, setResult] = (0, react.useState)(null);
 	const { control, handleSubmit, setValue, getValues, watch, formState: { isDirty } } = (0, react_hook_form.useForm)({ defaultValues: {} });
@@ -2575,12 +2599,12 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 		getValues
 	]);
 	const testConnection = (0, react.useCallback)(async () => {
-		if (!adapter.testNetworkServiceConnection) return;
+		if (!relayer.testNetworkServiceConnection) return;
 		setIsTesting(true);
 		setResult(null);
 		try {
 			const data = getValues();
-			const r = await adapter.testNetworkServiceConnection(service.id, data);
+			const r = await relayer.testNetworkServiceConnection(service.id, data);
 			setResult({
 				success: r.success,
 				message: r.error || (r.success ? "Connection successful" : "Connection failed"),
@@ -2595,15 +2619,15 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 			setIsTesting(false);
 		}
 	}, [
-		adapter,
+		relayer,
 		service.id,
 		getValues
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		onSubmit: handleSubmit((0, react.useCallback)(async (formData) => {
 			const data = formData;
-			if (adapter.validateNetworkServiceConfig) {
-				if (!await adapter.validateNetworkServiceConfig(service.id, data)) {
+			if (relayer.validateNetworkServiceConfig) {
+				if (!await relayer.validateNetworkServiceConfig(service.id, data)) {
 					setResult({
 						success: false,
 						message: "Invalid configuration"
@@ -2619,7 +2643,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 				message: "Settings saved successfully"
 			});
 		}, [
-			adapter,
+			relayer,
 			networkId,
 			service.id,
 			onSettingsChanged
@@ -2661,8 +2685,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 				className: "space-y-4",
 				children: primaryFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
 					field,
-					control,
-					adapter
+					control
 				}, field.id))
 			}),
 			Object.keys(sectionGroups).length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Accordion, {
@@ -2708,8 +2731,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 										className: indentUnder ? "ml-6" : "",
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormField, {
 											field: wrappedField,
-											control,
-											adapter
+											control
 										})
 									}, field.id);
 								})
@@ -2752,7 +2774,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 						const hideTest = fields.some((f) => {
 							return f.metadata?.hideTestConnection === true;
 						});
-						return Boolean(adapter.testNetworkServiceConnection) && !hideTest;
+						return Boolean(relayer.testNetworkServiceConnection) && !hideTest;
 					})() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
 						type: "button",
 						variant: "outline",
@@ -2773,14 +2795,14 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 
 //#endregion
 //#region src/components/network/NetworkSettingsDialog.tsx
-const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, adapter }) => {
-	const services = (0, _openzeppelin_ui_utils.filterEnabledServiceForms)(adapter?.getNetworkServiceForms?.() ?? []);
+const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, relayer, onSettingsChanged }) => {
+	const services = (0, _openzeppelin_ui_utils.filterEnabledServiceForms)(relayer?.getNetworkServiceForms() ?? []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Dialog, {
 		open: isOpen,
 		onOpenChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogContent, {
 			className: "max-w-2xl sm:max-w-3xl",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.DialogTitle, { children: "Network Settings" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogDescription, { children: ["Configure settings for ", networkConfig?.name] })] }), networkConfig && adapter && services.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Tabs, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.DialogTitle, { children: "Network Settings" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.DialogDescription, { children: ["Configure settings for ", networkConfig?.name] })] }), networkConfig && relayer && services.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_openzeppelin_ui_components.Tabs, {
 				defaultValue: services[0]?.id,
 				className: "w-full",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.TabsList, {
@@ -2793,16 +2815,10 @@ const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, adapter })
 					value: svc.id,
 					className: "px-2",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NetworkServiceSettingsPanel, {
-						adapter,
+						relayer,
 						networkId: networkConfig.id,
 						service: svc,
-						onSettingsChanged: () => {
-							const cfg = _openzeppelin_ui_utils.appConfigService.getTypedNestedConfig("walletui", "config");
-							adapter.configureUiKit?.(cfg ?? {
-								kitName: "custom",
-								kitConfig: {}
-							});
-						}
+						onSettingsChanged
 					})
 				}, svc.id))]
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2829,7 +2845,7 @@ const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, adapter })
 * Used in exported apps to provide access to RPC and Explorer configuration.
 */
 const WalletConnectionWithSettings = () => {
-	const { isAdapterLoading, activeAdapter, activeNetworkConfig } = (0, _openzeppelin_ui_react.useWalletState)();
+	const { isRuntimeLoading, activeRuntime, activeNetworkConfig, reconfigureActiveUiKit } = (0, _openzeppelin_ui_react.useWalletState)();
 	const { setOpenNetworkSettingsHandler } = (0, _openzeppelin_ui_components.useNetworkErrors)();
 	const [showNetworkSettings, setShowNetworkSettings] = (0, react.useState)(false);
 	const openNetworkSettings = (0, react.useCallback)((networkId) => {
@@ -2838,10 +2854,10 @@ const WalletConnectionWithSettings = () => {
 	(0, react.useEffect)(() => {
 		setOpenNetworkSettingsHandler(openNetworkSettings);
 	}, [openNetworkSettings, setOpenNetworkSettingsHandler]);
-	if (isAdapterLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-9 w-28 animate-pulse rounded bg-muted" });
+	if (isRuntimeLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-9 w-28 animate-pulse rounded bg-muted" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_react.WalletConnectionUI, {}), activeAdapter && activeNetworkConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_react.WalletConnectionUI, {}), activeRuntime?.relayer && activeNetworkConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_openzeppelin_ui_components.Button, {
 			variant: "ghost",
 			size: "icon",
 			className: "h-9 w-9",
@@ -2853,7 +2869,13 @@ const WalletConnectionWithSettings = () => {
 		isOpen: showNetworkSettings,
 		onOpenChange: setShowNetworkSettings,
 		networkConfig: activeNetworkConfig,
-		adapter: activeAdapter
+		relayer: activeRuntime?.relayer ?? null,
+		onSettingsChanged: () => {
+			reconfigureActiveUiKit(_openzeppelin_ui_utils.appConfigService.getTypedNestedConfig("walletui", "config") ?? {
+				kitName: "custom",
+				kitConfig: {}
+			});
+		}
 	})] });
 };