aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-03-20 07:12:09 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-03-21 02:56:12 +0800
commit3c1248c8169a1cb96a0ee2bc0f523fb9c765569e (patch)
treec6b75368609ea0625490ad62ddb9e38342f3736f
parent5c5f476ba4d0b26f6b8a71e16a8ff340566eb0b7 (diff)
downloadtangerine-wallet-browser-3c1248c8169a1cb96a0ee2bc0f523fb9c765569e.tar.gz
tangerine-wallet-browser-3c1248c8169a1cb96a0ee2bc0f523fb9c765569e.tar.zst
tangerine-wallet-browser-3c1248c8169a1cb96a0ee2bc0f523fb9c765569e.zip
Update confirm transaction screen
-rw-r--r--test/integration/lib/send-new-ui.js6
-rw-r--r--ui/app/components/network-display.js51
-rw-r--r--ui/app/components/pending-tx/confirm-deploy-contract.js10
-rw-r--r--ui/app/components/pending-tx/confirm-send-ether.js336
-rw-r--r--ui/app/components/sender-to-recipient.js29
-rw-r--r--ui/app/css/itcss/components/network.scss12
-rw-r--r--ui/app/css/itcss/components/send.scss6
-rw-r--r--ui/app/css/itcss/generic/index.scss7
-rw-r--r--ui/app/send-v2.js15
9 files changed, 274 insertions, 198 deletions
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(),
+ ]),
])
}