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

The best way to connect a wallet

"use client";
import {
  AvatarContext
} from "./chunk-J3WV5IBQ.js";
import {
  SpinnerIcon
} from "./chunk-5NIYHKHP.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/Avatar/Avatar.tsx
import React, { useContext } from "react";
function Avatar({ address, imageUrl, loading, size }) {
  const AvatarComponent = useContext(AvatarContext);
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      "aria-hidden": true,
      borderRadius: "full",
      overflow: "hidden",
      position: "relative",
      style: {
        height: `${size}px`,
        width: `${size}px`
      },
      userSelect: "none"
    },
    /* @__PURE__ */ React.createElement(
      Box,
      {
        alignItems: "center",
        borderRadius: "full",
        display: "flex",
        justifyContent: "center",
        overflow: "hidden",
        position: "absolute",
        style: {
          fontSize: `${Math.round(size * 0.55)}px`,
          height: `${size}px`,
          transform: loading ? "scale(0.72)" : void 0,
          transition: ".25s ease",
          transitionDelay: loading ? void 0 : ".1s",
          width: `${size}px`,
          willChange: "transform"
        },
        userSelect: "none"
      },
      /* @__PURE__ */ React.createElement(AvatarComponent, { address, ensImage: imageUrl, size })
    ),
    loading && /* @__PURE__ */ React.createElement(
      Box,
      {
        color: "accentColor",
        display: "flex",
        height: "full",
        position: "absolute",
        width: "full"
      },
      /* @__PURE__ */ React.createElement(SpinnerIcon, { height: "100%", width: "100%" })
    )
  );
}

export {
  Avatar
};