From cf31e1902909f3bd1f0e26b279cda79a9879ff4e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 14 Sep 2016 18:24:52 -0700 Subject: [PATCH 01/13] Remove logs --- test/unit/extension-test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/unit/extension-test.js b/test/unit/extension-test.js index b0b72509b..8f259f05c 100644 --- a/test/unit/extension-test.js +++ b/test/unit/extension-test.js @@ -18,9 +18,7 @@ describe('extension', function() { } it('returns the desired result', function() { - console.dir(Extension) const extension = new Extension() - console.dir(extension) const result = extension.extension.getURL() assert.equal(result, desiredResult) }) From 17eb53cfcd77b3832f92533a53d82726d1e152e7 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 10:22:09 -0700 Subject: [PATCH 02/13] Change Testfaucet url --- app/scripts/metamask-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 5373cf0d9..06337be1c 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -334,7 +334,7 @@ module.exports = class MetamaskController { var url = `https://buy.coinbase.com/?code=9ec56d01-7e81-5017-930c-513daa27bb6a&amount=${amount}&address=${address}&crypto_currency=ETH` if (network === '2') { - url = 'https://testfaucet.metamask.io/' + url = 'https://faucet.metamask.io/' } extension.tabs.create({ From ef0b535d94d97827b4bfc471e4d950d90d637fa3 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 10:24:05 -0700 Subject: [PATCH 03/13] Drop the buy button in the confTx view if account does not have enough eth --- ui/app/account-detail.js | 3 +- ui/app/actions.js | 3 +- ui/app/components/buy-button-subview.js | 11 +++++++- ui/app/components/pending-tx-details.js | 4 +-- ui/app/components/pending-tx.js | 37 +++++++++++++++++++++---- ui/app/conf-tx.js | 22 ++++++++++++++- ui/app/reducers/app.js | 4 +-- 7 files changed, 71 insertions(+), 13 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 41d1ff2da..01c7e8781 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -279,10 +279,11 @@ AccountDetailScreen.prototype.requestAccountExport = function () { AccountDetailScreen.prototype.buyButtonDeligator = function () { var props = this.props + var selected = props.address || Object.keys(props.accounts)[0] if (this.props.accountDetail.subview === 'buyForm') { props.dispatch(actions.backToAccountDetail(props.address)) } else { - props.dispatch(actions.buyEthView()) + props.dispatch(actions.buyEthView(selected)) } } diff --git a/ui/app/actions.js b/ui/app/actions.js index 289366db0..0cce9065e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -479,9 +479,10 @@ function showAccountsPage () { } } -function showConfTxPage () { +function showConfTxPage (transForward = true) { return { type: actions.SHOW_CONF_TX_PAGE, + transForward: transForward, } } diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index c3e9e5d7b..7daf41206 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -16,6 +16,7 @@ function mapStateToProps (state) { buyView: state.appState.buyView, network: state.metamask.network, provider: state.metamask.provider, + context: state.appState.currentView.context, } } @@ -38,7 +39,7 @@ BuyButtonSubview.prototype.render = function () { }, }, [ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => props.dispatch(actions.backToAccountDetail(props.selectedAccount)), + onClick: this.backButtonContext.bind(this), style: { position: 'absolute', left: '10px', @@ -121,3 +122,11 @@ BuyButtonSubview.prototype.formVersionSubview = function () { BuyButtonSubview.prototype.navigateTo = function (url) { extension.tabs.create({ url }) } + +BuyButtonSubview.prototype.backButtonContext = function () { + if (this.props.context === 'confTx') { + this.props.dispatch(actions.showConfTxPage(false)) + } else { + this.props.dispatch(actions.goHome()) + } +} diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index 148b5c6df..d8e8524bf 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -4,12 +4,12 @@ const inherits = require('util').inherits const MiniAccountPanel = require('./mini-account-panel') const EthBalance = require('./eth-balance') -const addressSummary = require('../util').addressSummary +const util = require('../util') +const addressSummary = util.addressSummary const nameForAddress = require('../../lib/contract-namer') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN - module.exports = PendingTxDetails inherits(PendingTxDetails, Component) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 1feedbbbc..61e40af0e 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -3,6 +3,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-tx-details') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN module.exports = PendingTx @@ -14,7 +16,6 @@ function PendingTx () { PendingTx.prototype.render = function () { var state = this.props var txData = state.txData - return ( h('div', { @@ -39,10 +40,8 @@ PendingTx.prototype.render = function () { margin: '14px 25px', }, }, [ - h('button.confirm', { - onClick: state.sendTransaction, - style: { background: 'rgb(251,117,1)' }, - }, 'Accept'), + + this.buttonDeligator(), h('button.cancel', { onClick: state.cancelTransaction, @@ -53,3 +52,31 @@ PendingTx.prototype.render = function () { ) } +PendingTx.prototype.buttonDeligator = function () { + var state = this.props + var txData = state.txData + var txParams = txData.txParams || {} + var address = txParams.from || state.selectedAddress + + var account = state.accounts[address] + var balance = account ? account.balance : '0x0' + + var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16) + var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16) + var txFee = gasCost.mul(gasPrice) + var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) + var maxCost = txValue.add(txFee) + + var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16) + if (maxCost.gt(balanceBn)) { + return h('button.confirm', { + onClick: state.sendTransaction, + style: { background: 'rgb(251,117,1)' }, + }, 'Buy') + } else { + return h('button.confirm', { + onClick: state.sendTransaction, + style: { background: 'rgb(251,117,1)' }, + }, 'Accept') + } +} diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 99b4bc9f1..0c3e32cea 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -6,6 +6,8 @@ const connect = require('react-redux').connect const actions = require('./actions') const txHelper = require('../lib/tx-helper') const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN const PendingTx = require('./components/pending-tx') const PendingMsg = require('./components/pending-msg') @@ -113,8 +115,26 @@ function currentTxView (opts) { } ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { + var state = this.props + + var txParams = txData.txParams || {} + var address = txParams.from || state.selectedAddress + var account = state.accounts[address] + var balance = account ? account.balance : '0x0' + + var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16) + var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16) + var txFee = gasCost.mul(gasPrice) + var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) + var maxCost = txValue.add(txFee) + + var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16) event.stopPropagation() - this.props.dispatch(actions.sendTx(txData)) + if (maxCost.gt(balanceBn)) { + this.props.dispatch(actions.buyEthView(address)) + } else { + this.props.dispatch(actions.sendTx(txData)) + } } ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 8eb6ec4d4..c2ac099a6 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -240,7 +240,7 @@ function reduceApp (state, action) { name: 'confTx', context: 0, }, - transForward: true, + transForward: action.transForward, warning: null, }) @@ -408,7 +408,7 @@ function reduceApp (state, action) { transForward: true, currentView: { name: 'buyEth', - context: appState.currentView.context, + context: appState.currentView.name, }, buyView: { subview: 'buyForm', From 5005fc143bfe5d7840e96169ab3908557dade007 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 15 Sep 2016 12:42:35 -0700 Subject: [PATCH 04/13] confTx - show disabled accept btn + add colors --- ui/app/components/pending-tx.js | 60 +++++++++++++++------------------ ui/app/css/index.css | 26 +++++++++++--- 2 files changed, 49 insertions(+), 37 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 61e40af0e..89d90d990 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -16,6 +16,21 @@ function PendingTx () { PendingTx.prototype.render = function () { var state = this.props var txData = state.txData + var txParams = txData.txParams || {} + var address = txParams.from || state.selectedAddress + + var account = state.accounts[address] + var balance = account ? account.balance : '0x0' + + var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16) + var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16) + var txFee = gasCost.mul(gasPrice) + var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) + var maxCost = txValue.add(txFee) + + var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16) + var insufficientBalance = maxCost.gt(balanceBn) + return ( h('div', { @@ -41,42 +56,23 @@ PendingTx.prototype.render = function () { }, }, [ - this.buttonDeligator(), + ( insufficientBalance ? + h('button.btn-green', { + onClick: state.sendTransaction, + }, 'Buy Ether') + : + null + ), - h('button.cancel', { + h('button.confirm', { + disabled: insufficientBalance, + onClick: state.sendTransaction, + }, 'Accept'), + + h('button.cancel.btn-red', { onClick: state.cancelTransaction, - style: { background: 'rgb(254,35,17)' }, }, 'Reject'), ]), ]) ) } - -PendingTx.prototype.buttonDeligator = function () { - var state = this.props - var txData = state.txData - var txParams = txData.txParams || {} - var address = txParams.from || state.selectedAddress - - var account = state.accounts[address] - var balance = account ? account.balance : '0x0' - - var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16) - var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16) - var txFee = gasCost.mul(gasPrice) - var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) - var maxCost = txValue.add(txFee) - - var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16) - if (maxCost.gt(balanceBn)) { - return h('button.confirm', { - onClick: state.sendTransaction, - style: { background: 'rgb(251,117,1)' }, - }, 'Buy') - } else { - return h('button.confirm', { - onClick: state.sendTransaction, - style: { background: 'rgb(251,117,1)' }, - }, 'Accept') - } -} diff --git a/ui/app/css/index.css b/ui/app/css/index.css index ba90aa551..8543960fe 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -36,24 +36,40 @@ button { font-family: 'Montserrat Bold'; outline: none; cursor: pointer; - box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); - /*margin: 10px;*/ padding: 8px 12px; border: none; - background: #F7861C; color: white; transform-origin: center center; transition: transform 50ms ease-in; + /* default orange */ + background: rgba(247, 134, 28, 1); + box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); +} + +button.btn-green { + background: rgba(106, 195, 96, 1); + box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); +} + +button.btn-red { + background: rgba(254, 35, 17, 1); + box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); +} + +button[disabled] { + cursor: not-allowed; + background: rgba(197, 197, 197, 1); + box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); } button.spaced { margin: 2px; } -button:hover { +button:not([disabled]):hover { transform: scale(1.1); } -button:active { +button:not([disabled]):active { transform: scale(0.95); } From 254dddda97282e904ad8a76767c94738da214202 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 15 Sep 2016 12:44:47 -0700 Subject: [PATCH 05/13] soften lint warnings --- .eslintrc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.eslintrc b/.eslintrc index 7fab8f127..95eab7337 100644 --- a/.eslintrc +++ b/.eslintrc @@ -127,14 +127,14 @@ "no-whitespace-before-property": 2, "no-with": 2, "one-var": [2, { "initialized": "never" }], - "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }], + "operator-linebreak": [1, "after", { "overrides": { "?": "before", ":": "before" } }], "padded-blocks": [1, "never"], "quotes": [2, "single", "avoid-escape"], "semi": [2, "never"], "semi-spacing": [2, { "before": false, "after": true }], "space-before-blocks": [1, "always"], "space-before-function-paren": [1, "always"], - "space-in-parens": [2, "never"], + "space-in-parens": [1, "never"], "space-infix-ops": 2, "space-unary-ops": [2, { "words": true, "nonwords": false }], "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }], From f0d83813d66fb725eaffa3eab04280a1e9abd59a Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 15 Sep 2016 12:56:40 -0700 Subject: [PATCH 06/13] confTx - add insufficient balance warning message --- ui/app/components/pending-tx.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 89d90d990..94d780590 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -47,6 +47,10 @@ PendingTx.prototype.render = function () { } `), + insufficientBalance ? + h('span.error', { style: { marginLeft: 36 } }, 'Insufficient balance for transaction.') + : null, + // send + cancel h('.flex-row.flex-space-around.conf-buttons', { style: { @@ -56,13 +60,11 @@ PendingTx.prototype.render = function () { }, }, [ - ( insufficientBalance ? + insufficientBalance ? h('button.btn-green', { onClick: state.sendTransaction, }, 'Buy Ether') - : - null - ), + : null, h('button.confirm', { disabled: insufficientBalance, From 1325990726177b2d91227f64e05be103e23fd50b Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 15 Sep 2016 13:04:09 -0700 Subject: [PATCH 07/13] css - smaller balance warning --- ui/app/components/pending-tx.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 94d780590..57852010e 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -48,7 +48,12 @@ PendingTx.prototype.render = function () { `), insufficientBalance ? - h('span.error', { style: { marginLeft: 36 } }, 'Insufficient balance for transaction.') + h('span.error', { + style: { + marginLeft: 50, + fontSize: '0.9em', + }, + }, 'Insufficient balance for transaction') : null, // send + cancel From 7293c67f686516485ea1a06fb3ee15094630da3e Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 15 Sep 2016 13:22:05 -0700 Subject: [PATCH 08/13] bump changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 63264622d..f1acb1d15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Current Master +- Show "Buy Ether" button and warning on tx confirmation when sender balance is insufficient ## 2.12.1 2016-09-14 From cf484d735fab021a0dfe509243b957e8c6278532 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 14:31:45 -0700 Subject: [PATCH 09/13] Clean up some of the code --- ui/app/components/pending-tx.js | 25 ++++--------------------- ui/app/conf-tx.js | 21 ++++++++++++++------- 2 files changed, 18 insertions(+), 28 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 57852010e..4c27a8092 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -3,9 +3,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-tx-details') -const ethUtil = require('ethereumjs-util') -const BN = ethUtil.BN - module.exports = PendingTx inherits(PendingTx, Component) @@ -16,20 +13,6 @@ function PendingTx () { PendingTx.prototype.render = function () { var state = this.props var txData = state.txData - var txParams = txData.txParams || {} - var address = txParams.from || state.selectedAddress - - var account = state.accounts[address] - var balance = account ? account.balance : '0x0' - - var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16) - var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16) - var txFee = gasCost.mul(gasPrice) - var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) - var maxCost = txValue.add(txFee) - - var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16) - var insufficientBalance = maxCost.gt(balanceBn) return ( @@ -47,7 +30,7 @@ PendingTx.prototype.render = function () { } `), - insufficientBalance ? + state.insufficientBalance ? h('span.error', { style: { marginLeft: 50, @@ -65,14 +48,14 @@ PendingTx.prototype.render = function () { }, }, [ - insufficientBalance ? + state.insufficientBalance ? h('button.btn-green', { - onClick: state.sendTransaction, + onClick: state.buyEth, }, 'Buy Ether') : null, h('button.confirm', { - disabled: insufficientBalance, + disabled: state.insufficientBalance, onClick: state.sendTransaction, }, 'Accept'), diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 8cbb1f44f..f4ca52860 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -41,6 +41,7 @@ ConfirmTxScreen.prototype.render = function () { var unconfTxList = txHelper(unconfTxs, unconfMsgs, network) var index = state.index !== undefined ? state.index : 0 var txData = unconfTxList[index] || unconfTxList[0] || {} + var txParams = txData.txParams || {} var isNotification = isPopupOrNotification() === 'notification' return ( @@ -92,7 +93,9 @@ ConfirmTxScreen.prototype.render = function () { selectedAddress: state.selectedAddress, accounts: state.accounts, identities: state.identities, + insufficientBalance: this.checkBalnceAgainstTx(txData), // Actions + buyEth: this.buyEth.bind(this, txParams.from || state.selectedAddress), sendTransaction: this.sendTransaction.bind(this, txData), cancelTransaction: this.cancelTransaction.bind(this, txData), signMessage: this.signMessage.bind(this, txData), @@ -113,8 +116,7 @@ function currentTxView (opts) { return h(PendingMsg, opts) } } - -ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { +ConfirmTxScreen.prototype.checkBalnceAgainstTx = function (txData) { var state = this.props var txParams = txData.txParams || {} @@ -129,12 +131,17 @@ ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { var maxCost = txValue.add(txFee) var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16) + return maxCost.gt(balanceBn) +} + +ConfirmTxScreen.prototype.buyEth = function (address, event) { event.stopPropagation() - if (maxCost.gt(balanceBn)) { - this.props.dispatch(actions.buyEthView(address)) - } else { - this.props.dispatch(actions.sendTx(txData)) - } + this.props.dispatch(actions.buyEthView(address)) +} + +ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { + event.stopPropagation() + this.props.dispatch(actions.sendTx(txData)) } ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { From 9c982a4bd679c9f5a7a108e64744ff9f0e6e99e1 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 18:13:13 -0700 Subject: [PATCH 10/13] add tx-viz link to transaction history --- ui/app/components/transaction-list-item.js | 39 +++++++++++++++------- 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 66a232981..3adc07185 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -44,15 +44,6 @@ TransactionListItem.prototype.render = function () { return ( h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { - onClick: (event) => { - if (isPending) { - this.props.showTx(transaction.id) - } - - if (!transaction.hash || !isLinkable) return - var url = explorerLink(transaction.hash, parseInt(network)) - extension.tabs.create({ url }) - }, style: { padding: '20px 0', }, @@ -60,11 +51,35 @@ TransactionListItem.prototype.render = function () { // large identicon h('.identicon-wrapper.flex-column.flex-center.select-none', [ - transaction.status === 'unconfirmed' ? h('i.fa.fa-ellipsis-h', {style: { fontSize: '27px' }}) - : h(TransactionIcon, { txParams, transaction, isTx, isMsg }), + transaction.status === 'unconfirmed' ? h('i.fa.fa-ellipsis-h', { + style: { + fontSize: '27px' + } + }) : h( '.pop-hover', { + onClick: () => { + if (!isTx || isPending) return + var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}` + extension.tabs.create({ url }) + }, + }, [ + h(TransactionIcon, { txParams, transaction, isTx, isMsg }), + ]), ]), - h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ + h('.flex-column', { + onClick: (event) => { + if (isPending) { + this.props.showTx(transaction.id) + } + + if (!transaction.hash || !isLinkable) return + var url = explorerLink(transaction.hash, parseInt(network)) + extension.tabs.create({ url }) + }, + style: { + width: '200px', + overflow: 'hidden'} + }, [ domainField(txParams), h('div', date), recipientField(txParams, transaction, isTx, isMsg), From bc33c88ae53fbc08e75db025888d5bc3bcfe236d Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 18:16:15 -0700 Subject: [PATCH 11/13] Add to CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 63264622d..c87760cd0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Current Master +- Add a link to the transaction in history that goes to https://metamask.github.io/eth-tx-viz +too help visualize transactions and to where they are going. + ## 2.12.1 2016-09-14 - Fixed bug where if you send a transaction from within MetaMask extension the From 3682a2a1f91cc788de332df70445bdf76c658173 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 18:25:05 -0700 Subject: [PATCH 12/13] linting --- ui/app/components/transaction-list-item.js | 43 +++++++++++----------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 3adc07185..8f96e2942 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -53,32 +53,33 @@ TransactionListItem.prototype.render = function () { h('.identicon-wrapper.flex-column.flex-center.select-none', [ transaction.status === 'unconfirmed' ? h('i.fa.fa-ellipsis-h', { style: { - fontSize: '27px' - } - }) : h( '.pop-hover', { - onClick: () => { - if (!isTx || isPending) return - var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}` - extension.tabs.create({ url }) - }, - }, [ + fontSize: '27px', + }, + }) : h( '.pop-hover', { + onClick: () => { + if (!isTx || isPending) return + var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}` + extension.tabs.create({ url }) + }, + }, [ h(TransactionIcon, { txParams, transaction, isTx, isMsg }), ]), ]), h('.flex-column', { - onClick: (event) => { - if (isPending) { - this.props.showTx(transaction.id) - } - - if (!transaction.hash || !isLinkable) return - var url = explorerLink(transaction.hash, parseInt(network)) - extension.tabs.create({ url }) - }, - style: { - width: '200px', - overflow: 'hidden'} + onClick: (event) => { + if (isPending) { + this.props.showTx(transaction.id) + } + + if (!transaction.hash || !isLinkable) return + var url = explorerLink(transaction.hash, parseInt(network)) + extension.tabs.create({ url }) + }, + style: { + width: '200px', + overflow: 'hidden', + }, }, [ domainField(txParams), h('div', date), From 77ef71448d32ab125da3b8738c8dd7af915ec596 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 19:35:04 -0700 Subject: [PATCH 13/13] Fix CHANGELOG.md and restructure onClick events --- CHANGELOG.md | 2 +- ui/app/components/transaction-list-item.js | 29 +++++++++------------- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e6feb1ed..c1483b7cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,10 @@ # Changelog ## Current Master -- Show "Buy Ether" button and warning on tx confirmation when sender balance is insufficient - Add a link to the transaction in history that goes to https://metamask.github.io/eth-tx-viz too help visualize transactions and to where they are going. +- Show "Buy Ether" button and warning on tx confirmation when sender balance is insufficient ## 2.12.1 2016-09-14 diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 8f96e2942..491e90c7c 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -44,19 +44,28 @@ TransactionListItem.prototype.render = function () { return ( h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { + onClick: (event) => { + if (isPending) { + this.props.showTx(transaction.id) + } + event.stopPropagation() + if (!transaction.hash || !isLinkable) return + var url = explorerLink(transaction.hash, parseInt(network)) + extension.tabs.create({ url }) + }, style: { padding: '20px 0', }, }, [ - // large identicon h('.identicon-wrapper.flex-column.flex-center.select-none', [ transaction.status === 'unconfirmed' ? h('i.fa.fa-ellipsis-h', { style: { fontSize: '27px', }, }) : h( '.pop-hover', { - onClick: () => { + onClick: (event) => { + event.stopPropagation() if (!isTx || isPending) return var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}` extension.tabs.create({ url }) @@ -66,21 +75,7 @@ TransactionListItem.prototype.render = function () { ]), ]), - h('.flex-column', { - onClick: (event) => { - if (isPending) { - this.props.showTx(transaction.id) - } - - if (!transaction.hash || !isLinkable) return - var url = explorerLink(transaction.hash, parseInt(network)) - extension.tabs.create({ url }) - }, - style: { - width: '200px', - overflow: 'hidden', - }, - }, [ + h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ domainField(txParams), h('div', date), recipientField(txParams, transaction, isTx, isMsg),