Prevent invalid inline speed-ups (#7085)

Speeding up anything but the pending transaction with the lowest nonce
is ineffectual, as the transaction with the lowest nonce blocks the
others from completing first. The inline speed-up button in the
transaction activity log has been removed for these invalid cases.

The button will show up in the activity log for the pending transaction
with the lowest nonce, but not for the others.

Closes #6844

ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.component.test.js

@@ -51,7 +51,7 @@ describe('TransactionActivityLog Component', () => {
     assert.ok(wrapper.hasClass('test-class'))
   })
 
-  it('should render inline retry and cancel buttons', () => {
+  it('should render inline retry and cancel buttons for earliest pending transaction', () => {
     const activities = [
       {
         eventKey: 'transactionCreated',
@@ -90,6 +90,7 @@ describe('TransactionActivityLog Component', () => {
         onCancel={() => {}}
         onRetry={() => {}}
         primaryTransactionStatus="pending"
+        isEarliestNonce={true}
       />,
       { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
     )
@@ -98,4 +99,53 @@ describe('TransactionActivityLog Component', () => {
     assert.ok(wrapper.hasClass('test-class'))
     assert.equal(wrapper.find('.transaction-activity-log__action-link').length, 2)
   })
+
+  it('should not render inline retry and cancel buttons for newer pending transactions', () => {
+    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(
+      <TransactionActivityLog
+        activities={activities}
+        className="test-class"
+        inlineRetryIndex={2}
+        inlineCancelIndex={3}
+        nativeCurrency="ETH"
+        onCancel={() => {}}
+        onRetry={() => {}}
+        primaryTransactionStatus="pending"
+        isEarliestNonce={false}
+      />,
+      { 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, 0)
+  })
 })

ui/app/components/app/transaction-activity-log/transaction-activity-log.component.js

@@ -23,6 +23,7 @@ export default class TransactionActivityLog extends PureComponent {
     onCancel: PropTypes.func,
     onRetry: PropTypes.func,
     primaryTransaction: PropTypes.object,
+    isEarliestNonce: PropTypes.bool,
   }
 
   handleActivityClick = hash => {
@@ -37,11 +38,11 @@ export default class TransactionActivityLog extends PureComponent {
 
   renderInlineRetry (index, activity) {
     const { t } = this.context
-    const { inlineRetryIndex, primaryTransaction = {}, onRetry } = this.props
+    const { inlineRetryIndex, primaryTransaction = {}, onRetry, isEarliestNonce } = this.props
     const { status } = primaryTransaction
     const { id } = activity
 
-    return status !== CONFIRMED_STATUS && index === inlineRetryIndex
+    return isEarliestNonce && status !== CONFIRMED_STATUS && index === inlineRetryIndex
       ? (
         <div
           className="transaction-activity-log__action-link"
@@ -54,11 +55,11 @@ export default class TransactionActivityLog extends PureComponent {
 
   renderInlineCancel (index, activity) {
     const { t } = this.context
-    const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props
+    const { inlineCancelIndex, primaryTransaction = {}, onCancel, isEarliestNonce } = this.props
     const { status } = primaryTransaction
     const { id } = activity
 
-    return status !== CONFIRMED_STATUS && index === inlineCancelIndex
+    return isEarliestNonce && status !== CONFIRMED_STATUS && index === inlineCancelIndex
       ? (
         <div
           className="transaction-activity-log__action-link"

ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -22,6 +22,7 @@ export default class TransactionListItemDetails extends PureComponent {
     onRetry: PropTypes.func,
     showCancel: PropTypes.bool,
     showRetry: PropTypes.bool,
+    isEarliestNonce: PropTypes.bool,
     cancelDisabled: PropTypes.bool,
     transactionGroup: PropTypes.object,
     rpcPrefs: PropTypes.object,
@@ -126,6 +127,7 @@ export default class TransactionListItemDetails extends PureComponent {
       onCancel,
       onRetry,
       rpcPrefs: { blockExplorerUrl } = {},
+      isEarliestNonce,
     } = this.props
     const { primaryTransaction: transaction } = transactionGroup
     const { hash, txParams: { to, from } = {} } = transaction
@@ -209,6 +211,7 @@ export default class TransactionListItemDetails extends PureComponent {
               className="transaction-list-item-details__transaction-activity-log"
               onCancel={onCancel}
               onRetry={onRetry}
+              isEarliestNonce={isEarliestNonce}
             />
           </div>
         </div>

ui/app/components/app/transaction-list-item/transaction-list-item.component.js

@@ -25,6 +25,7 @@ export default class TransactionListItem extends PureComponent {
     showCancel: PropTypes.bool,
     hasEnoughCancelGas: PropTypes.bool,
     showRetry: PropTypes.bool,
+    isEarliestNonce: PropTypes.bool,
     showFiat: PropTypes.bool,
     token: PropTypes.object,
     tokenData: PropTypes.object,
@@ -172,6 +173,7 @@ export default class TransactionListItem extends PureComponent {
       tokenData,
       transactionGroup,
       rpcPrefs,
+      isEarliestNonce,
     } = this.props
     const { txParams = {} } = transaction
     const { showTransactionDetails } = this.state
@@ -224,6 +226,7 @@ export default class TransactionListItem extends PureComponent {
                   transactionGroup={transactionGroup}
                   onRetry={this.handleRetry}
                   showRetry={showRetry}
+                  isEarliestNonce={isEarliestNonce}
                   onCancel={this.handleCancel}
                   showCancel={showCancel}
                   cancelDisabled={!hasEnoughCancelGas}

ui/app/components/app/transaction-list/transaction-list.component.js

@@ -102,6 +102,7 @@ export default class TransactionList extends PureComponent {
           key={`${transactionGroup.nonce}:${index}`}
           showRetry={isPendingTx && this.shouldShowRetry(transactionGroup, index === 0)}
           showCancel={isPendingTx && this.shouldShowCancel(transactionGroup)}
+          isEarliestNonce={isPendingTx && index === 0}
           token={selectedToken}
           assetImages={assetImages}
         />