diff options
Diffstat (limited to 'ui/app/components/modals')
39 files changed, 722 insertions, 332 deletions
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 0bbabf38d..d22230e32 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -10,6 +10,8 @@ const genAccountLink = require('../../../lib/account-link.js') const QrView = require('../qr-code') const EditableLabel = require('../editable-label') +import Button from '../button' + function mapStateToProps (state) { return { network: state.metamask.network, @@ -81,12 +83,17 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), - h('button.btn-primary.account-modal__button', { + h(Button, { + type: 'primary', + className: 'account-modal__button', onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, this.context.t('etherscanView')), // Holding on redesign for Export Private Key functionality - exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', { + + exportPrivateKeyFeatureEnabled ? h(Button, { + type: 'primary', + className: 'account-modal__button', onClick: () => showExportPrivateKeyModal(), }, this.context.t('exportPrivateKey')) : null, diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js new file mode 100644 index 000000000..b082db1d0 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js @@ -0,0 +1,29 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import CurrencyDisplay from '../../../currency-display' +import { ETH } from '../../../../constants/common' + +export default class CancelTransaction extends PureComponent { + static propTypes = { + value: PropTypes.string, + } + + render () { + const { value } = this.props + + return ( + <div className="cancel-transaction-gas-fee"> + <CurrencyDisplay + className="cancel-transaction-gas-fee__eth" + currency={ETH} + value={value} + numberOfDecimals={6} + /> + <CurrencyDisplay + className="cancel-transaction-gas-fee__fiat" + value={value} + /> + </div> + ) + } +} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js new file mode 100644 index 000000000..1a9ae2e07 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js @@ -0,0 +1 @@ +export { default } from './cancel-transaction-gas-fee.component' diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss new file mode 100644 index 000000000..ce81dd448 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss @@ -0,0 +1,17 @@ +.cancel-transaction-gas-fee { + background: #F1F4F9; + padding: 16px; + display: flex; + flex-direction: column; + align-items: center; + padding: 12px; + + &__eth { + font-size: 1.5rem; + font-weight: 500; + } + + &__fiat { + font-size: .75rem; + } +} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js new file mode 100644 index 000000000..994c2a577 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js @@ -0,0 +1,27 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import CancelTransactionGasFee from '../cancel-transaction-gas-fee.component' +import CurrencyDisplay from '../../../../currency-display' + +describe('CancelTransactionGasFee Component', () => { + it('should render', () => { + const wrapper = shallow( + <CancelTransactionGasFee + value="0x3b9aca00" + /> + ) + + assert.ok(wrapper) + assert.equal(wrapper.find(CurrencyDisplay).length, 2) + const ethDisplay = wrapper.find(CurrencyDisplay).at(0) + const fiatDisplay = wrapper.find(CurrencyDisplay).at(1) + + assert.equal(ethDisplay.props().value, '0x3b9aca00') + assert.equal(ethDisplay.props().currency, 'ETH') + assert.equal(ethDisplay.props().className, 'cancel-transaction-gas-fee__eth') + + assert.equal(fiatDisplay.props().value, '0x3b9aca00') + assert.equal(fiatDisplay.props().className, 'cancel-transaction-gas-fee__fiat') + }) +}) diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js new file mode 100644 index 000000000..8b00cb9b9 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js @@ -0,0 +1,68 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Modal from '../../modal' +import CancelTransactionGasFee from './cancel-transaction-gas-fee' +import { SUBMITTED_STATUS } from '../../../constants/transactions' + +export default class CancelTransaction extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + createCancelTransaction: PropTypes.func, + hideModal: PropTypes.func, + showTransactionConfirmedModal: PropTypes.func, + transactionStatus: PropTypes.string, + newGasFee: PropTypes.string, + } + + componentDidUpdate () { + const { transactionStatus, showTransactionConfirmedModal } = this.props + + if (transactionStatus !== SUBMITTED_STATUS) { + showTransactionConfirmedModal() + return + } + } + + handleSubmit = async () => { + const { createCancelTransaction, hideModal } = this.props + + await createCancelTransaction() + hideModal() + } + + handleCancel = () => { + this.props.hideModal() + } + + render () { + const { t } = this.context + const { newGasFee } = this.props + + return ( + <Modal + headerText={t('attemptToCancel')} + onClose={this.handleCancel} + onSubmit={this.handleSubmit} + onCancel={this.handleCancel} + submitText={t('yesLetsTry')} + cancelText={t('nevermind')} + submitType="secondary" + > + <div> + <div className="cancel-transaction__title"> + { t('cancellationGasFee') } + </div> + <div className="cancel-transaction__cancel-transaction-gas-fee-container"> + <CancelTransactionGasFee value={newGasFee} /> + </div> + <div className="cancel-transaction__description"> + { t('attemptToCancelDescription') } + </div> + </div> + </Modal> + ) + } +} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js new file mode 100644 index 000000000..eede8b1ee --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js @@ -0,0 +1,62 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import ethUtil from 'ethereumjs-util' +import { multiplyCurrencies } from '../../../conversion-util' +import withModalProps from '../../../higher-order-components/with-modal-props' +import CancelTransaction from './cancel-transaction.component' +import { showModal, createCancelTransaction } from '../../../actions' +import { getHexGasTotal } from '../../../helpers/confirm-transaction/util' + +const mapStateToProps = (state, ownProps) => { + const { metamask } = state + const { transactionId, originalGasPrice } = ownProps + const { selectedAddressTxList } = metamask + const transaction = selectedAddressTxList.find(({ id }) => id === transactionId) + const transactionStatus = transaction ? transaction.status : '' + + const defaultNewGasPrice = ethUtil.addHexPrefix( + multiplyCurrencies(originalGasPrice, 1.1, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 10, + }) + ) + + const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' }) + + return { + transactionId, + transactionStatus, + originalGasPrice, + newGasFee, + } +} + +const mapDispatchToProps = dispatch => { + return { + createCancelTransaction: txId => dispatch(createCancelTransaction(txId)), + showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })), + } +} + +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const { transactionId, ...restStateProps } = stateProps + const { + createCancelTransaction: dispatchCreateCancelTransaction, + ...restDispatchProps + } = dispatchProps + + return { + ...restStateProps, + ...restDispatchProps, + ...ownProps, + createCancelTransaction: newGasPrice => { + return dispatchCreateCancelTransaction(transactionId, newGasPrice) + }, + } +} + +export default compose( + withModalProps, + connect(mapStateToProps, mapDispatchToProps, mergeProps), +)(CancelTransaction) diff --git a/ui/app/components/modals/cancel-transaction/index.js b/ui/app/components/modals/cancel-transaction/index.js new file mode 100644 index 000000000..7abc871ee --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/index.js @@ -0,0 +1 @@ +export { default } from './cancel-transaction.container' diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss new file mode 100644 index 000000000..62e8e36fd --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/index.scss @@ -0,0 +1,18 @@ +@import './cancel-transaction-gas-fee/index'; + +.cancel-transaction { + &__title { + font-weight: 500; + padding-bottom: 16px; + text-align: center; + } + + &__description { + text-align: center; + font-size: .875rem; + } + + &__cancel-transaction-gas-fee-container { + margin-bottom: 16px; + } +}
\ No newline at end of file diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js new file mode 100644 index 000000000..858fb01a8 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js @@ -0,0 +1,56 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import CancelTransaction from '../cancel-transaction.component' +import CancelTransactionGasFee from '../cancel-transaction-gas-fee' +import Modal from '../../../modal' + +describe('CancelTransaction Component', () => { + const t = key => key + + it('should render a CancelTransaction modal', () => { + const wrapper = shallow( + <CancelTransaction + newGasFee="0x1319718a5000" + />, + { context: { t }} + ) + + assert.ok(wrapper) + assert.equal(wrapper.find(Modal).length, 1) + assert.equal(wrapper.find(CancelTransactionGasFee).length, 1) + assert.equal(wrapper.find(CancelTransactionGasFee).props().value, '0x1319718a5000') + assert.equal(wrapper.find('.cancel-transaction__title').text(), 'cancellationGasFee') + assert.equal(wrapper.find('.cancel-transaction__description').text(), 'attemptToCancelDescription') + }) + + it('should pass the correct props to the Modal component', async () => { + const createCancelTransactionSpy = sinon.stub().callsFake(() => Promise.resolve()) + const hideModalSpy = sinon.spy() + + const wrapper = shallow( + <CancelTransaction + defaultNewGasPrice="0x3b9aca00" + createCancelTransaction={createCancelTransactionSpy} + hideModal={hideModalSpy} + />, + { context: { t }} + ) + + assert.equal(wrapper.find(Modal).length, 1) + const modalProps = wrapper.find(Modal).props() + + assert.equal(modalProps.headerText, 'attemptToCancel') + assert.equal(modalProps.submitText, 'yesLetsTry') + assert.equal(modalProps.cancelText, 'nevermind') + + assert.equal(createCancelTransactionSpy.callCount, 0) + assert.equal(hideModalSpy.callCount, 0) + await modalProps.onSubmit() + assert.equal(createCancelTransactionSpy.callCount, 1) + assert.equal(hideModalSpy.callCount, 1) + modalProps.onCancel() + assert.equal(hideModalSpy.callCount, 2) + }) +}) diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js index 5a9f0f289..195c55421 100644 --- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js +++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js @@ -1,11 +1,11 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import Button from '../../button' +import Modal from '../../modal' import { addressSummary } from '../../../util' import Identicon from '../../identicon' import genAccountLink from '../../../../lib/account-link' -class ConfirmRemoveAccount extends Component { +export default class ConfirmRemoveAccount extends Component { static propTypes = { hideModal: PropTypes.func.isRequired, removeAccount: PropTypes.func.isRequired, @@ -17,30 +17,34 @@ class ConfirmRemoveAccount extends Component { t: PropTypes.func, } - handleRemove () { + handleRemove = () => { this.props.removeAccount(this.props.identity.address) .then(() => this.props.hideModal()) } + handleCancel = () => { + this.props.hideModal() + } + renderSelectedAccount () { const { identity } = this.props return ( - <div className="modal-container__account"> - <div className="modal-container__account__identicon"> + <div className="confirm-remove-account__account"> + <div className="confirm-remove-account__account__identicon"> <Identicon - address={identity.address} - diameter={32} + address={identity.address} + diameter={32} /> </div> - <div className="modal-container__account__name"> - <span className="modal-container__account__label">Name</span> - <span className="account_value">{identity.name}</span> + <div className="confirm-remove-account__account__name"> + <span className="confirm-remove-account__account__label">Name</span> + <span className="account_value">{identity.name}</span> </div> - <div className="modal-container__account__address"> - <span className="modal-container__account__label">Public Address</span> - <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span> + <div className="confirm-remove-account__account__address"> + <span className="confirm-remove-account__account__label">Public Address</span> + <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span> </div> - <div className="modal-container__account__link"> + <div className="confirm-remove-account__account__link"> <a className="" href={genAccountLink(identity.address, this.props.network)} @@ -58,36 +62,28 @@ class ConfirmRemoveAccount extends Component { const { t } = this.context return ( - <div className="modal-container"> - <div className="modal-container__content"> - <div className="modal-container__title"> - { `${t('removeAccount')}` }? - </div> - { this.renderSelectedAccount() } - <div className="modal-container__description"> + <Modal + headerText={`${t('removeAccount')}?`} + onClose={this.handleCancel} + onSubmit={this.handleRemove} + onCancel={this.handleCancel} + submitText={t('remove')} + cancelText={t('nevermind')} + submitType="secondary" + > + <div> + { this.renderSelectedAccount() } + <div className="confirm-remove-account__description"> { t('removeAccountDescription') } - <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a> + <a + className="confirm-remove-account__link" + rel="noopener noreferrer" + target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"> + { t('learnMore') } + </a> </div> </div> - <div className="modal-container__footer"> - <Button - type="default" - className="modal-container__footer-button" - onClick={() => this.props.hideModal()} - > - { t('nevermind') } - </Button> - <Button - type="secondary" - className="modal-container__footer-button" - onClick={() => this.handleRemove()} - > - { t('remove') } - </Button> - </div> - </div> + </Modal> ) } } - -export default ConfirmRemoveAccount diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js index 4b194c995..45c6654ab 100644 --- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js +++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js @@ -1,20 +1,22 @@ import { connect } from 'react-redux' +import { compose } from 'recompose' import ConfirmRemoveAccount from './confirm-remove-account.component' - -const { hideModal, removeAccount } = require('../../../actions') +import withModalProps from '../../../higher-order-components/with-modal-props' +import { removeAccount } from '../../../actions' const mapStateToProps = state => { return { - identity: state.appState.modal.modalState.props.identity, network: state.metamask.network, } } const mapDispatchToProps = dispatch => { return { - hideModal: () => dispatch(hideModal()), removeAccount: (address) => dispatch(removeAccount(address)), } } -export default connect(mapStateToProps, mapDispatchToProps)(ConfirmRemoveAccount) +export default compose( + withModalProps, + connect(mapStateToProps, mapDispatchToProps) +)(ConfirmRemoveAccount) diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/modals/confirm-remove-account/index.js index 9763fbe05..ecb5f7790 100644 --- a/ui/app/components/modals/confirm-remove-account/index.js +++ b/ui/app/components/modals/confirm-remove-account/index.js @@ -1,2 +1 @@ -import ConfirmRemoveAccount from './confirm-remove-account.container' -module.exports = ConfirmRemoveAccount +export { default } from './confirm-remove-account.container' diff --git a/ui/app/components/modals/confirm-remove-account/index.scss b/ui/app/components/modals/confirm-remove-account/index.scss new file mode 100644 index 000000000..3be3a1967 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/index.scss @@ -0,0 +1,58 @@ +.confirm-remove-account { + &__description { + text-align: center; + font-size: .875rem; + } + + &__account { + border: 1px solid #b7b7b7; + border-radius: 4px; + padding: 10px; + display: flex; + margin-top: 10px; + margin-bottom: 20px; + width: 100%; + + &__identicon { + margin-right: 10px; + } + + &__name, + &__address { + margin-right: 10px; + font-size: 14px; + } + + &__name { + width: 100px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__label { + font-size: 11px; + display: block; + color: #9b9b9b; + } + + &__link { + margin-top: 14px; + + img { + width: 15px; + height: 15px; + } + } + + @media screen and (max-width: 575px) { + &__name { + width: 90px; + } + } + } + + &__link { + color: #2f9ae0; + } +}
\ No newline at end of file diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js index 14a4da62a..f1a4542ac 100644 --- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js +++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js @@ -1,8 +1,8 @@ -import React, { Component } from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Button from '../../button' +import Modal, { ModalContent } from '../../modal' -class ConfirmResetAccount extends Component { +export default class ConfirmResetAccount extends PureComponent { static propTypes = { hideModal: PropTypes.func.isRequired, resetAccount: PropTypes.func.isRequired, @@ -12,7 +12,7 @@ class ConfirmResetAccount extends Component { t: PropTypes.func, } - handleReset () { + handleReset = () => { this.props.resetAccount() .then(() => this.props.hideModal()) } @@ -21,34 +21,18 @@ class ConfirmResetAccount extends Component { const { t } = this.context return ( - <div className="modal-container"> - <div className="modal-container__content"> - <div className="modal-container__title"> - { `${t('resetAccount')}?` } - </div> - <div className="modal-container__description"> - { t('resetAccountDescription') } - </div> - </div> - <div className="modal-container__footer"> - <Button - type="default" - className="modal-container__footer-button" - onClick={() => this.props.hideModal()} - > - { t('nevermind') } - </Button> - <Button - type="secondary" - className="modal-container__footer-button" - onClick={() => this.handleReset()} - > - { t('reset') } - </Button> - </div> - </div> + <Modal + onSubmit={this.handleReset} + onCancel={() => this.props.hideModal()} + submitText={t('reset')} + cancelText={t('nevermind')} + submitType="secondary" + > + <ModalContent + title={`${t('resetAccount')}?`} + description={t('resetAccountDescription')} + /> + </Modal> ) } } - -export default ConfirmResetAccount diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js index 9630a5593..c8a7b8478 100644 --- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js +++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js @@ -1,13 +1,16 @@ import { connect } from 'react-redux' +import { compose } from 'recompose' +import withModalProps from '../../../higher-order-components/with-modal-props' import ConfirmResetAccount from './confirm-reset-account.component' - -const { hideModal, resetAccount } = require('../../../actions') +import { resetAccount } from '../../../actions' const mapDispatchToProps = dispatch => { return { - hideModal: () => dispatch(hideModal()), resetAccount: () => dispatch(resetAccount()), } } -export default connect(null, mapDispatchToProps)(ConfirmResetAccount) +export default compose( + withModalProps, + connect(null, mapDispatchToProps) +)(ConfirmResetAccount) diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/modals/confirm-reset-account/index.js index c812ffc55..ca4d9c5bf 100644 --- a/ui/app/components/modals/confirm-reset-account/index.js +++ b/ui/app/components/modals/confirm-reset-account/index.js @@ -1,2 +1 @@ -import ConfirmResetAccount from './confirm-reset-account.container' -module.exports = ConfirmResetAccount +export { default } from './confirm-reset-account.container' diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js index 0337c5413..3f526bd43 100644 --- a/ui/app/components/modals/customize-gas/customize-gas.component.js +++ b/ui/app/components/modals/customize-gas/customize-gas.component.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import GasModalCard from '../../customize-gas-modal/gas-modal-card' import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants' +import Button from '../../button' import { getDecimalGasLimit, @@ -116,21 +117,23 @@ export default class CustomizeGas extends Component { { t('revert') } </div> <div className="customize-gas__buttons"> - <button - className="btn-default customize-gas__cancel" + <Button + type="default" + className="customize-gas__cancel" onClick={() => hideModal()} style={{ marginRight: '10px' }} > { t('cancel') } - </button> - <button - className="btn-primary customize-gas__save" + </Button> + <Button + type="primary" + className="customize-gas__save" onClick={() => this.handleSave()} style={{ marginRight: '10px' }} disabled={!valid} > { t('save') } - </button> + </Button> </div> </div> </div> diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 2daa7fa1d..09137d39a 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -7,6 +7,8 @@ const actions = require('../../actions') const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util') const ShapeshiftForm = require('../shapeshift-form') +import Button from '../button' + let DIRECT_DEPOSIT_ROW_TITLE let DIRECT_DEPOSIT_ROW_TEXT let COINBASE_ROW_TITLE @@ -109,7 +111,10 @@ DepositEtherModal.prototype.renderRow = function ({ ]), !hideButton && h('div.deposit-ether-modal__buy-row__button', [ - h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', { + h(Button, { + type: 'primary', + className: 'deposit-ether-modal__deposit-button', + large: true, onClick: onButtonClick, }, [buttonLabel]), ]), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 60a416304..d3e3c9a56 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -11,6 +11,7 @@ const { getSelectedIdentity } = require('../../selectors') const ReadOnlyInput = require('../readonly-input') const copyToClipboard = require('copy-to-clipboard') const { checksumAddress } = require('../../util') +import Button from '../button' function mapStateToPropsFactory () { let selectedIdentity = null @@ -97,24 +98,31 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { }) } -ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) { - return h('button', { - className, - onClick, - }, label) -} - ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { return h('div.export-private-key-buttons', {}, [ - !privateKey && this.renderButton( - 'btn-default btn--large export-private-key__button export-private-key__button--cancel', - () => hideModal(), - 'Cancel' - ), + !privateKey && h(Button, { + type: 'default', + large: true, + className: 'export-private-key__button export-private-key__button--cancel', + onClick: () => hideModal(), + }, this.context.t('cancel')), (privateKey - ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done')) - : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm')) + ? ( + h(Button, { + type: 'primary', + large: true, + className: 'export-private-key__button', + onClick: () => hideModal(), + }, this.context.t('done')) + ) : ( + h(Button, { + type: 'primary', + large: true, + className: 'export-private-key__button', + onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address), + }, this.context.t('confirm')) + ) ), ]) diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index 0acccf172..45453a582 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -1,108 +1,9 @@ -@import './customize-gas/index'; - -@import './qr-scanner/index'; - -.modal-container { - width: 100%; - height: 100%; - background-color: #fff; - display: flex; - flex-flow: column; - border-radius: 8px; - - &__title { - font-size: 1.5rem; - font-weight: 500; - padding: 16px 0; - text-align: center; - } - - &__description { - text-align: center; - font-size: .875rem; - } - - &__account { - border: 1px solid #b7b7b7; - border-radius: 4px; - padding: 10px; - display: flex; - margin-top: 10px; - margin-bottom: 20px; - width: 100%; - - &__identicon { - margin-right: 10px; - } - - &__name, - &__address { - margin-right: 10px; - font-size: 14px; - } +@import './cancel-transaction/index'; - &__name { - width: 100px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +@import './confirm-remove-account/index'; - &__label { - font-size: 11px; - display: block; - color: #9b9b9b; - } - - &__link { - margin-top: 14px; - - img { - width: 15px; - height: 15px; - } - } - - @media screen and (max-width: 575px) { - &__name { - width: 90px; - } - } - } - - &__link { - color: #2f9ae0; - } - - &__content { - overflow-y: auto; - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - padding: 32px; - - @media screen and (max-width: 575px) { - justify-content: center; - padding: 28px 20px; - } - } - - &__footer { - display: flex; - flex-flow: row; - justify-content: center; - border-top: 1px solid #d2d8dd; - padding: 16px; - flex: 0 0 auto; +@import './customize-gas/index'; - &-button { - min-width: 0; - margin-right: 16px; +@import './qr-scanner/index'; - &:last-of-type { - margin-right: 0; - } - } - } -} +@import './transaction-confirmed/index'; diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 5dda50e52..15ca9deaa 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -19,14 +19,16 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') -const ConfirmResetAccount = require('./confirm-reset-account') -const ConfirmRemoveAccount = require('./confirm-remove-account') const QRScanner = require('./qr-scanner') -const TransactionConfirmed = require('./transaction-confirmed') -const WelcomeBeta = require('./welcome-beta') -const Notification = require('./notification') +import ConfirmRemoveAccount from './confirm-remove-account' +import ConfirmResetAccount from './confirm-reset-account' +import TransactionConfirmed from './transaction-confirmed' import ConfirmCustomizeGasModal from './customize-gas' +import CancelTransaction from './cancel-transaction' +import WelcomeBeta from './welcome-beta' +import TransactionDetails from './transaction-details' +import RejectTransactions from './reject-transactions' const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', @@ -199,11 +201,7 @@ const MODALS = { }, BETA_UI_NOTIFICATION_MODAL: { - contents: [ - h(Notification, [ - h(WelcomeBeta), - ]), - ], + contents: h(WelcomeBeta), mobileModalStyle: { ...modalContainerMobileStyle, }, @@ -307,9 +305,7 @@ const MODALS = { }, CONFIRM_CUSTOMIZE_GAS: { - contents: [ - h(ConfirmCustomizeGasModal), - ], + contents: h(ConfirmCustomizeGasModal), mobileModalStyle: { width: '100vw', height: '100vh', @@ -332,11 +328,7 @@ const MODALS = { TRANSACTION_CONFIRMED: { disableBackdropClick: true, - contents: [ - h(Notification, [ - h(TransactionConfirmed), - ]), - ], + contents: h(TransactionConfirmed), mobileModalStyle: { ...modalContainerMobileStyle, }, @@ -347,6 +339,7 @@ const MODALS = { borderRadius: '8px', }, }, + QR_SCANNER: { contents: h(QRScanner), mobileModalStyle: { @@ -360,6 +353,45 @@ const MODALS = { }, }, + CANCEL_TRANSACTION: { + contents: h(CancelTransaction), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + + TRANSACTION_DETAILS: { + contents: h(TransactionDetails), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + + REJECT_TRANSACTIONS: { + contents: h(RejectTransactions), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + DEFAULT: { contents: [], mobileModalStyle: {}, diff --git a/ui/app/components/modals/notification/index.js b/ui/app/components/modals/notification/index.js deleted file mode 100644 index d60a3129b..000000000 --- a/ui/app/components/modals/notification/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Notification from './notification.container' -module.exports = Notification diff --git a/ui/app/components/modals/notification/notification.component.js b/ui/app/components/modals/notification/notification.component.js deleted file mode 100644 index 1af2f3ca8..000000000 --- a/ui/app/components/modals/notification/notification.component.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Button from '../../button' - -const Notification = (props, context) => { - return ( - <div className="modal-container"> - { props.children } - <div className="modal-container__footer"> - <Button - type="primary" - onClick={() => props.onHide()} - > - { context.t('ok') } - </Button> - </div> - </div> - ) -} - -Notification.propTypes = { - onHide: PropTypes.func.isRequired, - children: PropTypes.element, -} - -Notification.contextTypes = { - t: PropTypes.func, -} - -export default Notification diff --git a/ui/app/components/modals/notification/notification.container.js b/ui/app/components/modals/notification/notification.container.js deleted file mode 100644 index 5b98714da..000000000 --- a/ui/app/components/modals/notification/notification.container.js +++ /dev/null @@ -1,38 +0,0 @@ -import { connect } from 'react-redux' -import Notification from './notification.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()), - } -} - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const { onHide, ...otherStateProps } = stateProps - const { hideModal, ...otherDispatchProps } = dispatchProps - - return { - ...otherStateProps, - ...otherDispatchProps, - ...ownProps, - onHide: () => { - hideModal() - - if (onHide && typeof onHide === 'function') { - onHide() - } - }, - } -} - -export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification) diff --git a/ui/app/components/modals/reject-transactions/index.js b/ui/app/components/modals/reject-transactions/index.js new file mode 100644 index 000000000..fcdc372b6 --- /dev/null +++ b/ui/app/components/modals/reject-transactions/index.js @@ -0,0 +1 @@ +export { default } from './reject-transactions.container' diff --git a/ui/app/components/modals/reject-transactions/index.scss b/ui/app/components/modals/reject-transactions/index.scss new file mode 100644 index 000000000..753466883 --- /dev/null +++ b/ui/app/components/modals/reject-transactions/index.scss @@ -0,0 +1,6 @@ +.reject-transactions { + &__description { + text-align: center; + font-size: .875rem; + } +} diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.component.js b/ui/app/components/modals/reject-transactions/reject-transactions.component.js new file mode 100644 index 000000000..60b259bdc --- /dev/null +++ b/ui/app/components/modals/reject-transactions/reject-transactions.component.js @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types' +import React, { PureComponent } from 'react' +import Modal from '../../modal' + +export default class RejectTransactionsModal extends PureComponent { + static contextTypes = { + t: PropTypes.func.isRequired, + } + + static propTypes = { + onSubmit: PropTypes.func.isRequired, + hideModal: PropTypes.func.isRequired, + unapprovedTxCount: PropTypes.number.isRequired, + } + + onSubmit = async () => { + const { onSubmit, hideModal } = this.props + + await onSubmit() + hideModal() + } + + render () { + const { t } = this.context + const { hideModal, unapprovedTxCount } = this.props + + return ( + <Modal + headerText={t('rejectTxsN', [unapprovedTxCount])} + onClose={hideModal} + onSubmit={this.onSubmit} + onCancel={hideModal} + submitText={t('rejectAll')} + cancelText={t('cancel')} + submitType="secondary" + > + <div> + <div className="reject-transactions__description"> + { t('rejectTxsDescription', [unapprovedTxCount]) } + </div> + </div> + </Modal> + ) + } +} diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/modals/reject-transactions/reject-transactions.container.js new file mode 100644 index 000000000..81e98d3ff --- /dev/null +++ b/ui/app/components/modals/reject-transactions/reject-transactions.container.js @@ -0,0 +1,17 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import RejectTransactionsModal from './reject-transactions.component' +import withModalProps from '../../../higher-order-components/with-modal-props' + +const mapStateToProps = (state, ownProps) => { + const { unapprovedTxCount } = ownProps + + return { + unapprovedTxCount, + } +} + +export default compose( + withModalProps, + connect(mapStateToProps), +)(RejectTransactionsModal) diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js index cee8da7f8..7776b969e 100644 --- a/ui/app/components/modals/transaction-confirmed/index.js +++ b/ui/app/components/modals/transaction-confirmed/index.js @@ -1,2 +1 @@ -import TransactionConfirmed from './transaction-confirmed.component' -module.exports = TransactionConfirmed +export { default } from './transaction-confirmed.container' 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..c97371fb6 --- /dev/null +++ b/ui/app/components/modals/transaction-confirmed/index.scss @@ -0,0 +1,22 @@ +.transaction-confirmed { + &__title { + font-size: 1.5rem; + font-weight: 500; + padding: 16px 0; + text-align: center; + } + + &__description { + text-align: center; + font-size: .875rem; + } + + &__content { + overflow-y: auto; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 16px; + } +} diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js index c1c8a2976..0a98eb1a1 100644 --- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js +++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js @@ -1,24 +1,45 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' +import Modal from '../../modal' -const TransactionConfirmed = (props, context) => { - const { t } = context +export default class TransactionConfirmed extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } - return ( - <div className="modal-container__content"> - <img src="images/check-icon.svg" /> - <div className="modal-container__title"> - { `${t('confirmed')}!` } - </div> - <div className="modal-container__description"> - { t('initialTransactionConfirmed') } - </div> - </div> - ) -} + static propTypes = { + onSubmit: PropTypes.func, + hideModal: PropTypes.func, + } -TransactionConfirmed.contextTypes = { - t: PropTypes.func, -} + handleSubmit = () => { + const { hideModal, onSubmit } = this.props + + hideModal() -export default TransactionConfirmed + if (onSubmit && typeof onSubmit === 'function') { + onSubmit() + } + } + + render () { + const { t } = this.context + + return ( + <Modal + onSubmit={this.handleSubmit} + submitText={t('ok')} + > + <div className="transaction-confirmed__content"> + <img src="images/check-icon.svg" /> + <div className="transaction-confirmed__title"> + { `${t('confirmed')}!` } + </div> + <div className="transaction-confirmed__description"> + { t('initialTransactionConfirmed') } + </div> + </div> + </Modal> + ) + } +} 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..d4e39681a --- /dev/null +++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js @@ -0,0 +1,4 @@ +import TransactionConfirmed from './transaction-confirmed.component' +import withModalProps from '../../../higher-order-components/with-modal-props' + +export default withModalProps(TransactionConfirmed) diff --git a/ui/app/components/modals/transaction-details/index.js b/ui/app/components/modals/transaction-details/index.js new file mode 100644 index 000000000..1fc42c662 --- /dev/null +++ b/ui/app/components/modals/transaction-details/index.js @@ -0,0 +1 @@ +export { default } from './transaction-details.container' diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js new file mode 100644 index 000000000..f2fec3409 --- /dev/null +++ b/ui/app/components/modals/transaction-details/transaction-details.component.js @@ -0,0 +1,54 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Modal from '../../modal' +import TransactionListItemDetails from '../../transaction-list-item-details' +import { hexToDecimal } from '../../../helpers/conversions.util' + +export default class TransactionConfirmed extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + hideModal: PropTypes.func, + transaction: PropTypes.object, + onRetry: PropTypes.func, + showRetry: PropTypes.bool, + onCancel: PropTypes.func, + showCancel: PropTypes.bool, + } + + handleSubmit = () => { + this.props.hideModal() + } + + handleRetry = () => { + const { onRetry, hideModal } = this.props + + Promise.resolve(onRetry()).then(() => hideModal()) + } + + render () { + const { t } = this.context + const { transaction, showRetry, onCancel, showCancel } = this.props + const { txParams: { nonce } = {} } = transaction + const decimalNonce = nonce && hexToDecimal(nonce) + + return ( + <Modal + onSubmit={this.handleSubmit} + onClose={this.handleSubmit} + submitText={t('ok')} + headerText={t('transactionWithNonce', [`#${decimalNonce}`])} + > + <TransactionListItemDetails + transaction={transaction} + onRetry={this.handleRetry} + showRetry={showRetry} + onCancel={() => onCancel()} + showCancel={showCancel} + /> + </Modal> + ) + } +} diff --git a/ui/app/components/modals/transaction-details/transaction-details.container.js b/ui/app/components/modals/transaction-details/transaction-details.container.js new file mode 100644 index 000000000..f212920bb --- /dev/null +++ b/ui/app/components/modals/transaction-details/transaction-details.container.js @@ -0,0 +1,4 @@ +import TransactionDetails from './transaction-details.component' +import withModalProps from '../../../higher-order-components/with-modal-props' + +export default withModalProps(TransactionDetails) diff --git a/ui/app/components/modals/welcome-beta/index.js b/ui/app/components/modals/welcome-beta/index.js index 515c9cdaf..49e45b9d7 100644 --- a/ui/app/components/modals/welcome-beta/index.js +++ b/ui/app/components/modals/welcome-beta/index.js @@ -1,2 +1 @@ -import WelcomeBeta from './welcome-beta.component' -module.exports = WelcomeBeta +export { default } from './welcome-beta.container' diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.component.js b/ui/app/components/modals/welcome-beta/welcome-beta.component.js index 61571723a..ef1799164 100644 --- a/ui/app/components/modals/welcome-beta/welcome-beta.component.js +++ b/ui/app/components/modals/welcome-beta/welcome-beta.component.js @@ -1,18 +1,21 @@ import React from 'react' import PropTypes from 'prop-types' +import Modal, { ModalContent } from '../../modal' const TransactionConfirmed = (props, context) => { const { t } = context + const { hideModal } = props return ( - <div className="modal-container__content"> - <div className="modal-container__title"> - { `${t('uiWelcome')}` } - </div> - <div className="modal-container__description"> - { t('uiWelcomeMessage') } - </div> - </div> + <Modal + onSubmit={() => hideModal()} + submitText={t('ok')} + > + <ModalContent + title={t('uiWelcome')} + description={t('uiWelcomeMessage')} + /> + </Modal> ) } @@ -20,4 +23,8 @@ TransactionConfirmed.contextTypes = { t: PropTypes.func, } +TransactionConfirmed.propTypes = { + hideModal: PropTypes.func, +} + export default TransactionConfirmed diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.container.js b/ui/app/components/modals/welcome-beta/welcome-beta.container.js new file mode 100644 index 000000000..c5123ad47 --- /dev/null +++ b/ui/app/components/modals/welcome-beta/welcome-beta.container.js @@ -0,0 +1,4 @@ +import WelcomeBeta from './welcome-beta.component' +import withModalProps from '../../../higher-order-components/with-modal-props' + +export default withModalProps(WelcomeBeta) |