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

The best way to connect a wallet

"use client";
import {
  useCoolMode
} from "./chunk-FYSZGIQO.js";
import {
  I18nContext
} from "./chunk-E5IRXM5F.js";
import {
  AsyncImage
} from "./chunk-CUM2H4AA.js";
import {
  Text
} from "./chunk-32RBZPUM.js";
import {
  touchableStyles
} from "./chunk-2W63IDAD.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/ModalSelection/ModalSelection.tsx
import React from "react";

// src/components/ModalSelection/ModalSelection.css.ts
var transparentBorder = "g5kl0l0";

// src/components/ModalSelection/ModalSelection.tsx
var ModalSelection = ({
  as = "button",
  currentlySelected = false,
  iconBackground,
  iconUrl,
  name,
  onClick,
  ready,
  recent,
  testId,
  isRainbowKitConnector,
  ...urlProps
}) => {
  const coolModeRef = useCoolMode(iconUrl);
  const [isMouseOver, setIsMouseOver] = React.useState(false);
  const { i18n } = React.useContext(I18nContext);
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      display: "flex",
      flexDirection: "column",
      onMouseEnter: () => setIsMouseOver(true),
      onMouseLeave: () => setIsMouseOver(false),
      ref: coolModeRef
    },
    /* @__PURE__ */ React.createElement(
      Box,
      {
        as,
        borderRadius: "menuButton",
        borderStyle: "solid",
        borderWidth: "1",
        className: !currentlySelected ? [
          transparentBorder,
          touchableStyles({
            active: "shrink"
          })
        ] : void 0,
        disabled: currentlySelected,
        onClick,
        padding: "5",
        style: { willChange: "transform" },
        testId,
        transition: "default",
        width: "full",
        ...currentlySelected ? {
          background: "accentColor",
          borderColor: "selectedOptionBorder",
          boxShadow: "selectedWallet"
        } : {
          background: { hover: "menuItemBackground" }
        },
        ...urlProps
      },
      /* @__PURE__ */ React.createElement(
        Box,
        {
          color: currentlySelected ? "accentColorForeground" : "modalText",
          disabled: !ready,
          fontFamily: "body",
          fontSize: "16",
          fontWeight: "bold",
          transition: "default"
        },
        /* @__PURE__ */ React.createElement(Box, { alignItems: "center", display: "flex", flexDirection: "row", gap: "12" }, /* @__PURE__ */ React.createElement(
          AsyncImage,
          {
            background: iconBackground,
            ...!isMouseOver && isRainbowKitConnector ? { borderColor: "actionButtonBorder" } : {},
            useAsImage: !isRainbowKitConnector,
            borderRadius: "6",
            height: "28",
            src: iconUrl,
            width: "28"
          }
        ), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
          Box,
          {
            style: { marginTop: recent ? -2 : void 0 },
            maxWidth: "200"
          },
          name
        ), recent && /* @__PURE__ */ React.createElement(
          Text,
          {
            color: currentlySelected ? "accentColorForeground" : "accentColor",
            size: "12",
            style: { lineHeight: 1, marginTop: -1 },
            weight: "medium"
          },
          i18n.t("connect.recent")
        )))
      )
    )
  );
};
ModalSelection.displayName = "ModalSelection";

export {
  ModalSelection
};