@openzeppelin/ui-builder-adapter-evm 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openzeppelin/ui-builder-adapter-evm",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "description": "EVM Adapter for UI Builder",
   "keywords": [
@@ -37,10 +37,10 @@
   },
   "dependencies": {
     "@openzeppelin/relayer-sdk": "1.4.0",
-    "@openzeppelin/ui-components": "^1.0.2",
-    "@openzeppelin/ui-react": "^1.0.0",
-    "@openzeppelin/ui-types": "^1.1.0",
-    "@openzeppelin/ui-utils": "^1.0.0",
+    "@openzeppelin/ui-components": "^1.0.4",
+    "@openzeppelin/ui-react": "^1.1.0",
+    "@openzeppelin/ui-types": "^1.2.0",
+    "@openzeppelin/ui-utils": "^1.1.0",
     "@wagmi/connectors": "5.7.13",
     "@wagmi/core": "^2.20.3",
     "@web3icons/react": "^4.0.19",

package/src/wallet/components/account/AccountDisplay.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Button } from '@openzeppelin/ui-components';
 import { useDerivedAccountStatus, useDerivedDisconnect } from '@openzeppelin/ui-react';
 import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn, truncateMiddle } from '@openzeppelin/ui-utils';
+import { cn, getWalletAccountDisplaySizeProps, truncateMiddle } from '@openzeppelin/ui-utils';
 
 import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
 
@@ -12,40 +12,59 @@ import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
  * A component that displays the connected account address and chain ID.
  * Also includes a disconnect button.
  */
-export const CustomAccountDisplay: React.FC<BaseComponentProps> = ({ className }) => {
+export const CustomAccountDisplay: React.FC<BaseComponentProps> = ({
+  className,
+  size,
+  variant,
+  fullWidth,
+}) => {
   // Use the SafeWagmiComponent with null fallback
   return (
     <SafeWagmiComponent fallback={null}>
-      <AccountDisplayContent className={className} />
+      <AccountDisplayContent
+        className={className}
+        size={size}
+        variant={variant}
+        fullWidth={fullWidth}
+      />
     </SafeWagmiComponent>
   );
 };
 
 // Inner component that uses derived hooks
-const AccountDisplayContent: React.FC<{ className?: string }> = ({ className }) => {
+const AccountDisplayContent: React.FC<BaseComponentProps> = ({
+  className,
+  size,
+  variant,
+  fullWidth,
+}) => {
   const { isConnected, address, chainId } = useDerivedAccountStatus();
   const { disconnect } = useDerivedDisconnect();
 
+  const sizeProps = getWalletAccountDisplaySizeProps(size);
+
   if (!isConnected || !address || !disconnect) {
     return null;
   }
 
   return (
-    <div className={cn('flex items-center gap-2', className)}>
-      <div className="flex flex-col">
-        <span className="text-xs font-medium">{truncateMiddle(address, 4, 4)}</span>
-        <span className="text-[9px] text-muted-foreground -mt-0.5">
+    <div className={cn('flex items-center gap-2', fullWidth && 'w-full', className)}>
+      <div className={cn('flex flex-col', fullWidth && 'flex-1')}>
+        <span className={cn(sizeProps.textSize, 'font-medium')}>
+          {truncateMiddle(address, 4, 4)}
+        </span>
+        <span className={cn(sizeProps.subTextSize, 'text-muted-foreground -mt-0.5')}>
           {chainId ? `Chain ID: ${chainId}` : 'Chain ID: N/A'}
         </span>
       </div>
       <Button
         onClick={() => disconnect()}
-        variant="ghost"
+        variant={variant || 'ghost'}
         size="icon"
-        className="size-6 p-0"
+        className={cn(sizeProps.iconButtonSize, 'p-0')}
         title="Disconnect wallet"
       >
-        <LogOut className="size-3.5" />
+        <LogOut className={sizeProps.iconSize} />
       </Button>
     </div>
   );

package/src/wallet/components/connect/ConnectButton.tsx

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 
 import { Button } from '@openzeppelin/ui-components';
 import { useDerivedAccountStatus, useDerivedConnectStatus } from '@openzeppelin/ui-react';
-import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn } from '@openzeppelin/ui-utils';
+import type { BaseComponentProps, WalletComponentSize } from '@openzeppelin/ui-types';
+import { cn, getWalletButtonSizeProps } from '@openzeppelin/ui-utils';
 
 import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
 import { ConnectorDialog } from './ConnectorDialog';
@@ -20,14 +20,23 @@ export interface ConnectButtonProps extends BaseComponentProps {
 
 export const CustomConnectButton: React.FC<ConnectButtonProps> = ({
   className,
+  size,
+  variant,
+  fullWidth,
   hideWhenConnected = true,
 }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
+  const sizeProps = getWalletButtonSizeProps(size);
 
   const unavailableButton = (
-    <div className={cn('flex items-center', className)}>
-      <Button disabled={true} variant="outline" size="sm" className="h-8 px-2 text-xs">
-        <Wallet className="size-3.5 mr-1" />
+    <div className={cn('flex items-center', fullWidth && 'w-full', className)}>
+      <Button
+        disabled={true}
+        variant={variant || 'outline'}
+        size={sizeProps.size}
+        className={cn(sizeProps.className, fullWidth && 'w-full')}
+      >
+        <Wallet className={cn(sizeProps.iconSize, 'mr-1')} />
         Wallet Unavailable
       </Button>
     </div>
@@ -37,6 +46,9 @@ export const CustomConnectButton: React.FC<ConnectButtonProps> = ({
     <SafeWagmiComponent fallback={unavailableButton}>
       <ConnectButtonContent
         className={className}
+        size={size}
+        variant={variant}
+        fullWidth={fullWidth}
         dialogOpen={dialogOpen}
         setDialogOpen={setDialogOpen}
         hideWhenConnected={hideWhenConnected}
@@ -47,16 +59,21 @@ export const CustomConnectButton: React.FC<ConnectButtonProps> = ({
 
 const ConnectButtonContent: React.FC<{
   className?: string;
+  size?: WalletComponentSize;
+  variant?: BaseComponentProps['variant'];
+  fullWidth?: boolean;
   dialogOpen: boolean;
   setDialogOpen: (open: boolean) => void;
   hideWhenConnected: boolean;
-}> = ({ className, dialogOpen, setDialogOpen, hideWhenConnected }) => {
+}> = ({ className, size, variant, fullWidth, dialogOpen, setDialogOpen, hideWhenConnected }) => {
   const { isConnected } = useDerivedAccountStatus();
   const { isConnecting: isHookConnecting, error: connectError } = useDerivedConnectStatus();
 
   // Local state to indicate the button has been clicked and dialog is open, awaiting user selection
   const [isManuallyInitiated, setIsManuallyInitiated] = useState(false);
 
+  const sizeProps = getWalletButtonSizeProps(size);
+
   useEffect(() => {
     if (isConnected && hideWhenConnected) {
       setDialogOpen(false);
@@ -93,19 +110,19 @@ const ConnectButtonContent: React.FC<{
   const showButtonLoading = isHookConnecting || isManuallyInitiated;
 
   return (
-    <div className={cn('flex items-center', className)}>
+    <div className={cn('flex items-center', fullWidth && 'w-full', className)}>
       <Button
         onClick={handleConnectClick}
         disabled={showButtonLoading || isConnected}
-        variant="outline"
-        size="sm"
-        className="h-8 px-2 text-xs"
+        variant={variant || 'outline'}
+        size={sizeProps.size}
+        className={cn(sizeProps.className, fullWidth && 'w-full')}
         title={isConnected ? 'Connected' : connectError?.message || 'Connect Wallet'}
       >
         {showButtonLoading ? (
-          <Loader2 className="size-3.5 animate-spin mr-1" />
+          <Loader2 className={cn(sizeProps.iconSize, 'animate-spin mr-1')} />
         ) : (
-          <Wallet className="size-3.5 mr-1" />
+          <Wallet className={cn(sizeProps.iconSize, 'mr-1')} />
         )}
         {showButtonLoading ? 'Connecting...' : 'Connect Wallet'}
       </Button>

package/src/wallet/components/network/NetworkSwitcher.tsx

@@ -15,7 +15,11 @@ import {
   useDerivedSwitchChainStatus,
 } from '@openzeppelin/ui-react';
 import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn } from '@openzeppelin/ui-utils';
+import {
+  cn,
+  getWalletNetworkSwitcherSizeProps,
+  getWalletNetworkSwitcherVariantClassName,
+} from '@openzeppelin/ui-utils';
 
 import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
 
@@ -23,21 +27,39 @@ import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
  * A component that displays the current network and allows switching to other networks.
  * Uses the chainId and switchChain hooks from wagmi.
  */
-export const CustomNetworkSwitcher: React.FC<BaseComponentProps> = ({ className }) => {
+export const CustomNetworkSwitcher: React.FC<BaseComponentProps> = ({
+  className,
+  size,
+  variant,
+  fullWidth,
+}) => {
   // Use the SafeWagmiComponent with null fallback
   return (
     <SafeWagmiComponent fallback={null}>
-      <NetworkSwitcherContent className={className} />
+      <NetworkSwitcherContent
+        className={className}
+        size={size}
+        variant={variant}
+        fullWidth={fullWidth}
+      />
     </SafeWagmiComponent>
   );
 };
 
 // Inner component that uses wagmi hooks
-const NetworkSwitcherContent: React.FC<{ className?: string }> = ({ className }) => {
+const NetworkSwitcherContent: React.FC<BaseComponentProps> = ({
+  className,
+  size,
+  variant,
+  fullWidth,
+}) => {
   const { isConnected } = useDerivedAccountStatus();
   const { currentChainId, availableChains: unknownChains } = useDerivedChainInfo();
   const { switchChain, isSwitching: isPending, error } = useDerivedSwitchChainStatus();
 
+  const sizeProps = getWalletNetworkSwitcherSizeProps(size);
+  const variantClassName = getWalletNetworkSwitcherVariantClassName(variant);
+
   // Cast to Chain[] for use within this EVM-specific component
   const typedAvailableChains = unknownChains as Chain[];
 
@@ -55,13 +77,19 @@ const NetworkSwitcherContent: React.FC<{ className?: string }> = ({ className })
   const currentChainName = currentChain?.name || 'Network';
 
   return (
-    <div className={cn('flex items-center', className)}>
+    <div className={cn('flex items-center', fullWidth && 'w-full', className)}>
       <Select
         value={currentChainId?.toString() ?? ''}
         onValueChange={(value: string) => handleNetworkChange(Number(value))}
         disabled={isPending || typedAvailableChains.length === 0}
       >
-        <SelectTrigger className="h-8 text-xs px-2 min-w-[90px] max-w-[120px]">
+        <SelectTrigger
+          className={cn(
+            sizeProps.triggerClassName,
+            variantClassName,
+            fullWidth && 'w-full max-w-none'
+          )}
+        >
           <SelectValue placeholder="Network">{currentChainName}</SelectValue>
         </SelectTrigger>
         <SelectContent
@@ -71,7 +99,11 @@ const NetworkSwitcherContent: React.FC<{ className?: string }> = ({ className })
           className="w-auto min-w-[160px] max-h-[300px]"
         >
           {typedAvailableChains.map((chain) => (
-            <SelectItem key={chain.id} value={chain.id.toString()} className="text-xs py-1.5">
+            <SelectItem
+              key={chain.id}
+              value={chain.id.toString()}
+              className={sizeProps.itemClassName}
+            >
               {chain.name}
             </SelectItem>
           ))}
@@ -79,8 +111,8 @@ const NetworkSwitcherContent: React.FC<{ className?: string }> = ({ className })
       </Select>
 
       {isPending && (
-        <span className="text-xs text-muted-foreground ml-2">
-          <Loader2 className="h-3 w-3 animate-spin" />
+        <span className="text-muted-foreground ml-2">
+          <Loader2 className={cn(sizeProps.loaderSize, 'animate-spin')} />
         </span>
       )}
 

package/src/wallet/rainbowkit/components.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import { Button } from '@openzeppelin/ui-components';
 import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn, logger } from '@openzeppelin/ui-utils';
+import { cn, getWalletButtonSizeProps, logger } from '@openzeppelin/ui-utils';
 
 import { CustomConnectButton } from '../components';
 import { WagmiProviderInitializedContext } from '../context/wagmi-context';
@@ -79,14 +79,16 @@ export const RainbowKitConnectButton: React.FC<BaseComponentProps> = (props) =>
     };
   }, []); // Effect for dynamic import runs once
 
+  const sizeProps = getWalletButtonSizeProps(props.size);
+
   const renderLoadingPlaceholder = (message: string) => (
     <Button
       disabled={true}
-      variant="outline"
-      size="sm"
-      className={cn('h-8 px-2 text-xs', props.className)}
+      variant={props.variant || 'outline'}
+      size={sizeProps.size}
+      className={cn(sizeProps.className, props.fullWidth && 'w-full', props.className)}
     >
-      <Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
+      <Loader2 className={cn(sizeProps.iconSize, 'animate-spin mr-1.5')} />
       {message}
     </Button>
   );