2 files changed, 21 insertions, 5 deletions
diff --git a/ui/app/components/token-balance/index.scss b/ui/app/components/token-balance/index.scss
new file mode 100644
index 000000000..2ff6dfbc8
--- /dev/null
+++ b/ui/app/components/token-balance/index.scss
@@ -0,0 +1,14 @@
+.token-balance-component {
+  display: flex;
+  align-items: center;
+
+  &__text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__suffix {
+    padding-left: 4px;
+  }
+}
diff --git a/ui/app/components/token-balance/token-balance.component.js b/ui/app/components/token-balance/token-balance.component.js
index 2b4f73980..af1a32578 100644
--- a/ui/app/components/token-balance/token-balance.component.js
+++ b/ui/app/components/token-balance/token-balance.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
+import CurrencyDisplay from '../currency-display'
 
 export default class TokenBalance extends PureComponent {
   static propTypes = {
@@ -12,12 +12,14 @@ export default class TokenBalance extends PureComponent {
   }
 
   render () {
-    const { className, string, withSymbol, symbol } = this.props
+    const { className, string, symbol } = this.props
 
     return (
-      <div className={classnames('hide-text-overflow', className)}>
-        { string + (withSymbol ? ` ${symbol}` : '') }
-      </div>
+      <CurrencyDisplay
+        className={className}
+        displayValue={string}
+        suffix={symbol}
+      />
     )
   }
 }