1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/components/app/contact-list/recipient-group/recipient-group.component.js
2022-07-31 13:26:40 -05:00

75 lines
2.0 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Identicon from '../../../ui/identicon';
import { ellipsify } from '../../../../pages/send/send.utils';
function addressesEqual(address1, address2) {
return String(address1).toLowerCase() === String(address2).toLowerCase();
}
export default function RecipientGroup({
label,
items,
onSelect,
selectedAddress,
}) {
if (!items || !items.length) {
return null;
}
return (
<div
className="send__select-recipient-wrapper__group"
data-testid="recipient-group"
>
{label && (
<div className="send__select-recipient-wrapper__group-label">
{label}
</div>
)}
{items.map(({ address, name }) => (
<div
key={address}
onClick={() => onSelect(address, name)}
className={classnames({
'send__select-recipient-wrapper__group-item': !addressesEqual(
address,
selectedAddress,
),
'send__select-recipient-wrapper__group-item--selected':
addressesEqual(address, selectedAddress),
})}
>
<Identicon address={address} diameter={28} />
<div
className="send__select-recipient-wrapper__group-item__content"
data-testid="recipient"
>
<div className="send__select-recipient-wrapper__group-item__title">
{name || ellipsify(address)}
</div>
{name && (
<div className="send__select-recipient-wrapper__group-item__subtitle">
{ellipsify(address)}
</div>
)}
</div>
</div>
))}
</div>
);
}
RecipientGroup.propTypes = {
label: PropTypes.string,
items: PropTypes.arrayOf(
PropTypes.shape({
address: PropTypes.string.isRequired,
name: PropTypes.string,
}),
),
onSelect: PropTypes.func.isRequired,
selectedAddress: PropTypes.string,
};