TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update confirm transaction screen

Browse Source
feature/default_network_editable
Alexander Tseung 7 years ago
parent 5c5f476ba4
commit 3c1248c816
9 changed files with 274 additions and 198 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      test/integration/lib/send-new-ui.js
  2. 51
      ui/app/components/network-display.js
  3. 10
      ui/app/components/pending-tx/confirm-deploy-contract.js
  4. 336
      ui/app/components/pending-tx/confirm-send-ether.js
  5. 29
      ui/app/components/sender-to-recipient.js
  6. 12
      ui/app/css/itcss/components/network.scss
  7. 6
      ui/app/css/itcss/components/send.scss
  8. 7
      ui/app/css/itcss/generic/index.scss
  9. 15
      ui/app/send-v2.js

6
test/integration/lib/send-new-ui.js
Unescape View File

@ -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')

51
ui/app/components/network-display.js
Unescape View File

@ -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)

10
ui/app/components/pending-tx/confirm-deploy-contract.js
Unescape View File

@ -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')),
]),

336
ui/app/components/pending-tx/confirm-send-ether.js
Unescape View File

@ -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')]),
]),
]),
])

29
ui/app/components/sender-to-recipient.js
Unescape View File

@ -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

12
ui/app/css/itcss/components/network.scss
Unescape View File

@ -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;
}
}
}

6
ui/app/css/itcss/components/send.scss
Unescape View File

@ -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;
}
}

7
ui/app/css/itcss/generic/index.scss
Unescape View File

@ -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;
}

15
ui/app/send-v2.js
Unescape View File

@ -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(),
]),
])
}

Write Preview
Loading…
Cancel
Save