mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Update confirm transaction screen
This commit is contained in:
parent
5c5f476ba4
commit
3c1248c816
@ -128,10 +128,10 @@ async function runSendFlowTest(assert, done) {
|
|||||||
selectState.val('send edit')
|
selectState.val('send edit')
|
||||||
reactTriggerChange(selectState[0])
|
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')
|
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')
|
assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
|
||||||
|
|
||||||
const confirmScreenRows = await queryAsync($, '.confirm-screen-rows')
|
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]
|
const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[2]
|
||||||
assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
|
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()
|
confirmScreenBackButton[0].click()
|
||||||
|
|
||||||
const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')
|
const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')
|
||||||
|
51
ui/app/components/network-display.js
Normal file
51
ui/app/components/network-display.js
Normal 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,6 +10,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
|
|||||||
const { conversionUtil } = require('../../conversion-util')
|
const { conversionUtil } = require('../../conversion-util')
|
||||||
const t = require('../../../i18n')
|
const t = require('../../../i18n')
|
||||||
const SenderToRecipient = require('../sender-to-recipient')
|
const SenderToRecipient = require('../sender-to-recipient')
|
||||||
|
const NetworkDisplay = require('../network-display')
|
||||||
|
|
||||||
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
|
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
|
||||||
|
|
||||||
@ -244,9 +245,12 @@ class ConfirmDeployContract extends Component {
|
|||||||
return (
|
return (
|
||||||
h('.page-container', [
|
h('.page-container', [
|
||||||
h('.page-container__header', [
|
h('.page-container__header', [
|
||||||
h('.page-container__back-button', {
|
h('.page-container__header-row', [
|
||||||
onClick: () => backToAccountDetail(selectedAddress),
|
h('span.page-container__back-button', {
|
||||||
}, t('back')),
|
onClick: () => backToAccountDetail(selectedAddress),
|
||||||
|
}, t('back')),
|
||||||
|
window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
|
||||||
|
]),
|
||||||
h('.page-container__title', t('confirmContract')),
|
h('.page-container__title', t('confirmContract')),
|
||||||
h('.page-container__subtitle', t('pleaseReviewTransaction')),
|
h('.page-container__subtitle', t('pleaseReviewTransaction')),
|
||||||
]),
|
]),
|
||||||
|
@ -4,7 +4,6 @@ const h = require('react-hyperscript')
|
|||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
const actions = require('../../actions')
|
const actions = require('../../actions')
|
||||||
const clone = require('clone')
|
const clone = require('clone')
|
||||||
const Identicon = require('../identicon')
|
|
||||||
const ethUtil = require('ethereumjs-util')
|
const ethUtil = require('ethereumjs-util')
|
||||||
const BN = ethUtil.BN
|
const BN = ethUtil.BN
|
||||||
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
|
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
|
||||||
@ -15,6 +14,8 @@ const {
|
|||||||
} = require('../../conversion-util')
|
} = require('../../conversion-util')
|
||||||
const GasFeeDisplay = require('../send/gas-fee-display-v2')
|
const GasFeeDisplay = require('../send/gas-fee-display-v2')
|
||||||
const t = require('../../../i18n')
|
const t = require('../../../i18n')
|
||||||
|
const SenderToRecipient = require('../sender-to-recipient')
|
||||||
|
const NetworkDisplay = require('../network-display')
|
||||||
|
|
||||||
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
|
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
|
||||||
|
|
||||||
@ -257,196 +258,181 @@ ConfirmSendEther.prototype.render = function () {
|
|||||||
this.inputs = []
|
this.inputs = []
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('div.confirm-screen-container.confirm-send-ether', [
|
// Main Send token Card
|
||||||
// Main Send token Card
|
h('.page-container', [
|
||||||
h('div.page-container', [
|
h('.page-container__header', [
|
||||||
h('div.page-container__header', [
|
h('.page-container__header-row', [
|
||||||
!txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
|
h('span.page-container__back-button', {
|
||||||
onClick: () => editTransaction(txMeta),
|
onClick: () => editTransaction(txMeta),
|
||||||
|
style: {
|
||||||
|
visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
|
||||||
|
},
|
||||||
}, 'Edit'),
|
}, 'Edit'),
|
||||||
h('div.page-container__title', title),
|
window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
|
||||||
h('div.page-container__subtitle', subtitle),
|
|
||||||
]),
|
]),
|
||||||
h('.page-container__content', [
|
h('.page-container__title', title),
|
||||||
h('div.flex-row.flex-center.confirm-screen-identicons', [
|
h('.page-container__subtitle', subtitle),
|
||||||
h('div.confirm-screen-account-wrapper', [
|
]),
|
||||||
h(
|
h('.page-container__content', [
|
||||||
Identicon,
|
h(SenderToRecipient, {
|
||||||
{
|
senderName: fromName,
|
||||||
address: fromAddress,
|
senderAddress: fromAddress,
|
||||||
diameter: 60,
|
recipientName: toName,
|
||||||
},
|
recipientAddress: txParams.to,
|
||||||
),
|
}),
|
||||||
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', {
|
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
||||||
// style: {
|
// style: {
|
||||||
// textAlign: 'center',
|
// textAlign: 'center',
|
||||||
// fontSize: '16px',
|
// fontSize: '16px',
|
||||||
// },
|
// },
|
||||||
// }, [
|
// }, [
|
||||||
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
|
// `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', [`${amountInFIAT}`]),
|
||||||
h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
|
h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
|
||||||
h('div.flex-center.confirm-memo-wrapper', [
|
h('div.flex-center.confirm-memo-wrapper', [
|
||||||
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
|
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('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.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`),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
// 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', {
|
h('div.confirm-screen-rows', [
|
||||||
onSubmit: this.onSubmit,
|
h('section.flex-row.flex-center.confirm-screen-row', [
|
||||||
}, [
|
h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
|
||||||
h('.page-container__footer', [
|
h('div.confirm-screen-section-column', [
|
||||||
// Cancel Button
|
h('div.confirm-screen-row-info', fromName),
|
||||||
h('button.btn-cancel.page-container__footer-button.allcaps', {
|
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
|
||||||
onClick: (event) => {
|
]),
|
||||||
clearSend()
|
|
||||||
this.cancel(event, txMeta)
|
|
||||||
},
|
|
||||||
}, t('cancel')),
|
|
||||||
|
|
||||||
// Accept Button
|
|
||||||
h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
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.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`),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 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')]),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
])
|
])
|
||||||
|
@ -5,6 +5,28 @@ const t = require('../../i18n')
|
|||||||
const Identicon = require('./identicon')
|
const Identicon = require('./identicon')
|
||||||
|
|
||||||
class SenderToRecipient extends Component {
|
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 () {
|
render () {
|
||||||
const { senderName, senderAddress } = this.props
|
const { senderName, senderAddress } = this.props
|
||||||
|
|
||||||
@ -28,10 +50,7 @@ class SenderToRecipient extends Component {
|
|||||||
}),
|
}),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
h('.sender-to-recipient__recipient', [
|
this.renderRecipient(),
|
||||||
h('i.fa.fa-file-text-o'),
|
|
||||||
h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')),
|
|
||||||
]),
|
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -40,6 +59,8 @@ class SenderToRecipient extends Component {
|
|||||||
SenderToRecipient.propTypes = {
|
SenderToRecipient.propTypes = {
|
||||||
senderName: PropTypes.string,
|
senderName: PropTypes.string,
|
||||||
senderAddress: PropTypes.string,
|
senderAddress: PropTypes.string,
|
||||||
|
recipientName: PropTypes.string,
|
||||||
|
recipientAddress: PropTypes.string,
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = SenderToRecipient
|
module.exports = SenderToRecipient
|
||||||
|
@ -159,3 +159,15 @@
|
|||||||
.network-caret {
|
.network-caret {
|
||||||
margin: 0 8px 2px;
|
margin: 0 8px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.network-display {
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -526,14 +526,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__form {
|
&__form {
|
||||||
padding: 13px 0;
|
padding: 10px 0 25px;
|
||||||
width: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
@media screen and (max-width: $break-small) {
|
@media screen and (max-width: $break-small) {
|
||||||
padding: 13px 0;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -106,6 +106,12 @@ input.large-input {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__header-row {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
@ -138,7 +144,6 @@ input.large-input {
|
|||||||
color: #2f9ae0;
|
color: #2f9ae0;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-bottom: 10px;
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -480,18 +480,19 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
SendTransactionScreen.prototype.renderForm = 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(),
|
|
||||||
|
|
||||||
|
]),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user