{
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
index 166228932..f53a5115d 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
@@ -1,3 +1,4 @@
// Component design variants
export const DEFAULT_VARIANT = 'DEFAULT_VARIANT'
export const CARDS_VARIANT = 'CARDS_VARIANT'
+export const FLAT_VARIANT = 'FLAT_VARIANT'
diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
index 27f3006b3..00c17e6aa 100644
--- a/ui/app/components/transaction-activity-log/index.scss
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -1,7 +1,8 @@
.transaction-activity-log {
- &__card {
- background: $white;
- height: 100%;
+ &__title {
+ border-bottom: 1px solid #d8d8d8;
+ padding-bottom: 4px;
+ text-transform: capitalize;
}
&__activities-container {
@@ -21,8 +22,8 @@
left: 0;
top: 0;
height: 100%;
- width: 6px;
- border-right: 1px solid $scorpion;
+ width: 7px;
+ border-right: 1px solid #909090;
}
&:first-child::after {
@@ -40,22 +41,25 @@
}
&__activity-icon {
- width: 13px;
- height: 13px;
+ width: 15px;
+ height: 15px;
margin-right: 6px;
border-radius: 50%;
- background: $scorpion;
+ background: #909090;
flex: 0 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
}
&__activity-text {
- color: $scorpion;
+ color: $dusty-gray;
font-size: .75rem;
+ cursor: pointer;
- @media screen and (min-width: $break-large) {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ &:hover {
+ color: $black;
}
}
@@ -64,6 +68,16 @@
font-weight: 500;
}
+ &__entry-container {
+ min-width: 0;
+ }
+
+ &__action-link {
+ font-size: .75rem;
+ cursor: pointer;
+ color: $curious-blue;
+ }
+
b {
font-weight: 500;
}
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
index 8687dbbc7..a2946e53d 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
@@ -2,34 +2,100 @@ import React from 'react'
import assert from 'assert'
import { shallow } from 'enzyme'
import TransactionActivityLog from '../transaction-activity-log.component'
-import Card from '../../card'
describe('TransactionActivityLog Component', () => {
it('should render properly', () => {
- const transaction = {
- history: [],
- id: 1,
- status: 'confirmed',
- txParams: {
- from: '0x1',
- gas: '0x5208',
- gasPrice: '0x3b9aca00',
- nonce: '0xa4',
- to: '0x2',
+ const activities = [
+ {
+ eventKey: 'transactionCreated',
+ hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
+ id: 2005383477493174,
+ timestamp: 1543957986150,
value: '0x2386f26fc10000',
+ }, {
+ eventKey: 'transactionSubmitted',
+ hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
+ id: 2005383477493174,
+ timestamp: 1543957987853,
+ value: '0x1319718a5000',
+ }, {
+ eventKey: 'transactionResubmitted',
+ hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+ id: 2005383477493175,
+ timestamp: 1543957991563,
+ value: '0x1502634b5800',
+ }, {
+ eventKey: 'transactionConfirmed',
+ hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+ id: 2005383477493175,
+ timestamp: 1543958029960,
+ value: '0x1502634b5800',
},
- }
+ ]
const wrapper = shallow(
{}}
+ onRetry={() => {}}
+ primaryTransactionStatus="confirmed"
/>,
{ context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
)
assert.ok(wrapper.hasClass('transaction-activity-log'))
assert.ok(wrapper.hasClass('test-class'))
- assert.equal(wrapper.find(Card).length, 1)
+ })
+
+ it('should render inline retry and cancel buttons', () => {
+ const activities = [
+ {
+ eventKey: 'transactionCreated',
+ hash: '0xa',
+ id: 1,
+ timestamp: 1,
+ value: '0x1',
+ }, {
+ eventKey: 'transactionSubmitted',
+ hash: '0xa',
+ id: 1,
+ timestamp: 2,
+ value: '0x1',
+ }, {
+ eventKey: 'transactionResubmitted',
+ hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+ id: 2,
+ timestamp: 3,
+ value: '0x1',
+ }, {
+ eventKey: 'transactionCancelAttempted',
+ hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+ id: 3,
+ timestamp: 4,
+ value: '0x1',
+ },
+ ]
+
+ const wrapper = shallow(
+ {}}
+ onRetry={() => {}}
+ primaryTransactionStatus="pending"
+ />,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-activity-log'))
+ assert.ok(wrapper.hasClass('test-class'))
+ assert.equal(wrapper.find('.transaction-activity-log__action-link').length, 2)
})
})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
index 586500408..d014b8886 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
@@ -1,5 +1,130 @@
import assert from 'assert'
-import { getActivities } from '../transaction-activity-log.util'
+import { combineTransactionHistories, getActivities } from '../transaction-activity-log.util'
+
+describe('combineTransactionHistories', () => {
+ it('should return no activites for an empty list of transactions', () => {
+ assert.deepEqual(combineTransactionHistories([]), [])
+ })
+
+ it('should return activities for an array of transactions', () => {
+ const transactions = [
+ {
+ estimatedGas: '0x5208',
+ hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3',
+ history: [
+ {
+ 'id': 6400627574331058,
+ 'time': 1543958845581,
+ 'status': 'unapproved',
+ 'metamaskNetworkId': '3',
+ 'loadingDefaults': true,
+ 'txParams': {
+ 'from': '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+ 'to': '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ 'value': '0x2386f26fc10000',
+ 'gas': '0x5208',
+ 'gasPrice': '0x3b9aca00',
+ },
+ 'type': 'standard',
+ },
+ [{ 'op': 'replace', 'path': '/status', 'value': 'approved', 'note': 'txStateManager: setting status to approved', 'timestamp': 1543958847813 }],
+ [{ 'op': 'replace', 'path': '/status', 'value': 'submitted', 'note': 'txStateManager: setting status to submitted', 'timestamp': 1543958848147 }],
+ [{ 'op': 'replace', 'path': '/status', 'value': 'dropped', 'note': 'txStateManager: setting status to dropped', 'timestamp': 1543958897181 }, { 'op': 'add', 'path': '/replacedBy', 'value': '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33' }],
+ ],
+ id: 6400627574331058,
+ loadingDefaults: false,
+ metamaskNetworkId: '3',
+ status: 'dropped',
+ submittedTime: 1543958848135,
+ time: 1543958845581,
+ txParams: {
+ from: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0x32',
+ to: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ value: '0x2386f26fc10000',
+ },
+ type: 'standard',
+ }, {
+ hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33',
+ history: [
+ {
+ 'id': 6400627574331060,
+ 'time': 1543958857697,
+ 'status': 'unapproved',
+ 'metamaskNetworkId': '3',
+ 'loadingDefaults': false,
+ 'txParams': {
+ 'from': '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+ 'to': '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ 'value': '0x2386f26fc10000',
+ 'gas': '0x5208',
+ 'gasPrice': '0x3b9aca00',
+ 'nonce': '0x32',
+ },
+ 'lastGasPrice': '0x4190ab00',
+ 'type': 'retry',
+ },
+ [{ 'op': 'replace', 'path': '/txParams/gasPrice', 'value': '0x481f2280', 'note': 'confTx: user approved transaction', 'timestamp': 1543958859470 }],
+ [{ 'op': 'replace', 'path': '/status', 'value': 'approved', 'note': 'txStateManager: setting status to approved', 'timestamp': 1543958859485 }],
+ [{ 'op': 'replace', 'path': '/status', 'value': 'signed', 'note': 'transactions#publishTransaction', 'timestamp': 1543958859889 }],
+ [{ 'op': 'replace', 'path': '/status', 'value': 'submitted', 'note': 'txStateManager: setting status to submitted', 'timestamp': 1543958860061 }], [{ 'op': 'add', 'path': '/firstRetryBlockNumber', 'value': '0x45a0fd', 'note': 'transactions/pending-tx-tracker#event: tx:block-update', 'timestamp': 1543958896466 }],
+ [{ 'op': 'replace', 'path': '/status', 'value': 'confirmed', 'timestamp': 1543958897165 }],
+ ],
+ id: 6400627574331060,
+ lastGasPrice: '0x4190ab00',
+ loadingDefaults: false,
+ metamaskNetworkId: '3',
+ status: 'confirmed',
+ submittedTime: 1543958860054,
+ time: 1543958857697,
+ txParams: {
+ from: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+ gas: '0x5208',
+ gasPrice: '0x481f2280',
+ nonce: '0x32',
+ to: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ value: '0x2386f26fc10000',
+ },
+ txReceipt: {
+ status: '0x1',
+ },
+ type: 'retry',
+ },
+ ]
+
+ const expected = [
+ {
+ id: 6400627574331058,
+ hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3',
+ eventKey: 'transactionCreated',
+ timestamp: 1543958845581,
+ value: '0x2386f26fc10000',
+ }, {
+ id: 6400627574331058,
+ hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3',
+ eventKey: 'transactionSubmitted',
+ timestamp: 1543958848147,
+ value: '0x1319718a5000',
+ }, {
+ id: 6400627574331060,
+ hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33',
+ eventKey: 'transactionResubmitted',
+ timestamp: 1543958860061,
+ value: '0x171c3a061400',
+ }, {
+ id: 6400627574331060,
+ hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33',
+ eventKey: 'transactionConfirmed',
+ timestamp: 1543958897165,
+ value: '0x171c3a061400',
+ },
+ ]
+
+ assert.deepEqual(combineTransactionHistories(transactions), expected)
+ })
+})
describe('getActivities', () => {
it('should return no activities for an empty history', () => {
@@ -178,6 +303,7 @@ describe('getActivities', () => {
to: '0x2',
value: '0x2386f26fc10000',
},
+ hash: '0xabc',
}
const expectedResult = [
@@ -185,24 +311,25 @@ describe('getActivities', () => {
'eventKey': 'transactionCreated',
'timestamp': 1535507561452,
'value': '0x2386f26fc10000',
- },
- {
- 'eventKey': 'transactionUpdatedGas',
- 'timestamp': 1535664571504,
- 'value': '0x77359400',
+ 'id': 1,
+ 'hash': '0xabc',
},
{
'eventKey': 'transactionSubmitted',
'timestamp': 1535507564665,
- 'value': undefined,
+ 'value': '0x2632e314a000',
+ 'id': 1,
+ 'hash': '0xabc',
},
{
'eventKey': 'transactionConfirmed',
'timestamp': 1535507615993,
- 'value': undefined,
+ 'value': '0x2632e314a000',
+ 'id': 1,
+ 'hash': '0xabc',
},
]
- assert.deepEqual(getActivities(transaction), expectedResult)
+ assert.deepEqual(getActivities(transaction, true), expectedResult)
})
})
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js
new file mode 100644
index 000000000..86b12360a
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-activity-log-icon.component'
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
new file mode 100644
index 000000000..871716002
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import {
+ TRANSACTION_CREATED_EVENT,
+ TRANSACTION_SUBMITTED_EVENT,
+ TRANSACTION_RESUBMITTED_EVENT,
+ TRANSACTION_CONFIRMED_EVENT,
+ TRANSACTION_DROPPED_EVENT,
+ TRANSACTION_ERRORED_EVENT,
+ TRANSACTION_CANCEL_ATTEMPTED_EVENT,
+ TRANSACTION_CANCEL_SUCCESS_EVENT,
+} from '../transaction-activity-log.constants'
+
+const imageHash = {
+ [TRANSACTION_CREATED_EVENT]: '/images/icons/new.svg',
+ [TRANSACTION_SUBMITTED_EVENT]: '/images/icons/submitted.svg',
+ [TRANSACTION_RESUBMITTED_EVENT]: '/images/icons/retry.svg',
+ [TRANSACTION_CONFIRMED_EVENT]: '/images/icons/confirm.svg',
+ [TRANSACTION_DROPPED_EVENT]: '/images/icons/cancelled.svg',
+ [TRANSACTION_ERRORED_EVENT]: '/images/icons/error.svg',
+ [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: '/images/icons/cancelled.svg',
+ [TRANSACTION_CANCEL_SUCCESS_EVENT]: '/images/icons/cancelled.svg',
+}
+
+export default class TransactionActivityLogIcon extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ className: PropTypes.string,
+ eventKey: PropTypes.oneOf(Object.keys(imageHash)),
+ }
+
+ render () {
+ const { className, eventKey } = this.props
+ const imagePath = imageHash[eventKey]
+
+ return (
+
+ {
+ imagePath && (
+
+ )
+ }
+
onRetry(id)}
+ >
+ { t('speedUpTransaction') }
+
+ ) : null
}
- componentDidUpdate (prevProps) {
- const {
- transaction: { history: prevHistory = [], txReceipt: { status: prevStatus } = {} } = {},
- } = prevProps
- const {
- transaction: { history = [], txReceipt: { status } = {} } = {},
- } = this.props
+ renderInlineCancel (index, activity) {
+ const { t } = this.context
+ const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props
+ const { status } = primaryTransaction
+ const { id } = activity
- if (prevHistory.length !== history.length || prevStatus !== status) {
- this.setActivites()
- }
- }
-
- setActivites () {
- const activities = getActivities(this.props.transaction)
- this.setState({ activities })
+ return status !== CONFIRMED_STATUS && index === inlineCancelIndex
+ ? (
+ onCancel(id)}
+ >
+ { t('speedUpCancellation') }
+
+ ) : null
}
renderActivity (activity, index) {
const { conversionRate, nativeCurrency } = this.props
- const { eventKey, value, timestamp } = activity
+ const { eventKey, value, timestamp, hash } = activity
const ethValue = index === 0
? `${getValueFromWeiHex({
value,
@@ -55,8 +79,13 @@ export default class TransactionActivityLog extends PureComponent {
conversionRate,
numberOfDecimals: 6,
})} ${nativeCurrency}`
- : getEthConversionFromWeiHex({ value, fromCurrency: nativeCurrency, conversionRate })
- const formattedTimestamp = formatDate(timestamp)
+ : getEthConversionFromWeiHex({
+ value,
+ fromCurrency: nativeCurrency,
+ conversionRate,
+ numberOfDecimals: 3,
+ })
+ const formattedTimestamp = formatDate(timestamp, '14:30 on 3/16/2014')
const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
return (
@@ -64,12 +93,20 @@ export default class TransactionActivityLog extends PureComponent {
key={index}
className="transaction-activity-log__activity"
>
-
-
- { activityText }
+
+
+
this.handleActivityClick(hash)}
+ >
+ { activityText }
+
+ { this.renderInlineRetry(index, activity) }
+ { this.renderInlineCancel(index, activity) }
-
-
- { activities.map((activity, index) => this.renderActivity(activity, index)) }
-
-
+
+ { t('activityLog') }
+
+
+ { activities.map((activity, index) => this.renderActivity(activity, index)) }
+
-
+ { t('transaction') }
+
+
-
-
-
-
- {
- typeof gasUsed === 'string' && (
-
-
-
- )
- }
-
-
-
-
-
-
-
-
-
-
+
)
}
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss
index 54cf834cc..2e3a06f84 100644
--- a/ui/app/components/transaction-list-item-details/index.scss
+++ b/ui/app/components/transaction-list-item-details/index.scss
@@ -1,11 +1,16 @@
.transaction-list-item-details {
&__header {
- margin-bottom: 8px;
+ margin: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
+ &__body {
+ background: #fafbfc;
+ padding: 8px 16px;
+ }
+
&__header-buttons {
display: flex;
flex-direction: row;
@@ -45,5 +50,9 @@
&__transaction-activity-log {
flex: 2;
min-width: 0;
+
+ @media screen and (min-width: $break-large) {
+ padding-left: 12px;
+ }
}
}
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
index f2bbe8789..62fc64db9 100644
--- a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -23,9 +23,15 @@ describe('TransactionListItemDetails Component', () => {
},
}
+ const transactionGroup = {
+ transactions: [transaction],
+ primaryTransaction: transaction,
+ initialTransaction: transaction,
+ }
+
const wrapper = shallow(
,
{ context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
)
@@ -52,9 +58,18 @@ describe('TransactionListItemDetails Component', () => {
},
}
+ const transactionGroup = {
+ transactions: [transaction],
+ primaryTransaction: transaction,
+ initialTransaction: transaction,
+ nonce: '0xa4',
+ hasRetried: false,
+ hasCancelled: false,
+ }
+
const wrapper = shallow(
,
{ context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
index a79213ace..cc2c45290 100644
--- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import SenderToRecipient from '../sender-to-recipient'
-import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
+import { FLAT_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
import TransactionActivityLog from '../transaction-activity-log'
import TransactionBreakdown from '../transaction-breakdown'
import Button from '../button'
@@ -18,42 +18,43 @@ export default class TransactionListItemDetails extends PureComponent {
onRetry: PropTypes.func,
showCancel: PropTypes.bool,
showRetry: PropTypes.bool,
- transaction: PropTypes.object,
+ transactionGroup: PropTypes.object,
}
handleEtherscanClick = () => {
- const { hash, metamaskNetworkId } = this.props.transaction
+ const { transactionGroup: { primaryTransaction } } = this.props
+ const { hash, metamaskNetworkId } = primaryTransaction
const prefix = prefixForNetwork(metamaskNetworkId)
const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
global.platform.openWindow({ url: etherscanUrl })
- this.setState({ showTransactionDetails: true })
}
handleCancel = event => {
- const { onCancel } = this.props
+ const { transactionGroup: { initialTransaction: { id } = {} } = {}, onCancel } = this.props
event.stopPropagation()
- onCancel()
+ onCancel(id)
}
handleRetry = event => {
- const { onRetry } = this.props
+ const { transactionGroup: { initialTransaction: { id } = {} } = {}, onRetry } = this.props
event.stopPropagation()
- onRetry()
+ onRetry(id)
}
render () {
const { t } = this.context
- const { transaction, showCancel, showRetry } = this.props
+ const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props
+ const { primaryTransaction: transaction } = transactionGroup
const { txParams: { to, from } = {} } = transaction
return (
-
Details
+
{ t('details') }
{
showRetry && (
@@ -88,23 +89,27 @@ export default class TransactionListItemDetails extends PureComponent {
-
-
-
-
)
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 449974734..9e73a546c 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -117,12 +117,6 @@
}
}
- &__details-container {
- padding: 8px 16px 16px;
- background: #f3f4f7;
- width: 100%;
- }
-
&__expander {
max-height: 0px;
width: 100%;
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index 5334484db..ecd8b4cef 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -18,6 +18,7 @@ export default class TransactionListItem extends PureComponent {
history: PropTypes.object,
methodData: PropTypes.object,
nonceAndDate: PropTypes.string,
+ primaryTransaction: PropTypes.object,
retryTransaction: PropTypes.func,
setSelectedToken: PropTypes.func,
showCancelModal: PropTypes.func,
@@ -26,6 +27,7 @@ export default class TransactionListItem extends PureComponent {
token: PropTypes.object,
tokenData: PropTypes.object,
transaction: PropTypes.object,
+ transactionGroup: PropTypes.object,
value: PropTypes.string,
fetchBasicGasAndTimeEstimates: PropTypes.func,
fetchGasEstimates: PropTypes.func,
@@ -51,36 +53,48 @@ export default class TransactionListItem extends PureComponent {
this.setState({ showTransactionDetails: !showTransactionDetails })
}
- handleCancel = () => {
- const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props
- showCancelModal(id, gasPrice)
+ handleCancel = id => {
+ const {
+ primaryTransaction: { txParams: { gasPrice } } = {},
+ transaction: { id: initialTransactionId },
+ showCancelModal,
+ } = this.props
+
+ const cancelId = id || initialTransactionId
+ showCancelModal(cancelId, gasPrice)
}
- handleRetry = () => {
+ /**
+ * @name handleRetry
+ * @description Resubmits a transaction. Retrying a transaction within a list of transactions with
+ * the same nonce requires keeping the original value while increasing the gas price of the latest
+ * transaction.
+ * @param {number} id - Transaction id
+ */
+ handleRetry = id => {
const {
- transaction: { txParams: { to } = {} },
+ primaryTransaction: { txParams: { gasPrice } } = {},
+ transaction: { txParams: { to } = {}, id: initialTransactionId },
methodData: { name } = {},
setSelectedToken,
+ retryTransaction,
+ fetchBasicGasAndTimeEstimates,
+ fetchGasEstimates,
} = this.props
if (name === TOKEN_METHOD_TRANSFER) {
setSelectedToken(to)
}
- return this.resubmit()
- }
+ const retryId = id || initialTransactionId
- resubmit () {
- const { transaction, retryTransaction, fetchBasicGasAndTimeEstimates, fetchGasEstimates } = this.props
- fetchBasicGasAndTimeEstimates().then(basicEstimates => {
- fetchGasEstimates(basicEstimates.blockTime)
- }).then(() => {
- retryTransaction(transaction)
- })
+ return fetchBasicGasAndTimeEstimates()
+ .then(basicEstimates => fetchGasEstimates(basicEstimates.blockTime))
+ .then(retryTransaction(retryId, gasPrice))
}
renderPrimaryCurrency () {
- const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props
+ const { token, primaryTransaction: { txParams: { data } = {} } = {}, value } = this.props
return token
? (
@@ -118,12 +132,14 @@ export default class TransactionListItem extends PureComponent {
render () {
const {
assetImages,
+ transaction,
methodData,
nonceAndDate,
+ primaryTransaction,
showCancel,
showRetry,
tokenData,
- transaction,
+ transactionGroup,
} = this.props
const { txParams = {} } = transaction
const { showTransactionDetails } = this.state
@@ -156,11 +172,11 @@ export default class TransactionListItem extends PureComponent {
{ this.renderPrimaryCurrency() }
@@ -173,7 +189,7 @@ export default class TransactionListItem extends PureComponent {
showTransactionDetails && (
{
- const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
-
- const tokenData = data && getTokenData(data)
- const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
-
- return {
- value,
- nonceAndDate,
- tokenData,
- }
-}
-
const mapDispatchToProps = dispatch => {
return {
fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
- retryTransaction: (transaction) => {
- dispatch(setCustomGasPrice(transaction.txParams.gasPrice))
+ retryTransaction: (transaction, gasPrice) => {
+ dispatch(setCustomGasPrice(gasPrice || transaction.txParams.gasPrice))
dispatch(setCustomGasLimit(transaction.txParams.gas))
dispatch(showSidebar({
transitionName: 'sidebar-left',
@@ -47,8 +35,35 @@ const mapDispatchToProps = dispatch => {
}
}
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ const { transactionGroup: { primaryTransaction, initialTransaction } = {} } = ownProps
+ const { retryTransaction, ...restDispatchProps } = dispatchProps
+ const { txParams: { nonce, data } = {}, time } = initialTransaction
+ const { txParams: { value } = {} } = primaryTransaction
+
+ const tokenData = data && getTokenData(data)
+ const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
+
+ return {
+ ...stateProps,
+ ...restDispatchProps,
+ ...ownProps,
+ value,
+ nonceAndDate,
+ tokenData,
+ transaction: initialTransaction,
+ primaryTransaction,
+ retryTransaction: (transactionId, gasPrice) => {
+ const { transactionGroup: { transactions = [] } } = ownProps
+ const transaction = transactions.find(tx => tx.id === transactionId) || {}
+ const increasedGasPrice = increaseLastGasPrice(gasPrice)
+ retryTransaction(transaction, increasedGasPrice)
+ },
+ }
+}
+
export default compose(
withRouter,
- connect(mapStateToProps, mapDispatchToProps),
+ connect(null, mapDispatchToProps, mergeProps),
withMethodData,
)(TransactionListItem)
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index eef60186d..c1e3b3d1c 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -12,13 +12,11 @@ export default class TransactionList extends PureComponent {
static defaultProps = {
pendingTransactions: [],
completedTransactions: [],
- transactionToRetry: {},
}
static propTypes = {
pendingTransactions: PropTypes.array,
completedTransactions: PropTypes.array,
- transactionToRetry: PropTypes.object,
selectedToken: PropTypes.object,
updateNetworkNonce: PropTypes.func,
assetImages: PropTypes.object,
@@ -37,26 +35,34 @@ export default class TransactionList extends PureComponent {
}
}
- shouldShowRetry = transaction => {
- const { transactionToRetry } = this.props
- const { id, submittedTime } = transaction
- return id === transactionToRetry.id && Date.now() - submittedTime > 30000
+ shouldShowRetry = (transactionGroup, isEarliestNonce) => {
+ const { transactions = [], hasRetried } = transactionGroup
+ const [earliestTransaction = {}] = transactions
+ const { submittedTime } = earliestTransaction
+ return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried
+ }
+
+ shouldShowCancel (transactionGroup) {
+ const { hasCancelled } = transactionGroup
+ return !hasCancelled
}
renderTransactions () {
const { t } = this.context
const { pendingTransactions = [], completedTransactions = [] } = this.props
+ const pendingLength = pendingTransactions.length
+
return (
{
- pendingTransactions.length > 0 && (
+ pendingLength > 0 && (
{ `${t('queue')} (${pendingTransactions.length})` }
{
- pendingTransactions.map((transaction, index) => (
- this.renderTransaction(transaction, index, true)
+ pendingTransactions.map((transactionGroup, index) => (
+ this.renderTransaction(transactionGroup, index, true, index === pendingLength - 1)
))
}
@@ -68,8 +74,8 @@ export default class TransactionList extends PureComponent {
-
+
{ statusText }
diff --git a/ui/app/constants/transactions.js b/ui/app/constants/transactions.js
index 2dc061091..d0a819b9b 100644
--- a/ui/app/constants/transactions.js
+++ b/ui/app/constants/transactions.js
@@ -6,6 +6,7 @@ export const SUBMITTED_STATUS = 'submitted'
export const CONFIRMED_STATUS = 'confirmed'
export const FAILED_STATUS = 'failed'
export const DROPPED_STATUS = 'dropped'
+export const CANCELLED_STATUS = 'cancelled'
export const TOKEN_METHOD_TRANSFER = 'transfer'
export const TOKEN_METHOD_APPROVE = 'approve'
@@ -17,7 +18,7 @@ export const APPROVE_ACTION_KEY = 'approve'
export const SEND_TOKEN_ACTION_KEY = 'sentTokens'
export const TRANSFER_FROM_ACTION_KEY = 'transferFrom'
export const SIGNATURE_REQUEST_KEY = 'signatureRequest'
-export const UNKNOWN_FUNCTION_KEY = 'unknownFunction'
+export const CONTRACT_INTERACTION_KEY = 'contractInteraction'
export const CANCEL_ATTEMPT_ACTION_KEY = 'cancelAttempt'
export const TRANSACTION_TYPE_SHAPESHIFT = 'shapeshift'
diff --git a/ui/app/ducks/gas.duck.js b/ui/app/ducks/gas.duck.js
index 8db24cc83..83c236d81 100644
--- a/ui/app/ducks/gas.duck.js
+++ b/ui/app/ducks/gas.duck.js
@@ -4,6 +4,9 @@ import {
loadLocalStorageData,
saveLocalStorageData,
} from '../../lib/local-storage-helpers'
+import {
+ decGWEIToHexWEI,
+} from '../helpers/conversions.util'
// Actions
const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED'
@@ -403,6 +406,17 @@ export function fetchGasEstimates (blockTime) {
}
}
+export function setCustomGasPriceForRetry (newPrice) {
+ return (dispatch) => {
+ if (newPrice !== '0x0') {
+ dispatch(setCustomGasPrice(newPrice))
+ } else {
+ const { fast } = loadLocalStorageData('BASIC_PRICE_ESTIMATES')
+ dispatch(setCustomGasPrice(decGWEIToHexWEI(fast)))
+ }
+ }
+}
+
export function setBasicGasEstimateData (basicGasEstimateData) {
return {
type: SET_BASIC_GAS_ESTIMATE_DATA,
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index 2f4b1d095..0f1ed70a3 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -2,6 +2,10 @@ import ethUtil from 'ethereumjs-util'
import MethodRegistry from 'eth-method-registry'
import abi from 'human-standard-token-abi'
import abiDecoder from 'abi-decoder'
+import {
+ TRANSACTION_TYPE_CANCEL,
+ TRANSACTION_STATUS_CONFIRMED,
+} from '../../../app/scripts/controllers/transactions/enums'
import {
TOKEN_METHOD_TRANSFER,
@@ -13,7 +17,7 @@ import {
SEND_TOKEN_ACTION_KEY,
TRANSFER_FROM_ACTION_KEY,
SIGNATURE_REQUEST_KEY,
- UNKNOWN_FUNCTION_KEY,
+ CONTRACT_INTERACTION_KEY,
CANCEL_ATTEMPT_ACTION_KEY,
} from '../constants/transactions'
@@ -87,7 +91,7 @@ export async function getTransactionActionKey (transaction, methodData) {
const methodName = name && name.toLowerCase()
if (!methodName) {
- return UNKNOWN_FUNCTION_KEY
+ return CONTRACT_INTERACTION_KEY
}
switch (methodName) {
@@ -148,12 +152,16 @@ export function sumHexes (...args) {
* @returns {string}
*/
export function getStatusKey (transaction) {
- const { txReceipt: { status } = {} } = transaction
+ const { txReceipt: { status: receiptStatus } = {}, type, status } = transaction
// There was an on-chain failure
- if (status === '0x0') {
+ if (receiptStatus === '0x0') {
return 'failed'
}
+ if (status === TRANSACTION_STATUS_CONFIRMED && type === TRANSACTION_TYPE_CANCEL) {
+ return 'cancelled'
+ }
+
return transaction.status
}
diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js
index 479002794..301e8d11f 100644
--- a/ui/app/selectors/transactions.js
+++ b/ui/app/selectors/transactions.js
@@ -1,16 +1,44 @@
import { createSelector } from 'reselect'
-import { valuesFor } from '../util'
import {
UNAPPROVED_STATUS,
APPROVED_STATUS,
SUBMITTED_STATUS,
+ CONFIRMED_STATUS,
} from '../constants/transactions'
+import {
+ TRANSACTION_TYPE_CANCEL,
+ TRANSACTION_TYPE_RETRY,
+} from '../../../app/scripts/controllers/transactions/enums'
+import { hexToDecimal } from '../helpers/conversions.util'
import { selectedTokenAddressSelector } from './tokens'
+import txHelper from '../../lib/tx-helper'
export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList
export const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs
export const selectedAddressTxListSelector = state => state.metamask.selectedAddressTxList
+export const unapprovedPersonalMsgsSelector = state => state.metamask.unapprovedPersonalMsgs
+export const unapprovedTypedMessagesSelector = state => state.metamask.unapprovedTypedMessages
+export const networkSelector = state => state.metamask.network
+
+export const unapprovedMessagesSelector = createSelector(
+ unapprovedMsgsSelector,
+ unapprovedPersonalMsgsSelector,
+ unapprovedTypedMessagesSelector,
+ networkSelector,
+ (
+ unapprovedMsgs = {},
+ unapprovedPersonalMsgs = {},
+ unapprovedTypedMessages = {},
+ network
+ ) => txHelper(
+ {},
+ unapprovedMsgs,
+ unapprovedPersonalMsgs,
+ unapprovedTypedMessages,
+ network
+ ) || []
+)
const pendingStatusHash = {
[UNAPPROVED_STATUS]: true,
@@ -18,14 +46,18 @@ const pendingStatusHash = {
[SUBMITTED_STATUS]: true,
}
+const priorityStatusHash = {
+ ...pendingStatusHash,
+ [CONFIRMED_STATUS]: true,
+}
+
export const transactionsSelector = createSelector(
selectedTokenAddressSelector,
- unapprovedMsgsSelector,
+ unapprovedMessagesSelector,
shapeShiftTxListSelector,
selectedAddressTxListSelector,
- (selectedTokenAddress, unapprovedMsgs = {}, shapeShiftTxList = [], transactions = []) => {
- const unapprovedMsgsList = valuesFor(unapprovedMsgs)
- const txsToRender = transactions.concat(unapprovedMsgsList, shapeShiftTxList)
+ (selectedTokenAddress, unapprovedMessages = [], shapeShiftTxList = [], transactions = []) => {
+ const txsToRender = transactions.concat(unapprovedMessages, shapeShiftTxList)
return selectedTokenAddress
? txsToRender
@@ -36,10 +68,193 @@ export const transactionsSelector = createSelector(
}
)
-export const pendingTransactionsSelector = createSelector(
+/**
+ * @name insertOrderedNonce
+ * @private
+ * @description Inserts (mutates) a nonce into an array of ordered nonces, sorted in ascending
+ * order.
+ * @param {string[]} nonces - Array of nonce strings in hex
+ * @param {string} nonceToInsert - Nonce string in hex to be inserted into the array of nonces.
+ * @returns {string[]}
+ */
+const insertOrderedNonce = (nonces, nonceToInsert) => {
+ let insertIndex = nonces.length
+
+ for (let i = 0; i < nonces.length; i++) {
+ const nonce = nonces[i]
+
+ if (Number(hexToDecimal(nonce)) < Number(hexToDecimal(nonceToInsert))) {
+ insertIndex = i
+ break
+ }
+ }
+
+ nonces.splice(insertIndex, 0, nonceToInsert)
+}
+
+/**
+ * @name insertTransactionByTime
+ * @private
+ * @description Inserts (mutates) a transaction object into an array of ordered transactions, sorted
+ * in ascending order by time.
+ * @param {Object[]} transactions - Array of transaction objects.
+ * @param {Object} transaction - Transaction object to be inserted into the array of transactions.
+ * @returns {Object[]}
+ */
+const insertTransactionByTime = (transactions, transaction) => {
+ const { time } = transaction
+
+ let insertIndex = transactions.length
+
+ for (let i = 0; i < transactions.length; i++) {
+ const tx = transactions[i]
+
+ if (tx.time > time) {
+ insertIndex = i
+ break
+ }
+ }
+
+ transactions.splice(insertIndex, 0, transaction)
+}
+
+/**
+ * Contains transactions and properties associated with those transactions of the same nonce.
+ * @typedef {Object} transactionGroup
+ * @property {string} nonce - The nonce that the transactions within this transactionGroup share.
+ * @property {Object[]} transactions - An array of transaction (txMeta) objects.
+ * @property {Object} initialTransaction - The transaction (txMeta) with the lowest "time".
+ * @property {Object} primaryTransaction - Either the latest transaction or the confirmed
+ * transaction.
+ * @property {boolean} hasRetried - True if a transaction in the group was a retry transaction.
+ * @property {boolean} hasCancelled - True if a transaction in the group was a cancel transaction.
+ */
+
+/**
+ * @name insertTransactionGroupByTime
+ * @private
+ * @description Inserts (mutates) a transactionGroup object into an array of ordered
+ * transactionGroups, sorted in ascending order by nonce.
+ * @param {transactionGroup[]} transactionGroups - Array of transactionGroup objects.
+ * @param {transactionGroup} transactionGroup - transactionGroup object to be inserted into the
+ * array of transactionGroups.
+ * @returns {transactionGroup[]}
+ */
+const insertTransactionGroupByTime = (transactionGroups, transactionGroup) => {
+ const { primaryTransaction: { time } = {} } = transactionGroup
+
+ let insertIndex = transactionGroups.length
+
+ for (let i = 0; i < transactionGroups.length; i++) {
+ const txGroup = transactionGroups[i]
+
+ if (txGroup.time > time) {
+ insertIndex = i
+ break
+ }
+ }
+
+ transactionGroups.splice(insertIndex, 0, transactionGroup)
+}
+
+/**
+ * @name nonceSortedTransactionsSelector
+ * @description Returns an array of transactionGroups sorted by nonce in ascending order.
+ * @returns {transactionGroup[]}
+ */
+export const nonceSortedTransactionsSelector = createSelector(
transactionsSelector,
+ (transactions = []) => {
+ const unapprovedTransactionGroups = []
+ const orderedNonces = []
+ const nonceToTransactionsMap = {}
+
+ transactions.forEach(transaction => {
+ const { txParams: { nonce } = {}, status, type, time: txTime } = transaction
+
+ if (typeof nonce === 'undefined') {
+ const transactionGroup = {
+ transactions: [transaction],
+ initialTransaction: transaction,
+ primaryTransaction: transaction,
+ hasRetried: false,
+ hasCancelled: false,
+ }
+
+ insertTransactionGroupByTime(unapprovedTransactionGroups, transactionGroup)
+ } else if (nonce in nonceToTransactionsMap) {
+ const nonceProps = nonceToTransactionsMap[nonce]
+ insertTransactionByTime(nonceProps.transactions, transaction)
+
+ if (status in priorityStatusHash) {
+ const { primaryTransaction: { time: primaryTxTime = 0 } = {} } = nonceProps
+
+ if (status === CONFIRMED_STATUS || txTime > primaryTxTime) {
+ nonceProps.primaryTransaction = transaction
+ }
+ }
+
+ const { initialTransaction: { time: initialTxTime = 0 } = {} } = nonceProps
+
+ // Used to display the transaction action, since we don't want to overwrite the action if
+ // it was replaced with a cancel attempt transaction.
+ if (txTime < initialTxTime) {
+ nonceProps.initialTransaction = transaction
+ }
+
+ if (type === TRANSACTION_TYPE_RETRY) {
+ nonceProps.hasRetried = true
+ }
+
+ if (type === TRANSACTION_TYPE_CANCEL) {
+ nonceProps.hasCancelled = true
+ }
+ } else {
+ nonceToTransactionsMap[nonce] = {
+ nonce,
+ transactions: [transaction],
+ initialTransaction: transaction,
+ primaryTransaction: transaction,
+ hasRetried: transaction.type === TRANSACTION_TYPE_RETRY,
+ hasCancelled: transaction.type === TRANSACTION_TYPE_CANCEL,
+ }
+
+ insertOrderedNonce(orderedNonces, nonce)
+ }
+ })
+
+ const orderedTransactionGroups = orderedNonces.map(nonce => nonceToTransactionsMap[nonce])
+ return unapprovedTransactionGroups.concat(orderedTransactionGroups)
+ }
+)
+
+/**
+ * @name nonceSortedPendingTransactionsSelector
+ * @description Returns an array of transactionGroups where transactions are still pending sorted by
+ * nonce in descending order.
+ * @returns {transactionGroup[]}
+ */
+export const nonceSortedPendingTransactionsSelector = createSelector(
+ nonceSortedTransactionsSelector,
(transactions = []) => (
- transactions.filter(transaction => transaction.status in pendingStatusHash).reverse()
+ transactions
+ .filter(({ primaryTransaction }) => primaryTransaction.status in pendingStatusHash)
+ .reverse()
+ )
+)
+
+/**
+ * @name nonceSortedCompletedTransactionsSelector
+ * @description Returns an array of transactionGroups where transactions are confirmed sorted by
+ * nonce in descending order.
+ * @returns {transactionGroup[]}
+ */
+export const nonceSortedCompletedTransactionsSelector = createSelector(
+ nonceSortedTransactionsSelector,
+ (transactions = []) => (
+ transactions.filter(({ primaryTransaction }) => {
+ return !(primaryTransaction.status in pendingStatusHash)
+ })
)
)
@@ -49,10 +264,3 @@ export const submittedPendingTransactionsSelector = createSelector(
transactions.filter(transaction => transaction.status === SUBMITTED_STATUS)
)
)
-
-export const completedTransactionsSelector = createSelector(
- transactionsSelector,
- (transactions = []) => (
- transactions.filter(transaction => !(transaction.status in pendingStatusHash))
- )
-)
diff --git a/ui/app/util.js b/ui/app/util.js
index b19a028cc..28f027e26 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -8,8 +8,8 @@ const GWEI_FACTOR = new ethUtil.BN(1e9)
const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
// formatData :: ( date: ) -> String
-function formatDate (date) {
- return vreme.format(new Date(date), '3/16/2014 at 14:30')
+function formatDate (date, format = '3/16/2014 at 14:30') {
+ return vreme.format(new Date(date), format)
}
var valueTable = {
diff --git a/ui/lib/tx-helper.js b/ui/lib/tx-helper.js
index 0a6f55a63..260dbaa39 100644
--- a/ui/lib/tx-helper.js
+++ b/ui/lib/tx-helper.js
@@ -21,7 +21,7 @@ module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, typedMes
allValues = allValues.concat(typedValues)
allValues = allValues.sort((a, b) => {
- return a.time > b.time
+ return a.time - b.time
})
return allValues
-