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

35 files changed, 133 insertions, 99 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 501fef76d..e3cf57c9e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -995,7 +995,7 @@ function updateSendTokenBalance ({
       .then(usersToken => {
         if (usersToken) {
           const newTokenBalance = calcTokenBalance({ selectedToken, usersToken })
-          dispatch(setSendTokenBalance(newTokenBalance.toString(10)))
+          dispatch(setSendTokenBalance(newTokenBalance))
         }
       })
       .catch(err => {
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
index 6ddf07172..e581f8a5e 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -20,15 +20,24 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     currency,
     denomination,
     hideLabel,
+    displayValue: propsDisplayValue,
+    suffix: propsSuffix,
     ...restOwnProps
   } = ownProps
 
   const toCurrency = currency || currentCurrency
-  const convertedValue = getValueFromWeiHex({
-    value, fromCurrency: nativeCurrency, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
-  })
-  const displayValue = formatCurrency(convertedValue, toCurrency)
-  const suffix = hideLabel ? undefined : toCurrency.toUpperCase()
+
+  const displayValue = propsDisplayValue || formatCurrency(
+    getValueFromWeiHex({
+      value,
+      fromCurrency: nativeCurrency,
+      toCurrency, conversionRate,
+      numberOfDecimals,
+      toDenomination: denomination,
+    }),
+    toCurrency
+  )
+  const suffix = propsSuffix || (hideLabel ? undefined : toCurrency.toUpperCase())
 
   return {
     ...restStateProps,
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 0c886af50..9888c366e 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
@@ -131,7 +131,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             nativeCurrency: 'ETH',
-            displayValue: '1e-9',
+            displayValue: '0.000000001',
             suffix: undefined,
           },
         },
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index e27b0f182..f901aed7d 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -40,6 +40,8 @@
 
 @import './tabs/index';
 
+@import './token-balance/index';
+
 @import './transaction-activity-log/index';
 
 @import './transaction-breakdown/index';
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index ceb620941..80518977e 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -11,11 +11,11 @@ export default class AmountMaxButton extends Component {
     setAmountToMax: PropTypes.func,
     setMaxModeTo: PropTypes.func,
     tokenBalance: PropTypes.string,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   setMaxAmount () {
     const {
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
index b490a7fd7..27181d2f5 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
@@ -5,16 +5,23 @@ const {
 const ethUtil = require('ethereumjs-util')
 
 function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
-    const { decimals } = selectedToken || {}
-    const multiplier = Math.pow(10, Number(decimals || 0))
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
 
-    return selectedToken
-      ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'})
-      : subtractCurrencies(
-        ethUtil.addHexPrefix(balance),
-        ethUtil.addHexPrefix(gasTotal),
-        { toNumericBase: 'hex' }
-      )
+  return selectedToken
+    ? multiplyCurrencies(
+      tokenBalance,
+      multiplier,
+      {
+        toNumericBase: 'hex',
+        multiplicandBase: 16,
+      }
+    )
+    : subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
 }
 
 module.exports = {
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
index 816df6a12..1ee858f67 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
@@ -19,7 +19,7 @@ describe('amount-max-button utils', () => {
         selectedToken: {
           decimals: 10,
         },
-        tokenBalance: 100,
+        tokenBalance: '64',
       }), 'e8d4a51000')
     })
   })
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
index 0268376bf..4df1e0ffa 100644
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
+++ b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js
@@ -26,11 +26,11 @@ export default class SendAmountRow extends Component {
     updateSendAmount: PropTypes.func,
     updateSendAmountError: PropTypes.func,
     updateGas: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   validateAmount (amount) {
     const {
@@ -58,7 +58,6 @@ export default class SendAmountRow extends Component {
 
     if (selectedToken) {
       updateGasFeeError({
-        amount,
         amountConversionRate,
         balance,
         conversionRate,
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
index 3504d1b73..2b6fe0f6c 100644
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
+++ b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
@@ -45,10 +45,10 @@ function mapDispatchToProps (dispatch) {
     setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
     updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
     updateGasFeeError: (amountDataObject) => {
-        dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
+      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
     },
     updateSendAmountError: (amountDataObject) => {
-        dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
+      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
     },
   }
 }
diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
index 56e80cb83..14a71129f 100644
--- a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -82,7 +82,6 @@ describe('SendAmountRow Component', function () {
       assert.deepEqual(
         propsMethodSpies.updateGasFeeError.getCall(0).args,
         [{
-          amount: 'someAmount',
           amountConversionRate: 'mockAmountConversionRate',
           balance: 'mockBalance',
           conversionRate: 7,
diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
index 4f43a9d61..d512f7d0b 100644
--- a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
+++ b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
@@ -12,11 +12,11 @@ export default class FromDropdown extends Component {
     onSelect: PropTypes.func,
     openDropdown: PropTypes.func,
     selectedAccount: PropTypes.object,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   render () {
     const {
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
index 3e0e0de22..b6de9d222 100644
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
+++ b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
@@ -15,11 +15,11 @@ export default class SendFromRow extends Component {
     tokenContract: PropTypes.object,
     updateSendFrom: PropTypes.func,
     setSendTokenBalance: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   async handleFromChange (newFrom) {
     const {
@@ -32,6 +32,7 @@ export default class SendFromRow extends Component {
       const usersToken = await tokenContract.balanceOf(newFrom.address)
       setSendTokenBalance(usersToken)
     }
+
     updateSendFrom(newFrom)
   }
 
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
index 33cb63b43..7008bbea4 100644
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
+++ b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
@@ -10,8 +10,8 @@ import {
 } from './send-from-row.selectors.js'
 import { calcTokenBalance } from '../../send.utils.js'
 import {
-    updateSendFrom,
-    setSendTokenBalance,
+  updateSendFrom,
+  setSendTokenBalance,
 } from '../../../../actions'
 import {
     closeFromDropdown,
@@ -37,10 +37,10 @@ function mapDispatchToProps (dispatch) {
     openFromDropdown: () => dispatch(openFromDropdown()),
     updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)),
     setSendTokenBalance: (usersToken, selectedToken) => {
-        if (!usersToken) return
+      if (!usersToken) return
 
-        const tokenBalance = calcTokenBalance({ usersToken, selectedToken })
-        dispatch(setSendTokenBalance(tokenBalance))
+      const tokenBalance = calcTokenBalance({ usersToken, selectedToken })
+      dispatch(setSendTokenBalance(tokenBalance))
     },
   }
 }
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
index 91b58cfd0..6ad4499ff 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
@@ -12,11 +12,11 @@ export default class SendGasRow extends Component {
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
     showCustomizeGasModal: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   render () {
     const {
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
index 8f8e3e4dd..e44fe4ef1 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux'
 import {
-    getConversionRate,
-    getCurrentCurrency,
-    getGasTotal,
+  getConversionRate,
+  getCurrentCurrency,
+  getGasTotal,
 } from '../../send.selectors.js'
 import { getGasLoadingError, gasFeeIsInError } from './send-gas-row.selectors.js'
 import { showModal } from '../../../../actions'
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 17c75c817..ce5325314 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -19,11 +19,11 @@ export default class SendToRow extends Component {
     updateSendTo: PropTypes.func,
     updateSendToError: PropTypes.func,
     scanQrCode: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   handleToChange (to, nickname = '', toError) {
     const { hasHexData, updateSendTo, updateSendToError, updateGas } = this.props
diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js
index 230bf450f..b78b56373 100644
--- a/ui/app/components/send/send-footer/send-footer.component.js
+++ b/ui/app/components/send/send-footer/send-footer.component.js
@@ -26,11 +26,11 @@ export default class SendFooter extends Component {
     tokenBalance: PropTypes.string,
     unapprovedTxs: PropTypes.object,
     update: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   onCancel () {
     this.props.clearSend()
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index fb7beca16..a27401f30 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -41,11 +41,11 @@ export default class SendTransactionScreen extends PersistentForm {
     scanQrCode: PropTypes.func,
     qrCodeDetected: PropTypes.func,
     qrCodeData: PropTypes.object,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.qrCodeData) {
@@ -138,14 +138,12 @@ export default class SendTransactionScreen extends PersistentForm {
       })
       const gasFeeErrorObject = selectedToken
         ? getGasFeeErrorObject({
-          amount,
           amountConversionRate,
           balance,
           conversionRate,
           gasTotal,
           primaryCurrency,
           selectedToken,
-          tokenBalance,
         })
         : { gasFee: null }
       updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject))
diff --git a/ui/app/components/send/send.utils.js b/ui/app/components/send/send.utils.js
index eb1667c63..b2ac41e9c 100644
--- a/ui/app/components/send/send.utils.js
+++ b/ui/app/components/send/send.utils.js
@@ -89,11 +89,10 @@ function isTokenBalanceSufficient ({
   const tokenBalanceIsSufficient = conversionGTE(
     {
       value: tokenBalance,
-      fromNumericBase: 'dec',
+      fromNumericBase: 'hex',
     },
     {
       value: calcTokenAmount(amountInDec, decimals),
-      fromNumericBase: 'dec',
     },
   )
 
@@ -151,7 +150,6 @@ function getAmountErrorObject ({
 }
 
 function getGasFeeErrorObject ({
-  amount,
   amountConversionRate,
   balance,
   conversionRate,
@@ -180,7 +178,7 @@ function getGasFeeErrorObject ({
 
 function calcTokenBalance ({ selectedToken, usersToken }) {
   const { decimals } = selectedToken || {}
-  return calcTokenAmount(usersToken.balance.toString(), decimals) + ''
+  return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16)
 }
 
 function doesAmountErrorRequireUpdate ({
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index f4943e707..bd136a0b8 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -158,14 +158,12 @@ describe('Send Component', function () {
       assert.deepEqual(
         utilsMethodStubs.getGasFeeErrorObject.getCall(0).args[0],
         {
-          amount: 'mockAmount',
           amountConversionRate: 'mockAmountConversionRate',
           balance: 'mockBalance',
           conversionRate: 10,
           gasTotal: 'mockGasTotal',
           primaryCurrency: 'mockPrimaryCurrency',
           selectedToken: 'mockSelectedToken',
-          tokenBalance: 'mockTokenBalance',
         }
       )
     })
diff --git a/ui/app/components/send/tests/send-utils.test.js b/ui/app/components/send/tests/send-utils.test.js
index b72d87eee..f31e1221b 100644
--- a/ui/app/components/send/tests/send-utils.test.js
+++ b/ui/app/components/send/tests/send-utils.test.js
@@ -285,11 +285,10 @@ describe('send utils', () => {
         [
           {
             value: 123,
-            fromNumericBase: 'dec',
+            fromNumericBase: 'hex',
           },
           {
             value: 'calc:1610',
-            fromNumericBase: 'dec',
           },
         ]
       )
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}
+      />
     )
   }
 }
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}
       />
     )
   }
diff --git a/ui/app/components/token-input/token-input.component.js b/ui/app/components/token-input/token-input.component.js
index d1388945b..10fa1151e 100644
--- a/ui/app/components/token-input/token-input.component.js
+++ b/ui/app/components/token-input/token-input.component.js
@@ -32,7 +32,7 @@ export default class TokenInput extends PureComponent {
     super(props)
 
     const { value: hexValue } = props
-    const decimalValue = hexValue ? this.getDecimalValue(props) : 0
+    const decimalValue = hexValue ? this.getValue(props) : 0
 
     this.state = {
       decimalValue,
@@ -46,12 +46,12 @@ export default class TokenInput extends PureComponent {
     const { hexValue: stateHexValue } = this.state
 
     if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
-      const decimalValue = this.getDecimalValue(this.props)
+      const decimalValue = this.getValue(this.props)
       this.setState({ hexValue: propsHexValue, decimalValue })
     }
   }
 
-  getDecimalValue (props) {
+  getValue (props) {
     const { value: hexValue, selectedToken: { decimals, symbol } = {} } = props
 
     const multiplier = Math.pow(10, Number(decimals || 0))
@@ -63,7 +63,7 @@ export default class TokenInput extends PureComponent {
       invertConversionRate: true,
     })
 
-    return Number(decimalValueString) || 0
+    return Number(decimalValueString) ? decimalValueString : ''
   }
 
   handleChange = decimalValue => {
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index ac0e7beeb..449974734 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -80,6 +80,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
 
     &--primary {
       text-align: end;
diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
index 659f896ff..43e87459b 100644
--- a/ui/app/components/transaction-view-balance/index.scss
+++ b/ui/app/components/transaction-view-balance/index.scss
@@ -6,6 +6,12 @@
   height: 54px;
   min-width: 0;
 
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    height: initial;
+    width: 100%;
+  }
+
   &__balance {
     margin: 0 12px;
     display: flex;
@@ -15,17 +21,8 @@
     @media screen and (max-width: $break-small) {
       align-items: center;
       margin: 16px 0;
-    }
-  }
-
-  &__token-balance {
-    margin-left: 12px;
-    font-size: 1.5rem;
-
-    @media screen and (max-width: $break-small) {
-      margin: 12px 0;
-      margin-left: 0;
-      font-size: 1.75rem;
+      padding: 0 16px;
+      max-width: 100%;
     }
   }
 
@@ -34,6 +31,7 @@
 
     @media screen and (max-width: $break-small) {
       font-size: 1.75rem;
+      width: 100%;
     }
   }
 
@@ -51,6 +49,7 @@
 
     @media screen and (max-width: $break-small) {
       flex-direction: column;
+      width: 100%;
     }
   }
 
@@ -71,9 +70,4 @@
       margin-right: 12px;
     }
   }
-
-  @media screen and (max-width: $break-small) {
-    flex-direction: column;
-    height: initial
-  }
 }
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
index 402b0f486..a24b97478 100644
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
@@ -26,11 +26,13 @@ export default class TransactionViewBalance extends PureComponent {
 
     return selectedToken
       ? (
-        <TokenBalance
-          token={selectedToken}
-          withSymbol
-          className="transaction-view-balance__token-balance"
-        />
+        <div className="transaction-view-balance__balance">
+          <TokenBalance
+            token={selectedToken}
+            withSymbol
+            className="transaction-view-balance__primary-balance"
+          />
+        </div>
       ) : (
         <div className="transaction-view-balance__balance">
           <UserPreferencedCurrencyDisplay
diff --git a/ui/app/components/unit-input/index.scss b/ui/app/components/unit-input/index.scss
index 28c5bf6f0..7995696aa 100644
--- a/ui/app/components/unit-input/index.scss
+++ b/ui/app/components/unit-input/index.scss
@@ -38,6 +38,10 @@
     align-items: center;
   }
 
+  &__suffix {
+    margin-left: 3px;
+  }
+
   &--error {
     border-color: $red;
   }
diff --git a/ui/app/components/unit-input/unit-input.component.js b/ui/app/components/unit-input/unit-input.component.js
index f1ebf4d77..0c6b21797 100644
--- a/ui/app/components/unit-input/unit-input.component.js
+++ b/ui/app/components/unit-input/unit-input.component.js
@@ -66,7 +66,7 @@ export default class UnitInput extends PureComponent {
     const valueString = String(value)
     const valueLength = valueString.length || 1
     const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0
-    return (valueLength + decimalPointDeficit + 0.75) + 'ch'
+    return (valueLength + decimalPointDeficit + 0.5) + 'ch'
   }
 
   render () {
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
index f271b5683..8cc531773 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/conversion-util.js
@@ -62,7 +62,7 @@ const toSpecifiedDenomination = {
 }
 const baseChange = {
   hex: n => n.toString(16),
-  dec: n => Number(n).toString(10),
+  dec: n => (new BigNumber(n)).toString(10),
   BN: n => new BN(n.toString(16)),
 }
 
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index a57653b45..c791a24c7 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -552,6 +552,7 @@
 
   &__form-field {
     flex: 1 1 auto;
+    min-width: 0;
 
     .currency-display {
       color: $tundora;
@@ -580,6 +581,7 @@
     line-height: 22px;
     width: 88px;
     font-weight: 400;
+    flex: 0 0 auto;
   }
 
   &__from-dropdown {
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index dfa2f3656..302d1627a 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -33,7 +33,7 @@ function reduceMetamask (state, action) {
       gasLimit: null,
       gasPrice: null,
       gasTotal: null,
-      tokenBalance: null,
+      tokenBalance: '0x0',
       from: '',
       to: '',
       amount: '0x0',
diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js
index 90924c036..23ef26d95 100644
--- a/ui/app/selectors/confirm-transaction.js
+++ b/ui/app/selectors/confirm-transaction.js
@@ -137,11 +137,12 @@ export const tokenAmountAndToAddressSelector = createSelector(
       const valueParam = params.find(param => param.name === TOKEN_PARAM_VALUE)
       toAddress = toParam ? toParam.value : params[0].value
       const value = valueParam ? Number(valueParam.value) : Number(params[1].value)
-      tokenAmount = roundExponential(value)
 
       if (tokenDecimals) {
-        tokenAmount = calcTokenAmount(value, tokenDecimals)
+        tokenAmount = calcTokenAmount(value, tokenDecimals).toNumber()
       }
+
+      tokenAmount = roundExponential(tokenAmount)
     }
 
     return {
@@ -163,7 +164,7 @@ export const approveTokenAmountAndToAddressSelector = createSelector(
       const value = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value)
 
       if (tokenDecimals) {
-        tokenAmount = calcTokenAmount(value, tokenDecimals)
+        tokenAmount = calcTokenAmount(value, tokenDecimals).toNumber()
       }
 
       tokenAmount = roundExponential(tokenAmount)
@@ -188,7 +189,7 @@ export const sendTokenTokenAmountAndToAddressSelector = createSelector(
       let value = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value)
 
       if (tokenDecimals) {
-        value = calcTokenAmount(value, tokenDecimals)
+        value = calcTokenAmount(value, tokenDecimals).toNumber()
       }
 
       tokenAmount = roundExponential(value)
diff --git a/ui/app/token-util.js b/ui/app/token-util.js
index 6e4992763..35a19a69f 100644
--- a/ui/app/token-util.js
+++ b/ui/app/token-util.js
@@ -109,7 +109,7 @@ export function tokenInfoGetter () {
 
 export function calcTokenAmount (value, decimals) {
   const multiplier = Math.pow(10, Number(decimals || 0))
-  return new BigNumber(String(value)).div(multiplier).toNumber()
+  return new BigNumber(String(value)).div(multiplier)
 }
 
 export function getTokenValue (tokenParams = []) {