Fix account display width for large currency values

4 files changed, 28 insertions, 7 deletions

diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 5f5717be3..f39e60269 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -10,6 +10,7 @@ export default class CurrencyDisplay extends PureComponent {
     prefix: PropTypes.string,
     prefixComponent: PropTypes.node,
     style: PropTypes.object,
+    suffix: PropTypes.string,
     // Used in container
     currency: PropTypes.oneOf([ETH]),
     denomination: PropTypes.oneOf([GWEI]),
@@ -19,17 +20,25 @@ export default class CurrencyDisplay extends PureComponent {
   }
 
   render () {
-    const { className, displayValue, prefix, prefixComponent, style } = this.props
+    const { className, displayValue, prefix, prefixComponent, style, suffix } = this.props
     const text = `${prefix || ''}${displayValue}`
+    const title = `${text} ${suffix}`
 
     return (
       <div
         className={classnames('currency-display-component', className)}
         style={style}
-        title={text}
+        title={title}
       >
         { prefixComponent}
         <span className="currency-display-component__text">{ text }</span>
+        {
+          suffix && (
+            <span className="currency-display-component__suffix">
+              { suffix }
+            </span>
+          )
+        }
       </div>
     )
   }
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
index b387229b5..1b3fe74da 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -26,14 +26,15 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const convertedValue = getValueFromWeiHex({
     value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
   })
-  const formattedValue = formatCurrency(convertedValue, toCurrency)
-  const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
+  const displayValue = formatCurrency(convertedValue, toCurrency)
+  const suffix = hideLabel ? undefined : toCurrency.toUpperCase()
 
   return {
     ...restStateProps,
     ...dispatchProps,
     ...restOwnProps,
     displayValue,
+    suffix,
   }
 }
 
diff --git a/ui/app/components/currency-display/index.scss b/ui/app/components/currency-display/index.scss
index 8c0196102..313c932b8 100644
--- a/ui/app/components/currency-display/index.scss
+++ b/ui/app/components/currency-display/index.scss
@@ -7,4 +7,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  &__suffix {
+    padding-left: 4px;
+  }
 }
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js
index b9f98c543..fb6678776 100644
--- a/ui/app/components/currency-display/tests/currency-display.container.test.js
+++ b/ui/app/components/currency-display/tests/currency-display.container.test.js
@@ -45,7 +45,8 @@ describe('CurrencyDisplay container', () => {
             currency: 'usd',
           },
           result: {
-            displayValue: '$2.80 USD',
+            displayValue: '$2.80',
+            suffix: 'USD',
           },
         },
         {
@@ -53,7 +54,8 @@ describe('CurrencyDisplay container', () => {
             value: '0x2386f26fc10000',
           },
           result: {
-            displayValue: '$2.80 USD',
+            displayValue: '$2.80',
+            suffix: 'USD',
           },
         },
         {
@@ -63,7 +65,8 @@ describe('CurrencyDisplay container', () => {
             numberOfDecimals: 3,
           },
           result: {
-            displayValue: '1.266 ETH',
+            displayValue: '1.266',
+            suffix: 'ETH',
           },
         },
         {
@@ -75,6 +78,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1.266',
+            suffix: undefined,
           },
         },
         {
@@ -86,6 +90,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1',
+            suffix: undefined,
           },
         },
         {
@@ -97,6 +102,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1000000000',
+            suffix: undefined,
           },
         },
         {
@@ -108,6 +114,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1e-9',
+            suffix: undefined,
           },
         },
       ]