m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Disable Confirm button on subsequent clicks to prevent confirming multiple times

Browse Source
This commit is contained in:
Alexander Tseung 2018-08-03 14:44:57 -07:00
parent e77424ef5a
commit 6d76d4e228
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/app/components/confirm-page-container/confirm-page-container.component.js
View File

@ -43,7 +43,7 @@ export default class ConfirmPageContainer extends Component {
// Footer // Footer
onCancel: PropTypes.func, onCancel: PropTypes.func,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
valid: PropTypes.bool, disabled: PropTypes.bool,
} }
render () { render () {
@ -54,7 +54,7 @@ export default class ConfirmPageContainer extends Component {
fromAddress, fromAddress,
toName, toName,
toAddress, toAddress,
valid, disabled,
errorKey, errorKey,
errorMessage, errorMessage,
contentComponent, contentComponent,
@ -110,7 +110,7 @@ export default class ConfirmPageContainer extends Component {
onSubmit={() => onSubmit()} onSubmit={() => onSubmit()}
submitText={this.context.t('confirm')} submitText={this.context.t('confirm')}
submitButtonType="confirm" submitButtonType="confirm"
disabled={!valid} disabled={disabled}
/> />
</div> </div>
) )

21
ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -71,6 +71,10 @@ export default class ConfirmTransactionBase extends Component {
warning: PropTypes.string, warning: PropTypes.string,
} }
state = {
submitting: false,
}
componentDidUpdate () { componentDidUpdate () {
const { const {
transactionStatus, transactionStatus,
@ -258,15 +262,25 @@ export default class ConfirmTransactionBase extends Component {
handleSubmit () { handleSubmit () {
const { sendTransaction, clearConfirmTransaction, txData, history, onSubmit } = this.props const { sendTransaction, clearConfirmTransaction, txData, history, onSubmit } = this.props
const { submitting } = this.state
if (submitting) {
return
}
this.setState({ submitting: true })
if (onSubmit) { if (onSubmit) {
onSubmit(txData) Promise.resolve(onSubmit(txData))
.then(this.setState({ submitting: false }))
} else { } else {
sendTransaction(txData) sendTransaction(txData)
.then(() => { .then(() => {
clearConfirmTransaction() clearConfirmTransaction()
this.setState({ submitting: false })
history.push(DEFAULT_ROUTE) history.push(DEFAULT_ROUTE)
}) })
.catch(() => this.setState({ submitting: false }))
} }
} }
@ -280,7 +294,7 @@ export default class ConfirmTransactionBase extends Component {
methodData, methodData,
ethTransactionAmount, ethTransactionAmount,
fiatTransactionAmount, fiatTransactionAmount,
valid: propsValid, valid: propsValid = true,
errorMessage, errorMessage,
errorKey: propsErrorKey, errorKey: propsErrorKey,
currentCurrency, currentCurrency,
@ -295,6 +309,7 @@ export default class ConfirmTransactionBase extends Component {
nonce, nonce,
warning, warning,
} = this.props } = this.props
const { submitting } = this.state
const { name } = methodData const { name } = methodData
const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency) const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
@ -320,7 +335,7 @@ export default class ConfirmTransactionBase extends Component {
errorMessage={errorMessage} errorMessage={errorMessage}
errorKey={propsErrorKey || errorKey} errorKey={propsErrorKey || errorKey}
warning={warning} warning={warning}
valid={propsValid || valid} disabled={!propsValid || !valid || submitting}
onEdit={() => this.handleEdit()} onEdit={() => this.handleEdit()}
onCancel={() => this.handleCancel()} onCancel={() => this.handleCancel()}
onSubmit={() => this.handleSubmit()} onSubmit={() => this.handleSubmit()}