Display network status for finished Signer requests (#2983)

* Display confirmation for finished requests

* Update box padding
This commit is contained in:
Jaco Greeff 2016-10-30 12:20:52 +01:00 committed by Gav Wood
parent 4ded10fcbe
commit 10a6e95d8a
4 changed files with 39 additions and 16 deletions

View File

@ -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;
}

View File

@ -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 (
<div className={ styles.details }>
if (!summary) {
header = (
<div className={ styles.header }>
The transaction has been posted to the network with a transaction hash of
</div>
);
}
return (
<div className={ styles.details }>
{ header }
<div className={ styles.hash }>
<a href={ txLink(hash, isTest) } target='_blank'>{ hash }</a>
</div>

View File

@ -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 {

View File

@ -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,16 +113,23 @@ 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 (
<div>
<span className={ klass }>{ capitalize(status) }</span>
{ this.renderTxHash() }
<span className={ styles.isRejected }>{ capitalize(status) }</span>
</div>
);
}
return (
<TxHash
summary
hash={ txHash } />
);
}
renderTxHash () {
const { txHash } = this.props;
const { chain } = this.state;