4 files changed, 58 insertions, 9 deletions
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index e4eb58a2a..5f5717be3 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { ETH, GWEI } from '../../constants/common'
 
 export default class CurrencyDisplay extends PureComponent {
@@ -7,6 +8,8 @@ export default class CurrencyDisplay extends PureComponent {
     className: PropTypes.string,
     displayValue: PropTypes.string,
     prefix: PropTypes.string,
+    prefixComponent: PropTypes.node,
+    style: PropTypes.object,
     // Used in container
     currency: PropTypes.oneOf([ETH]),
     denomination: PropTypes.oneOf([GWEI]),
@@ -16,15 +19,17 @@ export default class CurrencyDisplay extends PureComponent {
   }
 
   render () {
-    const { className, displayValue, prefix } = this.props
+    const { className, displayValue, prefix, prefixComponent, style } = this.props
     const text = `${prefix || ''}${displayValue}`
 
     return (
       <div
-        className={className}
+        className={classnames('currency-display-component', className)}
+        style={style}
         title={text}
       >
-        { text }
+        { prefixComponent}
+        <span className="currency-display-component__text">{ text }</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 6644a1099..b387229b5 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -2,10 +2,26 @@ import { connect } from 'react-redux'
 import CurrencyDisplay from './currency-display.component'
 import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
 
-const mapStateToProps = (state, ownProps) => {
-  const { value, numberOfDecimals = 2, currency, denomination, hideLabel } = ownProps
+const mapStateToProps = state => {
   const { metamask: { currentCurrency, conversionRate } } = state
 
+  return {
+    currentCurrency,
+    conversionRate,
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { currentCurrency, conversionRate, ...restStateProps } = stateProps
+  const {
+    value,
+    numberOfDecimals = 2,
+    currency,
+    denomination,
+    hideLabel,
+    ...restOwnProps
+  } = ownProps
+
   const toCurrency = currency || currentCurrency
   const convertedValue = getValueFromWeiHex({
     value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
@@ -14,8 +30,11 @@ const mapStateToProps = (state, ownProps) => {
   const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
 
   return {
+    ...restStateProps,
+    ...dispatchProps,
+    ...restOwnProps,
     displayValue,
   }
 }
 
-export default connect(mapStateToProps)(CurrencyDisplay)
+export default connect(mapStateToProps, null, mergeProps)(CurrencyDisplay)
diff --git a/ui/app/components/currency-display/index.scss b/ui/app/components/currency-display/index.scss
new file mode 100644
index 000000000..8c0196102
--- /dev/null
+++ b/ui/app/components/currency-display/index.scss
@@ -0,0 +1,10 @@
+.currency-display-component {
+  display: flex;
+  align-items: center;
+
+  &__text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
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 5265bbb04..b9f98c543 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
@@ -1,12 +1,13 @@
 import assert from 'assert'
 import proxyquire from 'proxyquire'
 
-let mapStateToProps
+let mapStateToProps, mergeProps
 
 proxyquire('../currency-display.container.js', {
   'react-redux': {
-    connect: ms => {
+    connect: (ms, md, mp) => {
       mapStateToProps = ms
+      mergeProps = mp
       return () => ({})
     },
   },
@@ -22,6 +23,20 @@ describe('CurrencyDisplay container', () => {
         },
       }
 
+      assert.deepEqual(mapStateToProps(mockState), {
+        conversionRate: 280.45,
+        currentCurrency: 'usd',
+      })
+    })
+  })
+
+  describe('mergeProps()', () => {
+    it('should return the correct props', () => {
+      const mockStateProps = {
+        conversionRate: 280.45,
+        currentCurrency: 'usd',
+      }
+
       const tests = [
         {
           props: {
@@ -98,7 +113,7 @@ describe('CurrencyDisplay container', () => {
       ]
 
       tests.forEach(({ props, result }) => {
-        assert.deepEqual(mapStateToProps(mockState, props), result)
+        assert.deepEqual(mergeProps(mockStateProps, {}, { ...props }), result)
       })
     })
   })