import { jsx as _jsx } from "react/jsx-runtime";
import ImgPowerhouse from "@powerhousedao/design-system/assets/powerhouse-rounded.png";
import { useEnsAvatar, useEnsName } from "wagmi";
export function ENSAvatar(props) {
    const { address, chainId = 1, size = "14px" } = props;
    const style = {
        width: size,
        height: size,
    };
    const ensNameResult = useEnsName({ address, chainId });
    const name = ensNameResult.data ?? undefined;
    const ensAvatarResult = useEnsAvatar({ name });
    const avatarUrl = ensAvatarResult.data ?? ImgPowerhouse;
    const isLoading = ensNameResult.isLoading || ensAvatarResult.isLoading;
    if (isLoading)
        return (_jsx("div", { className: "fade-out flex-none animate-pulse rounded-full bg-gray-400", style: style }));
    return (_jsx("img", { alt: "ENS Avatar", className: "flex-none rounded-full object-contain", src: avatarUrl, style: style }));
}
//# sourceMappingURL=ens-avatar.js.map