Group transactions by nonce (#5886)

3 files changed, 53 insertions, 59 deletions

diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss
index 1bb108943..b56cbdd7f 100644
--- a/ui/app/components/transaction-breakdown/index.scss
+++ b/ui/app/components/transaction-breakdown/index.scss
@@ -1,9 +1,10 @@
 @import './transaction-breakdown-row/index';
 
 .transaction-breakdown {
-  &__card {
-    background: $white;
-    height: 100%;
+  &__title {
+    border-bottom: 1px solid #d8d8d8;
+    padding-bottom: 4px;
+    text-transform: capitalize;
   }
 
   &__row-title {
diff --git a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
index d18cd420c..4512b84f0 100644
--- a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
+++ b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
@@ -2,8 +2,6 @@ import React from 'react'
 import assert from 'assert'
 import { shallow } from 'enzyme'
 import TransactionBreakdown from '../transaction-breakdown.component'
-import TransactionBreakdownRow from '../transaction-breakdown-row'
-import Card from '../../card'
 
 describe('TransactionBreakdown Component', () => {
   it('should render properly', () => {
@@ -31,7 +29,5 @@ describe('TransactionBreakdown Component', () => {
 
     assert.ok(wrapper.hasClass('transaction-breakdown'))
     assert.ok(wrapper.hasClass('test-class'))
-    assert.equal(wrapper.find(Card).length, 1)
-    assert.equal(wrapper.find(Card).find(TransactionBreakdownRow).length, 4)
   })
 })
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
index 3a7647873..141e16e17 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import TransactionBreakdownRow from './transaction-breakdown-row'
-import Card from '../card'
 import CurrencyDisplay from '../currency-display'
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
 import HexToDecimal from '../hex-to-decimal'
@@ -37,63 +36,61 @@ export default class TransactionBreakdown extends PureComponent {
 
     return (
       <div className={classnames('transaction-breakdown', className)}>
-        <Card
-          title={t('transaction')}
-          className="transaction-breakdown__card"
+        <div className="transaction-breakdown__title">
+          { t('transaction') }
+        </div>
+        <TransactionBreakdownRow title={t('amount')}>
+          <UserPreferencedCurrencyDisplay
+            className="transaction-breakdown__value"
+            type={PRIMARY}
+            value={value}
+          />
+        </TransactionBreakdownRow>
+        <TransactionBreakdownRow
+          title={`${t('gasLimit')} (${t('units')})`}
+          className="transaction-breakdown__row-title"
         >
-          <TransactionBreakdownRow title={t('amount')}>
+          <HexToDecimal
+            className="transaction-breakdown__value"
+            value={gas}
+          />
+        </TransactionBreakdownRow>
+        {
+          typeof gasUsed === 'string' && (
+            <TransactionBreakdownRow
+              title={`${t('gasUsed')} (${t('units')})`}
+              className="transaction-breakdown__row-title"
+            >
+              <HexToDecimal
+                className="transaction-breakdown__value"
+                value={gasUsed}
+              />
+            </TransactionBreakdownRow>
+          )
+        }
+        <TransactionBreakdownRow title={t('gasPrice')}>
+          <CurrencyDisplay
+            className="transaction-breakdown__value"
+            currency={nativeCurrency}
+            denomination={GWEI}
+            value={gasPrice}
+            hideLabel
+          />
+        </TransactionBreakdownRow>
+        <TransactionBreakdownRow title={t('total')}>
+          <div>
             <UserPreferencedCurrencyDisplay
-              className="transaction-breakdown__value"
+              className="transaction-breakdown__value transaction-breakdown__value--eth-total"
               type={PRIMARY}
-              value={value}
-            />
-          </TransactionBreakdownRow>
-          <TransactionBreakdownRow
-            title={`${t('gasLimit')} (${t('units')})`}
-            className="transaction-breakdown__row-title"
-          >
-            <HexToDecimal
-              className="transaction-breakdown__value"
-              value={gas}
+              value={totalInHex}
             />
-          </TransactionBreakdownRow>
-          {
-            typeof gasUsed === 'string' && (
-              <TransactionBreakdownRow
-                title={`${t('gasUsed')} (${t('units')})`}
-                className="transaction-breakdown__row-title"
-              >
-                <HexToDecimal
-                  className="transaction-breakdown__value"
-                  value={gasUsed}
-                />
-              </TransactionBreakdownRow>
-            )
-          }
-          <TransactionBreakdownRow title={t('gasPrice')}>
-            <CurrencyDisplay
+            <UserPreferencedCurrencyDisplay
               className="transaction-breakdown__value"
-              currency={nativeCurrency}
-              denomination={GWEI}
-              value={gasPrice}
-              hideLabel
+              type={SECONDARY}
+              value={totalInHex}
             />
-          </TransactionBreakdownRow>
-          <TransactionBreakdownRow title={t('total')}>
-            <div>
-              <UserPreferencedCurrencyDisplay
-                className="transaction-breakdown__value transaction-breakdown__value--eth-total"
-                type={PRIMARY}
-                value={totalInHex}
-              />
-              <UserPreferencedCurrencyDisplay
-                className="transaction-breakdown__value"
-                type={SECONDARY}
-                value={totalInHex}
-              />
-            </div>
-          </TransactionBreakdownRow>
-        </Card>
+          </div>
+        </TransactionBreakdownRow>
       </div>
     )
   }