Group transactions by nonce (#5886)

3 files changed, 23 insertions, 8 deletions

diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
index 26a1f5d38..e7daafeef 100644
--- a/ui/app/components/transaction-status/index.scss
+++ b/ui/app/components/transaction-status/index.scss
@@ -1,6 +1,6 @@
 .transaction-status {
   height: 26px;
-  width: 81px;
+  width: 84px;
   border-radius: 4px;
   background-color: #f0f0f0;
   color: #5e6064;
@@ -12,22 +12,34 @@
 
   @media screen and (max-width: $break-small) {
     height: 16px;
-    width: 70px;
+    width: 72px;
     font-size: .5rem;
   }
 
   &--confirmed {
     background-color: #eafad7;
     color: #609a1c;
+
+    .transaction-status__transaction-count {
+      border: 1px solid #609a1c;
+    }
   }
 
   &--approved, &--submitted {
     background-color: #FFF2DB;
     color: #CA810A;
+
+    .transaction-status__transaction-count {
+      border: 1px solid #CA810A;
+    }
   }
 
   &--failed {
     background: lighten($monzo, 56%);
     color: $monzo;
+
+    .transaction-status__transaction-count {
+      border: 1px solid $monzo;
+    }
   }
 }
diff --git a/ui/app/components/transaction-status/tests/transaction-status.component.test.js b/ui/app/components/transaction-status/tests/transaction-status.component.test.js
index 9e3bffe4f..f4ddc9206 100644
--- a/ui/app/components/transaction-status/tests/transaction-status.component.test.js
+++ b/ui/app/components/transaction-status/tests/transaction-status.component.test.js
@@ -15,9 +15,8 @@ describe('TransactionStatus Component', () => {
     )
 
     assert.ok(wrapper)
-    const tooltipProps = wrapper.find(Tooltip).props()
-    assert.equal(tooltipProps.children, 'APPROVED')
-    assert.equal(tooltipProps.title, 'test-title')
+    assert.equal(wrapper.text(), 'APPROVED')
+    assert.equal(wrapper.find(Tooltip).props().title, 'test-title')
   })
 
   it('should render SUBMITTED properly', () => {
@@ -29,7 +28,6 @@ describe('TransactionStatus Component', () => {
     )
 
     assert.ok(wrapper)
-    const tooltipProps = wrapper.find(Tooltip).props()
-    assert.equal(tooltipProps.children, 'PENDING')
+    assert.equal(wrapper.text(), 'PENDING')
   })
 })
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
index 0d47d7868..28544d2cd 100644
--- a/ui/app/components/transaction-status/transaction-status.component.js
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -11,6 +11,7 @@ import {
   CONFIRMED_STATUS,
   FAILED_STATUS,
   DROPPED_STATUS,
+  CANCELLED_STATUS,
 } from '../../constants/transactions'
 
 const statusToClassNameHash = {
@@ -22,6 +23,7 @@ const statusToClassNameHash = {
   [CONFIRMED_STATUS]: 'transaction-status--confirmed',
   [FAILED_STATUS]: 'transaction-status--failed',
   [DROPPED_STATUS]: 'transaction-status--dropped',
+  [CANCELLED_STATUS]: 'transaction-status--failed',
 }
 
 const statusToTextHash = {
@@ -49,7 +51,10 @@ export default class TransactionStatus extends PureComponent {
 
     return (
       <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
-        <Tooltip position="top" title={title}>
+        <Tooltip
+          position="top"
+          title={title}
+        >
           { statusText }
         </Tooltip>
       </div>