Pass MethodDecoding as to/destination view

js/src/views/Signer/_layout.css

@@ -19,6 +19,6 @@ $pendingHeight: 190px;
 $finishedHeight: 120px;
 
 $embedWidth: 920px;
-$statusWidth: 260px;
+$statusWidth: 270px;
 
 $accountPadding: 75px;

js/src/views/Signer/components/RequestPending/requestPending.js

@@ -74,12 +74,7 @@ export default class RequestPending extends Component {
           onReject={ onReject }
           isSending={ isSending }
           id={ id }
-          gasPrice={ transaction.gasPrice }
-          gas={ transaction.gas }
-          data={ transaction.data }
-          from={ transaction.from }
-          to={ transaction.to }
-          value={ transaction.value }
+          transaction={ transaction }
           date={ date }
           isTest={ isTest }
           store={ store }

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css

@@ -30,27 +30,26 @@
   text-align: center;
 }
 
-.from, .to {
-  width: 50%;
-}
+.from {
+  width: 40%;
+  vertical-align: top;
 
-.from .account {
-  padding-right: $accountPadding;
-}
-
-.to .account {
-  padding-left: $accountPadding;
-}
-
-.from img, .to img {
+  img {
     display: inline-block;
     width: 50px;
     height: 50px;
     margin: 5px;
+  }
+
+  span {
+    display: block;
+  }
 }
 
-.from span, .to span {
-  display: block;
+.method {
+  width: 60%;
+  vertical-align: top;
+  line-height: 1em;
 }
 
 .tx {

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js

@@ -16,9 +16,10 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import ContractIcon from 'material-ui/svg-icons/action/code';
 import ReactTooltip from 'react-tooltip';
 
+import { MethodDecoding } from '../../../../ui';
+
 import * as tUtil from '../util/transaction';
 import Account from '../Account';
 import styles from './TransactionMainDetails.css';
@@ -32,6 +33,7 @@ export default class TransactionMainDetails extends Component {
     totalValue: PropTypes.object.isRequired, // wei BigNumber
     isTest: PropTypes.bool.isRequired,
     to: PropTypes.string, // undefined if it's a contract
+    transaction: PropTypes.object.isRequired,
     toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
     children: PropTypes.node
   };
@@ -59,15 +61,7 @@ export default class TransactionMainDetails extends Component {
   }
 
   render () {
-    const { to } = this.props;
-
-    return to
-      ? this.renderTransfer()
-      : this.renderContract();
-  }
-
-  renderTransfer () {
-    const { children, from, fromBalance, to, toBalance, isTest } = this.props;
+    const { children, from, fromBalance, transaction, isTest } = this.props;
 
     return (
       <div className={ styles.transaction }>
@@ -79,48 +73,11 @@ export default class TransactionMainDetails extends Component {
               isTest={ isTest } />
           </div>
         </div>
-        <div className={ styles.tx }>
-          { this.renderValue() }
-          <div>&rArr;</div>
-          { this.renderTotalValue() }
-        </div>
-        <div className={ styles.to }>
-          <div className={ styles.account }>
-            <Account
-              address={ to }
-              balance={ toBalance }
-              isTest={ isTest } />
-          </div>
-        </div>
-        { children }
-      </div>
-    );
-  }
-
-  renderContract () {
-    const { children, from, fromBalance, isTest } = this.props;
-
-    return (
-      <div className={ styles.transaction }>
-        <div className={ styles.from }>
-          <div className={ styles.account }>
-            <Account
+        <div className={ styles.method }>
+          <MethodDecoding
             address={ from }
-              balance={ fromBalance }
-              isTest={ isTest } />
-          </div>
-        </div>
-        <div className={ styles.tx }>
-          { this.renderValue() }
-          <div>&rArr;</div>
-          { this.renderTotalValue() }
-        </div>
-        <div className={ styles.to }>
-          <div className={ styles.account }>
-            <ContractIcon className={ styles.contractIcon } />
-            <br />
-            Contract
-          </div>
+            transaction={ transaction }
+            historic={ false } />
         </div>
         { children }
       </div>

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

@@ -19,9 +19,13 @@
 
 .container {
   display: flex;
-  padding: 1.5em 0 1em;
+  padding: 1em 0 1em;
 
   & > * {
     vertical-align: middle;
   }
 }
+
+.container+.container {
+  padding-top: 2em;
+}

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

@@ -19,7 +19,6 @@ import { observer } from 'mobx-react';
 
 import TransactionMainDetails from '../TransactionMainDetails';
 import TransactionPendingForm from '../TransactionPendingForm';
-import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
 
 import styles from './TransactionPending.css';
 
@@ -29,13 +28,15 @@ import * as tUtil from '../util/transaction';
 export default class TransactionPending extends Component {
   static propTypes = {
     id: PropTypes.object.isRequired,
+    transaction: PropTypes.shape({
       from: PropTypes.string.isRequired,
       value: PropTypes.object.isRequired, // wei hex
       gasPrice: PropTypes.object.isRequired, // wei hex
       gas: PropTypes.object.isRequired, // hex
-    date: PropTypes.instanceOf(Date).isRequired,
-    to: PropTypes.string, // undefined if it's a contract
       data: PropTypes.string, // hex
+      to: PropTypes.string // undefined if it's a contract
+    }).isRequired,
+    date: PropTypes.instanceOf(Date).isRequired,
     nonce: PropTypes.number,
     onConfirm: PropTypes.func.isRequired,
     onReject: PropTypes.func.isRequired,
@@ -50,7 +51,8 @@ export default class TransactionPending extends Component {
   };
 
   componentWillMount () {
-    const { gas, gasPrice, value, from, to, store } = this.props;
+    const { transaction, store } = this.props;
+    const { gas, gasPrice, value, from, to } = transaction;
 
     const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
     const totalValue = tUtil.getTotalValue(fee, value);
@@ -62,8 +64,9 @@ export default class TransactionPending extends Component {
   }
 
   render () {
-    const { className, id, date, data, from, to, store } = this.props;
-    const { totalValue, gasPriceEthmDisplay, gasToDisplay } = this.state;
+    const { className, id, transaction, store } = this.props;
+    const { from, to, value } = transaction;
+    const { totalValue } = this.state;
 
     const fromBalance = store.balances[from];
     const toBalance = store.balances[to];
@@ -71,20 +74,15 @@ export default class TransactionPending extends Component {
     return (
       <div className={ `${styles.container} ${className || ''}` }>
         <TransactionMainDetails
-          { ...this.props }
-          { ...this.state }
+          id={ id }
+          value={ value }
+          from={ from }
           fromBalance={ fromBalance }
+          to={ to }
           toBalance={ toBalance }
           className={ styles.transactionDetails }
-          totalValue={ totalValue }>
-          <TransactionSecondaryDetails
-            id={ id }
-            date={ date }
-            data={ data }
-            gasPriceEthmDisplay={ gasPriceEthmDisplay }
-            gasToDisplay={ gasToDisplay }
-          />
-        </TransactionMainDetails>
+          transaction={ transaction }
+          totalValue={ totalValue } />
         <TransactionPendingForm
           address={ from }
           isSending={ this.props.isSending }
@@ -96,7 +94,8 @@ export default class TransactionPending extends Component {
   }
 
   onConfirm = data => {
-    const { id, gasPrice } = this.props;
+    const { id, transaction } = this.props;
+    const { gasPrice } = transaction;
     const { password, wallet } = data;
 
     this.props.onConfirm({ id, password, wallet, gasPrice });

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css

@@ -19,7 +19,7 @@
 
 .container {
   box-sizing: border-box;
-  padding: 1em 1em 0 1em;
+  padding: 1em 0 0 2em;
   flex: 0 0 $statusWidth;
 }