From c0483fc230ec1893f15c6f8994f63e318474846e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 13:31:53 -0700 Subject: Add token logo to send screen --- ui/app/send.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index a21a219eb..1235da223 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -11,6 +11,9 @@ const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') + +const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' + module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { @@ -58,16 +61,33 @@ SendTransactionScreen.prototype.render = function () { h('.send-screen.flex-column.flex-grow', [ + h('div', { + style: { + position: 'fixed', + zIndex: 15, // token-icon-z-index + marginTop: '-55px', + marginLeft: '20%', + } + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), + ]), + // // Sender Profile // - h('.account-data-subsection.flex-row.flex-grow', { style: { margin: '0 20px', + width: '335px', + background: 'white', // $white + marginTop: '-15px', + zIndex: 13, // $send-screen-z-index + display: 'flex', }, }, [ - // header - identicon + nav h('.flex-row.flex-space-between', { style: { -- cgit v1.2.3 From 2a5f2c7f4041006daf5bda4d51117b4fe9544e98 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 17:38:29 -0700 Subject: Add responsive container; add send token copy --- ui/app/send.js | 139 +++++++++++++++++++-------------------------------------- 1 file changed, 46 insertions(+), 93 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 1235da223..66ba21e3e 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -59,14 +59,17 @@ SendTransactionScreen.prototype.render = function () { return ( - h('.send-screen.flex-column.flex-grow', [ - - h('div', { + h('.send-screen.flex-column.flex-grow', { + style: { + background: '#FFFFFF', // $background-white + marginLeft: '3.5%', + marginRight: '3.5%', + } + }, [ + h('section.flex-center.flex-row', { style: { - position: 'fixed', - zIndex: 15, // token-icon-z-index - marginTop: '-55px', - marginLeft: '20%', + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', } }, [ h(Identicon, { @@ -76,102 +79,52 @@ SendTransactionScreen.prototype.render = function () { ]), // - // Sender Profile + // Required Fields // - h('.account-data-subsection.flex-row.flex-grow', { + + h('h3.flex-center', { style: { - margin: '0 20px', - width: '335px', - background: 'white', // $white marginTop: '-15px', - zIndex: 13, // $send-screen-z-index - display: 'flex', + fontSize: '20px', }, }, [ - // header - identicon + nav - h('.flex-row.flex-space-between', { - style: { - marginTop: '15px', - }, - }, [ - // back button - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: this.back.bind(this), - }), - - // large identicon - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(Identicon, { - diameter: 62, - address: address, - }), - ]), - - // invisible place holder - h('i.fa.fa-users.fa-lg.invisible', { - style: { - marginTop: '28px', - }, - }), - - ]), - - // account label - - h('.flex-column', { - style: { - marginTop: '10px', - alignItems: 'flex-start', - }, - }, [ - h('h2.font-medium.color-forest.flex-center', { - style: { - paddingTop: '8px', - marginBottom: '8px', - }, - }, identity && identity.name), - - // address and getter actions - h('.flex-row.flex-center', { - style: { - marginBottom: '8px', - }, - }, [ - - h('div', { - style: { - lineHeight: '16px', - }, - }, addressSummary(address)), - - ]), - - // balance - h('.flex-row.flex-center', [ - - h(EthBalance, { - value: account && account.balance, - conversionRate, - currentCurrency, - }), - - ]), - ]), + 'Send Tokens', ]), - // - // Required Fields - // + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '16px', + }, + }, [ + 'Send Tokens to anyone with an Ethereum account', + ]), - h('h3.flex-center.text-transform-uppercase', { + h('h3.flex-center', { style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginTop: '15px', - marginBottom: '16px', + textAlign: 'center', + fontSize: '16px', + }, + }, [ + 'Your Aragon Token Balance is:', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '43px', + }, + }, [ + '2.34', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '16px', }, }, [ - 'Send Transaction', + 'ANT', ]), // error message @@ -194,7 +147,7 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input', { name: 'amount', - placeholder: 'Amount', + placeholder: '0', type: 'number', style: { marginRight: '6px', -- cgit v1.2.3 From fec3e64d630d17d035df43203bbfbf061930cd61 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 18:07:58 -0700 Subject: Add high-level css layout for Send Token --- ui/app/send.js | 101 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 78 insertions(+), 23 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 66ba21e3e..bd4cf4ee1 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -143,7 +143,17 @@ SendTransactionScreen.prototype.render = function () { ]), // 'amount' and send button - h('section.flex-row.flex-center', [ + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Amount']), + h('span', { style: {} }, ['Token <> USD']), + ]), h('input.large-input', { name: 'amount', @@ -157,43 +167,88 @@ SendTransactionScreen.prototype.render = function () { }, }), - h('button.primary', { - onClick: this.onSubmit.bind(this), + ]), + + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { style: { - textTransform: 'uppercase', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Gas Fee:']), + h('span', { style: {} }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'Gas Fee', + placeholder: '0', + type: 'number', + style: { + marginRight: '6px', }, - }, 'Next'), + // dataset: { + // persistentFormId: 'tx-amount', + // }, + }), ]), // // Optional Fields // - h('h3.flex-center.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginTop: '16px', - marginBottom: '16px', - }, - }, [ - 'Transaction Data (optional)', - ]), - // 'data' field h('section.flex-column.flex-center', [ - h('input.large-input', { - name: 'txData', - placeholder: '0x01234', + + h('div.flex-row.flex-center', { style: { width: '100%', - resize: 'none', - }, - dataset: { - persistentFormId: 'tx-data', + justifyContent: 'flex-start', + } + },[ + h('span', { style: {} }, ['Transaction Memo (optional)']), + h('span', { style: {} }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'memo', + placeholder: '', + type: 'string', + style: { + marginRight: '6px', }, }), + ]), + + + + // h('h3.flex-center.text-transform-uppercase', { + // style: { + // background: '#EBEBEB', + // color: '#AEAEAE', + // marginTop: '16px', + // marginBottom: '16px', + // }, + // }, [ + // 'Transaction Data (optional)', + // ]), + + // // 'data' field + // h('section.flex-column.flex-center', [ + // h('input.large-input', { + // name: 'txData', + // placeholder: '0x01234', + // style: { + // width: '100%', + // resize: 'none', + // }, + // dataset: { + // persistentFormId: 'tx-data', + // }, + // }), + // ]), ]) ) } -- cgit v1.2.3 From 970988167982a79c131331a7585512b5e53c9a95 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 18:54:21 -0700 Subject: Center send token content; hook up 'Next' and 'Cancel' buttons --- ui/app/send.js | 350 +++++++++++++++++++++++++++++++-------------------------- 1 file changed, 191 insertions(+), 159 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index bd4cf4ee1..513c2462f 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -59,197 +59,229 @@ SendTransactionScreen.prototype.render = function () { return ( - h('.send-screen.flex-column.flex-grow', { + h('div.flex-column.flex-grow', { style: { - background: '#FFFFFF', // $background-white - marginLeft: '3.5%', - marginRight: '3.5%', - } + // overflow: 'scroll', + minWidth: '355px', // TODO: maxWidth TBD, use home.html + }, }, [ - h('section.flex-center.flex-row', { - style: { - zIndex: 15, // $token-icon-z-index - marginTop: '-35px', - } - }, [ - h(Identicon, { - address: ARAGON, - diameter: 76, - }), - ]), - - // - // Required Fields - // - - h('h3.flex-center', { - style: { - marginTop: '-15px', - fontSize: '20px', - }, - }, [ - 'Send Tokens', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - 'Send Tokens to anyone with an Ethereum account', - ]), - h('h3.flex-center', { + // Main Send token Card + h('div.send-screen.flex-column.flex-grow', { style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - 'Your Aragon Token Balance is:', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '43px', - }, - }, [ - '2.34', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '16px', - }, + marginLeft: '3.5%', + marginRight: '3.5%', + background: '#FFFFFF', // $background-white + } }, [ - 'ANT', - ]), - - // error message - props.error && h('span.error.flex-center', props.error), - - // 'to' field - h('section.flex-row.flex-center', [ - h(EnsInput, { - name: 'address', - placeholder: 'Recipient Address', - onChange: this.recipientDidChange.bind(this), - network, - identities, - addressBook, - }), - ]), - - // 'amount' and send button - h('section.flex-column.flex-center', [ - - h('div.flex-row.flex-center', { + h('section.flex-center.flex-row', { style: { - width: '100%', - justifyContent: 'space-between', + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', } - },[ - h('span', { style: {} }, ['Amount']), - h('span', { style: {} }, ['Token <> USD']), + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), ]), - h('input.large-input', { - name: 'amount', - placeholder: '0', - type: 'number', + // + // Required Fields + // + + h('h3.flex-center', { style: { - marginRight: '6px', + marginTop: '-15px', + fontSize: '16px', }, - dataset: { - persistentFormId: 'tx-amount', + }, [ + 'Send Tokens', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', }, - }), + }, [ + 'Send Tokens to anyone with an Ethereum account', + ]), - ]), + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'Your Aragon Token Balance is:', + ]), - h('section.flex-column.flex-center', [ + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '36px', + }, + }, [ + '2.34', + ]), - h('div.flex-row.flex-center', { + h('h3.flex-center', { style: { - width: '100%', - justifyContent: 'space-between', - } - },[ - h('span', { style: {} }, ['Gas Fee:']), - h('span', { style: {} }, ['What\'s this?']), + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'ANT', ]), - h('input.large-input', { - name: 'Gas Fee', - placeholder: '0', - type: 'number', + // error message + props.error && h('span.error.flex-center', props.error), + + // 'to' field + h('section.flex-row.flex-center', { style: { - marginRight: '6px', + fontSize: '12px', }, - // dataset: { - // persistentFormId: 'tx-amount', - // }, - }), + }, [ + h(EnsInput, { + name: 'address', + placeholder: 'Recipient Address', + onChange: this.recipientDidChange.bind(this), + network, + identities, + addressBook, + }), + ]), - ]), + // 'amount' and send button + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Amount']), + h('span', { style: {} }, ['Token <> USD']), + ]), + + h('input.large-input', { + name: 'amount', + placeholder: '0', + type: 'number', + style: { + marginRight: '6px', + fontSize: '12px', + }, + dataset: { + persistentFormId: 'tx-amount', + }, + }), - // - // Optional Fields - // + ]), - h('section.flex-column.flex-center', [ + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Gas Fee:']), + h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'Gas Fee', + placeholder: '0', + type: 'number', + style: { + fontSize: '12px', + marginRight: '6px', + }, + // dataset: { + // persistentFormId: 'tx-amount', + // }, + }), - h('div.flex-row.flex-center', { - style: { - width: '100%', - justifyContent: 'flex-start', - } - },[ - h('span', { style: {} }, ['Transaction Memo (optional)']), - h('span', { style: {} }, ['What\'s this?']), ]), - h('input.large-input', { - name: 'memo', - placeholder: '', - type: 'string', - style: { - marginRight: '6px', - }, - }), + // + // Optional Fields + // + + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'flex-start', + } + },[ + h('span', { style: {} }, ['Transaction Memo (optional)']), + h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'memo', + placeholder: '', + type: 'string', + style: { + marginRight: '6px', + }, + }), + ]), + // h('h3.flex-center.text-transform-uppercase', { + // style: { + // background: '#EBEBEB', + // color: '#AEAEAE', + // marginTop: '16px', + // marginBottom: '16px', + // }, + // }, [ + // 'Transaction Data (optional)', + // ]), + + // // 'data' field + // h('section.flex-column.flex-center', [ + // h('input.large-input', { + // name: 'txData', + // placeholder: '0x01234', + // style: { + // width: '100%', + // resize: 'none', + // }, + // dataset: { + // persistentFormId: 'tx-data', + // }, + // }), + // ]), ]), + // Buttons underneath card + h('button.primary', { + onClick: this.onSubmit.bind(this), + style: { + textTransform: 'uppercase', + }, + }, 'Next'), - // h('h3.flex-center.text-transform-uppercase', { - // style: { - // background: '#EBEBEB', - // color: '#AEAEAE', - // marginTop: '16px', - // marginBottom: '16px', - // }, - // }, [ - // 'Transaction Data (optional)', - // ]), - - // // 'data' field - // h('section.flex-column.flex-center', [ - // h('input.large-input', { - // name: 'txData', - // placeholder: '0x01234', - // style: { - // width: '100%', - // resize: 'none', - // }, - // dataset: { - // persistentFormId: 'tx-data', - // }, - // }), - // ]), + h('button.primary', { + onClick: this.back.bind(this), + style: { + textTransform: 'uppercase', + }, + }, 'Cancel'), ]) + ) } -- cgit v1.2.3 From 25259cc2cdadce71514d2e37cc9e0ea4bce21f40 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 19:37:08 -0700 Subject: Center action buttons, add minor style adjustments --- ui/app/send.js | 48 ++++++++++++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 18 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 513c2462f..a24989e56 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -72,6 +72,7 @@ SendTransactionScreen.prototype.render = function () { marginLeft: '3.5%', marginRight: '3.5%', background: '#FFFFFF', // $background-white + boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', } }, [ h('section.flex-center.flex-row', { @@ -92,7 +93,7 @@ SendTransactionScreen.prototype.render = function () { h('h3.flex-center', { style: { - marginTop: '-15px', + marginTop: '-18px', fontSize: '16px', }, }, [ @@ -111,6 +112,7 @@ SendTransactionScreen.prototype.render = function () { h('h3.flex-center', { style: { textAlign: 'center', + marginTop: '2px', fontSize: '12px', }, }, [ @@ -121,6 +123,7 @@ SendTransactionScreen.prototype.render = function () { style: { textAlign: 'center', fontSize: '36px', + marginTop: '8px', }, }, [ '2.34', @@ -130,6 +133,7 @@ SendTransactionScreen.prototype.render = function () { style: { textAlign: 'center', fontSize: '12px', + marginTop: '4px', }, }, [ 'ANT', @@ -156,7 +160,6 @@ SendTransactionScreen.prototype.render = function () { // 'amount' and send button h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -184,7 +187,6 @@ SendTransactionScreen.prototype.render = function () { ]), h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -215,8 +217,11 @@ SendTransactionScreen.prototype.render = function () { // Optional Fields // - h('section.flex-column.flex-center', [ - + h('section.flex-column.flex-center', { + style: { + marginBottom: '10px', + }, + }, [ h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -225,7 +230,6 @@ SendTransactionScreen.prototype.render = function () { } },[ h('span', { style: {} }, ['Transaction Memo (optional)']), - h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), ]), h('input.large-input', { @@ -266,20 +270,28 @@ SendTransactionScreen.prototype.render = function () { ]), // Buttons underneath card + h('section.flex-column.flex-center', [ - h('button.primary', { - onClick: this.onSubmit.bind(this), - style: { - textTransform: 'uppercase', - }, - }, 'Next'), + h('button.light', { + onClick: this.onSubmit.bind(this), + style: { + marginTop: '8px', + width: '8em', + background: '#FFFFFF' + }, + }, 'Next'), - h('button.primary', { - onClick: this.back.bind(this), - style: { - textTransform: 'uppercase', - }, - }, 'Cancel'), + h('button.light', { + onClick: this.back.bind(this), + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, + }, 'Cancel'), + + ]), ]) ) -- cgit v1.2.3 From 8ace4710ffa1ca56e59e5888fd076fecfae8a911 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 19:46:59 -0700 Subject: Clean up send screen --- ui/app/send.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index a24989e56..873db8473 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -320,7 +320,11 @@ SendTransactionScreen.prototype.onSubmit = function () { const nickname = state.nickname || ' ' const input = document.querySelector('input[name="amount"]').value const value = util.normalizeEthStringToWei(input) - const txData = document.querySelector('input[name="txData"]').value + // TODO: check with team on whether txData is removed completely. + const txData = false; + // Must replace with memo data. + // const txData = document.querySelector('input[name="txData"]').value + const balance = this.props.balance let message @@ -339,7 +343,7 @@ SendTransactionScreen.prototype.onSubmit = function () { return this.props.dispatch(actions.displayWarning(message)) } - if (!isHex(ethUtil.stripHexPrefix(txData)) && txData) { + if (txData && !isHex(ethUtil.stripHexPrefix(txData))) { message = 'Transaction data must be hex string.' return this.props.dispatch(actions.displayWarning(message)) } -- cgit v1.2.3 From 689f60d1ce811f542e70da523bcb89b12242440d Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 22:44:39 -0700 Subject: Add rounded background to total token, with minor styling tweaks --- ui/app/send.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 873db8473..de9e64ad1 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -272,7 +272,7 @@ SendTransactionScreen.prototype.render = function () { // Buttons underneath card h('section.flex-column.flex-center', [ - h('button.light', { + h('button.btn-light', { onClick: this.onSubmit.bind(this), style: { marginTop: '8px', @@ -281,7 +281,7 @@ SendTransactionScreen.prototype.render = function () { }, }, 'Next'), - h('button.light', { + h('button.btn-light', { onClick: this.back.bind(this), style: { background: '#F7F7F7', // $alabaster -- cgit v1.2.3 From 49e37137042ba2f23dd48db92365f468f9d59e13 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 18:24:48 -0700 Subject: Cleanup send, move send token into separate func to make room for send ETH --- ui/app/send.js | 254 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 219 insertions(+), 35 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index de9e64ad1..ab527019f 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -61,7 +61,6 @@ SendTransactionScreen.prototype.render = function () { h('div.flex-column.flex-grow', { style: { - // overflow: 'scroll', minWidth: '355px', // TODO: maxWidth TBD, use home.html }, }, [ @@ -87,10 +86,6 @@ SendTransactionScreen.prototype.render = function () { }), ]), - // - // Required Fields - // - h('h3.flex-center', { style: { marginTop: '-18px', @@ -213,10 +208,6 @@ SendTransactionScreen.prototype.render = function () { ]), - // - // Optional Fields - // - h('section.flex-column.flex-center', { style: { marginBottom: '10px', @@ -241,32 +232,6 @@ SendTransactionScreen.prototype.render = function () { }, }), ]), - - // h('h3.flex-center.text-transform-uppercase', { - // style: { - // background: '#EBEBEB', - // color: '#AEAEAE', - // marginTop: '16px', - // marginBottom: '16px', - // }, - // }, [ - // 'Transaction Data (optional)', - // ]), - - // // 'data' field - // h('section.flex-column.flex-center', [ - // h('input.large-input', { - // name: 'txData', - // placeholder: '0x01234', - // style: { - // width: '100%', - // resize: 'none', - // }, - // dataset: { - // persistentFormId: 'tx-data', - // }, - // }), - // ]), ]), // Buttons underneath card @@ -290,7 +255,226 @@ SendTransactionScreen.prototype.render = function () { width: '8em', }, }, 'Cancel'), + ]), + ]) + + ) +} + +// WIP - hyperscript for renderSendToken - hook up later +SendTransactionScreen.prototype.renderSendToken = function () { + this.persistentFormParentId = 'send-tx-form' + + const props = this.props + const { + address, + account, + identity, + network, + identities, + addressBook, + conversionRate, + currentCurrency, + } = props + + return ( + + h('div.flex-column.flex-grow', { + style: { + minWidth: '355px', // TODO: maxWidth TBD, use home.html + }, + }, [ + + // Main Send token Card + h('div.send-screen.flex-column.flex-grow', { + style: { + marginLeft: '3.5%', + marginRight: '3.5%', + background: '#FFFFFF', // $background-white + boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', + } + }, [ + h('section.flex-center.flex-row', { + style: { + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', + } + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), + ]), + + h('h3.flex-center', { + style: { + marginTop: '-18px', + fontSize: '16px', + }, + }, [ + 'Send Tokens', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'Send Tokens to anyone with an Ethereum account', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + marginTop: '2px', + fontSize: '12px', + }, + }, [ + 'Your Aragon Token Balance is:', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '36px', + marginTop: '8px', + }, + }, [ + '2.34', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + marginTop: '4px', + }, + }, [ + 'ANT', + ]), + + // error message + props.error && h('span.error.flex-center', props.error), + + // 'to' field + h('section.flex-row.flex-center', { + style: { + fontSize: '12px', + }, + }, [ + h(EnsInput, { + name: 'address', + placeholder: 'Recipient Address', + onChange: this.recipientDidChange.bind(this), + network, + identities, + addressBook, + }), + ]), + + // 'amount' and send button + h('section.flex-column.flex-center', [ + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Amount']), + h('span', { style: {} }, ['Token <> USD']), + ]), + + h('input.large-input', { + name: 'amount', + placeholder: '0', + type: 'number', + style: { + marginRight: '6px', + fontSize: '12px', + }, + dataset: { + persistentFormId: 'tx-amount', + }, + }), + + ]), + + h('section.flex-column.flex-center', [ + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Gas Fee:']), + h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'Gas Fee', + placeholder: '0', + type: 'number', + style: { + fontSize: '12px', + marginRight: '6px', + }, + // dataset: { + // persistentFormId: 'tx-amount', + // }, + }), + + ]), + + h('section.flex-column.flex-center', { + style: { + marginBottom: '10px', + }, + }, [ + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'flex-start', + } + },[ + h('span', { style: {} }, ['Transaction Memo (optional)']), + ]), + h('input.large-input', { + name: 'memo', + placeholder: '', + type: 'string', + style: { + marginRight: '6px', + }, + }), + ]), + ]), + + // Buttons underneath card + h('section.flex-column.flex-center', [ + + h('button.btn-light', { + onClick: this.onSubmit.bind(this), + style: { + marginTop: '8px', + width: '8em', + background: '#FFFFFF' + }, + }, 'Next'), + + h('button.btn-light', { + onClick: this.back.bind(this), + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, + }, 'Cancel'), ]), ]) -- cgit v1.2.3 From d6116aaf57e4d27694c2c5a21b6fabb24f072508 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 16:59:00 -0700 Subject: [WIP] Tweak Send Screen Styles --- ui/app/send.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index ab527019f..01f3d543a 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -59,20 +59,13 @@ SendTransactionScreen.prototype.render = function () { return ( - h('div.flex-column.flex-grow', { - style: { - minWidth: '355px', // TODO: maxWidth TBD, use home.html - }, + h('div.send-screen-wrapper', { + style: {}, }, [ // Main Send token Card - h('div.send-screen.flex-column.flex-grow', { - style: { - marginLeft: '3.5%', - marginRight: '3.5%', - background: '#FFFFFF', // $background-white - boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', - } + h('div.send-screen-card', { + style: {} }, [ h('section.flex-center.flex-row', { style: { -- cgit v1.2.3 From d1bc7111b52e86b7081ccbb3f2021de28e11d476 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 09:03:42 -0700 Subject: [WIP] - Styling Send Screen - Need to bring in data contract for signTx --- ui/app/send.js | 170 ++++++++++----------------------------------------------- 1 file changed, 29 insertions(+), 141 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 01f3d543a..3b52c9500 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -67,75 +67,39 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-card', { style: {} }, [ - h('section.flex-center.flex-row', { - style: { - zIndex: 15, // $token-icon-z-index - marginTop: '-35px', - } - }, [ - h(Identicon, { - address: ARAGON, - diameter: 76, - }), - ]), - h('h3.flex-center', { - style: { - marginTop: '-18px', - fontSize: '16px', - }, - }, [ - 'Send Tokens', - ]), + h('img.send-eth-icon', { + src: '../images/eth_logo.svg', + style: {}, + }), - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '12px', - }, - }, [ - 'Send Tokens to anyone with an Ethereum account', - ]), + h('div', {}, [ + 'Send' + ]) - h('h3.flex-center', { - style: { - textAlign: 'center', - marginTop: '2px', - fontSize: '12px', - }, - }, [ - 'Your Aragon Token Balance is:', - ]), + h('div', {}, [ + 'Send Ethereum to anyone with an Ethereum account' + ]) - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '36px', - marginTop: '8px', - }, - }, [ - '2.34', - ]), + h('div', {}, [ - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '12px', - marginTop: '4px', - }, - }, [ - 'ANT', - ]), + h('div', {}, [ + 'From:' + ]), - // error message - props.error && h('span.error.flex-center', props.error), + h('input', { + placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'. + }, [ + ]) + + ]) + + h('div', {}, [ + + h('div', {}, [ + 'To:' + ]), - // 'to' field - h('section.flex-row.flex-center', { - style: { - fontSize: '12px', - }, - }, [ h(EnsInput, { name: 'address', placeholder: 'Recipient Address', @@ -144,87 +108,11 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, }), - ]), - // 'amount' and send button - h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'space-between', - } - },[ - h('span', { style: {} }, ['Amount']), - h('span', { style: {} }, ['Token <> USD']), - ]), - - h('input.large-input', { - name: 'amount', - placeholder: '0', - type: 'number', - style: { - marginRight: '6px', - fontSize: '12px', - }, - dataset: { - persistentFormId: 'tx-amount', - }, - }), - - ]), - - h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'space-between', - } - },[ - h('span', { style: {} }, ['Gas Fee:']), - h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), - ]), - - h('input.large-input', { - name: 'Gas Fee', - placeholder: '0', - type: 'number', - style: { - fontSize: '12px', - marginRight: '6px', - }, - // dataset: { - // persistentFormId: 'tx-amount', - // }, - }), + ]) - ]), - - h('section.flex-column.flex-center', { - style: { - marginBottom: '10px', - }, - }, [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'flex-start', - } - },[ - h('span', { style: {} }, ['Transaction Memo (optional)']), - ]), + // [WIP] - Styling Send Screen - Need to bring in data contract for signTx - h('input.large-input', { - name: 'memo', - placeholder: '', - type: 'string', - style: { - marginRight: '6px', - }, - }), - ]), ]), // Buttons underneath card @@ -254,7 +142,7 @@ SendTransactionScreen.prototype.render = function () { ) } -// WIP - hyperscript for renderSendToken - hook up later +// WIP - hyperscript for renderSendToken - hook up later - can take pieces to re-implement SendTransactionScreen.prototype.renderSendToken = function () { this.persistentFormParentId = 'send-tx-form' -- cgit v1.2.3 From 97a6a8e4f6ea41373061e9dccdd1ad0b002cdcac Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 12:47:48 -0700 Subject: Add layout and props for send screen inputs --- ui/app/send.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 66 insertions(+), 11 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 3b52c9500..4317fb3a2 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -11,6 +11,7 @@ const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') +const { getSelectedIdentity } = require('./selectors') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -18,6 +19,7 @@ module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { var result = { + selectedIdentity: getSelectedIdentity(state), address: state.metamask.selectedAddress, accounts: state.metamask.accounts, identities: state.metamask.identities, @@ -47,6 +49,7 @@ SendTransactionScreen.prototype.render = function () { const props = this.props const { + selectedIdentity, address, account, identity, @@ -75,26 +78,42 @@ SendTransactionScreen.prototype.render = function () { h('div', {}, [ 'Send' - ]) + ]), - h('div', {}, [ + h('div', { + style: { + textAlign: 'center', + }, + }, [ 'Send Ethereum to anyone with an Ethereum account' - ]) + ]), - h('div', {}, [ + h('div.send-screen-input-wrapper', {}, [ h('div', {}, [ 'From:' ]), - h('input', { - placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'. + h('input.large-input.send-screen-input', { + list: 'accounts', + value: selectedIdentity.address }, [ - ]) + ]), - ]) + h('datalist#accounts', {}, [ + Object.keys(props.identities).map((key) => { + const identity = props.identities[key] + return h('option', { + value: identity.address, + label: identity.name, + key: identity.address, + }) + }), + ]), - h('div', {}, [ + ]), + + h('div.send-screen-input-wrapper', {}, [ h('div', {}, [ 'To:' @@ -109,9 +128,45 @@ SendTransactionScreen.prototype.render = function () { addressBook, }), - ]) + ]), + + h('div.send-screen-input-wrapper', {}, [ + + h('div.send-screen-amount-labels', {}, [ + h('span', {}, ['Amount']), + h('span', {}, ['ETH <> USD']) + ]), + + h('input.large-input.send-screen-input', { + placeholder: '$0 USD', + }, []), + + ]), + + h('div.send-screen-input-wrapper', {}, [ + + h('div.send-screen-gas-labels', {}, [ + h('span', {}, [ + h('i.fa.fa-bolt', {}, []), + 'Gas fee:', + ]), + h('span', {}, ['What\'s this?']), + ]), + + h('input.large-input.send-screen-input', { + placeholder: '0', + }, []), + + ]), + + h('div.send-screen-input-wrapper', {}, [ - // [WIP] - Styling Send Screen - Need to bring in data contract for signTx + h('div', {}, ['Transaction memo (optional)']), + + h('input.large-input.send-screen-input', {}, [ + ]), + + ]), ]), -- cgit v1.2.3 From c1fd19393f90968bc5a60a77812eac3f8785e3a3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 13:09:27 -0700 Subject: Remove border and apply background color to gas input --- ui/app/send.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 4317fb3a2..66cde1b82 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -134,7 +134,7 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), - h('span', {}, ['ETH <> USD']) + h('span', {}, ['ETH <> USD']), //holding on icon from design ]), h('input.large-input.send-screen-input', { @@ -148,12 +148,20 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-gas-labels', {}, [ h('span', {}, [ h('i.fa.fa-bolt', {}, []), + + // not working ATM. + // Ship with fa-bolt if it's slowing us down... + // h('img.send-screen-bolt-icon', { + // src: '../images/mm_bolt.svg', + // style: {}, + // }, []), + 'Gas fee:', ]), h('span', {}, ['What\'s this?']), ]), - h('input.large-input.send-screen-input', { + h('input.large-input.send-screen-gas-input', { placeholder: '0', }, []), -- cgit v1.2.3 From 3b5749c3bc3334156b311c293a584145f21171e0 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 15:05:23 -0700 Subject: [WIP] Use hardcoded values for dispatching from signTx --- ui/app/send.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 80 insertions(+), 17 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 66cde1b82..f541d741c 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -42,6 +42,19 @@ function mapStateToProps (state) { inherits(SendTransactionScreen, PersistentForm) function SendTransactionScreen () { PersistentForm.call(this) + + // [WIP] These are the bare minimum of tx props needed to sign a transaction + // We will need a few more for contract-related interactions + this.state = { + newTx: { + from: '', + to: '', + // these values are hardcoded, so "Next" can be clicked + amount: '0.0001', // see L544 + gasPrice: '4a817c800', + gas: '0x7b0d', + }, + } } SendTransactionScreen.prototype.render = function () { @@ -60,6 +73,9 @@ SendTransactionScreen.prototype.render = function () { currentCurrency, } = props + console.log({ selectedIdentity, identities }) + console.log("SendTransactionScreen state:", this.state) + return ( h('div.send-screen-wrapper', { @@ -96,7 +112,19 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input.send-screen-input', { list: 'accounts', - value: selectedIdentity.address + placeholder: 'Account', + value: this.state.from, + onChange: (event) => { + console.log("event", event.target.value) + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + from: event.target.value, + } + ), + }) + }, }, [ ]), @@ -122,7 +150,17 @@ SendTransactionScreen.prototype.render = function () { h(EnsInput, { name: 'address', placeholder: 'Recipient Address', - onChange: this.recipientDidChange.bind(this), + onChange: () => { + console.log("event", event.target.value) + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + to: event.target.value, + } + ), + }) + }, network, identities, addressBook, @@ -138,7 +176,18 @@ SendTransactionScreen.prototype.render = function () { ]), h('input.large-input.send-screen-input', { - placeholder: '$0 USD', + placeholder: '0 ETH', + type: 'number', + onChange: () => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + amount: event.target.value, + } + ), + }) + } }, []), ]), @@ -444,11 +493,18 @@ SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickna SendTransactionScreen.prototype.onSubmit = function () { const state = this.state || {} - const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') + + // const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') + const recipient = state.newTx.to + const nickname = state.nickname || ' ' - const input = document.querySelector('input[name="amount"]').value - const value = util.normalizeEthStringToWei(input) - // TODO: check with team on whether txData is removed completely. + + // const input = document.querySelector('input[name="amount"]').value + // const input = state.newTx.value + // const value = util.normalizeEthStringToWei(input) + + // https://consensys.slack.com/archives/G1L7H42BT/p1503439134000169?thread_ts=1503438076.000411&cid=G1L7H42BT + // From @kumavis: "not needed for MVP but we will end up adding it again so consider just adding it now" const txData = false; // Must replace with memo data. // const txData = document.querySelector('input[name="txData"]').value @@ -456,15 +512,15 @@ SendTransactionScreen.prototype.onSubmit = function () { const balance = this.props.balance let message - if (value.gt(balance)) { - message = 'Insufficient funds.' - return this.props.dispatch(actions.displayWarning(message)) - } + // if (value.gt(balance)) { + // message = 'Insufficient funds.' + // return this.props.dispatch(actions.displayWarning(message)) + // } - if (input < 0) { - message = 'Can not send negative amounts of ETH.' - return this.props.dispatch(actions.displayWarning(message)) - } + // if (input < 0) { + // message = 'Can not send negative amounts of ETH.' + // return this.props.dispatch(actions.displayWarning(message)) + // } if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) { message = 'Recipient address is invalid.' @@ -481,8 +537,15 @@ SendTransactionScreen.prototype.onSubmit = function () { this.props.dispatch(actions.addToAddressBook(recipient, nickname)) var txParams = { - from: this.props.address, - value: '0x' + value.toString(16), + // from: this.props.address, + from: this.state.newTx.to, + + // value: '0x' + value.toString(16), + value: '0x38d7ea4c68000', // hardcoded + + // New: gas will now be specified on this step + gas: this.state.newTx.gas, + gasPrice: this.state.newTx.gasPrice } if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) -- cgit v1.2.3 From 1528fae9ea2bedd84129639a8a37aa90676f9631 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 15:13:50 -0700 Subject: [WIP] Successfully sign a hardcoded transaction, hook up remaining inputs and error validation later --- ui/app/send.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index f541d741c..02a38deaf 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -522,10 +522,10 @@ SendTransactionScreen.prototype.onSubmit = function () { // return this.props.dispatch(actions.displayWarning(message)) // } - if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) { - message = 'Recipient address is invalid.' - return this.props.dispatch(actions.displayWarning(message)) - } + // if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) { + // message = 'Recipient address is invalid.' + // return this.props.dispatch(actions.displayWarning(message)) + // } if (txData && !isHex(ethUtil.stripHexPrefix(txData))) { message = 'Transaction data must be hex string.' @@ -536,16 +536,23 @@ SendTransactionScreen.prototype.onSubmit = function () { this.props.dispatch(actions.addToAddressBook(recipient, nickname)) - var txParams = { - // from: this.props.address, - from: this.state.newTx.to, + // var txParams = { + // // from: this.props.address, + // from: this.state.newTx.to, + + // // value: '0x' + value.toString(16), + // value: '0x38d7ea4c68000', // hardcoded - // value: '0x' + value.toString(16), - value: '0x38d7ea4c68000', // hardcoded + // // New: gas will now be specified on this step + // gas: this.state.newTx.gas, + // gasPrice: this.state.newTx.gasPrice + // } - // New: gas will now be specified on this step - gas: this.state.newTx.gas, - gasPrice: this.state.newTx.gasPrice + // Hardcoded + var txParams = { + from: '0x82df11beb942beeed58d466fcb0f0791365c7684', + to: '0xa43126b621db5b4fd98f959d9e5499f655913d34', + value: '0x0', } if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) -- cgit v1.2.3 From 5893f2fd19bdab10a017c56202f5fe0cf440d29e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 15:22:00 -0700 Subject: Add data field to send token screen --- ui/app/send.js | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 02a38deaf..ef4e92e26 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -53,6 +53,8 @@ function SendTransactionScreen () { amount: '0.0001', // see L544 gasPrice: '4a817c800', gas: '0x7b0d', + txData: null, + memo: '', }, } } @@ -220,7 +222,38 @@ SendTransactionScreen.prototype.render = function () { h('div', {}, ['Transaction memo (optional)']), - h('input.large-input.send-screen-input', {}, [ + h('input.large-input.send-screen-input', { + onChange: () => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + memo: event.target.value, + } + ), + }) + }, + }, [ + ]), + + ]), + + h('div.send-screen-input-wrapper', {}, [ + + h('div', {}, ['Data (optional)']), + + h('input.large-input.send-screen-input', { + onChange: () => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + txData: event.target.value, + } + ), + }) + }, + }, [ ]), ]), -- cgit v1.2.3 From d990a8eb86a231170194e8c4497deac5aa199c1d Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 24 Aug 2017 13:54:48 -0230 Subject: Add 'customize' text to gas input. --- ui/app/send.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index ef4e92e26..c77bc49f9 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -216,6 +216,10 @@ SendTransactionScreen.prototype.render = function () { placeholder: '0', }, []), + h('div.send-screen-gas-input-customize', {}, [ + 'Customize' + ]), + ]), h('div.send-screen-input-wrapper', {}, [ -- cgit v1.2.3 From 5677fdaf68ff28b9d9b4b27be1737101489f3861 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 24 Aug 2017 17:25:03 -0230 Subject: Toggling tooltip. --- ui/app/send.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index c77bc49f9..a9b8bb5cc 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -11,6 +11,7 @@ const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') +const NewTooltip = require('./components/new-tooltip.js') const { getSelectedIdentity } = require('./selectors') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -56,6 +57,7 @@ function SendTransactionScreen () { txData: null, memo: '', }, + tooltipShown: false, } } @@ -216,10 +218,16 @@ SendTransactionScreen.prototype.render = function () { placeholder: '0', }, []), - h('div.send-screen-gas-input-customize', {}, [ + h('div.send-screen-gas-input-customize', { + onClick: this.toggleTooltip.bind(this), + }, [ 'Customize' ]), + h(NewTooltip, { + show: this.state.tooltipShown, + }), + ]), h('div.send-screen-input-wrapper', {}, [ @@ -511,6 +519,10 @@ SendTransactionScreen.prototype.renderSendToken = function () { ) } +SendTransactionScreen.prototype.toggleTooltip = function () { + this.setState({ tooltipShown: !this.state.tooltipShown }) +} + SendTransactionScreen.prototype.navigateToAccounts = function (event) { event.stopPropagation() this.props.dispatch(actions.showAccountsPage()) -- cgit v1.2.3 From e56b8c5055a19ccfb88ef71f4cef13fb6d05a54a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 13:48:52 -0230 Subject: Refactor tooltip to remove external lib; tooltip now updating gas fee in parent. --- ui/app/send.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index a9b8bb5cc..60e7d7e47 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -11,7 +11,7 @@ const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') -const NewTooltip = require('./components/new-tooltip.js') +const GasTooltip = require('./components/gas-tooltip.js') const { getSelectedIdentity } = require('./selectors') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -54,6 +54,7 @@ function SendTransactionScreen () { amount: '0.0001', // see L544 gasPrice: '4a817c800', gas: '0x7b0d', + gasFee: 0, txData: null, memo: '', }, @@ -216,6 +217,7 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input.send-screen-gas-input', { placeholder: '0', + value: this.state.newTx.gasFee }, []), h('div.send-screen-gas-input-customize', { @@ -224,8 +226,19 @@ SendTransactionScreen.prototype.render = function () { 'Customize' ]), - h(NewTooltip, { - show: this.state.tooltipShown, + h(GasTooltip, { + isOpen: this.state.tooltipShown, + className: 'send-tooltip', + onFeeChange: ({gasLimit, gasPrice}) => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10), + } + ), + }) + } }), ]), -- cgit v1.2.3 From ff247289aeabd5530451f93d12fbe2b2c28d75be Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 16:50:23 -0230 Subject: Tooltip closing on click outside. --- ui/app/send.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 60e7d7e47..2e7f38cd9 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -58,7 +58,7 @@ function SendTransactionScreen () { txData: null, memo: '', }, - tooltipShown: false, + tooltipIsOpen: false, } } @@ -221,14 +221,15 @@ SendTransactionScreen.prototype.render = function () { }, []), h('div.send-screen-gas-input-customize', { - onClick: this.toggleTooltip.bind(this), + onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), }, [ 'Customize' ]), h(GasTooltip, { - isOpen: this.state.tooltipShown, + isOpen: this.state.tooltipIsOpen, className: 'send-tooltip', + onClickOutside: () => this.setTooltipOpen.bind(this)(false), onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ newTx: Object.assign( @@ -532,8 +533,8 @@ SendTransactionScreen.prototype.renderSendToken = function () { ) } -SendTransactionScreen.prototype.toggleTooltip = function () { - this.setState({ tooltipShown: !this.state.tooltipShown }) +SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) { + this.setState({ tooltipIsOpen: isOpen }) } SendTransactionScreen.prototype.navigateToAccounts = function (event) { -- cgit v1.2.3 From 05e6eaf171a16c96760cc899ef527a8f6d83434d Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 17:31:56 -0230 Subject: Updating current currency from send form. --- ui/app/send.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 2e7f38cd9..34c6df9f7 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -177,7 +177,17 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), - h('span', {}, ['ETH <> USD']), //holding on icon from design + h('span', {}, [ + h('span', { + className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', + onClick: this.setCurrentCurrency.bind(this, 'ETH') + }, ['ETH']), + '<>', + h('span', { + className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', + onClick: this.setCurrentCurrency.bind(this, 'USD'), + }, ['USD']), + ]), //holding on icon from design ]), h('input.large-input.send-screen-input', { @@ -537,6 +547,10 @@ SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) { this.setState({ tooltipIsOpen: isOpen }) } +SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { + this.props.dispatch(actions.setCurrentCurrency(newCurrency)) +} + SendTransactionScreen.prototype.navigateToAccounts = function (event) { event.stopPropagation() this.props.dispatch(actions.showAccountsPage()) -- cgit v1.2.3 From c9e134a996f69367155aab416abb683fb82d4b9a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 20:53:30 -0230 Subject: Fully connect gas data in send form and tooltip to state; final styling improvements. Fully connect gas fields in send form and tooltip to state --- ui/app/send.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 34c6df9f7..e29c1aadf 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -10,6 +10,7 @@ const addressSummary = require('./util').addressSummary const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') +const FiatValue = require('./components/fiat-value.js') const ethUtil = require('ethereumjs-util') const GasTooltip = require('./components/gas-tooltip.js') const { getSelectedIdentity } = require('./selectors') @@ -54,7 +55,7 @@ function SendTransactionScreen () { amount: '0.0001', // see L544 gasPrice: '4a817c800', gas: '0x7b0d', - gasFee: 0, + gasFee: ((parseInt('0x7b0d', 16) * parseInt('4a817c800', 16)) / 1000000000).toFixed(10), txData: null, memo: '', }, @@ -225,20 +226,22 @@ SendTransactionScreen.prototype.render = function () { h('span', {}, ['What\'s this?']), ]), - h('input.large-input.send-screen-gas-input', { - placeholder: '0', - value: this.state.newTx.gasFee - }, []), - - h('div.send-screen-gas-input-customize', { - onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), - }, [ - 'Customize' + h('div.large-input.send-screen-gas-input', {}, [ + h(FiatValue, { + value: this.state.newTx.gasFee.toString(16), conversionRate, currentCurrency } + ), + h('div.send-screen-gas-input-customize', { + onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), + }, [ + 'Customize' + ]), ]), h(GasTooltip, { isOpen: this.state.tooltipIsOpen, className: 'send-tooltip', + gasPrice: parseInt(this.state.newTx.gasPrice, 16), + gasLimit: parseInt(this.state.newTx.gas, 16), onClickOutside: () => this.setTooltipOpen.bind(this)(false), onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ @@ -246,6 +249,8 @@ SendTransactionScreen.prototype.render = function () { this.state.newTx, { gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10), + gas: gasLimit, + gasPrice, } ), }) -- cgit v1.2.3 From 0a44c824586f74a770c1e6c618e62279b5dc773b Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 14:44:01 -0230 Subject: Styles and behaviour correct --- ui/app/send.js | 51 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 7 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index e29c1aadf..e3a48a441 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -5,13 +5,15 @@ const connect = require('react-redux').connect const Identicon = require('./components/identicon') const actions = require('./actions') const util = require('./util') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN +const hexToBn = require('../../app/scripts/lib/hex-to-bn') const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const FiatValue = require('./components/fiat-value.js') -const ethUtil = require('ethereumjs-util') const GasTooltip = require('./components/gas-tooltip.js') const { getSelectedIdentity } = require('./selectors') @@ -30,6 +32,7 @@ function mapStateToProps (state) { addressBook: state.metamask.addressBook, conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, + blockGasLimit: state.metamask.currentBlockGasLimit, } result.error = result.warning && result.warning.split('.')[0] @@ -53,9 +56,9 @@ function SendTransactionScreen () { to: '', // these values are hardcoded, so "Next" can be clicked amount: '0.0001', // see L544 - gasPrice: '4a817c800', + gasPrice: '0x19', gas: '0x7b0d', - gasFee: ((parseInt('0x7b0d', 16) * parseInt('4a817c800', 16)) / 1000000000).toFixed(10), + gasFee: ((parseInt('0x7b0d', 16) * parseInt('0x19', 16)) / 1000000000).toFixed(6), txData: null, memo: '', }, @@ -63,6 +66,28 @@ function SendTransactionScreen () { } } +SendTransactionScreen.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { + const numBN = new BN(numerator) + const denomBN = new BN(denominator) + return targetBN.mul(numBN).div(denomBN) +} + +SendTransactionScreen.prototype.getTxFeeBn = function (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16)) { + const { blockGasLimit } = this.props; + const gasBn = hexToBn(gas) + const gasLimit = new BN(parseInt(blockGasLimit)) + const safeGasLimit = this.bnMultiplyByFraction(gasLimit, 19, 20).toString(10) + + + // Gas Price + const gasPriceBn = hexToBn(gasPrice) + const txFeeBn = gasBn.mul(gasPriceBn) + + const fiatMultiplier = hexToBn((1000000000).toString(16)) + const txFeeAsFiatBn = txFeeBn.mul(fiatMultiplier) + return txFeeAsFiatBn; +} + SendTransactionScreen.prototype.render = function () { this.persistentFormParentId = 'send-tx-form' @@ -226,10 +251,21 @@ SendTransactionScreen.prototype.render = function () { h('span', {}, ['What\'s this?']), ]), + // TODO: handle loading time when switching to USD h('div.large-input.send-screen-gas-input', {}, [ - h(FiatValue, { - value: this.state.newTx.gasFee.toString(16), conversionRate, currentCurrency } - ), + currentCurrency === 'USD' + ? h(FiatValue, { + value: this.getTxFeeBn.bind(this)(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + conversionRate, + currentCurrency, + style: { + color: '#5d5d5d', + fontSize: '16px', + fontFamily: 'DIN OT', + lineHeight: '22.4px' + } + }) + : h('div', {}, [`${this.state.newTx.gasFee} ETH`]), h('div.send-screen-gas-input-customize', { onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), }, [ @@ -248,7 +284,8 @@ SendTransactionScreen.prototype.render = function () { newTx: Object.assign( this.state.newTx, { - gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10), + // TODO: determine how prices are rounded on master + gasFee: ((gasPrice / 1000000000) * gasLimit).toFixed(6), gas: gasLimit, gasPrice, } -- cgit v1.2.3 From 43ceeacf0f0cc46a60a01fff9d94672fad5383b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 15:09:05 -0230 Subject: Refactor for clean handling of tooltip close. --- ui/app/send.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index e3a48a441..73d5616a1 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -267,18 +267,17 @@ SendTransactionScreen.prototype.render = function () { }) : h('div', {}, [`${this.state.newTx.gasFee} ETH`]), h('div.send-screen-gas-input-customize', { - onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), + onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen), }, [ 'Customize' ]), ]), - h(GasTooltip, { - isOpen: this.state.tooltipIsOpen, + this.state.tooltipIsOpen && h(GasTooltip, { className: 'send-tooltip', gasPrice: parseInt(this.state.newTx.gasPrice, 16), gasLimit: parseInt(this.state.newTx.gas, 16), - onClickOutside: () => this.setTooltipOpen.bind(this)(false), + onClose: this.closeTooltip.bind(this), onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ newTx: Object.assign( @@ -585,8 +584,12 @@ SendTransactionScreen.prototype.renderSendToken = function () { ) } -SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) { - this.setState({ tooltipIsOpen: isOpen }) +SendTransactionScreen.prototype.toggleTooltip = function () { + this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen }) +} + +SendTransactionScreen.prototype.closeTooltip = function () { + this.setState({ tooltipIsOpen: false }) } SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { -- cgit v1.2.3 From af6e30b8baaed258381fd050b98452de0844d9c6 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 16:14:56 -0230 Subject: Bind SendTransactionScreen methods to this in constructor. --- ui/app/send.js | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 73d5616a1..f54a76926 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -64,6 +64,17 @@ function SendTransactionScreen () { }, tooltipIsOpen: false, } + + this.back = this.back.bind(this) + this.back = this.back.bind(this) + this.closeTooltip = this.closeTooltip.bind(this) + this.getTxFeeBn = this.getTxFeeBn.bind(this) + this.onSubmit = this.onSubmit.bind(this) + this.onSubmit = this.onSubmit.bind(this) + this.recipientDidChange = this.recipientDidChange.bind(this) + this.setCurrentCurrency = this.setCurrentCurrency.bind(this) + this.setCurrentCurrency = this.setCurrentCurrency.bind(this) + this.toggleTooltip = this.toggleTooltip.bind(this) } SendTransactionScreen.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { @@ -206,12 +217,12 @@ SendTransactionScreen.prototype.render = function () { h('span', {}, [ h('span', { className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', - onClick: this.setCurrentCurrency.bind(this, 'ETH') + onClick: () => this.setCurrentCurrency('ETH') }, ['ETH']), '<>', h('span', { className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', - onClick: this.setCurrentCurrency.bind(this, 'USD'), + onClick: () => this.setCurrentCurrency('USD'), }, ['USD']), ]), //holding on icon from design ]), @@ -255,7 +266,7 @@ SendTransactionScreen.prototype.render = function () { h('div.large-input.send-screen-gas-input', {}, [ currentCurrency === 'USD' ? h(FiatValue, { - value: this.getTxFeeBn.bind(this)(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + value: this.getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), conversionRate, currentCurrency, style: { @@ -277,7 +288,7 @@ SendTransactionScreen.prototype.render = function () { className: 'send-tooltip', gasPrice: parseInt(this.state.newTx.gasPrice, 16), gasLimit: parseInt(this.state.newTx.gas, 16), - onClose: this.closeTooltip.bind(this), + onClose: this.closeTooltip, onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ newTx: Object.assign( @@ -341,7 +352,7 @@ SendTransactionScreen.prototype.render = function () { h('section.flex-column.flex-center', [ h('button.btn-light', { - onClick: this.onSubmit.bind(this), + onClick: this.onSubmit, style: { marginTop: '8px', width: '8em', @@ -350,7 +361,7 @@ SendTransactionScreen.prototype.render = function () { }, 'Next'), h('button.btn-light', { - onClick: this.back.bind(this), + onClick: this.back, style: { background: '#F7F7F7', // $alabaster border: 'none', @@ -469,7 +480,7 @@ SendTransactionScreen.prototype.renderSendToken = function () { h(EnsInput, { name: 'address', placeholder: 'Recipient Address', - onChange: this.recipientDidChange.bind(this), + onChange: this.recipientDidChange, network, identities, addressBook, @@ -561,7 +572,7 @@ SendTransactionScreen.prototype.renderSendToken = function () { h('section.flex-column.flex-center', [ h('button.btn-light', { - onClick: this.onSubmit.bind(this), + onClick: this.onSubmit, style: { marginTop: '8px', width: '8em', @@ -570,7 +581,7 @@ SendTransactionScreen.prototype.renderSendToken = function () { }, 'Next'), h('button.btn-light', { - onClick: this.back.bind(this), + onClick: this.back, style: { background: '#F7F7F7', // $alabaster border: 'none', -- cgit v1.2.3 From dc72c4cc918934b8dafc253ca5e7c9674551aa51 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 20:20:40 -0230 Subject: Using eth balance component to ensure proper rounding. --- ui/app/send.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index f54a76926..ae779790d 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -58,7 +58,6 @@ function SendTransactionScreen () { amount: '0.0001', // see L544 gasPrice: '0x19', gas: '0x7b0d', - gasFee: ((parseInt('0x7b0d', 16) * parseInt('0x19', 16)) / 1000000000).toFixed(6), txData: null, memo: '', }, @@ -276,7 +275,19 @@ SendTransactionScreen.prototype.render = function () { lineHeight: '22.4px' } }) - : h('div', {}, [`${this.state.newTx.gasFee} ETH`]), + : h(EthBalance, { + value: this.getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + currentCurrency, + conversionRate, + showFiat: false, + hideTooltip: true, + styleOveride: { + color: '#5d5d5d', + fontSize: '16px', + fontFamily: 'DIN OT', + lineHeight: '22.4px' + } + }), h('div.send-screen-gas-input-customize', { onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen), }, [ @@ -294,8 +305,6 @@ SendTransactionScreen.prototype.render = function () { newTx: Object.assign( this.state.newTx, { - // TODO: determine how prices are rounded on master - gasFee: ((gasPrice / 1000000000) * gasLimit).toFixed(6), gas: gasLimit, gasPrice, } -- cgit v1.2.3 From cd351e8aef59f314c170d0436d98aaf111db1c00 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 20:36:10 -0230 Subject: Move getTaxBN and bnMultiplyByFraction to util.js --- ui/app/send.js | 30 +++++------------------------- 1 file changed, 5 insertions(+), 25 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index ae779790d..f50af386c 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -10,12 +10,14 @@ const BN = ethUtil.BN const hexToBn = require('../../app/scripts/lib/hex-to-bn') const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary +const bnMultiplyByFraction = require('./util').bnMultiplyByFraction const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const FiatValue = require('./components/fiat-value.js') const GasTooltip = require('./components/gas-tooltip.js') const { getSelectedIdentity } = require('./selectors') +const getTxFeeBn = require('./util').getTxFeeBn const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -67,7 +69,6 @@ function SendTransactionScreen () { this.back = this.back.bind(this) this.back = this.back.bind(this) this.closeTooltip = this.closeTooltip.bind(this) - this.getTxFeeBn = this.getTxFeeBn.bind(this) this.onSubmit = this.onSubmit.bind(this) this.onSubmit = this.onSubmit.bind(this) this.recipientDidChange = this.recipientDidChange.bind(this) @@ -76,28 +77,6 @@ function SendTransactionScreen () { this.toggleTooltip = this.toggleTooltip.bind(this) } -SendTransactionScreen.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { - const numBN = new BN(numerator) - const denomBN = new BN(denominator) - return targetBN.mul(numBN).div(denomBN) -} - -SendTransactionScreen.prototype.getTxFeeBn = function (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16)) { - const { blockGasLimit } = this.props; - const gasBn = hexToBn(gas) - const gasLimit = new BN(parseInt(blockGasLimit)) - const safeGasLimit = this.bnMultiplyByFraction(gasLimit, 19, 20).toString(10) - - - // Gas Price - const gasPriceBn = hexToBn(gasPrice) - const txFeeBn = gasBn.mul(gasPriceBn) - - const fiatMultiplier = hexToBn((1000000000).toString(16)) - const txFeeAsFiatBn = txFeeBn.mul(fiatMultiplier) - return txFeeAsFiatBn; -} - SendTransactionScreen.prototype.render = function () { this.persistentFormParentId = 'send-tx-form' @@ -113,6 +92,7 @@ SendTransactionScreen.prototype.render = function () { conversionRate, currentCurrency, } = props + const { blockGasLimit } = this.state console.log({ selectedIdentity, identities }) console.log("SendTransactionScreen state:", this.state) @@ -265,7 +245,7 @@ SendTransactionScreen.prototype.render = function () { h('div.large-input.send-screen-gas-input', {}, [ currentCurrency === 'USD' ? h(FiatValue, { - value: this.getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + value: getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16), blockGasLimit).toString(16), conversionRate, currentCurrency, style: { @@ -276,7 +256,7 @@ SendTransactionScreen.prototype.render = function () { } }) : h(EthBalance, { - value: this.getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + value: getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16), blockGasLimit).toString(16), currentCurrency, conversionRate, showFiat: false, -- cgit v1.2.3 From cd5861541c1cb871d5e3b606501931f2aee0d048 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 10:21:31 -0230 Subject: Use hex values only in send.js to handle limit and price; GasTooltip accepts and returns values as hex (allows user to enter floats) --- ui/app/send.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index f50af386c..23216d54c 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -58,7 +58,7 @@ function SendTransactionScreen () { to: '', // these values are hardcoded, so "Next" can be clicked amount: '0.0001', // see L544 - gasPrice: '0x19', + gasPrice: '0x5d21dba00', gas: '0x7b0d', txData: null, memo: '', @@ -92,7 +92,8 @@ SendTransactionScreen.prototype.render = function () { conversionRate, currentCurrency, } = props - const { blockGasLimit } = this.state + const { blockGasLimit, newTx } = this.state + const { gas, gasPrice } = newTx console.log({ selectedIdentity, identities }) console.log("SendTransactionScreen state:", this.state) @@ -245,7 +246,7 @@ SendTransactionScreen.prototype.render = function () { h('div.large-input.send-screen-gas-input', {}, [ currentCurrency === 'USD' ? h(FiatValue, { - value: getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16), blockGasLimit).toString(16), + value: getTxFeeBn(gas, gasPrice, blockGasLimit), conversionRate, currentCurrency, style: { @@ -256,7 +257,7 @@ SendTransactionScreen.prototype.render = function () { } }) : h(EthBalance, { - value: getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16), blockGasLimit).toString(16), + value: getTxFeeBn(gas, gasPrice, blockGasLimit), currentCurrency, conversionRate, showFiat: false, @@ -277,8 +278,8 @@ SendTransactionScreen.prototype.render = function () { this.state.tooltipIsOpen && h(GasTooltip, { className: 'send-tooltip', - gasPrice: parseInt(this.state.newTx.gasPrice, 16), - gasLimit: parseInt(this.state.newTx.gas, 16), + gasPrice, + gasLimit: gas, onClose: this.closeTooltip, onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ -- cgit v1.2.3 From b251d0f675b77b56adfab12cc512f985ada79c49 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 13:43:43 -0230 Subject: Center tooltip on small screen size by using flexbox --- ui/app/send.js | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 23216d54c..a65c51d30 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -225,6 +225,23 @@ SendTransactionScreen.prototype.render = function () { ]), h('div.send-screen-input-wrapper', {}, [ + this.state.tooltipIsOpen && h(GasTooltip, { + className: 'send-tooltip', + gasPrice, + gasLimit: gas, + onClose: this.closeTooltip, + onFeeChange: ({gasLimit, gasPrice}) => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + gas: gasLimit, + gasPrice, + } + ), + }) + } + }), h('div.send-screen-gas-labels', {}, [ h('span', {}, [ @@ -276,24 +293,6 @@ SendTransactionScreen.prototype.render = function () { ]), ]), - this.state.tooltipIsOpen && h(GasTooltip, { - className: 'send-tooltip', - gasPrice, - gasLimit: gas, - onClose: this.closeTooltip, - onFeeChange: ({gasLimit, gasPrice}) => { - this.setState({ - newTx: Object.assign( - this.state.newTx, - { - gas: gasLimit, - gasPrice, - } - ), - }) - } - }), - ]), h('div.send-screen-input-wrapper', {}, [ -- cgit v1.2.3 From c605c9897d40f8fc2568b63d33cfc018635bcf25 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 16:09:56 -0230 Subject: Minor clean up. --- ui/app/send.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index a65c51d30..848f53f7c 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -66,14 +66,11 @@ function SendTransactionScreen () { tooltipIsOpen: false, } - this.back = this.back.bind(this) this.back = this.back.bind(this) this.closeTooltip = this.closeTooltip.bind(this) this.onSubmit = this.onSubmit.bind(this) - this.onSubmit = this.onSubmit.bind(this) this.recipientDidChange = this.recipientDidChange.bind(this) this.setCurrentCurrency = this.setCurrentCurrency.bind(this) - this.setCurrentCurrency = this.setCurrentCurrency.bind(this) this.toggleTooltip = this.toggleTooltip.bind(this) } @@ -232,13 +229,11 @@ SendTransactionScreen.prototype.render = function () { onClose: this.closeTooltip, onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ - newTx: Object.assign( - this.state.newTx, - { - gas: gasLimit, - gasPrice, - } - ), + newTx: { + ...this.state.newTx, + gas: gasLimit, + gasPrice, + }, }) } }), @@ -287,7 +282,7 @@ SendTransactionScreen.prototype.render = function () { } }), h('div.send-screen-gas-input-customize', { - onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen), + onClick: this.toggleTooltip, }, [ 'Customize' ]), -- cgit v1.2.3 From 3ce69e1b65dc4e12c51400d01b973cb0d0c79e7a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 10:24:58 -0230 Subject: Clean up send.js and eth-balance.js with es6. --- ui/app/send.js | 99 ++++++++++++++++++++++++++++++++++------------------------ 1 file changed, 59 insertions(+), 40 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 848f53f7c..b099c0251 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -1,49 +1,68 @@ -const inherits = require('util').inherits +const { inherits } = require('util') const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') -const actions = require('./actions') -const util = require('./util') -const ethUtil = require('ethereumjs-util') -const BN = ethUtil.BN const hexToBn = require('../../app/scripts/lib/hex-to-bn') -const numericBalance = require('./util').numericBalance -const addressSummary = require('./util').addressSummary -const bnMultiplyByFraction = require('./util').bnMultiplyByFraction -const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') -const FiatValue = require('./components/fiat-value.js') -const GasTooltip = require('./components/gas-tooltip.js') +const FiatValue = require('./components/fiat-value') +const GasTooltip = require('./components/gas-tooltip') const { getSelectedIdentity } = require('./selectors') -const getTxFeeBn = require('./util').getTxFeeBn + +const { + setCurrentCurrency, + showAccountsPage, + backToAccountDetail, + displayWarning, + hideWarning, + addToAddressBook, + signTx, +} = require('./actions') +const { stripHexPrefix, addHexPrefix, BN } = require('ethereumjs-util') +const { + addressSummary, + bnMultiplyByFraction, + getTxFeeBn, + isHex, + numericBalance, +} = require('./util') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { - var result = { - selectedIdentity: getSelectedIdentity(state), - address: state.metamask.selectedAddress, - accounts: state.metamask.accounts, - identities: state.metamask.identities, - warning: state.appState.warning, - network: state.metamask.network, - addressBook: state.metamask.addressBook, - conversionRate: state.metamask.conversionRate, - currentCurrency: state.metamask.currentCurrency, - blockGasLimit: state.metamask.currentBlockGasLimit, - } - - result.error = result.warning && result.warning.split('.')[0] - - result.account = result.accounts[result.address] - result.identity = result.identities[result.address] - result.balance = result.account ? numericBalance(result.account.balance) : null + const { + selectedAddress: address, + accounts, + identities, + network, + addressBook, + conversionRate, + currentCurrency, + currentBlockGasLimit: blockGasLimit, + } = state.metamask + const { warning } = state.appState + const selectedIdentity = getSelectedIdentity(state) + const account = accounts[address] - return result + return { + address, + accounts, + identities, + network, + addressBook, + conversionRate, + currentCurrency, + blockGasLimit, + warning, + selectedIdentity, + error: warning && warning.split('.')[0], + account, + identity: identities[address], + balance: account ? numericBalance(account.balance) : null, + } } inherits(SendTransactionScreen, PersistentForm) @@ -588,17 +607,17 @@ SendTransactionScreen.prototype.closeTooltip = function () { } SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { - this.props.dispatch(actions.setCurrentCurrency(newCurrency)) + this.props.dispatch(setCurrentCurrency(newCurrency)) } SendTransactionScreen.prototype.navigateToAccounts = function (event) { event.stopPropagation() - this.props.dispatch(actions.showAccountsPage()) + this.props.dispatch(showAccountsPage()) } SendTransactionScreen.prototype.back = function () { var address = this.props.address - this.props.dispatch(actions.backToAccountDetail(address)) + this.props.dispatch(backToAccountDetail(address)) } SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) { @@ -644,14 +663,14 @@ SendTransactionScreen.prototype.onSubmit = function () { // return this.props.dispatch(actions.displayWarning(message)) // } - if (txData && !isHex(ethUtil.stripHexPrefix(txData))) { + if (txData && !isHex(stripHexPrefix(txData))) { message = 'Transaction data must be hex string.' - return this.props.dispatch(actions.displayWarning(message)) + return this.props.dispatch(displayWarning(message)) } - this.props.dispatch(actions.hideWarning()) + this.props.dispatch(hideWarning()) - this.props.dispatch(actions.addToAddressBook(recipient, nickname)) + this.props.dispatch(addToAddressBook(recipient, nickname)) // var txParams = { // // from: this.props.address, @@ -672,8 +691,8 @@ SendTransactionScreen.prototype.onSubmit = function () { value: '0x0', } - if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) + if (recipient) txParams.to = addHexPrefix(recipient) if (txData) txParams.data = txData - this.props.dispatch(actions.signTx(txParams)) + this.props.dispatch(signTx(txParams)) } -- cgit v1.2.3 From 1485ec7392a03a9b3a63262e0ecf0d90f0713251 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 11:25:11 -0230 Subject: Move currency toggle to its own component. --- ui/app/send.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index b099c0251..b3a137adb 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -7,7 +7,8 @@ const hexToBn = require('../../app/scripts/lib/hex-to-bn') const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const FiatValue = require('./components/fiat-value') -const GasTooltip = require('./components/gas-tooltip') +const GasTooltip = require('./components/send/gas-tooltip') +const CurrencyToggle = require('./components/send/currency-toggle') const { getSelectedIdentity } = require('./selectors') const { @@ -210,17 +211,10 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), - h('span', {}, [ - h('span', { - className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', - onClick: () => this.setCurrentCurrency('ETH') - }, ['ETH']), - '<>', - h('span', { - className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', - onClick: () => this.setCurrentCurrency('USD'), - }, ['USD']), - ]), //holding on icon from design + h(CurrencyToggle, { + currentCurrency, + onClick: (newCurrency) => this.setCurrentCurrency(newCurrency) + }), //holding on icon from design ]), h('input.large-input.send-screen-input', { -- cgit v1.2.3 From 5a7e4c4e76fd92b9f797fd2088b00ce6dc4fd47a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 11:39:07 -0230 Subject: Move gas fee to a separate component. --- ui/app/send.js | 32 ++++++-------------------------- 1 file changed, 6 insertions(+), 26 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index b3a137adb..3f6cd72c9 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -4,11 +4,10 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') const hexToBn = require('../../app/scripts/lib/hex-to-bn') -const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') -const FiatValue = require('./components/fiat-value') const GasTooltip = require('./components/send/gas-tooltip') const CurrencyToggle = require('./components/send/currency-toggle') +const GasFeeDisplay = require('./components/send/gas-fee-display') const { getSelectedIdentity } = require('./selectors') const { @@ -24,7 +23,6 @@ const { stripHexPrefix, addHexPrefix, BN } = require('ethereumjs-util') const { addressSummary, bnMultiplyByFraction, - getTxFeeBn, isHex, numericBalance, } = require('./util') @@ -269,30 +267,12 @@ SendTransactionScreen.prototype.render = function () { // TODO: handle loading time when switching to USD h('div.large-input.send-screen-gas-input', {}, [ - currentCurrency === 'USD' - ? h(FiatValue, { - value: getTxFeeBn(gas, gasPrice, blockGasLimit), - conversionRate, + h(GasFeeDisplay, { currentCurrency, - style: { - color: '#5d5d5d', - fontSize: '16px', - fontFamily: 'DIN OT', - lineHeight: '22.4px' - } - }) - : h(EthBalance, { - value: getTxFeeBn(gas, gasPrice, blockGasLimit), - currentCurrency, - conversionRate, - showFiat: false, - hideTooltip: true, - styleOveride: { - color: '#5d5d5d', - fontSize: '16px', - fontFamily: 'DIN OT', - lineHeight: '22.4px' - } + conversionRate, + gas, + gasPrice, + blockGasLimit, }), h('div.send-screen-gas-input-customize', { onClick: this.toggleTooltip, -- cgit v1.2.3 From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- ui/app/send.js | 69 +++++++++++++++++++++++----------------------------------- 1 file changed, 27 insertions(+), 42 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 3f6cd72c9..55c880427 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -3,7 +3,6 @@ const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') -const hexToBn = require('../../app/scripts/lib/hex-to-bn') const EnsInput = require('./components/ens-input') const GasTooltip = require('./components/send/gas-tooltip') const CurrencyToggle = require('./components/send/currency-toggle') @@ -19,13 +18,8 @@ const { addToAddressBook, signTx, } = require('./actions') -const { stripHexPrefix, addHexPrefix, BN } = require('ethereumjs-util') -const { - addressSummary, - bnMultiplyByFraction, - isHex, - numericBalance, -} = require('./util') +const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') +const { isHex, numericBalance } = require('./util') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -98,9 +92,6 @@ SendTransactionScreen.prototype.render = function () { const props = this.props const { selectedIdentity, - address, - account, - identity, network, identities, addressBook, @@ -111,7 +102,7 @@ SendTransactionScreen.prototype.render = function () { const { gas, gasPrice } = newTx console.log({ selectedIdentity, identities }) - console.log("SendTransactionScreen state:", this.state) + console.log('SendTransactionScreen state:', this.state) return ( @@ -121,7 +112,7 @@ SendTransactionScreen.prototype.render = function () { // Main Send token Card h('div.send-screen-card', { - style: {} + style: {}, }, [ h('img.send-eth-icon', { @@ -130,7 +121,7 @@ SendTransactionScreen.prototype.render = function () { }), h('div', {}, [ - 'Send' + 'Send', ]), h('div', { @@ -138,13 +129,13 @@ SendTransactionScreen.prototype.render = function () { textAlign: 'center', }, }, [ - 'Send Ethereum to anyone with an Ethereum account' + 'Send Ethereum to anyone with an Ethereum account', ]), h('div.send-screen-input-wrapper', {}, [ h('div', {}, [ - 'From:' + 'From:', ]), h('input.large-input.send-screen-input', { @@ -152,7 +143,7 @@ SendTransactionScreen.prototype.render = function () { placeholder: 'Account', value: this.state.from, onChange: (event) => { - console.log("event", event.target.value) + console.log('event', event.target.value) this.setState({ newTx: Object.assign( this.state.newTx, @@ -181,14 +172,14 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-input-wrapper', {}, [ h('div', {}, [ - 'To:' + 'To:', ]), h(EnsInput, { name: 'address', placeholder: 'Recipient Address', onChange: () => { - console.log("event", event.target.value) + console.log('event', event.target.value) this.setState({ newTx: Object.assign( this.state.newTx, @@ -211,8 +202,8 @@ SendTransactionScreen.prototype.render = function () { h('span', {}, ['Amount']), h(CurrencyToggle, { currentCurrency, - onClick: (newCurrency) => this.setCurrentCurrency(newCurrency) - }), //holding on icon from design + onClick: (newCurrency) => this.setCurrentCurrency(newCurrency), + }), // holding on icon from design ]), h('input.large-input.send-screen-input', { @@ -227,7 +218,7 @@ SendTransactionScreen.prototype.render = function () { } ), }) - } + }, }, []), ]), @@ -277,10 +268,10 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-gas-input-customize', { onClick: this.toggleTooltip, }, [ - 'Customize' + 'Customize', ]), ]), - + ]), h('div.send-screen-input-wrapper', {}, [ @@ -333,7 +324,7 @@ SendTransactionScreen.prototype.render = function () { style: { marginTop: '8px', width: '8em', - background: '#FFFFFF' + background: '#FFFFFF', }, }, 'Next'), @@ -358,14 +349,9 @@ SendTransactionScreen.prototype.renderSendToken = function () { const props = this.props const { - address, - account, - identity, network, identities, addressBook, - conversionRate, - currentCurrency, } = props return ( @@ -383,13 +369,13 @@ SendTransactionScreen.prototype.renderSendToken = function () { marginRight: '3.5%', background: '#FFFFFF', // $background-white boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', - } + }, }, [ h('section.flex-center.flex-row', { style: { zIndex: 15, // $token-icon-z-index marginTop: '-35px', - } + }, }, [ h(Identicon, { address: ARAGON, @@ -471,8 +457,8 @@ SendTransactionScreen.prototype.renderSendToken = function () { fontSize: '12px', width: '100%', justifyContent: 'space-between', - } - },[ + }, + }, [ h('span', { style: {} }, ['Amount']), h('span', { style: {} }, ['Token <> USD']), ]), @@ -498,8 +484,8 @@ SendTransactionScreen.prototype.renderSendToken = function () { fontSize: '12px', width: '100%', justifyContent: 'space-between', - } - },[ + }, + }, [ h('span', { style: {} }, ['Gas Fee:']), h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), ]), @@ -529,8 +515,8 @@ SendTransactionScreen.prototype.renderSendToken = function () { fontSize: '12px', width: '100%', justifyContent: 'flex-start', - } - },[ + }, + }, [ h('span', { style: {} }, ['Transaction Memo (optional)']), ]), @@ -553,7 +539,7 @@ SendTransactionScreen.prototype.renderSendToken = function () { style: { marginTop: '8px', width: '8em', - background: '#FFFFFF' + background: '#FFFFFF', }, }, 'Next'), @@ -615,11 +601,10 @@ SendTransactionScreen.prototype.onSubmit = function () { // https://consensys.slack.com/archives/G1L7H42BT/p1503439134000169?thread_ts=1503438076.000411&cid=G1L7H42BT // From @kumavis: "not needed for MVP but we will end up adding it again so consider just adding it now" - const txData = false; + const txData = false // Must replace with memo data. // const txData = document.querySelector('input[name="txData"]').value - const balance = this.props.balance let message // if (value.gt(balance)) { @@ -659,7 +644,7 @@ SendTransactionScreen.prototype.onSubmit = function () { // } // Hardcoded - var txParams = { + var txParams = { from: '0x82df11beb942beeed58d466fcb0f0791365c7684', to: '0xa43126b621db5b4fd98f959d9e5499f655913d34', value: '0x0', -- cgit v1.2.3 From 78f39bcce646655bbf549de4778c26ee9f158e92 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 20:27:00 -0230 Subject: Send tx working; user is taken to confirm page with correct transaction information. --- ui/app/send.js | 102 ++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 65 insertions(+), 37 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 55c880427..de11e0149 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -69,7 +69,7 @@ function SendTransactionScreen () { from: '', to: '', // these values are hardcoded, so "Next" can be clicked - amount: '0.0001', // see L544 + amount: '0x0', // see L544 gasPrice: '0x5d21dba00', gas: '0x7b0d', txData: null, @@ -98,6 +98,7 @@ SendTransactionScreen.prototype.render = function () { conversionRate, currentCurrency, } = props + const { blockGasLimit, newTx } = this.state const { gas, gasPrice } = newTx @@ -141,16 +142,14 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input.send-screen-input', { list: 'accounts', placeholder: 'Account', - value: this.state.from, + value: this.state.newTx.from, onChange: (event) => { console.log('event', event.target.value) this.setState({ - newTx: Object.assign( - this.state.newTx, - { - from: event.target.value, - } - ), + newTx: { + ...this.state.newTx, + from: event.target.value, + }, }) }, }, [ @@ -175,24 +174,61 @@ SendTransactionScreen.prototype.render = function () { 'To:', ]), - h(EnsInput, { + h('input.large-input.send-screen-input', { name: 'address', - placeholder: 'Recipient Address', - onChange: () => { + list: 'addresses', + placeholder: 'Address', + value: this.state.newTx.to, + onChange: (event) => { console.log('event', event.target.value) this.setState({ - newTx: Object.assign( - this.state.newTx, - { - to: event.target.value, - } - ), + newTx: { + ...this.state.newTx, + to: event.target.value, + }, }) }, - network, - identities, - addressBook, - }), + }, [ + ]), + + h('datalist#addresses', {}, [ + // Corresponds to the addresses owned. + Object.keys(props.identities).map((key) => { + const identity = props.identities[key] + return h('option', { + value: identity.address, + label: identity.name, + key: identity.address, + }) + }), + // Corresponds to previously sent-to addresses. + props.addressBook.map((identity) => { + return h('option', { + value: identity.address, + label: identity.name, + key: identity.address, + }) + }), + ]), + + // h(EnsInput, { + // name: 'address', + // placeholder: 'Recipient Address', + // value: this.state.newTx.to, + // onChange: (event) => { + // this.setState({ + // newTx: Object.assign( + // this.state.newTx, + // { + // to: event.target.value, + // } + // ), + // }) + // }, + // network, + // identities, + // addressBook, + // }), ]), @@ -209,7 +245,7 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input.send-screen-input', { placeholder: '0 ETH', type: 'number', - onChange: () => { + onChange: (event) => { this.setState({ newTx: Object.assign( this.state.newTx, @@ -631,23 +667,15 @@ SendTransactionScreen.prototype.onSubmit = function () { this.props.dispatch(addToAddressBook(recipient, nickname)) - // var txParams = { - // // from: this.props.address, - // from: this.state.newTx.to, - - // // value: '0x' + value.toString(16), - // value: '0x38d7ea4c68000', // hardcoded + var txParams = { + from: this.state.newTx.from, + to: this.state.newTx.to, - // // New: gas will now be specified on this step - // gas: this.state.newTx.gas, - // gasPrice: this.state.newTx.gasPrice - // } + value: this.state.newTx.amount.toString(16), - // Hardcoded - var txParams = { - from: '0x82df11beb942beeed58d466fcb0f0791365c7684', - to: '0xa43126b621db5b4fd98f959d9e5499f655913d34', - value: '0x0', + // New: gas will now be specified on this step + gas: this.state.newTx.gas, + gasPrice: this.state.newTx.gasPrice } if (recipient) txParams.to = addHexPrefix(recipient) -- cgit v1.2.3 From 562d2fadaed93946bce8e5f306d1a2e271e971c7 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 5 Sep 2017 11:57:28 -0230 Subject: Use .entries() instead of .keys(), and use more destructuring, for simpler code. --- ui/app/send.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index de11e0149..c15409b31 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -193,20 +193,19 @@ SendTransactionScreen.prototype.render = function () { h('datalist#addresses', {}, [ // Corresponds to the addresses owned. - Object.keys(props.identities).map((key) => { - const identity = props.identities[key] + Object.entries(props.identities).map(([key, { address, name }]) => { return h('option', { - value: identity.address, - label: identity.name, - key: identity.address, + value: address, + label: name, + key: address, }) }), // Corresponds to previously sent-to addresses. - props.addressBook.map((identity) => { + props.addressBook.map(({ address, name }) => { return h('option', { - value: identity.address, - label: identity.name, - key: identity.address, + value: address, + label: name, + key: address, }) }), ]), -- cgit v1.2.3 From 062e67bff83fd79647231be6e2448d35b5f312f9 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 22:14:09 -0700 Subject: Add buttons; handle back; add yarn.lock --- ui/app/send.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index c15409b31..96401cd23 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -674,7 +674,7 @@ SendTransactionScreen.prototype.onSubmit = function () { // New: gas will now be specified on this step gas: this.state.newTx.gas, - gasPrice: this.state.newTx.gasPrice + gasPrice: this.state.newTx.gasPrice, } if (recipient) txParams.to = addHexPrefix(recipient) -- cgit v1.2.3 From 55d62190e3ec06b1b21ed3ba24b2f2a9bc137568 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 12 Sep 2017 18:10:28 -0230 Subject: Fixes the saving of transactions in send and display in tx-list with conversion utility. --- ui/app/send.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 96401cd23..a7e81a847 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -20,6 +20,7 @@ const { } = require('./actions') const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') const { isHex, numericBalance } = require('./util') +const { conversionUtil } = require('./conversion-util') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -666,11 +667,19 @@ SendTransactionScreen.prototype.onSubmit = function () { this.props.dispatch(addToAddressBook(recipient, nickname)) + const sendAmount = conversionUtil(this.state.newTx.amount, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + fromCurrency: this.props.currentCurrency, + toCurrency: 'ETH', + conversionRate: this.props.conversionRate, + }) + var txParams = { from: this.state.newTx.from, to: this.state.newTx.to, - value: this.state.newTx.amount.toString(16), + value: sendAmount, // New: gas will now be specified on this step gas: this.state.newTx.gas, -- cgit v1.2.3 From 09a4491bb1fe0acfbc4b55ca1dd2b2a813454c6f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 11:15:50 -0230 Subject: Fix saving/sending of amounts in USD --- ui/app/send.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index a7e81a847..d223db96f 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -21,6 +21,7 @@ const { const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') const { isHex, numericBalance } = require('./util') const { conversionUtil } = require('./conversion-util') +const BigNumber = require('bignumber.js') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' @@ -243,7 +244,7 @@ SendTransactionScreen.prototype.render = function () { ]), h('input.large-input.send-screen-input', { - placeholder: '0 ETH', + placeholder: `0 ${currentCurrency}`, type: 'number', onChange: (event) => { this.setState({ @@ -667,14 +668,19 @@ SendTransactionScreen.prototype.onSubmit = function () { this.props.dispatch(addToAddressBook(recipient, nickname)) + // TODO: need a clean way to integrate this into conversionUtil + const sendConversionRate = this.props.currentCurrency === 'ETH' + ? this.props.conversionRate + : new BigNumber(1.0).div(this.props.conversionRate) + const sendAmount = conversionUtil(this.state.newTx.amount, { fromNumericBase: 'dec', toNumericBase: 'hex', fromCurrency: this.props.currentCurrency, toCurrency: 'ETH', - conversionRate: this.props.conversionRate, + conversionRate: sendConversionRate, }) - + var txParams = { from: this.state.newTx.from, to: this.state.newTx.to, -- cgit v1.2.3 From ca46bd200b24456d692cf1ede47506be5fdcc76d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 15:27:15 -0230 Subject: Stop setting 'currentCurrency' and use local state for active currency in send.js --- ui/app/send.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index d223db96f..8969e5fa3 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -10,7 +10,6 @@ const GasFeeDisplay = require('./components/send/gas-fee-display') const { getSelectedIdentity } = require('./selectors') const { - setCurrentCurrency, showAccountsPage, backToAccountDetail, displayWarning, @@ -35,7 +34,6 @@ function mapStateToProps (state) { network, addressBook, conversionRate, - currentCurrency, currentBlockGasLimit: blockGasLimit, } = state.metamask const { warning } = state.appState @@ -49,7 +47,6 @@ function mapStateToProps (state) { network, addressBook, conversionRate, - currentCurrency, blockGasLimit, warning, selectedIdentity, @@ -77,6 +74,7 @@ function SendTransactionScreen () { txData: null, memo: '', }, + activeCurrency: 'USD', tooltipIsOpen: false, } @@ -84,7 +82,7 @@ function SendTransactionScreen () { this.closeTooltip = this.closeTooltip.bind(this) this.onSubmit = this.onSubmit.bind(this) this.recipientDidChange = this.recipientDidChange.bind(this) - this.setCurrentCurrency = this.setCurrentCurrency.bind(this) + this.setActiveCurrency = this.setActiveCurrency.bind(this) this.toggleTooltip = this.toggleTooltip.bind(this) } @@ -98,12 +96,11 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, conversionRate, - currentCurrency, } = props - const { blockGasLimit, newTx } = this.state + const { blockGasLimit, newTx, activeCurrency } = this.state const { gas, gasPrice } = newTx - + console.log(`activeCurrency`, activeCurrency); console.log({ selectedIdentity, identities }) console.log('SendTransactionScreen state:', this.state) @@ -238,8 +235,8 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), h(CurrencyToggle, { - currentCurrency, - onClick: (newCurrency) => this.setCurrentCurrency(newCurrency), + activeCurrency, + onClick: (newCurrency) => this.setActiveCurrency(newCurrency), }), // holding on icon from design ]), @@ -296,7 +293,7 @@ SendTransactionScreen.prototype.render = function () { // TODO: handle loading time when switching to USD h('div.large-input.send-screen-gas-input', {}, [ h(GasFeeDisplay, { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, @@ -356,8 +353,8 @@ SendTransactionScreen.prototype.render = function () { // Buttons underneath card h('section.flex-column.flex-center', [ - h('button.btn-light', { - onClick: this.onSubmit, + h('div.btn-light.send-screen-send-button', { + onClick: (event) => this.onSubmit(event), style: { marginTop: '8px', width: '8em', @@ -603,8 +600,8 @@ SendTransactionScreen.prototype.closeTooltip = function () { this.setState({ tooltipIsOpen: false }) } -SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { - this.props.dispatch(setCurrentCurrency(newCurrency)) +SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { + this.setState({ activeCurrency: newCurrency }) } SendTransactionScreen.prototype.navigateToAccounts = function (event) { @@ -624,7 +621,8 @@ SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickna }) } -SendTransactionScreen.prototype.onSubmit = function () { +SendTransactionScreen.prototype.onSubmit = function (event) { + event.preventDefault() const state = this.state || {} // const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') -- cgit v1.2.3 From 6bd71d69378c74de8748bdfb5476ec082077676c Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 20:43:47 -0230 Subject: Fix send and pending. --- ui/app/send.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 8969e5fa3..ad749efe7 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -241,7 +241,7 @@ SendTransactionScreen.prototype.render = function () { ]), h('input.large-input.send-screen-input', { - placeholder: `0 ${currentCurrency}`, + placeholder: `0 ${activeCurrency}`, type: 'number', onChange: (event) => { this.setState({ -- cgit v1.2.3 From 4bcc62500f6f77131a21be823e3169b91d1dbf80 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 01:32:24 -0700 Subject: Style send ether screen --- ui/app/send.js | 341 +++++++-------------------------------------------------- 1 file changed, 37 insertions(+), 304 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index ad749efe7..4e7fdb705 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -91,52 +91,34 @@ SendTransactionScreen.prototype.render = function () { const props = this.props const { - selectedIdentity, - network, - identities, - addressBook, + // selectedIdentity, + // network, + // identities, + // addressBook, conversionRate, } = props const { blockGasLimit, newTx, activeCurrency } = this.state const { gas, gasPrice } = newTx - console.log(`activeCurrency`, activeCurrency); - console.log({ selectedIdentity, identities }) - console.log('SendTransactionScreen state:', this.state) + // console.log(`activeCurrency`, activeCurrency) + // console.log({ selectedIdentity, identities }) + // console.log('SendTransactionScreen state:', this.state) return ( - h('div.send-screen-wrapper', { - style: {}, - }, [ - + h('div.send-screen-wrapper', [ // Main Send token Card - h('div.send-screen-card', { - style: {}, - }, [ + h('div.send-screen-card', [ - h('img.send-eth-icon', { - src: '../images/eth_logo.svg', - style: {}, - }), + h('img.send-eth-icon', { src: '../images/eth_logo.svg' }), - h('div', {}, [ - 'Send', - ]), + h('div.send-screen__title', 'Send'), - h('div', { - style: { - textAlign: 'center', - }, - }, [ - 'Send Ethereum to anyone with an Ethereum account', - ]), + h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'), - h('div.send-screen-input-wrapper', {}, [ + h('div.send-screen-input-wrapper', [ - h('div', {}, [ - 'From:', - ]), + h('div', 'From:'), h('input.large-input.send-screen-input', { list: 'accounts', @@ -151,10 +133,9 @@ SendTransactionScreen.prototype.render = function () { }, }) }, - }, [ - ]), + }), - h('datalist#accounts', {}, [ + h('datalist#accounts', [ Object.keys(props.identities).map((key) => { const identity = props.identities[key] return h('option', { @@ -167,11 +148,9 @@ SendTransactionScreen.prototype.render = function () { ]), - h('div.send-screen-input-wrapper', {}, [ + h('div.send-screen-input-wrapper', [ - h('div', {}, [ - 'To:', - ]), + h('div', 'To:'), h('input.large-input.send-screen-input', { name: 'address', @@ -187,10 +166,9 @@ SendTransactionScreen.prototype.render = function () { }, }) }, - }, [ - ]), + }), - h('datalist#addresses', {}, [ + h('datalist#addresses', [ // Corresponds to the addresses owned. Object.entries(props.identities).map(([key, { address, name }]) => { return h('option', { @@ -230,10 +208,10 @@ SendTransactionScreen.prototype.render = function () { ]), - h('div.send-screen-input-wrapper', {}, [ + h('div.send-screen-input-wrapper', [ - h('div.send-screen-amount-labels', {}, [ - h('span', {}, ['Amount']), + h('div.send-screen-amount-labels', [ + h('span', 'Amount'), h(CurrencyToggle, { activeCurrency, onClick: (newCurrency) => this.setActiveCurrency(newCurrency), @@ -253,11 +231,11 @@ SendTransactionScreen.prototype.render = function () { ), }) }, - }, []), + }), ]), - h('div.send-screen-input-wrapper', {}, [ + h('div.send-screen-input-wrapper', [ this.state.tooltipIsOpen && h(GasTooltip, { className: 'send-tooltip', gasPrice, @@ -271,23 +249,15 @@ SendTransactionScreen.prototype.render = function () { gasPrice, }, }) - } + }, }), - h('div.send-screen-gas-labels', {}, [ - h('span', {}, [ - h('i.fa.fa-bolt', {}, []), - - // not working ATM. - // Ship with fa-bolt if it's slowing us down... - // h('img.send-screen-bolt-icon', { - // src: '../images/mm_bolt.svg', - // style: {}, - // }, []), - + h('div.send-screen-gas-labels', [ + h('span', [ + h('i.fa.fa-bolt'), 'Gas fee:', ]), - h('span', {}, ['What\'s this?']), + h('span', 'What\'s this?'), ]), // TODO: handle loading time when switching to USD @@ -305,13 +275,11 @@ SendTransactionScreen.prototype.render = function () { 'Customize', ]), ]), - - ]), - - h('div.send-screen-input-wrapper', {}, [ - h('div', {}, ['Transaction memo (optional)']), + ]), + h('div.send-screen-input-wrapper', [ + h('div', 'Transaction memo (optional)'), h('input.large-input.send-screen-input', { onChange: () => { this.setState({ @@ -323,15 +291,11 @@ SendTransactionScreen.prototype.render = function () { ), }) }, - }, [ - ]), - + }), ]), h('div.send-screen-input-wrapper', {}, [ - h('div', {}, ['Data (optional)']), - h('input.large-input.send-screen-input', { onChange: () => { this.setState({ @@ -343,248 +307,17 @@ SendTransactionScreen.prototype.render = function () { ), }) }, - }, [ - ]), - - ]), - - ]), - - // Buttons underneath card - h('section.flex-column.flex-center', [ - - h('div.btn-light.send-screen-send-button', { - onClick: (event) => this.onSubmit(event), - style: { - marginTop: '8px', - width: '8em', - background: '#FFFFFF', - }, - }, 'Next'), - - h('button.btn-light', { - onClick: this.back, - style: { - background: '#F7F7F7', // $alabaster - border: 'none', - opacity: 1, - width: '8em', - }, - }, 'Cancel'), - ]), - ]) - - ) -} - -// WIP - hyperscript for renderSendToken - hook up later - can take pieces to re-implement -SendTransactionScreen.prototype.renderSendToken = function () { - this.persistentFormParentId = 'send-tx-form' - - const props = this.props - const { - network, - identities, - addressBook, - } = props - - return ( - - h('div.flex-column.flex-grow', { - style: { - minWidth: '355px', // TODO: maxWidth TBD, use home.html - }, - }, [ - - // Main Send token Card - h('div.send-screen.flex-column.flex-grow', { - style: { - marginLeft: '3.5%', - marginRight: '3.5%', - background: '#FFFFFF', // $background-white - boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', - }, - }, [ - h('section.flex-center.flex-row', { - style: { - zIndex: 15, // $token-icon-z-index - marginTop: '-35px', - }, - }, [ - h(Identicon, { - address: ARAGON, - diameter: 76, - }), - ]), - - h('h3.flex-center', { - style: { - marginTop: '-18px', - fontSize: '16px', - }, - }, [ - 'Send Tokens', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '12px', - }, - }, [ - 'Send Tokens to anyone with an Ethereum account', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - marginTop: '2px', - fontSize: '12px', - }, - }, [ - 'Your Aragon Token Balance is:', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '36px', - marginTop: '8px', - }, - }, [ - '2.34', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '12px', - marginTop: '4px', - }, - }, [ - 'ANT', - ]), - - // error message - props.error && h('span.error.flex-center', props.error), - - // 'to' field - h('section.flex-row.flex-center', { - style: { - fontSize: '12px', - }, - }, [ - h(EnsInput, { - name: 'address', - placeholder: 'Recipient Address', - onChange: this.recipientDidChange, - network, - identities, - addressBook, - }), - ]), - - // 'amount' and send button - h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'space-between', - }, - }, [ - h('span', { style: {} }, ['Amount']), - h('span', { style: {} }, ['Token <> USD']), - ]), - - h('input.large-input', { - name: 'amount', - placeholder: '0', - type: 'number', - style: { - marginRight: '6px', - fontSize: '12px', - }, - dataset: { - persistentFormId: 'tx-amount', - }, - }), - - ]), - - h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'space-between', - }, - }, [ - h('span', { style: {} }, ['Gas Fee:']), - h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), - ]), - - h('input.large-input', { - name: 'Gas Fee', - placeholder: '0', - type: 'number', - style: { - fontSize: '12px', - marginRight: '6px', - }, - // dataset: { - // persistentFormId: 'tx-amount', - // }, - }), - - ]), - - h('section.flex-column.flex-center', { - style: { - marginBottom: '10px', - }, - }, [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'flex-start', - }, - }, [ - h('span', { style: {} }, ['Transaction Memo (optional)']), - ]), - - h('input.large-input', { - name: 'memo', - placeholder: '', - type: 'string', - style: { - marginRight: '6px', - }, }), ]), ]), // Buttons underneath card h('section.flex-column.flex-center', [ - - h('button.btn-light', { - onClick: this.onSubmit, - style: { - marginTop: '8px', - width: '8em', - background: '#FFFFFF', - }, + h('button.btn-secondary.send-screen__send-button', { + onClick: (event) => this.onSubmit(event), }, 'Next'), - - h('button.btn-light', { + h('button.btn-tertiary.send-screen__cancel-button', { onClick: this.back, - style: { - background: '#F7F7F7', // $alabaster - border: 'none', - opacity: 1, - width: '8em', - }, }, 'Cancel'), ]), ]) -- cgit v1.2.3 From 54bbf8d8590014b92e7857f30bdc2d8f3779431a Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 23:50:13 -0230 Subject: Handle transaction totals in WEI in tx-list, send and pending. --- ui/app/send.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 4e7fdb705..b14c48e56 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -400,15 +400,16 @@ SendTransactionScreen.prototype.onSubmit = function (event) { this.props.dispatch(addToAddressBook(recipient, nickname)) // TODO: need a clean way to integrate this into conversionUtil - const sendConversionRate = this.props.currentCurrency === 'ETH' + const sendConversionRate = state.activeCurrency === 'ETH' ? this.props.conversionRate : new BigNumber(1.0).div(this.props.conversionRate) const sendAmount = conversionUtil(this.state.newTx.amount, { fromNumericBase: 'dec', toNumericBase: 'hex', - fromCurrency: this.props.currentCurrency, + fromCurrency: state.activeCurrency, toCurrency: 'ETH', + toDenomination: 'WEI', conversionRate: sendConversionRate, }) -- cgit v1.2.3 From 4fa79ffc6eccce1c758f719062d2db6abb65489c Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 13:15:47 -0230 Subject: Clean up code in send.js --- ui/app/send.js | 427 ++++++++++++++++++++++++++------------------------------- 1 file changed, 193 insertions(+), 234 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index bfc569b7d..481682bc8 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -18,12 +18,10 @@ const { signTx, } = require('./actions') const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') -const { isHex, numericBalance } = require('./util') +const { isHex, numericBalance, isValidAddress } = require('./util') const { conversionUtil } = require('./conversion-util') const BigNumber = require('bignumber.js') -const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' - module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { @@ -81,9 +79,180 @@ function SendTransactionScreen () { this.back = this.back.bind(this) this.closeTooltip = this.closeTooltip.bind(this) this.onSubmit = this.onSubmit.bind(this) - this.recipientDidChange = this.recipientDidChange.bind(this) this.setActiveCurrency = this.setActiveCurrency.bind(this) this.toggleTooltip = this.toggleTooltip.bind(this) + + this.renderFromInput = this.renderFromInput.bind(this) + this.renderToInput = this.renderToInput.bind(this) + this.renderAmountInput = this.renderAmountInput.bind(this) + this.renderGasInput = this.renderGasInput.bind(this) + this.renderMemoInput = this.renderMemoInput.bind(this) +} + +SendTransactionScreen.prototype.renderFromInput = function (from, identities) { + return h('div.send-screen-input-wrapper', [ + + h('div', 'From:'), + + h('input.large-input.send-screen-input', { + list: 'accounts', + placeholder: 'Account', + value: from, + onChange: (event) => { + this.setState({ + newTx: { + ...this.state.newTx, + from: event.target.value, + }, + }) + }, + }), + + h('datalist#accounts', [ + Object.entries(identities).map(([key, { address, name }]) => { + return h('option', { + value: address, + label: name, + key: address, + }) + }), + ]), + + ]) +} + +SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) { + return h('div.send-screen-input-wrapper', [ + + h('div', 'To:'), + + h('input.large-input.send-screen-input', { + name: 'address', + list: 'addresses', + placeholder: 'Address', + value: to, + onChange: (event) => { + this.setState({ + newTx: { + ...this.state.newTx, + to: event.target.value, + }, + }) + }, + }), + + h('datalist#addresses', [ + // Corresponds to the addresses owned. + ...Object.entries(identities).map(([key, { address, name }]) => { + return h('option', { + value: address, + label: name, + key: address, + }) + }), + // Corresponds to previously sent-to addresses. + ...addressBook.map(({ address, name }) => { + return h('option', { + value: address, + label: name, + key: address, + }) + }), + ]), + + ]) +} + +SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { + return h('div.send-screen-input-wrapper', [ + + h('div.send-screen-amount-labels', [ + h('span', 'Amount'), + h(CurrencyToggle, { + activeCurrency, + onClick: (newCurrency) => this.setActiveCurrency(newCurrency), + }), // holding on icon from design + ]), + + h('input.large-input.send-screen-input', { + placeholder: `0 ${activeCurrency}`, + type: 'number', + onChange: (event) => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + amount: event.target.value, + } + ), + }) + }, + }), + + ]) +} + +SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) { + return h('div.send-screen-input-wrapper', [ + this.state.tooltipIsOpen && h(GasTooltip, { + className: 'send-tooltip', + gasPrice, + gasLimit: gas, + onClose: this.closeTooltip, + onFeeChange: ({gasLimit, gasPrice}) => { + this.setState({ + newTx: { + ...this.state.newTx, + gas: gasLimit, + gasPrice, + }, + }) + }, + }), + + h('div.send-screen-gas-labels', [ + h('span', [ + h('i.fa.fa-bolt'), + 'Gas fee:', + ]), + h('span', 'What\'s this?'), + ]), + + // TODO: handle loading time when switching to USD + h('div.large-input.send-screen-gas-input', {}, [ + h(GasFeeDisplay, { + activeCurrency, + conversionRate, + gas, + gasPrice, + blockGasLimit, + }), + h('div.send-screen-gas-input-customize', { + onClick: this.toggleTooltip, + }, [ + 'Customize', + ]), + ]), + + ]) +} + +SendTransactionScreen.prototype.renderMemoInput = function () { + return h('div.send-screen-input-wrapper', [ + h('div', 'Transaction memo (optional)'), + h('input.large-input.send-screen-input', { + onChange: () => { + this.setState({ + newTx: Object.assign( + this.state.newTx, + { + memo: event.target.value, + } + ), + }) + }, + }), + ]) } SendTransactionScreen.prototype.render = function () { @@ -93,16 +262,13 @@ SendTransactionScreen.prototype.render = function () { const { // selectedIdentity, // network, - // identities, - // addressBook, + identities, + addressBook, conversionRate, } = props const { blockGasLimit, newTx, activeCurrency } = this.state const { gas, gasPrice } = newTx - // console.log(`activeCurrency`, activeCurrency) - // console.log({ selectedIdentity, identities }) - // console.log('SendTransactionScreen state:', this.state) return ( @@ -116,199 +282,16 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'), - h('div.send-screen-input-wrapper', [ - - h('div', 'From:'), - - h('input.large-input.send-screen-input', { - list: 'accounts', - placeholder: 'Account', - value: this.state.newTx.from, - onChange: (event) => { - console.log('event', event.target.value) - this.setState({ - newTx: { - ...this.state.newTx, - from: event.target.value, - }, - }) - }, - }), - - h('datalist#accounts', [ - Object.keys(props.identities).map((key) => { - const identity = props.identities[key] - return h('option', { - value: identity.address, - label: identity.name, - key: identity.address, - }) - }), - ]), - - ]), - - h('div.send-screen-input-wrapper', [ - - h('div', 'To:'), - - h('input.large-input.send-screen-input', { - name: 'address', - list: 'addresses', - placeholder: 'Address', - value: this.state.newTx.to, - onChange: (event) => { - console.log('event', event.target.value) - this.setState({ - newTx: { - ...this.state.newTx, - to: event.target.value, - }, - }) - }, - }), - - h('datalist#addresses', [ - // Corresponds to the addresses owned. - Object.entries(props.identities).map(([key, { address, name }]) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - // Corresponds to previously sent-to addresses. - props.addressBook.map(({ address, name }) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - ]), - - // h(EnsInput, { - // name: 'address', - // placeholder: 'Recipient Address', - // value: this.state.newTx.to, - // onChange: (event) => { - // this.setState({ - // newTx: Object.assign( - // this.state.newTx, - // { - // to: event.target.value, - // } - // ), - // }) - // }, - // network, - // identities, - // addressBook, - // }), - - ]), - - h('div.send-screen-input-wrapper', [ - - h('div.send-screen-amount-labels', [ - h('span', 'Amount'), - h(CurrencyToggle, { - activeCurrency, - onClick: (newCurrency) => this.setActiveCurrency(newCurrency), - }), // holding on icon from design - ]), - - h('input.large-input.send-screen-input', { - placeholder: `0 ${activeCurrency}`, - type: 'number', - onChange: (event) => { - this.setState({ - newTx: Object.assign( - this.state.newTx, - { - amount: event.target.value, - } - ), - }) - }, - }), - - ]), - - h('div.send-screen-input-wrapper', [ - this.state.tooltipIsOpen && h(GasTooltip, { - className: 'send-tooltip', - gasPrice, - gasLimit: gas, - onClose: this.closeTooltip, - onFeeChange: ({gasLimit, gasPrice}) => { - this.setState({ - newTx: { - ...this.state.newTx, - gas: gasLimit, - gasPrice, - }, - }) - }, - }), - - h('div.send-screen-gas-labels', [ - h('span', [ - h('i.fa.fa-bolt'), - 'Gas fee:', - ]), - h('span', 'What\'s this?'), - ]), - - // TODO: handle loading time when switching to USD - h('div.large-input.send-screen-gas-input', {}, [ - h(GasFeeDisplay, { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - }), - h('div.send-screen-gas-input-customize', { - onClick: this.toggleTooltip, - }, [ - 'Customize', - ]), - ]), - - ]), - - h('div.send-screen-input-wrapper', [ - h('div', 'Transaction memo (optional)'), - h('input.large-input.send-screen-input', { - onChange: () => { - this.setState({ - newTx: Object.assign( - this.state.newTx, - { - memo: event.target.value, - } - ), - }) - }, - }), - ]), - - h('div.send-screen-input-wrapper', {}, [ - h('div', {}, ['Data (optional)']), - h('input.large-input.send-screen-input', { - onChange: () => { - this.setState({ - newTx: Object.assign( - this.state.newTx, - { - txData: event.target.value, - } - ), - }) - }, - }), - ]), + this.renderFromInput(this.state.newTx.from, identities), + + this.renderToInput(this.state.newTx.to, identities, addressBook), + + this.renderAmountInput(activeCurrency), + + this.renderGasInput(gasPrice, gas, activeCurrency, conversionRate, blockGasLimit), + + this.renderMemoInput(), + ]), // Buttons underneath card @@ -337,41 +320,21 @@ SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { this.setState({ activeCurrency: newCurrency }) } -SendTransactionScreen.prototype.navigateToAccounts = function (event) { - event.stopPropagation() - this.props.dispatch(showAccountsPage()) -} - SendTransactionScreen.prototype.back = function () { var address = this.props.address this.props.dispatch(backToAccountDetail(address)) } -SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) { - this.setState({ - recipient: recipient, - nickname: nickname, - }) -} - SendTransactionScreen.prototype.onSubmit = function (event) { event.preventDefault() + const { warning } = this.props const state = this.state || {} - // const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') const recipient = state.newTx.to - const nickname = state.nickname || ' ' - // const input = document.querySelector('input[name="amount"]').value - // const input = state.newTx.value - // const value = util.normalizeEthStringToWei(input) - - // https://consensys.slack.com/archives/G1L7H42BT/p1503439134000169?thread_ts=1503438076.000411&cid=G1L7H42BT - // From @kumavis: "not needed for MVP but we will end up adding it again so consider just adding it now" - const txData = false - // Must replace with memo data. - // const txData = document.querySelector('input[name="txData"]').value + // TODO: convert this to hex when created and include it in send + const txData = state.newTx.memo let message @@ -385,14 +348,9 @@ SendTransactionScreen.prototype.onSubmit = function (event) { // return this.props.dispatch(actions.displayWarning(message)) // } - if ((util.isInvalidChecksumAddress(recipient))) { - message = 'Recipient address checksum is invalid.' - return this.props.dispatch(actions.displayWarning(message)) - } - - if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) { + if (!isValidAddress(recipient) && !recipient) { message = 'Recipient address is invalid.' - return this.props.dispatch(actions.displayWarning(message)) + return this.props.dispatch(displayWarning(message)) } if (txData && !isHex(stripHexPrefix(txData))) { @@ -424,7 +382,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) { value: sendAmount, - // New: gas will now be specified on this step gas: this.state.newTx.gas, gasPrice: this.state.newTx.gasPrice, } @@ -432,5 +389,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { if (recipient) txParams.to = addHexPrefix(recipient) if (txData) txParams.data = txData - this.props.dispatch(signTx(txParams)) + if (!warning) { + this.props.dispatch(signTx(txParams)) + } } -- cgit v1.2.3 From 14bdc5a78c8529742754d69b8e45693b06b380fe Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 15:07:12 -0230 Subject: Client side error handling for from, to and amount fields in send.js --- ui/app/send.js | 195 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 151 insertions(+), 44 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 481682bc8..16fe470be 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -18,8 +18,8 @@ const { signTx, } = require('./actions') const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') -const { isHex, numericBalance, isValidAddress } = require('./util') -const { conversionUtil } = require('./conversion-util') +const { isHex, numericBalance, isValidAddress, allNull } = require('./util') +const { conversionUtil, conversionGreaterThan } = require('./conversion-util') const BigNumber = require('bignumber.js') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -51,7 +51,7 @@ function mapStateToProps (state) { error: warning && warning.split('.')[0], account, identity: identities[address], - balance: account ? numericBalance(account.balance) : null, + balance: account ? account.balance : null, } } @@ -65,8 +65,8 @@ function SendTransactionScreen () { newTx: { from: '', to: '', - // these values are hardcoded, so "Next" can be clicked - amount: '0x0', // see L544 + amount: 0, + amountToSend: '0x0', gasPrice: '0x5d21dba00', gas: '0x7b0d', txData: null, @@ -74,6 +74,8 @@ function SendTransactionScreen () { }, activeCurrency: 'USD', tooltipIsOpen: false, + errors: {}, + isValid: false, } this.back = this.back.bind(this) @@ -81,12 +83,26 @@ function SendTransactionScreen () { this.onSubmit = this.onSubmit.bind(this) this.setActiveCurrency = this.setActiveCurrency.bind(this) this.toggleTooltip = this.toggleTooltip.bind(this) + this.validate = this.validate.bind(this) + this.getAmountToSend = this.getAmountToSend.bind(this) + this.setErrorsFor = this.setErrorsFor.bind(this) + this.clearErrorsFor = this.clearErrorsFor.bind(this) this.renderFromInput = this.renderFromInput.bind(this) this.renderToInput = this.renderToInput.bind(this) this.renderAmountInput = this.renderAmountInput.bind(this) this.renderGasInput = this.renderGasInput.bind(this) this.renderMemoInput = this.renderMemoInput.bind(this) + this.renderErrorMessage = this.renderErrorMessage.bind(this) +} + +SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { + const { errors } = this.state + const errorMessage = errors[errorType]; + + return errorMessage || warning + ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ]) + : null } SendTransactionScreen.prototype.renderFromInput = function (from, identities) { @@ -106,6 +122,8 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) { }, }) }, + onBlur: () => this.setErrorsFor('from'), + onFocus: () => this.clearErrorsFor('from'), }), h('datalist#accounts', [ @@ -118,6 +136,8 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) { }), ]), + this.renderErrorMessage('from'), + ]) } @@ -139,6 +159,8 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres }, }) }, + onBlur: () => this.setErrorsFor('to'), + onFocus: () => this.clearErrorsFor('to'), }), h('datalist#addresses', [ @@ -160,6 +182,8 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres }), ]), + this.renderErrorMessage('to'), + ]) } @@ -183,12 +207,17 @@ SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { this.state.newTx, { amount: event.target.value, + amountToSend: this.getAmountToSend(event.target.value), } ), }) }, + onBlur: () => this.setErrorsFor('amount'), + onFocus: () => this.clearErrorsFor('amount'), }), + this.renderErrorMessage('amount'), + ]) } @@ -260,14 +289,13 @@ SendTransactionScreen.prototype.render = function () { const props = this.props const { - // selectedIdentity, - // network, + warning, identities, addressBook, conversionRate, } = props - const { blockGasLimit, newTx, activeCurrency } = this.state + const { blockGasLimit, newTx, activeCurrency, isValid } = this.state const { gas, gasPrice } = newTx return ( @@ -292,12 +320,15 @@ SendTransactionScreen.prototype.render = function () { this.renderMemoInput(), + this.renderErrorMessage(null, warning), + ]), // Buttons underneath card h('section.flex-column.flex-center', [ h('button.btn-secondary.send-screen__send-button', { - onClick: (event) => this.onSubmit(event), + className: !isValid && 'send-screen__send-button__disabled', + onClick: (event) => isValid && this.onSubmit(event), }, 'Next'), h('button.btn-tertiary.send-screen__cancel-button', { onClick: this.back, @@ -325,62 +356,140 @@ SendTransactionScreen.prototype.back = function () { this.props.dispatch(backToAccountDetail(address)) } -SendTransactionScreen.prototype.onSubmit = function (event) { - event.preventDefault() - const { warning } = this.props - const state = this.state || {} +SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) { + const sufficientBalance = conversionGreaterThan( + { + value: balance, + fromNumericBase: 'hex', + }, + { + value: amountToSend, + fromNumericBase: 'hex', + }, + ) - const recipient = state.newTx.to - const nickname = state.nickname || ' ' + const amountLessThanZero = conversionGreaterThan( + { + value: 0, + fromNumericBase: 'dec', + }, + { + value: amountToSend, + fromNumericBase: 'hex', + }, + ) - // TODO: convert this to hex when created and include it in send - const txData = state.newTx.memo + const errors = {} - let message + if (!sufficientBalance) { + errors.amount = 'Insufficient funds.' + } - // if (value.gt(balance)) { - // message = 'Insufficient funds.' - // return this.props.dispatch(actions.displayWarning(message)) - // } + if (amountLessThanZero) { + errors.amount = 'Can not send negative amounts of ETH.' + } - // if (input < 0) { - // message = 'Can not send negative amounts of ETH.' - // return this.props.dispatch(actions.displayWarning(message)) - // } + if (!from) { + errors.from = 'Required' + } - if (!isValidAddress(recipient) && !recipient) { - message = 'Recipient address is invalid.' - return this.props.dispatch(displayWarning(message)) + if (from && !isValidAddress(from)) { + errors.from = 'Sender address is invalid.' } - if (txData && !isHex(stripHexPrefix(txData))) { - message = 'Transaction data must be hex string.' - return this.props.dispatch(displayWarning(message)) + if (!to) { + errors.to = 'Required' } - this.props.dispatch(hideWarning()) + if (to && !isValidAddress(to)) { + errors.to = 'Recipient address is invalid.' + } - this.props.dispatch(addToAddressBook(recipient, nickname)) + // if (txData && !isHex(stripHexPrefix(txData))) { + // message = 'Transaction data must be hex string.' + // return this.props.dispatch(displayWarning(message)) + // } + + return { + isValid: allNull(errors), + errors, + } +} + +SendTransactionScreen.prototype.getAmountToSend = function (amount) { + const { activeCurrency } = this.state + const { conversionRate } = this.props // TODO: need a clean way to integrate this into conversionUtil - const sendConversionRate = state.activeCurrency === 'ETH' - ? this.props.conversionRate - : new BigNumber(1.0).div(this.props.conversionRate) + const sendConversionRate = activeCurrency === 'ETH' + ? conversionRate + : new BigNumber(1.0).div(conversionRate) - const sendAmount = conversionUtil(this.state.newTx.amount, { + return conversionUtil(amount, { fromNumericBase: 'dec', toNumericBase: 'hex', - fromCurrency: state.activeCurrency, + fromCurrency: activeCurrency, toCurrency: 'ETH', toDenomination: 'WEI', conversionRate: sendConversionRate, }) - +} + +SendTransactionScreen.prototype.setErrorsFor = function (field) { + const { balance } = this.props + const { newTx, errors: previousErrors } = this.state + const { amountToSend } = newTx + + const { + isValid, + errors: newErrors + } = this.validate(balance, amountToSend, newTx) + + const nextErrors = Object.assign({}, previousErrors, { + [field]: newErrors[field] || null + }) + + if (!isValid) { + this.setState({ + errors: nextErrors, + isValid, + }) + } +} + +SendTransactionScreen.prototype.clearErrorsFor = function (field) { + const { errors: previousErrors } = this.state + const nextErrors = Object.assign({}, previousErrors, { + [field]: null + }) + + this.setState({ + errors: nextErrors, + isValid: allNull(nextErrors), + }) +} + +SendTransactionScreen.prototype.onSubmit = function (event) { + event.preventDefault() + const { warning, balance, amountToSend } = this.props + const state = this.state || {} + + const recipient = state.newTx.to + const sender = state.newTx.from + const nickname = state.nickname || ' ' + + // TODO: convert this to hex when created and include it in send + const txData = state.newTx.memo + + this.props.dispatch(hideWarning()) + + this.props.dispatch(addToAddressBook(recipient, nickname)) + var txParams = { from: this.state.newTx.from, to: this.state.newTx.to, - value: sendAmount, + value: amountToSend, gas: this.state.newTx.gas, gasPrice: this.state.newTx.gasPrice, @@ -389,7 +498,5 @@ SendTransactionScreen.prototype.onSubmit = function (event) { if (recipient) txParams.to = addHexPrefix(recipient) if (txData) txParams.data = txData - if (!warning) { - this.props.dispatch(signTx(txParams)) - } + this.props.dispatch(signTx(txParams)) } -- cgit v1.2.3 From 88c4226bf1dca8647a45f3921396daaa88bbf939 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 01:45:26 -0230 Subject: Estimate gasPrice and gasLimit in send screen. --- ui/app/send.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 7 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 16fe470be..4ce7fc475 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -16,6 +16,10 @@ const { hideWarning, addToAddressBook, signTx, + estimateGas, + getGasPrice, + clearGasEstimate, + clearGasPrice, } = require('./actions') const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') const { isHex, numericBalance, isValidAddress, allNull } = require('./util') @@ -33,6 +37,8 @@ function mapStateToProps (state) { addressBook, conversionRate, currentBlockGasLimit: blockGasLimit, + estimatedGas, + blockGasPrice, } = state.metamask const { warning } = state.appState const selectedIdentity = getSelectedIdentity(state) @@ -46,6 +52,8 @@ function mapStateToProps (state) { addressBook, conversionRate, blockGasLimit, + blockGasPrice, + estimatedGas, warning, selectedIdentity, error: warning && warning.split('.')[0], @@ -67,8 +75,11 @@ function SendTransactionScreen () { to: '', amount: 0, amountToSend: '0x0', - gasPrice: '0x5d21dba00', - gas: '0x7b0d', + gasPrice: null, + gas: null, + amount: '0x0', + gasPrice: null, + gas: null, txData: null, memo: '', }, @@ -87,6 +98,7 @@ function SendTransactionScreen () { this.getAmountToSend = this.getAmountToSend.bind(this) this.setErrorsFor = this.setErrorsFor.bind(this) this.clearErrorsFor = this.clearErrorsFor.bind(this) + this.estimateGasAndPrice = this.estimateGasAndPrice.bind(this) this.renderFromInput = this.renderFromInput.bind(this) this.renderToInput = this.renderToInput.bind(this) @@ -96,6 +108,11 @@ function SendTransactionScreen () { this.renderErrorMessage = this.renderErrorMessage.bind(this) } +SendTransactionScreen.prototype.componentWillMount = function() { + this.props.dispatch(clearGasEstimate()) + this.props.dispatch(clearGasPrice()) +} + SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { const { errors } = this.state const errorMessage = errors[errorType]; @@ -159,7 +176,10 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres }, }) }, - onBlur: () => this.setErrorsFor('to'), + onBlur: () => { + this.setErrorsFor('to') + this.estimateGasAndPrice() + }, onFocus: () => this.clearErrorsFor('to'), }), @@ -212,7 +232,10 @@ SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { ), }) }, - onBlur: () => this.setErrorsFor('amount'), + onBlur: () => { + this.setErrorsFor('amount') + this.estimateGasAndPrice() + }, onFocus: () => this.clearErrorsFor('amount'), }), @@ -293,6 +316,8 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, conversionRate, + estimatedGas, + blockGasPrice, } = props const { blockGasLimit, newTx, activeCurrency, isValid } = this.state @@ -316,7 +341,13 @@ SendTransactionScreen.prototype.render = function () { this.renderAmountInput(activeCurrency), - this.renderGasInput(gasPrice, gas, activeCurrency, conversionRate, blockGasLimit), + this.renderGasInput( + gasPrice || blockGasPrice || '0x0', + gas || estimatedGas || '0x0', + activeCurrency, + conversionRate, + blockGasLimit + ), this.renderMemoInput(), @@ -351,6 +382,15 @@ SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { this.setState({ activeCurrency: newCurrency }) } +SendTransactionScreen.prototype.estimateGasAndPrice = function () { + const { errors, sendAmount, newTx } = this.state + + if (!errors.to && !errors.amount && newTx.amount > 0) { + this.props.dispatch(getGasPrice()) + this.props.dispatch(estimateGas({ to: newTx.to, amount: sendAmount })) + } +} + SendTransactionScreen.prototype.back = function () { var address = this.props.address this.props.dispatch(backToAccountDetail(address)) @@ -471,7 +511,7 @@ SendTransactionScreen.prototype.clearErrorsFor = function (field) { SendTransactionScreen.prototype.onSubmit = function (event) { event.preventDefault() - const { warning, balance, amountToSend } = this.props + const { warning, balance } = this.props const state = this.state || {} const recipient = state.newTx.to @@ -489,7 +529,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { from: this.state.newTx.from, to: this.state.newTx.to, - value: amountToSend, + value: this.state.newTx.amountToSend, gas: this.state.newTx.gas, gasPrice: this.state.newTx.gasPrice, -- cgit v1.2.3 From 79bcb88db3946260c832402d97e0c800cdeba5a9 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 25 Sep 2017 21:00:32 -0230 Subject: Refactor to store estimated gas and price in local state, return promise from actions. --- ui/app/send.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 4ce7fc475..033692910 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -18,8 +18,6 @@ const { signTx, estimateGas, getGasPrice, - clearGasEstimate, - clearGasPrice, } = require('./actions') const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') const { isHex, numericBalance, isValidAddress, allNull } = require('./util') @@ -52,8 +50,6 @@ function mapStateToProps (state) { addressBook, conversionRate, blockGasLimit, - blockGasPrice, - estimatedGas, warning, selectedIdentity, error: warning && warning.split('.')[0], @@ -73,16 +69,15 @@ function SendTransactionScreen () { newTx: { from: '', to: '', - amount: 0, amountToSend: '0x0', gasPrice: null, gas: null, amount: '0x0', - gasPrice: null, - gas: null, txData: null, memo: '', }, + blockGasPrice: null, + estimatedGas: null, activeCurrency: 'USD', tooltipIsOpen: false, errors: {}, @@ -108,11 +103,6 @@ function SendTransactionScreen () { this.renderErrorMessage = this.renderErrorMessage.bind(this) } -SendTransactionScreen.prototype.componentWillMount = function() { - this.props.dispatch(clearGasEstimate()) - this.props.dispatch(clearGasPrice()) -} - SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { const { errors } = this.state const errorMessage = errors[errorType]; @@ -316,11 +306,16 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, conversionRate, - estimatedGas, - blockGasPrice, } = props - const { blockGasLimit, newTx, activeCurrency, isValid } = this.state + const { + blockGasLimit, + newTx, + activeCurrency, + isValid, + blockGasPrice, + estimatedGas, + } = this.state const { gas, gasPrice } = newTx return ( @@ -386,8 +381,16 @@ SendTransactionScreen.prototype.estimateGasAndPrice = function () { const { errors, sendAmount, newTx } = this.state if (!errors.to && !errors.amount && newTx.amount > 0) { - this.props.dispatch(getGasPrice()) - this.props.dispatch(estimateGas({ to: newTx.to, amount: sendAmount })) + Promise.all([ + this.props.dispatch(getGasPrice()), + this.props.dispatch(estimateGas({ to: newTx.to, amount: sendAmount })), + ]) + .then(([blockGasPrice, estimatedGas]) => { + this.setState({ + blockGasPrice, + estimatedGas, + }) + }) } } -- cgit v1.2.3 From eae40e054418c195310224194d9435ccfbf14e46 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 05:58:43 -0230 Subject: Able to change selections in to and from fields of send and send token. --- ui/app/send.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 16fe470be..8fab8a384 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -123,7 +123,15 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) { }) }, onBlur: () => this.setErrorsFor('from'), - onFocus: () => this.clearErrorsFor('from'), + onFocus: () => { + this.clearErrorsFor('from'), + this.state.newTx.from && this.setState({ + newTx: { + ...this.state.newTx, + from: '', + }, + }) + }, }), h('datalist#accounts', [ @@ -160,7 +168,15 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres }) }, onBlur: () => this.setErrorsFor('to'), - onFocus: () => this.clearErrorsFor('to'), + onFocus: () => { + this.clearErrorsFor('to') + this.state.newTx.to && this.setState({ + newTx: { + ...this.state.newTx, + to: '', + }, + }) + }, }), h('datalist#addresses', [ -- cgit v1.2.3 From 56697ea9a4399ecaccf33ae3ae1a42283bdc9dc7 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 18:47:05 -0230 Subject: Select all in to and from of send screens, instead of clearing on focus. --- ui/app/send.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 8fab8a384..ac1ee0d84 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -123,14 +123,9 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) { }) }, onBlur: () => this.setErrorsFor('from'), - onFocus: () => { + onFocus: event => { this.clearErrorsFor('from'), - this.state.newTx.from && this.setState({ - newTx: { - ...this.state.newTx, - from: '', - }, - }) + this.state.newTx.from && event.target.select() }, }), @@ -168,14 +163,9 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres }) }, onBlur: () => this.setErrorsFor('to'), - onFocus: () => { + onFocus: event => { this.clearErrorsFor('to') - this.state.newTx.to && this.setState({ - newTx: { - ...this.state.newTx, - to: '', - }, - }) + this.state.newTx.to && event.target.select() }, }), -- cgit v1.2.3 From 5f6ec6aa982101bed57d9a8766330af71a274183 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 25 Sep 2017 20:35:14 -0230 Subject: Remove unnecessary trailing comma. --- ui/app/send.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index ac1ee0d84..6c701f982 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -124,7 +124,7 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) { }, onBlur: () => this.setErrorsFor('from'), onFocus: event => { - this.clearErrorsFor('from'), + this.clearErrorsFor('from') this.state.newTx.from && event.target.select() }, }), -- cgit v1.2.3 From 541b69dda9a5ddbb0ea4e4c0df805e886f53645c Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 26 Sep 2017 21:51:45 -0230 Subject: Gets gas and price estimates when send components mount. --- ui/app/send.js | 33 +++++++++++++-------------------- 1 file changed, 13 insertions(+), 20 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 8791e9124..dc7e7c8ec 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -93,7 +93,6 @@ function SendTransactionScreen () { this.getAmountToSend = this.getAmountToSend.bind(this) this.setErrorsFor = this.setErrorsFor.bind(this) this.clearErrorsFor = this.clearErrorsFor.bind(this) - this.estimateGasAndPrice = this.estimateGasAndPrice.bind(this) this.renderFromInput = this.renderFromInput.bind(this) this.renderToInput = this.renderToInput.bind(this) @@ -103,6 +102,19 @@ function SendTransactionScreen () { this.renderErrorMessage = this.renderErrorMessage.bind(this) } +SendTransactionScreen.prototype.componentWillMount = function () { + Promise.all([ + this.props.dispatch(getGasPrice()), + this.props.dispatch(estimateGas()), + ]) + .then(([blockGasPrice, estimatedGas]) => { + this.setState({ + blockGasPrice, + estimatedGas, + }) + }) +} + SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { const { errors } = this.state const errorMessage = errors[errorType]; @@ -171,7 +183,6 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres }, onBlur: () => { this.setErrorsFor('to') - this.estimateGasAndPrice() }, onFocus: event => { this.clearErrorsFor('to') @@ -230,7 +241,6 @@ SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { }, onBlur: () => { this.setErrorsFor('amount') - this.estimateGasAndPrice() }, onFocus: () => this.clearErrorsFor('amount'), }), @@ -383,23 +393,6 @@ SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { this.setState({ activeCurrency: newCurrency }) } -SendTransactionScreen.prototype.estimateGasAndPrice = function () { - const { errors, sendAmount, newTx } = this.state - - if (!errors.to && !errors.amount && newTx.amount > 0) { - Promise.all([ - this.props.dispatch(getGasPrice()), - this.props.dispatch(estimateGas({ to: newTx.to, amount: sendAmount })), - ]) - .then(([blockGasPrice, estimatedGas]) => { - this.setState({ - blockGasPrice, - estimatedGas, - }) - }) - } -} - SendTransactionScreen.prototype.back = function () { var address = this.props.address this.props.dispatch(backToAccountDetail(address)) -- cgit v1.2.3 From 39365f2cc419ee824988e6dad4e8a75e650ad1cc Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 26 Sep 2017 23:03:03 -0230 Subject: Update the correct values in state when estimates are received. --- ui/app/send.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index dc7e7c8ec..4d2a5f48d 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -35,8 +35,6 @@ function mapStateToProps (state) { addressBook, conversionRate, currentBlockGasLimit: blockGasLimit, - estimatedGas, - blockGasPrice, } = state.metamask const { warning } = state.appState const selectedIdentity = getSelectedIdentity(state) @@ -76,8 +74,6 @@ function SendTransactionScreen () { txData: null, memo: '', }, - blockGasPrice: null, - estimatedGas: null, activeCurrency: 'USD', tooltipIsOpen: false, errors: {}, @@ -103,14 +99,19 @@ function SendTransactionScreen () { } SendTransactionScreen.prototype.componentWillMount = function () { + const { newTx } = this.state + Promise.all([ this.props.dispatch(getGasPrice()), this.props.dispatch(estimateGas()), ]) .then(([blockGasPrice, estimatedGas]) => { this.setState({ - blockGasPrice, - estimatedGas, + newTx: { + ...newTx, + gasPrice: blockGasPrice, + gas: estimatedGas, + }, }) }) } @@ -329,8 +330,6 @@ SendTransactionScreen.prototype.render = function () { newTx, activeCurrency, isValid, - blockGasPrice, - estimatedGas, } = this.state const { gas, gasPrice } = newTx @@ -353,8 +352,8 @@ SendTransactionScreen.prototype.render = function () { this.renderAmountInput(activeCurrency), this.renderGasInput( - gasPrice || blockGasPrice || '0x0', - gas || estimatedGas || '0x0', + gasPrice || '0x0', + gas || '0x0', activeCurrency, conversionRate, blockGasLimit -- cgit v1.2.3 From a195427e7208096f6f873175f2cbdbbb0a802191 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 28 Sep 2017 11:40:33 -0230 Subject: Fix send of USD and backspacing amount to 0 --- ui/app/send.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 4d2a5f48d..d92a6f2d5 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -230,12 +230,16 @@ SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { placeholder: `0 ${activeCurrency}`, type: 'number', onChange: (event) => { + const amountToSend = event.target.value + ? this.getAmountToSend(event.target.value) + : '0x0' + this.setState({ newTx: Object.assign( this.state.newTx, { amount: event.target.value, - amountToSend: this.getAmountToSend(event.target.value), + amountToSend: amountToSend, } ), }) -- cgit v1.2.3 From 67ee5b21e6f64ac22e65f2712ae13dd8c09ed113 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 28 Sep 2017 17:39:53 -0700 Subject: Query for gas estimates --- ui/app/send.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index d92a6f2d5..2e6409f32 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -100,12 +100,17 @@ function SendTransactionScreen () { SendTransactionScreen.prototype.componentWillMount = function () { const { newTx } = this.state + const { address } = this.props Promise.all([ this.props.dispatch(getGasPrice()), - this.props.dispatch(estimateGas()), + this.props.dispatch(estimateGas({ + from: address, + gas: '746a528800', + })), ]) .then(([blockGasPrice, estimatedGas]) => { + console.log({ blockGasPrice, estimatedGas}) this.setState({ newTx: { ...newTx, -- cgit v1.2.3 From db1258f3de88f14cd54e2b4fd1cecc62cf6361e5 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Oct 2017 12:51:02 -0230 Subject: Conversion util can invert conversion rate --- ui/app/send.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 2e6409f32..5643d927b 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -22,7 +22,6 @@ const { const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') const { isHex, numericBalance, isValidAddress, allNull } = require('./util') const { conversionUtil, conversionGreaterThan } = require('./conversion-util') -const BigNumber = require('bignumber.js') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -470,18 +469,14 @@ SendTransactionScreen.prototype.getAmountToSend = function (amount) { const { activeCurrency } = this.state const { conversionRate } = this.props - // TODO: need a clean way to integrate this into conversionUtil - const sendConversionRate = activeCurrency === 'ETH' - ? conversionRate - : new BigNumber(1.0).div(conversionRate) - return conversionUtil(amount, { fromNumericBase: 'dec', toNumericBase: 'hex', fromCurrency: activeCurrency, toCurrency: 'ETH', toDenomination: 'WEI', - conversionRate: sendConversionRate, + conversionRate, + invertConversionRate: activeCurrency !== 'ETH', }) } -- cgit v1.2.3 From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/send.js | 1094 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 547 insertions(+), 547 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index 5643d927b..ce496d289 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -1,547 +1,547 @@ -const { inherits } = require('util') -const PersistentForm = require('../lib/persistent-form') -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const Identicon = require('./components/identicon') -const EnsInput = require('./components/ens-input') -const GasTooltip = require('./components/send/gas-tooltip') -const CurrencyToggle = require('./components/send/currency-toggle') -const GasFeeDisplay = require('./components/send/gas-fee-display') -const { getSelectedIdentity } = require('./selectors') - -const { - showAccountsPage, - backToAccountDetail, - displayWarning, - hideWarning, - addToAddressBook, - signTx, - estimateGas, - getGasPrice, -} = require('./actions') -const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') -const { isHex, numericBalance, isValidAddress, allNull } = require('./util') -const { conversionUtil, conversionGreaterThan } = require('./conversion-util') - -module.exports = connect(mapStateToProps)(SendTransactionScreen) - -function mapStateToProps (state) { - const { - selectedAddress: address, - accounts, - identities, - network, - addressBook, - conversionRate, - currentBlockGasLimit: blockGasLimit, - } = state.metamask - const { warning } = state.appState - const selectedIdentity = getSelectedIdentity(state) - const account = accounts[address] - - return { - address, - accounts, - identities, - network, - addressBook, - conversionRate, - blockGasLimit, - warning, - selectedIdentity, - error: warning && warning.split('.')[0], - account, - identity: identities[address], - balance: account ? account.balance : null, - } -} - -inherits(SendTransactionScreen, PersistentForm) -function SendTransactionScreen () { - PersistentForm.call(this) - - // [WIP] These are the bare minimum of tx props needed to sign a transaction - // We will need a few more for contract-related interactions - this.state = { - newTx: { - from: '', - to: '', - amountToSend: '0x0', - gasPrice: null, - gas: null, - amount: '0x0', - txData: null, - memo: '', - }, - activeCurrency: 'USD', - tooltipIsOpen: false, - errors: {}, - isValid: false, - } - - this.back = this.back.bind(this) - this.closeTooltip = this.closeTooltip.bind(this) - this.onSubmit = this.onSubmit.bind(this) - this.setActiveCurrency = this.setActiveCurrency.bind(this) - this.toggleTooltip = this.toggleTooltip.bind(this) - this.validate = this.validate.bind(this) - this.getAmountToSend = this.getAmountToSend.bind(this) - this.setErrorsFor = this.setErrorsFor.bind(this) - this.clearErrorsFor = this.clearErrorsFor.bind(this) - - this.renderFromInput = this.renderFromInput.bind(this) - this.renderToInput = this.renderToInput.bind(this) - this.renderAmountInput = this.renderAmountInput.bind(this) - this.renderGasInput = this.renderGasInput.bind(this) - this.renderMemoInput = this.renderMemoInput.bind(this) - this.renderErrorMessage = this.renderErrorMessage.bind(this) -} - -SendTransactionScreen.prototype.componentWillMount = function () { - const { newTx } = this.state - const { address } = this.props - - Promise.all([ - this.props.dispatch(getGasPrice()), - this.props.dispatch(estimateGas({ - from: address, - gas: '746a528800', - })), - ]) - .then(([blockGasPrice, estimatedGas]) => { - console.log({ blockGasPrice, estimatedGas}) - this.setState({ - newTx: { - ...newTx, - gasPrice: blockGasPrice, - gas: estimatedGas, - }, - }) - }) -} - -SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { - const { errors } = this.state - const errorMessage = errors[errorType]; - - return errorMessage || warning - ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ]) - : null -} - -SendTransactionScreen.prototype.renderFromInput = function (from, identities) { - return h('div.send-screen-input-wrapper', [ - - h('div', 'From:'), - - h('input.large-input.send-screen-input', { - list: 'accounts', - placeholder: 'Account', - value: from, - onChange: (event) => { - this.setState({ - newTx: { - ...this.state.newTx, - from: event.target.value, - }, - }) - }, - onBlur: () => this.setErrorsFor('from'), - onFocus: event => { - this.clearErrorsFor('from') - this.state.newTx.from && event.target.select() - }, - }), - - h('datalist#accounts', [ - Object.entries(identities).map(([key, { address, name }]) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - ]), - - this.renderErrorMessage('from'), - - ]) -} - -SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) { - return h('div.send-screen-input-wrapper', [ - - h('div', 'To:'), - - h('input.large-input.send-screen-input', { - name: 'address', - list: 'addresses', - placeholder: 'Address', - value: to, - onChange: (event) => { - this.setState({ - newTx: { - ...this.state.newTx, - to: event.target.value, - }, - }) - }, - onBlur: () => { - this.setErrorsFor('to') - }, - onFocus: event => { - this.clearErrorsFor('to') - this.state.newTx.to && event.target.select() - }, - }), - - h('datalist#addresses', [ - // Corresponds to the addresses owned. - ...Object.entries(identities).map(([key, { address, name }]) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - // Corresponds to previously sent-to addresses. - ...addressBook.map(({ address, name }) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - ]), - - this.renderErrorMessage('to'), - - ]) -} - -SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { - return h('div.send-screen-input-wrapper', [ - - h('div.send-screen-amount-labels', [ - h('span', 'Amount'), - h(CurrencyToggle, { - activeCurrency, - onClick: (newCurrency) => this.setActiveCurrency(newCurrency), - }), // holding on icon from design - ]), - - h('input.large-input.send-screen-input', { - placeholder: `0 ${activeCurrency}`, - type: 'number', - onChange: (event) => { - const amountToSend = event.target.value - ? this.getAmountToSend(event.target.value) - : '0x0' - - this.setState({ - newTx: Object.assign( - this.state.newTx, - { - amount: event.target.value, - amountToSend: amountToSend, - } - ), - }) - }, - onBlur: () => { - this.setErrorsFor('amount') - }, - onFocus: () => this.clearErrorsFor('amount'), - }), - - this.renderErrorMessage('amount'), - - ]) -} - -SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) { - return h('div.send-screen-input-wrapper', [ - this.state.tooltipIsOpen && h(GasTooltip, { - className: 'send-tooltip', - gasPrice, - gasLimit: gas, - onClose: this.closeTooltip, - onFeeChange: ({gasLimit, gasPrice}) => { - this.setState({ - newTx: { - ...this.state.newTx, - gas: gasLimit, - gasPrice, - }, - }) - }, - }), - - h('div.send-screen-gas-labels', [ - h('span', [ - h('i.fa.fa-bolt'), - 'Gas fee:', - ]), - h('span', 'What\'s this?'), - ]), - - // TODO: handle loading time when switching to USD - h('div.large-input.send-screen-gas-input', {}, [ - h(GasFeeDisplay, { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - }), - h('div.send-screen-gas-input-customize', { - onClick: this.toggleTooltip, - }, [ - 'Customize', - ]), - ]), - - ]) -} - -SendTransactionScreen.prototype.renderMemoInput = function () { - return h('div.send-screen-input-wrapper', [ - h('div', 'Transaction memo (optional)'), - h('input.large-input.send-screen-input', { - onChange: () => { - this.setState({ - newTx: Object.assign( - this.state.newTx, - { - memo: event.target.value, - } - ), - }) - }, - }), - ]) -} - -SendTransactionScreen.prototype.render = function () { - this.persistentFormParentId = 'send-tx-form' - - const props = this.props - const { - warning, - identities, - addressBook, - conversionRate, - } = props - - const { - blockGasLimit, - newTx, - activeCurrency, - isValid, - } = this.state - const { gas, gasPrice } = newTx - - return ( - - h('div.send-screen-wrapper', [ - // Main Send token Card - h('div.send-screen-card', [ - - h('img.send-eth-icon', { src: '../images/eth_logo.svg' }), - - h('div.send-screen__title', 'Send'), - - h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'), - - this.renderFromInput(this.state.newTx.from, identities), - - this.renderToInput(this.state.newTx.to, identities, addressBook), - - this.renderAmountInput(activeCurrency), - - this.renderGasInput( - gasPrice || '0x0', - gas || '0x0', - activeCurrency, - conversionRate, - blockGasLimit - ), - - this.renderMemoInput(), - - this.renderErrorMessage(null, warning), - - ]), - - // Buttons underneath card - h('section.flex-column.flex-center', [ - h('button.btn-secondary.send-screen__send-button', { - className: !isValid && 'send-screen__send-button__disabled', - onClick: (event) => isValid && this.onSubmit(event), - }, 'Next'), - h('button.btn-tertiary.send-screen__cancel-button', { - onClick: this.back, - }, 'Cancel'), - ]), - ]) - - ) -} - -SendTransactionScreen.prototype.toggleTooltip = function () { - this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen }) -} - -SendTransactionScreen.prototype.closeTooltip = function () { - this.setState({ tooltipIsOpen: false }) -} - -SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { - this.setState({ activeCurrency: newCurrency }) -} - -SendTransactionScreen.prototype.back = function () { - var address = this.props.address - this.props.dispatch(backToAccountDetail(address)) -} - -SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) { - const sufficientBalance = conversionGreaterThan( - { - value: balance, - fromNumericBase: 'hex', - }, - { - value: amountToSend, - fromNumericBase: 'hex', - }, - ) - - const amountLessThanZero = conversionGreaterThan( - { - value: 0, - fromNumericBase: 'dec', - }, - { - value: amountToSend, - fromNumericBase: 'hex', - }, - ) - - const errors = {} - - if (!sufficientBalance) { - errors.amount = 'Insufficient funds.' - } - - if (amountLessThanZero) { - errors.amount = 'Can not send negative amounts of ETH.' - } - - if (!from) { - errors.from = 'Required' - } - - if (from && !isValidAddress(from)) { - errors.from = 'Sender address is invalid.' - } - - if (!to) { - errors.to = 'Required' - } - - if (to && !isValidAddress(to)) { - errors.to = 'Recipient address is invalid.' - } - - // if (txData && !isHex(stripHexPrefix(txData))) { - // message = 'Transaction data must be hex string.' - // return this.props.dispatch(displayWarning(message)) - // } - - return { - isValid: allNull(errors), - errors, - } -} - -SendTransactionScreen.prototype.getAmountToSend = function (amount) { - const { activeCurrency } = this.state - const { conversionRate } = this.props - - return conversionUtil(amount, { - fromNumericBase: 'dec', - toNumericBase: 'hex', - fromCurrency: activeCurrency, - toCurrency: 'ETH', - toDenomination: 'WEI', - conversionRate, - invertConversionRate: activeCurrency !== 'ETH', - }) -} - -SendTransactionScreen.prototype.setErrorsFor = function (field) { - const { balance } = this.props - const { newTx, errors: previousErrors } = this.state - const { amountToSend } = newTx - - const { - isValid, - errors: newErrors - } = this.validate(balance, amountToSend, newTx) - - const nextErrors = Object.assign({}, previousErrors, { - [field]: newErrors[field] || null - }) - - if (!isValid) { - this.setState({ - errors: nextErrors, - isValid, - }) - } -} - -SendTransactionScreen.prototype.clearErrorsFor = function (field) { - const { errors: previousErrors } = this.state - const nextErrors = Object.assign({}, previousErrors, { - [field]: null - }) - - this.setState({ - errors: nextErrors, - isValid: allNull(nextErrors), - }) -} - -SendTransactionScreen.prototype.onSubmit = function (event) { - event.preventDefault() - const { warning, balance } = this.props - const state = this.state || {} - - const recipient = state.newTx.to - const sender = state.newTx.from - const nickname = state.nickname || ' ' - - // TODO: convert this to hex when created and include it in send - const txData = state.newTx.memo - - this.props.dispatch(hideWarning()) - - this.props.dispatch(addToAddressBook(recipient, nickname)) - - var txParams = { - from: this.state.newTx.from, - to: this.state.newTx.to, - - value: this.state.newTx.amountToSend, - - gas: this.state.newTx.gas, - gasPrice: this.state.newTx.gasPrice, - } - - if (recipient) txParams.to = addHexPrefix(recipient) - if (txData) txParams.data = txData - - this.props.dispatch(signTx(txParams)) -} +// const { inherits } = require('util') +// const PersistentForm = require('../lib/persistent-form') +// const h = require('react-hyperscript') +// const connect = require('react-redux').connect +// const Identicon = require('./components/identicon') +// const EnsInput = require('./components/ens-input') +// const GasTooltip = require('./components/send/gas-tooltip') +// const CurrencyToggle = require('./components/send/currency-toggle') +// const GasFeeDisplay = require('./components/send/gas-fee-display') +// const { getSelectedIdentity } = require('./selectors') + +// const { +// showAccountsPage, +// backToAccountDetail, +// displayWarning, +// hideWarning, +// addToAddressBook, +// signTx, +// estimateGas, +// getGasPrice, +// } = require('./actions') +// const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') +// const { isHex, numericBalance, isValidAddress, allNull } = require('./util') +// const { conversionUtil, conversionGreaterThan } = require('./conversion-util') + +// module.exports = connect(mapStateToProps)(SendTransactionScreen) + +// function mapStateToProps (state) { +// const { +// selectedAddress: address, +// accounts, +// identities, +// network, +// addressBook, +// conversionRate, +// currentBlockGasLimit: blockGasLimit, +// } = state.metamask +// const { warning } = state.appState +// const selectedIdentity = getSelectedIdentity(state) +// const account = accounts[address] + +// return { +// address, +// accounts, +// identities, +// network, +// addressBook, +// conversionRate, +// blockGasLimit, +// warning, +// selectedIdentity, +// error: warning && warning.split('.')[0], +// account, +// identity: identities[address], +// balance: account ? account.balance : null, +// } +// } + +// inherits(SendTransactionScreen, PersistentForm) +// function SendTransactionScreen () { +// PersistentForm.call(this) + +// // [WIP] These are the bare minimum of tx props needed to sign a transaction +// // We will need a few more for contract-related interactions +// this.state = { +// newTx: { +// from: '', +// to: '', +// amountToSend: '0x0', +// gasPrice: null, +// gas: null, +// amount: '0x0', +// txData: null, +// memo: '', +// }, +// activeCurrency: 'USD', +// tooltipIsOpen: false, +// errors: {}, +// isValid: false, +// } + +// this.back = this.back.bind(this) +// this.closeTooltip = this.closeTooltip.bind(this) +// this.onSubmit = this.onSubmit.bind(this) +// this.setActiveCurrency = this.setActiveCurrency.bind(this) +// this.toggleTooltip = this.toggleTooltip.bind(this) +// this.validate = this.validate.bind(this) +// this.getAmountToSend = this.getAmountToSend.bind(this) +// this.setErrorsFor = this.setErrorsFor.bind(this) +// this.clearErrorsFor = this.clearErrorsFor.bind(this) + +// this.renderFromInput = this.renderFromInput.bind(this) +// this.renderToInput = this.renderToInput.bind(this) +// this.renderAmountInput = this.renderAmountInput.bind(this) +// this.renderGasInput = this.renderGasInput.bind(this) +// this.renderMemoInput = this.renderMemoInput.bind(this) +// this.renderErrorMessage = this.renderErrorMessage.bind(this) +// } + +// SendTransactionScreen.prototype.componentWillMount = function () { +// const { newTx } = this.state +// const { address } = this.props + +// Promise.all([ +// this.props.dispatch(getGasPrice()), +// this.props.dispatch(estimateGas({ +// from: address, +// gas: '746a528800', +// })), +// ]) +// .then(([blockGasPrice, estimatedGas]) => { +// console.log({ blockGasPrice, estimatedGas}) +// this.setState({ +// newTx: { +// ...newTx, +// gasPrice: blockGasPrice, +// gas: estimatedGas, +// }, +// }) +// }) +// } + +// SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { +// const { errors } = this.state +// const errorMessage = errors[errorType]; + +// return errorMessage || warning +// ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ]) +// : null +// } + +// SendTransactionScreen.prototype.renderFromInput = function (from, identities) { +// return h('div.send-screen-input-wrapper', [ + +// h('div', 'From:'), + +// h('input.large-input.send-screen-input', { +// list: 'accounts', +// placeholder: 'Account', +// value: from, +// onChange: (event) => { +// this.setState({ +// newTx: { +// ...this.state.newTx, +// from: event.target.value, +// }, +// }) +// }, +// onBlur: () => this.setErrorsFor('from'), +// onFocus: event => { +// this.clearErrorsFor('from') +// this.state.newTx.from && event.target.select() +// }, +// }), + +// h('datalist#accounts', [ +// Object.entries(identities).map(([key, { address, name }]) => { +// return h('option', { +// value: address, +// label: name, +// key: address, +// }) +// }), +// ]), + +// this.renderErrorMessage('from'), + +// ]) +// } + +// SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) { +// return h('div.send-screen-input-wrapper', [ + +// h('div', 'To:'), + +// h('input.large-input.send-screen-input', { +// name: 'address', +// list: 'addresses', +// placeholder: 'Address', +// value: to, +// onChange: (event) => { +// this.setState({ +// newTx: { +// ...this.state.newTx, +// to: event.target.value, +// }, +// }) +// }, +// onBlur: () => { +// this.setErrorsFor('to') +// }, +// onFocus: event => { +// this.clearErrorsFor('to') +// this.state.newTx.to && event.target.select() +// }, +// }), + +// h('datalist#addresses', [ +// // Corresponds to the addresses owned. +// ...Object.entries(identities).map(([key, { address, name }]) => { +// return h('option', { +// value: address, +// label: name, +// key: address, +// }) +// }), +// // Corresponds to previously sent-to addresses. +// ...addressBook.map(({ address, name }) => { +// return h('option', { +// value: address, +// label: name, +// key: address, +// }) +// }), +// ]), + +// this.renderErrorMessage('to'), + +// ]) +// } + +// SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { +// return h('div.send-screen-input-wrapper', [ + +// h('div.send-screen-amount-labels', [ +// h('span', 'Amount'), +// h(CurrencyToggle, { +// activeCurrency, +// onClick: (newCurrency) => this.setActiveCurrency(newCurrency), +// }), // holding on icon from design +// ]), + +// h('input.large-input.send-screen-input', { +// placeholder: `0 ${activeCurrency}`, +// type: 'number', +// onChange: (event) => { +// const amountToSend = event.target.value +// ? this.getAmountToSend(event.target.value) +// : '0x0' + +// this.setState({ +// newTx: Object.assign( +// this.state.newTx, +// { +// amount: event.target.value, +// amountToSend: amountToSend, +// } +// ), +// }) +// }, +// onBlur: () => { +// this.setErrorsFor('amount') +// }, +// onFocus: () => this.clearErrorsFor('amount'), +// }), + +// this.renderErrorMessage('amount'), + +// ]) +// } + +// SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) { +// return h('div.send-screen-input-wrapper', [ +// this.state.tooltipIsOpen && h(GasTooltip, { +// className: 'send-tooltip', +// gasPrice, +// gasLimit: gas, +// onClose: this.closeTooltip, +// onFeeChange: ({gasLimit, gasPrice}) => { +// this.setState({ +// newTx: { +// ...this.state.newTx, +// gas: gasLimit, +// gasPrice, +// }, +// }) +// }, +// }), + +// h('div.send-screen-gas-labels', [ +// h('span', [ +// h('i.fa.fa-bolt'), +// 'Gas fee:', +// ]), +// h('span', 'What\'s this?'), +// ]), + +// // TODO: handle loading time when switching to USD +// h('div.large-input.send-screen-gas-input', {}, [ +// h(GasFeeDisplay, { +// activeCurrency, +// conversionRate, +// gas, +// gasPrice, +// blockGasLimit, +// }), +// h('div.send-screen-gas-input-customize', { +// onClick: this.toggleTooltip, +// }, [ +// 'Customize', +// ]), +// ]), + +// ]) +// } + +// SendTransactionScreen.prototype.renderMemoInput = function () { +// return h('div.send-screen-input-wrapper', [ +// h('div', 'Transaction memo (optional)'), +// h('input.large-input.send-screen-input', { +// onChange: () => { +// this.setState({ +// newTx: Object.assign( +// this.state.newTx, +// { +// memo: event.target.value, +// } +// ), +// }) +// }, +// }), +// ]) +// } + +// SendTransactionScreen.prototype.render = function () { +// this.persistentFormParentId = 'send-tx-form' + +// const props = this.props +// const { +// warning, +// identities, +// addressBook, +// conversionRate, +// } = props + +// const { +// blockGasLimit, +// newTx, +// activeCurrency, +// isValid, +// } = this.state +// const { gas, gasPrice } = newTx + +// return ( + +// h('div.send-screen-wrapper', [ +// // Main Send token Card +// h('div.send-screen-card', [ + +// h('img.send-eth-icon', { src: '../images/eth_logo.svg' }), + +// h('div.send-screen__title', 'Send'), + +// h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'), + +// this.renderFromInput(this.state.newTx.from, identities), + +// this.renderToInput(this.state.newTx.to, identities, addressBook), + +// this.renderAmountInput(activeCurrency), + +// this.renderGasInput( +// gasPrice || '0x0', +// gas || '0x0', +// activeCurrency, +// conversionRate, +// blockGasLimit +// ), + +// this.renderMemoInput(), + +// this.renderErrorMessage(null, warning), + +// ]), + +// // Buttons underneath card +// h('section.flex-column.flex-center', [ +// h('button.btn-secondary.send-screen__send-button', { +// className: !isValid && 'send-screen__send-button__disabled', +// onClick: (event) => isValid && this.onSubmit(event), +// }, 'Next'), +// h('button.btn-tertiary.send-screen__cancel-button', { +// onClick: this.back, +// }, 'Cancel'), +// ]), +// ]) + +// ) +// } + +// SendTransactionScreen.prototype.toggleTooltip = function () { +// this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen }) +// } + +// SendTransactionScreen.prototype.closeTooltip = function () { +// this.setState({ tooltipIsOpen: false }) +// } + +// SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { +// this.setState({ activeCurrency: newCurrency }) +// } + +// SendTransactionScreen.prototype.back = function () { +// var address = this.props.address +// this.props.dispatch(backToAccountDetail(address)) +// } + +// SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) { +// const sufficientBalance = conversionGreaterThan( +// { +// value: balance, +// fromNumericBase: 'hex', +// }, +// { +// value: amountToSend, +// fromNumericBase: 'hex', +// }, +// ) + +// const amountLessThanZero = conversionGreaterThan( +// { +// value: 0, +// fromNumericBase: 'dec', +// }, +// { +// value: amountToSend, +// fromNumericBase: 'hex', +// }, +// ) + +// const errors = {} + +// if (!sufficientBalance) { +// errors.amount = 'Insufficient funds.' +// } + +// if (amountLessThanZero) { +// errors.amount = 'Can not send negative amounts of ETH.' +// } + +// if (!from) { +// errors.from = 'Required' +// } + +// if (from && !isValidAddress(from)) { +// errors.from = 'Sender address is invalid.' +// } + +// if (!to) { +// errors.to = 'Required' +// } + +// if (to && !isValidAddress(to)) { +// errors.to = 'Recipient address is invalid.' +// } + +// // if (txData && !isHex(stripHexPrefix(txData))) { +// // message = 'Transaction data must be hex string.' +// // return this.props.dispatch(displayWarning(message)) +// // } + +// return { +// isValid: allNull(errors), +// errors, +// } +// } + +// SendTransactionScreen.prototype.getAmountToSend = function (amount) { +// const { activeCurrency } = this.state +// const { conversionRate } = this.props + +// return conversionUtil(amount, { +// fromNumericBase: 'dec', +// toNumericBase: 'hex', +// fromCurrency: activeCurrency, +// toCurrency: 'ETH', +// toDenomination: 'WEI', +// conversionRate, +// invertConversionRate: activeCurrency !== 'ETH', +// }) +// } + +// SendTransactionScreen.prototype.setErrorsFor = function (field) { +// const { balance } = this.props +// const { newTx, errors: previousErrors } = this.state +// const { amountToSend } = newTx + +// const { +// isValid, +// errors: newErrors +// } = this.validate(balance, amountToSend, newTx) + +// const nextErrors = Object.assign({}, previousErrors, { +// [field]: newErrors[field] || null +// }) + +// if (!isValid) { +// this.setState({ +// errors: nextErrors, +// isValid, +// }) +// } +// } + +// SendTransactionScreen.prototype.clearErrorsFor = function (field) { +// const { errors: previousErrors } = this.state +// const nextErrors = Object.assign({}, previousErrors, { +// [field]: null +// }) + +// this.setState({ +// errors: nextErrors, +// isValid: allNull(nextErrors), +// }) +// } + +// SendTransactionScreen.prototype.onSubmit = function (event) { +// event.preventDefault() +// const { warning, balance } = this.props +// const state = this.state || {} + +// const recipient = state.newTx.to +// const sender = state.newTx.from +// const nickname = state.nickname || ' ' + +// // TODO: convert this to hex when created and include it in send +// const txData = state.newTx.memo + +// this.props.dispatch(hideWarning()) + +// this.props.dispatch(addToAddressBook(recipient, nickname)) + +// var txParams = { +// from: this.state.newTx.from, +// to: this.state.newTx.to, + +// value: this.state.newTx.amountToSend, + +// gas: this.state.newTx.gas, +// gasPrice: this.state.newTx.gasPrice, +// } + +// if (recipient) txParams.to = addHexPrefix(recipient) +// if (txData) txParams.data = txData + +// this.props.dispatch(signTx(txParams)) +// } -- cgit v1.2.3 From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/send.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/send.js') diff --git a/ui/app/send.js b/ui/app/send.js index ce496d289..517b7690d 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -69,11 +69,11 @@ // amountToSend: '0x0', // gasPrice: null, // gas: null, -// amount: '0x0', +// amount: '0x0', // txData: null, // memo: '', // }, -// activeCurrency: 'USD', +// activeCurrency: 'USD', // tooltipIsOpen: false, // errors: {}, // isValid: false, -- cgit v1.2.3