From 3c1248c8169a1cb96a0ee2bc0f523fb9c765569e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 19 Mar 2018 16:12:09 -0700 Subject: Update confirm transaction screen --- test/integration/lib/send-new-ui.js | 6 +- ui/app/components/network-display.js | 51 ++++ .../pending-tx/confirm-deploy-contract.js | 10 +- ui/app/components/pending-tx/confirm-send-ether.js | 336 ++++++++++----------- ui/app/components/sender-to-recipient.js | 29 +- ui/app/css/itcss/components/network.scss | 12 + ui/app/css/itcss/components/send.scss | 6 +- ui/app/css/itcss/generic/index.scss | 7 +- ui/app/send-v2.js | 15 +- 9 files changed, 274 insertions(+), 198 deletions(-) create mode 100644 ui/app/components/network-display.js diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index 573faaee3..3fc7c79f8 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -128,10 +128,10 @@ async function runSendFlowTest(assert, done) { selectState.val('send edit') reactTriggerChange(selectState[0]) - const confirmFromName = (await queryAsync($, '.confirm-screen-account-name')).first() + const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first() assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name') - const confirmToName = (await queryAsync($, '.confirm-screen-account-name')).last() + const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last() assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name') const confirmScreenRows = await queryAsync($, '.confirm-screen-rows') @@ -140,7 +140,7 @@ async function runSendFlowTest(assert, done) { const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[2] assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total') - const confirmScreenBackButton = await queryAsync($, '.confirm-screen-back-button') + const confirmScreenBackButton = await queryAsync($, '.page-container__back-button') confirmScreenBackButton[0].click() const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item') diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js new file mode 100644 index 000000000..9dc31b5c7 --- /dev/null +++ b/ui/app/components/network-display.js @@ -0,0 +1,51 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const { connect } = require('react-redux') +const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') +const t = require('../../i18n') + +const networkToColorHash = { + 1: '#038789', + 3: '#e91550', + 42: '#690496', + 4: '#ebb33f', +} + +class NetworkDisplay extends Component { + renderNetworkIcon () { + const { network } = this.props + const networkColor = networkToColorHash[network] + + return networkColor + ? h(NetworkDropdownIcon, { backgroundColor: networkColor }) + : h('i.fa.fa-question-circle.fa-med', { + style: { + margin: '0 4px', + color: 'rgb(125, 128, 130)', + }, + }) + } + + render () { + const { provider: { type } } = this.props + return h('.network-display__container', [ + this.renderNetworkIcon(), + h('.network-name', t(type)), + ]) + } +} + +NetworkDisplay.propTypes = { + network: PropTypes.string, + provider: PropTypes.object, +} + +const mapStateToProps = ({ metamask: { network, provider } }) => { + return { + network, + provider, + } +} + +module.exports = connect(mapStateToProps)(NetworkDisplay) diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 4810bb515..b75f3a964 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -10,6 +10,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil } = require('../../conversion-util') const t = require('../../../i18n') const SenderToRecipient = require('../sender-to-recipient') +const NetworkDisplay = require('../network-display') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -244,9 +245,12 @@ class ConfirmDeployContract extends Component { return ( h('.page-container', [ h('.page-container__header', [ - h('.page-container__back-button', { - onClick: () => backToAccountDetail(selectedAddress), - }, t('back')), + h('.page-container__header-row', [ + h('span.page-container__back-button', { + onClick: () => backToAccountDetail(selectedAddress), + }, t('back')), + window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), + ]), h('.page-container__title', t('confirmContract')), h('.page-container__subtitle', t('pleaseReviewTransaction')), ]), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index f36def9d5..d1ce25cbf 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -4,7 +4,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const actions = require('../../actions') const clone = require('clone') -const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') @@ -15,6 +14,8 @@ const { } = require('../../conversion-util') const GasFeeDisplay = require('../send/gas-fee-display-v2') const t = require('../../../i18n') +const SenderToRecipient = require('../sender-to-recipient') +const NetworkDisplay = require('../network-display') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -257,196 +258,181 @@ ConfirmSendEther.prototype.render = function () { this.inputs = [] return ( - h('div.confirm-screen-container.confirm-send-ether', [ - // Main Send token Card - h('div.page-container', [ - h('div.page-container__header', [ - !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { + // Main Send token Card + h('.page-container', [ + h('.page-container__header', [ + h('.page-container__header-row', [ + h('span.page-container__back-button', { onClick: () => editTransaction(txMeta), + style: { + visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden', + }, }, 'Edit'), - h('div.page-container__title', title), - h('div.page-container__subtitle', subtitle), + window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), + ]), + h('.page-container__title', title), + h('.page-container__subtitle', subtitle), + ]), + h('.page-container__content', [ + h(SenderToRecipient, { + senderName: fromName, + senderAddress: fromAddress, + recipientName: toName, + recipientAddress: txParams.to, + }), + + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), + + h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), - h('.page-container__content', [ - h('div.flex-row.flex-center.confirm-screen-identicons', [ - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: fromAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', fromName), - // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), - ]), - h('i.fa.fa-arrow-right.fa-lg'), - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: txParams.to, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', toName), - // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), - ]), - ]), - // h('h3.flex-center.confirm-screen-sending-to-message', { - // style: { - // textAlign: 'center', - // fontSize: '16px', - // }, - // }, [ - // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - // ]), - - h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), - h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), - h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), ]), - h('div.confirm-screen-rows', [ - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', fromName), - h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), - ]), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), ]), + ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', toName), - h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), - ]), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('div.confirm-screen-section-column', [ + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), + ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), - h('div.confirm-screen-section-column', [ - h(GasFeeDisplay, { - gasTotal: gasTotal || gasFeeInHex, - conversionRate, - convertedCurrency, - onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), - }), - ]), + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), - h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ - h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), - ]), - - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), - h('div.confirm-screen-row-detail', `${totalInETH} ETH`), - ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), + h('div.confirm-screen-row-detail', `${totalInETH} ETH`), ]), ]), - - // These are latest errors handling from master - // Leaving as comments as reference when we start implementing error handling - // h('style', ` - // .conf-buttons button { - // margin-left: 10px; - // text-transform: uppercase; - // } - // `), - - // txMeta.simulationFails ? - // h('.error', { - // style: { - // marginLeft: 50, - // fontSize: '0.9em', - // }, - // }, 'Transaction Error. Exception thrown in contract code.') - // : null, - - // !isValidAddress ? - // h('.error', { - // style: { - // marginLeft: 50, - // fontSize: '0.9em', - // }, - // }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') - // : null, - - // insufficientBalance ? - // h('span.error', { - // style: { - // marginLeft: 50, - // fontSize: '0.9em', - // }, - // }, 'Insufficient balance for transaction') - // : null, - - // // send + cancel - // h('.flex-row.flex-space-around.conf-buttons', { - // style: { - // display: 'flex', - // justifyContent: 'flex-end', - // margin: '14px 25px', - // }, - // }, [ - // h('button', { - // onClick: (event) => { - // this.resetGasFields() - // event.preventDefault() - // }, - // }, 'Reset'), - - // // Accept Button or Buy Button - // insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : - // h('input.confirm.btn-green', { - // type: 'submit', - // value: 'SUBMIT', - // style: { marginLeft: '10px' }, - // disabled: buyDisabled, - // }), - - // h('button.cancel.btn-red', { - // onClick: props.cancelTransaction, - // }, 'Reject'), - // ]), - // showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { - // style: { - // display: 'flex', - // justifyContent: 'flex-end', - // margin: '14px 25px', - // }, - // }, [ - // h('button.cancel.btn-red', { - // onClick: props.cancelAllTransactions, - // }, 'Reject All'), - // ]) : null, - // ]), - // ]) - // ) - // } ]), - h('form#pending-tx-form', { - onSubmit: this.onSubmit, - }, [ - h('.page-container__footer', [ - // Cancel Button - h('button.btn-cancel.page-container__footer-button.allcaps', { - onClick: (event) => { - clearSend() - this.cancel(event, txMeta) - }, - }, t('cancel')), - - // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), - ]), +// These are latest errors handling from master +// Leaving as comments as reference when we start implementing error handling +// h('style', ` +// .conf-buttons button { +// margin-left: 10px; +// text-transform: uppercase; +// } +// `), + +// txMeta.simulationFails ? +// h('.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Transaction Error. Exception thrown in contract code.') +// : null, + +// !isValidAddress ? +// h('.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') +// : null, + +// insufficientBalance ? +// h('span.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Insufficient balance for transaction') +// : null, + +// // send + cancel +// h('.flex-row.flex-space-around.conf-buttons', { +// style: { +// display: 'flex', +// justifyContent: 'flex-end', +// margin: '14px 25px', +// }, +// }, [ +// h('button', { +// onClick: (event) => { +// this.resetGasFields() +// event.preventDefault() +// }, +// }, 'Reset'), + +// // Accept Button or Buy Button +// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : +// h('input.confirm.btn-green', { +// type: 'submit', +// value: 'SUBMIT', +// style: { marginLeft: '10px' }, +// disabled: buyDisabled, +// }), + +// h('button.cancel.btn-red', { +// onClick: props.cancelTransaction, +// }, 'Reject'), +// ]), +// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { +// style: { +// display: 'flex', +// justifyContent: 'flex-end', +// margin: '14px 25px', +// }, +// }, [ +// h('button.cancel.btn-red', { +// onClick: props.cancelAllTransactions, +// }, 'Reject All'), +// ]) : null, +// ]), +// ]) +// ) +// } + ]), + + h('form#pending-tx-form', { + onSubmit: this.onSubmit, + }, [ + h('.page-container__footer', [ + // Cancel Button + h('button.btn-cancel.page-container__footer-button.allcaps', { + onClick: (event) => { + clearSend() + this.cancel(event, txMeta) + }, + }, t('cancel')), + + // Accept Button + h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), ]), ]), ]) diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js index 25b9c7d6b..f35c353ad 100644 --- a/ui/app/components/sender-to-recipient.js +++ b/ui/app/components/sender-to-recipient.js @@ -5,6 +5,28 @@ const t = require('../../i18n') const Identicon = require('./identicon') class SenderToRecipient extends Component { + renderRecipientIcon () { + const { recipientAddress } = this.props + return ( + recipientAddress + ? h(Identicon, { address: recipientAddress, diameter: 20 }) + : h('i.fa.fa-file-text-o') + ) + } + + renderRecipient () { + const { recipientName } = this.props + return ( + h('.sender-to-recipient__recipient', [ + this.renderRecipientIcon(), + h( + '.sender-to-recipient__name.sender-to-recipient__recipient-name', + recipientName || t('newContract') + ), + ]) + ) + } + render () { const { senderName, senderAddress } = this.props @@ -28,10 +50,7 @@ class SenderToRecipient extends Component { }), ]), ]), - h('.sender-to-recipient__recipient', [ - h('i.fa.fa-file-text-o'), - h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')), - ]), + this.renderRecipient(), ]) ) } @@ -40,6 +59,8 @@ class SenderToRecipient extends Component { SenderToRecipient.propTypes = { senderName: PropTypes.string, senderAddress: PropTypes.string, + recipientName: PropTypes.string, + recipientAddress: PropTypes.string, } module.exports = SenderToRecipient diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 374cb71b6..c34b5cd06 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -159,3 +159,15 @@ .network-caret { margin: 0 8px 2px; } + +.network-display { + &__container { + display: flex; + align-items: center; + justify-content: flex-start; + + @media screen and (min-width: 576px) { + display: none; + } + } +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bdea1b008..263b362ca 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -526,14 +526,10 @@ } &__form { - padding: 13px 0; - width: 100%; - overflow-y: auto; + padding: 10px 0 25px; @media screen and (max-width: $break-small) { - padding: 13px 0; margin: 0; - overflow-y: auto; flex: 1 1 auto; } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 1e226b93e..08e639d74 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -106,6 +106,12 @@ input.large-input { } } + &__header-row { + padding-bottom: 10px; + display: flex; + justify-content: space-between; + } + &__footer { display: flex; flex-flow: row; @@ -138,7 +144,6 @@ input.large-input { color: #2f9ae0; font-size: 1rem; cursor: pointer; - padding-bottom: 10px; font-weight: 400; } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 5ac59fc29..de4c38232 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -480,18 +480,19 @@ SendTransactionScreen.prototype.renderMemoRow = function () { } SendTransactionScreen.prototype.renderForm = function () { - return h('div.send-v2__form', {}, [ + return h('.page-container__content', {}, [ + h('.send-v2__form', [ + this.renderFromRow(), - this.renderFromRow(), + this.renderToRow(), - this.renderToRow(), + this.renderAmountRow(), - this.renderAmountRow(), + this.renderGasRow(), - this.renderGasRow(), - - // this.renderMemoRow(), + // this.renderMemoRow(), + ]), ]) } -- cgit