mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
93 lines
2.2 KiB
JavaScript
93 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { useSelector } from 'react-redux';
|
|
import {
|
|
TextColor,
|
|
IconColor,
|
|
AlignItems,
|
|
Display,
|
|
JustifyContent,
|
|
BackgroundColor,
|
|
} from '../../../../helpers/constants/design-system';
|
|
import { getSnapName } from '../../../../helpers/utils/util';
|
|
import {
|
|
AvatarFavicon,
|
|
BadgeWrapper,
|
|
BadgeWrapperPosition,
|
|
AvatarIcon,
|
|
AvatarBase,
|
|
IconName,
|
|
IconSize,
|
|
} from '../../../component-library';
|
|
import { getTargetSubjectMetadata } from '../../../../selectors';
|
|
|
|
const SnapAvatar = ({
|
|
snapId,
|
|
badgeSize = IconSize.Sm,
|
|
avatarSize = IconSize.Lg,
|
|
borderWidth = 2,
|
|
className,
|
|
}) => {
|
|
const subjectMetadata = useSelector((state) =>
|
|
getTargetSubjectMetadata(state, snapId),
|
|
);
|
|
|
|
const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
|
|
|
|
const iconUrl = subjectMetadata?.iconUrl;
|
|
|
|
const fallbackIcon = friendlyName && friendlyName[0] ? friendlyName[0] : '?';
|
|
|
|
return (
|
|
<BadgeWrapper
|
|
className={classnames('snap-avatar', className)}
|
|
badge={
|
|
<AvatarIcon
|
|
iconName={IconName.Snaps}
|
|
size={badgeSize}
|
|
backgroundColor={IconColor.infoDefault}
|
|
borderColor={BackgroundColor.backgroundDefault}
|
|
borderWidth={borderWidth}
|
|
iconProps={{
|
|
size: badgeSize,
|
|
color: IconColor.infoInverse,
|
|
}}
|
|
/>
|
|
}
|
|
position={BadgeWrapperPosition.bottomRight}
|
|
>
|
|
{iconUrl ? (
|
|
<AvatarFavicon size={avatarSize} src={iconUrl} name={friendlyName} />
|
|
) : (
|
|
<AvatarBase
|
|
size={avatarSize}
|
|
display={Display.Flex}
|
|
alignItems={AlignItems.center}
|
|
justifyContent={JustifyContent.center}
|
|
color={TextColor.textAlternative}
|
|
style={{ borderWidth: '0px' }}
|
|
>
|
|
{fallbackIcon}
|
|
</AvatarBase>
|
|
)}
|
|
</BadgeWrapper>
|
|
);
|
|
};
|
|
|
|
SnapAvatar.propTypes = {
|
|
/**
|
|
* The id of the snap
|
|
*/
|
|
snapId: PropTypes.string,
|
|
badgeSize: PropTypes.string,
|
|
avatarSize: PropTypes.string,
|
|
borderWidth: PropTypes.number,
|
|
/**
|
|
* The className of the SnapAvatar
|
|
*/
|
|
className: PropTypes.string,
|
|
};
|
|
|
|
export default SnapAvatar;
|