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

package/dist/index.js

@@ -1907,14 +1907,14 @@ var evmNetworks = [...evmMainnetNetworks, ...evmTestnetNetworks];
 import { Loader2 as Loader23 } from "lucide-react";
 import { useContext as useContext2, useEffect as useEffect4, useRef, useState as useState4 } from "react";
 import { Button as Button4 } from "@openzeppelin/ui-components";
-import { cn as cn4, logger as logger8 } from "@openzeppelin/ui-utils";
+import { cn as cn4, getWalletButtonSizeProps as getWalletButtonSizeProps2, logger as logger8 } from "@openzeppelin/ui-utils";
 
 // src/wallet/components/connect/ConnectButton.tsx
 import { Loader2, Wallet } from "lucide-react";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import { Button as Button2 } from "@openzeppelin/ui-components";
 import { useDerivedAccountStatus as useDerivedAccountStatus2, useDerivedConnectStatus as useDerivedConnectStatus2 } from "@openzeppelin/ui-react";
-import { cn } from "@openzeppelin/ui-utils";
+import { cn, getWalletButtonSizeProps } from "@openzeppelin/ui-utils";
 
 // src/wallet/utils/SafeWagmiComponent.tsx
 import { useEffect, useState } from "react";
@@ -2091,27 +2091,44 @@ var ConnectorDialogContent = ({ open, onOpenChange }) => {
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var CustomConnectButton = ({
   className,
+  size,
+  variant,
+  fullWidth,
   hideWhenConnected = true
 }) => {
   const [dialogOpen, setDialogOpen] = useState3(false);
-  const unavailableButton = /* @__PURE__ */ jsx3("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsxs2(Button2, { disabled: true, variant: "outline", size: "sm", className: "h-8 px-2 text-xs", children: [
-    /* @__PURE__ */ jsx3(Wallet, { className: "size-3.5 mr-1" }),
-    "Wallet Unavailable"
-  ] }) });
+  const sizeProps = getWalletButtonSizeProps(size);
+  const unavailableButton = /* @__PURE__ */ jsx3("div", { className: cn("flex items-center", fullWidth && "w-full", className), children: /* @__PURE__ */ jsxs2(
+    Button2,
+    {
+      disabled: true,
+      variant: variant || "outline",
+      size: sizeProps.size,
+      className: cn(sizeProps.className, fullWidth && "w-full"),
+      children: [
+        /* @__PURE__ */ jsx3(Wallet, { className: cn(sizeProps.iconSize, "mr-1") }),
+        "Wallet Unavailable"
+      ]
+    }
+  ) });
   return /* @__PURE__ */ jsx3(SafeWagmiComponent, { fallback: unavailableButton, children: /* @__PURE__ */ jsx3(
     ConnectButtonContent,
     {
       className,
+      size,
+      variant,
+      fullWidth,
       dialogOpen,
       setDialogOpen,
       hideWhenConnected
     }
   ) });
 };
-var ConnectButtonContent = ({ className, dialogOpen, setDialogOpen, hideWhenConnected }) => {
+var ConnectButtonContent = ({ className, size, variant, fullWidth, dialogOpen, setDialogOpen, hideWhenConnected }) => {
   const { isConnected } = useDerivedAccountStatus2();
   const { isConnecting: isHookConnecting, error: connectError } = useDerivedConnectStatus2();
   const [isManuallyInitiated, setIsManuallyInitiated] = useState3(false);
+  const sizeProps = getWalletButtonSizeProps(size);
   useEffect3(() => {
     if (isConnected && hideWhenConnected) {
       setDialogOpen(false);
@@ -2138,18 +2155,18 @@ var ConnectButtonContent = ({ className, dialogOpen, setDialogOpen, hideWhenConn
     return null;
   }
   const showButtonLoading = isHookConnecting || isManuallyInitiated;
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center", className), children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center", fullWidth && "w-full", className), children: [
     /* @__PURE__ */ jsxs2(
       Button2,
       {
         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",
         children: [
-          showButtonLoading ? /* @__PURE__ */ jsx3(Loader2, { className: "size-3.5 animate-spin mr-1" }) : /* @__PURE__ */ jsx3(Wallet, { className: "size-3.5 mr-1" }),
+          showButtonLoading ? /* @__PURE__ */ jsx3(Loader2, { className: cn(sizeProps.iconSize, "animate-spin mr-1") }) : /* @__PURE__ */ jsx3(Wallet, { className: cn(sizeProps.iconSize, "mr-1") }),
           showButtonLoading ? "Connecting..." : "Connect Wallet"
         ]
       }
@@ -2173,31 +2190,50 @@ var ConnectButtonContent = ({ className, dialogOpen, setDialogOpen, hideWhenConn
 import { LogOut } from "lucide-react";
 import { Button as Button3 } from "@openzeppelin/ui-components";
 import { useDerivedAccountStatus as useDerivedAccountStatus3, useDerivedDisconnect } from "@openzeppelin/ui-react";
-import { cn as cn2, truncateMiddle } from "@openzeppelin/ui-utils";
+import { cn as cn2, getWalletAccountDisplaySizeProps, truncateMiddle } from "@openzeppelin/ui-utils";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var CustomAccountDisplay = ({ className }) => {
-  return /* @__PURE__ */ jsx4(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ jsx4(AccountDisplayContent, { className }) });
+var CustomAccountDisplay = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
+  return /* @__PURE__ */ jsx4(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ jsx4(
+    AccountDisplayContent,
+    {
+      className,
+      size,
+      variant,
+      fullWidth
+    }
+  ) });
 };
-var AccountDisplayContent = ({ className }) => {
+var AccountDisplayContent = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
   const { isConnected, address, chainId } = useDerivedAccountStatus3();
   const { disconnect: disconnect2 } = useDerivedDisconnect();
+  const sizeProps = getWalletAccountDisplaySizeProps(size);
   if (!isConnected || !address || !disconnect2) {
     return null;
   }
-  return /* @__PURE__ */ jsxs3("div", { className: cn2("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium", children: truncateMiddle(address, 4, 4) }),
-      /* @__PURE__ */ jsx4("span", { className: "text-[9px] text-muted-foreground -mt-0.5", children: chainId ? `Chain ID: ${chainId}` : "Chain ID: N/A" })
+  return /* @__PURE__ */ jsxs3("div", { className: cn2("flex items-center gap-2", fullWidth && "w-full", className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: cn2("flex flex-col", fullWidth && "flex-1"), children: [
+      /* @__PURE__ */ jsx4("span", { className: cn2(sizeProps.textSize, "font-medium"), children: truncateMiddle(address, 4, 4) }),
+      /* @__PURE__ */ jsx4("span", { className: cn2(sizeProps.subTextSize, "text-muted-foreground -mt-0.5"), children: chainId ? `Chain ID: ${chainId}` : "Chain ID: N/A" })
     ] }),
     /* @__PURE__ */ jsx4(
       Button3,
       {
         onClick: () => disconnect2(),
-        variant: "ghost",
+        variant: variant || "ghost",
         size: "icon",
-        className: "size-6 p-0",
+        className: cn2(sizeProps.iconButtonSize, "p-0"),
         title: "Disconnect wallet",
-        children: /* @__PURE__ */ jsx4(LogOut, { className: "size-3.5" })
+        children: /* @__PURE__ */ jsx4(LogOut, { className: sizeProps.iconSize })
       }
     )
   ] });
@@ -2217,15 +2253,39 @@ import {
   useDerivedChainInfo,
   useDerivedSwitchChainStatus
 } from "@openzeppelin/ui-react";
-import { cn as cn3 } from "@openzeppelin/ui-utils";
+import {
+  cn as cn3,
+  getWalletNetworkSwitcherSizeProps,
+  getWalletNetworkSwitcherVariantClassName
+} from "@openzeppelin/ui-utils";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var CustomNetworkSwitcher = ({ className }) => {
-  return /* @__PURE__ */ jsx5(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ jsx5(NetworkSwitcherContent, { className }) });
+var CustomNetworkSwitcher = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
+  return /* @__PURE__ */ jsx5(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ jsx5(
+    NetworkSwitcherContent,
+    {
+      className,
+      size,
+      variant,
+      fullWidth
+    }
+  ) });
 };
-var NetworkSwitcherContent = ({ className }) => {
+var NetworkSwitcherContent = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
   const { isConnected } = useDerivedAccountStatus4();
   const { currentChainId, availableChains: unknownChains } = useDerivedChainInfo();
   const { switchChain: switchChain2, isSwitching: isPending, error } = useDerivedSwitchChainStatus();
+  const sizeProps = getWalletNetworkSwitcherSizeProps(size);
+  const variantClassName = getWalletNetworkSwitcherVariantClassName(variant);
   const typedAvailableChains = unknownChains;
   if (!isConnected || !switchChain2 || typedAvailableChains.length === 0) {
     return null;
@@ -2237,7 +2297,7 @@ var NetworkSwitcherContent = ({ className }) => {
   };
   const currentChain = typedAvailableChains.find((chain) => chain.id === currentChainId);
   const currentChainName = currentChain?.name || "Network";
-  return /* @__PURE__ */ jsxs4("div", { className: cn3("flex items-center", className), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: cn3("flex items-center", fullWidth && "w-full", className), children: [
     /* @__PURE__ */ jsxs4(
       Select,
       {
@@ -2245,7 +2305,17 @@ var NetworkSwitcherContent = ({ className }) => {
         onValueChange: (value) => handleNetworkChange(Number(value)),
         disabled: isPending || typedAvailableChains.length === 0,
         children: [
-          /* @__PURE__ */ jsx5(SelectTrigger, { className: "h-8 text-xs px-2 min-w-[90px] max-w-[120px]", children: /* @__PURE__ */ jsx5(SelectValue, { placeholder: "Network", children: currentChainName }) }),
+          /* @__PURE__ */ jsx5(
+            SelectTrigger,
+            {
+              className: cn3(
+                sizeProps.triggerClassName,
+                variantClassName,
+                fullWidth && "w-full max-w-none"
+              ),
+              children: /* @__PURE__ */ jsx5(SelectValue, { placeholder: "Network", children: currentChainName })
+            }
+          ),
           /* @__PURE__ */ jsx5(
             SelectContent,
             {
@@ -2253,13 +2323,21 @@ var NetworkSwitcherContent = ({ className }) => {
               sideOffset: 5,
               align: "start",
               className: "w-auto min-w-[160px] max-h-[300px]",
-              children: typedAvailableChains.map((chain) => /* @__PURE__ */ jsx5(SelectItem, { value: chain.id.toString(), className: "text-xs py-1.5", children: chain.name }, chain.id))
+              children: typedAvailableChains.map((chain) => /* @__PURE__ */ jsx5(
+                SelectItem,
+                {
+                  value: chain.id.toString(),
+                  className: sizeProps.itemClassName,
+                  children: chain.name
+                },
+                chain.id
+              ))
             }
           )
         ]
       }
     ),
-    isPending && /* @__PURE__ */ jsx5("span", { className: "text-xs text-muted-foreground ml-2", children: /* @__PURE__ */ jsx5(Loader22, { className: "h-3 w-3 animate-spin" }) }),
+    isPending && /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground ml-2", children: /* @__PURE__ */ jsx5(Loader22, { className: cn3(sizeProps.loaderSize, "animate-spin") }) }),
     error && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 ml-2", children: "!" })
   ] });
 };
@@ -2329,15 +2407,16 @@ var RainbowKitConnectButton = (props) => {
       }
     };
   }, []);
+  const sizeProps = getWalletButtonSizeProps2(props.size);
   const renderLoadingPlaceholder = (message) => /* @__PURE__ */ jsxs5(
     Button4,
     {
       disabled: true,
-      variant: "outline",
-      size: "sm",
-      className: cn4("h-8 px-2 text-xs", props.className),
+      variant: props.variant || "outline",
+      size: sizeProps.size,
+      className: cn4(sizeProps.className, props.fullWidth && "w-full", props.className),
       children: [
-        /* @__PURE__ */ jsx6(Loader23, { className: "h-3.5 w-3.5 animate-spin mr-1.5" }),
+        /* @__PURE__ */ jsx6(Loader23, { className: cn4(sizeProps.iconSize, "animate-spin mr-1.5") }),
         message
       ]
     }