From 924cc1fcf7de1896ac09bbe7a400d5ff5df0b50d Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Thu, 19 Apr 2018 01:03:51 -0230 Subject: Move setAccountLabel into PreferencesController --- ui/app/components/modals/account-details-modal.js | 6 +++--- ui/app/components/modals/edit-account-name-modal.js | 8 ++++---- ui/app/components/modals/new-account-modal.js | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index d9885daf5..5607cf051 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -25,7 +25,7 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) }, hideModal: () => dispatch(actions.hideModal()), - saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)), + setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)), } } @@ -49,7 +49,7 @@ AccountDetailsModal.prototype.render = function () { selectedIdentity, network, showExportPrivateKeyModal, - saveAccountLabel, + setAccountLabel, } = this.props const { name, address } = selectedIdentity @@ -57,7 +57,7 @@ AccountDetailsModal.prototype.render = function () { h(EditableLabel, { className: 'account-modal__name', defaultValue: name, - onSubmit: label => saveAccountLabel(address, label), + onSubmit: label => setAccountLabel(address, label), }), h(QrView, { diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index c79645dbf..5681a3cad 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -18,8 +18,8 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, - saveAccountLabel: (account, label) => { - dispatch(actions.saveAccountLabel(account, label)) + setAccountLabel: (account, label) => { + dispatch(actions.setAccountLabel(account, label)) }, } } @@ -41,7 +41,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameMod EditAccountNameModal.prototype.render = function () { - const { hideModal, saveAccountLabel, identity } = this.props + const { hideModal, setAccountLabel, identity } = this.props return h('div', {}, [ h('div.flex-column.edit-account-name-modal-content', { @@ -69,7 +69,7 @@ EditAccountNameModal.prototype.render = function () { h('button.btn-clear.edit-account-name-modal-save-button.allcaps', { onClick: () => { if (this.state.inputText.length !== 0) { - saveAccountLabel(identity.address, this.state.inputText) + setAccountLabel(identity.address, this.state.inputText) hideModal() } }, diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 0635b3f72..a66a3ed4a 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -95,7 +95,7 @@ const mapDispatchToProps = dispatch => { dispatch(actions.addNewAccount()) .then((newAccountAddress) => { if (newAccountName) { - dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) + dispatch(actions.setAccountLabel(newAccountAddress, newAccountName)) } dispatch(actions.hideModal()) }) -- cgit From 41e38fe5530bce1fd7d19060774179a215087fac Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 29 May 2018 10:23:06 -0700 Subject: Add notification for dropped retry transactions (#4363) --- ui/app/components/modals/index.scss | 1 + ui/app/components/modals/modal.js | 35 +++++++++++++++- .../modals/transaction-confirmed/index.js | 2 + .../modals/transaction-confirmed/index.scss | 21 ++++++++++ .../transaction-confirmed.component.js | 46 ++++++++++++++++++++++ .../transaction-confirmed.container.js | 20 ++++++++++ 6 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 ui/app/components/modals/index.scss create mode 100644 ui/app/components/modals/transaction-confirmed/index.js create mode 100644 ui/app/components/modals/transaction-confirmed/index.scss create mode 100644 ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js create mode 100644 ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss new file mode 100644 index 000000000..ec6207f7e --- /dev/null +++ b/ui/app/components/modals/index.scss @@ -0,0 +1 @@ +@import './transaction-confirmed/index'; diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 43dcd20ae..841189277 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -20,6 +20,7 @@ const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') const ConfirmResetAccount = require('./notification-modals/confirm-reset-account') +const TransactionConfirmed = require('./transaction-confirmed') const accountModalStyle = { mobileModalStyle: { @@ -265,6 +266,37 @@ const MODALS = { }, }, + TRANSACTION_CONFIRMED: { + disableBackdropClick: true, + contents: [ + h(TransactionConfirmed, {}, []), + ], + mobileModalStyle: { + width: '100%', + height: '100%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', + top: '0', + display: 'flex', + }, + laptopModalStyle: { + width: '344px', + transform: 'translate3d(-50%, 0, 0px)', + top: '15%', + border: '1px solid #CCCFD1', + borderRadius: '8px', + backgroundColor: '#FFFFFF', + boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)', + }, + contentStyle: { + borderRadius: '8px', + height: '100%', + }, + }, + DEFAULT: { contents: [], mobileModalStyle: {}, @@ -306,7 +338,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) Modal.prototype.render = function () { const modal = MODALS[this.props.modalState.name || 'DEFAULT'] - const children = modal.contents + const { contents: children, disableBackdropClick = false } = modal const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] const contentStyle = modal.contentStyle || {} @@ -326,6 +358,7 @@ Modal.prototype.render = function () { modalStyle, contentStyle, backdropStyle: BACKDROPSTYLE, + closeOnClick: !disableBackdropClick, }, children, ) diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js new file mode 100644 index 000000000..c8db91388 --- /dev/null +++ b/ui/app/components/modals/transaction-confirmed/index.js @@ -0,0 +1,2 @@ +import TransactionConfirmed from './transaction-confirmed.container' +module.exports = TransactionConfirmed diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss new file mode 100644 index 000000000..f8cd1f212 --- /dev/null +++ b/ui/app/components/modals/transaction-confirmed/index.scss @@ -0,0 +1,21 @@ +.transaction-confirmed { + display: flex; + flex-direction: column; + align-items: center; + padding: 32px; + + &__title { + font-size: 2rem; + padding: 16px 0; + } + + &__description { + text-align: center; + font-size: .875rem; + line-height: 1.5rem; + } + + @media screen and (max-width: 575px) { + justify-content: center; + } +} diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js new file mode 100644 index 000000000..8d3b288ae --- /dev/null +++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Button from '../../button' + +class TransactionConfirmed extends Component { + render () { + const { t } = this.context + + return ( +
+
+ +
+ { `${t('confirmed')}!` } +
+
+ { t('initialTransactionConfirmed') } +
+
+
+ +
+
+ ) + } +} + +TransactionConfirmed.propTypes = { + hideModal: PropTypes.func.isRequired, + onHide: PropTypes.func.isRequired, +} + +TransactionConfirmed.contextTypes = { + t: PropTypes.func, +} + +export default TransactionConfirmed diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js new file mode 100644 index 000000000..63872f7f2 --- /dev/null +++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js @@ -0,0 +1,20 @@ +import { connect } from 'react-redux' +import TransactionConfirmed from './transaction-confirmed.component' + +const { hideModal } = require('../../../actions') + +const mapStateToProps = state => { + const { appState: { modal: { modalState: { props } } } } = state + const { onHide } = props + return { + onHide, + } +} + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => dispatch(hideModal()), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed) -- cgit