Introduce mobx store for component balances

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 }
         />
       );
     }

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 }
           />
       );
     }

js/src/views/Signer/components/SignRequest/SignRequest.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 <div />;
@@ -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);
   }
-
 }

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 <http://www.gnu.org/licenses/>.
 */
+
 .container {
   padding: 25px 0 15px;
 }

js/src/views/Signer/components/TransactionFinished/TransactionFinished.js

@@ -15,9 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-        <div className={ `${styles.container} ${className}` }>
-          <CircularProgress size={ 60 } />
-        </div>
-      );
-    }
-
-    const { className, date, id } = this.props;
+    const fromBalance = store.balances[from];
+    const toBalance = store.balances[to];
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
@@ -88,6 +67,8 @@ export default class TransactionFinished extends Component {
           <TransactionMainDetails
             { ...this.props }
             { ...this.state }
+            fromBalance={ fromBalance }
+            toBalance={ toBalance }
             className={ styles.transactionDetails }
           >
             <TransactionSecondaryDetails
@@ -138,15 +119,4 @@ export default class TransactionFinished extends Component {
       </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);
-      });
-  }
-
 }

js/src/views/Signer/components/TransactionPending/TransactionPending.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
       <div className={ `${styles.container} ${className || ''}` }>
@@ -78,6 +74,8 @@ export default class TransactionPending extends Component {
           <TransactionMainDetails
             { ...this.props }
             { ...this.state }
+            fromBalance={ fromBalance }
+            toBalance={ toBalance }
             className={ styles.transactionDetails }
             totalValue={ totalValue }>
             <TransactionSecondaryDetails
@@ -109,15 +107,4 @@ export default class TransactionPending extends Component {
   onReject = () => {
     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);
-      });
-  }
-
 }

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 (
       <Container style={ { background: 'transparent' } }>
@@ -85,6 +92,7 @@ class Embedded extends Component {
         payload={ payload }
         date={ date }
         isTest={ isTest }
+        store={ this.store }
       />
     );
   }

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 }
         />
     );
   }

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 <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.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);
+      }
+    });
+  }
+}