Move Signer balance queries to store for component-wide re-use

js/src/views/Signer/components/RequestPendingWeb3/index.js → 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 <http://www.gnu.org/licenses/>.
 
-export default from './RequestPendingWeb3';
+export default from './requestFinished';

js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js → 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,
@@ -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/RequestFinishedWeb3/index.js → 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 <http://www.gnu.org/licenses/>.
 
-export default from './RequestFinishedWeb3';
+export default from './requestPending';

js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js → 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,
@@ -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,20 +15,16 @@
 // 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';
 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,46 +43,32 @@ 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 || ''}` }>
         <div className={ styles.mainContainer }>
           <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,41 +41,41 @@ 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 || ''}` }>
         <div className={ styles.mainContainer }>
           <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/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 <http://www.gnu.org/licenses/>.
 
-export RequestFinishedWeb3 from './RequestFinishedWeb3';
-export RequestPendingWeb3 from './RequestPendingWeb3';
+export RequestFinished from './RequestFinished';
+export RequestPending from './RequestPending';