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

The best way to connect a wallet

"use client";
import {
  DropdownIcon
} from "./chunk-6L6B47M7.js";
import {
  ConnectButtonRenderer
} from "./chunk-BZN36TXO.js";
import {
  useConnectionStatus
} from "./chunk-DUF2JG25.js";
import {
  useShowBalance
} from "./chunk-AN42NTNH.js";
import {
  useRainbowKitChains
} from "./chunk-BI56UNYD.js";
import {
  I18nContext
} from "./chunk-E5IRXM5F.js";
import {
  touchableStyles
} from "./chunk-2W63IDAD.js";
import {
  AsyncImage
} from "./chunk-Z2CMCMO5.js";
import {
  isMobile
} from "./chunk-N6EWR2LO.js";
import {
  Avatar
} from "./chunk-YNXJ5G4C.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";
import {
  mapResponsiveValue,
  normalizeResponsiveValue
} from "./chunk-RFUL46NX.js";

// src/components/ConnectButton/ConnectButton.tsx
import React, { useContext, useEffect, useState } from "react";
var defaultProps = {
  accountStatus: "full",
  chainStatus: { largeScreen: "full", smallScreen: "icon" },
  label: "Connect Wallet",
  showBalance: { largeScreen: true, smallScreen: false }
};
function ConnectButton({
  accountStatus = defaultProps.accountStatus,
  chainStatus = defaultProps.chainStatus,
  label = defaultProps.label,
  showBalance = defaultProps.showBalance
}) {
  const chains = useRainbowKitChains();
  const connectionStatus = useConnectionStatus();
  const { setShowBalance } = useShowBalance();
  const [ready, setReady] = useState(false);
  const { i18n } = useContext(I18nContext);
  useEffect(() => {
    setShowBalance(showBalance);
    if (!ready) setReady(true);
  }, [showBalance, setShowBalance]);
  return ready ? /* @__PURE__ */ React.createElement(ConnectButtonRenderer, null, ({
    account,
    chain,
    mounted,
    openAccountModal,
    openChainModal,
    openConnectModal
  }) => {
    const ready2 = mounted && connectionStatus !== "loading";
    const unsupportedChain = chain?.unsupported ?? false;
    return /* @__PURE__ */ React.createElement(
      Box,
      {
        display: "flex",
        gap: "12",
        ...!ready2 && {
          "aria-hidden": true,
          style: {
            opacity: 0,
            pointerEvents: "none",
            userSelect: "none"
          }
        }
      },
      ready2 && account && connectionStatus === "connected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React.createElement(
        Box,
        {
          alignItems: "center",
          "aria-label": "Chain Selector",
          as: "button",
          background: unsupportedChain ? "connectButtonBackgroundError" : "connectButtonBackground",
          borderRadius: "connectButton",
          boxShadow: "connectButton",
          className: touchableStyles({
            active: "shrink",
            hover: "grow"
          }),
          color: unsupportedChain ? "connectButtonTextError" : "connectButtonText",
          display: mapResponsiveValue(
            chainStatus,
            (value) => value === "none" ? "none" : "flex"
          ),
          fontFamily: "body",
          fontWeight: "bold",
          gap: "6",
          key: (
            // Force re-mount to prevent CSS transition
            unsupportedChain ? "unsupported" : "supported"
          ),
          onClick: openChainModal,
          paddingX: "10",
          paddingY: "8",
          testId: unsupportedChain ? "wrong-network-button" : "chain-button",
          transition: "default",
          type: "button"
        },
        unsupportedChain ? /* @__PURE__ */ React.createElement(
          Box,
          {
            alignItems: "center",
            display: "flex",
            height: "24",
            paddingX: "4"
          },
          i18n.t("connect_wallet.wrong_network.label")
        ) : /* @__PURE__ */ React.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React.createElement(
          Box,
          {
            display: mapResponsiveValue(
              chainStatus,
              (value) => value === "full" || value === "icon" ? "block" : "none"
            ),
            height: "24",
            width: "24"
          },
          /* @__PURE__ */ React.createElement(
            AsyncImage,
            {
              alt: chain.name ?? "Chain icon",
              background: chain.iconBackground,
              borderRadius: "full",
              height: "24",
              src: chain.iconUrl,
              width: "24"
            }
          )
        ) : null, /* @__PURE__ */ React.createElement(
          Box,
          {
            display: mapResponsiveValue(chainStatus, (value) => {
              if (value === "icon" && !chain.iconUrl) {
                return "block";
              }
              return value === "full" || value === "name" ? "block" : "none";
            })
          },
          chain.name ?? chain.id
        )),
        /* @__PURE__ */ React.createElement(DropdownIcon, null)
      ), !unsupportedChain && /* @__PURE__ */ React.createElement(
        Box,
        {
          alignItems: "center",
          as: "button",
          background: "connectButtonBackground",
          borderRadius: "connectButton",
          boxShadow: "connectButton",
          className: touchableStyles({
            active: "shrink",
            hover: "grow"
          }),
          color: "connectButtonText",
          display: "flex",
          fontFamily: "body",
          fontWeight: "bold",
          onClick: openAccountModal,
          testId: "account-button",
          transition: "default",
          type: "button"
        },
        account.displayBalance && /* @__PURE__ */ React.createElement(
          Box,
          {
            display: mapResponsiveValue(
              showBalance,
              (value) => value ? "block" : "none"
            ),
            padding: "8",
            paddingLeft: "12"
          },
          account.displayBalance
        ),
        /* @__PURE__ */ React.createElement(
          Box,
          {
            background: normalizeResponsiveValue(showBalance)[isMobile() ? "smallScreen" : "largeScreen"] ? "connectButtonInnerBackground" : "connectButtonBackground",
            borderColor: "connectButtonBackground",
            borderRadius: "connectButton",
            borderStyle: "solid",
            borderWidth: "2",
            color: "connectButtonText",
            fontFamily: "body",
            fontWeight: "bold",
            paddingX: "8",
            paddingY: "6",
            transition: "default"
          },
          /* @__PURE__ */ React.createElement(
            Box,
            {
              alignItems: "center",
              display: "flex",
              gap: "6",
              height: "24"
            },
            /* @__PURE__ */ React.createElement(
              Box,
              {
                display: mapResponsiveValue(
                  accountStatus,
                  (value) => value === "full" || value === "avatar" ? "block" : "none"
                )
              },
              /* @__PURE__ */ React.createElement(
                Avatar,
                {
                  address: account.address,
                  imageUrl: account.ensAvatar,
                  loading: account.hasPendingTransactions,
                  size: 24
                }
              )
            ),
            /* @__PURE__ */ React.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React.createElement(
              Box,
              {
                display: mapResponsiveValue(
                  accountStatus,
                  (value) => value === "full" || value === "address" ? "block" : "none"
                )
              },
              account.displayName
            ), /* @__PURE__ */ React.createElement(DropdownIcon, null))
          )
        )
      )) : /* @__PURE__ */ React.createElement(
        Box,
        {
          as: "button",
          background: "accentColor",
          borderRadius: "connectButton",
          boxShadow: "connectButton",
          className: touchableStyles({
            active: "shrink",
            hover: "grow"
          }),
          color: "accentColorForeground",
          fontFamily: "body",
          fontWeight: "bold",
          height: "40",
          key: "connect",
          onClick: openConnectModal,
          paddingX: "14",
          testId: "connect-button",
          transition: "default",
          type: "button"
        },
        mounted && label === "Connect Wallet" ? i18n.t("connect_wallet.label") : label
      )
    );
  }) : null;
}
ConnectButton.__defaultProps = defaultProps;
ConnectButton.Custom = ConnectButtonRenderer;

export {
  ConnectButton
};