grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhanced MethodDecoding in Transactions list (#3454)

Browse Source 
* Better MethodDecoding UI // No empty params #3452

* Display input if ASCII in transactions #3434

* Fixes UI for #3454

* Better MethodDecoding contract detection #3454
This commit is contained in:
Nicolas Gotchac 2016-11-16 18:03:59 +01:00 committed by Jaco Greeff
parent a7574a1108
commit 18f570327e
7 changed files with 206 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/api/util/format.js
View File

@ -17,3 +17,15 @@
export function bytesToHex (bytes) {
return '0x' + bytes.map((b) => ('0' + b.toString(16)).slice(-2)).join('');
}
export function hex2Ascii (_hex) {
const hex = /^(?:0x)?(.*)$/.exec(_hex.toString())[1];
let str = '';
for (let i = 0; i < hex.length; i += 2) {
str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
}
return str;
}

3
js/src/api/util/index.js
View File

@ -16,7 +16,7 @@
import { isAddress as isAddressValid, toChecksumAddress } from '../../abi/util/address';
import { decodeCallData, decodeMethodInput, methodToAbi } from './decode';
import { bytesToHex } from './format';
import { bytesToHex, hex2Ascii } from './format';
import { fromWei, toWei } from './wei';
import { sha3 } from './sha3';
import { isArray, isFunction, isHex, isInstanceOf, isString } from './types';
@ -30,6 +30,7 @@ export default {
isInstanceOf,
isString,
bytesToHex,
hex2Ascii,
createIdentityImg,
decodeCallData,
decodeMethodInput,

5
js/src/ui/Form/Input/input.js
View File

@ -144,7 +144,7 @@ export default class Input extends Component {
}
renderCopyButton () {
const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
const { allowCopy, label, hint, floatCopy } = this.props;
const { value } = this.state;
if (!allowCopy) {
@ -159,7 +159,7 @@ export default class Input extends Component {
? allowCopy
: value;
if (hideUnderline && !label) {
if (!label) {
style.marginBottom = 2;
} else if (label && !hint) {
style.marginBottom = 4;
@ -182,6 +182,7 @@ export default class Input extends Component {
}
onChange = (event, value) => {
event.persist();
this.setValue(value, () => {
this.props.onChange && this.props.onChange(event, value);
});

1
js/src/ui/Form/InputAddress/inputAddress.css
View File

@ -20,6 +20,7 @@
.input input {
padding-left: 48px !important;
box-sizing: border-box;
}
.inputEmpty input {

1
js/src/ui/Form/InputAddress/inputAddress.js
View File

@ -76,6 +76,7 @@ class InputAddress extends Component {
}
const classes = [disabled ? styles.iconDisabled : styles.icon];
if (!label) {
classes.push(styles.noLabel);
}

12
js/src/ui/MethodDecoding/methodDecoding.css
View File

@ -18,6 +18,12 @@
.container {
}
.loading {
display: flex;
align-items: center;
justify-content: center;
}
.details,
.gasDetails {
color: #aaa;
@ -46,7 +52,7 @@
.highlight {
}
.inputs {
.inputs, .addressContainer {
padding-left: 2em;
}
@ -73,3 +79,7 @@
margin-bottom: -10px;
margin-right: 0.5em;
}
.inputData {
word-break: break-all;
}

230
js/src/ui/MethodDecoding/methodDecoding.js
View File

@ -18,14 +18,14 @@ import BigNumber from 'bignumber.js';
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import CircularProgress from 'material-ui/CircularProgress';
import Contracts from '../../contracts';
import IdentityIcon from '../IdentityIcon';
import IdentityName from '../IdentityName';
import { Input, InputAddress } from '../Form';
import styles from './methodDecoding.css';
const ASCII_INPUT = /^[a-z0-9\s,?;.:/!()-_@'"#]+$/i;
const CONTRACT_CREATE = '0x60606040';
const TOKEN_METHODS = {
'0xa9059cbb': 'transfer(to,value)'
@ -53,20 +53,36 @@ class MethodDecoding extends Component {
token: null,
isContract: false,
isDeploy: false,
isReceived: false
isReceived: false,
isLoading: true
}
componentWillMount () {
this.lookup();
const lookupResult = this.lookup();
if (typeof lookupResult === 'object' && typeof lookupResult.then === 'function') {
lookupResult.then(() => this.setState({ isLoading: false }));
} else {
this.setState({ isLoading: false });
}
}
render () {
const { transaction } = this.props;
const { isLoading } = this.state;
if (!transaction) {
return null;
}
if (isLoading) {
return (
<div className={ styles.loading }>
<CircularProgress size={ 60 } thickness={ 2 } />
</div>
);
}
return (
<div className={ styles.container }>
{ this.renderAction() }
@ -82,26 +98,33 @@ class MethodDecoding extends Component {
return (
<div className={ styles.gasDetails }>
{ historic ? 'Provided' : 'Provides' } <span className={ styles.highlight }>{ gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)</span> for a total transaction value of <span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
<span>{ historic ? 'Provided' : 'Provides' } </span>
<span className={ styles.highlight }>
{ gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)
</span>
<span> for a total transaction value of </span>
<span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
</div>
);
}
renderAction () {
const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived } = this.state;
const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived, isContract } = this.state;
if (isDeploy) {
return this.renderDeploy();
}
if (methodSignature) {
if (isContract && methodSignature) {
if (token && TOKEN_METHODS[methodSignature] && methodInputs) {
return this.renderTokenAction();
}
return methodName
? this.renderSignatureMethod()
: this.renderUnknownMethod();
if (methodName) {
return this.renderSignatureMethod();
}
return this.renderUnknownMethod();
}
return isReceived
@ -109,6 +132,28 @@ class MethodDecoding extends Component {
: this.renderValueTransfer();
}
renderInputValue () {
const { api } = this.context;
const { transaction } = this.props;
if (!/^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(transaction.input)) {
return null;
}
const ascii = api.util.hex2Ascii(transaction.input);
const text = ASCII_INPUT.test(ascii)
? ascii
: transaction.input;
return (
<div>
<span>with the input &nbsp;</span>
<code className={ styles.inputData }>{ text }</code>
</div>
);
}
renderTokenAction () {
const { historic } = this.props;
const { methodSignature, methodInputs } = this.state;
@ -120,7 +165,15 @@ class MethodDecoding extends Component {
default:
return (
<div className={ styles.details }>
{ historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderTokenValue(value.value) }</span> to <span className={ styles.highlight }>{ this.renderAddressName(address) }</span>.
<div>
<span>{ historic ? 'Transferred' : 'Will transfer' } </span>
<span className={ styles.highlight }>
{ this.renderTokenValue(value.value) }
</span>
<span> to </span>
</div>
{ this.renderAddressName(address) }
</div>
);
}
@ -139,7 +192,11 @@ class MethodDecoding extends Component {
return (
<div className={ styles.details }>
Deployed a contract at address <span className={ styles.highlight }>{ this.renderAddressName(transaction.creates, false) }</span>
<div>
<span>Deployed a contract at address </span>
</div>
{ this.renderAddressName(transaction.creates, false) }
</div>
);
}
@ -150,7 +207,16 @@ class MethodDecoding extends Component {
return (
<div className={ styles.details }>
{ historic ? 'Received' : 'Will receive' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> from { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.from) }</span>
<div>
<span>{ historic ? 'Received' : 'Will receive' } </span>
<span className={ styles.highlight }>
{ this.renderEtherValue(transaction.value) }
</span>
<span> from { isContract ? 'the contract' : '' } </span>
</div>
{ this.renderAddressName(transaction.from) }
{ this.renderInputValue() }
</div>
);
}
@ -161,19 +227,44 @@ class MethodDecoding extends Component {
return (
<div className={ styles.details }>
{ historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> to { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>
<div>
<span>{ historic ? 'Transferred' : 'Will transfer' } </span>
<span className={ styles.highlight }>
{ this.renderEtherValue(transaction.value) }
</span>
<span> to { isContract ? 'the contract' : '' } </span>
</div>
{ this.renderAddressName(transaction.to) }
{ this.renderInputValue() }
</div>
);
}
renderSignatureMethod () {
const { historic, transaction } = this.props;
const { methodName } = this.state;
const { methodName, methodInputs } = this.state;
return (
<div className={ styles.details }>
<div className={ styles.description }>
{ historic ? 'Executed' : 'Will execute' } the <span className={ styles.name }>{ methodName }</span> function on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>, passing the following parameters:
<div>
<span>{ historic ? 'Executed' : 'Will execute' } the </span>
<span className={ styles.name }>{ methodName }</span>
<span> function on the contract </span>
</div>
{ this.renderAddressName(transaction.to) }
<div>
<span>transferring </span>
<span className={ styles.highlight }>
{ this.renderEtherValue(transaction.value) }
</span>
<span>
{ methodInputs.length ? ', passing the following parameters:' : '.' }
</span>
</div>
</div>
<div className={ styles.inputs }>
{ this.renderInputs() }
@ -187,7 +278,21 @@ class MethodDecoding extends Component {
return (
<div className={ styles.details }>
{ historic ? 'Executed' : 'Will execute' } <span className={ styles.name }>an unknown/unregistered</span> method on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>.
<div>
<span>{ historic ? 'Executed' : 'Will execute' } </span>
<span className={ styles.name }>an unknown/unregistered</span>
<span> method on the contract </span>
</div>
{ this.renderAddressName(transaction.to) }
<div>
<span>transferring </span>
<span className={ styles.highlight }>
{ this.renderEtherValue(transaction.value) }
</span>
<span>.</span>
</div>
</div>
);
}
@ -239,7 +344,7 @@ class MethodDecoding extends Component {
return (
<span className={ styles.tokenValue }>
{ value.div(token.format).toFormat(5) }<small>{ token.tag }</small>
{ value.div(token.format).toFormat(5) }<small> { token.tag }</small>
</span>
);
}
@ -250,17 +355,21 @@ class MethodDecoding extends Component {
return (
<span className={ styles.etherValue }>
{ ether.toFormat(5) }<small>ETH</small>
{ ether.toFormat(5) }<small> ETH</small>
</span>
);
}
renderAddressName (address, withName = true) {
return (
<span className={ styles.address }>
<IdentityIcon center inline address={ address } className={ styles.identityicon } />
{ withName ? <IdentityName address={ address } /> : address }
</span>
<div className={ styles.addressContainer }>
<InputAddress
disabled
className={ styles.address }
value={ address }
text={ withName }
/>
</div>
);
}
@ -284,44 +393,57 @@ class MethodDecoding extends Component {
return;
}
const { signature, paramdata } = api.util.decodeCallData(transaction.input);
this.setState({ methodSignature: signature, methodParams: paramdata });
if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
this.setState({ isDeploy: true });
if (contractAddress === '0x') {
return;
}
Promise
.all([
api.eth.getCode(contractAddress),
Contracts.get().signatureReg.lookup(signature)
])
.then(([bytecode, method]) => {
let methodInputs = null;
let methodName = null;
return api.eth
.getCode(contractAddress || transaction.creates)
.then((bytecode) => {
const isContract = bytecode && /^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(bytecode);
if (method && method.length) {
const { methodParams } = this.state;
const abi = api.util.methodToAbi(method);
this.setState({ isContract });
methodName = abi.name;
methodInputs = api.util
.decodeMethodInput(abi, methodParams)
.map((value, index) => {
const type = abi.inputs[index].type;
return { type, value };
});
if (!isContract) {
return;
}
this.setState({
method,
methodName,
methodInputs,
bytecode,
isContract: bytecode && bytecode !== '0x'
});
const { signature, paramdata } = api.util.decodeCallData(transaction.input);
this.setState({ methodSignature: signature, methodParams: paramdata });
if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
this.setState({ isDeploy: true });
return;
}
return Contracts.get()
.signatureReg
.lookup(signature)
.then((method) => {
let methodInputs = null;
let methodName = null;
if (method && method.length) {
const { methodParams } = this.state;
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,
bytecode
});
});
})
.catch((error) => {
console.warn('lookup', error);