116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
|
// This file is part of Parity.
|
|
|
|
// Parity is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
|
|
// Parity is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU General Public License for more details.
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
import React, { Component, PropTypes } from 'react';
|
|
|
|
import { IdentityIcon, IdentityName } from '../../../../ui';
|
|
import AccountLink from './AccountLink';
|
|
|
|
import styles from './Account.css';
|
|
|
|
export default class Account extends Component {
|
|
static propTypes = {
|
|
className: PropTypes.string,
|
|
address: PropTypes.string.isRequired,
|
|
isTest: PropTypes.bool.isRequired,
|
|
balance: PropTypes.object // eth BigNumber, not required since it mght take time to fetch
|
|
};
|
|
|
|
state = {
|
|
balanceDisplay: '?'
|
|
};
|
|
|
|
componentWillMount () {
|
|
this.updateBalanceDisplay(this.props.balance);
|
|
}
|
|
|
|
componentWillReceiveProps (nextProps) {
|
|
if (nextProps.balance === this.props.balance) {
|
|
return;
|
|
}
|
|
this.updateBalanceDisplay(nextProps.balance);
|
|
}
|
|
|
|
updateBalanceDisplay (balance) {
|
|
this.setState({
|
|
balanceDisplay: balance ? balance.div(1e18).toFormat(3) : '?'
|
|
});
|
|
}
|
|
|
|
render () {
|
|
const { address, isTest, className } = this.props;
|
|
|
|
return (
|
|
<div className={ `${styles.acc} ${className}` }>
|
|
<AccountLink
|
|
address={ address }
|
|
isTest={ isTest }>
|
|
<IdentityIcon
|
|
center
|
|
address={ address } />
|
|
</AccountLink>
|
|
{ this.renderName() }
|
|
{ this.renderBalance() }
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderBalance () {
|
|
const { balanceDisplay } = this.state;
|
|
return (
|
|
<span> <strong>{ balanceDisplay }</strong> <small>ETH</small></span>
|
|
);
|
|
}
|
|
|
|
renderName () {
|
|
const { address, isTest } = this.props;
|
|
const name = <IdentityName address={ address } empty />;
|
|
|
|
if (!name) {
|
|
return (
|
|
<AccountLink
|
|
address={ address }
|
|
isTest={ isTest }>
|
|
[{ this.shortAddress(address) }]
|
|
</AccountLink>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AccountLink
|
|
address={ address }
|
|
isTest={ isTest } >
|
|
<span>
|
|
<span className={ styles.name }>{ name }</span>
|
|
<span className={ styles.address }>[{ this.tinyAddress(address) }]</span>
|
|
</span>
|
|
</AccountLink>
|
|
);
|
|
}
|
|
|
|
tinyAddress () {
|
|
const { address } = this.props;
|
|
const len = address.length;
|
|
return address.slice(2, 4) + '..' + address.slice(len - 2);
|
|
}
|
|
|
|
shortAddress () {
|
|
const { address } = this.props;
|
|
const len = address.length;
|
|
return address.slice(2, 8) + '..' + address.slice(len - 7);
|
|
}
|
|
}
|