refactor signer components (#2691)

* remove TransactionPendingWeb3

* remove TransactionFinishedWeb3

* remove SignRequestWeb3

js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js

@@ -16,8 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import TransactionFinishedWeb3 from '../TransactionFinishedWeb3';
-import SignWeb3 from '../SignRequestWeb3';
+import TransactionFinished from '../TransactionFinished';
+import SignRequest from '../SignRequest';
 
 export default class RequestFinishedWeb3 extends Component {
   static propTypes = {
@@ -40,7 +40,7 @@ export default class RequestFinishedWeb3 extends Component {
     if (payload.sign) {
       const { sign } = payload;
       return (
-        <SignWeb3
+        <SignRequest
           className={ className }
           isFinished
           id={ id }
@@ -57,7 +57,7 @@ export default class RequestFinishedWeb3 extends Component {
     if (payload.transaction) {
       const { transaction } = payload;
       return (
-        <TransactionFinishedWeb3
+        <TransactionFinished
           className={ className }
           txHash={ result }
           id={ id }

js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js

@@ -16,8 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import TransactionPendingWeb3 from '../TransactionPendingWeb3';
-import SignRequestWeb3 from '../SignRequestWeb3';
+import TransactionPending from '../TransactionPending';
+import SignRequest from '../SignRequest';
 
 export default class RequestPendingWeb3 extends Component {
   static propTypes = {
@@ -39,7 +39,7 @@ export default class RequestPendingWeb3 extends Component {
     if (payload.sign) {
       const { sign } = payload;
       return (
-        <SignRequestWeb3
+        <SignRequest
           className={ className }
           onConfirm={ onConfirm }
           onReject={ onReject }
@@ -55,7 +55,7 @@ export default class RequestPendingWeb3 extends Component {
     if (payload.transaction) {
       const { transaction } = payload;
       return (
-        <TransactionPendingWeb3
+        <TransactionPending
           className={ className }
           onConfirm={ onConfirm }
           onReject={ onReject }

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

@@ -30,19 +30,40 @@ export default class SignRequest extends Component {
     address: PropTypes.string.isRequired,
     hash: PropTypes.string.isRequired,
     isFinished: PropTypes.bool.isRequired,
-    chain: PropTypes.string.isRequired,
-    balance: PropTypes.object,
     isSending: PropTypes.bool,
     onConfirm: PropTypes.func,
     onReject: PropTypes.func,
     status: PropTypes.string,
     className: PropTypes.string
   };
 
+  state = {
+    chain: null,
+    balance: null
+  }
+
+  componentWillMount () {
+    this.context.api.ethcore.netChain()
+      .then((chain) => {
+        this.setState({ chain });
+      })
+      .catch((err) => {
+        console.error('could not fetch chain', err);
+      });
+
+    this.context.api.eth.getBalance(this.props.address)
+      .then((balance) => {
+        this.setState({ balance });
+      })
+      .catch((err) => {
+        console.error('could not fetch balance', err);
+      });
+  }
+
   render () {
-    const className = this.props.className || '';
+    const { chain, balance, className } = this.props;
     return (
-      <div className={ `${styles.container} ${className}` }>
+      <div className={ `${styles.container} ${className || ''}` }>
         { this.renderDetails() }
         { this.renderActions() }
       </div>

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

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
+import CircularProgress from 'material-ui/CircularProgress';
 import TransactionMainDetails from '../TransactionMainDetails';
 import TxHashLink from '../TxHashLink';
 import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
@@ -26,35 +27,59 @@ import * as tUtil from '../util/transaction';
 import { capitalize } from '../util/util';
 
 export default class TransactionFinished extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
   static propTypes = {
     id: PropTypes.object.isRequired,
     from: PropTypes.string.isRequired,
-    fromBalance: PropTypes.object, // eth BigNumber, not required since it might take time to fetch
     value: PropTypes.object.isRequired, // wei hex
-    chain: PropTypes.string.isRequired,
     gasPrice: PropTypes.object.isRequired, // wei hex
     gas: PropTypes.object.isRequired, // hex
     status: PropTypes.string.isRequired, // rejected, confirmed
     date: PropTypes.instanceOf(Date).isRequired,
     to: PropTypes.string, // undefined if it's a contract
-    toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
     txHash: PropTypes.string, // undefined if transacation is rejected
     className: PropTypes.string,
     data: PropTypes.string
   };
 
-  static defaultProps = {
-    value: '0x0' // todo [adgo] - remove after resolving https://github.com/ethcore/parity/issues/1458
+  state = {
+    chain: null,
+    fromBalance: null,
+    toBalance: null
   };
 
   componentWillMount () {
     const { gas, gasPrice, value } = this.props;
     const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
     const totalValue = tUtil.getTotalValue(fee, value);
     this.setState({ totalValue });
+
+    this.context.api.ethcore.netChain()
+      .then((chain) => {
+        this.setState({ chain });
+      })
+      .catch((err) => {
+        console.error('could not fetch chain', err);
+      });
+
+    const { from, to } = this.props;
+    this.fetchBalance(from, 'fromBalance');
+    if (to) this.fetchBalance(to, 'toBalance');
   }
 
   render () {
+    const { chain, fromBalance, toBalance } = this.state;
+    if (!chain || !fromBalance || !toBalance) {
+      return (
+        <div className={ `${styles.container} ${className}` }>
+          <CircularProgress size={ 1 } />
+        </div>
+      );
+    }
+
     const { className, date, id } = this.props;
     const { totalValue } = this.state;
 
@@ -63,7 +88,7 @@ export default class TransactionFinished extends Component {
         <div className={ styles.mainContainer }>
           <TransactionMainDetails
             { ...this.props }
-            totalValue={ totalValue }
+            { ...this.state }
             className={ styles.transactionDetails }
           >
             <TransactionSecondaryDetails
@@ -104,4 +129,14 @@ 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);
+      });
+  }
+
 }