diff options
author | Dan <danjm.com@gmail.com> | 2018-04-27 00:38:38 +0800 |
---|---|---|
committer | Dan <danjm.com@gmail.com> | 2018-04-27 00:38:38 +0800 |
commit | 8ff7806f1b471a90fa3f45ebc10f0f4452ade541 (patch) | |
tree | fe4c9483f6b7ffadda35f304f15bbf3a02974910 /ui/app/components/send_/account-list-item/account-list-item.component.js | |
parent | 02a6d2089ede7d3faf4990c40b85b9f773f82c64 (diff) | |
download | tangerine-wallet-browser-8ff7806f1b471a90fa3f45ebc10f0f4452ade541.tar.gz tangerine-wallet-browser-8ff7806f1b471a90fa3f45ebc10f0f4452ade541.tar.zst tangerine-wallet-browser-8ff7806f1b471a90fa3f45ebc10f0f4452ade541.zip |
Core of the refactor complete
Diffstat (limited to 'ui/app/components/send_/account-list-item/account-list-item.component.js')
-rw-r--r-- | ui/app/components/send_/account-list-item/account-list-item.component.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/ui/app/components/send_/account-list-item/account-list-item.component.js b/ui/app/components/send_/account-list-item/account-list-item.component.js new file mode 100644 index 000000000..6b63aecf0 --- /dev/null +++ b/ui/app/components/send_/account-list-item/account-list-item.component.js @@ -0,0 +1,74 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { checksumAddress } from '../../../util' +import Identicon from '../../identicon' +import CurrencyDisplay from '../../send/currency-display' + +export default class AccountListItem extends Component { + + static propTypes = { + account: PropTypes.object, + className: PropTypes.string, + conversionRate: PropTypes.number, + currentCurrency: PropTypes.string, + displayAddress: PropTypes.bool, + displayBalance: PropTypes.bool, + handleClick: PropTypes.func, + icon: PropTypes.node, + }; + + render () { + const { + className, + account, + handleClick, + icon = null, + conversionRate, + currentCurrency, + displayBalance = true, + displayAddress = false, + } = this.props + + const { name, address, balance } = account || {} + + return (<div + className={`account-list-item ${className}`} + onClick={() => handleClick({ name, address, balance })} + > + + <div className='account-list-item__top-row'> + <Identicon + address={address} + diameter={18} + className='account-list-item__identicon' + /> + + <div className='account-list-item__account-name'>{ name || address }</div> + + {icon && <div className='account-list-item__icon'>{ icon }</div>} + + </div> + + {displayAddress && name && <div className='account-list-item__account-address'> + { checksumAddress(address) } + </div>} + + {displayBalance && <CurrencyDisplay + primaryCurrency='ETH' + convertedCurrency={currentCurrency} + value={balance} + conversionRate={conversionRate} + readOnly={true} + className='account-list-item__account-balances' + primaryBalanceClassName='account-list-item__account-primary-balance' + convertedBalanceClassName='account-list-item__account-secondary-balance' + />} + + </div>) + } +} + +AccountListItem.contextTypes = { + t: PropTypes.func, +} + |