@openzeppelin/ui-react 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import * as react0 from "react";
2
2
  import React, { ReactNode } from "react";
3
- import { Connector, ContractAdapter, EcosystemSpecificReactHooks, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
3
+ import { BaseComponentProps, Connector, ContractAdapter, EcosystemSpecificReactHooks, EcosystemWalletComponents, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
4
4
  import * as react_jsx_runtime0 from "react/jsx-runtime";
5
5
 
6
6
  //#region src/hooks/AdapterContext.d.ts
@@ -261,6 +261,53 @@ declare const useAnalytics: () => AnalyticsContextValue;
261
261
  */
262
262
  declare function useAdapterContext(): AdapterContextValue;
263
263
  //# sourceMappingURL=useAdapterContext.d.ts.map
264
+
265
+ //#endregion
266
+ //#region src/hooks/useWalletComponents.d.ts
267
+ /**
268
+ * Hook that provides direct access to wallet UI components from the active adapter.
269
+ *
270
+ * Use this hook when you need full control over the layout and composition of
271
+ * wallet components. For standard layouts, prefer using `WalletConnectionUI`
272
+ * with its props forwarding capabilities.
273
+ *
274
+ * @returns The wallet components object, or null if no adapter is active or
275
+ * the adapter doesn't provide wallet components.
276
+ *
277
+ * @example
278
+ * ```tsx
279
+ * import { useWalletComponents } from '@openzeppelin/ui-react';
280
+ *
281
+ * function CustomWalletSection() {
282
+ * const walletComponents = useWalletComponents();
283
+ *
284
+ * if (!walletComponents) {
285
+ * return <p>Loading wallet...</p>;
286
+ * }
287
+ *
288
+ * const { ConnectButton, NetworkSwitcher, AccountDisplay } = walletComponents;
289
+ *
290
+ * return (
291
+ * <div className="flex flex-col gap-4">
292
+ * {ConnectButton && (
293
+ * <ConnectButton
294
+ * size="xl"
295
+ * variant="outline"
296
+ * fullWidth
297
+ * className="font-semibold"
298
+ * />
299
+ * )}
300
+ * <div className="flex gap-2">
301
+ * {NetworkSwitcher && <NetworkSwitcher size="sm" />}
302
+ * {AccountDisplay && <AccountDisplay size="sm" />}
303
+ * </div>
304
+ * </div>
305
+ * );
306
+ * }
307
+ * ```
308
+ */
309
+ declare function useWalletComponents(): EcosystemWalletComponents | null;
310
+ //# sourceMappingURL=useWalletComponents.d.ts.map
264
311
  //#endregion
265
312
  //#region src/hooks/useDerivedAccountStatus.d.ts
266
313
  interface DerivedAccountStatus {
@@ -378,14 +425,43 @@ declare const WalletConnectionHeader: React.FC;
378
425
  //# sourceMappingURL=WalletConnectionHeader.d.ts.map
379
426
  //#endregion
380
427
  //#region src/components/WalletConnectionUI.d.ts
428
+ /**
429
+ * Props for the WalletConnectionUI component.
430
+ */
381
431
  interface WalletConnectionUIProps {
432
+ /** Additional CSS classes to apply to the wrapper container */
382
433
  className?: string;
434
+ /** Props forwarded to the ConnectButton component */
435
+ connectButtonProps?: BaseComponentProps;
436
+ /** Props forwarded to the AccountDisplay component */
437
+ accountDisplayProps?: BaseComponentProps;
438
+ /** Props forwarded to the NetworkSwitcher component */
439
+ networkSwitcherProps?: BaseComponentProps;
383
440
  }
384
441
  /**
385
442
  * Component that displays wallet connection UI components
386
443
  * provided by the active adapter.
444
+ *
445
+ * @example
446
+ * ```tsx
447
+ * // Basic usage
448
+ * <WalletConnectionUI />
449
+ *
450
+ * // With custom styling for the connect button
451
+ * <WalletConnectionUI
452
+ * connectButtonProps={{ size: "lg", variant: "outline", fullWidth: true }}
453
+ * />
454
+ *
455
+ * // Customizing all components
456
+ * <WalletConnectionUI
457
+ * connectButtonProps={{ size: "lg" }}
458
+ * accountDisplayProps={{ size: "lg" }}
459
+ * networkSwitcherProps={{ size: "lg" }}
460
+ * />
461
+ * ```
387
462
  */
388
463
  declare const WalletConnectionUI: React.FC<WalletConnectionUIProps>;
464
+ //# sourceMappingURL=WalletConnectionUI.d.ts.map
389
465
  //#endregion
390
466
  //#region src/components/NetworkSwitchManager.d.ts
391
467
  /**
@@ -417,5 +493,5 @@ declare const NetworkSwitchManager: React.FC<NetworkSwitchManagerProps>;
417
493
  //# sourceMappingURL=NetworkSwitchManager.d.ts.map
418
494
 
419
495
  //#endregion
420
- 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 };
421
- //# sourceMappingURL=index-Cfc5cQFd.d.cts.map
496
+ 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 };
497
+ //# sourceMappingURL=index-BlmRKpng.d.cts.map
@@ -0,0 +1 @@
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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"}
@@ -1,7 +1,7 @@
1
1
  import * as react0 from "react";
2
2
  import React, { ReactNode } from "react";
3
3
  import * as react_jsx_runtime0 from "react/jsx-runtime";
4
- import { Connector, ContractAdapter, EcosystemSpecificReactHooks, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
4
+ import { BaseComponentProps, Connector, ContractAdapter, EcosystemSpecificReactHooks, EcosystemWalletComponents, NativeConfigLoader, NetworkConfig, UiKitConfiguration } from "@openzeppelin/ui-types";
5
5
 
6
6
  //#region src/hooks/AdapterContext.d.ts
7
7
  /**
@@ -261,6 +261,53 @@ declare const useAnalytics: () => AnalyticsContextValue;
261
261
  */
262
262
  declare function useAdapterContext(): AdapterContextValue;
263
263
  //# sourceMappingURL=useAdapterContext.d.ts.map
264
+
265
+ //#endregion
266
+ //#region src/hooks/useWalletComponents.d.ts
267
+ /**
268
+ * Hook that provides direct access to wallet UI components from the active adapter.
269
+ *
270
+ * Use this hook when you need full control over the layout and composition of
271
+ * wallet components. For standard layouts, prefer using `WalletConnectionUI`
272
+ * with its props forwarding capabilities.
273
+ *
274
+ * @returns The wallet components object, or null if no adapter is active or
275
+ * the adapter doesn't provide wallet components.
276
+ *
277
+ * @example
278
+ * ```tsx
279
+ * import { useWalletComponents } from '@openzeppelin/ui-react';
280
+ *
281
+ * function CustomWalletSection() {
282
+ * const walletComponents = useWalletComponents();
283
+ *
284
+ * if (!walletComponents) {
285
+ * return <p>Loading wallet...</p>;
286
+ * }
287
+ *
288
+ * const { ConnectButton, NetworkSwitcher, AccountDisplay } = walletComponents;
289
+ *
290
+ * return (
291
+ * <div className="flex flex-col gap-4">
292
+ * {ConnectButton && (
293
+ * <ConnectButton
294
+ * size="xl"
295
+ * variant="outline"
296
+ * fullWidth
297
+ * className="font-semibold"
298
+ * />
299
+ * )}
300
+ * <div className="flex gap-2">
301
+ * {NetworkSwitcher && <NetworkSwitcher size="sm" />}
302
+ * {AccountDisplay && <AccountDisplay size="sm" />}
303
+ * </div>
304
+ * </div>
305
+ * );
306
+ * }
307
+ * ```
308
+ */
309
+ declare function useWalletComponents(): EcosystemWalletComponents | null;
310
+ //# sourceMappingURL=useWalletComponents.d.ts.map
264
311
  //#endregion
265
312
  //#region src/hooks/useDerivedAccountStatus.d.ts
266
313
  interface DerivedAccountStatus {
@@ -378,14 +425,43 @@ declare const WalletConnectionHeader: React.FC;
378
425
  //# sourceMappingURL=WalletConnectionHeader.d.ts.map
379
426
  //#endregion
380
427
  //#region src/components/WalletConnectionUI.d.ts
428
+ /**
429
+ * Props for the WalletConnectionUI component.
430
+ */
381
431
  interface WalletConnectionUIProps {
432
+ /** Additional CSS classes to apply to the wrapper container */
382
433
  className?: string;
434
+ /** Props forwarded to the ConnectButton component */
435
+ connectButtonProps?: BaseComponentProps;
436
+ /** Props forwarded to the AccountDisplay component */
437
+ accountDisplayProps?: BaseComponentProps;
438
+ /** Props forwarded to the NetworkSwitcher component */
439
+ networkSwitcherProps?: BaseComponentProps;
383
440
  }
384
441
  /**
385
442
  * Component that displays wallet connection UI components
386
443
  * provided by the active adapter.
444
+ *
445
+ * @example
446
+ * ```tsx
447
+ * // Basic usage
448
+ * <WalletConnectionUI />
449
+ *
450
+ * // With custom styling for the connect button
451
+ * <WalletConnectionUI
452
+ * connectButtonProps={{ size: "lg", variant: "outline", fullWidth: true }}
453
+ * />
454
+ *
455
+ * // Customizing all components
456
+ * <WalletConnectionUI
457
+ * connectButtonProps={{ size: "lg" }}
458
+ * accountDisplayProps={{ size: "lg" }}
459
+ * networkSwitcherProps={{ size: "lg" }}
460
+ * />
461
+ * ```
387
462
  */
388
463
  declare const WalletConnectionUI: React.FC<WalletConnectionUIProps>;
464
+ //# sourceMappingURL=WalletConnectionUI.d.ts.map
389
465
  //#endregion
390
466
  //#region src/components/NetworkSwitchManager.d.ts
391
467
  /**
@@ -417,5 +493,5 @@ declare const NetworkSwitchManager: React.FC<NetworkSwitchManagerProps>;
417
493
  //# sourceMappingURL=NetworkSwitchManager.d.ts.map
418
494
 
419
495
  //#endregion
420
- 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 };
421
- //# sourceMappingURL=index-B_dOGVNW.d.ts.map
496
+ 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 };
497
+ //# sourceMappingURL=index-Deip8V0M.d.ts.map
@@ -0,0 +1 @@
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":";;;;;;;;;;UAmBiB,eAAA;EAAA,CAAA,SAAA,EAAA,MAAe,CAAA,EACT,eAAA;AAQvB;;;;;AAWA;AAA6E,UAX5D,mBAAA,CAW4D;sBAAlD,EAAA,CAAA,aAAA,EAVa,aAUb,GAAA,IAAA,EAAA,GAAA;IAAA,OAAA,EATd,eASc,GAAA,IAAA;IAAA,SAAA,EAAA,OAAA;;;;ACjB3B;;;AAGkC,cDcrB,cCdqB,EDcP,MAAA,CAAA,OCdO,CDcP,mBCdO,GAAA,IAAA,CAAA;;;;UAHjB,oBAAA;YACL;;EADK,cAAA,EAAA,CAAA,aAAoB,EAGH,aAHG,EAAA,GAGe,OAHf,CAGuB,eAHvB,CAAA;;;;;;;AAgBrC;;;;;AAAkF,iBAAlE,eAAA,CAAkE;EAAA,QAAA;EAAA;AAAA,CAAA,EAApB,oBAAoB,CAAA,EAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;UC7BjE,uBAAA;;;uBAIM;EFMN,aAAA,EEHA,eFIM,GAAA,IAAA;EAQN,gBAAA,EAAA,OAAmB;EAAA,iBAAA,EEPf,2BFOe,GAAA,IAAA;+BACI,EAAA,CAAA,WAAA,CAAA,EEPQ,OFOR,CEPgB,kBFOhB,CAAA,EAAA,GAAA,IAAA;;AACZ,cEoEf,kBFpEe,EEoEG,KAAA,CAAA,OFpEH,CEoEG,uBFpEH,GAAA,SAAA,CAAA;AAS5B;;;;AAA2B,iBEiEX,cAAA,CAAA,CFjEW,EEiEO,uBFjEP;;;;UGXV,wBAAA;YACL;;;EHVK;EASA,oBAAA,EAAmB,CAAA,SAAA,EAAA,MAAA,EAAA,GGO7B,OHP6B,CGOrB,aHPqB,GAAA,IAAA,GAAA,SAAA,CAAA,GGOe,aHPf,GAAA,IAAA,GAAA,SAAA;EAAA;;;;AAWpC;;kBAA2B,CAAA,EGGN,kBHHM;;;;;;ACjB3B;;;;;;;AAgBA;;;;;AAAkF,iBE8DlE,mBAAA,CF9DkE;EAAA,QAAA;EAAA,gBAAA;EAAA,oBAAA;EAAA;AAAA,CAAA,EEmE/E,wBFnE+E,CAAA,EEmEvD,kBAAA,CAAA,GAAA,CAAA,OFnEuD;;;;;;;;UGhCjE,qBAAA;;EJaA,KAAA,CAAA,EAAA,MAAA;EASA;;;;EAEW,SAAA,EAAA,GAAA,GAAA,OAAA;EASf;EAAgE,UAAA,EAAA,CAAA,aAAA,CAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;;;;;;ACjB7E;;;YAGkC,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EGAY,MHAZ,CAAA,MAAA,EAAA,MAAA,GAAA,MAAA,CAAA,EAAA,GAAA,IAAA;;;;AAalC;;;;;eAAkF,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAA;;;;AC7BlF;;;;uBAYqB,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,SAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;;;AA6ErB;;AAA+B,cEhDlB,gBFgDkB,EEhDF,MAAA,CAAA,OFgDE,CEhDF,qBFgDE,GAAA,IAAA,CAAA;;;AAM/B;;;;AC5EA;;;;;;UEnBiB,sBAAA;;ELUA,KAAA,CAAA,EAAA,MAAA;EASA;EAAmB,QAAA,CAAA,EAAA,OAAA;;UAEvB,EKfD,SLeC;;AASb;;;;;;;;ACjBA;;;;;;;AAgBgB,cILH,iBJKkB,EILC,KAAA,CAAM,EJKP,CILU,sBJKV,CAAA;;;;;;;;;;;ADnB/B;AASA;;;;;AAWA;;;;;;;;ACjBA;;;;;;;AAgBA;;;;;;;;;;AC7BA;;;;;;;;AAyFA;AAA4D,cIlD/C,YJkD+C,EAAA,GAAA,GI5C3D,qBJ4C2D;;;;;;;;;AF/E5D;AASA;;;;;AAWA;AAA6E,iBOX7D,iBAAA,CAAA,CPW6D,EOXxC,mBPWwC;;;;;;;;;;AApB7E;AASA;;;;;AAWA;;;;;;;;ACjBA;;;;;;;AAgBA;;;;;;;;;;AC7BA;;;;;;AAagD,iBMwBhC,mBAAA,CAAA,CNxBgC,EMwBT,yBNxBS,GAAA,IAAA;;;;UOjB/B,oBAAA;;;;;;ATcjB;AASA;;;;AAE4B,iBSNZ,uBAAA,CAAA,CTMY,ESNe,oBTMf;AAS5B;;;UUlCiB,wBAAA;;;;;;EVcA,WAAA,EAAA,OAAe;EASf;EAAmB,KAAA,EUjB3B,KViB2B,GAAA,IAAA;;;;AAWpC;;;;AAA2B,iBUbX,2BAAA,CAAA,CVaW,EUboB,wBVapB;;;;UWnCV,gBAAA;;;;;;AXejB;AASA;;;;;AAWa,iBWjBG,mBAAA,CAAA,CXiB6D,EWjBtC,gBXiBsC;;;;UYhC5D,oBAAA;;;gBAEiB;;EZUjB;EASA,UAAA,EYjBH,SZiBG,EAAmB;EAAA;cACI,EAAA,OAAA;;EACZ,KAAA,EYfnB,KZemB,GAAA,IAAA;EASf;EAAgE,gBAAA,CAAA,EYtBxD,SZsBwD;;;;;;;ACjB5D,iBWWD,uBAAA,CAAA,CXXqB,EWWM,oBXXN;;;;UYlBpB,uBAAA;;4BAEW;;;;EbaX,KAAA,EaTR,KbSQ,GAAA,IAAe;AAShC;;;;;AAWA;AAA6E,iBaf7D,oBAAA,CAAA,Cbe6D,EafrC,uBbeqC;;;;;;;;;AApB7E;AASA;;;;;AAWA;AAA6E,iBcpB7D,4BAAA,CdoB6D,uBAAA,EAAA,MAAA,GAAA,IAAA,EAAA,eAAA,EclB1D,edkB0D,GAAA,IAAA,EAAA,iBAAA,EAAA,MAAA,GAAA,IAAA,EAAA,eAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,GAAA,IAAA,CAAA,EAAA,IAAA;;;;;;;;ce5BhE,wBAAwB,KAAA,CAAM;AfQ3C;;;;;;UgBRiB,uBAAA;EhBQA;EASA,SAAA,CAAA,EAAA,MAAA;EAAmB;oBACI,CAAA,EgBdjB,kBhBciB;;EACZ,mBAAA,CAAA,EgBbJ,kBhBaI;EASf;EAAgE,oBAAA,CAAA,EgBpBpD,kBhBoBoD;;;;;;;ACjB7E;;;;;;;AAgBA;;;;;;;;;;AC7BiB,ccmCJ,kBdnC2B,EcmCP,KAAA,CAAM,EdnCC,CcmCE,uBdnCF,CAAA;;;;;;;UeEvB,yBAAA;EjBQA;EASA,OAAA,EiBfN,ejBeyB;EAAA;iBACI,EAAA,MAAA;;EACZ,uBAAA,CAAA,EAAA,GAAA,GAAA,IAAA;AAS5B;;;;;;;;ACjBA;;;;;;;AAgBgB,cgBJH,oBhBIkB,EgBJI,KAAA,CAAM,EhBIV,CgBJa,yBhBIb,CAAA"}
package/dist/index.cjs CHANGED
@@ -568,6 +568,60 @@ const useAnalytics = () => {
568
568
  }
569
569
  };
570
570
 
571
+ //#endregion
572
+ //#region src/hooks/useWalletComponents.ts
573
+ /**
574
+ * Hook that provides direct access to wallet UI components from the active adapter.
575
+ *
576
+ * Use this hook when you need full control over the layout and composition of
577
+ * wallet components. For standard layouts, prefer using `WalletConnectionUI`
578
+ * with its props forwarding capabilities.
579
+ *
580
+ * @returns The wallet components object, or null if no adapter is active or
581
+ * the adapter doesn't provide wallet components.
582
+ *
583
+ * @example
584
+ * ```tsx
585
+ * import { useWalletComponents } from '@openzeppelin/ui-react';
586
+ *
587
+ * function CustomWalletSection() {
588
+ * const walletComponents = useWalletComponents();
589
+ *
590
+ * if (!walletComponents) {
591
+ * return <p>Loading wallet...</p>;
592
+ * }
593
+ *
594
+ * const { ConnectButton, NetworkSwitcher, AccountDisplay } = walletComponents;
595
+ *
596
+ * return (
597
+ * <div className="flex flex-col gap-4">
598
+ * {ConnectButton && (
599
+ * <ConnectButton
600
+ * size="xl"
601
+ * variant="outline"
602
+ * fullWidth
603
+ * className="font-semibold"
604
+ * />
605
+ * )}
606
+ * <div className="flex gap-2">
607
+ * {NetworkSwitcher && <NetworkSwitcher size="sm" />}
608
+ * {AccountDisplay && <AccountDisplay size="sm" />}
609
+ * </div>
610
+ * </div>
611
+ * );
612
+ * }
613
+ * ```
614
+ */
615
+ function useWalletComponents() {
616
+ const { activeAdapter } = useWalletState();
617
+ if (!activeAdapter || typeof activeAdapter.getEcosystemWalletComponents !== "function") return null;
618
+ try {
619
+ return activeAdapter.getEcosystemWalletComponents() ?? null;
620
+ } catch {
621
+ return null;
622
+ }
623
+ }
624
+
571
625
  //#endregion
572
626
  //#region src/hooks/useDerivedAccountStatus.ts
573
627
  const defaultAccountStatus = {
@@ -738,8 +792,26 @@ function useWalletReconnectionHandler(selectedNetworkConfigId, selectedAdapter,
738
792
  /**
739
793
  * Component that displays wallet connection UI components
740
794
  * provided by the active adapter.
795
+ *
796
+ * @example
797
+ * ```tsx
798
+ * // Basic usage
799
+ * <WalletConnectionUI />
800
+ *
801
+ * // With custom styling for the connect button
802
+ * <WalletConnectionUI
803
+ * connectButtonProps={{ size: "lg", variant: "outline", fullWidth: true }}
804
+ * />
805
+ *
806
+ * // Customizing all components
807
+ * <WalletConnectionUI
808
+ * connectButtonProps={{ size: "lg" }}
809
+ * accountDisplayProps={{ size: "lg" }}
810
+ * networkSwitcherProps={{ size: "lg" }}
811
+ * />
812
+ * ```
741
813
  */
742
- const WalletConnectionUI = ({ className }) => {
814
+ const WalletConnectionUI = ({ className, connectButtonProps, accountDisplayProps, networkSwitcherProps }) => {
743
815
  const [isError, setIsError] = (0, react.useState)(false);
744
816
  const { activeAdapter, walletFacadeHooks } = useWalletState();
745
817
  (0, react.useEffect)(() => {
@@ -785,9 +857,9 @@ const WalletConnectionUI = ({ className }) => {
785
857
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
786
858
  className: (0, _openzeppelin_ui_utils.cn)("flex items-center gap-4", className),
787
859
  children: [
788
- NetworkSwitcher && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NetworkSwitcher, {}),
789
- AccountDisplay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountDisplay, {}),
790
- ConnectButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectButton, {})
860
+ NetworkSwitcher && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NetworkSwitcher, { ...networkSwitcherProps }),
861
+ AccountDisplay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountDisplay, { ...accountDisplayProps }),
862
+ ConnectButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectButton, { ...connectButtonProps })
791
863
  ]
792
864
  });
793
865
  };
@@ -960,6 +1032,7 @@ exports.useDerivedChainInfo = useDerivedChainInfo;
960
1032
  exports.useDerivedConnectStatus = useDerivedConnectStatus;
961
1033
  exports.useDerivedDisconnect = useDerivedDisconnect;
962
1034
  exports.useDerivedSwitchChainStatus = useDerivedSwitchChainStatus;
1035
+ exports.useWalletComponents = useWalletComponents;
963
1036
  exports.useWalletReconnectionHandler = useWalletReconnectionHandler;
964
1037
  exports.useWalletState = useWalletState;
965
1038
  //# sourceMappingURL=index.cjs.map