@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
22 lines • 1.82 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Badge } from '@mui/material';
import { useChain } from '../../hooks/useChain.js';
import { useToken } from '../../hooks/useToken.js';
import { AvatarBadgedSkeleton } from './Avatar.js';
import { AvatarMasked } from './Avatar.style.js';
import { ChainBadgeContent } from './ChainBadgeContent.js';
export const TokenAvatar = ({ token, chain, isLoading, sx, tokenAvatarSize = 40, chainAvatarSize = 16, }) => {
if (!chain || !token?.logoURI) {
return (_jsx(TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx, tokenAvatarSize: tokenAvatarSize, chainAvatarSize: chainAvatarSize }));
}
return (_jsx(TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx, avatarSize: tokenAvatarSize, badgeSize: chainAvatarSize }));
};
const TokenAvatarFallback = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {
const { chain } = useChain(token?.chainId);
const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
return (_jsx(TokenAvatarBase, { token: chainToken ?? token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx, avatarSize: tokenAvatarSize, badgeSize: chainAvatarSize }));
};
const TokenAvatarBase = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {
return isLoading ? (_jsx(AvatarBadgedSkeleton, { avatarSize: avatarSize, badgeSize: badgeSize })) : (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(ChainBadgeContent, { chain: chain, size: badgeSize }), sx: sx, children: _jsx(AvatarMasked, { src: token?.logoURI, alt: token?.symbol, avatarSize: avatarSize, badgeSize: badgeSize, children: token?.symbol?.[0] }) }));
};
//# sourceMappingURL=TokenAvatar.js.map