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

package/dist/index.cjs

@@ -2081,27 +2081,44 @@ var ConnectorDialogContent = ({ open, onOpenChange }) => {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CustomConnectButton = ({
   className,
+  size,
+  variant,
+  fullWidth,
   hideWhenConnected = true
 }) => {
   const [dialogOpen, setDialogOpen] = (0, import_react7.useState)(false);
-  const unavailableButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_ui_utils9.cn)("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui_components2.Button, { disabled: true, variant: "outline", size: "sm", className: "h-8 px-2 text-xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Wallet, { className: "size-3.5 mr-1" }),
-    "Wallet Unavailable"
-  ] }) });
+  const sizeProps = (0, import_ui_utils9.getWalletButtonSizeProps)(size);
+  const unavailableButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_ui_utils9.cn)("flex items-center", fullWidth && "w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_ui_components2.Button,
+    {
+      disabled: true,
+      variant: variant || "outline",
+      size: sizeProps.size,
+      className: (0, import_ui_utils9.cn)(sizeProps.className, fullWidth && "w-full"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Wallet, { className: (0, import_ui_utils9.cn)(sizeProps.iconSize, "mr-1") }),
+        "Wallet Unavailable"
+      ]
+    }
+  ) });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SafeWagmiComponent, { fallback: unavailableButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     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 } = (0, import_ui_react2.useDerivedAccountStatus)();
   const { isConnecting: isHookConnecting, error: connectError } = (0, import_ui_react2.useDerivedConnectStatus)();
   const [isManuallyInitiated, setIsManuallyInitiated] = (0, import_react7.useState)(false);
+  const sizeProps = (0, import_ui_utils9.getWalletButtonSizeProps)(size);
   (0, import_react7.useEffect)(() => {
     if (isConnected && hideWhenConnected) {
       setDialogOpen(false);
@@ -2128,18 +2145,18 @@ var ConnectButtonContent = ({ className, dialogOpen, setDialogOpen, hideWhenConn
     return null;
   }
   const showButtonLoading = isHookConnecting || isManuallyInitiated;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_ui_utils9.cn)("flex items-center", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_ui_utils9.cn)("flex items-center", fullWidth && "w-full", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_ui_components2.Button,
       {
         onClick: handleConnectClick,
         disabled: showButtonLoading || isConnected,
-        variant: "outline",
-        size: "sm",
-        className: "h-8 px-2 text-xs",
+        variant: variant || "outline",
+        size: sizeProps.size,
+        className: (0, import_ui_utils9.cn)(sizeProps.className, fullWidth && "w-full"),
         title: isConnected ? "Connected" : connectError?.message || "Connect Wallet",
         children: [
-          showButtonLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Loader2, { className: "size-3.5 animate-spin mr-1" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Wallet, { className: "size-3.5 mr-1" }),
+          showButtonLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Loader2, { className: (0, import_ui_utils9.cn)(sizeProps.iconSize, "animate-spin mr-1") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Wallet, { className: (0, import_ui_utils9.cn)(sizeProps.iconSize, "mr-1") }),
           showButtonLoading ? "Connecting..." : "Connect Wallet"
         ]
       }
@@ -2165,29 +2182,48 @@ var import_ui_components3 = require("@openzeppelin/ui-components");
 var import_ui_react3 = require("@openzeppelin/ui-react");
 var import_ui_utils10 = require("@openzeppelin/ui-utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var CustomAccountDisplay = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccountDisplayContent, { className }) });
+var CustomAccountDisplay = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    AccountDisplayContent,
+    {
+      className,
+      size,
+      variant,
+      fullWidth
+    }
+  ) });
 };
-var AccountDisplayContent = ({ className }) => {
+var AccountDisplayContent = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
   const { isConnected, address, chainId } = (0, import_ui_react3.useDerivedAccountStatus)();
   const { disconnect: disconnect2 } = (0, import_ui_react3.useDerivedDisconnect)();
+  const sizeProps = (0, import_ui_utils10.getWalletAccountDisplaySizeProps)(size);
   if (!isConnected || !address || !disconnect2) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_ui_utils10.cn)("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-medium", children: (0, import_ui_utils10.truncateMiddle)(address, 4, 4) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[9px] text-muted-foreground -mt-0.5", children: chainId ? `Chain ID: ${chainId}` : "Chain ID: N/A" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_ui_utils10.cn)("flex items-center gap-2", fullWidth && "w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_ui_utils10.cn)("flex flex-col", fullWidth && "flex-1"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_ui_utils10.cn)(sizeProps.textSize, "font-medium"), children: (0, import_ui_utils10.truncateMiddle)(address, 4, 4) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_ui_utils10.cn)(sizeProps.subTextSize, "text-muted-foreground -mt-0.5"), children: chainId ? `Chain ID: ${chainId}` : "Chain ID: N/A" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_ui_components3.Button,
       {
         onClick: () => disconnect2(),
-        variant: "ghost",
+        variant: variant || "ghost",
         size: "icon",
-        className: "size-6 p-0",
+        className: (0, import_ui_utils10.cn)(sizeProps.iconButtonSize, "p-0"),
         title: "Disconnect wallet",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.LogOut, { className: "size-3.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.LogOut, { className: sizeProps.iconSize })
       }
     )
   ] });
@@ -2199,13 +2235,33 @@ var import_ui_components4 = require("@openzeppelin/ui-components");
 var import_ui_react4 = require("@openzeppelin/ui-react");
 var import_ui_utils11 = require("@openzeppelin/ui-utils");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var CustomNetworkSwitcher = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NetworkSwitcherContent, { className }) });
+var CustomNetworkSwitcher = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SafeWagmiComponent, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    NetworkSwitcherContent,
+    {
+      className,
+      size,
+      variant,
+      fullWidth
+    }
+  ) });
 };
-var NetworkSwitcherContent = ({ className }) => {
+var NetworkSwitcherContent = ({
+  className,
+  size,
+  variant,
+  fullWidth
+}) => {
   const { isConnected } = (0, import_ui_react4.useDerivedAccountStatus)();
   const { currentChainId, availableChains: unknownChains } = (0, import_ui_react4.useDerivedChainInfo)();
   const { switchChain: switchChain2, isSwitching: isPending, error } = (0, import_ui_react4.useDerivedSwitchChainStatus)();
+  const sizeProps = (0, import_ui_utils11.getWalletNetworkSwitcherSizeProps)(size);
+  const variantClassName = (0, import_ui_utils11.getWalletNetworkSwitcherVariantClassName)(variant);
   const typedAvailableChains = unknownChains;
   if (!isConnected || !switchChain2 || typedAvailableChains.length === 0) {
     return null;
@@ -2217,7 +2273,7 @@ var NetworkSwitcherContent = ({ className }) => {
   };
   const currentChain = typedAvailableChains.find((chain) => chain.id === currentChainId);
   const currentChainName = currentChain?.name || "Network";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_ui_utils11.cn)("flex items-center", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_ui_utils11.cn)("flex items-center", fullWidth && "w-full", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_ui_components4.Select,
       {
@@ -2225,7 +2281,17 @@ var NetworkSwitcherContent = ({ className }) => {
         onValueChange: (value) => handleNetworkChange(Number(value)),
         disabled: isPending || typedAvailableChains.length === 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui_components4.SelectTrigger, { className: "h-8 text-xs px-2 min-w-[90px] max-w-[120px]", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui_components4.SelectValue, { placeholder: "Network", children: currentChainName }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_ui_components4.SelectTrigger,
+            {
+              className: (0, import_ui_utils11.cn)(
+                sizeProps.triggerClassName,
+                variantClassName,
+                fullWidth && "w-full max-w-none"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui_components4.SelectValue, { placeholder: "Network", children: currentChainName })
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_ui_components4.SelectContent,
             {
@@ -2233,13 +2299,21 @@ var NetworkSwitcherContent = ({ className }) => {
               sideOffset: 5,
               align: "start",
               className: "w-auto min-w-[160px] max-h-[300px]",
-              children: typedAvailableChains.map((chain) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui_components4.SelectItem, { value: chain.id.toString(), className: "text-xs py-1.5", children: chain.name }, chain.id))
+              children: typedAvailableChains.map((chain) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_ui_components4.SelectItem,
+                {
+                  value: chain.id.toString(),
+                  className: sizeProps.itemClassName,
+                  children: chain.name
+                },
+                chain.id
+              ))
             }
           )
         ]
       }
     ),
-    isPending && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-muted-foreground ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Loader2, { className: "h-3 w-3 animate-spin" }) }),
+    isPending && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Loader2, { className: (0, import_ui_utils11.cn)(sizeProps.loaderSize, "animate-spin") }) }),
     error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-red-500 ml-2", children: "!" })
   ] });
 };
@@ -2309,15 +2383,16 @@ var RainbowKitConnectButton = (props) => {
       }
     };
   }, []);
+  const sizeProps = (0, import_ui_utils12.getWalletButtonSizeProps)(props.size);
   const renderLoadingPlaceholder = (message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     import_ui_components5.Button,
     {
       disabled: true,
-      variant: "outline",
-      size: "sm",
-      className: (0, import_ui_utils12.cn)("h-8 px-2 text-xs", props.className),
+      variant: props.variant || "outline",
+      size: sizeProps.size,
+      className: (0, import_ui_utils12.cn)(sizeProps.className, props.fullWidth && "w-full", props.className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Loader2, { className: "h-3.5 w-3.5 animate-spin mr-1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Loader2, { className: (0, import_ui_utils12.cn)(sizeProps.iconSize, "animate-spin mr-1.5") }),
         message
       ]
     }