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

Edit ETH value, gas and gas price in Contract Deployment (#4919)

Browse Source 
* Fix typo

* Add Value capabilities to Contract Deployment

* Add Extras settings for Contract Deployment (#4483)

* Fix deploy in API
This commit is contained in:
Nicolas Gotchac 2017-03-16 13:18:28 +01:00 committed by Gav Wood
parent 57d718fde1
commit 7846544c1b
9 changed files with 300 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/src/api/contract/contract.js
View File

@ -107,13 +107,25 @@ export default class Contract {
});
}
deploy (options, values, statecb = () => {}) {
deploy (options, values, statecb = () => {}, skipGasEstimate = false) {
let gasEstPromise;
if (skipGasEstimate) {
gasEstPromise = Promise.resolve(null);
} else {
statecb(null, { state: 'estimateGas' });
return this
.deployEstimateGas(options, values)
.then(([gasEst, gas]) => {
options.gas = gas.toFixed(0);
gasEstPromise = this.deployEstimateGas(options, values)
.then(([gasEst, gas]) => gas);
}
return gasEstPromise
.then((_gas) => {
if (_gas) {
options.gas = _gas.toFixed(0);
}
const gas = _gas || options.gas;
statecb(null, { state: 'postTransaction', gas });

84
js/src/modals/DeployContract/DetailsStep/detailsStep.js
View File

@ -16,12 +16,16 @@
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { MenuItem } from 'material-ui';
import { Checkbox, MenuItem } from 'material-ui';
import { AddressSelect, Form, Input, Select } from '~/ui';
import { validateAbi } from '~/util/validation';
import { parseAbiType } from '~/util/abi';
const CHECK_STYLE = {
marginTop: '1em'
};
export default class DetailsStep extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
@ -30,8 +34,10 @@ export default class DetailsStep extends Component {
static propTypes = {
accounts: PropTypes.object.isRequired,
onAbiChange: PropTypes.func.isRequired,
onAmountChange: PropTypes.func.isRequired,
onCodeChange: PropTypes.func.isRequired,
onDescriptionChange: PropTypes.func.isRequired,
onExtrasChange: PropTypes.func.isRequired,
onFromAddressChange: PropTypes.func.isRequired,
onInputsChange: PropTypes.func.isRequired,
onNameChange: PropTypes.func.isRequired,
@ -39,11 +45,14 @@ export default class DetailsStep extends Component {
abi: PropTypes.string,
abiError: PropTypes.string,
amount: PropTypes.string,
amountError: PropTypes.string,
balances: PropTypes.object,
code: PropTypes.string,
codeError: PropTypes.string,
description: PropTypes.string,
descriptionError: PropTypes.string,
extras: PropTypes.bool,
fromAddress: PropTypes.string,
fromAddressError: PropTypes.string,
name: PropTypes.string,
@ -52,6 +61,7 @@ export default class DetailsStep extends Component {
};
static defaultProps = {
extras: false,
readOnly: false
};
@ -83,7 +93,7 @@ export default class DetailsStep extends Component {
fromAddress, fromAddressError,
name, nameError,
description, descriptionError,
abiError,
abiError, extras,
code, codeError
} = this.props;
@ -189,10 +199,70 @@ export default class DetailsStep extends Component {
value={ code }
/>
{ this.renderValueInput() }
<div>
<Checkbox
checked={ extras }
label={
<FormattedMessage
id='deployContract.details.advanced.label'
defaultMessage='advanced sending options'
/>
}
onCheck={ this.onCheckExtras }
style={ CHECK_STYLE }
/>
</div>
</Form>
);
}
renderValueInput () {
const { abi, amount, amountError } = this.props;
let payable = false;
try {
const parsedAbi = JSON.parse(abi);
payable = parsedAbi.find((method) => method.type === 'constructor' && method.payable);
} catch (error) {
return null;
}
if (!payable) {
return null;
}
return (
<Input
error={ amountError }
hint={
<FormattedMessage
id='deployContract.details.amount.hint'
defaultMessage='the amount to transfer to the contract'
/>
}
label={
<FormattedMessage
id='deployContract.details.amount.label'
defaultMessage='amount to transfer (in {tag})'
values={ {
tag: 'ETH'
} }
/>
}
min={ 0 }
step={ 0.1 }
type='number'
onChange={ this.onAmountChange }
value={ amount }
/>
);
}
renderContractSelect () {
const { contracts } = this.state;
@ -295,6 +365,16 @@ export default class DetailsStep extends Component {
onDescriptionChange(description);
}
onAmountChange = (event, value) => {
const { onAmountChange } = this.props;
onAmountChange(value);
}
onCheckExtras = () => {
this.props.onExtrasChange(!this.props.extras);
}
onAbiChange = (abi) => {
const { api } = this.context;
const { onAbiChange, onParamsChange, onInputsChange } = this.props;

179
js/src/modals/DeployContract/deployContract.js
View File

@ -14,6 +14,7 @@
// 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 { pick } from 'lodash';
import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
@ -22,12 +23,13 @@ import { connect } from 'react-redux';
import { BusyStep, Button, CompletedStep, CopyToClipboard, GasPriceEditor, IdentityIcon, Portal, TxHash, Warning } from '~/ui';
import { CancelIcon, DoneIcon } from '~/ui/Icons';
import { ERRORS, validateAbi, validateCode, validateName } from '~/util/validation';
import { ERRORS, validateAbi, validateCode, validateName, validatePositiveNumber } from '~/util/validation';
import { deploy, deployEstimateGas } from '~/util/tx';
import DetailsStep from './DetailsStep';
import ParametersStep from './ParametersStep';
import ErrorStep from './ErrorStep';
import Extras from '../Transfer/Extras';
import styles from './deployContract.css';
@ -50,6 +52,14 @@ const STEPS = {
/>
)
},
EXTRAS: {
title: (
<FormattedMessage
id='deployContract.title.extras'
defaultMessage='extra information'
/>
)
},
DEPLOYMENT: {
waiting: true,
title: (
@ -97,12 +107,16 @@ class DeployContract extends Component {
state = {
abi: '',
abiError: ERRORS.invalidAbi,
amount: '0',
amountValue: new BigNumber(0),
amountError: '',
code: '',
codeError: ERRORS.invalidCode,
deployState: '',
deployError: null,
description: '',
descriptionError: null,
extras: false,
fromAddress: Object.keys(this.props.accounts)[0],
fromAddressError: null,
name: '',
@ -144,7 +158,19 @@ class DeployContract extends Component {
const realStepKeys = deployError || rejected
? []
: Object.keys(STEPS).filter((k) => k !== 'CONTRACT_PARAMETERS' || inputs.length > 0);
: Object.keys(STEPS)
.filter((k) => {
if (k === 'CONTRACT_PARAMETERS') {
return inputs.length > 0;
}
if (k === 'EXTRAS') {
return this.state.extras;
}
return true;
});
const realStep = realStepKeys.findIndex((k) => k === step);
const realSteps = realStepKeys.length
? realStepKeys.map((k) => STEPS[k])
@ -207,8 +233,8 @@ class DeployContract extends Component {
}
renderDialogActions () {
const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
const { deployError, abiError, amountError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError && !amountError;
const cancelBtn = (
<Button
@ -256,32 +282,7 @@ class DeployContract extends Component {
return closeBtn;
}
switch (step) {
case 'CONTRACT_DETAILS':
return [
cancelBtn,
<Button
disabled={ !isValid }
key='next'
icon={
<IdentityIcon
address={ fromAddress }
button
/>
}
label={
<FormattedMessage
id='deployContract.button.next'
defaultMessage='Next'
/>
}
onClick={ this.onParametersStep }
/>
];
case 'CONTRACT_PARAMETERS':
return [
cancelBtn,
const createButton = (
<Button
icon={
<IdentityIcon
@ -298,6 +299,52 @@ class DeployContract extends Component {
}
onClick={ this.onDeployStart }
/>
);
const nextButton = (
<Button
disabled={ !isValid }
key='next'
icon={
<IdentityIcon
address={ fromAddress }
button
/>
}
label={
<FormattedMessage
id='deployContract.button.next'
defaultMessage='Next'
/>
}
onClick={ this.onNextStep }
/>
);
const hasParameters = this.state.inputs.length > 0;
const showExtras = this.state.extras;
switch (step) {
case 'CONTRACT_DETAILS':
return [
cancelBtn,
hasParameters || showExtras
? nextButton
: createButton
];
case 'CONTRACT_PARAMETERS':
return [
cancelBtn,
showExtras
? nextButton
: createButton
];
case 'EXTRAS':
return [
cancelBtn,
createButton
];
case 'DEPLOYMENT':
@ -344,6 +391,8 @@ class DeployContract extends Component {
{ ...this.state }
accounts={ accounts }
balances={ balances }
onAmountChange={ this.onAmountChange }
onExtrasChange={ this.onExtrasChange }
onFromAddressChange={ this.onFromAddressChange }
onDescriptionChange={ this.onDescriptionChange }
onNameChange={ this.onNameChange }
@ -365,6 +414,9 @@ class DeployContract extends Component {
/>
);
case 'EXTRAS':
return this.renderExtrasPage();
case 'DEPLOYMENT':
const body = txhash
? <TxHash hash={ txhash } />
@ -411,17 +463,32 @@ class DeployContract extends Component {
}
}
renderExtrasPage () {
if (!this.gasStore.histogram) {
return null;
}
return (
<Extras
gasStore={ this.gasStore }
hideData
isEth
/>
);
}
estimateGas = () => {
const { api } = this.context;
const { abiError, abiParsed, code, codeError, fromAddress, fromAddressError, params } = this.state;
const { abiError, abiParsed, amountValue, amountError, code, codeError, fromAddress, fromAddressError, params } = this.state;
if (abiError || codeError || fromAddressError) {
if (abiError || codeError || fromAddressError || amountError) {
return;
}
const options = {
data: code,
from: fromAddress
from: fromAddress,
value: amountValue
};
const contract = api.newContract(abiParsed);
@ -437,6 +504,19 @@ class DeployContract extends Component {
});
}
onNextStep = () => {
switch (this.state.step) {
case 'CONTRACT_DETAILS':
return this.onParametersStep();
case 'CONTRACT_PARAMETERS':
return this.onExtrasStep();
default:
console.warn('wrong call of "onNextStep" from', this.state.step);
}
}
onParametersStep = () => {
const { inputs } = this.state;
@ -444,6 +524,14 @@ class DeployContract extends Component {
return this.setState({ step: 'CONTRACT_PARAMETERS' });
}
return this.onExtrasStep();
}
onExtrasStep = () => {
if (this.state.extras) {
return this.setState({ step: 'EXTRAS' });
}
return this.onDeployStart();
}
@ -488,10 +576,24 @@ class DeployContract extends Component {
this.setState(validateCode(code), this.estimateGas);
}
onAmountChange = (amount) => {
const { numberError } = validatePositiveNumber(amount);
const nextAmountValue = numberError
? new BigNumber(0)
: this.context.api.util.toWei(amount);
this.gasStore.setEthValue(nextAmountValue);
this.setState({ amount, amountValue: nextAmountValue, amountError: numberError }, this.estimateGas);
}
onExtrasChange = (extras) => {
this.setState({ extras });
}
onDeployStart = () => {
const { api, store } = this.context;
const { source } = this.props;
const { abiParsed, code, description, name, params, fromAddress } = this.state;
const { abiParsed, amountValue, code, description, name, params, fromAddress } = this.state;
const metadata = {
abi: abiParsed,
@ -503,16 +605,17 @@ class DeployContract extends Component {
source
};
const options = {
const options = this.gasStore.overrideTransaction({
data: code,
from: fromAddress
};
from: fromAddress,
value: amountValue
});
this.setState({ step: 'DEPLOYMENT' });
const contract = api.newContract(abiParsed);
deploy(contract, options, params, metadata, this.onDeploymentState)
deploy(contract, options, params, metadata, this.onDeploymentState, true)
.then((address) => {
// No contract address given, might need some confirmations
// from the wallet owners...

2
js/src/modals/Transfer/Details/details.js
View File

@ -24,7 +24,7 @@ import { nullableProptype } from '~/util/proptypes';
import TokenSelect from './tokenSelect';
import styles from '../transfer.css';
const CHECK_STYLE = {
export const CHECK_STYLE = {
position: 'absolute',
top: '38px',
left: '1em'

13
js/src/modals/Transfer/Extras/extras.js
View File

@ -25,12 +25,17 @@ export default class Extras extends Component {
static propTypes = {
data: PropTypes.string,
dataError: PropTypes.string,
hideData: PropTypes.bool,
gasStore: PropTypes.object.isRequired,
isEth: PropTypes.bool,
onChange: PropTypes.func.isRequired,
onChange: PropTypes.func,
total: PropTypes.string,
totalError: PropTypes.string
}
};
static defaultProps = {
hideData: false
};
render () {
const { gasStore, onChange } = this.props;
@ -49,9 +54,9 @@ export default class Extras extends Component {
}
renderData () {
const { isEth, data, dataError } = this.props;
const { isEth, data, dataError, hideData } = this.props;
if (!isEth) {
if (!isEth || hideData) {
return null;
}

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

@ -81,6 +81,7 @@ export default class Input extends Component {
tabIndex: PropTypes.number,
type: PropTypes.string,
submitOnBlur: PropTypes.bool,
step: PropTypes.number,
style: PropTypes.object,
value: PropTypes.oneOfType([
PropTypes.number,
@ -124,7 +125,7 @@ export default class Input extends Component {
render () {
const { value } = this.state;
const { autoFocus, children, className, hideUnderline, disabled, error, focused, label } = this.props;
const { hint, onClick, multiLine, rows, type, min, max, style, tabIndex } = this.props;
const { hint, onClick, multiLine, rows, type, min, max, step, style, tabIndex } = this.props;
const readOnly = this.props.readOnly || disabled;
@ -179,6 +180,7 @@ export default class Input extends Component {
readOnly={ readOnly }
ref='input'
rows={ rows }
step={ step }
style={ textFieldStyle }
tabIndex={ tabIndex }
type={ type || 'text' }

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

@ -107,7 +107,7 @@ class MethodDecoding extends Component {
renderGas () {
const { historic, transaction } = this.props;
const { gas, gasPrice } = transaction;
const { gas, gasPrice, value } = transaction;
if (!gas || !gasPrice) {
return null;
@ -126,9 +126,9 @@ class MethodDecoding extends Component {
/>
</span>
);
const gasProvidedEth = (
const totalEthValue = (
<span className={ styles.highlight }>
{ this.renderEtherValue(gas.mul(gasPrice)) }
{ this.renderEtherValue(gas.mul(gasPrice).plus(value || 0)) }
</span>
);
const gasUsed = transaction.gasUsed
@ -149,12 +149,12 @@ class MethodDecoding extends Component {
<div className={ styles.gasDetails }>
<FormattedMessage
id='ui.methodDecoding.txValues'
defaultMessage='{historic, select, true {Provided} false {Provides}} {gasProvided}{gasUsed} for a total transaction value of {gasProvidedEth}'
defaultMessage='{historic, select, true {Provided} false {Provides}} {gasProvided}{gasUsed} for a total transaction value of {totalEthValue}'
values={ {
historic,
gasProvided,
gasProvidedEth,
gasUsed
gasUsed,
totalEthValue
} }
/>
{ this.renderMinBlock() }
@ -349,6 +349,7 @@ class MethodDecoding extends Component {
renderDeploy () {
const { historic, transaction } = this.props;
const { methodInputs } = this.state;
const { value } = transaction;
if (!historic) {
return (
@ -357,6 +358,19 @@ class MethodDecoding extends Component {
id='ui.methodDecoding.deploy.willDeploy'
defaultMessage='Will deploy a contract'
/>
{
value && value.gt(0)
? (
<FormattedMessage
id='ui.methodDecoding.deploy.withValue'
defaultMessage=', sending {value}'
values={ {
value: this.renderEtherValue(value)
} }
/>
)
: null
}
</div>
);
}

23
js/src/util/tx.js
View File

@ -73,7 +73,7 @@ export function postTransaction (_func, _options, _values = []) {
});
}
export function deploy (contract, _options, values, metadata = {}, statecb = () => {}) {
export function deploy (contract, _options, values, metadata = {}, statecb = () => {}, skipGasEstimate = false) {
const options = { ..._options };
const { api } = contract;
const address = options.from;
@ -82,16 +82,27 @@ export function deploy (contract, _options, values, metadata = {}, statecb = ()
.isWallet(api, address)
.then((isWallet) => {
if (!isWallet) {
return contract.deploy(options, values, statecb);
return contract.deploy(options, values, statecb, skipGasEstimate);
}
let gasEstPromise;
if (skipGasEstimate) {
gasEstPromise = Promise.resolve(null);
} else {
statecb(null, { state: 'estimateGas' });
return deployEstimateGas(contract, options, values)
.then(([gasEst, gas]) => {
options.gas = gas.toFixed(0);
gasEstPromise = deployEstimateGas(contract, options, values)
.then(([gasEst, gas]) => gas);
}
statecb(null, { state: 'postTransaction', gas });
return gasEstPromise
.then((gas) => {
if (gas) {
options.gas = gas.toFixed(0);
}
statecb(null, { state: 'postTransaction', gas: options.gas });
return WalletsUtils.getDeployArgs(contract, options, values);
})

2
js/src/views/WriteContract/writeContract.js
View File

@ -105,7 +105,7 @@ class WriteContract extends Component {
className={ styles.editor }
style={ { flex: `${size}%` } }
>
<h2>asd{ this.renderTitle() }</h2>
<h2>{ this.renderTitle() }</h2>
<Editor
ref='editor'