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

The best way to connect a wallet

"use client";
import {
  ShowRecentTransactionsContext
} from "./chunk-N5355GF6.js";
import {
  CloseButton
} from "./chunk-6EUFMSBE.js";
import {
  formatAddress
} from "./chunk-ZIRE6O5L.js";
import {
  formatENS
} from "./chunk-WTZVO22T.js";
import {
  abbreviateETHBalance
} from "./chunk-XMFDM2QV.js";
import {
  TxList
} from "./chunk-ZDHXDPKZ.js";
import {
  ProfileDetailsAction
} from "./chunk-7EBUBDOG.js";
import {
  CopiedIcon
} from "./chunk-X6SK7DNH.js";
import {
  CopyIcon
} from "./chunk-ML6MHBKD.js";
import {
  DisconnectIcon
} from "./chunk-W4SS7G4J.js";
import {
  I18nContext
} from "./chunk-E5IRXM5F.js";
import {
  Text
} from "./chunk-32RBZPUM.js";
import {
  isMobile
} from "./chunk-N6EWR2LO.js";
import {
  Avatar
} from "./chunk-B7MBD3LJ.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/ProfileDetails/ProfileDetails.tsx
import React, { useCallback, useContext, useEffect, useState } from "react";
function ProfileDetails({
  address,
  ensAvatar,
  ensName,
  balance,
  onClose,
  onDisconnect
}) {
  const showRecentTransactions = useContext(ShowRecentTransactionsContext);
  const { i18n } = useContext(I18nContext);
  const [copiedAddress, setCopiedAddress] = useState(false);
  const copyAddressAction = useCallback(() => {
    if (address) {
      navigator.clipboard.writeText(address);
      setCopiedAddress(true);
    }
  }, [address]);
  useEffect(() => {
    if (copiedAddress) {
      const timer = setTimeout(() => {
        setCopiedAddress(false);
      }, 1500);
      return () => clearTimeout(timer);
    }
  }, [copiedAddress]);
  if (!address) {
    return null;
  }
  const accountName = ensName ? formatENS(ensName) : formatAddress(address);
  const ethBalance = balance?.formatted;
  const displayBalance = ethBalance ? abbreviateETHBalance(Number.parseFloat(ethBalance)) : void 0;
  const titleId = "rk_profile_title";
  const mobile = isMobile();
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { background: "profileForeground", padding: "16" }, /* @__PURE__ */ React.createElement(
    Box,
    {
      alignItems: "center",
      display: "flex",
      flexDirection: "column",
      gap: mobile ? "16" : "12",
      justifyContent: "center",
      margin: "8",
      style: { textAlign: "center" }
    },
    /* @__PURE__ */ React.createElement(
      Box,
      {
        style: {
          position: "absolute",
          right: 16,
          top: 16,
          willChange: "transform"
        }
      },
      /* @__PURE__ */ React.createElement(CloseButton, { onClose })
    ),
    " ",
    /* @__PURE__ */ React.createElement(Box, { marginTop: mobile ? "24" : "0" }, /* @__PURE__ */ React.createElement(
      Avatar,
      {
        address,
        imageUrl: ensAvatar,
        size: mobile ? 82 : 74
      }
    )),
    /* @__PURE__ */ React.createElement(
      Box,
      {
        display: "flex",
        flexDirection: "column",
        gap: mobile ? "4" : "0",
        textAlign: "center"
      },
      /* @__PURE__ */ React.createElement(Box, { textAlign: "center" }, /* @__PURE__ */ React.createElement(
        Text,
        {
          as: "h1",
          color: "modalText",
          id: titleId,
          size: mobile ? "20" : "18",
          weight: "heavy"
        },
        accountName
      )),
      !!balance && /* @__PURE__ */ React.createElement(Box, { textAlign: "center" }, /* @__PURE__ */ React.createElement(
        Text,
        {
          as: "h1",
          color: "modalTextSecondary",
          id: titleId,
          size: mobile ? "16" : "14",
          weight: "semibold"
        },
        displayBalance,
        " ",
        balance.symbol
      ))
    )
  ), /* @__PURE__ */ React.createElement(
    Box,
    {
      display: "flex",
      flexDirection: "row",
      gap: "8",
      margin: "2",
      marginTop: "16"
    },
    /* @__PURE__ */ React.createElement(
      ProfileDetailsAction,
      {
        action: copyAddressAction,
        icon: copiedAddress ? /* @__PURE__ */ React.createElement(CopiedIcon, null) : /* @__PURE__ */ React.createElement(CopyIcon, null),
        label: copiedAddress ? i18n.t("profile.copy_address.copied") : i18n.t("profile.copy_address.label")
      }
    ),
    /* @__PURE__ */ React.createElement(
      ProfileDetailsAction,
      {
        action: onDisconnect,
        icon: /* @__PURE__ */ React.createElement(DisconnectIcon, null),
        label: i18n.t("profile.disconnect.label"),
        testId: "disconnect-button"
      }
    )
  )), showRecentTransactions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { background: "generalBorder", height: "1", marginTop: "-1" }), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(TxList, { address })))));
}

export {
  ProfileDetails
};