diff --git a/js/src/ui/TxHash/txHash.css b/js/src/ui/TxHash/txHash.css index c57aef3d4..ef55ee701 100644 --- a/js/src/ui/TxHash/txHash.css +++ b/js/src/ui/TxHash/txHash.css @@ -23,6 +23,7 @@ .hash { padding-top: 1em; + word-break: break-all; } .confirm { @@ -31,11 +32,13 @@ } .progressbar { - margin: 0.5em !important; + margin: 0.5em 0 !important; width: 30% !important; + min-width: 220px; display: inline-block !important; height: 0.75em !important; } .progressinfo { + text-align: center; } diff --git a/js/src/ui/TxHash/txHash.js b/js/src/ui/TxHash/txHash.js index fa6304d18..5af000499 100644 --- a/js/src/ui/TxHash/txHash.js +++ b/js/src/ui/TxHash/txHash.js @@ -30,7 +30,8 @@ class TxHash extends Component { static propTypes = { hash: PropTypes.string.isRequired, - isTest: PropTypes.bool + isTest: PropTypes.bool, + summary: PropTypes.bool } state = { @@ -55,13 +56,20 @@ class TxHash extends Component { } render () { - const { hash, isTest } = this.props; + const { hash, isTest, summary } = this.props; + let header = null; - return ( -
+ if (!summary) { + header = (
The transaction has been posted to the network with a transaction hash of
+ ); + } + + return ( +
+ { header }
{ hash }
diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css index be995fe17..ef7c75f08 100644 --- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css +++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css @@ -29,7 +29,7 @@ .statusContainer { width: 220px; - padding: 20px 40px 0 40px; + padding: 0 40px 0 40px; /*border-left: 1px solid #aaa;*/ position: absolute; top: 0; @@ -46,7 +46,8 @@ } .isRejected { - opacity: 0.7; + opacity: 0.5; + padding-top: 2em; } .txHash { diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js index 3b4f46751..b781adb6d 100644 --- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js +++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js @@ -17,6 +17,9 @@ import React, { Component, PropTypes } from 'react'; import CircularProgress from 'material-ui/CircularProgress'; + +import { TxHash } from '../../../../ui'; + import TransactionMainDetails from '../TransactionMainDetails'; import TxHashLink from '../TxHashLink'; import TransactionSecondaryDetails from '../TransactionSecondaryDetails'; @@ -57,7 +60,7 @@ export default class TransactionFinished extends Component { }; componentWillMount () { - const { gas, gasPrice, value } = this.props; + const { from, to, gas, gasPrice, value } = this.props; const fee = tUtil.getFee(gas, gasPrice); // BigNumber object const totalValue = tUtil.getTotalValue(fee, value); this.setState({ totalValue }); @@ -70,9 +73,10 @@ export default class TransactionFinished extends Component { console.error('could not fetch chain', err); }); - const { from, to } = this.props; this.fetchBalance(from, 'fromBalance'); - if (to) this.fetchBalance(to, 'toBalance'); + if (to) { + this.fetchBalance(to, 'toBalance'); + } } render () { @@ -109,13 +113,20 @@ export default class TransactionFinished extends Component { } renderStatus () { - const { status } = this.props; - const klass = status === 'confirmed' ? styles.isConfirmed : styles.isRejected; + const { status, txHash } = this.props; + + if (status !== 'confirmed') { + return ( +
+ { capitalize(status) } +
+ ); + } + return ( -
- { capitalize(status) } - { this.renderTxHash() } -
+ ); }