Display local/completed transactions (#3630)
* Initial fetch of local transactions * Container allows for title specification * Introduce TxList component * Display local transactions in signer list * Simplify * Pass only hashes from calling components * Simplify no pending display * Render pending blocks at the top * Get rid of time for 0 blocks * Indeed sort Pending to the top * Allow retrieval of pending transactions * setTimeout with clearTimeout
This commit is contained in:
Jaco Greeff
GitHub
@@ -1,17 +0,0 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './transaction';
|
||||
@@ -1,184 +0,0 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import moment from 'moment';
|
||||
|
||||
import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui';
|
||||
import ShortenedHash from '../../../../ui/ShortenedHash';
|
||||
import { txLink, addressLink } from '../../../../3rdparty/etherscan/links';
|
||||
|
||||
import styles from '../transactions.css';
|
||||
|
||||
export default class Transaction extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
address: PropTypes.string.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
transaction: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
isContract: false,
|
||||
isReceived: false,
|
||||
transaction: null,
|
||||
block: null
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.lookup();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { block } = this.state;
|
||||
const { transaction } = this.props;
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td className={ styles.timestamp }>
|
||||
<div>{ this.formatBlockTimestamp(block) }</div>
|
||||
<div>{ this.formatNumber(transaction.blockNumber) }</div>
|
||||
</td>
|
||||
{ this.renderAddress(transaction.from) }
|
||||
{ this.renderTransaction() }
|
||||
{ this.renderAddress(transaction.to) }
|
||||
<td className={ styles.method }>
|
||||
{ this.renderMethod() }
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
renderMethod () {
|
||||
const { address } = this.props;
|
||||
const { transaction } = this.state;
|
||||
|
||||
if (!transaction) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<MethodDecoding
|
||||
historic
|
||||
address={ address }
|
||||
transaction={ transaction } />
|
||||
);
|
||||
}
|
||||
|
||||
renderTransaction () {
|
||||
const { isTest } = this.props;
|
||||
const { transaction } = this.props;
|
||||
|
||||
return (
|
||||
<td className={ styles.transaction }>
|
||||
{ this.renderEtherValue() }
|
||||
<div>⇒</div>
|
||||
<div>
|
||||
<a
|
||||
className={ styles.link }
|
||||
href={ txLink(transaction.hash, isTest) }
|
||||
target='_blank'
|
||||
>
|
||||
<ShortenedHash data={ transaction.hash } />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
|
||||
renderAddress (address) {
|
||||
const { isTest } = this.props;
|
||||
|
||||
const eslink = address ? (
|
||||
<a
|
||||
href={ addressLink(address, isTest) }
|
||||
target='_blank'
|
||||
className={ styles.link }>
|
||||
<IdentityName address={ address } shorten />
|
||||
</a>
|
||||
) : 'DEPLOY';
|
||||
|
||||
return (
|
||||
<td className={ styles.address }>
|
||||
<div className={ styles.center }>
|
||||
<IdentityIcon
|
||||
center
|
||||
className={ styles.icon }
|
||||
address={ address } />
|
||||
</div>
|
||||
<div className={ styles.center }>
|
||||
{ eslink }
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
|
||||
renderEtherValue () {
|
||||
const { api } = this.context;
|
||||
const { transaction } = this.state;
|
||||
|
||||
if (!transaction) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value = api.util.fromWei(transaction.value);
|
||||
|
||||
if (value.eq(0)) {
|
||||
return <div className={ styles.value }>{ ' ' }</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.value }>
|
||||
{ value.toFormat(5) }<small>ETH</small>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
formatNumber (number) {
|
||||
return new BigNumber(number).toFormat();
|
||||
}
|
||||
|
||||
formatBlockTimestamp (block) {
|
||||
if (!block) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return moment(block.timestamp).fromNow();
|
||||
}
|
||||
|
||||
lookup () {
|
||||
const { api } = this.context;
|
||||
const { transaction, address } = this.props;
|
||||
|
||||
this.setState({ isReceived: address === transaction.to });
|
||||
|
||||
Promise
|
||||
.all([
|
||||
api.eth.getBlockByNumber(transaction.blockNumber),
|
||||
api.eth.getTransactionByHash(transaction.hash)
|
||||
])
|
||||
.then(([block, transaction]) => {
|
||||
this.setState({ block, transaction });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('lookup', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -14,49 +14,10 @@
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.transactions {
|
||||
}
|
||||
|
||||
.transactions table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.transactions tr {
|
||||
line-height: 32px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.transactions tr:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.transactions th {
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transactions td {
|
||||
vertical-align: top;
|
||||
padding: 0.75em 0.75em;
|
||||
}
|
||||
|
||||
.transactions .link {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.infonone {
|
||||
opacity: 0.25;
|
||||
}
|
||||
@@ -67,35 +28,3 @@
|
||||
font-size: 0.75em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.address {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transactions td.transaction {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.transaction div {
|
||||
line-height: 1.25em;
|
||||
min-height: 1.25em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.method {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.transactions td.timestamp {
|
||||
padding-top: 1.5em;
|
||||
text-align: right;
|
||||
line-height: 1.5em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -17,12 +17,9 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import LinearProgress from 'material-ui/LinearProgress';
|
||||
|
||||
import etherscan from '../../../3rdparty/etherscan';
|
||||
import { Container, ContainerTitle } from '../../../ui';
|
||||
|
||||
import Transaction from './Transaction';
|
||||
import { Container, TxList } from '../../../ui';
|
||||
|
||||
import styles from './transactions.css';
|
||||
|
||||
@@ -33,16 +30,12 @@ class Transactions extends Component {
|
||||
|
||||
static propTypes = {
|
||||
address: PropTypes.string.isRequired,
|
||||
accounts: PropTypes.object,
|
||||
contacts: PropTypes.object,
|
||||
contracts: PropTypes.object,
|
||||
tokens: PropTypes.object,
|
||||
isTest: PropTypes.bool,
|
||||
traceMode: PropTypes.bool
|
||||
}
|
||||
|
||||
state = {
|
||||
transactions: [],
|
||||
hashes: [],
|
||||
loading: true,
|
||||
callInfo: {}
|
||||
}
|
||||
@@ -67,38 +60,16 @@ class Transactions extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Container>
|
||||
<ContainerTitle title='transactions' />
|
||||
{ this.renderTransactions() }
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderTransactions () {
|
||||
const { loading, transactions } = this.state;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<LinearProgress mode='indeterminate' />
|
||||
);
|
||||
} else if (!transactions.length) {
|
||||
return (
|
||||
<div className={ styles.infonone }>
|
||||
No transactions were found for this account
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const { address } = this.props;
|
||||
const { hashes } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.transactions }>
|
||||
<table>
|
||||
<tbody>
|
||||
{ this.renderRows() }
|
||||
</tbody>
|
||||
</table>
|
||||
<Container title='transactions'>
|
||||
<TxList
|
||||
address={ address }
|
||||
hashes={ hashes } />
|
||||
{ this.renderEtherscanFooter() }
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -116,30 +87,6 @@ class Transactions extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
renderRows () {
|
||||
const { address, accounts, contacts, contracts, tokens, isTest } = this.props;
|
||||
const { transactions } = this.state;
|
||||
|
||||
return (transactions || [])
|
||||
.sort((tA, tB) => {
|
||||
return tB.blockNumber.comparedTo(tA.blockNumber);
|
||||
})
|
||||
.slice(0, 25)
|
||||
.map((transaction, index) => {
|
||||
return (
|
||||
<Transaction
|
||||
key={ index }
|
||||
transaction={ transaction }
|
||||
address={ address }
|
||||
accounts={ accounts }
|
||||
contacts={ contacts }
|
||||
contracts={ contracts }
|
||||
tokens={ tokens }
|
||||
isTest={ isTest } />
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
getTransactions = (props) => {
|
||||
const { isTest, address, traceMode } = props;
|
||||
|
||||
@@ -151,9 +98,9 @@ class Transactions extends Component {
|
||||
|
||||
return this
|
||||
.fetchTransactions(isTest, address, traceMode)
|
||||
.then(transactions => {
|
||||
.then((transactions) => {
|
||||
this.setState({
|
||||
transactions,
|
||||
hashes: transactions.map((transaction) => transaction.hash),
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
@@ -204,16 +151,10 @@ class Transactions extends Component {
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { isTest, traceMode } = state.nodeStatus;
|
||||
const { accounts, contacts, contracts } = state.personal;
|
||||
const { tokens } = state.balances;
|
||||
|
||||
return {
|
||||
isTest,
|
||||
traceMode,
|
||||
accounts,
|
||||
contacts,
|
||||
contracts,
|
||||
tokens
|
||||
traceMode
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -18,15 +18,17 @@ import BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import Store from '../../store';
|
||||
import * as RequestsActions from '../../../../redux/providers/signerActions';
|
||||
import { Container, ContainerTitle } from '../../../../ui';
|
||||
import { Container, Page, TxList } from '../../../../ui';
|
||||
|
||||
import { RequestPending, RequestFinished } from '../../components';
|
||||
|
||||
import styles from './RequestsPage.css';
|
||||
|
||||
@observer
|
||||
class RequestsPage extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
@@ -44,20 +46,19 @@ class RequestsPage extends Component {
|
||||
isTest: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
store = new Store(this.context.api);
|
||||
store = new Store(this.context.api, true);
|
||||
|
||||
componentWillUnmount () {
|
||||
this.store.unsubscribe();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { pending, finished } = this.props.signer;
|
||||
|
||||
if (!pending.length && !finished.length) {
|
||||
return this.renderNoRequestsMsg();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ this.renderPendingRequests() }
|
||||
{ this.renderFinishedRequests() }
|
||||
</div>
|
||||
<Page>
|
||||
<div>{ this.renderPendingRequests() }</div>
|
||||
<div>{ this.renderLocalQueue() }</div>
|
||||
<div>{ this.renderFinishedRequests() }</div>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -65,18 +66,39 @@ class RequestsPage extends Component {
|
||||
return new BigNumber(b.id).cmp(a.id);
|
||||
}
|
||||
|
||||
renderLocalQueue () {
|
||||
const { localHashes } = this.store;
|
||||
|
||||
if (!localHashes.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container title='Local Transactions'>
|
||||
<TxList
|
||||
address=''
|
||||
hashes={ localHashes } />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderPendingRequests () {
|
||||
const { pending } = this.props.signer;
|
||||
|
||||
if (!pending.length) {
|
||||
return;
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.noRequestsMsg }>
|
||||
There are no requests requiring your confirmation.
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const items = pending.sort(this._sortRequests).map(this.renderPending);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ContainerTitle title='Pending Requests' />
|
||||
<Container title='Pending Requests'>
|
||||
<div className={ styles.items }>
|
||||
{ items }
|
||||
</div>
|
||||
@@ -94,8 +116,7 @@ class RequestsPage extends Component {
|
||||
const items = finished.sort(this._sortRequests).map(this.renderFinished);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ContainerTitle title='Finished Requests' />
|
||||
<Container title='Finished Requests'>
|
||||
<div className={ styles.items }>
|
||||
{ items }
|
||||
</div>
|
||||
@@ -143,16 +164,6 @@ class RequestsPage extends Component {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderNoRequestsMsg () {
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.noRequestsMsg }>
|
||||
There are no requests requiring your confirmation.
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { Actionbar, Page } from '../../ui';
|
||||
import { Actionbar } from '../../ui';
|
||||
import RequestsPage from './containers/RequestsPage';
|
||||
|
||||
import styles from './signer.css';
|
||||
@@ -27,9 +27,7 @@ export default class Signer extends Component {
|
||||
<div className={ styles.signer }>
|
||||
<Actionbar
|
||||
title='Trusted Signer' />
|
||||
<Page>
|
||||
<RequestsPage />
|
||||
</Page>
|
||||
<RequestsPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,13 +14,26 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { isEqual } from 'lodash';
|
||||
import { action, observable } from 'mobx';
|
||||
|
||||
export default class Store {
|
||||
@observable balances = {};
|
||||
@observable localHashes = [];
|
||||
|
||||
constructor (api) {
|
||||
constructor (api, withLocalTransactions = false) {
|
||||
this._api = api;
|
||||
this._timeoutId = 0;
|
||||
|
||||
if (withLocalTransactions) {
|
||||
this.fetchLocalTransactions();
|
||||
}
|
||||
}
|
||||
|
||||
@action unsubscribe () {
|
||||
if (this._timeoutId) {
|
||||
clearTimeout(this._timeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
@action setBalance = (address, balance) => {
|
||||
@@ -31,6 +44,12 @@ export default class Store {
|
||||
this.balances = Object.assign({}, this.balances, balances);
|
||||
}
|
||||
|
||||
@action setLocalHashes = (localHashes) => {
|
||||
if (!isEqual(localHashes, this.localHashes)) {
|
||||
this.localHashes = localHashes;
|
||||
}
|
||||
}
|
||||
|
||||
fetchBalance (address) {
|
||||
this._api.eth
|
||||
.getBalance(address)
|
||||
@@ -63,4 +82,18 @@ export default class Store {
|
||||
console.warn('Store:fetchBalances', error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchLocalTransactions = () => {
|
||||
const nextTimeout = () => {
|
||||
this._timeoutId = setTimeout(this.fetchLocalTransactions, 1500);
|
||||
};
|
||||
|
||||
this._api.parity
|
||||
.localTransactions()
|
||||
.then((localTransactions) => {
|
||||
this.setLocalHashes(Object.keys(localTransactions));
|
||||
})
|
||||
.then(nextTimeout)
|
||||
.catch(nextTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user