Merge branch 'develop' into TokensPerAccountBasis

10 files changed, 55 insertions, 21 deletions

diff --git a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss
index 84d0d56ed..dd6f87c17 100644
--- a/ui/app/components/confirm-page-container/confirm-detail-row/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-detail-row/index.scss
@@ -15,14 +15,21 @@
   &__details {
     flex: 1;
     text-align: end;
+    min-width: 0;
   }
 
   &__fiat {
     font-size: 1.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__eth {
     color: $oslo-gray;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__header-text {
diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js
index 93e4ae7bf..24ff05353 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container.component.js
@@ -43,7 +43,7 @@ export default class ConfirmPageContainer extends Component {
     // Footer
     onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
-    valid: PropTypes.bool,
+    disabled: PropTypes.bool,
   }
 
   render () {
@@ -54,7 +54,7 @@ export default class ConfirmPageContainer extends Component {
       fromAddress,
       toName,
       toAddress,
-      valid,
+      disabled,
       errorKey,
       errorMessage,
       contentComponent,
@@ -110,7 +110,7 @@ export default class ConfirmPageContainer extends Component {
           onSubmit={() => onSubmit()}
           submitText={this.context.t('confirm')}
           submitButtonType="confirm"
-          disabled={!valid}
+          disabled={disabled}
         />
       </div>
     )
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index 0336dbb8b..149f063a7 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -87,7 +87,6 @@ class DropdownMenuItem extends Component {
           padding: '8px 0px',
           fontSize: '18px',
           fontStyle: 'normal',
-          fontFamily: 'Montserrat Regular',
           cursor: 'pointer',
           display: 'flex',
           justifyContent: 'flex-start',
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index dcd6b4370..e5363ff56 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -71,7 +71,6 @@ NetworkDropdown.prototype.render = function () {
   const rpcList = props.frequentRpcList
   const isOpen = this.props.networkDropdownOpen
   const dropdownMenuItemStyle = {
-    fontFamily: 'DIN OT',
     fontSize: '16px',
     lineHeight: '20px',
     padding: '12px 0',
@@ -286,7 +285,6 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
           closeMenu: () => this.props.hideNetworkDropdown(),
           onClick: () => props.setRpcTarget(rpc),
           style: {
-            fontFamily: 'DIN OT',
             fontSize: '16px',
             lineHeight: '20px',
             padding: '12px 0',
@@ -325,7 +323,6 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
           onClick: () => props.setRpcTarget(rpcTarget),
           closeMenu: () => this.props.hideNetworkDropdown(),
           style: {
-            fontFamily: 'DIN OT',
             fontSize: '16px',
             lineHeight: '20px',
             padding: '12px 0',
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
index 365ae216e..acaed383a 100644
--- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -5,6 +5,7 @@ import {
   formatCurrency,
   convertTokenToFiat,
   addFiat,
+  roundExponential,
 } from '../../../helpers/confirm-transaction/util'
 
 export default class ConfirmTokenTransactionBase extends Component {
@@ -42,7 +43,8 @@ export default class ConfirmTokenTransactionBase extends Component {
       return this.context.t('noConversionRateAvailable')
     } else {
       const fiatTransactionAmount = this.getFiatTransactionAmount()
-      return formatCurrency(fiatTransactionAmount, currentCurrency)
+      const roundedFiatTransactionAmount = roundExponential(fiatTransactionAmount)
+      return formatCurrency(roundedFiatTransactionAmount, currentCurrency)
     }
   }
 
@@ -54,7 +56,8 @@ export default class ConfirmTokenTransactionBase extends Component {
     } else {
       const fiatTransactionAmount = this.getFiatTransactionAmount()
       const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
-      return formatCurrency(fiatTotal, currentCurrency)
+      const roundedFiatTotal = roundExponential(fiatTotal)
+      return formatCurrency(roundedFiatTotal, currentCurrency)
     }
   }
 
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index e1bf2210f..b170880b4 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -71,6 +71,10 @@ export default class ConfirmTransactionBase extends Component {
     warning: PropTypes.string,
   }
 
+  state = {
+    submitting: false,
+  }
+
   componentDidUpdate () {
     const {
       transactionStatus,
@@ -258,15 +262,25 @@ export default class ConfirmTransactionBase extends Component {
 
   handleSubmit () {
     const { sendTransaction, clearConfirmTransaction, txData, history, onSubmit } = this.props
+    const { submitting } = this.state
+
+    if (submitting) {
+      return
+    }
+
+    this.setState({ submitting: true })
 
     if (onSubmit) {
-      onSubmit(txData)
+      Promise.resolve(onSubmit(txData))
+        .then(this.setState({ submitting: false }))
     } else {
       sendTransaction(txData)
         .then(() => {
           clearConfirmTransaction()
+          this.setState({ submitting: false })
           history.push(DEFAULT_ROUTE)
         })
+        .catch(() => this.setState({ submitting: false }))
     }
   }
 
@@ -280,7 +294,7 @@ export default class ConfirmTransactionBase extends Component {
       methodData,
       ethTransactionAmount,
       fiatTransactionAmount,
-      valid: propsValid,
+      valid: propsValid = true,
       errorMessage,
       errorKey: propsErrorKey,
       currentCurrency,
@@ -295,6 +309,7 @@ export default class ConfirmTransactionBase extends Component {
       nonce,
       warning,
     } = this.props
+    const { submitting } = this.state
 
     const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
@@ -320,7 +335,7 @@ export default class ConfirmTransactionBase extends Component {
         errorMessage={errorMessage}
         errorKey={propsErrorKey || errorKey}
         warning={warning}
-        valid={propsValid || valid}
+        disabled={!propsValid || !valid || submitting}
         onEdit={() => this.handleEdit()}
         onCancel={() => this.handleCancel()}
         onSubmit={() => this.handleSubmit()}
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 1a639d0b9..7513ba267 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -213,7 +213,7 @@ TxListItem.prototype.showRetryButton = function () {
   if (!txParams) {
     return false
   }
-  let currentTxIsLatest = false
+  let currentTxSharesEarliestNonce = false
   const currentNonce = txParams.nonce
   const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
   const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
@@ -222,14 +222,14 @@ TxListItem.prototype.showRetryButton = function () {
   const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce &&
     lastSubmittedTxWithCurrentNonce.id === transactionId
   if (currentSubmittedTxs.length > 0) {
-    const lastTx = currentSubmittedTxs.reduce((tx1, tx2) => {
+    const earliestSubmitted = currentSubmittedTxs.reduce((tx1, tx2) => {
       if (tx1.submittedTime < tx2.submittedTime) return tx1
       return tx2
     })
-    currentTxIsLatest = lastTx.id === transactionId
+    currentTxSharesEarliestNonce = currentNonce === earliestSubmitted.txParams.nonce
   }
 
-  return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 && currentTxIsLatest
+  return currentTxSharesEarliestNonce && currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
 }
 
 TxListItem.prototype.setSelectedToken = function (tokenAddress) {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 545a2a940..b23876d01 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -76,7 +76,6 @@
 }
 
 .network-name-item {
-  font-weight: 100;
   flex: 1;
   color: $dusty-gray;
   text-overflow: ellipsis;
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index f015b2bf5..a37778c19 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -3,6 +3,7 @@ import currencies from 'currency-formatter/currencies'
 import abi from 'human-standard-token-abi'
 import abiDecoder from 'abi-decoder'
 import ethUtil from 'ethereumjs-util'
+import BigNumber from 'bignumber.js'
 
 abiDecoder.addABI(abi)
 
@@ -137,3 +138,11 @@ export function convertTokenToFiat ({
 export function hasUnconfirmedTransactions (state) {
   return unconfirmedTransactionsCountSelector(state) > 0
 }
+
+export function roundExponential (value) {
+  const PRECISION = 4
+  const bigNumberValue = new BigNumber(value)
+
+  // In JS, numbers with exponentials greater than 20 get displayed as an exponential.
+  return bigNumberValue.e > 20 ? Number(bigNumberValue.toPrecision(PRECISION)) : value
+}
diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js
index 8f8e0ea74..9548cf75e 100644
--- a/ui/app/selectors/confirm-transaction.js
+++ b/ui/app/selectors/confirm-transaction.js
@@ -1,6 +1,7 @@
 import { createSelector } from 'reselect'
 import txHelper from '../../lib/tx-helper'
 import { calcTokenAmount } from '../token-util'
+import { roundExponential } from '../helpers/confirm-transaction/util'
 
 const unapprovedTxsSelector = state => state.metamask.unapprovedTxs
 const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs
@@ -133,7 +134,8 @@ export const tokenAmountAndToAddressSelector = createSelector(
       const toParam = params.find(param => param.name === TOKEN_PARAM_TO)
       const valueParam = params.find(param => param.name === TOKEN_PARAM_VALUE)
       toAddress = toParam ? toParam.value : params[0].value
-      tokenAmount = valueParam ? Number(valueParam.value) : Number(params[1].value)
+      const value = valueParam ? Number(valueParam.value) : Number(params[1].value)
+      tokenAmount = roundExponential(value)
     }
 
     return {
@@ -151,7 +153,8 @@ export const approveTokenAmountAndToAddressSelector = createSelector(
 
     if (params && params.length) {
       toAddress = params.find(param => param.name === TOKEN_PARAM_SPENDER).value
-      tokenAmount = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value)
+      const value = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value)
+      tokenAmount = roundExponential(value)
     }
 
     return {
@@ -170,11 +173,13 @@ export const sendTokenTokenAmountAndToAddressSelector = createSelector(
 
     if (params && params.length) {
       toAddress = params.find(param => param.name === TOKEN_PARAM_TO).value
-      tokenAmount = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value)
+      let value = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value)
 
       if (tokenDecimals) {
-        tokenAmount = calcTokenAmount(tokenAmount, tokenDecimals)
+        value = calcTokenAmount(value, tokenDecimals)
       }
+
+      tokenAmount = roundExponential(value)
     }
 
     return {