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

Minimise transactions progress (#4942)

Browse Source 
* Watch the requests and display them throughout the app

* Linting

* Showing Requests

* Fully working Transaction Requests Display

* Add FormattedMessage to Requests

* Clean-up the Transfer dialog

* Update Validations

* Cleanup Create Wallet

* Clean Deploy Contract Dialog

* Cleanup Contract Execution

* Fix Requests

* Cleanup Wallet Settings

* Don't show stepper in Portal if less than 2 steps

* WIP local storage requests

* Caching requests and saving contract deployments

* Add Historic prop to Requests MethodDecoding

* Fix tests

* Add Contract address to MethodDecoding

* PR Grumbles - Part I

* PR Grumbles - Part II

* Use API Subscription methods

* Linting

* Move SavedRequests and add tests

* Added tests for Requests Actions

* Fixing tests

* PR Grumbles + Playground fix

* Revert Playground changes

* PR Grumbles

* Better showEth in MethodDecoding
This commit is contained in:
Nicolas Gotchac
2017-03-28 14:34:31 +02:00
committed by Jaco Greeff
parent e28c477075
commit a99721004b
40 changed files with 1382 additions and 1216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
js/src/modals/DeployContract/ErrorStep/errorStep.js
View File

@@ -1,35 +0,0 @@
// Copyright 2015-2017 Parity Technologies (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 styles from '../deployContract.css';
export default class ErrorStep extends Component {
static propTypes = {
error: PropTypes.object
}
render () {
const { error } = this.props;
return (
<div className={ styles.center }>
The contract deployment failed: { error.message }
</div>
);
}
}

17
js/src/modals/DeployContract/ErrorStep/index.js
View File

@@ -1,17 +0,0 @@
// Copyright 2015-2017 Parity Technologies (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 './errorStep';

13
js/src/modals/DeployContract/deployContract.css
View File

@@ -15,19 +15,6 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.center {
text-align: center;
}
.address {
vertical-align: top;
display: inline-block;
}
.identityicon {
margin: -8px 0.5em;
}
.funcparams {
padding-left: 3em;
}

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

@@ -20,21 +20,18 @@ import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { BusyStep, Button, CompletedStep, CopyToClipboard, GasPriceEditor, IdentityIcon, Portal, TxHash, Warning } from '~/ui';
import { CancelIcon, DoneIcon } from '~/ui/Icons';
import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '~/ui';
import { CancelIcon } from '~/ui/Icons';
import { ERRORS, validateAbi, validateCode, validateName, validatePositiveNumber } from '~/util/validation';
import { deploy, deployEstimateGas } from '~/util/tx';
import { setRequest } from '~/redux/providers/requestsActions';
import DetailsStep from './DetailsStep';
import ParametersStep from './ParametersStep';
import ErrorStep from './ErrorStep';
import Extras from '../Transfer/Extras';
import styles from './deployContract.css';
import { ERROR_CODES } from '~/api/transport/error';
const STEPS = {
CONTRACT_DETAILS: {
title: (
@@ -59,23 +56,6 @@ const STEPS = {
defaultMessage='extra information'
/>
)
},
DEPLOYMENT: {
waiting: true,
title: (
<FormattedMessage
id='deployContract.title.deployment'
defaultMessage='deployment'
/>
)
},
COMPLETED: {
title: (
<FormattedMessage
id='deployContract.title.completed'
defaultMessage='completed'
/>
)
}
};
@@ -93,6 +73,7 @@ class DeployContract extends Component {
code: PropTypes.string,
gasLimit: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
onSetRequest: PropTypes.func.isRequired,
readOnly: PropTypes.bool,
source: PropTypes.string
};
@@ -112,8 +93,6 @@ class DeployContract extends Component {
amountError: '',
code: '',
codeError: ERRORS.invalidCode,
deployState: '',
deployError: null,
description: '',
descriptionError: null,
extras: false,
@@ -124,9 +103,8 @@ class DeployContract extends Component {
params: [],
paramsError: [],
inputs: [],
rejected: false,
step: 'CONTRACT_DETAILS'
}
};
componentWillMount () {
const { abi, code } = this.props;
@@ -154,11 +132,9 @@ class DeployContract extends Component {
}
render () {
const { step, deployError, rejected, inputs } = this.state;
const { step, inputs } = this.state;
const realStepKeys = deployError || rejected
? []
: Object.keys(STEPS)
const realStepKeys = Object.keys(STEPS)
.filter((k) => {
if (k === 'CONTRACT_PARAMETERS') {
return inputs.length > 0;
@@ -172,45 +148,15 @@ class DeployContract extends Component {
});
const realStep = realStepKeys.findIndex((k) => k === step);
const realSteps = realStepKeys.length
? realStepKeys.map((k) => STEPS[k])
: null;
const title = realSteps
? null
: (
deployError
? (
<FormattedMessage
id='deployContract.title.failed'
defaultMessage='deployment failed'
/>
)
: (
<FormattedMessage
id='deployContract.title.rejected'
defaultMessage='rejected'
/>
)
);
const waiting = realSteps
? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
: null;
const realSteps = realStepKeys.map((k) => STEPS[k]);
return (
<Portal
buttons={ this.renderDialogActions() }
activeStep={ realStep }
busySteps={ waiting }
onClose={ this.onClose }
open
steps={
realSteps
? realSteps.map((s) => s.title)
: null
}
title={ title }
steps={ realSteps.map((s) => s.title) }
>
{ this.renderExceptionWarning() }
{ this.renderStep() }
@@ -264,20 +210,6 @@ class DeployContract extends Component {
/>
);
const closeBtnOk = (
<Button
icon={ <DoneIcon /> }
key='done'
label={
<FormattedMessage
id='deployContract.button.done'
defaultMessage='Done'
/>
}
onClick={ this.onClose }
/>
);
if (deployError) {
return closeBtn;
}
@@ -346,43 +278,12 @@ class DeployContract extends Component {
cancelBtn,
createButton
];
case 'DEPLOYMENT':
return [ closeBtn ];
case 'COMPLETED':
return [ closeBtnOk ];
}
}
renderStep () {
const { accounts, readOnly, balances } = this.props;
const { address, deployError, step, deployState, txhash, rejected } = this.state;
if (deployError) {
return (
<ErrorStep error={ deployError } />
);
}
if (rejected) {
return (
<BusyStep
title={
<FormattedMessage
id='deployContract.rejected.title'
defaultMessage='The deployment has been rejected'
/>
}
state={
<FormattedMessage
id='deployContract.rejected.description'
defaultMessage='You can safely close this window, the contract deployment will not occur.'
/>
}
/>
);
}
const { step } = this.state;
switch (step) {
case 'CONTRACT_DETAILS':
@@ -416,50 +317,6 @@ class DeployContract extends Component {
case 'EXTRAS':
return this.renderExtrasPage();
case 'DEPLOYMENT':
const body = txhash
? <TxHash hash={ txhash } />
: null;
return (
<BusyStep
title={
<FormattedMessage
id='deployContract.busy.title'
defaultMessage='The deployment is currently in progress'
/>
}
state={ deployState }
>
{ body }
</BusyStep>
);
case 'COMPLETED':
return (
<CompletedStep>
<div>
<FormattedMessage
id='deployContract.completed.description'
defaultMessage='Your contract has been deployed at'
/>
</div>
<div>
<CopyToClipboard data={ address } />
<IdentityIcon
address={ address }
center
className={ styles.identityicon }
inline
/>
<div className={ styles.address }>
{ address }
</div>
</div>
<TxHash hash={ txhash } />
</CompletedStep>
);
}
}
@@ -591,7 +448,7 @@ class DeployContract extends Component {
}
onDeployStart = () => {
const { api, store } = this.context;
const { api } = this.context;
const { source } = this.props;
const { abiParsed, amountValue, code, description, name, params, fromAddress } = this.state;
@@ -611,125 +468,17 @@ class DeployContract extends Component {
value: amountValue
});
this.setState({ step: 'DEPLOYMENT' });
const contract = api.newContract(abiParsed);
deploy(contract, options, params, metadata, this.onDeploymentState, true)
.then((address) => {
// No contract address given, might need some confirmations
// from the wallet owners...
if (!address || /^(0x)?0*$/.test(address)) {
return false;
}
this.onClose();
deploy(contract, options, params, true)
.then((requestId) => {
const requestMetadata = { ...metadata, deployment: true };
metadata.blockNumber = contract._receipt
? contract.receipt.blockNumber.toNumber()
: null;
return Promise.all([
api.parity.setAccountName(address, name),
api.parity.setAccountMeta(address, metadata)
])
.then(() => {
console.log(`contract deployed at ${address}`);
this.setState({ step: 'COMPLETED', address });
});
})
.catch((error) => {
if (error.code === ERROR_CODES.REQUEST_REJECTED) {
this.setState({ rejected: true });
return false;
}
console.error('error deploying contract', error);
this.setState({ deployError: error });
store.dispatch({ type: 'newError', error });
this.props.onSetRequest(requestId, { metadata: requestMetadata }, false);
});
}
onDeploymentState = (error, data) => {
if (error) {
console.error('onDeploymentState', error);
return;
}
switch (data.state) {
case 'estimateGas':
case 'postTransaction':
this.setState({
deployState: (
<FormattedMessage
id='deployContract.state.preparing'
defaultMessage='Preparing transaction for network transmission'
/>
)
});
return;
case 'checkRequest':
this.setState({
deployState: (
<FormattedMessage
id='deployContract.state.waitSigner'
defaultMessage='Waiting for confirmation of the transaction in the Parity Secure Signer'
/>
)
});
return;
case 'getTransactionReceipt':
this.setState({
txhash: data.txhash,
deployState: (
<FormattedMessage
id='deployContract.state.waitReceipt'
defaultMessage='Waiting for the contract deployment transaction receipt'
/>
)
});
return;
case 'hasReceipt':
case 'getCode':
this.setState({
deployState: (
<FormattedMessage
id='deployContract.state.validatingCode'
defaultMessage='Validating the deployed contract code'
/>
)
});
return;
case 'confirmationNeeded':
this.setState({
deployState: (
<FormattedMessage
id='deployContract.state.confirmationNeeded'
defaultMessage='The operation needs confirmations from the other owners of the contract'
/>
)
});
return;
case 'completed':
this.setState({
deployState: (
<FormattedMessage
id='deployContract.state.completed'
defaultMessage='The contract deployment has been completed'
/>
)
});
return;
default:
console.error('Unknown contract deployment state', data);
return;
}
}
onClose = () => {
this.props.onClose();
}
@@ -752,6 +501,13 @@ function mapStateToProps (initState, initProps) {
};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
onSetRequest: setRequest
}, dispatch);
}
export default connect(
mapStateToProps
mapStateToProps,
mapDispatchToProps
)(DeployContract);