2017-02-20 16:40:01 +01:00
|
|
|
// 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 { observer } from 'mobx-react';
|
|
|
|
import React, { Component, PropTypes } from 'react';
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { bindActionCreators } from 'redux';
|
|
|
|
|
|
|
|
import { newError } from '~/redux/actions';
|
|
|
|
import { personalAccountsInfo } from '~/redux/providers/personalActions';
|
|
|
|
import { AccountCard, Button, Portal, SectionList } from '~/ui';
|
|
|
|
import { CancelIcon, CheckIcon } from '~/ui/Icons';
|
|
|
|
|
|
|
|
import styles from './vaultAccounts.css';
|
|
|
|
|
|
|
|
@observer
|
|
|
|
class VaultAccounts extends Component {
|
|
|
|
static contextTypes = {
|
|
|
|
api: PropTypes.object.isRequired
|
|
|
|
};
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
accounts: PropTypes.object.isRequired,
|
2017-02-22 10:42:42 +01:00
|
|
|
balances: PropTypes.object.isRequired,
|
2017-02-20 16:40:01 +01:00
|
|
|
newError: PropTypes.func.isRequired,
|
|
|
|
personalAccountsInfo: PropTypes.func.isRequired,
|
|
|
|
vaultStore: PropTypes.object.isRequired
|
|
|
|
};
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { accounts } = this.props;
|
|
|
|
const { isBusyAccounts, isModalAccountsOpen, selectedAccounts } = this.props.vaultStore;
|
|
|
|
|
|
|
|
if (!isModalAccountsOpen) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const vaultAccounts = Object
|
|
|
|
.keys(accounts)
|
|
|
|
.filter((address) => accounts[address].uuid)
|
|
|
|
.map((address) => accounts[address]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Portal
|
|
|
|
buttons={ [
|
|
|
|
<Button
|
|
|
|
disabled={ isBusyAccounts }
|
|
|
|
icon={ <CancelIcon /> }
|
|
|
|
key='cancel'
|
|
|
|
label={
|
|
|
|
<FormattedMessage
|
|
|
|
id='vaults.accounts.button.cancel'
|
|
|
|
defaultMessage='Cancel'
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
onClick={ this.onClose }
|
|
|
|
/>,
|
|
|
|
<Button
|
|
|
|
disabled={ isBusyAccounts }
|
|
|
|
icon={ <CheckIcon /> }
|
|
|
|
key='execute'
|
|
|
|
label={
|
|
|
|
<FormattedMessage
|
|
|
|
id='vaults.accounts.button.execute'
|
|
|
|
defaultMessage='Set'
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
onClick={ this.onExecute }
|
|
|
|
/>
|
|
|
|
] }
|
|
|
|
busy={ isBusyAccounts }
|
|
|
|
onClose={ this.onClose }
|
|
|
|
open
|
|
|
|
title={
|
|
|
|
<FormattedMessage
|
|
|
|
id='vaults.accounts.title'
|
|
|
|
defaultMessage='Manage Vault Accounts'
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<SectionList
|
|
|
|
items={ vaultAccounts }
|
|
|
|
noStretch
|
|
|
|
renderItem={ this.renderAccount }
|
|
|
|
selectedAccounts={ selectedAccounts }
|
|
|
|
/>
|
|
|
|
</Portal>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// TODO: There are a lot of similarities between the dapp permissions selector
|
|
|
|
// (although that has defaults) and this one. A genrerix multi-select component
|
|
|
|
// would be applicable going forward. (Originals passed in, new selections back)
|
|
|
|
renderAccount = (account) => {
|
2017-02-22 10:42:42 +01:00
|
|
|
const { balances } = this.props;
|
2017-02-20 16:40:01 +01:00
|
|
|
const { vaultName, selectedAccounts } = this.props.vaultStore;
|
2017-02-22 10:42:42 +01:00
|
|
|
const balance = balances[account.address];
|
2017-02-20 16:40:01 +01:00
|
|
|
const isInVault = account.meta.vault === vaultName;
|
|
|
|
const isSelected = isInVault
|
|
|
|
? !selectedAccounts[account.address]
|
|
|
|
: selectedAccounts[account.address];
|
|
|
|
|
|
|
|
const onSelect = () => {
|
|
|
|
this.props.vaultStore.toggleSelectedAccount(account.address);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={ styles.item }>
|
|
|
|
<AccountCard
|
|
|
|
account={ account }
|
2017-02-22 10:42:42 +01:00
|
|
|
balance={ balance }
|
2017-02-20 16:40:01 +01:00
|
|
|
className={
|
|
|
|
isSelected
|
|
|
|
? styles.selected
|
|
|
|
: styles.unselected
|
|
|
|
}
|
|
|
|
onClick={ onSelect }
|
|
|
|
/>
|
|
|
|
<div className={ styles.overlay }>
|
|
|
|
{
|
|
|
|
isSelected
|
|
|
|
? <CheckIcon onClick={ onSelect } />
|
|
|
|
: <CheckIcon className={ styles.iconDisabled } onClick={ onSelect } />
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
onClose = () => {
|
|
|
|
this.props.vaultStore.closeAccountsModal();
|
|
|
|
}
|
|
|
|
|
|
|
|
onExecute = () => {
|
|
|
|
const { api } = this.context;
|
|
|
|
const { accounts, personalAccountsInfo, vaultStore } = this.props;
|
|
|
|
const { vaultName, selectedAccounts } = this.props.vaultStore;
|
|
|
|
|
|
|
|
const vaultAccounts = Object
|
|
|
|
.keys(accounts)
|
|
|
|
.filter((address) => accounts[address].uuid && selectedAccounts[address])
|
|
|
|
.map((address) => accounts[address]);
|
|
|
|
|
|
|
|
return vaultStore
|
|
|
|
.moveAccounts(
|
|
|
|
vaultName,
|
|
|
|
vaultAccounts
|
|
|
|
.filter((account) => account.meta.vault !== vaultName)
|
|
|
|
.map((account) => account.address),
|
|
|
|
vaultAccounts
|
|
|
|
.filter((account) => account.meta.vault === vaultName)
|
|
|
|
.map((account) => account.address)
|
|
|
|
)
|
|
|
|
.catch(this.props.newError)
|
|
|
|
.then(() => {
|
|
|
|
// TODO: We manually call parity_allAccountsInfo after all the promises
|
|
|
|
// have been resolved. If bulk moves do become available in the future,
|
|
|
|
// subscriptions can transparently take care of this instead of calling
|
|
|
|
// and manually dispatching an update. (Using subscriptions currently
|
|
|
|
// means allAccountsInfo is called after each and every move call)
|
|
|
|
return api.parity
|
|
|
|
.allAccountsInfo()
|
|
|
|
.then(personalAccountsInfo);
|
|
|
|
})
|
|
|
|
.then(this.onClose);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function mapStateToProps (state) {
|
2017-02-22 10:42:42 +01:00
|
|
|
const { balances } = state.balances;
|
2017-02-20 16:40:01 +01:00
|
|
|
const { accounts } = state.personal;
|
|
|
|
|
2017-02-22 10:42:42 +01:00
|
|
|
return {
|
|
|
|
accounts,
|
|
|
|
balances
|
|
|
|
};
|
2017-02-20 16:40:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function mapDispatchToProps (dispatch) {
|
|
|
|
return bindActionCreators({
|
|
|
|
newError,
|
|
|
|
personalAccountsInfo
|
|
|
|
}, dispatch);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(
|
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
|
|
|
)(VaultAccounts);
|