Group transactions by nonce (#5886)

3 files changed, 59 insertions, 30 deletions

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(
       <TransactionListItemDetails
-        transaction={transaction}
+        transactionGroup={transactionGroup}
       />,
       { 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(
       <TransactionListItemDetails
-        transaction={transaction}
+        transactionGroup={transactionGroup}
         showRetry={true}
       />,
       { 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 (
       <div className="transaction-list-item-details">
         <div className="transaction-list-item-details__header">
-          <div>Details</div>
+          <div>{ t('details') }</div>
           <div className="transaction-list-item-details__header-buttons">
             {
               showRetry && (
@@ -88,23 +89,27 @@ export default class TransactionListItemDetails extends PureComponent {
             </Tooltip>
           </div>
         </div>
-        <div className="transaction-list-item-details__sender-to-recipient-container">
-          <SenderToRecipient
-            variant={CARDS_VARIANT}
-            addressOnly
-            recipientAddress={to}
-            senderAddress={from}
-          />
-        </div>
-        <div className="transaction-list-item-details__cards-container">
-          <TransactionBreakdown
-            transaction={transaction}
-            className="transaction-list-item-details__transaction-breakdown"
-          />
-          <TransactionActivityLog
-            transaction={transaction}
-            className="transaction-list-item-details__transaction-activity-log"
-          />
+        <div className="transaction-list-item-details__body">
+          <div className="transaction-list-item-details__sender-to-recipient-container">
+            <SenderToRecipient
+              variant={FLAT_VARIANT}
+              addressOnly
+              recipientAddress={to}
+              senderAddress={from}
+            />
+          </div>
+          <div className="transaction-list-item-details__cards-container">
+            <TransactionBreakdown
+              transaction={transaction}
+              className="transaction-list-item-details__transaction-breakdown"
+            />
+            <TransactionActivityLog
+              transactionGroup={transactionGroup}
+              className="transaction-list-item-details__transaction-activity-log"
+              onCancel={onCancel}
+              onRetry={onRetry}
+            />
+          </div>
         </div>
       </div>
     )