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

The best way to connect a wallet

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

// src/components/Avatar/EmojiAvatar.tsx
import React, { useEffect, useMemo, useState } from "react";
var EmojiAvatar = ({ address, ensImage, size }) => {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    if (ensImage) {
      const img = new Image();
      img.src = ensImage;
      img.onload = () => setLoaded(true);
    }
  }, [ensImage]);
  const { color: backgroundColor, emoji } = useMemo(
    () => emojiAvatarForAddress(address),
    [address]
  );
  return ensImage ? loaded ? /* @__PURE__ */ React.createElement(
    Box,
    {
      backgroundSize: "cover",
      borderRadius: "full",
      position: "absolute",
      style: {
        backgroundImage: `url(${ensImage})`,
        backgroundPosition: "center",
        height: size,
        width: size
      }
    }
  ) : /* @__PURE__ */ React.createElement(
    Box,
    {
      alignItems: "center",
      backgroundSize: "cover",
      borderRadius: "full",
      color: "modalText",
      display: "flex",
      justifyContent: "center",
      position: "absolute",
      style: {
        height: size,
        width: size
      }
    },
    /* @__PURE__ */ React.createElement(SpinnerIcon, null)
  ) : /* @__PURE__ */ React.createElement(
    Box,
    {
      alignItems: "center",
      display: "flex",
      justifyContent: "center",
      overflow: "hidden",
      style: {
        ...!ensImage && { backgroundColor },
        height: size,
        width: size
      }
    },
    emoji
  );
};

export {
  EmojiAvatar
};