From 6ff580584a74c6d85f54ce7cfc500db822904957 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 22:20:11 -0500 Subject: Add retry background method and action --- ui/app/components/transaction-list-item.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 891d5e227..ddef4a4ae 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -9,6 +9,7 @@ const CopyButton = require('./copyButton') const vreme = new (require('vreme'))() const Tooltip = require('./tooltip') const numberToBN = require('number-to-bn') +const actions = require('../actions') const TransactionIcon = require('./transaction-list-item-icon') const ShiftListItem = require('./shift-list-item') @@ -21,6 +22,7 @@ function TransactionListItem () { TransactionListItem.prototype.render = function () { const { transaction, network, conversionRate, currentCurrency } = this.props + const { status } = transaction if (transaction.key === 'shapeshift') { if (network === '1') return h(ShiftListItem, transaction) } @@ -32,7 +34,7 @@ TransactionListItem.prototype.render = function () { var isMsg = ('msgParams' in transaction) var isTx = ('txParams' in transaction) - var isPending = transaction.status === 'unapproved' + var isPending = status === 'unapproved' let txParams if (isTx) { txParams = transaction.txParams @@ -97,10 +99,16 @@ TransactionListItem.prototype.render = function () { showFiat: false, style: {fontSize: '15px'}, }) : h('.flex-column'), + ]) ) } +TransactionListItem.prototype.resubmit = function () { + const { transaction } = this.props + this.props.dispatch(actions.resubmitTx(transaction.id)) +} + function domainField (txParams) { return h('div', { style: { -- cgit From 500fbe450a10e1a3c756707e44225b196601372e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 22:22:40 -0500 Subject: Add button to retry transaction --- ui/app/components/transaction-list-item.js | 103 +++++++++++++++++++---------- 1 file changed, 69 insertions(+), 34 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index ddef4a4ae..9c512a89d 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -46,7 +46,7 @@ TransactionListItem.prototype.render = function () { const isClickable = ('hash' in transaction && isLinkable) || isPending return ( - h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { + h('.transaction-list-item.flex-column', { onClick: (event) => { if (isPending) { this.props.showTx(transaction.id) @@ -58,48 +58,83 @@ TransactionListItem.prototype.render = function () { }, style: { padding: '20px 0', + alignItems: 'center', }, }, [ + h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { + style: { + width: '100%', + }, + }, [ + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + h(TransactionIcon, { txParams, transaction, isTx, isMsg }), + ]), - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(TransactionIcon, { txParams, transaction, isTx, isMsg }), + h(Tooltip, { + title: 'Transaction Number', + position: 'right', + }, [ + h('span', { + style: { + display: 'flex', + cursor: 'normal', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '10px', + }, + }, nonce), + ]), + + h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ + domainField(txParams), + h('div', date), + recipientField(txParams, transaction, isTx, isMsg), + ]), + + // Places a copy button if tx is successful, else places a placeholder empty div. + transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), + + isTx ? h(EthBalance, { + value: txParams.value, + conversionRate, + currentCurrency, + width: '55px', + shorten: true, + showFiat: false, + style: {fontSize: '15px'}, + }) : h('.flex-column'), ]), - h(Tooltip, { - title: 'Transaction Number', - position: 'right', + transaction.status === 'submitted' && h('.transition-list-item__retry', { + onClick: event => { + event.stopPropagation() + this.resubmit() + }, + style: { + height: '30px', + borderRadius: '30px', + color: '#F9881B', + padding: '0 25px', + backgroundColor: '#FFE3C9', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + fontSize: '9px', + cursor: 'pointer', + }, }, [ - h('span', { + h('div', { style: { - display: 'flex', - cursor: 'normal', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - padding: '10px', + paddingRight: '2px', }, - }, nonce), - ]), - - h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ - domainField(txParams), - h('div', date), - recipientField(txParams, transaction, isTx, isMsg), + }, 'Taking too long?'), + h('div', { + style: { + textDecoration: 'underline', + }, + }, 'Retry with a higher gas price here'), ]), - - // Places a copy button if tx is successful, else places a placeholder empty div. - transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), - - isTx ? h(EthBalance, { - value: txParams.value, - conversionRate, - currentCurrency, - width: '55px', - shorten: true, - showFiat: false, - style: {fontSize: '15px'}, - }) : h('.flex-column'), - ]) ) } -- cgit From 02736d2d361a415f145404a96f553c73e3707eb5 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 22:48:26 -0500 Subject: Connect to redux for retryTransaction --- ui/app/components/transaction-list-item.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 9c512a89d..56e90e26c 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const connect = require('react-redux').connect const EthBalance = require('./eth-balance') const addressSummary = require('../util').addressSummary @@ -13,7 +14,14 @@ const actions = require('../actions') const TransactionIcon = require('./transaction-list-item-icon') const ShiftListItem = require('./shift-list-item') -module.exports = TransactionListItem + +const mapDispatchToProps = dispatch => { + return { + retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), + } +} + +module.exports = connect(null, mapDispatchToProps)(TransactionListItem) inherits(TransactionListItem, Component) function TransactionListItem () { @@ -141,7 +149,7 @@ TransactionListItem.prototype.render = function () { TransactionListItem.prototype.resubmit = function () { const { transaction } = this.props - this.props.dispatch(actions.resubmitTx(transaction.id)) + this.props.retryTransaction(transaction.id) } function domainField (txParams) { -- cgit From 6b3909547f14533cfe09e3d12ac61f0cf57eedd4 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 23:27:43 -0500 Subject: Fix styling of Retry buton --- ui/app/components/transaction-list-item.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 56e90e26c..fa6c5915d 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -120,15 +120,15 @@ TransactionListItem.prototype.render = function () { this.resubmit() }, style: { - height: '30px', - borderRadius: '30px', + height: '22px', + borderRadius: '22px', color: '#F9881B', - padding: '0 25px', + padding: '0 20px', backgroundColor: '#FFE3C9', display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: '9px', + fontSize: '8px', cursor: 'pointer', }, }, [ -- cgit From 0e25129028dd45d717d27dfe0c06db8a4052bd4e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Dec 2017 23:42:47 -0500 Subject: Enforce retry tx at minimum gas of previous tx --- ui/app/components/pending-tx.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 5b1b367c6..51e57dcd2 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -38,6 +38,14 @@ PendingTx.prototype.render = function () { const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} + // Allow retry txs + const { lastGasPrice } = txMeta + let forceGasMin + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = new BN(stripped, 16).add(MIN_GAS_PRICE_BN) + } + // Account Details const address = txParams.from || props.selectedAddress const identity = props.identities[address] || { address: address } @@ -199,7 +207,7 @@ PendingTx.prototype.render = function () { precision: 9, scale: 9, suffix: 'GWEI', - min: MIN_GAS_PRICE_BN, + min: forceGasMin || MIN_GAS_PRICE_BN, style: { position: 'relative', top: '5px', -- cgit From b9f2f8c2a78332a2522d49baedf25e894273ef38 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 7 Dec 2017 00:01:11 -0500 Subject: Show retry button on submitted transactions greater than 30 seconds, add hover styling --- ui/app/components/transaction-list-item.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index fa6c5915d..42ef665b1 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -28,6 +28,12 @@ function TransactionListItem () { Component.call(this) } +TransactionListItem.prototype.showRetryButton = function () { + const { transaction = {} } = this.props + const { status, time } = transaction + return status === 'submitted' && Date.now() - time > 30000 +} + TransactionListItem.prototype.render = function () { const { transaction, network, conversionRate, currentCurrency } = this.props const { status } = transaction @@ -114,7 +120,7 @@ TransactionListItem.prototype.render = function () { }) : h('.flex-column'), ]), - transaction.status === 'submitted' && h('.transition-list-item__retry', { + this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', { onClick: event => { event.stopPropagation() this.resubmit() -- cgit