@rainbow-me/rainbowkit/dist/components/chunk-ZO4M6WY7.js

The best way to connect a wallet

"use client";
import {
  WalletButtonRenderer
} from "./chunk-CPNX3FYQ.js";
import {
  I18nContext
} from "./chunk-E5IRXM5F.js";
import {
  touchableStyles
} from "./chunk-2W63IDAD.js";
import {
  SpinnerIcon
} from "./chunk-5NIYHKHP.js";
import {
  AsyncImage
} from "./chunk-Z2CMCMO5.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/WalletButton/WalletButton.tsx
import React, { useContext } from "react";

// src/components/WalletButton/WalletButton.css.ts
var border = "_1y2lnfi0";
var maxWidth = "_1y2lnfi1";

// src/components/WalletButton/WalletButton.tsx
var WalletButton = ({ wallet }) => {
  const { i18n } = useContext(I18nContext);
  return /* @__PURE__ */ React.createElement(WalletButtonRenderer, { wallet }, ({ ready, connect, connected, mounted, connector, loading }) => {
    const isDisabled = !ready || loading;
    const connectorName = connector?.name || "";
    if (!mounted) return;
    return /* @__PURE__ */ React.createElement(
      Box,
      {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        disabled: isDisabled,
        pointerEvents: isDisabled ? "none" : "all"
      },
      /* @__PURE__ */ React.createElement(
        Box,
        {
          as: "button",
          borderRadius: "menuButton",
          borderStyle: "solid",
          borderWidth: "1",
          className: [
            maxWidth,
            border,
            touchableStyles({
              active: "shrink",
              hover: "grow"
            })
          ],
          minHeight: "44",
          onClick: connect,
          disabled: !ready || loading,
          padding: "6",
          style: { willChange: "transform" },
          testId: `wallet-button-${connector?.id || ""}`,
          transition: "default",
          width: "full",
          background: "connectButtonBackground"
        },
        /* @__PURE__ */ React.createElement(
          Box,
          {
            color: "modalText",
            fontFamily: "body",
            fontSize: "16",
            fontWeight: "bold",
            transition: "default",
            display: "flex",
            alignItems: "center"
          },
          /* @__PURE__ */ React.createElement(
            Box,
            {
              alignItems: "center",
              display: "flex",
              flexDirection: "row",
              gap: "12",
              paddingRight: "6"
            },
            /* @__PURE__ */ React.createElement(Box, null, loading ? /* @__PURE__ */ React.createElement(SpinnerIcon, null) : /* @__PURE__ */ React.createElement(
              AsyncImage,
              {
                background: connector?.iconBackground,
                borderRadius: "6",
                height: "28",
                src: connector?.iconUrl,
                width: "28"
              }
            )),
            /* @__PURE__ */ React.createElement(
              Box,
              {
                alignItems: "center",
                display: "flex",
                flexDirection: "column",
                color: "modalText"
              },
              /* @__PURE__ */ React.createElement(Box, { testId: `wallet-button-label-${connector?.id || ""}` }, loading ? i18n.t("connect.status.connecting", {
                wallet: connectorName
              }) : connectorName)
            ),
            connected ? /* @__PURE__ */ React.createElement(
              Box,
              {
                background: "connectionIndicator",
                borderColor: "selectedOptionBorder",
                borderRadius: "full",
                borderStyle: "solid",
                borderWidth: "1",
                height: "8",
                width: "8"
              }
            ) : null
          )
        )
      )
    );
  });
};
WalletButton.Custom = WalletButtonRenderer;

export {
  WalletButton
};