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

The best way to connect a wallet

"use client";
import {
  useRainbowKitChains
} from "./chunk-BI56UNYD.js";
import {
  I18nContext
} from "./chunk-E5IRXM5F.js";
import {
  MenuButton
} from "./chunk-4LDQCPJF.js";
import {
  Text
} from "./chunk-32RBZPUM.js";
import {
  AsyncImage
} from "./chunk-L5QBG7AY.js";
import {
  isMobile
} from "./chunk-N6EWR2LO.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/ChainModal/Chain.tsx
import React, { Fragment, useContext } from "react";
var Chain = ({
  chainId,
  currentChainId,
  switchChain,
  chainIconSize,
  isLoading,
  src,
  name,
  iconBackground,
  idx
}) => {
  const mobile = isMobile();
  const { i18n } = useContext(I18nContext);
  const rainbowkitChains = useRainbowKitChains();
  const isCurrentChain = currentChainId === chainId;
  return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
    MenuButton,
    {
      currentlySelected: isCurrentChain,
      onClick: isCurrentChain ? void 0 : () => switchChain({ chainId }),
      testId: `chain-option-${chainId}`
    },
    /* @__PURE__ */ React.createElement(Box, { fontFamily: "body", fontSize: "16", fontWeight: "bold" }, /* @__PURE__ */ React.createElement(
      Box,
      {
        alignItems: "center",
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between"
      },
      /* @__PURE__ */ React.createElement(
        Box,
        {
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
          gap: "4",
          height: chainIconSize
        },
        src && /* @__PURE__ */ React.createElement(Box, { height: "full", marginRight: "8" }, /* @__PURE__ */ React.createElement(
          AsyncImage,
          {
            alt: name,
            background: iconBackground,
            borderRadius: "full",
            height: chainIconSize,
            src,
            width: chainIconSize,
            testId: `chain-option-${chainId}-icon`
          }
        )),
        /* @__PURE__ */ React.createElement("div", null, name ?? name)
      ),
      isCurrentChain && /* @__PURE__ */ React.createElement(
        Box,
        {
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
          marginRight: "6"
        },
        /* @__PURE__ */ React.createElement(Text, { color: "accentColorForeground", size: "14", weight: "medium" }, i18n.t("chains.connected")),
        /* @__PURE__ */ React.createElement(
          Box,
          {
            background: "connectionIndicator",
            borderColor: "selectedOptionBorder",
            borderRadius: "full",
            borderStyle: "solid",
            borderWidth: "1",
            height: "8",
            marginLeft: "8",
            width: "8"
          }
        )
      ),
      isLoading && /* @__PURE__ */ React.createElement(
        Box,
        {
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
          marginRight: "6"
        },
        /* @__PURE__ */ React.createElement(Text, { color: "modalText", size: "14", weight: "medium" }, i18n.t("chains.confirm")),
        /* @__PURE__ */ React.createElement(
          Box,
          {
            background: "standby",
            borderRadius: "full",
            height: "8",
            marginLeft: "8",
            width: "8"
          }
        )
      )
    ))
  ), mobile && idx < rainbowkitChains.length - 1 && /* @__PURE__ */ React.createElement(Box, { background: "generalBorderDim", height: "1", marginX: "8" }));
};
var Chain_default = Chain;

export {
  Chain_default
};