@daimo/pay/build/src/components/Common/Avatar/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
import { EnsAvatar, ImageContainer } from './styles.js';
import { normalize } from 'viem/ens';
import { useEnsAddress, useEnsName, useEnsAvatar } from 'wagmi';
import { useEnsFallbackConfig } from '../../../hooks/useEnsFallbackConfig.js';
import useIsMounted from '../../../hooks/useIsMounted.js';
import { ResetContainer } from '../../../styles/index.js';
import { usePayContext } from '../../../hooks/usePayContext.js';

const Avatar = ({ address, name, size = 96, radius = 96 }) => {
  const isMounted = useIsMounted();
  const context = usePayContext();
  const imageRef = useRef(null);
  const [loaded, setLoaded] = useState(true);
  const ensFallbackConfig = useEnsFallbackConfig();
  const { data: ensAddress } = useEnsAddress({
    chainId: 1,
    name,
    config: ensFallbackConfig
  });
  const { data: ensName } = useEnsName({
    chainId: 1,
    address: address ?? ensAddress ?? void 0,
    config: ensFallbackConfig
  });
  const { data: ensAvatar } = useEnsAvatar({
    chainId: 1,
    name: normalize(ensName ?? ""),
    config: ensFallbackConfig
  });
  const ens = {
    address: ensAddress ?? address,
    name: ensName ?? name,
    avatar: ensAvatar ?? void 0
  };
  useEffect(() => {
    if (!(imageRef.current && imageRef.current.complete && imageRef.current.naturalHeight !== 0)) {
      setLoaded(false);
    }
  }, [ensAvatar]);
  if (!isMounted)
    return /* @__PURE__ */ jsx("div", { style: { width: size, height: size, borderRadius: radius } });
  if (context.options?.customAvatar)
    return /* @__PURE__ */ jsx(
      "div",
      {
        style: {
          width: size,
          height: size,
          borderRadius: radius,
          overflow: "hidden"
        },
        children: context.options?.customAvatar({
          address: address ?? ens?.address,
          ensName: name ?? ens?.name,
          ensImage: ens?.avatar,
          size,
          radius
        })
      }
    );
  if (!ens.name || !ens.avatar)
    return /* @__PURE__ */ jsx(ResetContainer, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx(EnsAvatar, { $size: size, $seed: ens.address, $radius: radius }) });
  return /* @__PURE__ */ jsx(ResetContainer, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx(EnsAvatar, { $size: size, $seed: ens.address, $radius: radius, children: /* @__PURE__ */ jsx(
    ImageContainer,
    {
      ref: imageRef,
      src: ens.avatar,
      alt: ens.name,
      onLoad: () => setLoaded(true),
      $loaded: loaded
    }
  ) }) });
};

export { Avatar as default };
//# sourceMappingURL=index.js.map