Fix rounding issue when sending max tokens (#5695)

* Fix rounding issue when sending max tokens

* Ensure amount row shows exact amount of max tokens on send screen (#2)

* Fix tests

* Change stored redux value from BigNumber to hex string. Fix TokenInput default value

1 files changed, 9 insertions, 6 deletions

diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js
index 4bb09a4b6..6e9a65300 100644
--- a/ui/app/components/token-currency-display/token-currency-display.component.js
+++ b/ui/app/components/token-currency-display/token-currency-display.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import CurrencyDisplay from '../currency-display/currency-display.component'
+import CurrencyDisplay from '../currency-display'
 import { getTokenData } from '../../helpers/transactions.util'
 import { getTokenValue, calcTokenAmount } from '../../token-util'
 
@@ -12,6 +12,7 @@ export default class TokenCurrencyDisplay extends PureComponent {
 
   state = {
     displayValue: '',
+    suffix: '',
   }
 
   componentDidMount () {
@@ -29,25 +30,27 @@ export default class TokenCurrencyDisplay extends PureComponent {
 
   setDisplayValue () {
     const { transactionData: data, token } = this.props
-    const { decimals = '', symbol = '' } = token
+    const { decimals = '', symbol: suffix = '' } = token
     const tokenData = getTokenData(data)
 
     let displayValue
 
     if (tokenData.params && tokenData.params.length) {
       const tokenValue = getTokenValue(tokenData.params)
-      const tokenAmount = calcTokenAmount(tokenValue, decimals)
-      displayValue = `${tokenAmount} ${symbol}`
+      displayValue = calcTokenAmount(tokenValue, decimals).toString()
     }
 
-    this.setState({ displayValue })
+    this.setState({ displayValue, suffix })
   }
 
   render () {
+    const { displayValue, suffix } = this.state
+
     return (
       <CurrencyDisplay
         {...this.props}
-        displayValue={this.state.displayValue}
+        displayValue={displayValue}
+        suffix={suffix}
       />
     )
   }