@openzeppelin/contracts-ui-builder-react-core
Version:
Core React context providers and hooks for the OpenZeppelin Contracts UI Builder.
632 lines (616 loc) • 28 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
AdapterContext: () => AdapterContext,
AdapterProvider: () => AdapterProvider,
WalletConnectionHeader: () => WalletConnectionHeader,
WalletConnectionUI: () => WalletConnectionUI,
WalletConnectionWithSettings: () => WalletConnectionWithSettings,
WalletStateContext: () => WalletStateContext,
WalletStateProvider: () => WalletStateProvider,
useAdapterContext: () => useAdapterContext,
useDerivedAccountStatus: () => useDerivedAccountStatus,
useDerivedChainInfo: () => useDerivedChainInfo,
useDerivedConnectStatus: () => useDerivedConnectStatus,
useDerivedDisconnect: () => useDerivedDisconnect,
useDerivedSwitchChainStatus: () => useDerivedSwitchChainStatus,
useWalletState: () => useWalletState
});
module.exports = __toCommonJS(index_exports);
// src/hooks/AdapterContext.tsx
var import_react = require("react");
var AdapterContext = (0, import_react.createContext)(null);
// src/hooks/AdapterProvider.tsx
var import_react2 = require("react");
var import_contracts_ui_builder_utils = require("@openzeppelin/contracts-ui-builder-utils");
var import_jsx_runtime = require("react/jsx-runtime");
function AdapterProvider({ children, resolveAdapter }) {
const [adapterRegistry, setAdapterRegistry] = (0, import_react2.useState)({});
const [loadingNetworks, setLoadingNetworks] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
(0, import_react2.useEffect)(() => {
const adapterCount = Object.keys(adapterRegistry).length;
if (adapterCount > 0) {
import_contracts_ui_builder_utils.logger.info("AdapterProvider", `Registry contains ${adapterCount} adapters:`, {
networkIds: Object.keys(adapterRegistry),
loadingCount: loadingNetworks.size,
loadingNetworkIds: Array.from(loadingNetworks)
});
}
}, [adapterRegistry, loadingNetworks]);
const getAdapterForNetwork = (0, import_react2.useCallback)(
(networkConfig) => {
if (!networkConfig) {
return { adapter: null, isLoading: false };
}
const networkId = networkConfig.id;
import_contracts_ui_builder_utils.logger.debug("AdapterProvider", `Adapter requested for network ${networkId}`);
if (adapterRegistry[networkId]) {
import_contracts_ui_builder_utils.logger.debug("AdapterProvider", `Using existing adapter for network ${networkId}`);
return {
adapter: adapterRegistry[networkId],
isLoading: false
};
}
if (loadingNetworks.has(networkId)) {
import_contracts_ui_builder_utils.logger.debug("AdapterProvider", `Adapter for network ${networkId} is currently loading`);
return {
adapter: null,
isLoading: true
};
}
setLoadingNetworks((prev) => {
const newSet = new Set(prev);
newSet.add(networkId);
return newSet;
});
import_contracts_ui_builder_utils.logger.info(
"AdapterProvider",
`Starting adapter initialization for network ${networkId} (${networkConfig.name})`
);
void resolveAdapter(networkConfig).then((adapter) => {
import_contracts_ui_builder_utils.logger.info("AdapterProvider", `Adapter for network ${networkId} loaded successfully`, {
type: adapter.constructor.name,
objectId: Object.prototype.toString.call(adapter)
});
setAdapterRegistry((prev) => ({
...prev,
[networkId]: adapter
}));
setLoadingNetworks((prev) => {
const newSet = new Set(prev);
newSet.delete(networkId);
return newSet;
});
}).catch((error) => {
import_contracts_ui_builder_utils.logger.error("AdapterProvider", `Error loading adapter for network ${networkId}:`, error);
setLoadingNetworks((prev) => {
const newSet = new Set(prev);
newSet.delete(networkId);
return newSet;
});
});
return {
adapter: null,
isLoading: true
};
},
[adapterRegistry, loadingNetworks, resolveAdapter]
);
const contextValue = (0, import_react2.useMemo)(
() => ({
getAdapterForNetwork
}),
[getAdapterForNetwork]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdapterContext.Provider, { value: contextValue, children });
}
// src/hooks/WalletStateContext.tsx
var import_react3 = __toESM(require("react"), 1);
var WalletStateContext = (0, import_react3.createContext)(void 0);
function useWalletState() {
const context = import_react3.default.useContext(WalletStateContext);
if (context === void 0) {
throw new Error("useWalletState must be used within a WalletStateProvider");
}
return context;
}
// src/hooks/WalletStateProvider.tsx
var import_react5 = require("react");
var import_contracts_ui_builder_utils2 = require("@openzeppelin/contracts-ui-builder-utils");
// src/hooks/useAdapterContext.ts
var import_react4 = require("react");
function useAdapterContext() {
const context = (0, import_react4.useContext)(AdapterContext);
if (!context) {
throw new Error("useAdapterContext must be used within an AdapterProvider");
}
return context;
}
// src/hooks/WalletStateProvider.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
async function configureAdapterUiKit(adapter, loadConfigModule, programmaticOverrides = {}) {
try {
if (typeof adapter.configureUiKit === "function") {
import_contracts_ui_builder_utils2.logger.info(
"[WSP configureAdapterUiKit] Calling configureUiKit for adapter:",
adapter?.networkConfig?.id
);
await adapter.configureUiKit(programmaticOverrides, {
loadUiKitNativeConfig: loadConfigModule
});
import_contracts_ui_builder_utils2.logger.info(
"[WSP configureAdapterUiKit] configureUiKit completed for adapter:",
adapter?.networkConfig?.id
);
}
const providerComponent = adapter.getEcosystemReactUiContextProvider?.() || null;
const hooks = adapter.getEcosystemReactHooks?.() || null;
import_contracts_ui_builder_utils2.logger.info("[WSP configureAdapterUiKit]", "UI provider and hooks retrieved successfully.");
return { providerComponent, hooks };
} catch (error) {
import_contracts_ui_builder_utils2.logger.error("[WSP configureAdapterUiKit]", "Error during adapter UI setup:", error);
throw error;
}
}
function WalletStateProvider({
children,
initialNetworkId = null,
getNetworkConfigById,
loadConfigModule
}) {
const [currentGlobalNetworkId, setCurrentGlobalNetworkIdState] = (0, import_react5.useState)(
initialNetworkId
);
const [currentGlobalNetworkConfig, setCurrentGlobalNetworkConfig] = (0, import_react5.useState)(null);
const [globalActiveAdapter, setGlobalActiveAdapter] = (0, import_react5.useState)(null);
const [isGlobalAdapterLoading, setIsGlobalAdapterLoading] = (0, import_react5.useState)(false);
const [walletFacadeHooks, setWalletFacadeHooks] = (0, import_react5.useState)(
null
);
const [AdapterUiContextProviderToRender, setAdapterUiContextProviderToRender] = (0, import_react5.useState)(null);
const [uiKitConfigVersion, setUiKitConfigVersion] = (0, import_react5.useState)(0);
const [programmaticUiKitConfig, setProgrammaticUiKitConfig] = (0, import_react5.useState)(void 0);
const { getAdapterForNetwork } = useAdapterContext();
(0, import_react5.useEffect)(() => {
const abortController = new AbortController();
async function fetchNetworkConfig() {
if (!currentGlobalNetworkId) {
if (!abortController.signal.aborted) {
setCurrentGlobalNetworkConfig(null);
}
return;
}
try {
const config = await Promise.resolve(getNetworkConfigById(currentGlobalNetworkId));
if (!abortController.signal.aborted) {
setCurrentGlobalNetworkConfig(config || null);
}
} catch (error) {
if (!abortController.signal.aborted) {
import_contracts_ui_builder_utils2.logger.error("[WSP fetchNetworkConfig]", "Failed to fetch network config:", error);
setCurrentGlobalNetworkConfig(null);
}
}
}
void fetchNetworkConfig();
return () => abortController.abort();
}, [currentGlobalNetworkId, getNetworkConfigById]);
(0, import_react5.useEffect)(() => {
const abortController = new AbortController();
async function loadAdapterAndConfigureUi() {
if (!currentGlobalNetworkConfig) {
if (!abortController.signal.aborted) {
setGlobalActiveAdapter(null);
setIsGlobalAdapterLoading(false);
setAdapterUiContextProviderToRender(null);
setWalletFacadeHooks(null);
}
return;
}
const { adapter: newAdapter, isLoading: newIsLoading } = getAdapterForNetwork(
currentGlobalNetworkConfig
);
if (abortController.signal.aborted) return;
setGlobalActiveAdapter(newAdapter);
setIsGlobalAdapterLoading(newIsLoading);
if (newAdapter && !newIsLoading) {
try {
const { providerComponent, hooks } = await configureAdapterUiKit(
newAdapter,
loadConfigModule,
programmaticUiKitConfig
);
if (!abortController.signal.aborted) {
setAdapterUiContextProviderToRender(() => providerComponent);
setWalletFacadeHooks(hooks);
}
} catch (error) {
if (!abortController.signal.aborted) {
import_contracts_ui_builder_utils2.logger.error(
"[WSP loadAdapterAndConfigureUi]",
"Error during adapter UI setup:",
error
);
setAdapterUiContextProviderToRender(null);
setWalletFacadeHooks(null);
}
}
} else if (!newAdapter && !newIsLoading) {
if (!abortController.signal.aborted) {
setAdapterUiContextProviderToRender(null);
setWalletFacadeHooks(null);
}
}
}
void loadAdapterAndConfigureUi();
return () => abortController.abort();
}, [
currentGlobalNetworkConfig,
getAdapterForNetwork,
loadConfigModule,
uiKitConfigVersion,
programmaticUiKitConfig
]);
const setActiveNetworkIdCallback = (0, import_react5.useCallback)((networkId) => {
import_contracts_ui_builder_utils2.logger.info("WalletStateProvider", `Setting global network ID to: ${networkId}`);
setCurrentGlobalNetworkIdState(networkId);
if (!networkId) {
setCurrentGlobalNetworkConfig(null);
setGlobalActiveAdapter(null);
setIsGlobalAdapterLoading(false);
setWalletFacadeHooks(null);
}
}, []);
const reconfigureActiveAdapterUiKit = (0, import_react5.useCallback)(
(uiKitConfig) => {
import_contracts_ui_builder_utils2.logger.info(
"WalletStateProvider",
"Explicitly triggering UI kit re-configuration by bumping version.",
uiKitConfig
);
setProgrammaticUiKitConfig(uiKitConfig);
setUiKitConfigVersion((v) => v + 1);
},
[setProgrammaticUiKitConfig, setUiKitConfigVersion]
);
const contextValue = (0, import_react5.useMemo)(
() => ({
activeNetworkId: currentGlobalNetworkId,
setActiveNetworkId: setActiveNetworkIdCallback,
activeNetworkConfig: currentGlobalNetworkConfig,
activeAdapter: globalActiveAdapter,
isAdapterLoading: isGlobalAdapterLoading,
walletFacadeHooks,
reconfigureActiveAdapterUiKit
}),
[
currentGlobalNetworkId,
setActiveNetworkIdCallback,
currentGlobalNetworkConfig,
globalActiveAdapter,
isGlobalAdapterLoading,
walletFacadeHooks,
reconfigureActiveAdapterUiKit
]
);
const ActualProviderToRender = AdapterUiContextProviderToRender;
let childrenToRender;
if (ActualProviderToRender) {
const key = globalActiveAdapter?.lastFullUiKitConfiguration?.kitName;
import_contracts_ui_builder_utils2.logger.info(
"[WSP RENDER]",
"Rendering adapter-provided UI context provider:",
ActualProviderToRender.displayName || ActualProviderToRender.name || "UnknownComponent"
);
childrenToRender = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActualProviderToRender, { children }, key);
} else {
import_contracts_ui_builder_utils2.logger.info(
"[WSP RENDER]",
"No adapter UI context provider to render. Rendering direct children."
);
childrenToRender = children;
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletStateContext.Provider, { value: contextValue, children: childrenToRender });
}
// src/hooks/useDerivedAccountStatus.ts
var import_contracts_ui_builder_utils3 = require("@openzeppelin/contracts-ui-builder-utils");
var defaultAccountStatus = {
isConnected: false,
address: void 0,
chainId: void 0
};
function useDerivedAccountStatus() {
const { walletFacadeHooks } = useWalletState();
const accountHookOutput = walletFacadeHooks?.useAccount ? walletFacadeHooks.useAccount() : void 0;
if ((0, import_contracts_ui_builder_utils3.isRecordWithProperties)(accountHookOutput)) {
const isConnected = "isConnected" in accountHookOutput && typeof accountHookOutput.isConnected === "boolean" ? accountHookOutput.isConnected : defaultAccountStatus.isConnected;
const address = "address" in accountHookOutput && typeof accountHookOutput.address === "string" ? accountHookOutput.address : defaultAccountStatus.address;
const chainId = "chainId" in accountHookOutput && typeof accountHookOutput.chainId === "number" ? accountHookOutput.chainId : defaultAccountStatus.chainId;
return { isConnected, address, chainId };
}
return defaultAccountStatus;
}
// src/hooks/useDerivedSwitchChainStatus.ts
var import_contracts_ui_builder_utils4 = require("@openzeppelin/contracts-ui-builder-utils");
var defaultSwitchChainStatus = {
switchChain: void 0,
isSwitching: false,
error: null
};
function useDerivedSwitchChainStatus() {
const { walletFacadeHooks } = useWalletState();
const switchChainHookOutput = walletFacadeHooks?.useSwitchChain ? walletFacadeHooks.useSwitchChain() : void 0;
if ((0, import_contracts_ui_builder_utils4.isRecordWithProperties)(switchChainHookOutput)) {
const execSwitchFn = "switchChain" in switchChainHookOutput && typeof switchChainHookOutput.switchChain === "function" ? switchChainHookOutput.switchChain : defaultSwitchChainStatus.switchChain;
const isPending = "isPending" in switchChainHookOutput && typeof switchChainHookOutput.isPending === "boolean" ? switchChainHookOutput.isPending : defaultSwitchChainStatus.isSwitching;
const err = "error" in switchChainHookOutput && switchChainHookOutput.error instanceof Error ? switchChainHookOutput.error : defaultSwitchChainStatus.error;
return { switchChain: execSwitchFn, isSwitching: isPending, error: err };
}
return defaultSwitchChainStatus;
}
// src/hooks/useDerivedChainInfo.ts
var import_contracts_ui_builder_utils5 = require("@openzeppelin/contracts-ui-builder-utils");
var defaultChainInfo = {
currentChainId: void 0,
availableChains: []
};
function useDerivedChainInfo() {
const { walletFacadeHooks } = useWalletState();
let chainIdToReturn = defaultChainInfo.currentChainId;
const chainIdHookOutput = walletFacadeHooks?.useChainId ? walletFacadeHooks.useChainId() : void 0;
if (typeof chainIdHookOutput === "number") {
chainIdToReturn = chainIdHookOutput;
} else if (chainIdHookOutput !== void 0) {
import_contracts_ui_builder_utils5.logger.warn(
"useDerivedChainInfo",
"useChainId facade hook returned non-numeric value:",
chainIdHookOutput
);
}
let chainsToReturn = defaultChainInfo.availableChains;
const chainsHookOutput = walletFacadeHooks?.useChains ? walletFacadeHooks.useChains() : void 0;
if (Array.isArray(chainsHookOutput)) {
chainsToReturn = chainsHookOutput;
} else if (chainsHookOutput !== void 0) {
import_contracts_ui_builder_utils5.logger.warn(
"useDerivedChainInfo",
"useChains facade hook returned non-array value:",
chainsHookOutput
);
}
return { currentChainId: chainIdToReturn, availableChains: chainsToReturn };
}
// src/hooks/useDerivedConnectStatus.ts
var import_contracts_ui_builder_utils6 = require("@openzeppelin/contracts-ui-builder-utils");
var defaultConnectStatus = {
connect: void 0,
connectors: [],
isConnecting: false,
error: null,
pendingConnector: void 0
};
function useDerivedConnectStatus() {
const { walletFacadeHooks } = useWalletState();
const connectHookOutput = walletFacadeHooks?.useConnect ? walletFacadeHooks.useConnect() : void 0;
if ((0, import_contracts_ui_builder_utils6.isRecordWithProperties)(connectHookOutput)) {
const connectFn = "connect" in connectHookOutput && typeof connectHookOutput.connect === "function" ? connectHookOutput.connect : defaultConnectStatus.connect;
const conns = "connectors" in connectHookOutput && Array.isArray(connectHookOutput.connectors) ? connectHookOutput.connectors : defaultConnectStatus.connectors;
const isPending = "isPending" in connectHookOutput && typeof connectHookOutput.isPending === "boolean" ? connectHookOutput.isPending : "isLoading" in connectHookOutput && typeof connectHookOutput.isLoading === "boolean" ? connectHookOutput.isLoading : defaultConnectStatus.isConnecting;
const err = "error" in connectHookOutput && connectHookOutput.error instanceof Error ? connectHookOutput.error : defaultConnectStatus.error;
const pendingConn = "pendingConnector" in connectHookOutput && typeof connectHookOutput.pendingConnector === "object" ? connectHookOutput.pendingConnector : defaultConnectStatus.pendingConnector;
return {
connect: connectFn,
connectors: conns,
isConnecting: isPending,
error: err,
pendingConnector: pendingConn
};
}
return defaultConnectStatus;
}
// src/hooks/useDerivedDisconnect.ts
var import_contracts_ui_builder_utils7 = require("@openzeppelin/contracts-ui-builder-utils");
var defaultDisconnectStatus = {
disconnect: void 0,
isDisconnecting: false,
error: null
};
function useDerivedDisconnect() {
const { walletFacadeHooks } = useWalletState();
const disconnectHookOutput = walletFacadeHooks?.useDisconnect ? walletFacadeHooks.useDisconnect() : void 0;
if ((0, import_contracts_ui_builder_utils7.isRecordWithProperties)(disconnectHookOutput)) {
const disconnectFn = "disconnect" in disconnectHookOutput && typeof disconnectHookOutput.disconnect === "function" ? disconnectHookOutput.disconnect : defaultDisconnectStatus.disconnect;
const isPending = "isPending" in disconnectHookOutput && typeof disconnectHookOutput.isPending === "boolean" ? disconnectHookOutput.isPending : "isLoading" in disconnectHookOutput && typeof disconnectHookOutput.isLoading === "boolean" ? disconnectHookOutput.isLoading : defaultDisconnectStatus.isDisconnecting;
const err = "error" in disconnectHookOutput && disconnectHookOutput.error instanceof Error ? disconnectHookOutput.error : defaultDisconnectStatus.error;
return { disconnect: disconnectFn, isDisconnecting: isPending, error: err };
}
return defaultDisconnectStatus;
}
// src/components/WalletConnectionHeader.tsx
var import_react7 = require("react");
var import_contracts_ui_builder_utils9 = require("@openzeppelin/contracts-ui-builder-utils");
// src/components/WalletConnectionUI.tsx
var import_react6 = require("react");
var import_contracts_ui_builder_ui = require("@openzeppelin/contracts-ui-builder-ui");
var import_contracts_ui_builder_utils8 = require("@openzeppelin/contracts-ui-builder-utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var WalletConnectionUI = ({ className }) => {
const [isError, setIsError] = (0, import_react6.useState)(false);
const { activeAdapter, walletFacadeHooks } = useWalletState();
(0, import_react6.useEffect)(() => {
const handleError = () => {
setIsError(true);
};
window.addEventListener("error", handleError);
return () => {
window.removeEventListener("error", handleError);
};
}, []);
(0, import_react6.useEffect)(() => {
import_contracts_ui_builder_utils8.logger.debug("WalletConnectionUI", "[Debug] State from useWalletState:", {
adapterId: activeAdapter?.networkConfig.id,
hasFacadeHooks: !!walletFacadeHooks
});
}, [activeAdapter, walletFacadeHooks]);
const walletComponents = (0, import_react6.useMemo)(() => {
if (!activeAdapter || typeof activeAdapter.getEcosystemWalletComponents !== "function") {
import_contracts_ui_builder_utils8.logger.debug(
"WalletConnectionUI",
"[Debug] No activeAdapter or getEcosystemWalletComponents method, returning null."
);
return null;
}
try {
const components = activeAdapter.getEcosystemWalletComponents();
import_contracts_ui_builder_utils8.logger.debug("WalletConnectionUI", "[Debug] walletComponents from adapter:", components);
return components;
} catch (error) {
import_contracts_ui_builder_utils8.logger.error("WalletConnectionUI", "[Debug] Error getting wallet components:", error);
setIsError(true);
return null;
}
}, [activeAdapter]);
if (!walletComponents) {
import_contracts_ui_builder_utils8.logger.debug(
"WalletConnectionUI",
"[Debug] getEcosystemWalletComponents returned null/undefined, rendering null."
);
return null;
}
import_contracts_ui_builder_utils8.logger.debug("WalletConnectionUI", "Rendering wallet components:", {
hasConnectButton: !!walletComponents.ConnectButton,
hasAccountDisplay: !!walletComponents.AccountDisplay,
hasNetworkSwitcher: !!walletComponents.NetworkSwitcher
});
const { ConnectButton, AccountDisplay, NetworkSwitcher } = walletComponents;
if (isError) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_contracts_ui_builder_utils8.cn)("flex items-center gap-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_contracts_ui_builder_ui.Button, { variant: "destructive", size: "sm", onClick: () => window.location.reload(), children: "Wallet Error - Retry" }) });
}
if (!walletComponents) {
import_contracts_ui_builder_utils8.logger.debug(
"WalletConnectionUI",
"[Debug] walletComponents is null before rendering, rendering null."
);
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_contracts_ui_builder_utils8.cn)("flex items-center gap-4", className), children: [
NetworkSwitcher && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NetworkSwitcher, {}),
AccountDisplay && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccountDisplay, {}),
ConnectButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectButton, {})
] });
};
// src/components/WalletConnectionHeader.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var WalletConnectionHeader = () => {
const { isAdapterLoading, activeAdapter } = useWalletState();
(0, import_react7.useEffect)(() => {
import_contracts_ui_builder_utils9.logger.debug("WalletConnectionHeader", "[Debug] State from useWalletState:", {
adapterPresent: !!activeAdapter,
adapterNetwork: activeAdapter?.networkConfig.id,
isLoading: isAdapterLoading
});
}, [activeAdapter, isAdapterLoading]);
if (isAdapterLoading) {
import_contracts_ui_builder_utils9.logger.debug("WalletConnectionHeader", "[Debug] Adapter loading, showing skeleton.");
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-9 w-28 animate-pulse rounded bg-muted" });
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WalletConnectionUI, {});
};
// src/components/WalletConnectionWithSettings.tsx
var import_lucide_react = require("lucide-react");
var import_react8 = require("react");
var import_contracts_ui_builder_ui2 = require("@openzeppelin/contracts-ui-builder-ui");
var import_jsx_runtime5 = require("react/jsx-runtime");
var WalletConnectionWithSettings = () => {
const { isAdapterLoading, activeAdapter, activeNetworkConfig } = useWalletState();
const { setOpenNetworkSettingsHandler } = (0, import_contracts_ui_builder_ui2.useNetworkErrors)();
const [showNetworkSettings, setShowNetworkSettings] = (0, import_react8.useState)(false);
const [defaultTab, setDefaultTab] = (0, import_react8.useState)("rpc");
const openNetworkSettings = (0, import_react8.useCallback)(
(networkId, tab = "rpc") => {
if (activeNetworkConfig && networkId === activeNetworkConfig.id) {
setDefaultTab(tab);
setShowNetworkSettings(true);
}
},
[activeNetworkConfig]
);
(0, import_react8.useEffect)(() => {
setOpenNetworkSettingsHandler(openNetworkSettings);
}, [openNetworkSettings, setOpenNetworkSettingsHandler]);
if (isAdapterLoading) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-9 w-28 animate-pulse rounded bg-muted" });
}
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WalletConnectionUI, {}),
activeAdapter && activeNetworkConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_contracts_ui_builder_ui2.Button,
{
variant: "ghost",
size: "icon",
className: "h-9 w-9",
title: "Network Settings",
onClick: () => setShowNetworkSettings(true),
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Settings, { className: "h-4 w-4" })
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_contracts_ui_builder_ui2.NetworkSettingsDialog,
{
isOpen: showNetworkSettings,
onOpenChange: setShowNetworkSettings,
networkConfig: activeNetworkConfig,
adapter: activeAdapter,
defaultTab
}
)
] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AdapterContext,
AdapterProvider,
WalletConnectionHeader,
WalletConnectionUI,
WalletConnectionWithSettings,
WalletStateContext,
WalletStateProvider,
useAdapterContext,
useDerivedAccountStatus,
useDerivedChainInfo,
useDerivedConnectStatus,
useDerivedDisconnect,
useDerivedSwitchChainStatus,
useWalletState
});
//# sourceMappingURL=index.cjs.map