@openzeppelin/ui-renderer 1.2.0 → 2.0.0

package/dist/index.mjs

@@ -178,8 +178,8 @@ const ExecutionConfigCard = ({ config }) => {
 //#region src/components/ExecutionConfigDisplay/components/RelayerConfigDetails.tsx
 const RelayerConfigDetails = ({ config, enhancedDetails, loading = false }) => {
 	const { relayer } = config;
-	const { activeAdapter } = useWalletState();
-	const labels = activeAdapter?.getUiLabels?.();
+	const { activeRuntime } = useWalletState();
+	const labels = activeRuntime?.uiLabels.getUiLabels();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
@@ -216,18 +216,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] = useState({ isValid: true });
 	const validateConfig = 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";
@@ -246,8 +246,8 @@ const useExecutionValidation = ({ executionConfig, adapter, runtimeApiKey }) =>
 			});
 		}
 	}, [
+		execution,
 		executionConfig,
-		adapter,
 		runtimeApiKey
 	]);
 	useEffect(() => {
@@ -258,7 +258,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 } = useForm({ defaultValues: { runtimeApiKey: "" } });
 	const runtimeApiKey = watch("runtimeApiKey");
 	const [isOpen, setIsOpen] = useState(false);
@@ -266,17 +266,17 @@ const ExecutionConfigDisplay = ({ executionConfig, adapter, error, onRuntimeApiK
 	const [relayerDetailsLoading, setRelayerDetailsLoading] = useState(false);
 	const { isValid, error: validationError } = useExecutionValidation({
 		executionConfig,
-		adapter,
+		execution,
 		runtimeApiKey
 	});
 	useEffect(() => {
 		onRuntimeApiKeyChange?.(runtimeApiKey);
 	}, [runtimeApiKey, onRuntimeApiKeyChange]);
 	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) => {
 				logger.error("ExecutionConfigDisplay", "Failed to fetch enhanced relayer details:", err);
@@ -286,10 +286,10 @@ const ExecutionConfigDisplay = ({ executionConfig, adapter, error, onRuntimeApiK
 			});
 		}
 	}, [
-		isOpen,
 		executionConfig,
-		runtimeApiKey,
-		adapter
+		isOpen,
+		relayer,
+		runtimeApiKey
 	]);
 	const getExecutionContent = () => {
 		switch (executionConfig.method) {
@@ -410,10 +410,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 "";
@@ -421,7 +421,7 @@ function createAddressTransform(adapter) {
 		},
 		output: (value) => {
 			const address = String(value || "");
-			if (adapter.isValidAddress?.(address)) return address;
+			if (addressing.isValidAddress(address)) return address;
 			return "";
 		}
 	};
@@ -525,14 +525,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();
@@ -843,11 +843,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 = useCallback((fieldName, fieldType) => {
+		if (!typeMapping) throw new Error(`DynamicFormField: Missing typeMapping capability for field "${fieldName}" (${fieldType}).`);
+		return typeMapping;
+	}, [typeMapping]);
 	const renderPayloadField = 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);
@@ -866,17 +870,20 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 		return /* @__PURE__ */ jsx(DynamicFormField, {
 			field: enhancedPayloadField,
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-payload-${payloadIndex}`);
 	}, [
 		field.id,
 		control,
-		adapter,
-		contractSchema
+		contractSchema,
+		addressing,
+		requireTypeMapping,
+		typeMapping
 	]);
 	const renderKeyField = 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__ */ jsx(DynamicFormField, {
 			field: {
 				...keyField,
@@ -884,18 +891,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 = 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__ */ jsx(DynamicFormField, {
 			field: {
 				...valueField,
@@ -903,15 +913,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];
@@ -931,7 +944,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__ */ jsx(DynamicFormField, {
@@ -940,7 +954,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__ */ jsx(DynamicFormField, {
@@ -949,7 +964,8 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 				readOnly: propertyField.readOnly ?? field.readOnly
 			},
 			control,
-			adapter,
+			addressing,
+			typeMapping,
 			contractSchema
 		}, `${field.id}-item-${itemIndex}-property-${propertyName}`) }
 	};
@@ -962,7 +978,8 @@ function DynamicFormField({ field, control, adapter, contractSchema }) {
 		validation: field.validation,
 		control,
 		name: field.name,
-		adapter,
+		addressing,
+		typeMapping,
 		readOnly: field.readOnly,
 		contractSchema,
 		...enhancedProps
@@ -1095,7 +1112,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 = "";
@@ -1128,12 +1145,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__ */ jsxs("div", { children: [error ? formatErrorWithHash(error) : customMessage ? /* @__PURE__ */ jsx("span", {
 		className: "break-word",
@@ -1143,7 +1162,7 @@ function TransactionStatusDisplay({ status, txHash, error, explorerUrl, classNam
 		children: "An unknown error occurred."
 	}), txHash && /* @__PURE__ */ jsx(TransactionHashDisplay, {
 		txHash,
-		explorerUrl: explorerUrl || null
+		explorerUrl: resolvedExplorerUrl
 	})] });
 	else {
 		const messageText = customMessage || defaultMessage || "";
@@ -1153,7 +1172,7 @@ function TransactionStatusDisplay({ status, txHash, error, explorerUrl, classNam
 				messageText && /* @__PURE__ */ jsx("p", { children: messageText }),
 				txHash && /* @__PURE__ */ jsx(TransactionHashDisplay, {
 					txHash,
-					explorerUrl: explorerUrl || null
+					explorerUrl: resolvedExplorerUrl
 				}),
 				formattedResult && /* @__PURE__ */ jsxs("div", {
 					className: "mt-3 pt-3 border-t border-border",
@@ -1358,7 +1377,8 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 				field,
 				control: methods.control,
 				error: errors[field.name]?.message,
-				adapter,
+				addressing: adapter,
+				typeMapping: adapter,
 				contractSchema
 			}, field.id))
 		});
@@ -1417,7 +1437,8 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 							customMessage: txStatusDetails?.message,
 							result: txResult,
 							functionDetails: currentFunction,
-							adapter
+							query: adapter,
+							explorer: adapter
 						})
 					}),
 					/* @__PURE__ */ jsxs("form", {
@@ -1437,7 +1458,8 @@ function TransactionForm({ schema, contractSchema, adapter, isWalletConnected =
 								className: "w-full",
 								children: /* @__PURE__ */ jsx(ExecutionConfigDisplay, {
 									executionConfig,
-									adapter,
+									execution: adapter,
+									relayer: adapter,
 									error: executionConfigError,
 									onRuntimeApiKeyChange: setRuntimeApiKey
 								})
@@ -1467,22 +1489,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] = useState(false);
 	const initialNetwork = useMemo(() => currentNetworkId && resolveNetwork ? resolveNetwork(currentNetworkId) : void 0, [currentNetworkId, resolveNetwork]);
 	const [selectedNetwork, setSelectedNetwork] = useState(initialNetwork ?? null);
-	const [activeAdapter, setActiveAdapter] = useState(defaultAdapter);
+	const [activeAddressing, setActiveAddressing] = useState(defaultAddressing);
 	const [activePlaceholder, setActivePlaceholder] = useState(defaultPlaceholder);
 	useEffect(() => {
 		if (open) {
 			setSelectedNetwork(initialNetwork ?? null);
-			setActiveAdapter(defaultAdapter);
+			setActiveAddressing(defaultAddressing);
 			setActivePlaceholder(defaultPlaceholder);
 		}
 	}, [
 		open,
 		initialNetwork,
-		defaultAdapter,
+		defaultAddressing,
 		defaultPlaceholder
 	]);
 	const { control, handleSubmit, reset, trigger, formState } = useForm({
@@ -1495,12 +1517,12 @@ function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter:
 	const handleNetworkChange = 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
 	]);
@@ -1529,12 +1551,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,
@@ -1578,7 +1600,7 @@ function AddAliasDialog({ open, onOpenChange, onSave, currentNetworkId, adapter:
 							placeholder: activePlaceholder,
 							control,
 							validation: { required: true },
-							adapter: activeAdapter
+							addressing: activeAddressing
 						}),
 						/* @__PURE__ */ jsx(TextField, {
 							id: "new-alias-name",
@@ -1783,7 +1805,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] = useState("");
 	const [addDialogOpen, setAddDialogOpen] = useState(false);
 	const [confirmClear, setConfirmClear] = useState(false);
@@ -1856,8 +1878,8 @@ function AddressBookWidget({ aliases, isLoading, onSave, onRemove, onClear, onEx
 				onOpenChange: setAddDialogOpen,
 				onSave,
 				currentNetworkId,
-				adapter,
-				resolveAdapter,
+				addressing,
+				resolveAddressing,
 				addressPlaceholder,
 				resolveAddressPlaceholder,
 				resolveNetwork,
@@ -2225,8 +2247,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] = useState({});
 	const [loadingStates, setLoadingStates] = useState({});
 	const [hasQueried, setHasQueried] = useState(false);
@@ -2246,10 +2268,11 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 		try {
 			await 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) {
 						logger.error("ViewFunctionsPanel", `Error formatting result for ${func.name}:`, formatError);
 						formattedResult = `Error formatting result: ${formatError instanceof Error ? formatError.message : "Unknown error"}`;
@@ -2291,11 +2314,11 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 			setIsQueryInProgress(false);
 		}
 	}, [
-		safeFunctions,
 		contractAddress,
-		adapter,
 		contractSchema,
-		isQueryInProgress
+		isQueryInProgress,
+		query,
+		safeFunctions
 	]);
 	useEffect(() => {
 		let mounted = true;
@@ -2317,13 +2340,13 @@ function ViewFunctionsPanel({ functions, contractAddress, adapter, contractSchem
 		handleQueryAll
 	]);
 	useEffect(() => {
-		const networkId = adapter.networkConfig?.id;
+		const networkId = query.networkConfig?.id;
 		if (!networkId) return;
 		return userRpcConfigService.subscribe(networkId, (event) => {
 			logger.info("ViewFunctionsPanel", "RPC configuration changed:", event);
 			handleQueryAll();
 		});
-	}, [adapter.networkConfig?.id, handleQueryAll]);
+	}, [handleQueryAll, query.networkConfig?.id]);
 	if (safeFunctions.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "text-xs text-muted-foreground",
 		children: "No simple view functions found in this contract."
@@ -2370,19 +2393,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] = useState([]);
 	const [animationState, setAnimationState] = useState(isVisible ? "entered" : "exited");
-	const networkConfig = adapter?.networkConfig;
+	const networkConfig = query?.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]);
+		if (!effectiveSchema) return;
+		setViewFunctions(effectiveSchema.functions.filter((fn) => schema.isViewFunction(fn)).filter((fn) => fn.inputs.length === 0));
+	}, [effectiveSchema, schema]);
 	useEffect(() => {
 		if (isVisible) {
 			setAnimationState("entering");
@@ -2401,7 +2424,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__ */ 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",
@@ -2436,7 +2459,7 @@ function ContractStateWidget({ contractSchema, contractAddress, adapter, isVisib
 					className: "mt-1 text-xs text-center",
 					children: error.message
 				})]
-			}) : !effectiveSchema && !lastSchema || !adapter ? /* @__PURE__ */ jsxs("div", {
+			}) : !effectiveSchema && !lastSchema ? /* @__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",
@@ -2451,7 +2474,8 @@ function ContractStateWidget({ contractSchema, contractAddress, adapter, isVisib
 			}) : viewFunctions.length > 0 && effectiveSchema ? /* @__PURE__ */ jsx(ViewFunctionsPanel, {
 				functions: viewFunctions,
 				contractAddress,
-				adapter,
+				query,
+				schema,
 				contractSchema: effectiveSchema,
 				className: "flex-grow flex flex-col min-h-0"
 			}) : /* @__PURE__ */ jsxs("div", {
@@ -2502,7 +2526,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] = useState(false);
 	const [result, setResult] = useState(null);
 	const { control, handleSubmit, setValue, getValues, watch, formState: { isDirty } } = useForm({ defaultValues: {} });
@@ -2547,12 +2571,12 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 		getValues
 	]);
 	const testConnection = 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"),
@@ -2567,15 +2591,15 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 			setIsTesting(false);
 		}
 	}, [
-		adapter,
+		relayer,
 		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)) {
+			if (relayer.validateNetworkServiceConfig) {
+				if (!await relayer.validateNetworkServiceConfig(service.id, data)) {
 					setResult({
 						success: false,
 						message: "Invalid configuration"
@@ -2591,7 +2615,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 				message: "Settings saved successfully"
 			});
 		}, [
-			adapter,
+			relayer,
 			networkId,
 			service.id,
 			onSettingsChanged
@@ -2633,8 +2657,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 				className: "space-y-4",
 				children: primaryFields.map((field) => /* @__PURE__ */ jsx(DynamicFormField, {
 					field,
-					control,
-					adapter
+					control
 				}, field.id))
 			}),
 			Object.keys(sectionGroups).length > 0 && /* @__PURE__ */ jsx(Accordion, {
@@ -2680,8 +2703,7 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 										className: indentUnder ? "ml-6" : "",
 										children: /* @__PURE__ */ jsx(DynamicFormField, {
 											field: wrappedField,
-											control,
-											adapter
+											control
 										})
 									}, field.id);
 								})
@@ -2724,7 +2746,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__ */ jsx(Button, {
 						type: "button",
 						variant: "outline",
@@ -2745,14 +2767,14 @@ function NetworkServiceSettingsPanel({ adapter, networkId, service, onSettingsCh
 
 //#endregion
 //#region src/components/network/NetworkSettingsDialog.tsx
-const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, adapter }) => {
-	const services = filterEnabledServiceForms(adapter?.getNetworkServiceForms?.() ?? []);
+const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, relayer, onSettingsChanged }) => {
+	const services = filterEnabledServiceForms(relayer?.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, {
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Network Settings" }), /* @__PURE__ */ jsxs(DialogDescription, { children: ["Configure settings for ", networkConfig?.name] })] }), networkConfig && relayer && services.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
 				defaultValue: services[0]?.id,
 				className: "w-full",
 				children: [/* @__PURE__ */ jsx(TabsList, {
@@ -2765,16 +2787,10 @@ const NetworkSettingsDialog = ({ isOpen, onOpenChange, networkConfig, adapter })
 					value: svc.id,
 					className: "px-2",
 					children: /* @__PURE__ */ jsx(NetworkServiceSettingsPanel, {
-						adapter,
+						relayer,
 						networkId: networkConfig.id,
 						service: svc,
-						onSettingsChanged: () => {
-							const cfg = appConfigService.getTypedNestedConfig("walletui", "config");
-							adapter.configureUiKit?.(cfg ?? {
-								kitName: "custom",
-								kitConfig: {}
-							});
-						}
+						onSettingsChanged
 					})
 				}, svc.id))]
 			}) : /* @__PURE__ */ jsx("div", {
@@ -2801,7 +2817,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 } = useWalletState();
+	const { isRuntimeLoading, activeRuntime, activeNetworkConfig, reconfigureActiveUiKit } = useWalletState();
 	const { setOpenNetworkSettingsHandler } = useNetworkErrors();
 	const [showNetworkSettings, setShowNetworkSettings] = useState(false);
 	const openNetworkSettings = useCallback((networkId) => {
@@ -2810,10 +2826,10 @@ const WalletConnectionWithSettings = () => {
 	useEffect(() => {
 		setOpenNetworkSettingsHandler(openNetworkSettings);
 	}, [openNetworkSettings, setOpenNetworkSettingsHandler]);
-	if (isAdapterLoading) return /* @__PURE__ */ jsx("div", { className: "h-9 w-28 animate-pulse rounded bg-muted" });
+	if (isRuntimeLoading) 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, {
+		children: [/* @__PURE__ */ jsx(WalletConnectionUI, {}), activeRuntime?.relayer && activeNetworkConfig && /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			size: "icon",
 			className: "h-9 w-9",
@@ -2825,7 +2841,13 @@ const WalletConnectionWithSettings = () => {
 		isOpen: showNetworkSettings,
 		onOpenChange: setShowNetworkSettings,
 		networkConfig: activeNetworkConfig,
-		adapter: activeAdapter
+		relayer: activeRuntime?.relayer ?? null,
+		onSettingsChanged: () => {
+			reconfigureActiveUiKit(appConfigService.getTypedNestedConfig("walletui", "config") ?? {
+				kitName: "custom",
+				kitConfig: {}
+			});
+		}
 	})] });
 };