From efd4e6f96af73f0b82f24a1d684acbc81e547081 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 29 Nov 2016 16:37:25 +0100 Subject: [PATCH] Pass MethodDecoding as to/destination view --- js/src/views/Signer/_layout.css | 2 +- .../RequestPending/requestPending.js | 7 +-- .../TransactionMainDetails.css | 37 ++++++----- .../TransactionMainDetails.js | 61 +++---------------- .../TransactionPending/TransactionPending.css | 6 +- .../TransactionPending/TransactionPending.js | 43 +++++++------ .../TransactionPendingForm.css | 2 +- 7 files changed, 56 insertions(+), 102 deletions(-) diff --git a/js/src/views/Signer/_layout.css b/js/src/views/Signer/_layout.css index 3970a7e02..40e5df3e8 100644 --- a/js/src/views/Signer/_layout.css +++ b/js/src/views/Signer/_layout.css @@ -19,6 +19,6 @@ $pendingHeight: 190px; $finishedHeight: 120px; $embedWidth: 920px; -$statusWidth: 260px; +$statusWidth: 270px; $accountPadding: 75px; diff --git a/js/src/views/Signer/components/RequestPending/requestPending.js b/js/src/views/Signer/components/RequestPending/requestPending.js index d8e2e0565..aa797f526 100644 --- a/js/src/views/Signer/components/RequestPending/requestPending.js +++ b/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 } diff --git a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css index 107694b8e..92ed968d1 100644 --- a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css +++ b/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; + + img { + display: inline-block; + width: 50px; + height: 50px; + margin: 5px; + } + + span { + display: block; + } } -.from .account { - padding-right: $accountPadding; -} - -.to .account { - padding-left: $accountPadding; -} - -.from img, .to img { - display: inline-block; - width: 50px; - height: 50px; - margin: 5px; -} - -.from span, .to span { - display: block; +.method { + width: 60%; + vertical-align: top; + line-height: 1em; } .tx { diff --git a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js index 6e83e0c7e..fb10392d3 100644 --- a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js +++ b/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 (
@@ -79,48 +73,11 @@ export default class TransactionMainDetails extends Component { isTest={ isTest } />
-
- { this.renderValue() } -
⇒
- { this.renderTotalValue() } -
-
-
- -
-
- { children } - - ); - } - - renderContract () { - const { children, from, fromBalance, isTest } = this.props; - - return ( -
-
-
- -
-
-
- { this.renderValue() } -
⇒
- { this.renderTotalValue() } -
-
-
- -
- Contract -
+
+
{ children }
diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.css b/js/src/views/Signer/components/TransactionPending/TransactionPending.css index 5cd2d10f5..877066e57 100644 --- a/js/src/views/Signer/components/TransactionPending/TransactionPending.css +++ b/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; +} diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.js b/js/src/views/Signer/components/TransactionPending/TransactionPending.js index 013d887a5..98c83be3b 100644 --- a/js/src/views/Signer/components/TransactionPending/TransactionPending.js +++ b/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, - from: PropTypes.string.isRequired, - value: PropTypes.object.isRequired, // wei hex - gasPrice: PropTypes.object.isRequired, // wei hex - gas: PropTypes.object.isRequired, // hex + transaction: PropTypes.shape({ + from: PropTypes.string.isRequired, + value: PropTypes.object.isRequired, // wei hex + gasPrice: PropTypes.object.isRequired, // wei hex + gas: PropTypes.object.isRequired, // hex + data: PropTypes.string, // hex + to: PropTypes.string // undefined if it's a contract + }).isRequired, date: PropTypes.instanceOf(Date).isRequired, - to: PropTypes.string, // undefined if it's a contract - data: PropTypes.string, // hex 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 (
- - + transaction={ transaction } + totalValue={ totalValue } /> { - const { id, gasPrice } = this.props; + const { id, transaction } = this.props; + const { gasPrice } = transaction; const { password, wallet } = data; this.props.onConfirm({ id, password, wallet, gasPrice }); diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css index aaea1de8d..feb456bce 100644 --- a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css +++ b/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; }