Merge pull request #3531 from ethcore/jg-signer-api-queries-2

Move Signer balance queries to store for component-wide re-use
This commit is contained in:
Gav Wood 2016-11-23 16:03:45 +01:00 committed by GitHub
commit 7ed4a21a02
12 changed files with 139 additions and 104 deletions

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './RequestPendingWeb3'; export default from './requestFinished';

View File

@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
import TransactionFinished from '../TransactionFinished'; import TransactionFinished from '../TransactionFinished';
import SignRequest from '../SignRequest'; import SignRequest from '../SignRequest';
export default class RequestFinishedWeb3 extends Component { export default class RequestFinished extends Component {
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
result: PropTypes.any.isRequired, result: PropTypes.any.isRequired,
@ -32,11 +32,12 @@ export default class RequestFinishedWeb3 extends Component {
status: PropTypes.string, status: PropTypes.string,
error: PropTypes.string, error: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
isTest: PropTypes.bool.isRequired isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
} }
render () { render () {
const { payload, id, result, msg, status, error, date, className, isTest } = this.props; const { payload, id, result, msg, status, error, date, className, isTest, store } = this.props;
if (payload.sign) { if (payload.sign) {
const { sign } = payload; const { sign } = payload;
@ -52,6 +53,7 @@ export default class RequestFinishedWeb3 extends Component {
status={ status } status={ status }
error={ error } error={ error }
isTest={ isTest } isTest={ isTest }
store={ store }
/> />
); );
} }
@ -74,6 +76,7 @@ export default class RequestFinishedWeb3 extends Component {
status={ status } status={ status }
error={ error } error={ error }
isTest={ isTest } isTest={ isTest }
store={ store }
/> />
); );
} }

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './RequestFinishedWeb3'; export default from './requestPending';

View File

@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
import TransactionPending from '../TransactionPending'; import TransactionPending from '../TransactionPending';
import SignRequest from '../SignRequest'; import SignRequest from '../SignRequest';
export default class RequestPendingWeb3 extends Component { export default class RequestPending extends Component {
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
onConfirm: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired,
@ -31,7 +31,8 @@ export default class RequestPendingWeb3 extends Component {
PropTypes.shape({ sign: PropTypes.object.isRequired }) PropTypes.shape({ sign: PropTypes.object.isRequired })
]).isRequired, ]).isRequired,
className: PropTypes.string, className: PropTypes.string,
isTest: PropTypes.bool.isRequired isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
}; };
onConfirm = data => { onConfirm = data => {
@ -42,7 +43,7 @@ export default class RequestPendingWeb3 extends Component {
}; };
render () { render () {
const { payload, id, className, isSending, date, onReject, isTest } = this.props; const { payload, id, className, isSending, date, onReject, isTest, store } = this.props;
if (payload.sign) { if (payload.sign) {
const { sign } = payload; const { sign } = payload;
@ -58,6 +59,7 @@ export default class RequestPendingWeb3 extends Component {
address={ sign.address } address={ sign.address }
hash={ sign.hash } hash={ sign.hash }
isTest={ isTest } isTest={ isTest }
store={ store }
/> />
); );
} }
@ -80,6 +82,7 @@ export default class RequestPendingWeb3 extends Component {
value={ transaction.value } value={ transaction.value }
date={ date } date={ date }
isTest={ isTest } isTest={ isTest }
store={ store }
/> />
); );
} }

View File

@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import nullable from '../../../../util/nullable-proptype'; import { observer } from 'mobx-react';
import Account from '../Account'; import Account from '../Account';
import TransactionPendingForm from '../TransactionPendingForm'; import TransactionPendingForm from '../TransactionPendingForm';
@ -23,12 +23,8 @@ import TxHashLink from '../TxHashLink';
import styles from './SignRequest.css'; import styles from './SignRequest.css';
@observer
export default class SignRequest extends Component { export default class SignRequest extends Component {
static contextTypes = {
api: PropTypes.object
}
// TODO [todr] re-use proptypes?
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
address: PropTypes.string.isRequired, address: PropTypes.string.isRequired,
@ -40,21 +36,13 @@ export default class SignRequest extends Component {
status: PropTypes.string, status: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
isTest: PropTypes.bool.isRequired, isTest: PropTypes.bool.isRequired,
balance: nullable(PropTypes.object) store: PropTypes.object.isRequired
}; };
state = {
balance: null
}
componentWillMount () { componentWillMount () {
this.context.api.eth.getBalance(this.props.address) const { address, store } = this.props;
.then((balance) => {
this.setState({ balance }); store.fetchBalance(address);
})
.catch((err) => {
console.error('could not fetch balance', err);
});
} }
render () { render () {
@ -69,8 +57,8 @@ export default class SignRequest extends Component {
} }
renderDetails () { renderDetails () {
const { address, hash, isTest } = this.props; const { address, hash, isTest, store } = this.props;
const { balance } = this.state; const balance = store.balances[address];
if (!balance) { if (!balance) {
return <div />; return <div />;
@ -133,11 +121,11 @@ export default class SignRequest extends Component {
onConfirm = password => { onConfirm = password => {
const { id } = this.props; const { id } = this.props;
this.props.onConfirm({ id, password }); this.props.onConfirm({ id, password });
} }
onReject = () => { onReject = () => {
this.props.onReject(this.props.id); this.props.onReject(this.props.id);
} }
} }

View File

@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License /* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.container { .container {
padding: 25px 0 15px; padding: 25px 0 15px;
} }

View File

@ -15,9 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import nullable from '../../../../util/nullable-proptype'; import { observer } from 'mobx-react';
import CircularProgress from 'material-ui/CircularProgress';
import { TxHash } from '../../../../ui'; import { TxHash } from '../../../../ui';
@ -30,11 +28,8 @@ import styles from './TransactionFinished.css';
import * as tUtil from '../util/transaction'; import * as tUtil from '../util/transaction';
import { capitalize } from '../util/util'; import { capitalize } from '../util/util';
@observer
export default class TransactionFinished extends Component { export default class TransactionFinished extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
from: PropTypes.string.isRequired, from: PropTypes.string.isRequired,
@ -48,39 +43,23 @@ export default class TransactionFinished extends Component {
className: PropTypes.string, className: PropTypes.string,
data: PropTypes.string, data: PropTypes.string,
isTest: PropTypes.bool.isRequired, isTest: PropTypes.bool.isRequired,
fromBalance: nullable(PropTypes.object), store: PropTypes.object.isRequired
toBalance: nullable(PropTypes.object)
};
state = {
fromBalance: null,
toBalance: null
}; };
componentWillMount () { componentWillMount () {
const { from, to, gas, gasPrice, value } = this.props; const { from, to, gas, gasPrice, value, store } = this.props;
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
const totalValue = tUtil.getTotalValue(fee, value); const totalValue = tUtil.getTotalValue(fee, value);
this.setState({ totalValue });
this.fetchBalance(from, 'fromBalance'); this.setState({ totalValue });
if (to) { store.fetchBalances([from, to]);
this.fetchBalance(to, 'toBalance');
}
} }
render () { render () {
const { fromBalance, toBalance } = this.state; const { className, date, id, from, to, store } = this.props;
if (!fromBalance || !toBalance) { const fromBalance = store.balances[from];
return ( const toBalance = store.balances[to];
<div className={ `${styles.container} ${className}` }>
<CircularProgress size={ 60 } />
</div>
);
}
const { className, date, id } = this.props;
return ( return (
<div className={ `${styles.container} ${className || ''}` }> <div className={ `${styles.container} ${className || ''}` }>
@ -88,6 +67,8 @@ export default class TransactionFinished extends Component {
<TransactionMainDetails <TransactionMainDetails
{ ...this.props } { ...this.props }
{ ...this.state } { ...this.state }
fromBalance={ fromBalance }
toBalance={ toBalance }
className={ styles.transactionDetails } className={ styles.transactionDetails }
> >
<TransactionSecondaryDetails <TransactionSecondaryDetails
@ -138,15 +119,4 @@ export default class TransactionFinished extends Component {
</div> </div>
); );
} }
fetchBalance (address, key) {
this.context.api.eth.getBalance(address)
.then((balance) => {
this.setState({ [key]: balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
}
} }

View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import TransactionMainDetails from '../TransactionMainDetails'; import TransactionMainDetails from '../TransactionMainDetails';
import TransactionPendingForm from '../TransactionPendingForm'; import TransactionPendingForm from '../TransactionPendingForm';
@ -24,11 +25,8 @@ import styles from './TransactionPending.css';
import * as tUtil from '../util/transaction'; import * as tUtil from '../util/transaction';
@observer
export default class TransactionPending extends Component { export default class TransactionPending extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
from: PropTypes.string.isRequired, from: PropTypes.string.isRequired,
@ -43,34 +41,32 @@ export default class TransactionPending extends Component {
onReject: PropTypes.func.isRequired, onReject: PropTypes.func.isRequired,
isSending: PropTypes.bool.isRequired, isSending: PropTypes.bool.isRequired,
className: PropTypes.string, className: PropTypes.string,
isTest: PropTypes.bool.isRequired isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
}; };
static defaultProps = { static defaultProps = {
isSending: false isSending: false
}; };
state = {
fromBalance: null,
toBalance: null
};
componentWillMount () { componentWillMount () {
const { gas, gasPrice, value } = this.props; const { gas, gasPrice, value, from, to, store } = this.props;
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
const totalValue = tUtil.getTotalValue(fee, value); const totalValue = tUtil.getTotalValue(fee, value);
const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice); const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice);
const gasToDisplay = tUtil.getGasDisplay(gas); const gasToDisplay = tUtil.getGasDisplay(gas);
this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
const { from, to } = this.props; this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
this.fetchBalance(from, 'fromBalance'); store.fetchBalances([from, to]);
if (to) this.fetchBalance(to, 'toBalance');
} }
render () { render () {
const { className, id, date, data, from, to, store } = this.props;
const { totalValue, gasPriceEthmDisplay, gasToDisplay } = this.state; const { totalValue, gasPriceEthmDisplay, gasToDisplay } = this.state;
const { className, id, date, data, from } = this.props;
const fromBalance = store.balances[from];
const toBalance = store.balances[to];
return ( return (
<div className={ `${styles.container} ${className || ''}` }> <div className={ `${styles.container} ${className || ''}` }>
@ -78,6 +74,8 @@ export default class TransactionPending extends Component {
<TransactionMainDetails <TransactionMainDetails
{ ...this.props } { ...this.props }
{ ...this.state } { ...this.state }
fromBalance={ fromBalance }
toBalance={ toBalance }
className={ styles.transactionDetails } className={ styles.transactionDetails }
totalValue={ totalValue }> totalValue={ totalValue }>
<TransactionSecondaryDetails <TransactionSecondaryDetails
@ -109,15 +107,4 @@ export default class TransactionPending extends Component {
onReject = () => { onReject = () => {
this.props.onReject(this.props.id); this.props.onReject(this.props.id);
} }
fetchBalance (address, key) {
this.context.api.eth.getBalance(address)
.then((balance) => {
this.setState({ [key]: balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
}
} }

View File

@ -14,5 +14,5 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export RequestFinishedWeb3 from './RequestFinishedWeb3'; export RequestFinished from './RequestFinished';
export RequestPendingWeb3 from './RequestPendingWeb3'; export RequestPending from './RequestPending';

View File

@ -19,14 +19,19 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import Store from '../../store';
import * as RequestsActions from '../../../../redux/providers/signerActions'; import * as RequestsActions from '../../../../redux/providers/signerActions';
import { Container } from '../../../../ui'; import { Container } from '../../../../ui';
import { RequestPendingWeb3 } from '../../components'; import { RequestPending } from '../../components';
import styles from './embedded.css'; import styles from './embedded.css';
class Embedded extends Component { class Embedded extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
signer: PropTypes.shape({ signer: PropTypes.shape({
pending: PropTypes.array.isRequired, pending: PropTypes.array.isRequired,
@ -39,6 +44,8 @@ class Embedded extends Component {
isTest: PropTypes.bool.isRequired isTest: PropTypes.bool.isRequired
}; };
store = new Store(this.context.api);
render () { render () {
return ( return (
<Container style={ { background: 'transparent' } }> <Container style={ { background: 'transparent' } }>
@ -75,7 +82,7 @@ class Embedded extends Component {
const { payload, id, isSending, date } = data; const { payload, id, isSending, date } = data;
return ( return (
<RequestPendingWeb3 <RequestPending
className={ styles.request } className={ styles.request }
onConfirm={ actions.startConfirmRequest } onConfirm={ actions.startConfirmRequest }
onReject={ actions.startRejectRequest } onReject={ actions.startRejectRequest }
@ -85,6 +92,7 @@ class Embedded extends Component {
payload={ payload } payload={ payload }
date={ date } date={ date }
isTest={ isTest } isTest={ isTest }
store={ this.store }
/> />
); );
} }

View File

@ -19,14 +19,19 @@ import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Store from '../../store';
import * as RequestsActions from '../../../../redux/providers/signerActions'; import * as RequestsActions from '../../../../redux/providers/signerActions';
import { Container, ContainerTitle } from '../../../../ui'; import { Container, ContainerTitle } from '../../../../ui';
import { RequestPendingWeb3, RequestFinishedWeb3 } from '../../components'; import { RequestPending, RequestFinished } from '../../components';
import styles from './RequestsPage.css'; import styles from './RequestsPage.css';
class RequestsPage extends Component { class RequestsPage extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
signer: PropTypes.shape({ signer: PropTypes.shape({
pending: PropTypes.array.isRequired, pending: PropTypes.array.isRequired,
@ -39,6 +44,8 @@ class RequestsPage extends Component {
isTest: PropTypes.bool.isRequired isTest: PropTypes.bool.isRequired
}; };
store = new Store(this.context.api);
render () { render () {
const { pending, finished } = this.props.signer; const { pending, finished } = this.props.signer;
@ -101,7 +108,7 @@ class RequestsPage extends Component {
const { payload, id, isSending, date } = data; const { payload, id, isSending, date } = data;
return ( return (
<RequestPendingWeb3 <RequestPending
className={ styles.request } className={ styles.request }
onConfirm={ actions.startConfirmRequest } onConfirm={ actions.startConfirmRequest }
onReject={ actions.startRejectRequest } onReject={ actions.startRejectRequest }
@ -111,6 +118,7 @@ class RequestsPage extends Component {
payload={ payload } payload={ payload }
date={ date } date={ date }
isTest={ isTest } isTest={ isTest }
store={ this.store }
/> />
); );
} }
@ -120,7 +128,7 @@ class RequestsPage extends Component {
const { payload, id, result, msg, status, error, date } = data; const { payload, id, result, msg, status, error, date } = data;
return ( return (
<RequestFinishedWeb3 <RequestFinished
className={ styles.request } className={ styles.request }
result={ result } result={ result }
key={ id } key={ id }
@ -131,6 +139,7 @@ class RequestsPage extends Component {
payload={ payload } payload={ payload }
date={ date } date={ date }
isTest={ isTest } isTest={ isTest }
store={ this.store }
/> />
); );
} }

View File

@ -0,0 +1,66 @@
// 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 { action, observable } from 'mobx';
export default class Store {
@observable balances = {};
constructor (api) {
this._api = api;
}
@action setBalance = (address, balance) => {
this.setBalances({ [address]: balance });
}
@action setBalances = (balances) => {
this.balances = Object.assign({}, this.balances, balances);
}
fetchBalance (address) {
this._api.eth
.getBalance(address)
.then((balance) => {
this.setBalance(address, balance);
})
.catch((error) => {
console.warn('Store:fetchBalance', error);
});
}
fetchBalances (_addresses) {
const addresses = _addresses.filter((address) => address) || [];
if (!addresses.length) {
return;
}
Promise
.all(addresses.map((address) => this._api.eth.getBalance(address)))
.then((_balances) => {
this.setBalances(
addresses.reduce((balances, address, index) => {
balances[address] = _balances[index];
return balances;
}, {})
);
})
.catch((error) => {
console.warn('Store:fetchBalances', error);
});
}
}