openethereum/js/src/Status/DefaultAccount/defaultAccount.js
Amaury Martiny c6b0db61e7 Show all accounts on Topbar (#7498)
* Show all accounts in the top bar

* Update to latest js-shared

* Add comments

* Update refs and remove dapp-dapp-accounts
2018-01-08 16:21:52 +01:00

105 lines
3.2 KiB
JavaScript

// Copyright 2015-2017 Parity Technologies (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 } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import List from 'semantic-ui-react/dist/commonjs/elements/List';
import Popup from 'semantic-ui-react/dist/commonjs/modules/Popup';
import IdentityIcon from '@parity/ui/lib/IdentityIcon';
import AccountItem from './AccountItem';
import styles from './defaultAccount.css';
@observer
class DefaultAccount extends Component {
state = {
isOpen: false
}
static propTypes = {
accountStore: PropTypes.object.isRequired
}
handleOpen = () => {
this.setState({ isOpen: true });
}
handleClose = () => {
this.setState({ isOpen: false });
}
handleMakeDefault = (address) => {
this.handleClose();
if (address === this.props.accountStore.defaultAddress) { return; }
this.props.accountStore.makeDefaultAccount(address);
}
render () {
const { allAccounts, defaultAccount: defaultAddress } = this.props.accountStore;
const defaultAccount = allAccounts.find(({ address }) => address === defaultAddress);
if (!allAccounts || !defaultAccount) { return null; }
return (
<Popup
wide='very'
className={ styles.popup }
trigger={
<IdentityIcon
address={ defaultAddress } button
center
className={ styles.defaultAccount }
/>
}
content={
<div>
<List relaxed='very' selection className={ [styles.list, styles.isDefault, allAccounts.length > 1 && styles.hasOtherAccounts].join(' ') }>
<AccountItem
isDefault
account={ defaultAccount }
/>
</List>
{allAccounts.length > 1 &&
<List relaxed='very' selection className={ styles.list } divided>
{allAccounts
.filter(({ address }) => address !== defaultAddress)
.map(account => (
<AccountItem
key={ account.address }
account={ account }
onClick={ this.handleMakeDefault }
/>
))}
</List>
}
</div>
}
offset={ 13 } // Empirically looks better
on='click'
hideOnScroll
open={ this.state.isOpen }
onClose={ this.handleClose }
onOpen={ this.handleOpen }
position='bottom right'
/>
);
}
}
export default DefaultAccount;