Use trace API for decentralized transaction list (#2784)

* Using traces when available to get accounts transactions (#2148)

* Fixed traceMode detection and transactions rendering (#2148)

* [WIP] Use Redux Thunk in main UI => Async Actions (#2148)

* Using Redux for Transaction / Block / Methods... (#2148)

* Use BigNumber comparedTo function to sort txs (#2148)
This commit is contained in:
Nicolas Gotchac 2016-10-22 09:45:54 +02:00 committed by Jaco Greeff
parent 479657b23b
commit 76cded7fa4
16 changed files with 519 additions and 109 deletions

View File

@ -141,3 +141,24 @@ export function inOptions (options) {
return options; return options;
} }
export function inTraceFilter (filterObject) {
if (filterObject) {
Object.keys(filterObject).forEach((key) => {
switch (key) {
case 'fromAddress':
case 'toAddress':
filterObject[key] = [].concat(filterObject[key])
.map(address => inAddress(address));
break;
case 'toBlock':
case 'fromBlock':
filterObject[key] = inBlockNumber(filterObject[key]);
break;
}
});
}
return filterObject;
}

View File

@ -14,7 +14,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import { inBlockNumber, inHex, inNumber16 } from '../../format/input'; import { inBlockNumber, inHex, inNumber16, inTraceFilter } from '../../format/input';
import { outTrace } from '../../format/output'; import { outTrace } from '../../format/output';
export default class Trace { export default class Trace {
@ -24,7 +24,7 @@ export default class Trace {
filter (filterObj) { filter (filterObj) {
return this._transport return this._transport
.execute('trace_filter', filterObj) .execute('trace_filter', inTraceFilter(filterObj))
.then(traces => traces.map(trace => outTrace(trace))); .then(traces => traces.map(trace => outTrace(trace)));
} }

View File

@ -39,6 +39,8 @@ import { initStore } from './redux';
import { ContextProvider, muiTheme } from './ui'; import { ContextProvider, muiTheme } from './ui';
import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsProxy, SettingsViews, Signer, Status } from './views'; import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsProxy, SettingsViews, Signer, Status } from './views';
import { setApi } from './redux/providers/apiActions';
import './environment'; import './environment';
import '../assets/fonts/Roboto/font.css'; import '../assets/fonts/Roboto/font.css';
@ -60,6 +62,7 @@ ContractInstances.create(api);
const store = initStore(api); const store = initStore(api);
store.dispatch({ type: 'initAll', api }); store.dispatch({ type: 'initAll', api });
store.dispatch(setApi(api));
const routerHistory = useRouterHistory(createHashHistory)({}); const routerHistory = useRouterHistory(createHashHistory)({});

View File

@ -13,6 +13,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import thunk from 'redux-thunk';
import ErrorsMiddleware from '../ui/Errors/middleware'; import ErrorsMiddleware from '../ui/Errors/middleware';
import SettingsMiddleware from '../views/Settings/middleware'; import SettingsMiddleware from '../views/Settings/middleware';
@ -32,5 +33,5 @@ export default function (api) {
errors.toMiddleware() errors.toMiddleware()
]; ];
return middleware.concat(status); return middleware.concat(status, thunk);
} }

View File

@ -0,0 +1,22 @@
// 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 function setApi (api) {
return {
type: 'setApi',
api
};
}

View File

@ -0,0 +1,26 @@
// 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 { handleActions } from 'redux-actions';
const initialState = {};
export default handleActions({
setApi (state, action) {
const { api } = action;
return api;
}
}, initialState);

View File

@ -0,0 +1,128 @@
// 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 Contracts from '../../contracts';
export function setBlock (blockNumber, block) {
return {
type: 'setBlock',
blockNumber, block
};
}
export function setTransaction (txHash, info) {
return {
type: 'setTransaction',
txHash, info
};
}
export function setBytecode (address, bytecode) {
return {
type: 'setBytecode',
address, bytecode
};
}
export function setMethod (signature, method) {
return {
type: 'setMethod',
signature, method
};
}
export function fetchBlock (blockNumber) {
return (dispatch, getState) => {
const { blocks } = getState().blockchain;
if (blocks[blockNumber.toString()]) {
return;
}
const { api } = getState();
api.eth
.getBlockByNumber(blockNumber)
.then(block => {
dispatch(setBlock(blockNumber, block));
})
.catch(e => {
console.error('blockchain::fetchBlock', e);
});
};
}
export function fetchTransaction (txHash) {
return (dispatch, getState) => {
const { transactions } = getState().blockchain;
if (transactions[txHash]) {
return;
}
const { api } = getState();
api.eth
.getTransactionByHash(txHash)
.then(info => {
dispatch(setTransaction(txHash, info));
})
.catch(e => {
console.error('blockchain::fetchTransaction', e);
});
};
}
export function fetchBytecode (address) {
return (dispatch, getState) => {
const { bytecodes } = getState().blockchain;
if (bytecodes[address]) {
return;
}
const { api } = getState();
api.eth
.getCode(address)
.then(code => {
dispatch(setBytecode(address, code));
})
.catch(e => {
console.error('blockchain::fetchBytecode', e);
});
};
}
export function fetchMethod (signature) {
return (dispatch, getState) => {
const { methods } = getState().blockchain;
if (methods[signature]) {
return;
}
Contracts
.get()
.signatureReg.lookup(signature)
.then(method => {
dispatch(setMethod(signature, method));
})
.catch(e => {
console.error('blockchain::fetchMethod', e);
});
};
}

View File

@ -0,0 +1,66 @@
// 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 { handleActions } from 'redux-actions';
const initialState = {
blocks: {},
transactions: {},
bytecodes: {},
methods: {}
};
export default handleActions({
setBlock (state, action) {
const { blockNumber, block } = action;
const blocks = Object.assign({}, state.blocks, {
[blockNumber.toString()]: block
});
return Object.assign({}, state, { blocks });
},
setTransaction (state, action) {
const { txHash, info } = action;
const transactions = Object.assign({}, state.transactions, {
[txHash]: info
});
return Object.assign({}, state, { transactions });
},
setBytecode (state, action) {
const { address, bytecode } = action;
const bytecodes = Object.assign({}, state.bytecodes, {
[address]: bytecode
});
return Object.assign({}, state, { bytecodes });
},
setMethod (state, action) {
const { signature, method } = action;
const methods = Object.assign({}, state.methods, {
[signature]: method
});
return Object.assign({}, state, { methods });
}
}, initialState);

View File

@ -19,8 +19,10 @@ export Personal from './personal';
export Signer from './signer'; export Signer from './signer';
export Status from './status'; export Status from './status';
export apiReducer from './apiReducer';
export balancesReducer from './balancesReducer'; export balancesReducer from './balancesReducer';
export imagesReducer from './imagesReducer'; export imagesReducer from './imagesReducer';
export personalReducer from './personalReducer'; export personalReducer from './personalReducer';
export signerReducer from './signerReducer'; export signerReducer from './signerReducer';
export statusReducer from './statusReducer'; export statusReducer from './statusReducer';
export blockchainReducer from './blockchainReducer';

View File

@ -54,6 +54,16 @@ export default class Status {
.catch(() => dispatch(false)); .catch(() => dispatch(false));
} }
_pollTraceMode = () => {
return this._api.trace.block()
.then(blockTraces => {
// Assumes not in Trace Mode if no transactions
// in latest block...
return blockTraces.length > 0;
})
.catch(() => false);
}
_pollStatus = () => { _pollStatus = () => {
const { secureToken, isConnected, isConnecting, needsToken } = this._api; const { secureToken, isConnected, isConnecting, needsToken } = this._api;
const nextTimeout = (timeout = 1000) => { const nextTimeout = (timeout = 1000) => {
@ -80,9 +90,10 @@ export default class Status {
this._api.ethcore.netPort(), this._api.ethcore.netPort(),
this._api.ethcore.nodeName(), this._api.ethcore.nodeName(),
this._api.ethcore.rpcSettings(), this._api.ethcore.rpcSettings(),
this._api.eth.syncing() this._api.eth.syncing(),
this._pollTraceMode()
]) ])
.then(([clientVersion, coinbase, defaultExtraData, extraData, gasFloorTarget, hashrate, minGasPrice, netChain, netPeers, netPort, nodeName, rpcSettings, syncing]) => { .then(([clientVersion, coinbase, defaultExtraData, extraData, gasFloorTarget, hashrate, minGasPrice, netChain, netPeers, netPort, nodeName, rpcSettings, syncing, traceMode]) => {
const isTest = netChain === 'morden' || netChain === 'testnet'; const isTest = netChain === 'morden' || netChain === 'testnet';
this._store.dispatch(statusCollection({ this._store.dispatch(statusCollection({
@ -99,7 +110,8 @@ export default class Status {
nodeName, nodeName,
rpcSettings, rpcSettings,
syncing, syncing,
isTest isTest,
traceMode
})); }));
nextTimeout(); nextTimeout();
}) })

View File

@ -41,7 +41,8 @@ const initialState = {
syncing: false, syncing: false,
isApiConnected: true, isApiConnected: true,
isPingConnected: true, isPingConnected: true,
isTest: true isTest: false,
traceMode: undefined
}; };
export default handleActions({ export default handleActions({

View File

@ -17,7 +17,7 @@
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux'; import { routerReducer } from 'react-router-redux';
import { balancesReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers'; import { apiReducer, balancesReducer, blockchainReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
import { errorReducer } from '../ui/Errors'; import { errorReducer } from '../ui/Errors';
import { settingsReducer } from '../views/Settings'; import { settingsReducer } from '../views/Settings';
@ -25,12 +25,14 @@ import { tooltipReducer } from '../ui/Tooltips';
export default function () { export default function () {
return combineReducers({ return combineReducers({
api: apiReducer,
errors: errorReducer, errors: errorReducer,
tooltip: tooltipReducer, tooltip: tooltipReducer,
routing: routerReducer, routing: routerReducer,
settings: settingsReducer, settings: settingsReducer,
balances: balancesReducer, balances: balancesReducer,
blockchain: blockchainReducer,
images: imagesReducer, images: imagesReducer,
nodeStatus: nodeStatusReducer, nodeStatus: nodeStatusReducer,
personal: personalReducer, personal: personalReducer,

View File

@ -19,11 +19,12 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import Contracts from '../../contracts';
import IdentityIcon from '../IdentityIcon'; import IdentityIcon from '../IdentityIcon';
import IdentityName from '../IdentityName'; import IdentityName from '../IdentityName';
import { Input, InputAddress } from '../Form'; import { Input, InputAddress } from '../Form';
import { fetchBytecode, fetchMethod } from '../../redux/providers/blockchainActions';
import styles from './methodDecoding.css'; import styles from './methodDecoding.css';
const CONTRACT_CREATE = '0x60606040'; const CONTRACT_CREATE = '0x60606040';
@ -31,7 +32,7 @@ const TOKEN_METHODS = {
'0xa9059cbb': 'transfer(to,value)' '0xa9059cbb': 'transfer(to,value)'
}; };
class Method extends Component { class MethodDecoding extends Component {
static contextTypes = { static contextTypes = {
api: PropTypes.object.isRequired api: PropTypes.object.isRequired
} }
@ -40,10 +41,16 @@ class Method extends Component {
address: PropTypes.string.isRequired, address: PropTypes.string.isRequired,
tokens: PropTypes.object, tokens: PropTypes.object,
transaction: PropTypes.object, transaction: PropTypes.object,
historic: PropTypes.bool historic: PropTypes.bool,
fetchBytecode: PropTypes.func,
fetchMethod: PropTypes.func,
bytecodes: PropTypes.object,
methods: PropTypes.object
} }
state = { state = {
contractAddress: null,
method: null, method: null,
methodName: null, methodName: null,
methodInputs: null, methodInputs: null,
@ -55,20 +62,59 @@ class Method extends Component {
isReceived: false isReceived: false
} }
componentDidMount () { componentWillMount () {
const { transaction } = this.props; const { transaction } = this.props;
this.lookup(transaction); this.lookup(transaction);
} }
componentDidMount () {
this.setMethod(this.props);
}
componentWillReceiveProps (newProps) { componentWillReceiveProps (newProps) {
const { transaction } = this.props; const { transaction } = this.props;
this.setMethod(newProps);
if (newProps.transaction === transaction) { if (newProps.transaction.hash !== transaction.hash) {
this.lookup(transaction);
return; return;
} }
}
this.lookup(transaction); setMethod (props) {
const { bytecodes, methods } = props;
const { contractAddress, methodSignature, methodParams } = this.state;
if (contractAddress && bytecodes[contractAddress]) {
const bytecode = bytecodes[contractAddress];
if (bytecode && bytecode !== '0x') {
this.setState({ isContract: true });
}
}
if (methodSignature && methods[methodSignature]) {
const method = methods[methodSignature];
const { api } = this.context;
let methodInputs = null;
let methodName = null;
if (method && method.length) {
const abi = api.util.methodToAbi(method);
methodName = abi.name;
methodInputs = api.util
.decodeMethodInput(abi, methodParams)
.map((value, index) => {
const type = abi.inputs[index].type;
return { type, value };
});
}
this.setState({ method, methodName, methodInputs });
}
} }
render () { render () {
@ -150,7 +196,7 @@ class Method extends Component {
return ( return (
<div className={ styles.details }> <div className={ styles.details }>
Deployed a contract at address <span className={ styles.highlight }>{ this.renderAddressName(transaction.creates, false) }</span>. Deployed a contract at address <span className={ styles.highlight }>{ this.renderAddressName(transaction.creates, false) }</span>
</div> </div>
); );
} }
@ -275,18 +321,20 @@ class Method extends Component {
} }
lookup (transaction) { lookup (transaction) {
const { api } = this.context;
const { address, tokens } = this.props;
if (!transaction) { if (!transaction) {
return; return;
} }
const isReceived = transaction.to === address; const { api } = this.context;
const token = (tokens || {})[isReceived ? transaction.from : transaction.to]; const { address, tokens } = this.props;
this.setState({ token, isReceived });
if (!transaction.input) { const isReceived = transaction.to === address;
const contractAddress = isReceived ? transaction.from : transaction.to;
const token = (tokens || {})[contractAddress];
this.setState({ token, isReceived, contractAddress });
if (!transaction.input || transaction.input === '0x') {
return; return;
} }
@ -298,52 +346,29 @@ class Method extends Component {
return; return;
} }
api.eth const { fetchBytecode, fetchMethod } = this.props;
.getCode(isReceived ? transaction.from : transaction.to)
.then((code) => {
if (code && code !== '0x') {
this.setState({ isContract: true });
}
return Contracts.get().signatureReg.lookup(signature); fetchBytecode(contractAddress);
}).then((method) => { fetchMethod(signature);
let methodInputs = null;
let methodName = null;
if (method && method.length) {
const abi = api.util.methodToAbi(method);
methodName = abi.name;
methodInputs = api.util
.decodeMethodInput(abi, paramdata)
.map((value, index) => {
const type = abi.inputs[index].type;
return { type, value };
});
}
this.setState({ method, methodName, methodInputs });
})
.catch((error) => {
console.error('lookup', error);
});
} }
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { tokens } = state.balances; const { tokens } = state.balances;
const { bytecodes, methods } = state.blockchain;
return { return {
tokens tokens, bytecodes, methods
}; };
} }
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return bindActionCreators({}, dispatch); return bindActionCreators({
fetchBytecode, fetchMethod
}, dispatch);
} }
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Method); )(MethodDecoding);

View File

@ -38,7 +38,6 @@ export function validateAbi (abi, api) {
abi = JSON.stringify(abiParsed); abi = JSON.stringify(abiParsed);
} }
} catch (error) { } catch (error) {
console.error(error);
abiError = ERRORS.invalidAbi; abiError = ERRORS.invalidAbi;
} }

View File

@ -17,12 +17,16 @@
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import moment from 'moment'; import moment from 'moment';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBlock, fetchTransaction } from '../../../../redux/providers/blockchainActions';
import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui'; import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui';
import styles from '../transactions.css'; import styles from '../transactions.css';
export default class Transaction extends Component { class Transaction extends Component {
static contextTypes = { static contextTypes = {
api: PropTypes.object.isRequired api: PropTypes.object.isRequired
} }
@ -30,11 +34,16 @@ export default class Transaction extends Component {
static propTypes = { static propTypes = {
transaction: PropTypes.object.isRequired, transaction: PropTypes.object.isRequired,
address: PropTypes.string.isRequired, address: PropTypes.string.isRequired,
isTest: PropTypes.bool.isRequired isTest: PropTypes.bool.isRequired,
fetchBlock: PropTypes.func.isRequired,
fetchTransaction: PropTypes.func.isRequired,
block: PropTypes.object,
transactionInfo: PropTypes.object
} }
state = { state = {
info: null,
isContract: false, isContract: false,
isReceived: false isReceived: false
} }
@ -46,8 +55,7 @@ export default class Transaction extends Component {
} }
render () { render () {
const { transaction, isTest } = this.props; const { block, transaction, isTest } = this.props;
const { block } = this.state;
const prefix = `https://${isTest ? 'testnet.' : ''}etherscan.io/`; const prefix = `https://${isTest ? 'testnet.' : ''}etherscan.io/`;
@ -68,10 +76,9 @@ export default class Transaction extends Component {
} }
renderMethod () { renderMethod () {
const { address } = this.props; const { address, transactionInfo } = this.props;
const { info } = this.state;
if (!info) { if (!transactionInfo) {
return null; return null;
} }
@ -79,7 +86,7 @@ export default class Transaction extends Component {
<MethodDecoding <MethodDecoding
historic historic
address={ address } address={ address }
transaction={ info } /> transaction={ transactionInfo } />
); );
} }
@ -129,13 +136,13 @@ export default class Transaction extends Component {
renderEtherValue () { renderEtherValue () {
const { api } = this.context; const { api } = this.context;
const { info } = this.state; const { transactionInfo } = this.props;
if (!info) { if (!transactionInfo) {
return null; return null;
} }
const value = api.util.fromWei(info.value); const value = api.util.fromWei(transactionInfo.value);
if (value.eq(0)) { if (value.eq(0)) {
return <div className={ styles.value }>{ ' ' }</div>; return <div className={ styles.value }>{ ' ' }</div>;
@ -169,25 +176,33 @@ export default class Transaction extends Component {
} }
lookup (address, transaction) { lookup (address, transaction) {
const { api } = this.context; const { transactionInfo } = this.props;
const { info } = this.state;
if (info) { if (transactionInfo) {
return; return;
} }
this.setState({ isReceived: address === transaction.to }); this.setState({ isReceived: address === transaction.to });
Promise const { fetchBlock, fetchTransaction } = this.props;
.all([ const { blockNumber, hash } = transaction;
api.eth.getBlockByNumber(transaction.blockNumber),
api.eth.getTransactionByHash(transaction.hash) fetchBlock(blockNumber);
]) fetchTransaction(hash);
.then(([block, info]) => {
this.setState({ block, info });
})
.catch((error) => {
console.error('lookup', error);
});
} }
} }
function mapStateToProps () {
return {};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
fetchBlock, fetchTransaction
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Transaction);

View File

@ -37,7 +37,10 @@ class Transactions extends Component {
contacts: PropTypes.object, contacts: PropTypes.object,
contracts: PropTypes.object, contracts: PropTypes.object,
tokens: PropTypes.object, tokens: PropTypes.object,
isTest: PropTypes.bool isTest: PropTypes.bool,
traceMode: PropTypes.bool,
blocks: PropTypes.object,
transactionsInfo: PropTypes.object
} }
state = { state = {
@ -47,7 +50,24 @@ class Transactions extends Component {
} }
componentDidMount () { componentDidMount () {
this.getTransactions(); if (this.props.traceMode !== undefined) {
this.getTransactions(this.props);
}
}
componentWillReceiveProps (newProps) {
if (this.props.traceMode === undefined && newProps.traceMode !== undefined) {
this.getTransactions(newProps);
return;
}
const hasChanged = [ 'isTest', 'address' ]
.map(key => newProps[key] !== this.props[key])
.reduce((truth, keyTruth) => truth || keyTruth, false);
if (hasChanged) {
this.getTransactions(newProps);
}
} }
render () { render () {
@ -81,60 +101,127 @@ class Transactions extends Component {
{ this.renderRows() } { this.renderRows() }
</tbody> </tbody>
</table> </table>
<div className={ styles.etherscan }> { this.renderEtherscanFooter() }
Transaction list powered by <a href='https://etherscan.io/' target='_blank'>etherscan.io</a> </div>
</div> );
}
renderEtherscanFooter () {
const { traceMode } = this.props;
if (traceMode) {
return null;
}
return (
<div className={ styles.etherscan }>
Transaction list powered by <a href='https://etherscan.io/' target='_blank'>etherscan.io</a>
</div> </div>
); );
} }
renderRows () { renderRows () {
const { address, accounts, contacts, contracts, tokens, isTest } = this.props; const { address, accounts, contacts, contracts, tokens, isTest, blocks, transactionsInfo } = this.props;
const { transactions } = this.state; const { transactions } = this.state;
return (transactions || []).map((transaction, index) => { return (transactions || [])
return ( .sort((tA, tB) => {
<Transaction return tB.blockNumber.comparedTo(tA.blockNumber);
key={ index } })
transaction={ transaction } .slice(0, 25)
address={ address } .map((transaction, index) => {
accounts={ accounts } const { blockNumber, hash } = transaction;
contacts={ contacts }
contracts={ contracts } const block = blocks[blockNumber.toString()];
tokens={ tokens } const transactionInfo = transactionsInfo[hash];
isTest={ isTest } />
); return (
}); <Transaction
key={ index }
block={ block }
transactionInfo={ transactionInfo }
transaction={ transaction }
address={ address }
accounts={ accounts }
contacts={ contacts }
contracts={ contracts }
tokens={ tokens }
isTest={ isTest } />
);
});
} }
getTransactions = () => { getTransactions = (props) => {
const { isTest, address } = this.props; const { isTest, address, traceMode } = props;
return etherscan.account return this
.transactions(address, 0, isTest) .fetchTransactions(isTest, address, traceMode)
.then((transactions) => { .then(transactions => {
this.setState({ this.setState({
transactions, transactions,
loading: false loading: false
}); });
}) });
}
fetchTransactions = (isTest, address, traceMode) => {
if (traceMode) {
return this.fetchTraceTransactions(address);
}
return this.fetchEtherscanTransactions(isTest, address);
}
fetchEtherscanTransactions = (isTest, address) => {
return etherscan.account
.transactions(address, 0, isTest)
.catch((error) => { .catch((error) => {
console.error('getTransactions', error); console.error('getTransactions', error);
}); });
} }
fetchTraceTransactions = (address) => {
return Promise
.all([
this.context.api.trace
.filter({
fromBlock: 0,
fromAddress: address
}),
this.context.api.trace
.filter({
fromBlock: 0,
toAddress: address
})
])
.then(([fromTransactions, toTransactions]) => {
const transactions = [].concat(fromTransactions, toTransactions);
return transactions.map(transaction => ({
from: transaction.action.from,
to: transaction.action.to,
blockNumber: transaction.blockNumber,
hash: transaction.transactionHash
}));
});
}
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { isTest } = state.nodeStatus; const { isTest, traceMode } = state.nodeStatus;
const { accounts, contacts, contracts } = state.personal; const { accounts, contacts, contracts } = state.personal;
const { tokens } = state.balances; const { tokens } = state.balances;
const { blocks, transactions } = state.blockchain;
return { return {
isTest, isTest,
traceMode,
accounts, accounts,
contacts, contacts,
contracts, contracts,
tokens tokens,
blocks,
transactionsInfo: transactions
}; };
} }