1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/component-library/avatar-account/avatar-account.js
Nidhi Kumari e72dfad21a
added AvatarAccount component (#15795)
* added AvatarAccount component

* updated avatar account component and README

* updated lint errors

* updated avatar account with types

* updated Jazzicon lint errors

* removed unused imports

* updated type prop and Blockie

* removed unused exports

* updated jazzicon styles

* fixed overflow in jazzicon

* updated avatar account component

* updated avatar account stories with types and size stories

* updated test for avatar account

* updated tests for avatar account

* Adding `TextFieldBase` component (#16043)

* Adding TextInputBase component

* Removing keyup and keydown props, tests and docs

* removing showClear from stories

* removing unneeded css

* simplifying uncontrolled vs controlled to work

* Fortifying maxLength test

* Lint fix for test

* Doc, style and prop updates

* Updating constant names with 'base'

* Adding a background color

* Adding a background color to input

* Adding ast-types to resolutions (#16103)

Co-authored-by: George Marshall <george.marshall@consensys.net>
2022-10-07 21:23:40 +05:30

55 lines
1.5 KiB
JavaScript

import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Jazzicon from '../../ui/jazzicon/jazzicon.component';
import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
import { BaseAvatar } from '../base-avatar';
import { SIZES } from '../../../helpers/constants/design-system';
import { DIAMETERS, TYPES } from './avatar-account.constants';
export const AvatarAccount = ({ size, address, className, type, ...props }) => {
return (
<BaseAvatar
size={size}
className={classnames('avatar-account', className)}
{...props}
>
{type === 'Jazzicon' ? (
<Jazzicon
className={classnames('avatar-account__jazzicon')}
address={address}
diameter={DIAMETERS[size]}
/>
) : (
<BlockieIdenticon
address={address}
diameter={DIAMETERS[size]}
borderRadius="50%"
/>
)}
</BaseAvatar>
);
};
AvatarAccount.propTypes = {
/**
* The size of the AvatarAccount.
* Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
* Defaults to SIZES.MD
*/
size: PropTypes.oneOf(Object.values(SIZES)),
/**
* The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
*/
type: PropTypes.oneOf(Object.values(TYPES)),
/**
* Address used for generating random image
*/
address: PropTypes.string,
/**
* Add custom css class
*/
className: PropTypes.string,
};