Gas exception warnings on deployment (#3938)
* add deployEstimateGas function * Render gas warning with Warning component * estimateGas, display warning on contract deploy * Update messages * Removed unused import * Fix calculated gas usage * Basic component smoktest * Only display warning on edit steps
This commit is contained in:
parent
9529b6fa8c
commit
466f84f485
@ -89,9 +89,15 @@ export default class Contract {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
deploy (options, values, statecb) {
|
deployEstimateGas (options, values) {
|
||||||
let gas;
|
return this._api.eth
|
||||||
|
.estimateGas(this._encodeOptions(this.constructors[0], options, values))
|
||||||
|
.then((gasEst) => {
|
||||||
|
return [gasEst, gasEst.mul(1.2)];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deploy (options, values, statecb) {
|
||||||
const setState = (state) => {
|
const setState = (state) => {
|
||||||
if (!statecb) {
|
if (!statecb) {
|
||||||
return;
|
return;
|
||||||
@ -102,31 +108,32 @@ export default class Contract {
|
|||||||
|
|
||||||
setState({ state: 'estimateGas' });
|
setState({ state: 'estimateGas' });
|
||||||
|
|
||||||
return this._api.eth
|
return this
|
||||||
.estimateGas(this._encodeOptions(this.constructors[0], options, values))
|
.deployEstimateGas(options, values)
|
||||||
.then((_gas) => {
|
.then(([gasEst, gas]) => {
|
||||||
gas = _gas.mul(1.2);
|
|
||||||
options.gas = gas.toFixed(0);
|
options.gas = gas.toFixed(0);
|
||||||
|
|
||||||
setState({ state: 'postTransaction', gas });
|
setState({ state: 'postTransaction', gas });
|
||||||
return this._api.parity.postTransaction(this._encodeOptions(this.constructors[0], options, values));
|
|
||||||
})
|
|
||||||
.then((requestId) => {
|
|
||||||
setState({ state: 'checkRequest', requestId });
|
|
||||||
return this._pollCheckRequest(requestId);
|
|
||||||
})
|
|
||||||
.then((txhash) => {
|
|
||||||
setState({ state: 'getTransactionReceipt', txhash });
|
|
||||||
return this._pollTransactionReceipt(txhash, gas);
|
|
||||||
})
|
|
||||||
.then((receipt) => {
|
|
||||||
if (receipt.gasUsed.eq(gas)) {
|
|
||||||
throw new Error(`Contract not deployed, gasUsed == ${gas.toFixed(0)}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
setState({ state: 'hasReceipt', receipt });
|
return this._api.parity
|
||||||
this._address = receipt.contractAddress;
|
.postTransaction(this._encodeOptions(this.constructors[0], options, values))
|
||||||
return this._address;
|
.then((requestId) => {
|
||||||
|
setState({ state: 'checkRequest', requestId });
|
||||||
|
return this._pollCheckRequest(requestId);
|
||||||
|
})
|
||||||
|
.then((txhash) => {
|
||||||
|
setState({ state: 'getTransactionReceipt', txhash });
|
||||||
|
return this._pollTransactionReceipt(txhash, gas);
|
||||||
|
})
|
||||||
|
.then((receipt) => {
|
||||||
|
if (receipt.gasUsed.eq(gas)) {
|
||||||
|
throw new Error(`Contract not deployed, gasUsed == ${gas.toFixed(0)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setState({ state: 'hasReceipt', receipt });
|
||||||
|
this._address = receipt.contractAddress;
|
||||||
|
return this._address;
|
||||||
|
});
|
||||||
})
|
})
|
||||||
.then((address) => {
|
.then((address) => {
|
||||||
setState({ state: 'getCode' });
|
setState({ state: 'getCode' });
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
import React, { Component, PropTypes } from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { MenuItem } from 'material-ui';
|
import { MenuItem } from 'material-ui';
|
||||||
|
|
||||||
import { AddressSelect, Form, Input, Select } from '~/ui';
|
import { AddressSelect, Form, Input, Select } from '~/ui';
|
||||||
@ -92,27 +93,51 @@ export default class DetailsStep extends Component {
|
|||||||
return (
|
return (
|
||||||
<Form>
|
<Form>
|
||||||
<AddressSelect
|
<AddressSelect
|
||||||
label='from account (contract owner)'
|
|
||||||
hint='the owner account for this contract'
|
|
||||||
accounts={ accounts }
|
accounts={ accounts }
|
||||||
balances={ balances }
|
balances={ balances }
|
||||||
error={ fromAddressError }
|
error={ fromAddressError }
|
||||||
|
hint={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.address.hint'
|
||||||
|
defaultMessage='the owner account for this contract' />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.address.label'
|
||||||
|
defaultMessage='from account (contract owner)' />
|
||||||
|
}
|
||||||
onChange={ this.onFromAddressChange }
|
onChange={ this.onFromAddressChange }
|
||||||
value={ fromAddress }
|
value={ fromAddress }
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
label='contract name'
|
|
||||||
hint='a name for the deployed contract'
|
|
||||||
error={ nameError }
|
error={ nameError }
|
||||||
|
hint={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.name.hint'
|
||||||
|
defaultMessage='a name for the deployed contract' />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.name.label'
|
||||||
|
defaultMessage='contract name' />
|
||||||
|
}
|
||||||
onChange={ this.onNameChange }
|
onChange={ this.onNameChange }
|
||||||
value={ name || '' }
|
value={ name || '' }
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
label='contract description (optional)'
|
|
||||||
hint='a description for the contract'
|
|
||||||
error={ descriptionError }
|
error={ descriptionError }
|
||||||
|
hint={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.description.hint'
|
||||||
|
defaultMessage='a description for the contract' />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.description.label'
|
||||||
|
defaultMessage='contract description (optional)' />
|
||||||
|
}
|
||||||
onChange={ this.onDescriptionChange }
|
onChange={ this.onDescriptionChange }
|
||||||
value={ description }
|
value={ description }
|
||||||
/>
|
/>
|
||||||
@ -120,18 +145,34 @@ export default class DetailsStep extends Component {
|
|||||||
{ this.renderContractSelect() }
|
{ this.renderContractSelect() }
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
label='abi / solc combined-output'
|
|
||||||
hint='the abi of the contract to deploy or solc combined-output'
|
|
||||||
error={ abiError }
|
error={ abiError }
|
||||||
|
hint={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.abi.hint'
|
||||||
|
defaultMessage='the abi of the contract to deploy or solc combined-output' />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.abi.label'
|
||||||
|
defaultMessage='abi / solc combined-output' />
|
||||||
|
}
|
||||||
onChange={ this.onSolcChange }
|
onChange={ this.onSolcChange }
|
||||||
onSubmit={ this.onSolcSubmit }
|
onSubmit={ this.onSolcSubmit }
|
||||||
readOnly={ readOnly }
|
readOnly={ readOnly }
|
||||||
value={ solcOutput }
|
value={ solcOutput }
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
label='code'
|
|
||||||
hint='the compiled code of the contract to deploy'
|
|
||||||
error={ codeError }
|
error={ codeError }
|
||||||
|
hint={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.code.hint'
|
||||||
|
defaultMessage='the compiled code of the contract to deploy' />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.code.label'
|
||||||
|
defaultMessage='code' />
|
||||||
|
}
|
||||||
onSubmit={ this.onCodeChange }
|
onSubmit={ this.onCodeChange }
|
||||||
readOnly={ readOnly || solc }
|
readOnly={ readOnly || solc }
|
||||||
value={ code }
|
value={ code }
|
||||||
@ -149,22 +190,26 @@ export default class DetailsStep extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { selectedContractIndex } = this.state;
|
const { selectedContractIndex } = this.state;
|
||||||
const contractsItems = Object.keys(contracts).map((name, index) => (
|
const contractsItems = Object
|
||||||
<MenuItem
|
.keys(contracts)
|
||||||
key={ index }
|
.map((name, index) => (
|
||||||
label={ name }
|
<MenuItem
|
||||||
value={ index }
|
key={ index }
|
||||||
>
|
label={ name }
|
||||||
{ name }
|
value={ index }>
|
||||||
</MenuItem>
|
{ name }
|
||||||
));
|
</MenuItem>
|
||||||
|
));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select
|
<Select
|
||||||
label='select a contract'
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.details.contract.label'
|
||||||
|
defaultMessage='select a contract' />
|
||||||
|
}
|
||||||
onChange={ this.onContractChange }
|
onChange={ this.onContractChange }
|
||||||
value={ selectedContractIndex }
|
value={ selectedContractIndex }>
|
||||||
>
|
|
||||||
{ contractsItems }
|
{ contractsItems }
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
@ -180,7 +225,9 @@ export default class DetailsStep extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { abi, bin } = contract;
|
const { abi, bin } = contract;
|
||||||
const code = /^0x/.test(bin) ? bin : `0x${bin}`;
|
const code = /^0x/.test(bin)
|
||||||
|
? bin
|
||||||
|
: `0x${bin}`;
|
||||||
|
|
||||||
this.setState({ selectedContractIndex: index }, () => {
|
this.setState({ selectedContractIndex: index }, () => {
|
||||||
this.onAbiChange(abi);
|
this.onAbiChange(abi);
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
import React, { Component, PropTypes } from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import { Form, TypedInput } from '~/ui';
|
import { Form, TypedInput } from '~/ui';
|
||||||
import { parseAbiType } from '~/util/abi';
|
import { parseAbiType } from '~/util/abi';
|
||||||
@ -77,21 +78,24 @@ export default class ParametersStep extends Component {
|
|||||||
return (
|
return (
|
||||||
<div key={ index } className={ styles.funcparams }>
|
<div key={ index } className={ styles.funcparams }>
|
||||||
<TypedInput
|
<TypedInput
|
||||||
label={ label }
|
|
||||||
value={ value }
|
|
||||||
error={ error }
|
|
||||||
accounts={ accounts }
|
accounts={ accounts }
|
||||||
|
error={ error }
|
||||||
|
isEth={ false }
|
||||||
|
label={ label }
|
||||||
onChange={ onChange }
|
onChange={ onChange }
|
||||||
param={ param }
|
param={ param }
|
||||||
isEth={ false }
|
value={ value } />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<p>Choose the contract parameters</p>
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.parameters.choose'
|
||||||
|
defaultMessage='Choose the contract parameters' />
|
||||||
|
</p>
|
||||||
{ inputsComponents }
|
{ inputsComponents }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -14,13 +14,14 @@
|
|||||||
// 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 React, { Component, PropTypes } from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
|
|
||||||
import ContentClear from 'material-ui/svg-icons/content/clear';
|
|
||||||
import { pick } from 'lodash';
|
import { pick } from 'lodash';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import React, { Component, PropTypes } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { BusyStep, CompletedStep, CopyToClipboard, Button, IdentityIcon, Modal, TxHash } from '~/ui';
|
import { BusyStep, Button, CompletedStep, CopyToClipboard, GasPriceEditor, IdentityIcon, Modal, TxHash, Warning } from '~/ui';
|
||||||
|
import { CancelIcon, DoneIcon } from '~/ui/Icons';
|
||||||
import { ERRORS, validateAbi, validateCode, validateName } from '~/util/validation';
|
import { ERRORS, validateAbi, validateCode, validateName } from '~/util/validation';
|
||||||
|
|
||||||
import DetailsStep from './DetailsStep';
|
import DetailsStep from './DetailsStep';
|
||||||
@ -32,12 +33,34 @@ import styles from './deployContract.css';
|
|||||||
import { ERROR_CODES } from '~/api/transport/error';
|
import { ERROR_CODES } from '~/api/transport/error';
|
||||||
|
|
||||||
const STEPS = {
|
const STEPS = {
|
||||||
CONTRACT_DETAILS: { title: 'contract details' },
|
CONTRACT_DETAILS: {
|
||||||
CONTRACT_PARAMETERS: { title: 'contract parameters' },
|
title:
|
||||||
DEPLOYMENT: { title: 'deployment', waiting: true },
|
<FormattedMessage
|
||||||
COMPLETED: { title: 'completed' }
|
id='deployContract.title.details'
|
||||||
|
defaultMessage='contract details' />
|
||||||
|
},
|
||||||
|
CONTRACT_PARAMETERS: {
|
||||||
|
title:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.title.parameters'
|
||||||
|
defaultMessage='contract parameters' />
|
||||||
|
},
|
||||||
|
DEPLOYMENT: {
|
||||||
|
waiting: true,
|
||||||
|
title:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.title.deployment'
|
||||||
|
defaultMessage='deployment' />
|
||||||
|
},
|
||||||
|
COMPLETED: {
|
||||||
|
title:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.title.completed'
|
||||||
|
defaultMessage='completed' />
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@observer
|
||||||
class DeployContract extends Component {
|
class DeployContract extends Component {
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
api: PropTypes.object.isRequired,
|
api: PropTypes.object.isRequired,
|
||||||
@ -46,10 +69,11 @@ class DeployContract extends Component {
|
|||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
accounts: PropTypes.object.isRequired,
|
accounts: PropTypes.object.isRequired,
|
||||||
onClose: PropTypes.func.isRequired,
|
|
||||||
balances: PropTypes.object,
|
|
||||||
abi: PropTypes.string,
|
abi: PropTypes.string,
|
||||||
|
balances: PropTypes.object,
|
||||||
code: PropTypes.string,
|
code: PropTypes.string,
|
||||||
|
gasLimit: PropTypes.object.isRequired,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
readOnly: PropTypes.bool,
|
readOnly: PropTypes.bool,
|
||||||
source: PropTypes.string
|
source: PropTypes.string
|
||||||
};
|
};
|
||||||
@ -59,11 +83,15 @@ class DeployContract extends Component {
|
|||||||
source: ''
|
source: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
|
gasStore = new GasPriceEditor.Store(this.context.api, { gasLimit: this.props.gasLimit });
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
abi: '',
|
abi: '',
|
||||||
abiError: ERRORS.invalidAbi,
|
abiError: ERRORS.invalidAbi,
|
||||||
code: '',
|
code: '',
|
||||||
codeError: ERRORS.invalidCode,
|
codeError: ERRORS.invalidCode,
|
||||||
|
deployState: '',
|
||||||
|
deployError: null,
|
||||||
description: '',
|
description: '',
|
||||||
descriptionError: null,
|
descriptionError: null,
|
||||||
fromAddress: Object.keys(this.props.accounts)[0],
|
fromAddress: Object.keys(this.props.accounts)[0],
|
||||||
@ -73,9 +101,6 @@ class DeployContract extends Component {
|
|||||||
params: [],
|
params: [],
|
||||||
paramsError: [],
|
paramsError: [],
|
||||||
inputs: [],
|
inputs: [],
|
||||||
|
|
||||||
deployState: '',
|
|
||||||
deployError: null,
|
|
||||||
rejected: false,
|
rejected: false,
|
||||||
step: 'CONTRACT_DETAILS'
|
step: 'CONTRACT_DETAILS'
|
||||||
}
|
}
|
||||||
@ -117,7 +142,14 @@ class DeployContract extends Component {
|
|||||||
|
|
||||||
const title = realSteps
|
const title = realSteps
|
||||||
? null
|
? null
|
||||||
: (deployError ? 'deployment failed' : 'rejected');
|
: (deployError
|
||||||
|
? <FormattedMessage
|
||||||
|
id='deployContract.title.failed'
|
||||||
|
defaultMessage='deployment failed' />
|
||||||
|
: <FormattedMessage
|
||||||
|
id='deployContract.title.rejected'
|
||||||
|
defaultMessage='rejected' />
|
||||||
|
);
|
||||||
|
|
||||||
const waiting = realSteps
|
const waiting = realSteps
|
||||||
? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
|
? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
|
||||||
@ -127,38 +159,69 @@ class DeployContract extends Component {
|
|||||||
<Modal
|
<Modal
|
||||||
actions={ this.renderDialogActions() }
|
actions={ this.renderDialogActions() }
|
||||||
current={ realStep }
|
current={ realStep }
|
||||||
steps={ realSteps ? realSteps.map((s) => s.title) : null }
|
steps={
|
||||||
|
realSteps
|
||||||
|
? realSteps.map((s) => s.title)
|
||||||
|
: null
|
||||||
|
}
|
||||||
title={ title }
|
title={ title }
|
||||||
waiting={ waiting }
|
|
||||||
visible
|
visible
|
||||||
>
|
waiting={ waiting }>
|
||||||
|
{ this.renderExceptionWarning() }
|
||||||
{ this.renderStep() }
|
{ this.renderStep() }
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderExceptionWarning () {
|
||||||
|
const { step } = this.state;
|
||||||
|
const { errorEstimated } = this.gasStore;
|
||||||
|
const realStep = Object.keys(STEPS).findIndex((k) => k === step);
|
||||||
|
|
||||||
|
if (!errorEstimated || realStep >= 2) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Warning
|
||||||
|
warning={ errorEstimated } />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
renderDialogActions () {
|
renderDialogActions () {
|
||||||
const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
|
const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
|
||||||
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
|
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
|
||||||
|
|
||||||
const cancelBtn = (
|
const cancelBtn = (
|
||||||
<Button
|
<Button
|
||||||
icon={ <ContentClear /> }
|
icon={ <CancelIcon /> }
|
||||||
label='Cancel'
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.button.cancel'
|
||||||
|
defaultMessage='Cancel' />
|
||||||
|
}
|
||||||
onClick={ this.onClose } />
|
onClick={ this.onClose } />
|
||||||
);
|
);
|
||||||
|
|
||||||
const closeBtn = (
|
const closeBtn = (
|
||||||
<Button
|
<Button
|
||||||
icon={ <ContentClear /> }
|
icon={ <CancelIcon /> }
|
||||||
label='Close'
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.button.close'
|
||||||
|
defaultMessage='Close' />
|
||||||
|
}
|
||||||
onClick={ this.onClose } />
|
onClick={ this.onClose } />
|
||||||
);
|
);
|
||||||
|
|
||||||
const closeBtnOk = (
|
const closeBtnOk = (
|
||||||
<Button
|
<Button
|
||||||
icon={ <ActionDoneAll /> }
|
icon={ <DoneIcon /> }
|
||||||
label='Close'
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.button.done'
|
||||||
|
defaultMessage='Done' />
|
||||||
|
}
|
||||||
onClick={ this.onClose } />
|
onClick={ this.onClose } />
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -172,8 +235,16 @@ class DeployContract extends Component {
|
|||||||
cancelBtn,
|
cancelBtn,
|
||||||
<Button
|
<Button
|
||||||
disabled={ !isValid }
|
disabled={ !isValid }
|
||||||
icon={ <IdentityIcon button address={ fromAddress } /> }
|
icon={
|
||||||
label='Next'
|
<IdentityIcon
|
||||||
|
address={ fromAddress }
|
||||||
|
button />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.button.next'
|
||||||
|
defaultMessage='Next' />
|
||||||
|
}
|
||||||
onClick={ this.onParametersStep } />
|
onClick={ this.onParametersStep } />
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -181,8 +252,16 @@ class DeployContract extends Component {
|
|||||||
return [
|
return [
|
||||||
cancelBtn,
|
cancelBtn,
|
||||||
<Button
|
<Button
|
||||||
icon={ <IdentityIcon button address={ fromAddress } /> }
|
icon={
|
||||||
label='Create'
|
<IdentityIcon
|
||||||
|
address={ fromAddress }
|
||||||
|
button />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.button.create'
|
||||||
|
defaultMessage='Create' />
|
||||||
|
}
|
||||||
onClick={ this.onDeployStart } />
|
onClick={ this.onDeployStart } />
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -207,9 +286,16 @@ class DeployContract extends Component {
|
|||||||
if (rejected) {
|
if (rejected) {
|
||||||
return (
|
return (
|
||||||
<BusyStep
|
<BusyStep
|
||||||
title='The deployment has been rejected'
|
title={
|
||||||
state='You can safely close this window, the contract deployment will not occur.'
|
<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.' />
|
||||||
|
} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -220,7 +306,6 @@ class DeployContract extends Component {
|
|||||||
{ ...this.state }
|
{ ...this.state }
|
||||||
accounts={ accounts }
|
accounts={ accounts }
|
||||||
balances={ balances }
|
balances={ balances }
|
||||||
readOnly={ readOnly }
|
|
||||||
onFromAddressChange={ this.onFromAddressChange }
|
onFromAddressChange={ this.onFromAddressChange }
|
||||||
onDescriptionChange={ this.onDescriptionChange }
|
onDescriptionChange={ this.onDescriptionChange }
|
||||||
onNameChange={ this.onNameChange }
|
onNameChange={ this.onNameChange }
|
||||||
@ -228,6 +313,7 @@ class DeployContract extends Component {
|
|||||||
onCodeChange={ this.onCodeChange }
|
onCodeChange={ this.onCodeChange }
|
||||||
onParamsChange={ this.onParamsChange }
|
onParamsChange={ this.onParamsChange }
|
||||||
onInputsChange={ this.onInputsChange }
|
onInputsChange={ this.onInputsChange }
|
||||||
|
readOnly={ readOnly }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -235,9 +321,9 @@ class DeployContract extends Component {
|
|||||||
return (
|
return (
|
||||||
<ParametersStep
|
<ParametersStep
|
||||||
{ ...this.state }
|
{ ...this.state }
|
||||||
readOnly={ readOnly }
|
|
||||||
accounts={ accounts }
|
accounts={ accounts }
|
||||||
onParamsChange={ this.onParamsChange }
|
onParamsChange={ this.onParamsChange }
|
||||||
|
readOnly={ readOnly }
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -247,7 +333,11 @@ class DeployContract extends Component {
|
|||||||
: null;
|
: null;
|
||||||
return (
|
return (
|
||||||
<BusyStep
|
<BusyStep
|
||||||
title='The deployment is currently in progress'
|
title={
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.busy.title'
|
||||||
|
defaultMessage='The deployment is currently in progress' />
|
||||||
|
}
|
||||||
state={ deployState }>
|
state={ deployState }>
|
||||||
{ body }
|
{ body }
|
||||||
</BusyStep>
|
</BusyStep>
|
||||||
@ -256,11 +346,21 @@ class DeployContract extends Component {
|
|||||||
case 'COMPLETED':
|
case 'COMPLETED':
|
||||||
return (
|
return (
|
||||||
<CompletedStep>
|
<CompletedStep>
|
||||||
<div>Your contract has been deployed at</div>
|
|
||||||
<div>
|
<div>
|
||||||
<CopyToClipboard data={ address } label='copy address to clipboard' />
|
<FormattedMessage
|
||||||
<IdentityIcon address={ address } inline center className={ styles.identityicon } />
|
id='deployContract.completed.description'
|
||||||
<div className={ styles.address }>{ address }</div>
|
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>
|
</div>
|
||||||
<TxHash hash={ txhash } />
|
<TxHash hash={ txhash } />
|
||||||
</CompletedStep>
|
</CompletedStep>
|
||||||
@ -268,6 +368,28 @@ class DeployContract extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
estimateGas = () => {
|
||||||
|
const { api } = this.context;
|
||||||
|
const { abiError, abiParsed, code, codeError, fromAddress, fromAddressError, params } = this.state;
|
||||||
|
|
||||||
|
if (abiError || codeError || fromAddressError) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
data: code,
|
||||||
|
from: fromAddress
|
||||||
|
};
|
||||||
|
|
||||||
|
api
|
||||||
|
.newContract(abiParsed)
|
||||||
|
.deployEstimateGas(options, params)
|
||||||
|
.then(([gasEst, gas]) => {
|
||||||
|
this.gasStore.setEstimated(gasEst.toFixed(0));
|
||||||
|
this.gasStore.setGas(gas.toFixed(0));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
onParametersStep = () => {
|
onParametersStep = () => {
|
||||||
const { inputs } = this.state;
|
const { inputs } = this.state;
|
||||||
|
|
||||||
@ -287,9 +409,13 @@ class DeployContract extends Component {
|
|||||||
|
|
||||||
const fromAddressError = api.util.isAddressValid(fromAddress)
|
const fromAddressError = api.util.isAddressValid(fromAddress)
|
||||||
? null
|
? null
|
||||||
: 'a valid account as the contract owner needs to be selected';
|
: (
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.owner.noneSelected'
|
||||||
|
defaultMessage='a valid account as the contract owner needs to be selected' />
|
||||||
|
);
|
||||||
|
|
||||||
this.setState({ fromAddress, fromAddressError });
|
this.setState({ fromAddress, fromAddressError }, this.estimateGas);
|
||||||
}
|
}
|
||||||
|
|
||||||
onNameChange = (name) => {
|
onNameChange = (name) => {
|
||||||
@ -297,23 +423,23 @@ class DeployContract extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onParamsChange = (params) => {
|
onParamsChange = (params) => {
|
||||||
this.setState({ params });
|
this.setState({ params }, this.estimateGas);
|
||||||
}
|
}
|
||||||
|
|
||||||
onInputsChange = (inputs) => {
|
onInputsChange = (inputs) => {
|
||||||
this.setState({ inputs });
|
this.setState({ inputs }, this.estimateGas);
|
||||||
}
|
}
|
||||||
|
|
||||||
onAbiChange = (abi) => {
|
onAbiChange = (abi) => {
|
||||||
const { api } = this.context;
|
const { api } = this.context;
|
||||||
|
|
||||||
this.setState(validateAbi(abi, api));
|
this.setState(validateAbi(abi, api), this.estimateGas);
|
||||||
}
|
}
|
||||||
|
|
||||||
onCodeChange = (code) => {
|
onCodeChange = (code) => {
|
||||||
const { api } = this.context;
|
const { api } = this.context;
|
||||||
|
|
||||||
this.setState(validateCode(code, api));
|
this.setState(validateCode(code, api), this.estimateGas);
|
||||||
}
|
}
|
||||||
|
|
||||||
onDeployStart = () => {
|
onDeployStart = () => {
|
||||||
@ -368,28 +494,54 @@ class DeployContract extends Component {
|
|||||||
switch (data.state) {
|
switch (data.state) {
|
||||||
case 'estimateGas':
|
case 'estimateGas':
|
||||||
case 'postTransaction':
|
case 'postTransaction':
|
||||||
this.setState({ deployState: 'Preparing transaction for network transmission' });
|
this.setState({
|
||||||
|
deployState:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.state.preparing'
|
||||||
|
defaultMessage='Preparing transaction for network transmission' />
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
|
|
||||||
case 'checkRequest':
|
case 'checkRequest':
|
||||||
this.setState({ deployState: 'Waiting for confirmation of the transaction in the Parity Secure Signer' });
|
this.setState({
|
||||||
|
deployState:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.state.waitSigner'
|
||||||
|
defaultMessage='Waiting for confirmation of the transaction in the Parity Secure Signer' />
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
|
|
||||||
case 'getTransactionReceipt':
|
case 'getTransactionReceipt':
|
||||||
this.setState({ deployState: 'Waiting for the contract deployment transaction receipt', txhash: data.txhash });
|
this.setState({
|
||||||
|
txhash: data.txhash,
|
||||||
|
deployState:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.state.waitReceipt'
|
||||||
|
defaultMessage='Waiting for the contract deployment transaction receipt' />
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
|
|
||||||
case 'hasReceipt':
|
case 'hasReceipt':
|
||||||
case 'getCode':
|
case 'getCode':
|
||||||
this.setState({ deployState: 'Validating the deployed contract code' });
|
this.setState({
|
||||||
|
deployState:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.state.validatingCode'
|
||||||
|
defaultMessage='Validating the deployed contract code' />
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
|
|
||||||
case 'completed':
|
case 'completed':
|
||||||
this.setState({ deployState: 'The contract deployment has been completed' });
|
this.setState({
|
||||||
|
deployState:
|
||||||
|
<FormattedMessage
|
||||||
|
id='deployContract.state.completed'
|
||||||
|
defaultMessage='The contract deployment has been completed' />
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
console.error('Unknow contract deployment state', data);
|
console.error('Unknown contract deployment state', data);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -404,11 +556,15 @@ function mapStateToProps (initState, initProps) {
|
|||||||
|
|
||||||
return (state) => {
|
return (state) => {
|
||||||
const balances = pick(state.balances.balances, fromAddresses);
|
const balances = pick(state.balances.balances, fromAddresses);
|
||||||
return { balances };
|
const { gasLimit } = state.nodeStatus;
|
||||||
|
|
||||||
|
return {
|
||||||
|
balances,
|
||||||
|
gasLimit
|
||||||
|
};
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(
|
export default connect(
|
||||||
mapStateToProps
|
mapStateToProps
|
||||||
)(DeployContract);
|
)(DeployContract);
|
||||||
|
|
||||||
|
54
js/src/modals/DeployContract/deployContract.spec.js
Normal file
54
js/src/modals/DeployContract/deployContract.spec.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
// Copyright 2015, 2016 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 BigNumber from 'bignumber.js';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
import React from 'react';
|
||||||
|
import sinon from 'sinon';
|
||||||
|
|
||||||
|
import DeployContract from './';
|
||||||
|
|
||||||
|
const STORE = {
|
||||||
|
dispatch: sinon.stub(),
|
||||||
|
subscribe: sinon.stub(),
|
||||||
|
getState: () => {
|
||||||
|
return {
|
||||||
|
balances: {
|
||||||
|
balances: {}
|
||||||
|
},
|
||||||
|
nodeStatus: {
|
||||||
|
gasLimit: new BigNumber(0x12345)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderShallow () {
|
||||||
|
return shallow(
|
||||||
|
<DeployContract
|
||||||
|
accounts={ {} }
|
||||||
|
store={ STORE }
|
||||||
|
onClose={ sinon.stub() } />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('modals/DeployContract', () => {
|
||||||
|
describe('rendering', () => {
|
||||||
|
it('renders defaults', () => {
|
||||||
|
expect(renderShallow()).to.be.ok;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -55,7 +55,6 @@ export default class DetailsStep extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Form>
|
<Form>
|
||||||
{ this.renderWarning() }
|
|
||||||
<AddressSelect
|
<AddressSelect
|
||||||
accounts={ accounts }
|
accounts={ accounts }
|
||||||
balances={ balances }
|
balances={ balances }
|
||||||
@ -197,20 +196,6 @@ export default class DetailsStep extends Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
renderWarning () {
|
|
||||||
const { warning } = this.props;
|
|
||||||
|
|
||||||
if (!warning) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={ styles.warning }>
|
|
||||||
{ warning }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onFuncChange = (event, index, signature) => {
|
onFuncChange = (event, index, signature) => {
|
||||||
const { contract, onFuncChange } = this.props;
|
const { contract, onFuncChange } = this.props;
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@ import { connect } from 'react-redux';
|
|||||||
import { bindActionCreators } from 'redux';
|
import { bindActionCreators } from 'redux';
|
||||||
|
|
||||||
import { toWei } from '~/api/util/wei';
|
import { toWei } from '~/api/util/wei';
|
||||||
import { BusyStep, Button, CompletedStep, GasPriceEditor, IdentityIcon, Modal, TxHash } from '~/ui';
|
import { BusyStep, Button, CompletedStep, GasPriceEditor, IdentityIcon, Modal, TxHash, Warning } from '~/ui';
|
||||||
import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
|
import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
|
||||||
import { MAX_GAS_ESTIMATION } from '~/util/constants';
|
import { MAX_GAS_ESTIMATION } from '~/util/constants';
|
||||||
import { validateAddress, validateUint } from '~/util/validation';
|
import { validateAddress, validateUint } from '~/util/validation';
|
||||||
@ -131,12 +131,31 @@ class ExecuteContract extends Component {
|
|||||||
current={ step }
|
current={ step }
|
||||||
steps={ steps }
|
steps={ steps }
|
||||||
visible
|
visible
|
||||||
waiting={ advancedOptions ? [STEP_BUSY] : [STEP_BUSY_OR_ADVANCED] }>
|
waiting={
|
||||||
|
advancedOptions
|
||||||
|
? [STEP_BUSY]
|
||||||
|
: [STEP_BUSY_OR_ADVANCED]
|
||||||
|
}>
|
||||||
|
{ this.renderExceptionWarning() }
|
||||||
{ this.renderStep() }
|
{ this.renderStep() }
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderExceptionWarning () {
|
||||||
|
const { gasEdit, step } = this.state;
|
||||||
|
const { errorEstimated } = this.gasStore;
|
||||||
|
|
||||||
|
if (!errorEstimated || step >= (gasEdit ? STEP_BUSY : STEP_BUSY_OR_ADVANCED)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Warning
|
||||||
|
warning={ errorEstimated } />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
renderDialogActions () {
|
renderDialogActions () {
|
||||||
const { onClose, fromAddress } = this.props;
|
const { onClose, fromAddress } = this.props;
|
||||||
const { advancedOptions, sending, step, fromAddressError, minBlockError, valuesError } = this.state;
|
const { advancedOptions, sending, step, fromAddressError, minBlockError, valuesError } = this.state;
|
||||||
@ -221,7 +240,6 @@ class ExecuteContract extends Component {
|
|||||||
renderStep () {
|
renderStep () {
|
||||||
const { onFromAddressChange } = this.props;
|
const { onFromAddressChange } = this.props;
|
||||||
const { advancedOptions, step, busyState, minBlock, minBlockError, txhash, rejected } = this.state;
|
const { advancedOptions, step, busyState, minBlock, minBlockError, txhash, rejected } = this.state;
|
||||||
const { errorEstimated } = this.gasStore;
|
|
||||||
|
|
||||||
if (rejected) {
|
if (rejected) {
|
||||||
return (
|
return (
|
||||||
@ -244,7 +262,6 @@ class ExecuteContract extends Component {
|
|||||||
<DetailsStep
|
<DetailsStep
|
||||||
{ ...this.props }
|
{ ...this.props }
|
||||||
{ ...this.state }
|
{ ...this.state }
|
||||||
warning={ errorEstimated }
|
|
||||||
onAmountChange={ this.onAmountChange }
|
onAmountChange={ this.onAmountChange }
|
||||||
onFromAddressChange={ onFromAddressChange }
|
onFromAddressChange={ onFromAddressChange }
|
||||||
onFuncChange={ this.onFuncChange }
|
onFuncChange={ this.onFuncChange }
|
||||||
|
@ -20,7 +20,7 @@ import { bindActionCreators } from 'redux';
|
|||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { pick } from 'lodash';
|
import { pick } from 'lodash';
|
||||||
|
|
||||||
import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash, Input } from '~/ui';
|
import { BusyStep, CompletedStep, Button, IdentityIcon, Input, Modal, TxHash, Warning } from '~/ui';
|
||||||
import { newError } from '~/ui/Errors/actions';
|
import { newError } from '~/ui/Errors/actions';
|
||||||
import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
|
import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
|
||||||
import { nullableProptype } from '~/util/proptypes';
|
import { nullableProptype } from '~/util/proptypes';
|
||||||
@ -31,6 +31,10 @@ import Extras from './Extras';
|
|||||||
import TransferStore from './store';
|
import TransferStore from './store';
|
||||||
import styles from './transfer.css';
|
import styles from './transfer.css';
|
||||||
|
|
||||||
|
const STEP_DETAILS = 0;
|
||||||
|
const STEP_ADVANCED_OR_BUSY = 1;
|
||||||
|
const STEP_BUSY = 2;
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
class Transfer extends Component {
|
class Transfer extends Component {
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
@ -60,15 +64,33 @@ class Transfer extends Component {
|
|||||||
actions={ this.renderDialogActions() }
|
actions={ this.renderDialogActions() }
|
||||||
current={ stage }
|
current={ stage }
|
||||||
steps={ steps }
|
steps={ steps }
|
||||||
waiting={ extras ? [2] : [1] }
|
waiting={
|
||||||
|
extras
|
||||||
|
? [STEP_BUSY]
|
||||||
|
: [STEP_ADVANCED_OR_BUSY]
|
||||||
|
}
|
||||||
visible
|
visible
|
||||||
>
|
>
|
||||||
{ this.renderWarning() }
|
{ this.renderExceptionWarning() }
|
||||||
{ this.renderPage() }
|
{ this.renderPage() }
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderExceptionWarning () {
|
||||||
|
const { extras, stage } = this.store;
|
||||||
|
const { errorEstimated } = this.store.gasStore;
|
||||||
|
|
||||||
|
if (!errorEstimated || stage >= (extras ? STEP_BUSY : STEP_ADVANCED_OR_BUSY)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Warning
|
||||||
|
warning={ errorEstimated } />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
renderAccount () {
|
renderAccount () {
|
||||||
const { account } = this.props;
|
const { account } = this.props;
|
||||||
|
|
||||||
@ -95,9 +117,9 @@ class Transfer extends Component {
|
|||||||
renderPage () {
|
renderPage () {
|
||||||
const { extras, stage } = this.store;
|
const { extras, stage } = this.store;
|
||||||
|
|
||||||
if (stage === 0) {
|
if (stage === STEP_DETAILS) {
|
||||||
return this.renderDetailsPage();
|
return this.renderDetailsPage();
|
||||||
} else if (stage === 1 && extras) {
|
} else if (stage === STEP_ADVANCED_OR_BUSY && extras) {
|
||||||
return this.renderExtrasPage();
|
return this.renderExtrasPage();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -251,20 +273,6 @@ class Transfer extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
renderWarning () {
|
|
||||||
const { errorEstimated } = this.store.gasStore;
|
|
||||||
|
|
||||||
if (!errorEstimated) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={ styles.warning }>
|
|
||||||
{ errorEstimated }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClose = () => {
|
handleClose = () => {
|
||||||
const { onClose } = this.props;
|
const { onClose } = this.props;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user