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/account-list-item/account-list-item.js

51 lines
1.4 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import Identicon from '../../ui/identicon';
import AccountMismatchWarning from '../../ui/account-mismatch-warning/account-mismatch-warning.component';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
2020-11-03 00:41:28 +01:00
export default function AccountListItem({
account,
className,
displayAddress = false,
handleClick,
icon = null,
}) {
const { name, address, balance } = account || {};
return (
<div
className={`account-list-item ${className}`}
2020-11-05 16:35:58 +01:00
onClick={() => handleClick?.({ name, address, balance })}
>
<div className="account-list-item__top-row">
<Identicon
address={address}
className="account-list-item__identicon"
diameter={18}
/>
2020-11-03 00:41:28 +01:00
<div className="account-list-item__account-name">{name || address}</div>
2020-11-03 00:41:28 +01:00
{icon && <div className="account-list-item__icon">{icon}</div>}
<AccountMismatchWarning address={address} />
</div>
{displayAddress && name && (
<div className="account-list-item__account-address">
2021-05-17 23:19:39 +02:00
{toChecksumHexAddress(address)}
</div>
)}
</div>
);
}
AccountListItem.propTypes = {
account: PropTypes.object,
className: PropTypes.string,
displayAddress: PropTypes.bool,
handleClick: PropTypes.func,
icon: PropTypes.node,
};