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

The best way to connect a wallet

"use client";
import {
  useIsMounted
} from "./chunk-ZLB3VV6R.js";
import {
  useAccountModal,
  useChainModal,
  useConnectModal,
  useModalState,
  useProfile
} from "./chunk-EIFPYXE7.js";
import {
  useShowBalance
} from "./chunk-AN42NTNH.js";
import {
  useAuthenticationStatus
} from "./chunk-HV6CXRKE.js";
import {
  ShowRecentTransactionsContext
} from "./chunk-N5355GF6.js";
import {
  formatAddress
} from "./chunk-ZIRE6O5L.js";
import {
  formatENS
} from "./chunk-WTZVO22T.js";
import {
  abbreviateETHBalance
} from "./chunk-XMFDM2QV.js";
import {
  useRecentTransactions
} from "./chunk-ZDHXDPKZ.js";
import {
  useRainbowKitChainsById
} from "./chunk-BI56UNYD.js";
import {
  isMobile
} from "./chunk-N6EWR2LO.js";
import {
  useAsyncImage
} from "./chunk-RFBRD22G.js";
import {
  normalizeResponsiveValue
} from "./chunk-RFUL46NX.js";

// src/components/ConnectButton/ConnectButtonRenderer.tsx
import React, { useContext } from "react";
import { useAccount, useConfig } from "wagmi";
var noop = () => {
};
function ConnectButtonRenderer({
  children
}) {
  const isMounted = useIsMounted();
  const { address } = useAccount();
  const { chainId } = useAccount();
  const { chains: wagmiChains } = useConfig();
  const isCurrentChainSupported = wagmiChains.some(
    (chain) => chain.id === chainId
  );
  const rainbowkitChainsById = useRainbowKitChainsById();
  const authenticationStatus = useAuthenticationStatus() ?? void 0;
  const rainbowKitChain = chainId ? rainbowkitChainsById[chainId] : void 0;
  const chainName = rainbowKitChain?.name ?? void 0;
  const chainIconUrl = rainbowKitChain?.iconUrl ?? void 0;
  const chainIconBackground = rainbowKitChain?.iconBackground ?? void 0;
  const resolvedChainIconUrl = useAsyncImage(chainIconUrl);
  const showRecentTransactions = useContext(ShowRecentTransactionsContext);
  const hasPendingTransactions = useRecentTransactions().some(({ status }) => status === "pending") && showRecentTransactions;
  const { showBalance } = useShowBalance();
  const computeShouldShowBalance = () => {
    if (typeof showBalance === "boolean") {
      return showBalance;
    }
    if (showBalance) {
      return normalizeResponsiveValue(showBalance)[isMobile() ? "smallScreen" : "largeScreen"];
    }
    return true;
  };
  const shouldShowBalance = computeShouldShowBalance();
  const { balance, ensAvatar, ensName } = useProfile({
    address,
    includeBalance: shouldShowBalance
  });
  const displayBalance = balance ? `${abbreviateETHBalance(Number.parseFloat(balance.formatted))} ${balance.symbol}` : void 0;
  const { openConnectModal } = useConnectModal();
  const { openChainModal } = useChainModal();
  const { openAccountModal } = useAccountModal();
  const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({
    account: address ? {
      address,
      balanceDecimals: balance?.decimals,
      balanceFormatted: balance?.formatted,
      balanceSymbol: balance?.symbol,
      displayBalance,
      displayName: ensName ? formatENS(ensName) : formatAddress(address),
      ensAvatar: ensAvatar ?? void 0,
      ensName: ensName ?? void 0,
      hasPendingTransactions
    } : void 0,
    accountModalOpen,
    authenticationStatus,
    chain: chainId ? {
      hasIcon: Boolean(chainIconUrl),
      iconBackground: chainIconBackground,
      iconUrl: resolvedChainIconUrl,
      id: chainId,
      name: chainName,
      unsupported: !isCurrentChainSupported
    } : void 0,
    chainModalOpen,
    connectModalOpen,
    mounted: isMounted(),
    openAccountModal: openAccountModal ?? noop,
    openChainModal: openChainModal ?? noop,
    openConnectModal: openConnectModal ?? noop
  }));
}
ConnectButtonRenderer.displayName = "ConnectButton.Custom";

export {
  ConnectButtonRenderer
};