aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/index.scss2
-rw-r--r--ui/app/components/modals/index.scss1
-rw-r--r--ui/app/components/modals/modal.js35
-rw-r--r--ui/app/components/modals/transaction-confirmed/index.js2
-rw-r--r--ui/app/components/modals/transaction-confirmed/index.scss21
-rw-r--r--ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js46
-rw-r--r--ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js20
-rw-r--r--ui/app/components/pending-tx/confirm-send-ether.js60
-rw-r--r--ui/app/components/pending-tx/confirm-send-token.js57
-rw-r--r--ui/app/components/tx-list-item.js10
10 files changed, 215 insertions, 39 deletions
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index f3fe823f8..e69acff63 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -3,3 +3,5 @@
@import './info-box/index';
@import './pages/index';
+
+@import './modals/index';
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
new file mode 100644
index 000000000..ec6207f7e
--- /dev/null
+++ b/ui/app/components/modals/index.scss
@@ -0,0 +1 @@
+@import './transaction-confirmed/index';
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 43dcd20ae..841189277 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -20,6 +20,7 @@ const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
const CustomizeGasModal = require('../customize-gas-modal')
const NotifcationModal = require('./notification-modal')
const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
+const TransactionConfirmed = require('./transaction-confirmed')
const accountModalStyle = {
mobileModalStyle: {
@@ -265,6 +266,37 @@ const MODALS = {
},
},
+ TRANSACTION_CONFIRMED: {
+ disableBackdropClick: true,
+ contents: [
+ h(TransactionConfirmed, {}, []),
+ ],
+ mobileModalStyle: {
+ width: '100%',
+ height: '100%',
+ transform: 'none',
+ left: '0',
+ right: '0',
+ margin: '0 auto',
+ boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+ top: '0',
+ display: 'flex',
+ },
+ laptopModalStyle: {
+ width: '344px',
+ transform: 'translate3d(-50%, 0, 0px)',
+ top: '15%',
+ border: '1px solid #CCCFD1',
+ borderRadius: '8px',
+ backgroundColor: '#FFFFFF',
+ boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+ },
+ contentStyle: {
+ borderRadius: '8px',
+ height: '100%',
+ },
+ },
+
DEFAULT: {
contents: [],
mobileModalStyle: {},
@@ -306,7 +338,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
Modal.prototype.render = function () {
const modal = MODALS[this.props.modalState.name || 'DEFAULT']
- const children = modal.contents
+ const { contents: children, disableBackdropClick = false } = modal
const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
const contentStyle = modal.contentStyle || {}
@@ -326,6 +358,7 @@ Modal.prototype.render = function () {
modalStyle,
contentStyle,
backdropStyle: BACKDROPSTYLE,
+ closeOnClick: !disableBackdropClick,
},
children,
)
diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
new file mode 100644
index 000000000..c8db91388
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -0,0 +1,2 @@
+import TransactionConfirmed from './transaction-confirmed.container'
+module.exports = TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss
new file mode 100644
index 000000000..f8cd1f212
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.scss
@@ -0,0 +1,21 @@
+.transaction-confirmed {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 32px;
+
+ &__title {
+ font-size: 2rem;
+ padding: 16px 0;
+ }
+
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ line-height: 1.5rem;
+ }
+
+ @media screen and (max-width: 575px) {
+ justify-content: center;
+ }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
new file mode 100644
index 000000000..8d3b288ae
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+class TransactionConfirmed extends Component {
+ render () {
+ const { t } = this.context
+
+ return (
+ <div className="page-container page-container--full-width page-container--full-height">
+ <div className="page-container__content transaction-confirmed">
+ <img src="images/check-icon.svg" />
+ <div className="transaction-confirmed__title">
+ { `${t('confirmed')}!` }
+ </div>
+ <div className="transaction-confirmed__description">
+ { t('initialTransactionConfirmed') }
+ </div>
+ </div>
+ <div className="page-container__footer">
+ <Button
+ type="primary"
+ className="page-container__footer-button"
+ onClick={() => {
+ this.props.hideModal()
+ this.props.onHide()
+ }}
+ >
+ { t('ok') }
+ </Button>
+ </div>
+ </div>
+ )
+ }
+}
+
+TransactionConfirmed.propTypes = {
+ hideModal: PropTypes.func.isRequired,
+ onHide: PropTypes.func.isRequired,
+}
+
+TransactionConfirmed.contextTypes = {
+ t: PropTypes.func,
+}
+
+export default TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
new file mode 100644
index 000000000..63872f7f2
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import TransactionConfirmed from './transaction-confirmed.component'
+
+const { hideModal } = require('../../../actions')
+
+const mapStateToProps = state => {
+ const { appState: { modal: { modalState: { props } } } } = state
+ const { onHide } = props
+ return {
+ onHide,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ hideModal: () => dispatch(hideModal()),
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed)
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index c07c96ccc..5ad35c269 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -291,18 +291,48 @@ ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, curren
: value
}
-ConfirmSendEther.prototype.editTransaction = function (txMeta) {
+ConfirmSendEther.prototype.editTransaction = function () {
const { editTransaction, history } = this.props
+ const txMeta = this.gatherTxMeta()
editTransaction(txMeta)
history.push(SEND_ROUTE)
}
-ConfirmSendEther.prototype.renderNetworkDisplay = function () {
+ConfirmSendEther.prototype.renderHeaderRow = function (isTxReprice) {
const windowType = window.METAMASK_UI_TYPE
+ const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+ windowType !== ENVIRONMENT_TYPE_POPUP
- return (windowType === ENVIRONMENT_TYPE_NOTIFICATION || windowType === ENVIRONMENT_TYPE_POPUP)
- ? h(NetworkDisplay)
- : null
+ if (isTxReprice && isFullScreen) {
+ return null
+ }
+
+ return (
+ h('.page-container__header-row', [
+ h('span.page-container__back-button', {
+ onClick: () => this.editTransaction(),
+ style: {
+ visibility: isTxReprice ? 'hidden' : 'initial',
+ },
+ }, 'Edit'),
+ !isFullScreen && h(NetworkDisplay),
+ ])
+ )
+}
+
+ConfirmSendEther.prototype.renderHeader = function (isTxReprice) {
+ const title = isTxReprice ? this.context.t('speedUpTitle') : this.context.t('confirm')
+ const subtitle = isTxReprice
+ ? this.context.t('speedUpSubtitle')
+ : this.context.t('pleaseReviewTransaction')
+
+ return (
+ h('.page-container__header', [
+ this.renderHeaderRow(isTxReprice),
+ h('.page-container__title', title),
+ h('.page-container__subtitle', subtitle),
+ ])
+ )
}
ConfirmSendEther.prototype.render = function () {
@@ -320,6 +350,7 @@ ConfirmSendEther.prototype.render = function () {
},
} = this.props
const txMeta = this.gatherTxMeta()
+ const isTxReprice = Boolean(txMeta.lastGasPrice)
const txParams = txMeta.txParams || {}
const {
@@ -338,11 +369,6 @@ ConfirmSendEther.prototype.render = function () {
totalInETH,
} = this.getData()
- const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm'
- const subtitle = txMeta.lastGasPrice
- ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
- : 'Please review your transaction.'
-
const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency)
const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency)
@@ -362,19 +388,7 @@ ConfirmSendEther.prototype.render = function () {
return (
// Main Send token Card
h('.page-container', [
- h('.page-container__header', [
- h('.page-container__header-row', [
- h('span.page-container__back-button', {
- onClick: () => this.editTransaction(txMeta),
- style: {
- visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
- },
- }, 'Edit'),
- this.renderNetworkDisplay(),
- ]),
- h('.page-container__title', title),
- h('.page-container__subtitle', subtitle),
- ]),
+ this.renderHeader(isTxReprice),
h('.page-container__content', [
h(SenderToRecipient, {
senderName: fromName,
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 656093b3d..ddaa13d22 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -12,6 +12,7 @@ const actions = require('../../actions')
const clone = require('clone')
const Identicon = require('../identicon')
const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
+const NetworkDisplay = require('../network-display')
const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
const {
@@ -39,6 +40,11 @@ const {
} = require('../../selectors')
const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
+const {
+ ENVIRONMENT_TYPE_POPUP,
+ ENVIRONMENT_TYPE_NOTIFICATION,
+} = require('../../../../app/scripts/lib/enums')
+
ConfirmSendToken.contextTypes = {
t: PropTypes.func,
}
@@ -430,6 +436,43 @@ ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, curren
: value
}
+ConfirmSendToken.prototype.renderHeaderRow = function (isTxReprice) {
+ const windowType = window.METAMASK_UI_TYPE
+ const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+ windowType !== ENVIRONMENT_TYPE_POPUP
+
+ if (isTxReprice && isFullScreen) {
+ return null
+ }
+
+ return (
+ h('.page-container__header-row', [
+ h('span.page-container__back-button', {
+ onClick: () => this.editTransaction(),
+ style: {
+ visibility: isTxReprice ? 'hidden' : 'initial',
+ },
+ }, 'Edit'),
+ !isFullScreen && h(NetworkDisplay),
+ ])
+ )
+}
+
+ConfirmSendToken.prototype.renderHeader = function (isTxReprice) {
+ const title = isTxReprice ? this.context.t('speedUpTitle') : this.context.t('confirm')
+ const subtitle = isTxReprice
+ ? this.context.t('speedUpSubtitle')
+ : this.context.t('pleaseReviewTransaction')
+
+ return (
+ h('.page-container__header', [
+ this.renderHeaderRow(isTxReprice),
+ h('.page-container__title', title),
+ h('.page-container__subtitle', subtitle),
+ ])
+ )
+}
+
ConfirmSendToken.prototype.render = function () {
const txMeta = this.gatherTxMeta()
const {
@@ -443,25 +486,13 @@ ConfirmSendToken.prototype.render = function () {
},
} = this.getData()
- this.inputs = []
-
const isTxReprice = Boolean(txMeta.lastGasPrice)
- const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm')
- const subtitle = isTxReprice
- ? this.context.t('reprice_subtitle')
- : this.context.t('pleaseReviewTransaction')
return (
h('div.confirm-screen-container.confirm-send-token', [
// Main Send token Card
h('div.page-container', [
- h('div.page-container__header', [
- !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
- onClick: () => this.editTransaction(txMeta),
- }, this.context.t('edit')),
- h('div.page-container__title', title),
- h('div.page-container__subtitle', subtitle),
- ]),
+ this.renderHeader(isTxReprice),
h('.page-container__content', [
h('div.flex-row.flex-center.confirm-screen-identicons', [
h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index bd4ea80a6..ef441ff73 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -1,5 +1,7 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
+const { compose } = require('recompose')
+const { withRouter } = require('react-router-dom')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const inherits = require('util').inherits
@@ -16,13 +18,16 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
const { calcTokenAmount } = require('../token-util')
const { getCurrentCurrency } = require('../selectors')
+const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
TxListItem.contextTypes = {
t: PropTypes.func,
}
-module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem)
-
+module.exports = compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(TxListItem)
function mapStateToProps (state) {
return {
@@ -216,6 +221,7 @@ TxListItem.prototype.setSelectedToken = function (tokenAddress) {
TxListItem.prototype.resubmit = function () {
const { transactionId } = this.props
this.props.retryTransaction(transactionId)
+ .then(id => this.props.history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
}
TxListItem.prototype.render = function () {
generated by cgit (git 2.34.1) at 2024-10-14 16:19:28 +0800