@openzeppelin/ui-react 1.0.0 → 1.1.0

package/dist/{index-Cfc5cQFd.d.cts → index-BlmRKpng.d.cts}

@@ -1,6 +1,6 @@
 import * as react0 from "react";
 import React, { ReactNode } from "react";
-import { Connector, ContractAdapter, EcosystemSpecificReactHooks, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
+import { BaseComponentProps, Connector, ContractAdapter, EcosystemSpecificReactHooks, EcosystemWalletComponents, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/hooks/AdapterContext.d.ts
@@ -261,6 +261,53 @@ declare const useAnalytics: () => AnalyticsContextValue;
  */
 declare function useAdapterContext(): AdapterContextValue;
 //# sourceMappingURL=useAdapterContext.d.ts.map
+
+//#endregion
+//#region src/hooks/useWalletComponents.d.ts
+/**
+ * Hook that provides direct access to wallet UI components from the active adapter.
+ *
+ * Use this hook when you need full control over the layout and composition of
+ * wallet components. For standard layouts, prefer using `WalletConnectionUI`
+ * with its props forwarding capabilities.
+ *
+ * @returns The wallet components object, or null if no adapter is active or
+ *          the adapter doesn't provide wallet components.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletComponents } from '@openzeppelin/ui-react';
+ *
+ * function CustomWalletSection() {
+ *   const walletComponents = useWalletComponents();
+ *
+ *   if (!walletComponents) {
+ *     return <p>Loading wallet...</p>;
+ *   }
+ *
+ *   const { ConnectButton, NetworkSwitcher, AccountDisplay } = walletComponents;
+ *
+ *   return (
+ *     <div className="flex flex-col gap-4">
+ *       {ConnectButton && (
+ *         <ConnectButton
+ *           size="xl"
+ *           variant="outline"
+ *           fullWidth
+ *           className="font-semibold"
+ *         />
+ *       )}
+ *       <div className="flex gap-2">
+ *         {NetworkSwitcher && <NetworkSwitcher size="sm" />}
+ *         {AccountDisplay && <AccountDisplay size="sm" />}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useWalletComponents(): EcosystemWalletComponents | null;
+//# sourceMappingURL=useWalletComponents.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedAccountStatus.d.ts
 interface DerivedAccountStatus {
@@ -378,14 +425,43 @@ declare const WalletConnectionHeader: React.FC;
 //# sourceMappingURL=WalletConnectionHeader.d.ts.map
 //#endregion
 //#region src/components/WalletConnectionUI.d.ts
+/**
+ * Props for the WalletConnectionUI component.
+ */
 interface WalletConnectionUIProps {
+  /** Additional CSS classes to apply to the wrapper container */
   className?: string;
+  /** Props forwarded to the ConnectButton component */
+  connectButtonProps?: BaseComponentProps;
+  /** Props forwarded to the AccountDisplay component */
+  accountDisplayProps?: BaseComponentProps;
+  /** Props forwarded to the NetworkSwitcher component */
+  networkSwitcherProps?: BaseComponentProps;
 }
 /**
  * Component that displays wallet connection UI components
  * provided by the active adapter.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <WalletConnectionUI />
+ *
+ * // With custom styling for the connect button
+ * <WalletConnectionUI
+ *   connectButtonProps={{ size: "lg", variant: "outline", fullWidth: true }}
+ * />
+ *
+ * // Customizing all components
+ * <WalletConnectionUI
+ *   connectButtonProps={{ size: "lg" }}
+ *   accountDisplayProps={{ size: "lg" }}
+ *   networkSwitcherProps={{ size: "lg" }}
+ * />
+ * ```
  */
 declare const WalletConnectionUI: React.FC<WalletConnectionUIProps>;
+//# sourceMappingURL=WalletConnectionUI.d.ts.map
 //#endregion
 //#region src/components/NetworkSwitchManager.d.ts
 /**
@@ -417,5 +493,5 @@ declare const NetworkSwitchManager: React.FC<NetworkSwitchManagerProps>;
 //# sourceMappingURL=NetworkSwitchManager.d.ts.map
 
 //#endregion
-export { AdapterContext, type AdapterContextValue, AdapterProvider, type AdapterProviderProps, type AdapterRegistry, AnalyticsContext, type AnalyticsContextValue, AnalyticsProvider, type AnalyticsProviderProps, type DerivedAccountStatus, type DerivedChainInfo, type DerivedConnectStatus, type DerivedDisconnectStatus, type DerivedSwitchChainStatus, NetworkSwitchManager, type NetworkSwitchManagerProps, WalletConnectionHeader, WalletConnectionUI, WalletStateContext, type WalletStateContextValue, WalletStateProvider, type WalletStateProviderProps, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletReconnectionHandler, useWalletState };
-//# sourceMappingURL=index-Cfc5cQFd.d.cts.map
+export { AdapterContext, type AdapterContextValue, AdapterProvider, type AdapterProviderProps, type AdapterRegistry, AnalyticsContext, type AnalyticsContextValue, AnalyticsProvider, type AnalyticsProviderProps, type DerivedAccountStatus, type DerivedChainInfo, type DerivedConnectStatus, type DerivedDisconnectStatus, type DerivedSwitchChainStatus, NetworkSwitchManager, type NetworkSwitchManagerProps, WalletConnectionHeader, WalletConnectionUI, type WalletConnectionUIProps, WalletStateContext, type WalletStateContextValue, WalletStateProvider, type WalletStateProviderProps, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletComponents, useWalletReconnectionHandler, useWalletState };
+//# sourceMappingURL=index-BlmRKpng.d.cts.map

package/dist/index-BlmRKpng.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BlmRKpng.d.cts","names":[],"sources":["../src/hooks/AdapterContext.tsx","../src/hooks/AdapterProvider.tsx","../src/hooks/WalletStateContext.ts","../src/hooks/WalletStateProvider.tsx","../src/hooks/AnalyticsContext.tsx","../src/hooks/AnalyticsProvider.tsx","../src/hooks/useAnalytics.ts","../src/hooks/useAdapterContext.ts","../src/hooks/useWalletComponents.ts","../src/hooks/useDerivedAccountStatus.ts","../src/hooks/useDerivedSwitchChainStatus.ts","../src/hooks/useDerivedChainInfo.ts","../src/hooks/useDerivedConnectStatus.ts","../src/hooks/useDerivedDisconnect.ts","../src/hooks/useWalletReconnectionHandler.ts","../src/components/WalletConnectionHeader.tsx","../src/components/WalletConnectionUI.tsx","../src/components/NetworkSwitchManager.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/{index-B_dOGVNW.d.ts → index-Deip8V0M.d.ts}

@@ -1,7 +1,7 @@
 import * as react0 from "react";
 import React, { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { Connector, ContractAdapter, EcosystemSpecificReactHooks, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
+import { BaseComponentProps, Connector, ContractAdapter, EcosystemSpecificReactHooks, EcosystemWalletComponents, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
 
 //#region src/hooks/AdapterContext.d.ts
 /**
@@ -261,6 +261,53 @@ declare const useAnalytics: () => AnalyticsContextValue;
  */
 declare function useAdapterContext(): AdapterContextValue;
 //# sourceMappingURL=useAdapterContext.d.ts.map
+
+//#endregion
+//#region src/hooks/useWalletComponents.d.ts
+/**
+ * Hook that provides direct access to wallet UI components from the active adapter.
+ *
+ * Use this hook when you need full control over the layout and composition of
+ * wallet components. For standard layouts, prefer using `WalletConnectionUI`
+ * with its props forwarding capabilities.
+ *
+ * @returns The wallet components object, or null if no adapter is active or
+ *          the adapter doesn't provide wallet components.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletComponents } from '@openzeppelin/ui-react';
+ *
+ * function CustomWalletSection() {
+ *   const walletComponents = useWalletComponents();
+ *
+ *   if (!walletComponents) {
+ *     return <p>Loading wallet...</p>;
+ *   }
+ *
+ *   const { ConnectButton, NetworkSwitcher, AccountDisplay } = walletComponents;
+ *
+ *   return (
+ *     <div className="flex flex-col gap-4">
+ *       {ConnectButton && (
+ *         <ConnectButton
+ *           size="xl"
+ *           variant="outline"
+ *           fullWidth
+ *           className="font-semibold"
+ *         />
+ *       )}
+ *       <div className="flex gap-2">
+ *         {NetworkSwitcher && <NetworkSwitcher size="sm" />}
+ *         {AccountDisplay && <AccountDisplay size="sm" />}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useWalletComponents(): EcosystemWalletComponents | null;
+//# sourceMappingURL=useWalletComponents.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedAccountStatus.d.ts
 interface DerivedAccountStatus {
@@ -378,14 +425,43 @@ declare const WalletConnectionHeader: React.FC;
 //# sourceMappingURL=WalletConnectionHeader.d.ts.map
 //#endregion
 //#region src/components/WalletConnectionUI.d.ts
+/**
+ * Props for the WalletConnectionUI component.
+ */
 interface WalletConnectionUIProps {
+  /** Additional CSS classes to apply to the wrapper container */
   className?: string;
+  /** Props forwarded to the ConnectButton component */
+  connectButtonProps?: BaseComponentProps;
+  /** Props forwarded to the AccountDisplay component */
+  accountDisplayProps?: BaseComponentProps;
+  /** Props forwarded to the NetworkSwitcher component */
+  networkSwitcherProps?: BaseComponentProps;
 }
 /**
  * Component that displays wallet connection UI components
  * provided by the active adapter.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <WalletConnectionUI />
+ *
+ * // With custom styling for the connect button
+ * <WalletConnectionUI
+ *   connectButtonProps={{ size: "lg", variant: "outline", fullWidth: true }}
+ * />
+ *
+ * // Customizing all components
+ * <WalletConnectionUI
+ *   connectButtonProps={{ size: "lg" }}
+ *   accountDisplayProps={{ size: "lg" }}
+ *   networkSwitcherProps={{ size: "lg" }}
+ * />
+ * ```
  */
 declare const WalletConnectionUI: React.FC<WalletConnectionUIProps>;
+//# sourceMappingURL=WalletConnectionUI.d.ts.map
 //#endregion
 //#region src/components/NetworkSwitchManager.d.ts
 /**
@@ -417,5 +493,5 @@ declare const NetworkSwitchManager: React.FC<NetworkSwitchManagerProps>;
 //# sourceMappingURL=NetworkSwitchManager.d.ts.map
 
 //#endregion
-export { AdapterContext, type AdapterContextValue, AdapterProvider, type AdapterProviderProps, type AdapterRegistry, AnalyticsContext, type AnalyticsContextValue, AnalyticsProvider, type AnalyticsProviderProps, type DerivedAccountStatus, type DerivedChainInfo, type DerivedConnectStatus, type DerivedDisconnectStatus, type DerivedSwitchChainStatus, NetworkSwitchManager, type NetworkSwitchManagerProps, WalletConnectionHeader, WalletConnectionUI, WalletStateContext, type WalletStateContextValue, WalletStateProvider, type WalletStateProviderProps, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletReconnectionHandler, useWalletState };
-//# sourceMappingURL=index-B_dOGVNW.d.ts.map
+export { AdapterContext, type AdapterContextValue, AdapterProvider, type AdapterProviderProps, type AdapterRegistry, AnalyticsContext, type AnalyticsContextValue, AnalyticsProvider, type AnalyticsProviderProps, type DerivedAccountStatus, type DerivedChainInfo, type DerivedConnectStatus, type DerivedDisconnectStatus, type DerivedSwitchChainStatus, NetworkSwitchManager, type NetworkSwitchManagerProps, WalletConnectionHeader, WalletConnectionUI, type WalletConnectionUIProps, WalletStateContext, type WalletStateContextValue, WalletStateProvider, type WalletStateProviderProps, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletComponents, useWalletReconnectionHandler, useWalletState };
+//# sourceMappingURL=index-Deip8V0M.d.ts.map

package/dist/index-Deip8V0M.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-Deip8V0M.d.ts","names":[],"sources":["../src/hooks/AdapterContext.tsx","../src/hooks/AdapterProvider.tsx","../src/hooks/WalletStateContext.ts","../src/hooks/WalletStateProvider.tsx","../src/hooks/AnalyticsContext.tsx","../src/hooks/AnalyticsProvider.tsx","../src/hooks/useAnalytics.ts","../src/hooks/useAdapterContext.ts","../src/hooks/useWalletComponents.ts","../src/hooks/useDerivedAccountStatus.ts","../src/hooks/useDerivedSwitchChainStatus.ts","../src/hooks/useDerivedChainInfo.ts","../src/hooks/useDerivedConnectStatus.ts","../src/hooks/useDerivedDisconnect.ts","../src/hooks/useWalletReconnectionHandler.ts","../src/components/WalletConnectionHeader.tsx","../src/components/WalletConnectionUI.tsx","../src/components/NetworkSwitchManager.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/index.cjs

@@ -164,8 +164,64 @@ function AdapterProvider({ children, resolveAdapter }) {
 }
 
 //#endregion
-//#region src/hooks/WalletStateContext.tsx
-const WalletStateContext = (0, react.createContext)(void 0);
+//#region src/hooks/WalletStateContext.ts
+/**
+* Shared Global Context Pattern
+* =============================
+*
+* WHY THIS EXISTS:
+* When bundlers (like Vite's optimizeDeps with esbuild) pre-bundle dependencies,
+* they may inline transitive dependencies like @openzeppelin/ui-react into the
+* consuming package's bundle. This creates MULTIPLE instances of this module:
+*
+* 1. The app's direct import → packages/react/dist/index.js
+* 2. The adapter's inlined copy → .vite/deps/@openzeppelin_ui-builder-adapter-evm.js
+*
+* Since React contexts use referential identity, these two module instances have
+* DIFFERENT context objects. When the adapter's components call useWalletState(),
+* they look for a context that was never provided (because WalletStateProvider
+* uses the app's context, not the adapter's inlined copy).
+*
+* SOLUTION:
+* Store the context object on globalThis so ALL module instances share the same
+* React context, regardless of how they were loaded or bundled.
+*
+* WHEN IS THIS NEEDED:
+* - Development with Vite's dependency pre-bundling (optimizeDeps)
+* - When adapters are installed from npm (not workspace-linked with same bundler)
+* - Any scenario where @openzeppelin/ui-react might be duplicated
+*
+* PRODUCTION APPS:
+* In production builds where the app and adapters are bundled together with proper
+* deduplication (e.g., via bundler configuration or peer dependencies), this
+* workaround may not be strictly necessary. However, it provides a safety net
+* and has minimal overhead.
+*/
+/**
+* Use Symbol.for() to create a globally unique key that is consistent across
+* all module instances. Unlike Symbol(), Symbol.for() returns the same symbol
+* for the same key string, which is essential for cross-module sharing.
+*/
+const WALLET_STATE_CONTEXT_KEY = Symbol.for("@openzeppelin/ui-react/WalletStateContext");
+/**
+* Retrieves or creates the shared WalletStateContext.
+*
+* NOTE ON ATOMICITY:
+* The check-then-set pattern here is not atomic, but this is acceptable because:
+* 1. JavaScript is single-threaded; module initialization is synchronous
+* 2. Even if multiple modules initialize "simultaneously" during parallel loading,
+*    they execute sequentially on the main thread
+* 3. The worst case (two contexts created) would only happen if the check and set
+*    were somehow interleaved, which cannot occur in JS's execution model
+* 4. For React contexts specifically, having the same context object is what matters,
+*    and this pattern guarantees that after initialization
+*/
+function getOrCreateSharedContext() {
+	const global = globalThis;
+	if (!global[WALLET_STATE_CONTEXT_KEY]) global[WALLET_STATE_CONTEXT_KEY] = (0, react.createContext)(void 0);
+	return global[WALLET_STATE_CONTEXT_KEY];
+}
+const WalletStateContext = getOrCreateSharedContext();
 /**
 * Hook to access wallet state from WalletStateProvider.
 * @throws Error if used outside of WalletStateProvider
@@ -512,6 +568,60 @@ const useAnalytics = () => {
 	}
 };
 
+//#endregion
+//#region src/hooks/useWalletComponents.ts
+/**
+* Hook that provides direct access to wallet UI components from the active adapter.
+*
+* Use this hook when you need full control over the layout and composition of
+* wallet components. For standard layouts, prefer using `WalletConnectionUI`
+* with its props forwarding capabilities.
+*
+* @returns The wallet components object, or null if no adapter is active or
+*          the adapter doesn't provide wallet components.
+*
+* @example
+* ```tsx
+* import { useWalletComponents } from '@openzeppelin/ui-react';
+*
+* function CustomWalletSection() {
+*   const walletComponents = useWalletComponents();
+*
+*   if (!walletComponents) {
+*     return <p>Loading wallet...</p>;
+*   }
+*
+*   const { ConnectButton, NetworkSwitcher, AccountDisplay } = walletComponents;
+*
+*   return (
+*     <div className="flex flex-col gap-4">
+*       {ConnectButton && (
+*         <ConnectButton
+*           size="xl"
+*           variant="outline"
+*           fullWidth
+*           className="font-semibold"
+*         />
+*       )}
+*       <div className="flex gap-2">
+*         {NetworkSwitcher && <NetworkSwitcher size="sm" />}
+*         {AccountDisplay && <AccountDisplay size="sm" />}
+*       </div>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useWalletComponents() {
+	const { activeAdapter } = useWalletState();
+	if (!activeAdapter || typeof activeAdapter.getEcosystemWalletComponents !== "function") return null;
+	try {
+		return activeAdapter.getEcosystemWalletComponents() ?? null;
+	} catch {
+		return null;
+	}
+}
+
 //#endregion
 //#region src/hooks/useDerivedAccountStatus.ts
 const defaultAccountStatus = {
@@ -682,8 +792,26 @@ function useWalletReconnectionHandler(selectedNetworkConfigId, selectedAdapter,
 /**
 * Component that displays wallet connection UI components
 * provided by the active adapter.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <WalletConnectionUI />
+*
+* // With custom styling for the connect button
+* <WalletConnectionUI
+*   connectButtonProps={{ size: "lg", variant: "outline", fullWidth: true }}
+* />
+*
+* // Customizing all components
+* <WalletConnectionUI
+*   connectButtonProps={{ size: "lg" }}
+*   accountDisplayProps={{ size: "lg" }}
+*   networkSwitcherProps={{ size: "lg" }}
+* />
+* ```
 */
-const WalletConnectionUI = ({ className }) => {
+const WalletConnectionUI = ({ className, connectButtonProps, accountDisplayProps, networkSwitcherProps }) => {
 	const [isError, setIsError] = (0, react.useState)(false);
 	const { activeAdapter, walletFacadeHooks } = useWalletState();
 	(0, react.useEffect)(() => {
@@ -729,9 +857,9 @@ const WalletConnectionUI = ({ className }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _openzeppelin_ui_utils.cn)("flex items-center gap-4", className),
 		children: [
-			NetworkSwitcher && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NetworkSwitcher, {}),
-			AccountDisplay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountDisplay, {}),
-			ConnectButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectButton, {})
+			NetworkSwitcher && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NetworkSwitcher, { ...networkSwitcherProps }),
+			AccountDisplay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountDisplay, { ...accountDisplayProps }),
+			ConnectButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectButton, { ...connectButtonProps })
 		]
 	});
 };
@@ -904,6 +1032,7 @@ exports.useDerivedChainInfo = useDerivedChainInfo;
 exports.useDerivedConnectStatus = useDerivedConnectStatus;
 exports.useDerivedDisconnect = useDerivedDisconnect;
 exports.useDerivedSwitchChainStatus = useDerivedSwitchChainStatus;
+exports.useWalletComponents = useWalletComponents;
 exports.useWalletReconnectionHandler = useWalletReconnectionHandler;
 exports.useWalletState = useWalletState;
 //# sourceMappingURL=index.cjs.map