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

Allow editing of gasPrice & gas in Signer (#3777)

Browse Source 
* Rework gas display (maintainable)

* Move GasPriceSelector to ui

* Allow opening of gas component (WIP)

* Merge

* Consistency

* Adjust for Signer display

* Set maximum height based on screen size

* Gas editor displays in-place

* Cleanups

* Merge

* Style fixes

* Fixup stash mishap (again)

* Add store test

* Allow edited values to refrect on the display

* Fix properties

* Adjust styling to show different rows

* git mv

* git mv

* Style fixes

* Style updates

* Pass gas & gasPrice with confirmation

* Fix build (case)

* Style fixes

* Basic GasPriceEditor smoketest

* manual move 1

* manual move 2

* manual move 1

* manual move 2

* NODE_ENV=test ace fix

* UI smoketests

* Style

* Format options via formatter

* Initial version

* Re-add even/odd class

* re-add gasLimit to embedded passing

* style

* Updated for passing gas & price to store

* Allow gas/price overrides when none available

* Fix slider value, pass as number
This commit is contained in:
Jaco Greeff 2016-12-11 17:43:51 +01:00 committed by GitHub
parent 885d6eaa4d
commit 929b6ee0f7
59 changed files with 1423 additions and 856 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/api/rpc/signer/signer.js
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 { inNumber16, inData } from '../../format/input'; import { inData, inNumber16, inOptions } from '../../format/input';
import { outSignerRequest } from '../../format/output'; import { outSignerRequest } from '../../format/output';
export default class Signer { export default class Signer {
@ -24,7 +24,7 @@ export default class Signer {
confirmRequest (requestId, options, password) { confirmRequest (requestId, options, password) {
return this._transport return this._transport
.execute('signer_confirmRequest', inNumber16(requestId), options, password); .execute('signer_confirmRequest', inNumber16(requestId), inOptions(options), password);
} }
confirmRequestRaw (requestId, data) { confirmRequestRaw (requestId, data) {

2
js/src/modals/ExecuteContract/executeContract.js
View File

@ -66,7 +66,7 @@ class ExecuteContract extends Component {
onFromAddressChange: PropTypes.func.isRequired onFromAddressChange: PropTypes.func.isRequired
} }
gasStore = new GasPriceEditor.Store(this.context.api, this.props.gasLimit); gasStore = new GasPriceEditor.Store(this.context.api, { gasLimit: this.props.gasLimit });
state = { state = {
amount: '0', amount: '0',

2
js/src/modals/Transfer/store.js
View File

@ -112,7 +112,7 @@ export default class TransferStore {
this.isWallet = account && account.wallet; this.isWallet = account && account.wallet;
this.newError = newError; this.newError = newError;
this.gasStore = new GasPriceStore(api, gasLimit); this.gasStore = new GasPriceStore(api, { gasLimit });
if (this.isWallet) { if (this.isWallet) {
this.wallet = props.wallet; this.wallet = props.wallet;

9
js/src/modals/Transfer/transfer.js
View File

@ -80,8 +80,9 @@ class Transfer extends Component {
<div className={ styles.hdraccount }> <div className={ styles.hdraccount }>
<div className={ styles.hdrimage }> <div className={ styles.hdrimage }>
<IdentityIcon <IdentityIcon
inline center address={ account.address }
address={ account.address } /> center
inline />
</div> </div>
<div className={ styles.hdrdetails }> <div className={ styles.hdrdetails }>
<div className={ styles.hdrname }> <div className={ styles.hdrname }>
@ -165,18 +166,18 @@ class Transfer extends Component {
balance={ balance } balance={ balance }
extras={ extras } extras={ extras }
images={ images } images={ images }
senders={ senders } onChange={ this.store.onUpdateDetails }
recipient={ recipient } recipient={ recipient }
recipientError={ recipientError } recipientError={ recipientError }
sender={ sender } sender={ sender }
senderError={ senderError } senderError={ senderError }
senders={ senders }
sendersBalances={ sendersBalances } sendersBalances={ sendersBalances }
tag={ tag } tag={ tag }
total={ total } total={ total }
totalError={ totalError } totalError={ totalError }
value={ value } value={ value }
valueError={ valueError } valueError={ valueError }
onChange={ this.store.onUpdateDetails }
wallet={ account.wallet && this.props.wallet } wallet={ account.wallet && this.props.wallet }
/> />
); );

6
js/src/redux/providers/signerMiddleware.js
View File

@ -52,9 +52,9 @@ export default class SignerMiddleware {
} }
onConfirmStart = (store, action) => { onConfirmStart = (store, action) => {
const { id, password, wallet, payload } = action.payload; const { gas, gasPrice, id, password, payload, wallet } = action.payload;
const handlePromise = promise => { const handlePromise = (promise) => {
promise promise
.then((txHash) => { .then((txHash) => {
console.log('confirmRequest', id, txHash); console.log('confirmRequest', id, txHash);
@ -102,7 +102,7 @@ export default class SignerMiddleware {
return; return;
} }
handlePromise(this._api.signer.confirmRequest(id, {}, password)); handlePromise(this._api.signer.confirmRequest(id, { gas, gasPrice }, password));
} }
onRejectStart = (store, action) => { onRejectStart = (store, action) => {

6
js/src/ui/Editor/mode-solidity.js
View File

@ -22,6 +22,12 @@
/* eslint-disable */ /* eslint-disable */
var ace = window.ace; var ace = window.ace;
if (process.env.NODE_ENV === 'test') {
if (!ace.define) {
ace.define = () => {};
}
}
ace.define("ace/mode/doc_comment_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(acequire, exports, module) { ace.define("ace/mode/doc_comment_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(acequire, exports, module) {
"use strict"; "use strict";

556
js/src/ui/GasPriceEditor/GasPriceSelector/gasPriceSelector.js
View File

@ -1,556 +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 React, { Component, PropTypes } from 'react';
import {
Bar, BarChart,
Rectangle,
Scatter, ScatterChart,
Tooltip,
XAxis, YAxis,
Dot,
ResponsiveContainer
} from 'recharts';
import Slider from 'material-ui/Slider';
import BigNumber from 'bignumber.js';
import styles from './gasPriceSelector.css';
const COLORS = {
default: 'rgba(255, 99, 132, 0.2)',
selected: 'rgba(255, 99, 132, 0.5)',
hover: 'rgba(255, 99, 132, 0.15)',
grid: 'rgba(255, 99, 132, 0.5)',
line: 'rgb(255, 99, 132)',
intersection: '#fff'
};
const countModifier = (count) => {
const val = count.toNumber ? count.toNumber() : count;
return Math.log10(val + 1) + 0.1;
};
class CustomCursor extends Component {
static propTypes = {
x: PropTypes.number,
y: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
getIndex: PropTypes.func,
counts: PropTypes.array,
yDomain: PropTypes.array
}
render () {
const { x, y, width, height, getIndex, counts, yDomain } = this.props;
const index = getIndex();
if (index === -1) {
return null;
}
const count = countModifier(counts[index]);
const barHeight = (count / yDomain[1]) * (y + height);
return (
<g>
<Rectangle
x={ x }
y={ 0 }
width={ width }
height={ height + y }
fill='transparent'
onClick={ this.onClick }
/>
<Rectangle
x={ x }
y={ y + (height - barHeight) }
width={ width }
height={ barHeight }
fill={ COLORS.hover }
onClick={ this.onClick }
/>
</g>
);
}
onClick = () => {
const { onClick, getIndex } = this.props;
const index = getIndex();
onClick({ index });
}
}
class CustomBar extends Component {
static propTypes = {
selected: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
index: PropTypes.number,
onClick: PropTypes.func
}
render () {
const { x, y, selected, index, width, height, onClick } = this.props;
const fill = selected === index
? COLORS.selected
: COLORS.default;
const borderWidth = 0.5;
const borderColor = 'rgba(255, 255, 255, 0.5)';
return (
<g>
<Rectangle
x={ x - borderWidth }
y={ y }
width={ borderWidth }
height={ height }
fill={ borderColor }
/>
<Rectangle
x={ x + width }
y={ y }
width={ borderWidth }
height={ height }
fill={ borderColor }
/>
<Rectangle
x={ x - borderWidth }
y={ y - borderWidth }
width={ width + borderWidth * 2 }
height={ borderWidth }
fill={ borderColor }
/>
<Rectangle
x={ x }
y={ y }
width={ width }
height={ height }
fill={ fill }
onClick={ onClick }
/>
</g>
);
}
}
class CustomizedShape extends Component {
static propTypes = {
showValue: PropTypes.number.isRequired,
cx: PropTypes.number,
cy: PropTypes.number,
payload: PropTypes.object
}
render () {
const { cx, cy, showValue, payload } = this.props;
if (showValue !== payload.y) {
return null;
}
return (
<g>
<Dot
style={ { fill: 'white' } }
cx={ cx }
cy={ cy }
r={ 5 }
/>
<Dot
style={ { fill: 'rgb(255, 99, 132)' } }
cx={ cx }
cy={ cy }
r={ 3 }
/>
</g>
);
}
}
class CustomTooltip extends Component {
static propTypes = {
gasPriceHistogram: PropTypes.object.isRequired,
type: PropTypes.string,
payload: PropTypes.array,
label: PropTypes.number,
active: PropTypes.bool
}
render () {
const { active, label, gasPriceHistogram } = this.props;
if (!active) {
return null;
}
const index = label;
const count = gasPriceHistogram.counts[index];
const minGasPrice = gasPriceHistogram.bucketBounds[index];
const maxGasPrice = gasPriceHistogram.bucketBounds[index + 1];
return (
<div>
<p className='label'>
{ count.toNumber() } transactions
with gas price set from
<span> { minGasPrice.toFormat(0) } </span>
to
<span> { maxGasPrice.toFormat(0) } </span>
</p>
</div>
);
}
}
const TOOL_STYLE = {
color: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
padding: '0 0.5em',
fontSize: '0.75em'
};
export default class GasPriceSelector extends Component {
static propTypes = {
gasPriceHistogram: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
gasPrice: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
])
}
state = {
gasPrice: null,
sliderValue: 0.5,
selectedIndex: 0,
chartData: {
values: [],
xDomain: [],
yDomain: [],
N: 0
}
}
componentWillMount () {
this.computeCharts();
this.setGasPrice();
}
componentWillReceiveProps (nextProps) {
if (nextProps.gasPrice !== this.props.gasPrice) {
this.setGasPrice(nextProps);
}
}
componentWillUpdate (nextProps, nextState) {
if (Math.floor(nextState.sliderValue) !== Math.floor(this.state.sliderValue)) {
this.updateSelectedBarChart(nextState);
}
}
render () {
return (
<div>
{ this.renderChart() }
{ this.renderSlider() }
</div>
);
}
renderSlider () {
const { sliderValue } = this.state;
return (
<div className={ styles.columns }>
<Slider
min={ 0 }
max={ 1 }
value={ sliderValue }
onChange={ this.onEditGasPriceSlider }
style={ {
flex: 1,
padding: '0 0.3em'
} }
sliderStyle={ {
marginBottom: 12
} }
/>
</div>
);
}
renderChart () {
const { gasPriceHistogram } = this.props;
const { chartData, sliderValue, selectedIndex } = this.state;
if (chartData.values.length === 0) {
return null;
}
const height = 300;
const countIndex = Math.max(0, Math.min(selectedIndex, gasPriceHistogram.counts.length - 1));
const selectedCount = countModifier(gasPriceHistogram.counts[countIndex]);
return (
<div className={ styles.columns }>
<div style={ { flex: 1, height } }>
<div className={ styles.chart }>
<ResponsiveContainer
height={ height }
>
<ScatterChart
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
>
<Scatter
data={ [
{ x: sliderValue, y: 0 },
{ x: sliderValue, y: selectedCount },
{ x: sliderValue, y: chartData.yDomain[1] }
] }
shape={ <CustomizedShape showValue={ selectedCount } /> }
line
isAnimationActive={ false }
/>
<XAxis
hide
height={ 0 }
dataKey='x'
domain={ [0, 1] }
/>
<YAxis
hide
width={ 0 }
dataKey='y'
domain={ chartData.yDomain }
/>
</ScatterChart>
</ResponsiveContainer>
</div>
<div className={ styles.chart }>
<ResponsiveContainer
height={ height }
>
<BarChart
data={ chartData.values }
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
barCategoryGap={ 1 }
ref='barChart'
>
<Bar
dataKey='value'
stroke={ COLORS.line }
onClick={ this.onClickGasPrice }
shape={ <CustomBar selected={ selectedIndex } onClick={ this.onClickGasPrice } /> }
/>
<Tooltip
wrapperStyle={ TOOL_STYLE }
cursor={ this.renderCustomCursor() }
content={ <CustomTooltip gasPriceHistogram={ gasPriceHistogram } /> }
/>
<XAxis
hide
dataKey='index'
type='category'
domain={ chartData.xDomain }
/>
<YAxis
hide
type='number'
domain={ chartData.yDomain }
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
);
}
renderCustomCursor = () => {
const { gasPriceHistogram } = this.props;
const { chartData } = this.state;
return (
<CustomCursor
getIndex={ this.getBarHoverIndex }
onClick={ this.onClickGasPrice }
counts={ gasPriceHistogram.counts }
yDomain={ chartData.yDomain }
/>
);
}
getBarHoverIndex = () => {
const { barChart } = this.refs;
if (!barChart || !barChart.state) {
return -1;
}
return barChart.state.activeTooltipIndex;
}
computeChartsData () {
const { gasPriceChartData } = this.state;
const { gasPriceHistogram } = this.props;
const values = gasPriceChartData
.map((value, index) => ({ value, index }));
const N = values.length - 1;
const maxGasCounts = countModifier(
gasPriceHistogram
.counts
.reduce((max, count) => count.greaterThan(max) ? count : max, 0)
);
const xDomain = [0, N];
const yDomain = [0, maxGasCounts * 1.1];
const chartData = {
values, N,
xDomain, yDomain
};
this.setState({ chartData }, () => {
this.updateSelectedBarChart();
});
}
computeCharts (props = this.props) {
const { gasPriceHistogram } = props;
const gasPriceChartData = gasPriceHistogram
.counts
.map(count => countModifier(count));
this.setState(
{ gasPriceChartData },
() => this.computeChartsData()
);
}
updateSelectedBarChart (state = this.state) {
}
setGasPrice (props = this.props) {
const { gasPrice, gasPriceHistogram } = props;
// If no gas price yet...
if (!gasPrice) {
return this.setSliderValue(0.5);
}
const bnGasPrice = (typeof gasPrice === 'string')
? new BigNumber(gasPrice)
: gasPrice;
// If gas price hasn't changed
if (this.state.gasPrice && bnGasPrice.equals(this.state.gasPrice)) {
return;
}
const gasPrices = gasPriceHistogram.bucketBounds;
const startIndex = gasPrices
.findIndex(price => price.greaterThan(bnGasPrice)) - 1;
// gasPrice Lower than the max in histogram
if (startIndex === -1) {
return this.setSliderValue(0, bnGasPrice);
}
// gasPrice Greater than the max in histogram
if (startIndex === -2) {
return this.setSliderValue(1, bnGasPrice);
}
const priceA = gasPrices[startIndex];
const priceB = gasPrices[startIndex + 1];
const sliderValueDec = bnGasPrice
.minus(priceA)
.dividedBy(priceB.minus(priceA))
.toNumber();
const sliderValue = (startIndex + sliderValueDec) / (gasPrices.length - 1);
this.setSliderValue(sliderValue, bnGasPrice);
}
setSliderValue (value, gasPrice = this.state.gasPrice) {
const { gasPriceHistogram } = this.props;
const N = gasPriceHistogram.bucketBounds.length - 1;
const sliderValue = Math.max(0, Math.min(value, 1));
const selectedIndex = Math.floor(sliderValue * N);
this.setState({ sliderValue, gasPrice, selectedIndex });
}
onBarChartMouseUp = (event) => {
console.log(event);
}
onClickGasPrice = (bar) => {
const { index } = bar;
const ratio = (index + 0.5) / (this.state.chartData.N + 1);
this.onEditGasPriceSlider(null, ratio);
}
onEditGasPriceSlider = (event, sliderValue) => {
const { gasPriceHistogram } = this.props;
const gasPrices = gasPriceHistogram.bucketBounds;
const N = gasPrices.length - 1;
const gasPriceAIdx = Math.floor(sliderValue * N);
const gasPriceBIdx = gasPriceAIdx + 1;
if (gasPriceBIdx === N + 1) {
const gasPrice = gasPrices[gasPriceAIdx].round();
this.props.onChange(event, gasPrice);
return;
}
const gasPriceA = gasPrices[gasPriceAIdx];
const gasPriceB = gasPrices[gasPriceBIdx];
const mult = Math.round((sliderValue % 1) * 100) / 100;
const gasPrice = gasPriceA
.plus(gasPriceB.minus(gasPriceA).times(mult))
.round();
this.setSliderValue(sliderValue, gasPrice);
this.props.onChange(event, gasPrice);
}
}

10
js/src/ui/GasPriceEditor/gasPriceEditor.css
View File

@ -15,16 +15,12 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.columns { .container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
} }
.graphColumn {
flex: 65;
}
.editColumn { .editColumn {
flex: 35; flex: 35;
padding-left: 1em; padding-left: 1em;
@ -41,6 +37,10 @@
opacity: 0.5; opacity: 0.5;
} }
.graphColumn {
flex: 65;
}
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

52
js/src/ui/GasPriceEditor/gasPriceEditor.js
View File

@ -15,11 +15,11 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import Input from '../Form/Input'; import Input from '../Form/Input';
import GasPriceSelector from './GasPriceSelector'; import GasPriceSelector from '../GasPriceSelector';
import Store from './store'; import Store from './store';
import styles from './gasPriceEditor.css'; import styles from './gasPriceEditor.css';
@ -31,62 +31,60 @@ export default class GasPriceEditor extends Component {
}; };
static propTypes = { static propTypes = {
store: PropTypes.object.isRequired, children: PropTypes.node,
onChange: PropTypes.func onChange: PropTypes.func,
store: PropTypes.object.isRequired
} }
static Store = Store; static Store = Store;
render () { render () {
const { api } = this.context; const { api } = this.context;
const { store } = this.props; const { children, store } = this.props;
const { estimated, priceDefault, price, gas, histogram, errorGas, errorPrice, errorTotal, totalValue } = store; const { errorGas, errorPrice, errorTotal, estimated, gas, histogram, price, priceDefault, totalValue } = store;
const eth = api.util.fromWei(totalValue).toFormat(); const eth = api.util.fromWei(totalValue).toFormat();
const gasLabel = `gas (estimated: ${new BigNumber(estimated).toFormat()})`; const gasLabel = `gas (estimated: ${new BigNumber(estimated).toFormat()})`;
const priceLabel = `price (current: ${new BigNumber(priceDefault).toFormat()})`; const priceLabel = `price (current: ${new BigNumber(priceDefault).toFormat()})`;
return ( return (
<div className={ styles.columns }> <div className={ styles.container }>
<div className={ styles.graphColumn }> <div className={ styles.graphColumn }>
<GasPriceSelector <GasPriceSelector
gasPriceHistogram={ histogram } histogram={ histogram }
gasPrice={ price } onChange={ this.onEditGasPrice }
onChange={ this.onEditGasPrice } /> price={ price } />
<div className={ styles.gasPriceDesc }> <div className={ styles.gasPriceDesc }>
You can choose the gas price based on the You can choose the gas price based on the distribution of recent included transaction gas prices. The lower the gas price is, the cheaper the transaction will be. The higher the gas price is, the faster it should get mined by the network.
distribution of recent included transaction gas prices.
The lower the gas price is, the cheaper the transaction will
be. The higher the gas price is, the faster it should
get mined by the network.
</div> </div>
</div> </div>
<div className={ styles.editColumn }> <div className={ styles.editColumn }>
<div className={ styles.row }> <div className={ styles.row }>
<Input <Input
label={ gasLabel }
hint='the amount of gas to use for the transaction'
error={ errorGas } error={ errorGas }
value={ gas } hint='the amount of gas to use for the transaction'
onChange={ this.onEditGas } /> label={ gasLabel }
onChange={ this.onEditGas }
value={ gas } />
<Input <Input
label={ priceLabel }
hint='the price of gas to use for the transaction'
error={ errorPrice } error={ errorPrice }
value={ price } hint='the price of gas to use for the transaction'
onChange={ this.onEditGasPrice } /> label={ priceLabel }
onChange={ this.onEditGasPrice }
value={ price } />
</div> </div>
<div className={ styles.row }> <div className={ styles.row }>
<Input <Input
disabled disabled
label='total transaction amount'
hint='the total amount of the transaction'
error={ errorTotal } error={ errorTotal }
hint='the total amount of the transaction'
label='total transaction amount'
value={ `${eth} ETH` } /> value={ `${eth} ETH` } />
</div> </div>
<div className={ styles.row }>
{ children }
</div>
</div> </div>
</div> </div>
); );

45
js/src/ui/GasPriceEditor/gasPriceEditor.spec.js Normal file
View File

@ -0,0 +1,45 @@
// 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 { shallow } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
import GasPriceEditor from './';
const api = {
util: {
fromWei: (value) => new BigNumber(value)
}
};
const store = {
estimated: '123',
priceDefault: '456',
totalValue: '789',
setGas: sinon.stub(),
setPrice: sinon.stub()
};
describe('ui/GasPriceEditor', () => {
it('renders', () => {
expect(shallow(
<GasPriceEditor store={ store } />,
{ context: { api } }
)).to.be.ok;
});
});

86
js/src/ui/GasPriceEditor/store.js
View File

@ -26,18 +26,22 @@ export default class GasPriceEditor {
@observable errorPrice = null; @observable errorPrice = null;
@observable errorTotal = null; @observable errorTotal = null;
@observable estimated = DEFAULT_GAS; @observable estimated = DEFAULT_GAS;
@observable gas;
@observable gasLimit;
@observable histogram = null; @observable histogram = null;
@observable price = DEFAULT_GASPRICE; @observable isEditing = false;
@observable priceDefault = DEFAULT_GASPRICE; @observable price;
@observable gas = DEFAULT_GAS; @observable priceDefault;
@observable gasLimit = 0;
@observable weiValue = '0'; @observable weiValue = '0';
constructor (api, gasLimit, loadDefaults = true) { constructor (api, { gas, gasLimit, gasPrice }) {
this._api = api; this._api = api;
this.gasLimit = gasLimit;
if (loadDefaults) { this.gas = gas;
this.gasLimit = gasLimit;
this.price = gasPrice;
if (api) {
this.loadDefaults(); this.loadDefaults();
} }
} }
@ -50,6 +54,10 @@ export default class GasPriceEditor {
} }
} }
@action setEditing = (isEditing) => {
this.isEditing = isEditing;
}
@action setErrorTotal = (errorTotal) => { @action setErrorTotal = (errorTotal) => {
this.errorTotal = errorTotal; this.errorTotal = errorTotal;
} }
@ -74,6 +82,30 @@ export default class GasPriceEditor {
this.weiValue = weiValue; this.weiValue = weiValue;
} }
@action setGas = (gas) => {
transaction(() => {
const { numberError } = validatePositiveNumber(gas);
this.gas = gas;
if (numberError) {
this.errorGas = numberError;
} else {
const bn = new BigNumber(gas);
if (bn.gte(this.gasLimit)) {
this.errorGas = ERRORS.gasBlockLimit;
} else {
this.errorGas = null;
}
}
});
}
@action setGasLimit = (gasLimit) => {
this.gasLimit = gasLimit;
}
@action setHistogram = (gasHistogram) => { @action setHistogram = (gasHistogram) => {
this.histogram = gasHistogram; this.histogram = gasHistogram;
} }
@ -85,39 +117,37 @@ export default class GasPriceEditor {
}); });
} }
@action setGas = (gas) => {
transaction(() => {
const { numberError } = validatePositiveNumber(gas);
const bn = new BigNumber(gas);
this.gas = gas;
if (numberError) {
this.errorGas = numberError;
} else if (bn.gte(this.gasLimit)) {
this.errorGas = ERRORS.gasBlockLimit;
} else {
this.errorGas = null;
}
});
}
@action loadDefaults () { @action loadDefaults () {
Promise Promise
.all([ .all([
this._api.parity.gasPriceHistogram(), this._api.parity.gasPriceHistogram(),
this._api.eth.gasPrice() this._api.eth.gasPrice()
]) ])
.then(([gasPriceHistogram, gasPrice]) => { .then(([histogram, _price]) => {
transaction(() => { transaction(() => {
this.setPrice(gasPrice.toFixed(0)); const price = _price.toFixed(0);
this.setHistogram(gasPriceHistogram);
this.priceDefault = gasPrice.toFixed(); if (!this.price) {
this.setPrice(price);
}
this.setHistogram(histogram);
this.priceDefault = price;
}); });
}) })
.catch((error) => { .catch((error) => {
console.warn('getDefaults', error); console.warn('getDefaults', error);
}); });
} }
overrideTransaction = (transaction) => {
if (this.errorGas || this.errorPrice) {
return transaction;
}
return Object.assign({}, transaction, {
gas: new BigNumber(this.gas || DEFAULT_GAS),
gasPrice: new BigNumber(this.price || DEFAULT_GASPRICE)
});
}
} }

197
js/src/ui/GasPriceEditor/store.spec.js Normal file
View File

@ -0,0 +1,197 @@
// 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 sinon from 'sinon';
import { DEFAULT_GAS, DEFAULT_GASPRICE, MAX_GAS_ESTIMATION } from '~/util/constants';
import { ERRORS } from '~/util/validation';
import GasPriceEditor from './gasPriceEditor';
const { Store } = GasPriceEditor;
const GASPRICE = new BigNumber(123456);
const GASLIMIT = 100000;
const HISTOGRAM = {
bucketBounds: [1, 2],
counts: [3, 4]
};
const api = {
eth: {
gasPrice: sinon.stub().resolves(GASPRICE)
},
parity: {
gasPriceHistogram: sinon.stub().resolves(HISTOGRAM)
}
};
describe('ui/GasPriceEditor/store', () => {
let store = null;
it('is available via GasPriceEditor.Store', () => {
expect(new Store(null, {})).to.be.ok;
});
describe('constructor (defaults)', () => {
beforeEach(() => {
store = new Store(api, { gasLimit: GASLIMIT });
});
it('retrieves the histogram and gasPrice', () => {
expect(api.eth.gasPrice).to.have.been.called;
expect(api.parity.gasPriceHistogram).to.have.been.called;
});
it('sets the gasLimit as passed', () => {
expect(store.gasLimit).to.equal(GASLIMIT);
});
});
describe('setters', () => {
beforeEach(() => {
store = new Store(null, { gasLimit: GASLIMIT });
});
describe('setEditing', () => {
it('sets the value', () => {
expect(store.isEditing).to.be.false;
store.setEditing(true);
expect(store.isEditing).to.be.true;
});
});
describe('setErrorTotal', () => {
it('sets the value', () => {
store.setErrorTotal('errorTotal');
expect(store.errorTotal).to.equal('errorTotal');
});
});
describe('setEstimated', () => {
it('sets the value', () => {
store.setEstimated('789');
expect(store.estimated).to.equal('789');
});
it('sets error when above exception max', () => {
store.setEstimated(MAX_GAS_ESTIMATION);
expect(store.errorEstimated).to.equal(ERRORS.gasException);
});
it('sets error when above gaslimit', () => {
store.setEstimated(GASLIMIT);
expect(store.errorEstimated).to.equal(ERRORS.gasBlockLimit);
});
});
describe('setEthValue', () => {
it('sets the value', () => {
store.setEthValue('123');
expect(store.weiValue).to.equal('123');
});
});
describe('setGas', () => {
it('sets the value', () => {
store.setGas('123');
expect(store.gas).to.equal('123');
expect(store.errorGas).to.be.null;
});
it('sets error on negative numbers', () => {
store.setGas(-123);
expect(store.errorGas).not.to.be.null;
});
it('sets error when above block limit', () => {
store.setGas(GASLIMIT);
expect(store.errorGas).to.equal(ERRORS.gasBlockLimit);
});
});
describe('setGasLimit', () => {
it('sets the value', () => {
store.setGasLimit('123');
expect(store.gasLimit).to.equal('123');
});
});
describe('setHistogram', () => {
it('sets the value', () => {
store.setHistogram(HISTOGRAM);
expect(store.histogram).to.deep.equal(HISTOGRAM);
});
});
describe('setPrice', () => {
it('sets the value', () => {
store.setPrice('123');
expect(store.price).to.equal('123');
expect(store.errorPrice).to.be.null;
});
it('sets error on negative numbers', () => {
store.setPrice(-123);
expect(store.errorPrice).not.to.be.null;
});
});
});
describe('computed', () => {
beforeEach(() => {
store = new Store(null, { gasLimit: GASLIMIT });
});
describe('totalValue', () => {
it('holds the total including eth, price & gas', () => {
store.setPrice('123');
store.setGas('123');
store.setEthValue('123');
expect(store.totalValue).to.deep.equal(new BigNumber(123 + 123 * 123));
});
});
});
describe('methods', () => {
beforeEach(() => {
store = new Store(null, { gasLimit: GASLIMIT });
});
describe('overrideTransaction', () => {
const TRANSACTION = { gas: '123', gasPrice: '456' };
it('overrides gas & gasPrice with values', () => {
store.setGas(DEFAULT_GAS);
const transaction = store.overrideTransaction(TRANSACTION);
expect(transaction.gas).to.deep.equal(new BigNumber(DEFAULT_GAS));
expect(transaction.gasPrice).to.deep.equal(new BigNumber(DEFAULT_GASPRICE));
});
it('does not override with invalid gas', () => {
store.setGas(-123);
expect(store.overrideTransaction(TRANSACTION)).to.deep.equal(TRANSACTION);
});
it('does not override with invalid price', () => {
store.setPrice(-123);
expect(store.overrideTransaction(TRANSACTION)).to.deep.equal(TRANSACTION);
});
});
});
});

77
js/src/ui/GasPriceSelector/CustomBar/customBar.js Normal file
View File

@ -0,0 +1,77 @@
// 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 { Rectangle } from 'recharts';
import { COLORS } from '../util';
export default class CustomBar extends Component {
static propTypes = {
selected: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
index: PropTypes.number,
onClick: PropTypes.func
}
render () {
const { x, y, selected, index, width, height, onClick } = this.props;
const fill = selected === index
? COLORS.selected
: COLORS.default;
const borderWidth = 0.5;
const borderColor = 'rgba(255, 255, 255, 0.5)';
return (
<g>
<Rectangle
x={ x - borderWidth }
y={ y }
width={ borderWidth }
height={ height }
fill={ borderColor }
/>
<Rectangle
x={ x + width }
y={ y }
width={ borderWidth }
height={ height }
fill={ borderColor }
/>
<Rectangle
x={ x - borderWidth }
y={ y - borderWidth }
width={ width + borderWidth * 2 }
height={ borderWidth }
fill={ borderColor }
/>
<Rectangle
x={ x }
y={ y }
width={ width }
height={ height }
fill={ fill }
onClick={ onClick }
/>
</g>
);
}
}

17
js/src/ui/GasPriceSelector/CustomBar/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 './customBar';

73
js/src/ui/GasPriceSelector/CustomCursor/customCursor.js Normal file
View File

@ -0,0 +1,73 @@
// 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 { Rectangle } from 'recharts';
import { COLORS, countModifier } from '../util';
export default class CustomCursor extends Component {
static propTypes = {
x: PropTypes.number,
y: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
getIndex: PropTypes.func,
counts: PropTypes.object,
yDomain: PropTypes.array
}
render () {
const { x, y, width, height, getIndex, counts, yDomain } = this.props;
const index = getIndex();
if (index === -1) {
return null;
}
const count = countModifier(counts[index]);
const barHeight = (count / yDomain[1]) * (y + height);
return (
<g>
<Rectangle
x={ x }
y={ 0 }
width={ width }
height={ height + y }
fill='transparent'
onClick={ this.onClick }
/>
<Rectangle
x={ x }
y={ y + (height - barHeight) }
width={ width }
height={ barHeight }
fill={ COLORS.hover }
onClick={ this.onClick }
/>
</g>
);
}
onClick = () => {
const { onClick, getIndex } = this.props;
const index = getIndex();
onClick({ index });
}
}

17
js/src/ui/GasPriceSelector/CustomCursor/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 './customCursor';

52
js/src/ui/GasPriceSelector/CustomShape/customShape.js Normal file
View File

@ -0,0 +1,52 @@
// 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 { Dot } from 'recharts';
export default class CustomShape extends Component {
static propTypes = {
showValue: PropTypes.number.isRequired,
cx: PropTypes.number,
cy: PropTypes.number,
payload: PropTypes.object
}
render () {
const { cx, cy, showValue, payload } = this.props;
if (showValue !== payload.y) {
return null;
}
return (
<g>
<Dot
style={ { fill: 'white' } }
cx={ cx }
cy={ cy }
r={ 5 }
/>
<Dot
style={ { fill: 'rgb(255, 99, 132)' } }
cx={ cx }
cy={ cy }
r={ 3 }
/>
</g>
);
}
}

17
js/src/ui/GasPriceSelector/CustomShape/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 './customShape';

53
js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js Normal file
View File

@ -0,0 +1,53 @@
// 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';
export default class CustomTooltip extends Component {
static propTypes = {
active: PropTypes.bool,
histogram: PropTypes.object.isRequired,
label: PropTypes.number,
payload: PropTypes.array,
type: PropTypes.string
}
render () {
const { active, label, histogram } = this.props;
if (!active) {
return null;
}
const index = label;
const count = histogram.counts[index];
const minprice = histogram.bucketBounds[index];
const maxprice = histogram.bucketBounds[index + 1];
return (
<div>
<p className='label'>
{ count.toNumber() } transactions
with gas price set from
<span> { minprice.toFormat(0) } </span>
to
<span> { maxprice.toFormat(0) } </span>
</p>
</div>
);
}
}

17
js/src/ui/GasPriceSelector/CustomTooltip/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 './customTooltip';

6
js/src/ui/GasPriceEditor/GasPriceSelector/gasPriceSelector.css → js/src/ui/GasPriceSelector/gasPriceSelector.css
View File

@ -20,8 +20,12 @@
width: 100%; width: 100%;
} }
.columns { .chartRow, .sliderRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
} }
.chartRow {
margin-bottom: -24px;
}

341
js/src/ui/GasPriceSelector/gasPriceSelector.js Normal file
View File

@ -0,0 +1,341 @@
// 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 { Slider } from 'material-ui';
import React, { Component, PropTypes } from 'react';
import { Bar, BarChart, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from 'recharts';
import CustomBar from './CustomBar';
import CustomCursor from './CustomCursor';
import CustomShape from './CustomShape';
import CustomTooltip from './CustomTooltip';
import { COLORS, countModifier } from './util';
import styles from './gasPriceSelector.css';
const TOOL_STYLE = {
color: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
padding: '0 0.5em',
fontSize: '0.75em'
};
export default class GasPriceSelector extends Component {
static propTypes = {
histogram: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
price: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
])
}
state = {
price: null,
sliderValue: 0.5,
selectedIndex: 0,
chartData: {
values: [],
xDomain: [],
yDomain: [],
N: 0
}
}
componentWillMount () {
this.computeCharts();
this.setprice();
}
componentWillReceiveProps (nextProps) {
if (nextProps.price !== this.props.price) {
this.setprice(nextProps);
}
}
componentWillUpdate (nextProps, nextState) {
if (Math.floor(nextState.sliderValue) !== Math.floor(this.state.sliderValue)) {
this.updateSelectedBarChart(nextState);
}
}
render () {
return (
<div>
{ this.renderChart() }
{ this.renderSlider() }
</div>
);
}
renderChart () {
const { histogram } = this.props;
const { chartData, sliderValue, selectedIndex } = this.state;
if (chartData.values.length === 0) {
return null;
}
const height = 196;
const countIndex = Math.max(0, Math.min(selectedIndex, histogram.counts.length - 1));
const selectedCount = countModifier(histogram.counts[countIndex]);
return (
<div className={ styles.chartRow }>
<div style={ { flex: 1, height } }>
<div className={ styles.chart }>
<ResponsiveContainer height={ height }>
<ScatterChart margin={ { top: 0, right: 0, left: 0, bottom: 0 } }>
<Scatter
data={ [
{ x: sliderValue, y: 0 },
{ x: sliderValue, y: selectedCount },
{ x: sliderValue, y: chartData.yDomain[1] }
] }
isAnimationActive={ false }
line
shape={ <CustomShape showValue={ selectedCount } /> } />
<XAxis
dataKey='x'
domain={ [0, 1] }
hide
height={ 0 } />
<YAxis
dataKey='y'
domain={ chartData.yDomain }
hide
width={ 0 } />
</ScatterChart>
</ResponsiveContainer>
</div>
<div className={ styles.chart }>
<ResponsiveContainer height={ height }>
<BarChart
barCategoryGap={ 1 }
data={ chartData.values }
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
ref='barChart'>
<Bar
dataKey='value'
onClick={ this.onClickprice }
shape={ <CustomBar selected={ selectedIndex } onClick={ this.onClickprice } /> }stroke={ COLORS.line } />
<Tooltip
content={ <CustomTooltip histogram={ histogram } /> }
cursor={ this.renderCustomCursor() }
wrapperStyle={ TOOL_STYLE } />
<XAxis
dataKey='index'
domain={ chartData.xDomain }
hide
type='category' />
<YAxis
domain={ chartData.yDomain }
hide
type='number' />
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
);
}
renderSlider () {
const { sliderValue } = this.state;
return (
<div className={ styles.sliderRow }>
<Slider
min={ 0 }
max={ 1 }
value={ sliderValue }
onChange={ this.onEditpriceSlider }
style={ {
flex: 1,
padding: '0 0.3em'
} }
sliderStyle={ {
marginBottom: 12
} }
/>
</div>
);
}
renderCustomCursor = () => {
const { histogram } = this.props;
const { chartData } = this.state;
return (
<CustomCursor
counts={ histogram.counts }
getIndex={ this.getBarHoverIndex }
onClick={ this.onClickprice }
yDomain={ chartData.yDomain }
/>
);
}
getBarHoverIndex = () => {
const { barChart } = this.refs;
if (!barChart || !barChart.state) {
return -1;
}
return barChart.state.activeTooltipIndex;
}
computeChartsData () {
const { priceChartData } = this.state;
const { histogram } = this.props;
const values = priceChartData
.map((value, index) => ({ value, index }));
const N = values.length - 1;
const maxGasCounts = countModifier(
histogram
.counts
.reduce((max, count) => count.greaterThan(max) ? count : max, 0)
);
const xDomain = [0, N];
const yDomain = [0, maxGasCounts * 1.1];
const chartData = {
values, N,
xDomain, yDomain
};
this.setState({ chartData }, () => {
this.updateSelectedBarChart();
});
}
computeCharts (props = this.props) {
const { histogram } = props;
const priceChartData = histogram
.counts
.map(count => countModifier(count));
this.setState(
{ priceChartData },
() => this.computeChartsData()
);
}
updateSelectedBarChart (state = this.state) {
}
setprice (props = this.props) {
const { price, histogram } = props;
// If no gas price yet...
if (!price) {
return this.setSliderValue(0.5);
}
const bnprice = (typeof price === 'string')
? new BigNumber(price)
: price;
// If gas price hasn't changed
if (this.state.price && bnprice.equals(this.state.price)) {
return;
}
const prices = histogram.bucketBounds;
const startIndex = prices
.findIndex(price => price.greaterThan(bnprice)) - 1;
// price Lower than the max in histogram
if (startIndex === -1) {
return this.setSliderValue(0, bnprice);
}
// price Greater than the max in histogram
if (startIndex === -2) {
return this.setSliderValue(1, bnprice);
}
const priceA = prices[startIndex];
const priceB = prices[startIndex + 1];
const sliderValueDec = bnprice
.minus(priceA)
.dividedBy(priceB.minus(priceA))
.toNumber();
const sliderValue = (startIndex + sliderValueDec) / (prices.length - 1);
this.setSliderValue(sliderValue, bnprice);
}
setSliderValue (value, price = this.state.price) {
const { histogram } = this.props;
const N = histogram.bucketBounds.length - 1;
const sliderValue = Math.max(0, Math.min(value, 1));
const selectedIndex = Math.floor(sliderValue * N);
this.setState({ sliderValue, price, selectedIndex });
}
onBarChartMouseUp = (event) => {
console.log(event);
}
onClickprice = (bar) => {
const { index } = bar;
const ratio = (index + 0.5) / (this.state.chartData.N + 1);
this.onEditpriceSlider(null, ratio);
}
onEditpriceSlider = (event, sliderValue) => {
const { histogram } = this.props;
const prices = histogram.bucketBounds;
const N = prices.length - 1;
const priceAIdx = Math.floor(sliderValue * N);
const priceBIdx = priceAIdx + 1;
if (priceBIdx === N + 1) {
const price = prices[priceAIdx].round();
this.props.onChange(event, price);
return;
}
const priceA = prices[priceAIdx];
const priceB = prices[priceBIdx];
const mult = Math.round((sliderValue % 1) * 100) / 100;
const price = priceA
.plus(priceB.minus(priceA).times(mult))
.round();
this.setSliderValue(sliderValue, price);
this.props.onChange(event, price.toFixed());
}
}

0
js/src/ui/GasPriceEditor/GasPriceSelector/index.js → js/src/ui/GasPriceSelector/index.js
View File

34
js/src/ui/GasPriceSelector/util.js Normal file
View File

@ -0,0 +1,34 @@
// 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/>.
const COLORS = {
default: 'rgba(255, 99, 132, 0.2)',
selected: 'rgba(255, 99, 132, 0.5)',
hover: 'rgba(255, 99, 132, 0.15)',
grid: 'rgba(255, 99, 132, 0.5)',
line: 'rgb(255, 99, 132)',
intersection: '#fff'
};
const countModifier = (count) => {
const val = count.toNumber ? count.toNumber() : count;
return Math.log10(val + 1) + 0.1;
};
export {
COLORS,
countModifier
};

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

@ -32,6 +32,7 @@ import Editor from './Editor';
import Errors from './Errors'; import Errors from './Errors';
import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form'; import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
import GasPriceEditor from './GasPriceEditor'; import GasPriceEditor from './GasPriceEditor';
import GasPriceSelector from './GasPriceSelector';
import IdentityIcon from './IdentityIcon'; import IdentityIcon from './IdentityIcon';
import IdentityName from './IdentityName'; import IdentityName from './IdentityName';
import LanguageSelector from './LanguageSelector'; import LanguageSelector from './LanguageSelector';
@ -70,6 +71,7 @@ export {
Form, Form,
FormWrap, FormWrap,
GasPriceEditor, GasPriceEditor,
GasPriceSelector,
Input, Input,
InputAddress, InputAddress,
InputAddressSelect, InputAddressSelect,

2
js/src/views/ParityBar/parityBar.css
View File

@ -46,7 +46,7 @@
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 19em; max-height: 50vh;
} }
.expanded .content { .expanded .content {

0
js/src/views/Signer/components/Account/AccountLink/AccountLink.css → js/src/views/Signer/components/Account/AccountLink/accountLink.css
View File

2
js/src/views/Signer/components/Account/AccountLink/AccountLink.js → js/src/views/Signer/components/Account/AccountLink/accountLink.js
View File

@ -17,7 +17,7 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { addressLink } from '~/3rdparty/etherscan/links'; import { addressLink } from '~/3rdparty/etherscan/links';
import styles from './AccountLink.css'; import styles from './accountLink.css';
export default class AccountLink extends Component { export default class AccountLink extends Component {
static propTypes = { static propTypes = {

2
js/src/views/Signer/components/Account/AccountLink/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './AccountLink'; export default from './accountLink';

0
js/src/views/Signer/components/Account/Account.css → js/src/views/Signer/components/Account/account.css
View File

2
js/src/views/Signer/components/Account/Account.js → js/src/views/Signer/components/Account/account.js
View File

@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
import { IdentityIcon, IdentityName } from '~/ui'; import { IdentityIcon, IdentityName } from '~/ui';
import AccountLink from './AccountLink'; import AccountLink from './AccountLink';
import styles from './Account.css'; import styles from './account.css';
export default class Account extends Component { export default class Account extends Component {
static propTypes = { static propTypes = {

2
js/src/views/Signer/components/Account/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './Account'; export default from './account';

48
js/src/views/Signer/components/RequestPending/requestPending.js
View File

@ -21,21 +21,26 @@ import SignRequest from '../SignRequest';
export default class RequestPending extends Component { export default class RequestPending extends Component {
static propTypes = { static propTypes = {
className: PropTypes.string,
date: PropTypes.instanceOf(Date).isRequired,
gasLimit: PropTypes.object.isRequired,
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
isSending: PropTypes.bool.isRequired,
isTest: PropTypes.bool.isRequired,
onConfirm: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired,
onReject: PropTypes.func.isRequired, onReject: PropTypes.func.isRequired,
isSending: PropTypes.bool.isRequired,
date: PropTypes.instanceOf(Date).isRequired,
payload: PropTypes.oneOfType([ payload: PropTypes.oneOfType([
PropTypes.shape({ signTransaction: PropTypes.object.isRequired }),
PropTypes.shape({ sendTransaction: PropTypes.object.isRequired }), PropTypes.shape({ sendTransaction: PropTypes.object.isRequired }),
PropTypes.shape({ sign: PropTypes.object.isRequired }) PropTypes.shape({ sign: PropTypes.object.isRequired }),
PropTypes.shape({ signTransaction: PropTypes.object.isRequired })
]).isRequired, ]).isRequired,
className: PropTypes.string,
isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired store: PropTypes.object.isRequired
}; };
static defaultProps = {
isSending: false
};
onConfirm = data => { onConfirm = data => {
const { onConfirm, payload } = this.props; const { onConfirm, payload } = this.props;
@ -44,24 +49,23 @@ export default class RequestPending extends Component {
}; };
render () { render () {
const { payload, id, className, isSending, date, onReject, isTest, store } = this.props; const { className, date, gasLimit, id, isSending, isTest, onReject, payload, store } = this.props;
if (payload.sign) { if (payload.sign) {
const { sign } = payload; const { sign } = payload;
return ( return (
<SignRequest <SignRequest
address={ sign.address }
className={ className } className={ className }
hash={ sign.hash }
id={ id }
isFinished={ false }
isSending={ isSending }
isTest={ isTest }
onConfirm={ this.onConfirm } onConfirm={ this.onConfirm }
onReject={ onReject } onReject={ onReject }
isSending={ isSending } store={ store } />
isFinished={ false }
id={ id }
address={ sign.address }
hash={ sign.hash }
isTest={ isTest }
store={ store }
/>
); );
} }
@ -70,19 +74,19 @@ export default class RequestPending extends Component {
return ( return (
<TransactionPending <TransactionPending
className={ className } className={ className }
date={ date }
gasLimit={ gasLimit }
id={ id }
isSending={ isSending }
isTest={ isTest }
onConfirm={ this.onConfirm } onConfirm={ this.onConfirm }
onReject={ onReject } onReject={ onReject }
isSending={ isSending }
id={ id }
transaction={ transaction }
date={ date }
isTest={ isTest }
store={ store } store={ store }
/> transaction={ transaction } />
); );
} }
// Unknown payload console.error('RequestPending: Unknown payload', payload);
return null; return null;
} }
} }

2
js/src/views/Signer/components/SignRequest/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './SignRequest'; export default from './signRequest';

0
js/src/views/Signer/components/SignRequest/SignRequest.css → js/src/views/Signer/components/SignRequest/signRequest.css
View File

4
js/src/views/Signer/components/SignRequest/SignRequest.js → js/src/views/Signer/components/SignRequest/signRequest.js
View File

@ -21,7 +21,7 @@ import Account from '../Account';
import TransactionPendingForm from '../TransactionPendingForm'; import TransactionPendingForm from '../TransactionPendingForm';
import TxHashLink from '../TxHashLink'; import TxHashLink from '../TxHashLink';
import styles from './SignRequest.css'; import styles from './signRequest.css';
@observer @observer
export default class SignRequest extends Component { export default class SignRequest extends Component {
@ -49,7 +49,7 @@ export default class SignRequest extends Component {
const { className } = this.props; const { className } = this.props;
return ( return (
<div className={ `${styles.container} ${className || ''}` }> <div className={ `${styles.container} ${className}` }>
{ this.renderDetails() } { this.renderDetails() }
{ this.renderActions() } { this.renderActions() }
</div> </div>

34
js/src/views/Signer/components/SignRequest/signRequest.spec.js Normal file
View File

@ -0,0 +1,34 @@
// 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 { shallow } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
import SignRequest from './';
const store = {
balances: {},
fetchBalance: sinon.stub()
};
describe('views/Signer/components/SignRequest', () => {
it('renders', () => {
expect(shallow(
<SignRequest store={ store } />,
)).to.be.ok;
});
});

2
js/src/views/Signer/components/TransactionMainDetails/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './TransactionMainDetails'; export default from './transactionMainDetails';

34
js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css → js/src/views/Signer/components/TransactionMainDetails/transactionMainDetails.css
View File

@ -17,20 +17,25 @@
@import '../../_layout.css'; @import '../../_layout.css';
.transaction {
flex: 1;
overflow: auto;
}
.transaction > * {
display: inline-block;
}
.account { .account {
text-align: center; text-align: center;
} }
.contractIcon {
background: #eee;
width: 50px !important;
height: 50px !important;
box-sizing: border-box;
border-radius: 50%;
padding: 13px;
}
.editButtonRow {
text-align: right;
}
.from { .from {
display: inline-block;
width: 40%; width: 40%;
vertical-align: top; vertical-align: top;
@ -47,6 +52,7 @@
} }
.method { .method {
display: inline-block;
width: 60%; width: 60%;
vertical-align: top; vertical-align: top;
line-height: 1em; line-height: 1em;
@ -66,11 +72,7 @@
opacity: .5; opacity: .5;
} }
.contractIcon { .transaction {
background: #eee; flex: 1;
width: 50px !important; overflow: auto;
height: 50px !important;
box-sizing: border-box;
border-radius: 50%;
padding: 13px;
} }

120
js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js → js/src/views/Signer/components/TransactionMainDetails/transactionMainDetails.js
View File

@ -14,52 +14,43 @@
// 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 MapsLocalGasStation from 'material-ui/svg-icons/maps/local-gas-station';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import { MethodDecoding } from '~/ui'; import { Button, MethodDecoding } from '~/ui';
import * as tUtil from '../util/transaction'; import * as tUtil from '../util/transaction';
import Account from '../Account'; import Account from '../Account';
import styles from './TransactionMainDetails.css'; import styles from './transactionMainDetails.css';
export default class TransactionMainDetails extends Component { export default class TransactionMainDetails extends Component {
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, children: PropTypes.node,
from: PropTypes.string.isRequired, from: PropTypes.string.isRequired,
fromBalance: PropTypes.object, // eth BigNumber, not required since it might take time to fetch fromBalance: PropTypes.object,
value: PropTypes.object.isRequired, // wei hex gasStore: PropTypes.object,
totalValue: PropTypes.object.isRequired, // wei BigNumber id: PropTypes.object.isRequired,
isTest: PropTypes.bool.isRequired, isTest: PropTypes.bool.isRequired,
totalValue: PropTypes.object.isRequired,
transaction: PropTypes.object.isRequired, transaction: PropTypes.object.isRequired,
children: PropTypes.node value: PropTypes.object.isRequired
}; };
componentWillMount () { componentWillMount () {
const { value, totalValue } = this.props; const { totalValue, value } = this.props;
this.updateDisplayValues(value, totalValue); this.updateDisplayValues(value, totalValue);
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
const { value, totalValue } = nextProps; const { totalValue, value } = nextProps;
this.updateDisplayValues(value, totalValue); this.updateDisplayValues(value, totalValue);
} }
updateDisplayValues (value, totalValue) {
this.setState({
feeEth: tUtil.calcFeeInEth(totalValue, value),
valueDisplay: tUtil.getValueDisplay(value),
valueDisplayWei: tUtil.getValueDisplayWei(value),
totalValueDisplay: tUtil.getTotalValueDisplay(totalValue),
totalValueDisplayWei: tUtil.getTotalValueDisplayWei(totalValue)
});
}
render () { render () {
const { children, from, fromBalance, transaction, isTest } = this.props; const { children, from, fromBalance, gasStore, isTest, transaction } = this.props;
return ( return (
<div className={ styles.transaction }> <div className={ styles.transaction }>
@ -74,29 +65,74 @@ export default class TransactionMainDetails extends Component {
<div className={ styles.method }> <div className={ styles.method }>
<MethodDecoding <MethodDecoding
address={ from } address={ from }
transaction={ transaction } historic={ false }
historic={ false } /> transaction={
gasStore
? gasStore.overrideTransaction(transaction)
: transaction
} />
{ this.renderEditGas() }
</div> </div>
{ children } { children }
</div> </div>
); );
} }
renderEditGas () {
const { gasStore } = this.props;
if (!gasStore) {
return null;
}
return (
<div className={ styles.editButtonRow }>
<Button
icon={ <MapsLocalGasStation /> }
label='Edit gas/gasPrice'
onClick={ this.toggleGasEditor } />
</div>
);
}
renderTotalValue () {
const { id } = this.props;
const { feeEth, totalValueDisplay, totalValueDisplayWei } = this.state;
const labelId = `totalValue${id}`;
return (
<div>
<div
className={ styles.total }
data-effect='solid'
data-for={ labelId }
data-place='bottom'
data-tip>
{ totalValueDisplay } <small>ETH</small>
</div>
<ReactTooltip id={ labelId }>
The value of the transaction including the mining fee is <strong>{ totalValueDisplayWei }</strong> <small>WEI</small>. <br />
(This includes a mining fee of <strong>{ feeEth }</strong> <small>ETH</small>)
</ReactTooltip>
</div>
);
}
renderValue () { renderValue () {
const { id } = this.props; const { id } = this.props;
const { valueDisplay, valueDisplayWei } = this.state; const { valueDisplay, valueDisplayWei } = this.state;
const labelId = `value${id}`;
return ( return (
<div> <div>
<div <div
data-tip
data-for={ 'value' + id }
data-effect='solid' data-effect='solid'
> data-for={ labelId }
data-tip>
<strong>{ valueDisplay } </strong> <strong>{ valueDisplay } </strong>
<small>ETH</small> <small>ETH</small>
</div> </div>
<ReactTooltip id={ 'value' + id }> <ReactTooltip id={ labelId }>
The value of the transaction.<br /> The value of the transaction.<br />
<strong>{ valueDisplayWei }</strong> <small>WEI</small> <strong>{ valueDisplayWei }</strong> <small>WEI</small>
</ReactTooltip> </ReactTooltip>
@ -104,25 +140,17 @@ export default class TransactionMainDetails extends Component {
); );
} }
renderTotalValue () { updateDisplayValues (value, totalValue) {
const { id } = this.props; this.setState({
const { totalValueDisplay, totalValueDisplayWei, feeEth } = this.state; feeEth: tUtil.calcFeeInEth(totalValue, value),
totalValueDisplay: tUtil.getTotalValueDisplay(totalValue),
totalValueDisplayWei: tUtil.getTotalValueDisplayWei(totalValue),
valueDisplay: tUtil.getValueDisplay(value),
valueDisplayWei: tUtil.getValueDisplayWei(value)
});
}
return ( toggleGasEditor = () => {
<div> this.props.gasStore.setEditing(true);
<div
data-tip
data-for={ 'totalValue' + id }
data-effect='solid'
data-place='bottom'
className={ styles.total }>
{ totalValueDisplay } <small>ETH</small>
</div>
<ReactTooltip id={ 'totalValue' + id }>
The value of the transaction including the mining fee is <strong>{ totalValueDisplayWei }</strong> <small>WEI</small>. <br />
(This includes a mining fee of <strong>{ feeEth }</strong> <small>ETH</small>)
</ReactTooltip>
</div>
);
} }
} }

2
js/src/views/Signer/components/TransactionPending/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './TransactionPending'; export default from './transactionPending';

6
js/src/views/Signer/components/TransactionPending/TransactionPending.css → js/src/views/Signer/components/TransactionPending/transactionPending.css
View File

@ -19,13 +19,9 @@
.container { .container {
display: flex; display: flex;
padding: 1em 0 1em; padding: 1.5em 1em 1.5em 0;
& > * { & > * {
vertical-align: middle; vertical-align: middle;
} }
} }
.container+.container {
padding-top: 2em;
}

115
js/src/views/Signer/components/TransactionPending/TransactionPending.js → js/src/views/Signer/components/TransactionPending/transactionPending.js
View File

@ -17,89 +17,130 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Button, GasPriceEditor } from '~/ui';
import TransactionMainDetails from '../TransactionMainDetails'; import TransactionMainDetails from '../TransactionMainDetails';
import TransactionPendingForm from '../TransactionPendingForm'; import TransactionPendingForm from '../TransactionPendingForm';
import styles from './TransactionPending.css'; import styles from './transactionPending.css';
import * as tUtil from '../util/transaction'; import * as tUtil from '../util/transaction';
@observer @observer
export default class TransactionPending extends Component { export default class TransactionPending extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, className: PropTypes.string,
transaction: PropTypes.shape({
from: PropTypes.string.isRequired,
value: PropTypes.object.isRequired, // wei hex
gasPrice: PropTypes.object.isRequired, // wei hex
gas: PropTypes.object.isRequired, // hex
data: PropTypes.string, // hex
to: PropTypes.string // undefined if it's a contract
}).isRequired,
date: PropTypes.instanceOf(Date).isRequired, date: PropTypes.instanceOf(Date).isRequired,
gasLimit: PropTypes.object,
id: PropTypes.object.isRequired,
isSending: PropTypes.bool.isRequired,
isTest: PropTypes.bool.isRequired,
nonce: PropTypes.number, nonce: PropTypes.number,
onConfirm: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired,
onReject: PropTypes.func.isRequired, onReject: PropTypes.func.isRequired,
isSending: PropTypes.bool.isRequired, store: PropTypes.object.isRequired,
className: PropTypes.string, transaction: PropTypes.shape({
isTest: PropTypes.bool.isRequired, data: PropTypes.string,
store: PropTypes.object.isRequired from: PropTypes.string.isRequired,
gas: PropTypes.object.isRequired,
gasPrice: PropTypes.object.isRequired,
to: PropTypes.string,
value: PropTypes.object.isRequired
}).isRequired
}; };
static defaultProps = { gasStore = new GasPriceEditor.Store(this.context.api, {
isSending: false gas: this.props.transaction.gas.toFixed(),
}; gasLimit: this.props.gasLimit,
gasPrice: this.props.transaction.gasPrice.toFixed()
});
componentWillMount () { componentWillMount () {
const { transaction, store } = this.props; const { store, transaction } = this.props;
const { gas, gasPrice, value, from, to } = transaction; const { from, gas, gasPrice, to, value } = transaction;
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
const totalValue = tUtil.getTotalValue(fee, value);
const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice); const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice);
const gasToDisplay = tUtil.getGasDisplay(gas); const gasToDisplay = tUtil.getGasDisplay(gas);
const totalValue = tUtil.getTotalValue(fee, value);
this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay }); this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
this.gasStore.setEthValue(value);
store.fetchBalances([from, to]); store.fetchBalances([from, to]);
} }
render () { render () {
const { className, id, transaction, store, isTest } = this.props; return this.gasStore.isEditing
const { from, value } = transaction; ? this.renderGasEditor()
: this.renderTransaction();
}
renderTransaction () {
const { className, id, isSending, isTest, store, transaction } = this.props;
const { totalValue } = this.state; const { totalValue } = this.state;
const { from, value } = transaction;
const fromBalance = store.balances[from]; const fromBalance = store.balances[from];
return ( return (
<div className={ `${styles.container} ${className || ''}` }> <div className={ `${styles.container} ${className}` }>
<TransactionMainDetails <TransactionMainDetails
id={ id }
value={ value }
from={ from }
isTest={ isTest }
fromBalance={ fromBalance }
className={ styles.transactionDetails } className={ styles.transactionDetails }
from={ from }
fromBalance={ fromBalance }
gasStore={ this.gasStore }
id={ id }
isTest={ isTest }
totalValue={ totalValue }
transaction={ transaction } transaction={ transaction }
totalValue={ totalValue } /> value={ value } />
<TransactionPendingForm <TransactionPendingForm
address={ from } address={ from }
isSending={ this.props.isSending } isSending={ isSending }
onConfirm={ this.onConfirm } onConfirm={ this.onConfirm }
onReject={ this.onReject } onReject={ this.onReject } />
/>
</div> </div>
); );
} }
onConfirm = data => { renderGasEditor () {
const { id, transaction } = this.props; const { className } = this.props;
const { gasPrice } = transaction;
const { password, wallet } = data;
this.props.onConfirm({ id, password, wallet, gasPrice }); return (
<div className={ `${styles.container} ${className}` }>
<GasPriceEditor
store={ this.gasStore }>
<Button
label='view transaction'
onClick={ this.toggleGasEditor } />
</GasPriceEditor>
</div>
);
}
onConfirm = (data) => {
const { id, transaction } = this.props;
const { password, wallet } = data;
const { gas, gasPrice } = this.gasStore.overrideTransaction(transaction);
this.props.onConfirm({
gas,
gasPrice,
id,
password,
wallet
});
} }
onReject = () => { onReject = () => {
this.props.onReject(this.props.id); this.props.onReject(this.props.id);
} }
toggleGasEditor = () => {
this.gasStore.setEditing(false);
}
} }

2
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './TransactionPendingFormConfirm'; export default from './transactionPendingFormConfirm';

0
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css → js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.css
View File

85
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.js → js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
View File

@ -22,7 +22,7 @@ import ReactTooltip from 'react-tooltip';
import { Form, Input, IdentityIcon } from '~/ui'; import { Form, Input, IdentityIcon } from '~/ui';
import styles from './TransactionPendingFormConfirm.css'; import styles from './transactionPendingFormConfirm.css';
class TransactionPendingFormConfirm extends Component { class TransactionPendingFormConfirm extends Component {
static propTypes = { static propTypes = {
@ -35,14 +35,14 @@ class TransactionPendingFormConfirm extends Component {
id = Math.random(); // for tooltip id = Math.random(); // for tooltip
state = { state = {
walletError: null, password: '',
wallet: null, wallet: null,
password: '' walletError: null
} }
render () { render () {
const { accounts, address, isSending } = this.props; const { accounts, address, isSending } = this.props;
const { password, walletError, wallet } = this.state; const { password, wallet, walletError } = this.state;
const account = accounts[address] || {}; const account = accounts[address] || {};
const isExternal = !account.uuid; const isExternal = !account.uuid;
@ -51,37 +51,54 @@ class TransactionPendingFormConfirm extends Component {
: null; : null;
const isWalletOk = !isExternal || (walletError === null && wallet !== null); const isWalletOk = !isExternal || (walletError === null && wallet !== null);
const keyInput = isExternal ? this.renderKeyInput() : null; const keyInput = isExternal
? this.renderKeyInput()
: null;
return ( return (
<div className={ styles.confirmForm }> <div className={ styles.confirmForm }>
<Form> <Form>
{ keyInput } { keyInput }
<Input <Input
hint={
isExternal
? 'decrypt the key'
: 'unlock the account'
}
label={
isExternal
? 'Key Password'
: 'Account Password'
}
onChange={ this.onModifyPassword } onChange={ this.onModifyPassword }
onKeyDown={ this.onKeyDown } onKeyDown={ this.onKeyDown }
label={ isExternal ? 'Key Password' : 'Account Password' }
hint={ isExternal ? 'decrypt the key' : 'unlock the account' }
type='password' type='password'
value={ password } /> value={ password } />
<div className={ styles.passwordHint }> <div className={ styles.passwordHint }>
{ passwordHint } { passwordHint }
</div> </div>
<div <div
data-tip
data-place='bottom'
data-for={ 'transactionConfirmForm' + this.id }
data-effect='solid' data-effect='solid'
> data-for={ `transactionConfirmForm${this.id}` }
data-place='bottom'
data-tip>
<RaisedButton <RaisedButton
onTouchTap={ this.onConfirm }
className={ styles.confirmButton } className={ styles.confirmButton }
fullWidth
primary
disabled={ isSending || !isWalletOk } disabled={ isSending || !isWalletOk }
icon={ <IdentityIcon address={ address } button className={ styles.signerIcon } /> } fullWidth
label={ isSending ? 'Confirming...' : 'Confirm Transaction' } icon={
/> <IdentityIcon
address={ address }
button
className={ styles.signerIcon } />
}
label={
isSending
? 'Confirming...'
: 'Confirm Transaction'
}
onTouchTap={ this.onConfirm }
primary />
</div> </div>
{ this.renderTooltip() } { this.renderTooltip() }
</Form> </Form>
@ -95,11 +112,10 @@ class TransactionPendingFormConfirm extends Component {
return ( return (
<Input <Input
className={ styles.fileInput } className={ styles.fileInput }
onChange={ this.onKeySelect }
error={ walletError } error={ walletError }
label='Select Local Key' label='Select Local Key'
type='file' onChange={ this.onKeySelect }
/> type='file' />
); );
} }
@ -109,34 +125,37 @@ class TransactionPendingFormConfirm extends Component {
} }
return ( return (
<ReactTooltip id={ 'transactionConfirmForm' + this.id }> <ReactTooltip id={ `transactionConfirmForm${this.id}` }>
Please provide a password for this account Please provide a password for this account
</ReactTooltip> </ReactTooltip>
); );
} }
onKeySelect = evt => { onKeySelect = (event) => {
const fileReader = new FileReader(); const fileReader = new FileReader();
fileReader.onload = e => {
fileReader.onload = (e) => {
try { try {
const wallet = JSON.parse(e.target.result); const wallet = JSON.parse(e.target.result);
this.setState({ this.setState({
walletError: null, wallet,
wallet: wallet walletError: null
}); });
} catch (e) { } catch (error) {
this.setState({ this.setState({
walletError: 'Given wallet file is invalid.', wallet: null,
wallet: null walletError: 'Given wallet file is invalid.'
}); });
} }
}; };
fileReader.readAsText(evt.target.files[0]); fileReader.readAsText(event.target.files[0]);
} }
onModifyPassword = evt => { onModifyPassword = (event) => {
const password = evt.target.value; const password = event.target.value;
this.setState({ this.setState({
password password
}); });
@ -150,8 +169,8 @@ class TransactionPendingFormConfirm extends Component {
}); });
} }
onKeyDown = evt => { onKeyDown = (event) => {
if (evt.which !== 13) { if (event.which !== 13) {
return; return;
} }

2
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './TransactionPendingFormReject'; export default from './transactionPendingFormReject';

0
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css → js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/transactionPendingFormReject.css
View File

2
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.js → js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/transactionPendingFormReject.js
View File

@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import styles from './TransactionPendingFormReject.css'; import styles from './transactionPendingFormReject.css';
export default class TransactionPendingFormReject extends Component { export default class TransactionPendingFormReject extends Component {

2
js/src/views/Signer/components/TransactionPendingForm/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './TransactionPendingForm'; export default from './transactionPendingForm';

0
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css → js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.css
View File

18
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.js → js/src/views/Signer/components/TransactionPendingForm/transactionPendingForm.js
View File

@ -20,10 +20,9 @@ import BackIcon from 'material-ui/svg-icons/navigation/arrow-back';
import TransactionPendingFormConfirm from './TransactionPendingFormConfirm'; import TransactionPendingFormConfirm from './TransactionPendingFormConfirm';
import TransactionPendingFormReject from './TransactionPendingFormReject'; import TransactionPendingFormReject from './TransactionPendingFormReject';
import styles from './TransactionPendingForm.css'; import styles from './transactionPendingForm.css';
export default class TransactionPendingForm extends Component { export default class TransactionPendingForm extends Component {
static propTypes = { static propTypes = {
address: PropTypes.string.isRequired, address: PropTypes.string.isRequired,
isSending: PropTypes.bool.isRequired, isSending: PropTypes.bool.isRequired,
@ -60,8 +59,8 @@ export default class TransactionPendingForm extends Component {
return ( return (
<TransactionPendingFormConfirm <TransactionPendingFormConfirm
address={ address } address={ address }
onConfirm={ onConfirm } isSending={ isSending }
isSending={ isSending } /> onConfirm={ onConfirm } />
); );
} }
@ -72,14 +71,13 @@ export default class TransactionPendingForm extends Component {
if (!isRejectOpen) { if (!isRejectOpen) {
html = <span>reject transaction</span>; html = <span>reject transaction</span>;
} else { } else {
html = <span><BackIcon />I've changed my mind</span>; html = <span><BackIcon />{ "I've changed my mind" }</span>;
} }
return ( return (
<a <a
onClick={ this.onToggleReject }
className={ styles.rejectToggle } className={ styles.rejectToggle }
> onClick={ this.onToggleReject }>
{ html } { html }
</a> </a>
); );
@ -87,7 +85,9 @@ export default class TransactionPendingForm extends Component {
onToggleReject = () => { onToggleReject = () => {
const { isRejectOpen } = this.state; const { isRejectOpen } = this.state;
this.setState({ isRejectOpen: !isRejectOpen });
}
this.setState({
isRejectOpen: !isRejectOpen
});
}
} }

2
js/src/views/Signer/components/TxHashLink/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './TxHashLink'; export default from './txHashLink';

13
js/src/views/Signer/components/TxHashLink/TxHashLink.js → js/src/views/Signer/components/TxHashLink/txHashLink.js
View File

@ -19,22 +19,21 @@ import React, { Component, PropTypes } from 'react';
import { txLink } from '~/3rdparty/etherscan/links'; import { txLink } from '~/3rdparty/etherscan/links';
export default class TxHashLink extends Component { export default class TxHashLink extends Component {
static propTypes = { static propTypes = {
txHash: PropTypes.string.isRequired,
isTest: PropTypes.bool.isRequired,
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string className: PropTypes.string,
isTest: PropTypes.bool.isRequired,
txHash: PropTypes.string.isRequired
} }
render () { render () {
const { children, txHash, className, isTest } = this.props; const { children, className, isTest, txHash } = this.props;
return ( return (
<a <a
className={ className }
href={ txLink(txHash, isTest) } href={ txLink(txHash, isTest) }
target='_blank' target='_blank'>
className={ className }>
{ children || txHash } { children || txHash }
</a> </a>
); );

18
js/src/views/Signer/containers/Embedded/embedded.css
View File

@ -17,16 +17,22 @@
@import '../../_layout.css'; @import '../../_layout.css';
.signer { .info {
box-sizing: border-box; padding: 1em 0;
padding: 0;
width: $embedWidth;
} }
.none { .none {
color: #aaa; color: #aaa;
} }
.info { .request {
padding: 1em 0; &:nth-child(even) {
background: rgba(255, 255, 255, 0.04);
}
}
.signer {
box-sizing: border-box;
padding: 0;
width: $embedWidth;
} }

33
js/src/views/Signer/containers/Embedded/embedded.js
View File

@ -33,15 +33,16 @@ class Embedded extends Component {
}; };
static propTypes = { static propTypes = {
signer: PropTypes.shape({
pending: PropTypes.array.isRequired,
finished: PropTypes.array.isRequired
}).isRequired,
actions: PropTypes.shape({ actions: PropTypes.shape({
startConfirmRequest: PropTypes.func.isRequired, startConfirmRequest: PropTypes.func.isRequired,
startRejectRequest: PropTypes.func.isRequired startRejectRequest: PropTypes.func.isRequired
}).isRequired, }).isRequired,
isTest: PropTypes.bool.isRequired gasLimit: PropTypes.object.isRequired,
isTest: PropTypes.bool.isRequired,
signer: PropTypes.shape({
finished: PropTypes.array.isRequired,
pending: PropTypes.array.isRequired
}).isRequired
}; };
store = new Store(this.context.api); store = new Store(this.context.api);
@ -78,20 +79,21 @@ class Embedded extends Component {
} }
renderPending = (data) => { renderPending = (data) => {
const { actions, isTest } = this.props; const { actions, gasLimit, isTest } = this.props;
const { payload, id, isSending, date } = data; const { date, id, isSending, payload } = data;
return ( return (
<RequestPending <RequestPending
className={ styles.request } className={ styles.request }
date={ date }
gasLimit={ gasLimit }
id={ id }
isSending={ isSending }
isTest={ isTest }
key={ id }
onConfirm={ actions.startConfirmRequest } onConfirm={ actions.startConfirmRequest }
onReject={ actions.startRejectRequest } onReject={ actions.startRejectRequest }
isSending={ isSending || false }
key={ id }
id={ id }
payload={ payload } payload={ payload }
date={ date }
isTest={ isTest }
store={ this.store } store={ this.store }
/> />
); );
@ -103,13 +105,14 @@ class Embedded extends Component {
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { isTest } = state.nodeStatus; const { gasLimit, isTest } = state.nodeStatus;
const { actions, signer } = state; const { actions, signer } = state;
return { return {
actions, actions,
signer, gasLimit,
isTest isTest,
signer
}; };
} }

2
js/src/views/Signer/containers/RequestsPage/index.js
View File

@ -14,4 +14,4 @@
// 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/>.
export default from './RequestsPage'; export default from './requestsPage';

6
js/src/views/Signer/containers/RequestsPage/RequestsPage.css → js/src/views/Signer/containers/RequestsPage/requestsPage.css
View File

@ -18,3 +18,9 @@
.noRequestsMsg { .noRequestsMsg {
color: #aaa; color: #aaa;
} }
.request {
&:nth-child(odd) {
background: rgba(255, 255, 255, 0.04);
}
}

36
js/src/views/Signer/containers/RequestsPage/RequestsPage.js → js/src/views/Signer/containers/RequestsPage/requestsPage.js
View File

@ -26,7 +26,7 @@ import { Container, Page, TxList } from '~/ui';
import RequestPending from '../../components/RequestPending'; import RequestPending from '../../components/RequestPending';
import styles from './RequestsPage.css'; import styles from './requestsPage.css';
@observer @observer
class RequestsPage extends Component { class RequestsPage extends Component {
@ -35,15 +35,16 @@ class RequestsPage extends Component {
}; };
static propTypes = { static propTypes = {
signer: PropTypes.shape({
pending: PropTypes.array.isRequired,
finished: PropTypes.array.isRequired
}).isRequired,
actions: PropTypes.shape({ actions: PropTypes.shape({
startConfirmRequest: PropTypes.func.isRequired, startConfirmRequest: PropTypes.func.isRequired,
startRejectRequest: PropTypes.func.isRequired startRejectRequest: PropTypes.func.isRequired
}).isRequired, }).isRequired,
isTest: PropTypes.bool.isRequired gasLimit: PropTypes.object.isRequired,
isTest: PropTypes.bool.isRequired,
signer: PropTypes.shape({
pending: PropTypes.array.isRequired,
finished: PropTypes.array.isRequired
}).isRequired
}; };
store = new Store(this.context.api, true); store = new Store(this.context.api, true);
@ -104,19 +105,21 @@ class RequestsPage extends Component {
} }
renderPending = (data) => { renderPending = (data) => {
const { actions, isTest } = this.props; const { actions, gasLimit, isTest } = this.props;
const { payload, id, isSending, date } = data; const { date, id, isSending, payload } = data;
return ( return (
<RequestPending <RequestPending
className={ styles.request }
date={ date }
gasLimit={ gasLimit }
id={ id }
isSending={ isSending }
isTest={ isTest }
key={ id }
onConfirm={ actions.startConfirmRequest } onConfirm={ actions.startConfirmRequest }
onReject={ actions.startRejectRequest } onReject={ actions.startRejectRequest }
isSending={ isSending || false }
key={ id }
id={ id }
payload={ payload } payload={ payload }
date={ date }
isTest={ isTest }
store={ this.store } store={ this.store }
/> />
); );
@ -124,13 +127,14 @@ class RequestsPage extends Component {
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { isTest } = state.nodeStatus; const { gasLimit, isTest } = state.nodeStatus;
const { actions, signer } = state; const { actions, signer } = state;
return { return {
actions, actions,
signer, gasLimit,
isTest isTest,
signer
}; };
} }