1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +01:00
metamask-extension/ui/components/app/account-list-item/account-list-item.js
Albert Olivé 057188d155
[MMI] Add code fences in signature-request (#18770)
* Started adding code fences in signature-request

* Finished code fencing

* Improving code

* Fixed storybook and code fences bundle

* Added missing dependency

* Fixed yarn.lock

* Fixing policies

* Updated package.json

* updating lavamoat

* lavamoat fix

* adds missing package

* runs yarn dedupe

* updates method name

* run lavamoat:auto again

* Added more code fences

* updates snapshot

* snapshot updates

* updates mmi packages to lighter versions

* updates mmi packages

* runs lavamoat auto

* updates yarn lock and runs lavamoat auto

* updates yarn lock

* updates targets file

* Removed console log and added tests

---------

Co-authored-by: António Regadas <apregadas@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net>
2023-05-24 13:41:21 +02:00

91 lines
2.5 KiB
JavaScript

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';
export default function AccountListItem({
account,
className,
displayAddress = false,
handleClick,
icon = null,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
hideDefaultMismatchWarning = false,
///: END:ONLY_INCLUDE_IN
}) {
const { name, address, balance } = account || {};
let showDefaultMismatchWarning = true;
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
showDefaultMismatchWarning = !hideDefaultMismatchWarning;
///: END:ONLY_INCLUDE_IN
return (
<div
className={`account-list-item ${className}`}
data-testid="account-list-item"
onClick={() => handleClick?.({ name, address, balance })}
>
<div className="account-list-item__top-row">
<Identicon
address={address}
className="account-list-item__identicon"
diameter={18}
/>
<div className="account-list-item__account-name">{name || address}</div>
{icon ? (
<div
className="account-list-item__icon"
data-testid="account-list-item-icon"
>
{icon}
</div>
) : null}
{showDefaultMismatchWarning && (
<AccountMismatchWarning address={address} />
)}
</div>
{displayAddress && name && (
<div className="account-list-item__account-address">
{toChecksumHexAddress(address)}
</div>
)}
</div>
);
}
AccountListItem.propTypes = {
/**
* An account object that has name, address, and balance data
*/
account: PropTypes.shape({
address: PropTypes.string.isRequired,
balance: PropTypes.string,
name: PropTypes.string,
}),
/**
* Additional className to add to the root div element of AccountListItem
*/
className: PropTypes.string,
/**
* Display the address of the account object
*/
displayAddress: PropTypes.bool,
/**
* The onClick handler of the AccountListItem
*/
handleClick: PropTypes.func,
/**
* Pass icon component to be displayed. Currently not used
*/
icon: PropTypes.node,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
/**
* MMI Prop, will hide the default AccountMismatchWarning when needed
*/
hideDefaultMismatchWarning: PropTypes.bool,
///: END:ONLY_INCLUDE_IN
};