@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
67 lines (64 loc) • 2.78 kB
JavaScript
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';
/** Icon for an Ethereum address. Supports ENS names and avatars. */
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: name,
config: ensFallbackConfig,
});
const { data: ensName } = useEnsName({
chainId: 1,
address: address ?? ensAddress ?? undefined,
config: ensFallbackConfig,
});
const { data: ensAvatar } = useEnsAvatar({
chainId: 1,
name: normalize(ensName ?? ""),
config: ensFallbackConfig,
});
const ens = {
address: ensAddress ?? address,
name: ensName ?? name,
avatar: ensAvatar ?? undefined,
};
useEffect(() => {
if (!(imageRef.current &&
imageRef.current.complete &&
imageRef.current.naturalHeight !== 0)) {
setLoaded(false);
}
}, [ensAvatar]);
if (!isMounted)
return jsx("div", { style: { width: size, height: size, borderRadius: radius } });
if (context.options?.customAvatar)
return (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 (jsx(ResetContainer, { style: { pointerEvents: "none" }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius }) }));
return (jsx(ResetContainer, { style: { pointerEvents: "none" }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius, children: jsx(ImageContainer, { ref: imageRef, src: ens.avatar, alt: ens.name, onLoad: () => setLoaded(true), "$loaded": loaded }) }) }));
};
export { Avatar as default };
//# sourceMappingURL=index.js.map