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

Merge branch 'master' into jg-signer-decoding

Browse Source
This commit is contained in:
Jaco Greeff
2016-12-02 15:27:56 +01:00
parent 2dd2004ed5 b8b9086dae
commit fbd3738096
28 changed files with 960 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
js/src/ui/Form/AddressSelect/addressSelect.js
View File

@@ -16,7 +16,6 @@
import React, { Component, PropTypes } from 'react';
import { MenuItem } from 'material-ui';
import { isEqual } from 'lodash';
import AutoComplete from '../AutoComplete';
import IdentityIcon from '../../IdentityIcon';
@@ -64,13 +63,6 @@ export default class AddressSelect extends Component {
}
componentWillReceiveProps (newProps) {
const entries = this.entriesFromProps();
const addresses = Object.keys(entries).sort();
if (!isEqual(addresses, this.state.addresses)) {
this.setState({ entries, addresses });
}
if (newProps.value !== this.props.value) {
this.setState({ value: newProps.value });
}
@@ -127,31 +119,33 @@ export default class AddressSelect extends Component {
}
renderItem = (entry) => {
const { address, name } = entry;
return {
text: entry.name && entry.name.toUpperCase() || entry.address,
value: this.renderSelectEntry(entry),
address: entry.address
text: name && name.toUpperCase() || address,
value: this.renderMenuItem(address),
address
};
}
renderSelectEntry = (entry) => {
renderMenuItem (address) {
const item = (
<div className={ styles.account }>
<IdentityIcon
className={ styles.image }
inline center
address={ entry.address } />
address={ address } />
<IdentityName
className={ styles.name }
address={ entry.address } />
address={ address } />
</div>
);
return (
<MenuItem
className={ styles.menuItem }
key={ entry.address }
value={ entry.address }
key={ address }
value={ address }
label={ item }>
{ item }
</MenuItem>

28
js/src/ui/Form/AutoComplete/autocomplete.js
View File

@@ -19,6 +19,8 @@ import keycode from 'keycode';
import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
import { PopoverAnimationVertical } from 'material-ui/Popover';
import { isEqual } from 'lodash';
export default class AutoComplete extends Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
@@ -42,12 +44,28 @@ export default class AutoComplete extends Component {
lastChangedValue: undefined,
entry: null,
open: false,
fakeBlur: false
fakeBlur: false,
dataSource: []
}
componentWillMount () {
const dataSource = this.getDataSource();
this.setState({ dataSource });
}
componentWillReceiveProps (nextProps) {
const prevEntries = Object.keys(this.props.entries || {}).sort();
const nextEntries = Object.keys(nextProps.entries || {}).sort();
if (!isEqual(prevEntries, nextEntries)) {
const dataSource = this.getDataSource(nextProps);
this.setState({ dataSource });
}
}
render () {
const { disabled, error, hint, label, value, className, filter, onUpdateInput } = this.props;
const { open } = this.state;
const { open, dataSource } = this.state;
return (
<MUIAutoComplete
@@ -68,7 +86,7 @@ export default class AutoComplete extends Component {
menuCloseDelay={ 0 }
fullWidth
floatingLabelFixed
dataSource={ this.getDataSource() }
dataSource={ dataSource }
menuProps={ { maxHeight: 400 } }
ref='muiAutocomplete'
onKeyDown={ this.onKeyDown }
@@ -76,8 +94,8 @@ export default class AutoComplete extends Component {
);
}
getDataSource () {
const { renderItem, entries } = this.props;
getDataSource (props = this.props) {
const { renderItem, entries } = props;
const entriesArray = (entries instanceof Array)
? entries
: Object.values(entries);

17
js/src/ui/Loading/index.js Normal file
View File

@@ -0,0 +1,17 @@
// 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 './loading';

23
js/src/ui/Loading/loading.css Normal file
View File

@@ -0,0 +1,23 @@
/* 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/>.
*/
.loading {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

36
js/src/ui/Loading/loading.js Normal file
View File

@@ -0,0 +1,36 @@
// 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 React, { Component, PropTypes } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import styles from './loading.css';
export default class Loading extends Component {
static propTypes = {
size: PropTypes.number
};
render () {
const size = (this.props.size || 2) * 60;
return (
<div className={ styles.loading }>
<CircularProgress size={ size } />
</div>
);
}
}

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

@@ -18,6 +18,20 @@
.container {
}
.clickable {
border: 1px dashed rgba(255, 255, 255, 0.4);
padding: 0.1em 0.3em;
margin: 0.1em 0.1em;
&:hover {
cursor: pointer;
}
&.noSelect {
user-select: none;
}
}
.loading {
display: flex;
align-items: center;

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

@@ -54,7 +54,9 @@ class MethodDecoding extends Component {
isContract: false,
isDeploy: false,
isReceived: false,
isLoading: true
isLoading: true,
expandInput: false,
inputType: 'auto'
}
componentWillMount () {
@@ -94,6 +96,11 @@ class MethodDecoding extends Component {
renderGas () {
const { historic, transaction } = this.props;
const { gas, gasPrice } = transaction;
if (!gas || !gasPrice) {
return null;
}
const gasValue = gas.mul(gasPrice);
return (
@@ -132,26 +139,55 @@ class MethodDecoding extends Component {
: this.renderValueTransfer();
}
renderInputValue () {
getAscii () {
const { api } = this.context;
const { transaction } = this.props;
const ascii = api.util.hex2Ascii(transaction.input || transaction.data);
return { value: ascii, valid: ASCII_INPUT.test(ascii) };
}
renderInputValue () {
const { transaction } = this.props;
const { expandInput, inputType } = this.state;
const input = transaction.input || transaction.data;
if (!/^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(input)) {
return null;
}
const ascii = api.util.hex2Ascii(input);
const text = ASCII_INPUT.test(ascii)
? ascii
const ascii = this.getAscii();
const type = inputType === 'auto'
? (ascii.valid ? 'ascii' : 'raw')
: inputType;
const text = type === 'ascii'
? ascii.value
: input;
const expandable = text.length > 50;
const textToShow = expandInput || !expandable
? text
: text.slice(0, 50) + '...';
return (
<div className={ styles.description }>
<div>
<span>with the input &nbsp;</span>
<code className={ styles.inputData }>{ text }</code>
</div>
<div>
<span>with the </span>
<span
onClick={ this.toggleInputType }
className={ [ styles.clickable, styles.noSelect ].join(' ') }
>
{ type === 'ascii' ? 'input' : 'data' }
</span>
<span> &nbsp; </span>
<span
onClick={ this.toggleInputExpand }
className={ expandable ? styles.clickable : '' }
>
<code className={ styles.inputData }>
{ textToShow }
</code>
</span>
</div>
);
}
@@ -375,6 +411,31 @@ class MethodDecoding extends Component {
);
}
toggleInputExpand = () => {
if (window.getSelection && window.getSelection().type === 'Range') {
return;
}
this.setState({
expandInput: !this.state.expandInput
});
}
toggleInputType = () => {
const { inputType } = this.state;
if (inputType !== 'auto') {
return this.setState({
inputType: this.state.inputType === 'raw' ? 'ascii' : 'raw'
});
}
const ascii = this.getAscii();
return this.setState({
inputType: ascii.valid ? 'raw' : 'ascii'
});
}
lookup () {
const { transaction } = this.props;

3
js/src/ui/Page/page.css
View File

@@ -14,8 +14,9 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.layout {
padding: 0.25em;
padding: 0.25em 0.25em 1em 0.25em;
}
.layout>div {

154
js/src/ui/TxList/txList.js
View File

@@ -29,79 +29,49 @@ import Store from './store';
import styles from './txList.css';
@observer
class TxList extends Component {
export class TxRow extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
};
static propTypes = {
tx: PropTypes.object.isRequired,
address: PropTypes.string.isRequired,
hashes: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object
]).isRequired,
isTest: PropTypes.bool.isRequired
}
isTest: PropTypes.bool.isRequired,
store = new Store(this.context.api);
componentWillMount () {
this.store.loadTransactions(this.props.hashes);
}
componentWillUnmount () {
this.store.unsubscribe();
}
componentWillReceiveProps (newProps) {
this.store.loadTransactions(newProps.hashes);
}
block: PropTypes.object
};
render () {
const { tx, address, isTest } = this.props;
return (
<table className={ styles.transactions }>
<tbody>
{ this.renderRows() }
</tbody>
</table>
<tr>
{ this.renderBlockNumber(tx.blockNumber) }
{ this.renderAddress(tx.from) }
<td className={ styles.transaction }>
{ this.renderEtherValue(tx.value) }
<div>⇒</div>
<div>
<a
className={ styles.link }
href={ txLink(tx.hash, isTest) }
target='_blank'>
{ `${tx.hash.substr(2, 6)}...${tx.hash.slice(-6)}` }
</a>
</div>
</td>
{ this.renderAddress(tx.to) }
<td className={ styles.method }>
<MethodDecoding
historic
address={ address }
transaction={ tx } />
</td>
</tr>
);
}
renderRows () {
const { address, isTest } = this.props;
return this.store.sortedHashes.map((txhash) => {
const tx = this.store.transactions[txhash];
return (
<tr key={ tx.hash }>
{ this.renderBlockNumber(tx.blockNumber) }
{ this.renderAddress(tx.from) }
<td className={ styles.transaction }>
{ this.renderEtherValue(tx.value) }
<div>⇒</div>
<div>
<a
className={ styles.link }
href={ txLink(tx.hash, isTest) }
target='_blank'>
{ `${tx.hash.substr(2, 6)}...${tx.hash.slice(-6)}` }
</a>
</div>
</td>
{ this.renderAddress(tx.to) }
<td className={ styles.method }>
<MethodDecoding
historic
address={ address }
transaction={ tx } />
</td>
</tr>
);
});
}
renderAddress (address) {
const { isTest } = this.props;
@@ -148,8 +118,8 @@ class TxList extends Component {
}
renderBlockNumber (_blockNumber) {
const { block } = this.props;
const blockNumber = _blockNumber.toNumber();
const block = this.store.blocks[blockNumber];
return (
<td className={ styles.timestamp }>
@@ -160,6 +130,66 @@ class TxList extends Component {
}
}
@observer
class TxList extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = {
address: PropTypes.string.isRequired,
hashes: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object
]).isRequired,
isTest: PropTypes.bool.isRequired
}
store = new Store(this.context.api);
componentWillMount () {
this.store.loadTransactions(this.props.hashes);
}
componentWillUnmount () {
this.store.unsubscribe();
}
componentWillReceiveProps (newProps) {
this.store.loadTransactions(newProps.hashes);
}
render () {
return (
<table className={ styles.transactions }>
<tbody>
{ this.renderRows() }
</tbody>
</table>
);
}
renderRows () {
const { address, isTest } = this.props;
return this.store.sortedHashes.map((txhash) => {
const tx = this.store.transactions[txhash];
const blockNumber = tx.blockNumber.toNumber();
const block = this.store.blocks[blockNumber];
return (
<TxRow
key={ tx.hash }
tx={ tx }
block={ block }
address={ address }
isTest={ isTest }
/>
);
});
}
}
function mapStateToProps (state) {
const { isTest } = state.nodeStatus;

2
js/src/ui/index.js
View File

@@ -33,6 +33,7 @@ import Errors from './Errors';
import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
import IdentityIcon from './IdentityIcon';
import IdentityName from './IdentityName';
import Loading from './Loading';
import MethodDecoding from './MethodDecoding';
import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
import muiTheme from './Theme';
@@ -72,6 +73,7 @@ export {
InputAddressSelect,
InputChip,
InputInline,
Loading,
Select,
IdentityIcon,
IdentityName,