diff options
Diffstat (limited to 'ui/app/send.js')
| -rw-r--r-- | ui/app/send.js | 146 |
1 files changed, 113 insertions, 33 deletions
diff --git a/ui/app/send.js b/ui/app/send.js index 009866cf7..d10c658e3 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -9,7 +9,8 @@ const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary const EthBalance = require('./components/eth-balance') const ethUtil = require('ethereumjs-util') - +const RangeSlider = require('./components/range-slider') +const Tooltip = require('./components/tooltip') module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { @@ -50,7 +51,7 @@ SendTransactionScreen.prototype.render = function () { // Sender Profile // - h('.account-data-subsection.flex-column.flex-grow', { + h('.account-data-subsection.flex-row.flex-grow', { style: { margin: '0 20px', }, @@ -59,10 +60,9 @@ SendTransactionScreen.prototype.render = function () { // header - identicon + nav h('.flex-row.flex-space-between', { style: { - marginTop: 28, + marginTop: '15px', }, }, [ - // back button h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { onClick: this.back.bind(this), @@ -77,42 +77,53 @@ SendTransactionScreen.prototype.render = function () { ]), // invisible place holder - h('i.fa.fa-users.fa-lg.invisible'), + h('i.fa.fa-users.fa-lg.invisible', { + style: { + marginTop: '28px', + }, + }), ]), // account label - h('h2.font-medium.color-forest.flex-center', { - style: { - paddingTop: 8, - marginBottom: 8, - }, - }, identity && identity.name), - // address and getter actions - h('.flex-row.flex-center', { + h('.flex-column', { style: { - marginBottom: 8, + marginTop: '10px', + alignItems: 'flex-start', }, }, [ + h('h2.font-medium.color-forest.flex-center', { + style: { + paddingTop: '8px', + marginBottom: '8px', + }, + }, identity && identity.name), - h('div', { + // address and getter actions + h('.flex-row.flex-center', { style: { - lineHeight: '16px', + marginBottom: '8px', }, - }, addressSummary(address)), + }, [ - ]), + h('div', { + style: { + lineHeight: '16px', + }, + }, addressSummary(address)), + + ]), - // balance - h('.flex-row.flex-center', [ + // balance + h('.flex-row.flex-center', [ - h(EthBalance, { - value: account && account.balance, - }), + h(EthBalance, { + value: account && account.balance, + }), + ]), ]), - ]), // @@ -123,8 +134,8 @@ SendTransactionScreen.prototype.render = function () { style: { background: '#EBEBEB', color: '#AEAEAE', - marginTop: 32, - marginBottom: 16, + marginTop: '15px', + marginBottom: '16px', }, }, [ 'Send Transaction', @@ -152,7 +163,7 @@ SendTransactionScreen.prototype.render = function () { placeholder: 'Amount', type: 'number', style: { - marginRight: 6, + marginRight: '6px', }, dataset: { persistentFormId: 'tx-amount', @@ -171,20 +182,19 @@ SendTransactionScreen.prototype.render = function () { // // Optional Fields // - h('h3.flex-center.text-transform-uppercase', { style: { background: '#EBEBEB', color: '#AEAEAE', - marginTop: 16, - marginBottom: 16, + marginTop: '16px', + marginBottom: '16px', }, }, [ 'Transactional Data (optional)', ]), // 'data' field - h('section.flex-row.flex-center', [ + h('section.flex-column.flex-center', [ h('input.large-input', { name: 'txData', placeholder: '0x01234', @@ -197,6 +207,75 @@ SendTransactionScreen.prototype.render = function () { }, }), ]), + // custom gas field + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: '5px', + }, + }, [ + 'Transaction Fee (optional)', + h(Tooltip, { + title: ` + This is used to set the transactions + gas price. seting it to 100% will use + the full recomend value. + `, + }, [ + h('i.fa.fa-question-circle', { + style: { + marginLeft: '5px', + }, + }), + ]), + ]), + + h('section.flex-column.flex-center', [ + h('.flex-row', [ + h(RangeSlider, { + name: 'gasInput', + options: { + mirrorInput: true, + defaultValue: 100, + min: 80, + max: 220, + }, + style: { + container: { + marginBottom: '16px', + }, + range: { + width: '68vw', + }, + input: { + width: '5em', + marginLeft: '5px', + }, + }, + }), + + h('div', { + style: { + fontSize: '12px', + paddingTop: '8px', + paddingLeft: '5px', + }, + }, '%'), + ]), + h('.flex-row', { + style: { + justifyContent: 'space-between', + width: '243px', + position: 'relative', + fontSize: '12px', + right: '42px', + bottom: '30px', + }, + }, [ + h('span', 'Cheaper'), h('span', 'Faster'), + ]), + ]), ]) ) } @@ -211,11 +290,12 @@ SendTransactionScreen.prototype.back = function () { this.props.dispatch(actions.backToAccountDetail(address)) } -SendTransactionScreen.prototype.onSubmit = function () { +SendTransactionScreen.prototype.onSubmit = function (gasPrice) { const recipient = document.querySelector('input[name="address"]').value const input = document.querySelector('input[name="amount"]').value const value = util.normalizeEthStringToWei(input) const txData = document.querySelector('input[name="txData"]').value + const gasMultiplier = document.querySelector('input[name="gasInput"]').value const balance = this.props.balance let message @@ -243,6 +323,6 @@ SendTransactionScreen.prototype.onSubmit = function () { if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) if (txData) txParams.data = txData - + txParams.gasMultiplier = gasMultiplier * 0.01 this.props.dispatch(actions.signTx(txParams)) } |