From d1e6b9ec5eec1302af8b71ec8a8d14e839c135ec Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 18 Nov 2016 22:26:52 +0100 Subject: [PATCH 1/4] Introduce mobx store for component balances --- .../RequestFinishedWeb3.js | 7 ++- .../RequestPendingWeb3/RequestPendingWeb3.js | 7 ++- .../components/SignRequest/SignRequest.js | 30 ++++------- .../TransactionFinished.css | 1 + .../TransactionFinished.js | 52 ++++--------------- .../TransactionPending/TransactionPending.js | 41 +++++---------- .../Signer/containers/Embedded/embedded.js | 8 +++ .../containers/RequestsPage/RequestsPage.js | 9 ++++ js/src/views/Signer/store.js | 48 +++++++++++++++++ 9 files changed, 110 insertions(+), 93 deletions(-) create mode 100644 js/src/views/Signer/store.js diff --git a/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js b/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js index 74a20f625..f263a5d77 100644 --- a/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js +++ b/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js @@ -32,11 +32,12 @@ export default class RequestFinishedWeb3 extends Component { status: PropTypes.string, error: PropTypes.string, className: PropTypes.string, - isTest: PropTypes.bool.isRequired + isTest: PropTypes.bool.isRequired, + store: PropTypes.object.isRequired } 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) { const { sign } = payload; @@ -52,6 +53,7 @@ export default class RequestFinishedWeb3 extends Component { status={ status } error={ error } isTest={ isTest } + store={ store } /> ); } @@ -74,6 +76,7 @@ export default class RequestFinishedWeb3 extends Component { status={ status } error={ error } isTest={ isTest } + store={ store } /> ); } diff --git a/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js b/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js index d9e695dbc..923cc7970 100644 --- a/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js +++ b/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js @@ -31,7 +31,8 @@ export default class RequestPendingWeb3 extends Component { PropTypes.shape({ sign: PropTypes.object.isRequired }) ]).isRequired, className: PropTypes.string, - isTest: PropTypes.bool.isRequired + isTest: PropTypes.bool.isRequired, + store: PropTypes.object.isRequired }; onConfirm = data => { @@ -42,7 +43,7 @@ export default class RequestPendingWeb3 extends Component { }; 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) { const { sign } = payload; @@ -58,6 +59,7 @@ export default class RequestPendingWeb3 extends Component { address={ sign.address } hash={ sign.hash } isTest={ isTest } + store={ store } /> ); } @@ -80,6 +82,7 @@ export default class RequestPendingWeb3 extends Component { value={ transaction.value } date={ date } isTest={ isTest } + store={ store } /> ); } diff --git a/js/src/views/Signer/components/SignRequest/SignRequest.js b/js/src/views/Signer/components/SignRequest/SignRequest.js index 6fb2b37b7..ae4159c71 100644 --- a/js/src/views/Signer/components/SignRequest/SignRequest.js +++ b/js/src/views/Signer/components/SignRequest/SignRequest.js @@ -15,7 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; -import nullable from '../../../../util/nullable-proptype'; +import { observer } from 'mobx-react'; import Account from '../Account'; import TransactionPendingForm from '../TransactionPendingForm'; @@ -23,12 +23,8 @@ import TxHashLink from '../TxHashLink'; import styles from './SignRequest.css'; +@observer export default class SignRequest extends Component { - static contextTypes = { - api: PropTypes.object - } - - // TODO [todr] re-use proptypes? static propTypes = { id: PropTypes.object.isRequired, address: PropTypes.string.isRequired, @@ -40,21 +36,13 @@ export default class SignRequest extends Component { status: PropTypes.string, className: PropTypes.string, isTest: PropTypes.bool.isRequired, - balance: nullable(PropTypes.object) + store: PropTypes.object.isRequired }; - state = { - balance: null - } - componentWillMount () { - this.context.api.eth.getBalance(this.props.address) - .then((balance) => { - this.setState({ balance }); - }) - .catch((err) => { - console.error('could not fetch balance', err); - }); + const { address, store } = this.props; + + store.fetchBalance(address); } render () { @@ -69,8 +57,8 @@ export default class SignRequest extends Component { } renderDetails () { - const { address, hash, isTest } = this.props; - const { balance } = this.state; + const { address, hash, isTest, store } = this.props; + const balance = store.balances[address]; if (!balance) { return
; @@ -133,11 +121,11 @@ export default class SignRequest extends Component { onConfirm = password => { const { id } = this.props; + this.props.onConfirm({ id, password }); } onReject = () => { this.props.onReject(this.props.id); } - } diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css index 91749cc61..0db00d7e4 100644 --- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css +++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css @@ -14,6 +14,7 @@ /* You should have received a copy of the GNU General Public License /* along with Parity. If not, see . */ + .container { padding: 25px 0 15px; } diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js index 54333115d..dcfdb5e00 100644 --- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js +++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js @@ -15,9 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; -import nullable from '../../../../util/nullable-proptype'; - -import CircularProgress from 'material-ui/CircularProgress'; +import { observer } from 'mobx-react'; import { TxHash } from '../../../../ui'; @@ -30,11 +28,8 @@ import styles from './TransactionFinished.css'; import * as tUtil from '../util/transaction'; import { capitalize } from '../util/util'; +@observer export default class TransactionFinished extends Component { - static contextTypes = { - api: PropTypes.object.isRequired - }; - static propTypes = { id: PropTypes.object.isRequired, from: PropTypes.string.isRequired, @@ -48,39 +43,23 @@ export default class TransactionFinished extends Component { className: PropTypes.string, data: PropTypes.string, isTest: PropTypes.bool.isRequired, - fromBalance: nullable(PropTypes.object), - toBalance: nullable(PropTypes.object) - }; - - state = { - fromBalance: null, - toBalance: null + store: PropTypes.object.isRequired }; 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 totalValue = tUtil.getTotalValue(fee, value); - this.setState({ totalValue }); - this.fetchBalance(from, 'fromBalance'); - if (to) { - this.fetchBalance(to, 'toBalance'); - } + this.setState({ totalValue }); + store.fetchBalances([from, to]); } render () { - const { fromBalance, toBalance } = this.state; + const { className, date, id, from, to, store } = this.props; - if (!fromBalance || !toBalance) { - return ( -
- -
- ); - } - - const { className, date, id } = this.props; + const fromBalance = store.balances[from]; + const toBalance = store.balances[to]; return (
@@ -88,6 +67,8 @@ export default class TransactionFinished extends Component { ); } - - fetchBalance (address, key) { - this.context.api.eth.getBalance(address) - .then((balance) => { - this.setState({ [key]: balance }); - }) - .catch((err) => { - console.error('could not fetch balance', err); - }); - } - } diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.js b/js/src/views/Signer/components/TransactionPending/TransactionPending.js index 55f09ac97..0742c2c76 100644 --- a/js/src/views/Signer/components/TransactionPending/TransactionPending.js +++ b/js/src/views/Signer/components/TransactionPending/TransactionPending.js @@ -15,6 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { observer } from 'mobx-react'; import TransactionMainDetails from '../TransactionMainDetails'; import TransactionPendingForm from '../TransactionPendingForm'; @@ -24,11 +25,8 @@ import styles from './TransactionPending.css'; import * as tUtil from '../util/transaction'; +@observer export default class TransactionPending extends Component { - static contextTypes = { - api: PropTypes.object.isRequired - }; - static propTypes = { id: PropTypes.object.isRequired, from: PropTypes.string.isRequired, @@ -43,34 +41,32 @@ export default class TransactionPending extends Component { onReject: PropTypes.func.isRequired, isSending: PropTypes.bool.isRequired, className: PropTypes.string, - isTest: PropTypes.bool.isRequired + isTest: PropTypes.bool.isRequired, + store: PropTypes.object.isRequired }; static defaultProps = { isSending: false }; - state = { - fromBalance: null, - toBalance: null - }; - 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 totalValue = tUtil.getTotalValue(fee, value); const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice); const gasToDisplay = tUtil.getGasDisplay(gas); - this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay }); - const { from, to } = this.props; - this.fetchBalance(from, 'fromBalance'); - if (to) this.fetchBalance(to, 'toBalance'); + this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay }); + store.fetchBalances([from, to]); } render () { + const { className, id, date, data, from, to, store } = this.props; 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 (
@@ -78,6 +74,8 @@ export default class TransactionPending extends Component { { 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); - }); - } - } diff --git a/js/src/views/Signer/containers/Embedded/embedded.js b/js/src/views/Signer/containers/Embedded/embedded.js index e06eaf274..af0bd4bfa 100644 --- a/js/src/views/Signer/containers/Embedded/embedded.js +++ b/js/src/views/Signer/containers/Embedded/embedded.js @@ -19,6 +19,7 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import Store from '../../store'; import * as RequestsActions from '../../../../redux/providers/signerActions'; import { Container } from '../../../../ui'; @@ -27,6 +28,10 @@ import { RequestPendingWeb3 } from '../../components'; import styles from './embedded.css'; class Embedded extends Component { + static contextTypes = { + api: PropTypes.object.isRequired + }; + static propTypes = { signer: PropTypes.shape({ pending: PropTypes.array.isRequired, @@ -39,6 +44,8 @@ class Embedded extends Component { isTest: PropTypes.bool.isRequired }; + store = new Store(this.context.api); + render () { return ( @@ -85,6 +92,7 @@ class Embedded extends Component { payload={ payload } date={ date } isTest={ isTest } + store={ this.store } /> ); } diff --git a/js/src/views/Signer/containers/RequestsPage/RequestsPage.js b/js/src/views/Signer/containers/RequestsPage/RequestsPage.js index bf4968610..5aab249cc 100644 --- a/js/src/views/Signer/containers/RequestsPage/RequestsPage.js +++ b/js/src/views/Signer/containers/RequestsPage/RequestsPage.js @@ -19,6 +19,7 @@ import React, { Component, PropTypes } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import Store from '../../store'; import * as RequestsActions from '../../../../redux/providers/signerActions'; import { Container, ContainerTitle } from '../../../../ui'; @@ -27,6 +28,10 @@ import { RequestPendingWeb3, RequestFinishedWeb3 } from '../../components'; import styles from './RequestsPage.css'; class RequestsPage extends Component { + static contextTypes = { + api: PropTypes.object.isRequired + }; + static propTypes = { signer: PropTypes.shape({ pending: PropTypes.array.isRequired, @@ -39,6 +44,8 @@ class RequestsPage extends Component { isTest: PropTypes.bool.isRequired }; + store = new Store(this.context.api); + render () { const { pending, finished } = this.props.signer; @@ -111,6 +118,7 @@ class RequestsPage extends Component { payload={ payload } date={ date } isTest={ isTest } + store={ this.store } /> ); } @@ -131,6 +139,7 @@ class RequestsPage extends Component { payload={ payload } date={ date } isTest={ isTest } + store={ this.store } /> ); } diff --git a/js/src/views/Signer/store.js b/js/src/views/Signer/store.js new file mode 100644 index 000000000..ce12cd267 --- /dev/null +++ b/js/src/views/Signer/store.js @@ -0,0 +1,48 @@ +// 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 . + +import { action, observable } from 'mobx'; + +export default class Store { + @observable balances = {}; + + constructor (api) { + this._api = api; + } + + @action setBalance = (address, balance) => { + this.balances = Object.assign({}, this.balances, { [address]: balance }); + } + + fetchBalance (address) { + this._api.eth + .getBalance(address) + .then((balance) => { + this.setBalance(address, balance); + }) + .catch((error) => { + console.warn('Store:fetchBalance', error); + }); + } + + fetchBalances (addresses) { + addresses.forEach((address) => { + if (address) { + this.fetBalance(address); + } + }); + } +} From 1c4779683fe0d84a4f49cd347703a0c3fc694e16 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 18 Nov 2016 22:30:36 +0100 Subject: [PATCH 2/4] Rename Request{Pending,Finished}Web3 -> Request{Pending,Finished} --- .../{RequestPendingWeb3 => RequestFinished}/index.js | 2 +- .../requestFinished.js} | 2 +- .../{RequestFinishedWeb3 => RequestPending}/index.js | 2 +- .../requestPending.js} | 2 +- js/src/views/Signer/components/index.js | 4 ++-- js/src/views/Signer/containers/Embedded/embedded.js | 4 ++-- js/src/views/Signer/containers/RequestsPage/RequestsPage.js | 6 +++--- 7 files changed, 11 insertions(+), 11 deletions(-) rename js/src/views/Signer/components/{RequestPendingWeb3 => RequestFinished}/index.js (94%) rename js/src/views/Signer/components/{RequestFinishedWeb3/RequestFinishedWeb3.js => RequestFinished/requestFinished.js} (97%) rename js/src/views/Signer/components/{RequestFinishedWeb3 => RequestPending}/index.js (93%) rename js/src/views/Signer/components/{RequestPendingWeb3/RequestPendingWeb3.js => RequestPending/requestPending.js} (97%) diff --git a/js/src/views/Signer/components/RequestPendingWeb3/index.js b/js/src/views/Signer/components/RequestFinished/index.js similarity index 94% rename from js/src/views/Signer/components/RequestPendingWeb3/index.js rename to js/src/views/Signer/components/RequestFinished/index.js index f664b571c..c5ed83b6b 100644 --- a/js/src/views/Signer/components/RequestPendingWeb3/index.js +++ b/js/src/views/Signer/components/RequestFinished/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './RequestPendingWeb3'; +export default from './requestFinished'; diff --git a/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js b/js/src/views/Signer/components/RequestFinished/requestFinished.js similarity index 97% rename from js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js rename to js/src/views/Signer/components/RequestFinished/requestFinished.js index f263a5d77..bce9e4038 100644 --- a/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js +++ b/js/src/views/Signer/components/RequestFinished/requestFinished.js @@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react'; import TransactionFinished from '../TransactionFinished'; import SignRequest from '../SignRequest'; -export default class RequestFinishedWeb3 extends Component { +export default class RequestFinished extends Component { static propTypes = { id: PropTypes.object.isRequired, result: PropTypes.any.isRequired, diff --git a/js/src/views/Signer/components/RequestFinishedWeb3/index.js b/js/src/views/Signer/components/RequestPending/index.js similarity index 93% rename from js/src/views/Signer/components/RequestFinishedWeb3/index.js rename to js/src/views/Signer/components/RequestPending/index.js index bcf7341bb..d4b048781 100644 --- a/js/src/views/Signer/components/RequestFinishedWeb3/index.js +++ b/js/src/views/Signer/components/RequestPending/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './RequestFinishedWeb3'; +export default from './requestPending'; diff --git a/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js b/js/src/views/Signer/components/RequestPending/requestPending.js similarity index 97% rename from js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js rename to js/src/views/Signer/components/RequestPending/requestPending.js index 923cc7970..d8e2e0565 100644 --- a/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js +++ b/js/src/views/Signer/components/RequestPending/requestPending.js @@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react'; import TransactionPending from '../TransactionPending'; import SignRequest from '../SignRequest'; -export default class RequestPendingWeb3 extends Component { +export default class RequestPending extends Component { static propTypes = { id: PropTypes.object.isRequired, onConfirm: PropTypes.func.isRequired, diff --git a/js/src/views/Signer/components/index.js b/js/src/views/Signer/components/index.js index 2dd5174e2..7c891f621 100644 --- a/js/src/views/Signer/components/index.js +++ b/js/src/views/Signer/components/index.js @@ -14,5 +14,5 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export RequestFinishedWeb3 from './RequestFinishedWeb3'; -export RequestPendingWeb3 from './RequestPendingWeb3'; +export RequestFinished from './RequestFinished'; +export RequestPending from './RequestPending'; diff --git a/js/src/views/Signer/containers/Embedded/embedded.js b/js/src/views/Signer/containers/Embedded/embedded.js index af0bd4bfa..b62c1a6c0 100644 --- a/js/src/views/Signer/containers/Embedded/embedded.js +++ b/js/src/views/Signer/containers/Embedded/embedded.js @@ -23,7 +23,7 @@ import Store from '../../store'; import * as RequestsActions from '../../../../redux/providers/signerActions'; import { Container } from '../../../../ui'; -import { RequestPendingWeb3 } from '../../components'; +import { RequestPending } from '../../components'; import styles from './embedded.css'; @@ -82,7 +82,7 @@ class Embedded extends Component { const { payload, id, isSending, date } = data; return ( - Date: Tue, 22 Nov 2016 17:31:25 +0100 Subject: [PATCH 3/4] Typo --- js/src/views/Signer/store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/views/Signer/store.js b/js/src/views/Signer/store.js index ce12cd267..fe9a48514 100644 --- a/js/src/views/Signer/store.js +++ b/js/src/views/Signer/store.js @@ -41,7 +41,7 @@ export default class Store { fetchBalances (addresses) { addresses.forEach((address) => { if (address) { - this.fetBalance(address); + this.fetchBalance(address); } }); } From e9eebb3088ad271d9395e0c1884d5db4ac581026 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 23 Nov 2016 12:32:50 +0100 Subject: [PATCH 4/4] Optimise multi-balance fetching (one set) --- js/src/views/Signer/store.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/js/src/views/Signer/store.js b/js/src/views/Signer/store.js index fe9a48514..1bb63bbe2 100644 --- a/js/src/views/Signer/store.js +++ b/js/src/views/Signer/store.js @@ -24,7 +24,11 @@ export default class Store { } @action setBalance = (address, balance) => { - this.balances = Object.assign({}, this.balances, { [address]: balance }); + this.setBalances({ [address]: balance }); + } + + @action setBalances = (balances) => { + this.balances = Object.assign({}, this.balances, balances); } fetchBalance (address) { @@ -38,11 +42,25 @@ export default class Store { }); } - fetchBalances (addresses) { - addresses.forEach((address) => { - if (address) { - this.fetchBalance(address); - } - }); + 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); + }); } }