@openzeppelin/ui-react 1.0.1 → 1.2.0

package/dist/index.d.cts

@@ -1,8 +1,11 @@
 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/version.d.ts
+declare const VERSION: string;
+//#endregion
 //#region src/hooks/AdapterContext.d.ts
 /**
  * Registry type that maps network IDs to their corresponding adapter instances
@@ -27,9 +30,9 @@ interface AdapterContextValue {
  * Components can access this through the useAdapterContext hook
  */
 declare const AdapterContext: react0.Context<AdapterContextValue | null>;
-//# sourceMappingURL=AdapterContext.d.ts.map
 //#endregion
 //#region src/hooks/AdapterProvider.d.ts
+
 interface AdapterProviderProps {
   children: ReactNode;
   /** Function to resolve/create an adapter instance for a given NetworkConfig. */
@@ -49,7 +52,6 @@ declare function AdapterProvider({
   children,
   resolveAdapter
 }: AdapterProviderProps): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=AdapterProvider.d.ts.map
 //#endregion
 //#region src/hooks/WalletStateContext.d.ts
 interface WalletStateContextValue {
@@ -67,7 +69,6 @@ declare const WalletStateContext: React.Context<WalletStateContextValue | undefi
  * @throws Error if used outside of WalletStateProvider
  */
 declare function useWalletState(): WalletStateContextValue;
-//# sourceMappingURL=WalletStateContext.d.ts.map
 //#endregion
 //#region src/hooks/WalletStateProvider.d.ts
 interface WalletStateProviderProps {
@@ -106,7 +107,6 @@ declare function WalletStateProvider({
   getNetworkConfigById,
   loadConfigModule
 }: WalletStateProviderProps): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=WalletStateProvider.d.ts.map
 //#endregion
 //#region src/hooks/AnalyticsContext.d.ts
 /**
@@ -157,13 +157,6 @@ interface AnalyticsContextValue {
  * Must be used within an AnalyticsProvider.
  */
 declare const AnalyticsContext: react0.Context<AnalyticsContextValue | null>;
-/**
- * Internal hook to access analytics context.
- * Throws an error if used outside of an AnalyticsProvider.
- *
- * @internal
- * @throws Error if used outside of AnalyticsProvider
- */
 //#endregion
 //#region src/hooks/AnalyticsProvider.d.ts
 /**
@@ -193,8 +186,6 @@ interface AnalyticsProviderProps {
  * ```
  */
 declare const AnalyticsProvider: React.FC<AnalyticsProviderProps>;
-//# sourceMappingURL=AnalyticsProvider.d.ts.map
-
 //#endregion
 //#region src/hooks/useAnalytics.d.ts
 /**
@@ -244,7 +235,6 @@ declare const AnalyticsProvider: React.FC<AnalyticsProviderProps>;
  * @throws Error if used outside of AnalyticsProvider
  */
 declare const useAnalytics: () => AnalyticsContextValue;
-//# sourceMappingURL=useAnalytics.d.ts.map
 //#endregion
 //#region src/hooks/useAdapterContext.d.ts
 /**
@@ -260,7 +250,51 @@ declare const useAnalytics: () => AnalyticsContextValue;
  * @returns The adapter context value
  */
 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;
 //#endregion
 //#region src/hooks/useDerivedAccountStatus.d.ts
 interface DerivedAccountStatus {
@@ -275,7 +309,6 @@ interface DerivedAccountStatus {
  * Provides default values if the hook or its properties are unavailable.
  */
 declare function useDerivedAccountStatus(): DerivedAccountStatus;
-//# sourceMappingURL=useDerivedAccountStatus.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedSwitchChainStatus.d.ts
 interface DerivedSwitchChainStatus {
@@ -295,7 +328,6 @@ interface DerivedSwitchChainStatus {
  * Provides default values if the hook or its properties are unavailable.
  */
 declare function useDerivedSwitchChainStatus(): DerivedSwitchChainStatus;
-//# sourceMappingURL=useDerivedSwitchChainStatus.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedChainInfo.d.ts
 interface DerivedChainInfo {
@@ -311,7 +343,6 @@ interface DerivedChainInfo {
  * Provides default values if the hooks or their properties are unavailable.
  */
 declare function useDerivedChainInfo(): DerivedChainInfo;
-//# sourceMappingURL=useDerivedChainInfo.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedConnectStatus.d.ts
 interface DerivedConnectStatus {
@@ -334,7 +365,6 @@ interface DerivedConnectStatus {
  * safely-accessed status and control functions for wallet connection.
  */
 declare function useDerivedConnectStatus(): DerivedConnectStatus;
-//# sourceMappingURL=useDerivedConnectStatus.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedDisconnect.d.ts
 interface DerivedDisconnectStatus {
@@ -351,7 +381,6 @@ interface DerivedDisconnectStatus {
  * safely-accessed status and control function for wallet disconnection.
  */
 declare function useDerivedDisconnect(): DerivedDisconnectStatus;
-//# sourceMappingURL=useDerivedDisconnect.d.ts.map
 //#endregion
 //#region src/hooks/useWalletReconnectionHandler.d.ts
 /**
@@ -367,7 +396,6 @@ declare function useDerivedDisconnect(): DerivedDisconnectStatus;
  * @param onRequeueSwitch - Callback invoked when a network switch should be re-queued
  */
 declare function useWalletReconnectionHandler(selectedNetworkConfigId: string | null, selectedAdapter: ContractAdapter | null, networkToSwitchTo: string | null, onRequeueSwitch: (networkId: string) => void): void;
-//# sourceMappingURL=useWalletReconnectionHandler.d.ts.map
 //#endregion
 //#region src/components/WalletConnectionHeader.d.ts
 /**
@@ -375,15 +403,42 @@ declare function useWalletReconnectionHandler(selectedNetworkConfigId: string |
  * Uses useWalletState to get its data.
  */
 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>;
 //#endregion
@@ -414,8 +469,6 @@ interface NetworkSwitchManagerProps {
  * - Provides completion callback for parent components to handle state cleanup
  */
 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, VERSION, WalletConnectionHeader, WalletConnectionUI, type WalletConnectionUIProps, WalletStateContext, type WalletStateContextValue, WalletStateProvider, type WalletStateProviderProps, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletComponents, useWalletReconnectionHandler, useWalletState };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/version.ts","../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.d.mts}

@@ -1,8 +1,11 @@
 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/version.d.ts
+declare const VERSION: string;
+//#endregion
 //#region src/hooks/AdapterContext.d.ts
 /**
  * Registry type that maps network IDs to their corresponding adapter instances
@@ -27,9 +30,9 @@ interface AdapterContextValue {
  * Components can access this through the useAdapterContext hook
  */
 declare const AdapterContext: react0.Context<AdapterContextValue | null>;
-//# sourceMappingURL=AdapterContext.d.ts.map
 //#endregion
 //#region src/hooks/AdapterProvider.d.ts
+
 interface AdapterProviderProps {
   children: ReactNode;
   /** Function to resolve/create an adapter instance for a given NetworkConfig. */
@@ -49,7 +52,6 @@ declare function AdapterProvider({
   children,
   resolveAdapter
 }: AdapterProviderProps): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=AdapterProvider.d.ts.map
 //#endregion
 //#region src/hooks/WalletStateContext.d.ts
 interface WalletStateContextValue {
@@ -67,7 +69,6 @@ declare const WalletStateContext: React.Context<WalletStateContextValue | undefi
  * @throws Error if used outside of WalletStateProvider
  */
 declare function useWalletState(): WalletStateContextValue;
-//# sourceMappingURL=WalletStateContext.d.ts.map
 //#endregion
 //#region src/hooks/WalletStateProvider.d.ts
 interface WalletStateProviderProps {
@@ -106,7 +107,6 @@ declare function WalletStateProvider({
   getNetworkConfigById,
   loadConfigModule
 }: WalletStateProviderProps): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=WalletStateProvider.d.ts.map
 //#endregion
 //#region src/hooks/AnalyticsContext.d.ts
 /**
@@ -157,13 +157,6 @@ interface AnalyticsContextValue {
  * Must be used within an AnalyticsProvider.
  */
 declare const AnalyticsContext: react0.Context<AnalyticsContextValue | null>;
-/**
- * Internal hook to access analytics context.
- * Throws an error if used outside of an AnalyticsProvider.
- *
- * @internal
- * @throws Error if used outside of AnalyticsProvider
- */
 //#endregion
 //#region src/hooks/AnalyticsProvider.d.ts
 /**
@@ -193,8 +186,6 @@ interface AnalyticsProviderProps {
  * ```
  */
 declare const AnalyticsProvider: React.FC<AnalyticsProviderProps>;
-//# sourceMappingURL=AnalyticsProvider.d.ts.map
-
 //#endregion
 //#region src/hooks/useAnalytics.d.ts
 /**
@@ -244,7 +235,6 @@ declare const AnalyticsProvider: React.FC<AnalyticsProviderProps>;
  * @throws Error if used outside of AnalyticsProvider
  */
 declare const useAnalytics: () => AnalyticsContextValue;
-//# sourceMappingURL=useAnalytics.d.ts.map
 //#endregion
 //#region src/hooks/useAdapterContext.d.ts
 /**
@@ -260,7 +250,51 @@ declare const useAnalytics: () => AnalyticsContextValue;
  * @returns The adapter context value
  */
 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;
 //#endregion
 //#region src/hooks/useDerivedAccountStatus.d.ts
 interface DerivedAccountStatus {
@@ -275,7 +309,6 @@ interface DerivedAccountStatus {
  * Provides default values if the hook or its properties are unavailable.
  */
 declare function useDerivedAccountStatus(): DerivedAccountStatus;
-//# sourceMappingURL=useDerivedAccountStatus.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedSwitchChainStatus.d.ts
 interface DerivedSwitchChainStatus {
@@ -295,7 +328,6 @@ interface DerivedSwitchChainStatus {
  * Provides default values if the hook or its properties are unavailable.
  */
 declare function useDerivedSwitchChainStatus(): DerivedSwitchChainStatus;
-//# sourceMappingURL=useDerivedSwitchChainStatus.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedChainInfo.d.ts
 interface DerivedChainInfo {
@@ -311,7 +343,6 @@ interface DerivedChainInfo {
  * Provides default values if the hooks or their properties are unavailable.
  */
 declare function useDerivedChainInfo(): DerivedChainInfo;
-//# sourceMappingURL=useDerivedChainInfo.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedConnectStatus.d.ts
 interface DerivedConnectStatus {
@@ -334,7 +365,6 @@ interface DerivedConnectStatus {
  * safely-accessed status and control functions for wallet connection.
  */
 declare function useDerivedConnectStatus(): DerivedConnectStatus;
-//# sourceMappingURL=useDerivedConnectStatus.d.ts.map
 //#endregion
 //#region src/hooks/useDerivedDisconnect.d.ts
 interface DerivedDisconnectStatus {
@@ -351,7 +381,6 @@ interface DerivedDisconnectStatus {
  * safely-accessed status and control function for wallet disconnection.
  */
 declare function useDerivedDisconnect(): DerivedDisconnectStatus;
-//# sourceMappingURL=useDerivedDisconnect.d.ts.map
 //#endregion
 //#region src/hooks/useWalletReconnectionHandler.d.ts
 /**
@@ -367,7 +396,6 @@ declare function useDerivedDisconnect(): DerivedDisconnectStatus;
  * @param onRequeueSwitch - Callback invoked when a network switch should be re-queued
  */
 declare function useWalletReconnectionHandler(selectedNetworkConfigId: string | null, selectedAdapter: ContractAdapter | null, networkToSwitchTo: string | null, onRequeueSwitch: (networkId: string) => void): void;
-//# sourceMappingURL=useWalletReconnectionHandler.d.ts.map
 //#endregion
 //#region src/components/WalletConnectionHeader.d.ts
 /**
@@ -375,15 +403,42 @@ declare function useWalletReconnectionHandler(selectedNetworkConfigId: string |
  * Uses useWalletState to get its data.
  */
 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>;
 //#endregion
@@ -414,8 +469,6 @@ interface NetworkSwitchManagerProps {
  * - Provides completion callback for parent components to handle state cleanup
  */
 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, VERSION, WalletConnectionHeader, WalletConnectionUI, type WalletConnectionUIProps, WalletStateContext, type WalletStateContextValue, WalletStateProvider, type WalletStateProviderProps, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletComponents, useWalletReconnectionHandler, useWalletState };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/version.ts","../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.js → index.mjs}

@@ -3,6 +3,10 @@ import { AnalyticsService, cn, isRecordWithProperties, logger } from "@openzeppe
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@openzeppelin/ui-components";
 
+//#region src/version.ts
+const VERSION = "1.2.0";
+
+//#endregion
 //#region src/hooks/AdapterContext.tsx
 /**
 * AdapterContext.tsx
@@ -540,6 +544,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 = {
@@ -710,8 +768,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] = useState(false);
 	const { activeAdapter, walletFacadeHooks } = useWalletState();
 	useEffect(() => {
@@ -757,9 +833,9 @@ const WalletConnectionUI = ({ className }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center gap-4", className),
 		children: [
-			NetworkSwitcher && /* @__PURE__ */ jsx(NetworkSwitcher, {}),
-			AccountDisplay && /* @__PURE__ */ jsx(AccountDisplay, {}),
-			ConnectButton && /* @__PURE__ */ jsx(ConnectButton, {})
+			NetworkSwitcher && /* @__PURE__ */ jsx(NetworkSwitcher, { ...networkSwitcherProps }),
+			AccountDisplay && /* @__PURE__ */ jsx(AccountDisplay, { ...accountDisplayProps }),
+			ConnectButton && /* @__PURE__ */ jsx(ConnectButton, { ...connectButtonProps })
 		]
 	});
 };
@@ -916,5 +992,5 @@ const NetworkSwitchManager = ({ adapter, targetNetworkId, onNetworkSwitchComplet
 };
 
 //#endregion
-export { AdapterContext, AdapterProvider, AnalyticsContext, AnalyticsProvider, NetworkSwitchManager, WalletConnectionHeader, WalletConnectionUI, WalletStateContext, WalletStateProvider, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletReconnectionHandler, useWalletState };
-//# sourceMappingURL=index.js.map
+export { AdapterContext, AdapterProvider, AnalyticsContext, AnalyticsProvider, NetworkSwitchManager, VERSION, WalletConnectionHeader, WalletConnectionUI, WalletStateContext, WalletStateProvider, useAdapterContext, useAnalytics, useDerivedAccountStatus, useDerivedChainInfo, useDerivedConnectStatus, useDerivedDisconnect, useDerivedSwitchChainStatus, useWalletComponents, useWalletReconnectionHandler, useWalletState };
+//# sourceMappingURL=index.mjs.map