From a36ea0e2328e6ffedd5b526470dc1133c4f2f556 Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Thu, 16 Aug 2018 12:04:43 -0300 Subject: show watch asset image from hide token modal --- ui/app/components/modals/hide-token-confirmation-modal.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index 1518fa9a0..b5f396e6f 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -10,6 +10,7 @@ function mapStateToProps (state) { return { network: state.metamask.network, token: state.appState.modal.modalState.props.token, + tokenImagesHashes: state.metamask.objects, } } @@ -40,8 +41,9 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmat HideTokenConfirmationModal.prototype.render = function () { - const { token, network, hideToken, hideModal } = this.props + const { token, network, hideToken, hideModal, tokenImagesHashes } = this.props const { symbol, address } = token + const imageUrl = tokenImagesHashes[address] return h('div.hide-token-confirmation', {}, [ h('div.hide-token-confirmation__container', { @@ -55,6 +57,7 @@ HideTokenConfirmationModal.prototype.render = function () { diameter: 45, address, network, + imageUrl, }), h('div.hide-token-confirmation__symbol', {}, symbol), -- cgit From dbab9a007fc9663427cebdbe1d41c51df67fd1fe Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Thu, 16 Aug 2018 21:17:02 -0300 Subject: delete according image when token added with watchToken deleted --- ui/app/components/modals/hide-token-confirmation-modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index b5f396e6f..4ed09d2ee 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -10,7 +10,7 @@ function mapStateToProps (state) { return { network: state.metamask.network, token: state.appState.modal.modalState.props.token, - tokenImagesHashes: state.metamask.objects, + imageObjects: state.metamask.imageObjects, } } @@ -41,9 +41,9 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmat HideTokenConfirmationModal.prototype.render = function () { - const { token, network, hideToken, hideModal, tokenImagesHashes } = this.props + const { token, network, hideToken, hideModal, imageObjects } = this.props const { symbol, address } = token - const imageUrl = tokenImagesHashes[address] + const imageUrl = imageObjects[address] return h('div.hide-token-confirmation', {}, [ h('div.hide-token-confirmation__container', { -- cgit From 6fa889abcb2e907073e227379e1fc930d22bfe2d Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Tue, 21 Aug 2018 12:59:42 -0300 Subject: refactor watchToken related functions --- ui/app/components/modals/hide-token-confirmation-modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index 4ed09d2ee..bdecc0593 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -10,7 +10,7 @@ function mapStateToProps (state) { return { network: state.metamask.network, token: state.appState.modal.modalState.props.token, - imageObjects: state.metamask.imageObjects, + assetImages: state.metamask.assetImages, } } @@ -41,9 +41,9 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmat HideTokenConfirmationModal.prototype.render = function () { - const { token, network, hideToken, hideModal, imageObjects } = this.props + const { token, network, hideToken, hideModal, assetImages } = this.props const { symbol, address } = token - const imageUrl = imageObjects[address] + const imageUrl = assetImages[address] return h('div.hide-token-confirmation', {}, [ h('div.hide-token-confirmation__container', { -- cgit From 456f2faf4f1e95a618c480d373d87b0a32c97782 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 20 Aug 2018 12:36:01 -0230 Subject: Handle case where keyring is missing in AccountDetailsModal --- ui/app/components/modals/account-details-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 cc90cf578..bc577fda0 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -61,7 +61,7 @@ AccountDetailsModal.prototype.render = function () { let exportPrivateKeyFeatureEnabled = true // This feature is disabled for hardware wallets - if (keyring.type.search('Hardware') !== -1) { + if (keyring && keyring.type.search('Hardware') !== -1) { exportPrivateKeyFeatureEnabled = false } -- cgit From 743c6e7ca4a9b20a2d8e2e1909e0891a303ca92e Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 20 Aug 2018 12:38:40 -0230 Subject: Clear warnings when exportAccount succeeds --- .../components/modals/export-private-key-modal.js | 23 ++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 80ece425f..163d1b15b 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -1,3 +1,4 @@ +const log = require('loglevel') const Component = require('react').Component const PropTypes = require('prop-types') const h = require('react-hyperscript') @@ -23,7 +24,13 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)), + exportAccount: (password, address) => { + return dispatch(actions.exportAccount(password, address)) + .then((res) => { + dispatch(actions.hideWarning()) + return res + }) + }, showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })), hideModal: () => dispatch(actions.hideModal()), } @@ -36,6 +43,7 @@ function ExportPrivateKeyModal () { this.state = { password: '', privateKey: null, + showWarning: true, } } @@ -50,7 +58,11 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo const { exportAccount } = this.props exportAccount(password, address) - .then(privateKey => this.setState({ privateKey })) + .then(privateKey => this.setState({ + privateKey, + showWarning: false, + })) + .catch((e) => log.error(e)) } ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { @@ -110,7 +122,10 @@ ExportPrivateKeyModal.prototype.render = function () { } = this.props const { name, address } = selectedIdentity - const { privateKey } = this.state + const { + privateKey, + showWarning, + } = this.state return h(AccountModalContainer, { showBackButton: previousModalState === 'ACCOUNT_DETAILS', @@ -134,7 +149,7 @@ ExportPrivateKeyModal.prototype.render = function () { this.renderPasswordInput(privateKey), - !warning ? null : h('span.private-key-password-error', warning), + showWarning && warning ? h('span.private-key-password-error', warning) : null, ]), h('div.private-key-password-warning', this.context.t('privateKeyWarning')), -- cgit From a90c152485b84d6b382218543a6b38918a3ce6cf Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Thu, 16 Aug 2018 14:58:58 -0230 Subject: Update AccountModalContainer to accept a selectedIdentity prop --- ui/app/components/modals/account-modal-container.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index a9856b20f..aa0593df8 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -7,9 +7,9 @@ const actions = require('../../actions') const { getSelectedIdentity } = require('../../selectors') const Identicon = require('../identicon') -function mapStateToProps (state) { +function mapStateToProps (state, ownProps) { return { - selectedIdentity: getSelectedIdentity(state), + selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state), } } -- cgit From 1e8e8bdfc87903249320b97d569c64c55a524899 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Tue, 14 Aug 2018 14:42:30 -0230 Subject: Don't re-render the export modal when the selected identity changes --- .../components/modals/export-private-key-modal.js | 25 +++++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 80ece425f..99b61bf9d 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -11,13 +11,21 @@ const ReadOnlyInput = require('../readonly-input') const copyToClipboard = require('copy-to-clipboard') const { checksumAddress } = require('../../util') -function mapStateToProps (state) { - return { - warning: state.appState.warning, - privateKey: state.appState.accountDetail.privateKey, - network: state.metamask.network, - selectedIdentity: getSelectedIdentity(state), - previousModalState: state.appState.modal.previousModalState.name, +function mapStateToPropsFactory () { + let selectedIdentity = null + return function mapStateToProps (state) { + // We should **not** change the identity displayed here even if it changes from underneath us. + // If we do, we will be showing the user one private key and a **different** address and name. + // Note that the selected identity **will** change from underneath us when we unlock the keyring + // which is the expected behavior that we are side-stepping. + selectedIdentity = selectedIdentity || getSelectedIdentity(state) + return { + warning: state.appState.warning, + privateKey: state.appState.accountDetail.privateKey, + network: state.metamask.network, + selectedIdentity, + previousModalState: state.appState.modal.previousModalState.name, + } } } @@ -43,7 +51,7 @@ ExportPrivateKeyModal.contextTypes = { t: PropTypes.func, } -module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal) +module.exports = connect(mapStateToPropsFactory, mapDispatchToProps)(ExportPrivateKeyModal) ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) { @@ -113,6 +121,7 @@ ExportPrivateKeyModal.prototype.render = function () { const { privateKey } = this.state return h(AccountModalContainer, { + selectedIdentity, showBackButton: previousModalState === 'ACCOUNT_DETAILS', backButtonAction: () => showAccountDetailModal(), }, [ -- cgit From b59a1e91b8f4b595500a0785f325e833fa35407d Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Thu, 23 Aug 2018 15:54:40 -0300 Subject: typo watchAsset imageUrl to image --- ui/app/components/modals/hide-token-confirmation-modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index bdecc0593..fb38516d3 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -43,7 +43,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmat HideTokenConfirmationModal.prototype.render = function () { const { token, network, hideToken, hideModal, assetImages } = this.props const { symbol, address } = token - const imageUrl = assetImages[address] + const image = assetImages[address] return h('div.hide-token-confirmation', {}, [ h('div.hide-token-confirmation__container', { @@ -57,7 +57,7 @@ HideTokenConfirmationModal.prototype.render = function () { diameter: 45, address, network, - imageUrl, + image, }), h('div.hide-token-confirmation__symbol', {}, symbol), -- cgit From 31089778ba3c97443e25bd3a7a901f45757894d9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 27 Aug 2018 20:58:40 -0700 Subject: Add raised type buttons to Button component. Refactor all buttons within app to Button components --- ui/app/components/modals/account-details-modal.js | 11 +++++-- .../customize-gas/customize-gas.component.js | 15 +++++---- ui/app/components/modals/deposit-ether-modal.js | 7 ++++- .../components/modals/export-private-key-modal.js | 36 +++++++++++++--------- 4 files changed, 46 insertions(+), 23 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 bc577fda0..248ffe008 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, @@ -80,12 +82,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/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') }
- - +
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')) + ) ), ]) -- cgit From 5a6c333506e4000602c1a1106cee6d06fe83afa8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 17 Sep 2018 10:34:29 -0700 Subject: Switch existing modals from using Notification to Modal. Remove Notification component. Add CancelTransaction modal --- .../cancel-transaction-gas-fee.component.js | 32 ++++++ .../cancel-transaction-gas-fee/index.js | 1 + .../cancel-transaction-gas-fee/index.scss | 17 ++++ .../cancel-transaction.component.js | 71 ++++++++++++++ .../cancel-transaction.container.js | 55 +++++++++++ .../components/modals/cancel-transaction/index.js | 1 + .../modals/cancel-transaction/index.scss | 18 ++++ .../confirm-remove-account.component.js | 67 ++++++------- .../confirm-remove-account.container.js | 8 +- .../modals/confirm-remove-account/index.js | 3 +- .../modals/confirm-remove-account/index.scss | 58 +++++++++++ .../confirm-reset-account.component.js | 48 +++------ .../confirm-reset-account.container.js | 11 ++- .../modals/confirm-reset-account/index.js | 3 +- ui/app/components/modals/index.scss | 109 +-------------------- ui/app/components/modals/modal.js | 40 ++++---- ui/app/components/modals/notification/index.js | 2 - .../modals/notification/notification.component.js | 30 ------ .../modals/notification/notification.container.js | 38 ------- .../modals/transaction-confirmed/index.js | 3 +- .../modals/transaction-confirmed/index.scss | 22 +++++ .../transaction-confirmed.component.js | 59 +++++++---- .../transaction-confirmed.container.js | 4 + ui/app/components/modals/welcome-beta/index.js | 3 +- .../modals/welcome-beta/welcome-beta.component.js | 23 +++-- .../modals/welcome-beta/welcome-beta.container.js | 4 + 26 files changed, 428 insertions(+), 302 deletions(-) create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction.component.js create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction.container.js create mode 100644 ui/app/components/modals/cancel-transaction/index.js create mode 100644 ui/app/components/modals/cancel-transaction/index.scss create mode 100644 ui/app/components/modals/confirm-remove-account/index.scss delete mode 100644 ui/app/components/modals/notification/index.js delete mode 100644 ui/app/components/modals/notification/notification.component.js delete mode 100644 ui/app/components/modals/notification/notification.container.js create mode 100644 ui/app/components/modals/transaction-confirmed/index.scss create mode 100644 ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js create mode 100644 ui/app/components/modals/welcome-beta/welcome-beta.container.js (limited to 'ui/app/components/modals') 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..56765698e --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js @@ -0,0 +1,32 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' +import CurrencyDisplay from '../../../currency-display' +import { ETH } from '../../../../constants/common' + +export default class CancelTransaction extends PureComponent { + static propTypes = { + className: PropTypes.string, + value: PropTypes.string, + } + + render () { + const { className, value } = this.props + console.log('VALUE', value) + + return ( +
+ + +
+ ) + } +} 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.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js new file mode 100644 index 000000000..f5f0ea783 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js @@ -0,0 +1,71 @@ +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' +import { decimalToHex } from '../../../helpers/conversions.util' +import { getHexGasTotal } from '../../../helpers/confirm-transaction/util' + +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, + defaultNewGasPrice: 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 { defaultNewGasPrice: gasPrice } = this.props + const newGasFee = getHexGasTotal({ gasPrice, gasLimit: decimalToHex(21000) }) + + return ( + +
+
+ { t('cancellationGasFee') } +
+ +
+ { t('attemptToCancelDescription') } +
+
+ + ) + } +} 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..15bff4bc6 --- /dev/null +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js @@ -0,0 +1,55 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import R from 'ramda' +import { multiplyCurrencies } from '../../../conversion-util' +import { bnToHex } from '../../../helpers/conversions.util' +import withModalProps from '../../../higher-order-components/with-modal-props' +import CancelTransaction from './cancel-transaction.component' +import { showModal, hideModal, createCancelTransaction } from '../../../actions' + +const mapStateToProps = (state, ownProps) => { + const { metamask } = state + const { transactionId, originalGasPrice } = ownProps + const { selectedAddressTxList } = metamask + const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList) + const transactionStatus = transaction ? transaction.status : '' + + const defaultNewGasPrice = bnToHex(multiplyCurrencies(originalGasPrice, 1.1)) + + return { + transactionId, + transactionStatus, + originalGasPrice, + defaultNewGasPrice, + } +} + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => dispatch(hideModal()), + 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/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js index 5a9f0f289..483c7062f 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,6 +1,6 @@ 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' @@ -25,22 +25,22 @@ class ConfirmRemoveAccount extends Component { renderSelectedAccount () { const { identity } = this.props return ( -
-
+
+
-
- Name - {identity.name} +
+ Name + {identity.name}
-
- Public Address - { addressSummary(identity.address, 4, 4) } +
+ Public Address + { addressSummary(identity.address, 4, 4) }
-
+
-
-
- { `${t('removeAccount')}` }? -
- { this.renderSelectedAccount() } - + ) } } 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..59d48400d 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,11 +1,12 @@ import { connect } from 'react-redux' +import { compose } from 'recompose' import ConfirmRemoveAccount from './confirm-remove-account.component' +import withModalProps from '../../../higher-order-components/with-modal-props' const { hideModal, removeAccount } = require('../../../actions') const mapStateToProps = state => { return { - identity: state.appState.modal.modalState.props.identity, network: state.metamask.network, } } @@ -17,4 +18,7 @@ const mapDispatchToProps = dispatch => { } } -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 ( -
-
-
- { `${t('resetAccount')}?` } -
-
- { t('resetAccountDescription') } -
-
-
- - -
-
+ this.props.hideModal()} + submitText={t('reset')} + cancelText={t('nevermind')} + submitType="secondary" + > + + ) } } - -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/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..2aec89326 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -19,14 +19,14 @@ 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' const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', @@ -199,11 +199,7 @@ const MODALS = { }, BETA_UI_NOTIFICATION_MODAL: { - contents: [ - h(Notification, [ - h(WelcomeBeta), - ]), - ], + contents: h(WelcomeBeta), mobileModalStyle: { ...modalContainerMobileStyle, }, @@ -307,9 +303,7 @@ const MODALS = { }, CONFIRM_CUSTOMIZE_GAS: { - contents: [ - h(ConfirmCustomizeGasModal), - ], + contents: h(ConfirmCustomizeGasModal), mobileModalStyle: { width: '100vw', height: '100vh', @@ -332,11 +326,7 @@ const MODALS = { TRANSACTION_CONFIRMED: { disableBackdropClick: true, - contents: [ - h(Notification, [ - h(TransactionConfirmed), - ]), - ], + contents: h(TransactionConfirmed), mobileModalStyle: { ...modalContainerMobileStyle, }, @@ -347,6 +337,7 @@ const MODALS = { borderRadius: '8px', }, }, + QR_SCANNER: { contents: h(QRScanner), mobileModalStyle: { @@ -360,6 +351,19 @@ const MODALS = { }, }, + CANCEL_TRANSACTION: { + contents: h(CancelTransaction), + 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 ( -
- { props.children } -
- -
-
- ) -} - -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/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 ( -
- -
- { `${t('confirmed')}!` } -
-
- { t('initialTransactionConfirmed') } -
-
- ) -} + 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 ( + +
+ +
+ { `${t('confirmed')}!` } +
+
+ { t('initialTransactionConfirmed') } +
+
+ + ) + } +} 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/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 ( -
-
- { `${t('uiWelcome')}` } -
-
- { t('uiWelcomeMessage') } -
-
+ hideModal()} + submitText={t('ok')} + > + + ) } @@ -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) -- cgit From 95e1eff4ca3d784d6fcba21035a535f8f3398cdc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 17 Sep 2018 18:32:35 -0700 Subject: Add TransactionDetails modal --- ui/app/components/modals/modal.js | 14 +++++++ .../components/modals/transaction-details/index.js | 1 + .../transaction-details.component.js | 43 ++++++++++++++++++++++ .../transaction-details.container.js | 4 ++ 4 files changed, 62 insertions(+) create mode 100644 ui/app/components/modals/transaction-details/index.js create mode 100644 ui/app/components/modals/transaction-details/transaction-details.component.js create mode 100644 ui/app/components/modals/transaction-details/transaction-details.container.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 2aec89326..6054002c8 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -27,6 +27,7 @@ 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' const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', @@ -364,6 +365,19 @@ const MODALS = { }, }, + TRANSACTION_DETAILS: { + contents: h(TransactionDetails), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + DEFAULT: { contents: [], mobileModalStyle: {}, 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..7eec028fe --- /dev/null +++ b/ui/app/components/modals/transaction-details/transaction-details.component.js @@ -0,0 +1,43 @@ +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, + } + + render () { + const { t } = this.context + const { transaction, onRetry, showRetry, onCancel, showCancel, hideModal } = this.props + const { txParams: { nonce } = {} } = transaction + const decimalNonce = nonce && hexToDecimal(nonce) + + return ( + hideModal()} + submitText={t('ok')} + headerText={t('transactionWithNonce', [`#${decimalNonce}`])} + > + onRetry()} + showRetry={showRetry} + onCancel={() => onCancel()} + showCancel={showCancel} + /> + + ) + } +} 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) -- cgit From 2cfdc95eebc3e0a878017090f22e5136cff709a6 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 19 Sep 2018 14:30:52 -0700 Subject: Add unit tests --- .../cancel-transaction-gas-fee.component.js | 7 +-- .../cancel-transaction-gas-fee.component.test.js | 27 +++++++++++ .../cancel-transaction.component.js | 7 ++- .../tests/cancel-transaction.component.test.js | 56 ++++++++++++++++++++++ 4 files changed, 88 insertions(+), 9 deletions(-) create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js create mode 100644 ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js (limited to 'ui/app/components/modals') 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 index 56765698e..b082db1d0 100644 --- 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 @@ -1,21 +1,18 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import classnames from 'classnames' import CurrencyDisplay from '../../../currency-display' import { ETH } from '../../../../constants/common' export default class CancelTransaction extends PureComponent { static propTypes = { - className: PropTypes.string, value: PropTypes.string, } render () { - const { className, value } = this.props - console.log('VALUE', value) + const { value } = this.props return ( -
+
{ + it('should render', () => { + const wrapper = shallow( + + ) + + 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 index f5f0ea783..a30fbea96 100644 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js @@ -57,10 +57,9 @@ export default class CancelTransaction extends PureComponent {
{ t('cancellationGasFee') }
- +
+ +
{ t('attemptToCancelDescription') }
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..053223467 --- /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( + , + { 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( + , + { 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) + }) +}) -- cgit From 431beb943675f2e9b7b5e5ce9c7f55d45f10905f Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 20 Sep 2018 19:35:45 -0700 Subject: Fix multiplyCurrencies. Add onClose prop for Modal component. Remove hideModal from modal components. --- .../cancel-transaction.component.js | 8 +++----- .../cancel-transaction.container.js | 21 ++++++++++++++------- .../tests/cancel-transaction.component.test.js | 2 +- .../confirm-remove-account.component.js | 15 +++++++++------ .../confirm-remove-account.container.js | 4 +--- .../transaction-details.component.js | 9 +++++++-- 6 files changed, 35 insertions(+), 24 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js index a30fbea96..8b00cb9b9 100644 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js +++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js @@ -3,8 +3,6 @@ import PropTypes from 'prop-types' import Modal from '../../modal' import CancelTransactionGasFee from './cancel-transaction-gas-fee' import { SUBMITTED_STATUS } from '../../../constants/transactions' -import { decimalToHex } from '../../../helpers/conversions.util' -import { getHexGasTotal } from '../../../helpers/confirm-transaction/util' export default class CancelTransaction extends PureComponent { static contextTypes = { @@ -16,7 +14,7 @@ export default class CancelTransaction extends PureComponent { hideModal: PropTypes.func, showTransactionConfirmedModal: PropTypes.func, transactionStatus: PropTypes.string, - defaultNewGasPrice: PropTypes.string, + newGasFee: PropTypes.string, } componentDidUpdate () { @@ -41,12 +39,12 @@ export default class CancelTransaction extends PureComponent { render () { const { t } = this.context - const { defaultNewGasPrice: gasPrice } = this.props - const newGasFee = getHexGasTotal({ gasPrice, gasLimit: decimalToHex(21000) }) + const { newGasFee } = this.props return ( { const { metamask } = state const { transactionId, originalGasPrice } = ownProps const { selectedAddressTxList } = metamask - const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList) + const transaction = selectedAddressTxList.find(({ id }) => id === transactionId) const transactionStatus = transaction ? transaction.status : '' - const defaultNewGasPrice = bnToHex(multiplyCurrencies(originalGasPrice, 1.1)) + 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, - defaultNewGasPrice, + newGasFee, } } const mapDispatchToProps = dispatch => { return { - hideModal: () => dispatch(hideModal()), createCancelTransaction: txId => dispatch(createCancelTransaction(txId)), showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })), } 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 index 053223467..858fb01a8 100644 --- 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 @@ -12,7 +12,7 @@ describe('CancelTransaction Component', () => { it('should render a CancelTransaction modal', () => { const wrapper = shallow( , { context: { t }} ) 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 483c7062f..eff94a54a 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 @@ -5,7 +5,7 @@ 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,11 +17,15 @@ 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 ( @@ -60,8 +64,9 @@ class ConfirmRemoveAccount extends Component { return ( this.handleRemove()} - onCancel={() => this.props.hideModal()} + onClose={this.handleCancel} + onSubmit={this.handleRemove} + onCancel={this.handleCancel} submitText={t('remove')} cancelText={t('nevermind')} submitType="secondary" @@ -82,5 +87,3 @@ class ConfirmRemoveAccount extends Component { ) } } - -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 59d48400d..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 @@ -2,8 +2,7 @@ import { connect } from 'react-redux' import { compose } from 'recompose' import ConfirmRemoveAccount from './confirm-remove-account.component' import withModalProps from '../../../higher-order-components/with-modal-props' - -const { hideModal, removeAccount } = require('../../../actions') +import { removeAccount } from '../../../actions' const mapStateToProps = state => { return { @@ -13,7 +12,6 @@ const mapStateToProps = state => { const mapDispatchToProps = dispatch => { return { - hideModal: () => dispatch(hideModal()), removeAccount: (address) => dispatch(removeAccount(address)), } } diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js index 7eec028fe..ef438d01f 100644 --- a/ui/app/components/modals/transaction-details/transaction-details.component.js +++ b/ui/app/components/modals/transaction-details/transaction-details.component.js @@ -18,15 +18,20 @@ export default class TransactionConfirmed extends PureComponent { showCancel: PropTypes.bool, } + handleSubmit = () => { + this.props.hideModal() + } + render () { const { t } = this.context - const { transaction, onRetry, showRetry, onCancel, showCancel, hideModal } = this.props + const { transaction, onRetry, showRetry, onCancel, showCancel } = this.props const { txParams: { nonce } = {} } = transaction const decimalNonce = nonce && hexToDecimal(nonce) return ( hideModal()} + onSubmit={this.handleSubmit} + onClose={this.handleSubmit} submitText={t('ok')} headerText={t('transactionWithNonce', [`#${decimalNonce}`])} > -- cgit From cf6bead7ef1fea81f44abc26e4bf6847b9624d0d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 26 Sep 2018 14:58:27 -0700 Subject: Close transaction details modal when clicking speed up --- .../transaction-details/transaction-details.component.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js index ef438d01f..f2fec3409 100644 --- a/ui/app/components/modals/transaction-details/transaction-details.component.js +++ b/ui/app/components/modals/transaction-details/transaction-details.component.js @@ -22,9 +22,15 @@ export default class TransactionConfirmed extends PureComponent { this.props.hideModal() } + handleRetry = () => { + const { onRetry, hideModal } = this.props + + Promise.resolve(onRetry()).then(() => hideModal()) + } + render () { const { t } = this.context - const { transaction, onRetry, showRetry, onCancel, showCancel } = this.props + const { transaction, showRetry, onCancel, showCancel } = this.props const { txParams: { nonce } = {} } = transaction const decimalNonce = nonce && hexToDecimal(nonce) @@ -37,7 +43,7 @@ export default class TransactionConfirmed extends PureComponent { > onRetry()} + onRetry={this.handleRetry} showRetry={showRetry} onCancel={() => onCancel()} showCancel={showCancel} -- cgit