Group transactions by nonce (#5886)

3 files changed, 55 insertions, 24 deletions

diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
index 0ab0413be..b21e4e1bb 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -1,12 +1,13 @@
 .sender-to-recipient {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: relative;
+  flex: 0 0 auto;
+
   &--default {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
     border-bottom: 1px solid $geyser;
-    position: relative;
-    flex: 0 0 auto;
     height: 42px;
 
     .sender-to-recipient {
@@ -74,13 +75,6 @@
   }
 
   &--cards {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    position: relative;
-    flex: 0 0 auto;
-
     .sender-to-recipient {
       &__party {
         display: flex;
@@ -117,4 +111,39 @@
       }
     }
   }
+
+  &--flat {
+    .sender-to-recipient {
+      &__party {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        padding: 6px;
+        cursor: pointer;
+        min-width: 0;
+        color: $dusty-gray;
+      }
+
+      &__tooltip-wrapper {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &__name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: .6875rem;
+      }
+
+      &__arrow-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
 }
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
index e71bd7406..89a1a9c08 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -4,12 +4,13 @@ import classnames from 'classnames'
 import Identicon from '../identicon'
 import Tooltip from '../tooltip-v2'
 import copyToClipboard from 'copy-to-clipboard'
-import { DEFAULT_VARIANT, CARDS_VARIANT } from './sender-to-recipient.constants'
+import { DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT } from './sender-to-recipient.constants'
 import { checksumAddress } from '../../util'
 
 const variantHash = {
   [DEFAULT_VARIANT]: 'sender-to-recipient--default',
   [CARDS_VARIANT]: 'sender-to-recipient--cards',
+  [FLAT_VARIANT]: 'sender-to-recipient--flat',
 }
 
 export default class SenderToRecipient extends PureComponent {
@@ -19,7 +20,7 @@ export default class SenderToRecipient extends PureComponent {
     recipientName: PropTypes.string,
     recipientAddress: PropTypes.string,
     t: PropTypes.func,
-    variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT]),
+    variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT, FLAT_VARIANT]),
     addressOnly: PropTypes.bool,
     assetImage: PropTypes.string,
   }
@@ -128,16 +129,9 @@ export default class SenderToRecipient extends PureComponent {
   }
 
   renderArrow () {
-    return this.props.variant === CARDS_VARIANT
+    return this.props.variant === DEFAULT_VARIANT
       ? (
         <div className="sender-to-recipient__arrow-container">
-          <img
-            height={20}
-            src="./images/caret-right.svg"
-          />
-        </div>
-      ) : (
-        <div className="sender-to-recipient__arrow-container">
           <div className="sender-to-recipient__arrow-circle">
             <img
               height={15}
@@ -146,6 +140,13 @@ export default class SenderToRecipient extends PureComponent {
             />
           </div>
         </div>
+      ) : (
+        <div className="sender-to-recipient__arrow-container">
+          <img
+            height={20}
+            src="./images/caret-right.svg"
+          />
+        </div>
       )
   }
 
@@ -154,7 +155,7 @@ export default class SenderToRecipient extends PureComponent {
     const checksummedSenderAddress = checksumAddress(senderAddress)
 
     return (
-      <div className={classnames(variantHash[variant])}>
+      <div className={classnames('sender-to-recipient', variantHash[variant])}>
         <div
           className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
           onClick={() => {
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'