aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/send.js
diff options
context:
space:
mode:
authorFrankie <frankie.pangilinan@consensys.net>2016-10-07 04:03:01 +0800
committerFrankie <frankie.pangilinan@consensys.net>2016-10-11 09:17:56 +0800
commite1b78da3e6b45037f8b9dacc4385c02c6c892f7c (patch)
tree0413e9df33ab994f9c015d6c462febd337081c1c /ui/app/send.js
parenta52c497ad10a980ec9e84e1a9dcc5122c236bcc2 (diff)
downloadtangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.tar
tangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.tar.gz
tangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.tar.bz2
tangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.tar.lz
tangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.tar.xz
tangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.tar.zst
tangerine-wallet-browser-e1b78da3e6b45037f8b9dacc4385c02c6c892f7c.zip
Add custom gas field to send page
Diffstat (limited to 'ui/app/send.js')
-rw-r--r--ui/app/send.js146
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))
}