Merge branch 'master' into i3571-CompleteI18nTemplates

20 files changed, 377 insertions, 57 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 092af080b..bc7ee3d07 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1278,8 +1278,10 @@ function retryTransaction (txId) {
       if (err) {
         return dispatch(actions.displayWarning(err.message))
       }
+      const { selectedAddressTxList } = newState
+      const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1]
       dispatch(actions.updateMetamaskState(newState))
-      dispatch(actions.viewPendingTx(txId))
+      dispatch(actions.viewPendingTx(newTxId))
     })
   }
 }
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 920dfeab6..d8384c19d 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -22,12 +22,14 @@ const {
   conversionUtil,
   multiplyCurrencies,
   conversionGreaterThan,
+  conversionMax,
   subtractCurrencies,
 } = require('../../conversion-util')
 
 const {
   getGasPrice,
   getGasLimit,
+  getForceGasMin,
   conversionRateSelector,
   getSendAmount,
   getSelectedToken,
@@ -45,6 +47,7 @@ function mapStateToProps (state) {
   return {
     gasPrice: getGasPrice(state),
     gasLimit: getGasLimit(state),
+    forceGasMin: getForceGasMin(state),
     conversionRate,
     amount: getSendAmount(state),
     maxModeOn: getSendMaxModeState(state),
@@ -115,9 +118,9 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
     updateSendAmount(maxAmount)
   }
 
-  updateGasPrice(gasPrice)
-  updateGasLimit(gasLimit)
-  updateGasTotal(gasTotal)
+  updateGasPrice(ethUtil.addHexPrefix(gasPrice))
+  updateGasLimit(ethUtil.addHexPrefix(gasLimit))
+  updateGasTotal(ethUtil.addHexPrefix(gasTotal))
   hideModal()
 }
 
@@ -218,7 +221,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
 }
 
 CustomizeGasModal.prototype.render = function () {
-  const { hideModal } = this.props
+  const { hideModal, forceGasMin } = this.props
   const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
 
   let convertedGasPrice = conversionUtil(gasPrice, {
@@ -230,6 +233,22 @@ CustomizeGasModal.prototype.render = function () {
 
   convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}`
 
+  let newGasPrice = gasPrice
+  if (forceGasMin) {
+    const convertedMinPrice = conversionUtil(forceGasMin, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+    })
+    convertedGasPrice = conversionMax(
+      { value: convertedMinPrice, fromNumericBase: 'dec' },
+      { value: convertedGasPrice, fromNumericBase: 'dec' }
+    )
+    newGasPrice = conversionMax(
+      { value: gasPrice, fromNumericBase: 'hex' },
+      { value: forceGasMin, fromNumericBase: 'hex' }
+    )
+  }
+
   const convertedGasLimit = conversionUtil(gasLimit, {
     fromNumericBase: 'hex',
     toNumericBase: 'dec',
@@ -252,7 +271,7 @@ CustomizeGasModal.prototype.render = function () {
 
         h(GasModalCard, {
           value: convertedGasPrice,
-          min: MIN_GAS_PRICE_GWEI,
+          min: forceGasMin || MIN_GAS_PRICE_GWEI,
           // max: 1000,
           step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
           onChange: value => this.convertAndSetGasPrice(value),
@@ -288,7 +307,7 @@ CustomizeGasModal.prototype.render = function () {
           }, [t('cancel')]),
 
           h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, {
-            onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
+            onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
           }, [t('save')]),
         ]),
 
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 908df3671..f36def9d5 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -8,7 +8,12 @@ const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
-const { conversionUtil, addCurrencies } = require('../../conversion-util')
+const {
+  conversionUtil,
+  addCurrencies,
+  multiplyCurrencies,
+} = require('../../conversion-util')
+const GasFeeDisplay = require('../send/gas-fee-display-v2')
 const t = require('../../../i18n')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@@ -44,6 +49,7 @@ function mapDispatchToProps (dispatch) {
         to,
         value: amount,
       } = txParams
+
       dispatch(actions.updateSend({
         gasLimit,
         gasPrice,
@@ -56,6 +62,29 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.showSendPage())
     },
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+    showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
+      const { id, txParams, lastGasPrice } = txMeta
+      const { gas: txGasLimit, gasPrice: txGasPrice } = txParams
+
+      let forceGasMin
+      if (lastGasPrice) {
+        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+          multiplicandBase: 16,
+          multiplierBase: 10,
+          toNumericBase: 'hex',
+          fromDenomination: 'WEI',
+        }))
+      }
+
+      dispatch(actions.updateSend({
+        gasLimit: sendGasLimit || txGasLimit,
+        gasPrice: sendGasPrice || txGasPrice,
+        editingTransactionId: id,
+        gasTotal: sendGasTotal,
+        forceGasMin,
+      }))
+      dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
+    },
   }
 }
 
@@ -140,6 +169,7 @@ ConfirmSendEther.prototype.getGasFee = function () {
   return {
     FIAT,
     ETH,
+    gasFeeInHex: txFeeBn.toString(16),
   }
 }
 
@@ -147,7 +177,7 @@ ConfirmSendEther.prototype.getData = function () {
   const { identities } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
-  const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee()
+  const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee()
   const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount()
 
   const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, {
@@ -175,11 +205,20 @@ ConfirmSendEther.prototype.getData = function () {
     amountInETH,
     totalInFIAT,
     totalInETH,
+    gasFeeInHex,
   }
 }
 
 ConfirmSendEther.prototype.render = function () {
-  const { editTransaction, currentCurrency, clearSend } = this.props
+  const {
+    editTransaction,
+    currentCurrency,
+    clearSend,
+    conversionRate,
+    currentCurrency: convertedCurrency,
+    showCustomizeGasModal,
+    send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+  } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -193,13 +232,17 @@ ConfirmSendEther.prototype.render = function () {
       name: toName,
     },
     memo,
-    gasFeeInFIAT,
-    gasFeeInETH,
+    gasFeeInHex,
     amountInFIAT,
     totalInFIAT,
     totalInETH,
   } = this.getData()
 
+  const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm'
+  const subtitle = txMeta.lastGasPrice
+    ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
+    : 'Please review your transaction.'
+
   // This is from the latest master
   // It handles some of the errors that we are not currently handling
   // Leaving as comments fo reference
@@ -218,11 +261,11 @@ ConfirmSendEther.prototype.render = function () {
       // Main Send token Card
       h('div.page-container', [
         h('div.page-container__header', [
-          h('button.confirm-screen-back-button', {
+          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'Edit'),
-          h('div.page-container__title', 'Confirm'),
-          h('div.page-container__subtitle', `Please review your transaction.`),
+          h('div.page-container__title', title),
+          h('div.page-container__subtitle', subtitle),
         ]),
         h('.page-container__content', [
           h('div.flex-row.flex-center.confirm-screen-identicons', [
@@ -286,13 +329,15 @@ ConfirmSendEther.prototype.render = function () {
             h('section.flex-row.flex-center.confirm-screen-row', [
               h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
               h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
-
-                h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+                h(GasFeeDisplay, {
+                  gasTotal: gasTotal || gasFeeInHex,
+                  conversionRate,
+                  convertedCurrency,
+                  onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
+                }),
               ]),
             ]),
 
-
             h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
               h('div.confirm-screen-section-column', [
                 h('span.confirm-screen-label', [ t('total') + ' ' ]),
@@ -450,6 +495,27 @@ ConfirmSendEther.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
+  const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
+  const {
+    lastGasPrice,
+    txParams: {
+      gasPrice: txGasPrice,
+      gas: txGasLimit,
+    },
+  } = txData
+
+  let forceGasMin
+  if (lastGasPrice) {
+    forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+      multiplicandBase: 16,
+      multiplierBase: 10,
+      toNumericBase: 'hex',
+    }))
+  }
+
+  txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice
+  txData.txParams.gas = sendGasLimit || txGasLimit
+
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
 }
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 0a4182014..ccd87c0a4 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -9,6 +9,7 @@ const actions = require('../../actions')
 const t = require('../../../i18n')
 const clone = require('clone')
 const Identicon = require('../identicon')
+const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const {
@@ -89,6 +90,39 @@ function mapDispatchToProps (dispatch, ownProps) {
       }))
       dispatch(actions.showSendTokenPage())
     },
+    showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
+      const { id, txParams, lastGasPrice } = txMeta
+      const { gas: txGasLimit, gasPrice: txGasPrice } = txParams
+      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+      const { params = [] } = tokenData
+      const { value: to } = params[0] || {}
+      const { value: tokenAmountInDec } = params[1] || {}
+      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
+        fromNumericBase: 'dec',
+        toNumericBase: 'hex',
+      })
+    
+      let forceGasMin
+      if (lastGasPrice) {
+        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+          multiplicandBase: 16,
+          multiplierBase: 10,
+          toNumericBase: 'hex',
+          fromDenomination: 'WEI',
+        }))
+      }
+
+      dispatch(actions.updateSend({
+        gasLimit: sendGasLimit || txGasLimit,
+        gasPrice: sendGasPrice || txGasPrice,
+        editingTransactionId: id,
+        gasTotal: sendGasTotal,
+        to,
+        amount: tokenAmountInHex,
+        forceGasMin,
+      }))
+      dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
+    },
   }
 }
 
@@ -188,6 +222,7 @@ ConfirmSendToken.prototype.getGasFee = function () {
     token: tokenExchangeRate
       ? tokenGas
       : null,
+    gasFeeInHex: gasTotal.toString(16),
   }
 }
 
@@ -240,19 +275,25 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
 }
 
 ConfirmSendToken.prototype.renderGasFee = function () {
-  const { token: { symbol }, currentCurrency } = this.props
-  const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee()
+  const {
+    currentCurrency: convertedCurrency,
+    conversionRate,
+    send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+    showCustomizeGasModal,
+  } = this.props
+  const txMeta = this.gatherTxMeta()
+  const { gasFeeInHex } = this.getGasFee()
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
       h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
       h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`),
-
-        h(
-          'div.confirm-screen-row-detail',
-          tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH`
-        ),
+        h(GasFeeDisplay, {
+          gasTotal: gasTotal || gasFeeInHex,
+          conversionRate,
+          convertedCurrency,
+          onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
+        }),
       ]),
     ])
   )
@@ -308,16 +349,21 @@ ConfirmSendToken.prototype.render = function () {
 
   this.inputs = []
 
+  const title = txMeta.lastGasPrice ? 'Reprice Transaction' : t('confirm')
+  const subtitle = txMeta.lastGasPrice
+    ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
+    : t('pleaseReviewTransaction')
+
   return (
     h('div.confirm-screen-container.confirm-send-token', [
       // Main Send token Card
       h('div.page-container', [
         h('div.page-container__header', [
-          h('button.confirm-screen-back-button', {
+          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, t('edit')),
-          h('div.page-container__title', t('confirm')),
-          h('div.page-container__subtitle', t('pleaseReviewTransaction')),
+          h('div.page-container__title', title),
+          h('div.page-container__subtitle', subtitle),
         ]),
         h('.page-container__content', [
           h('div.flex-row.flex-center.confirm-screen-identicons', [
@@ -441,6 +487,27 @@ ConfirmSendToken.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
+  const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
+  const {
+    lastGasPrice,
+    txParams: {
+      gasPrice: txGasPrice,
+      gas: txGasLimit,
+    },
+  } = txData
+
+  let forceGasMin
+  if (lastGasPrice) {
+    forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+      multiplicandBase: 16,
+      multiplierBase: 10,
+      toNumericBase: 'hex',
+    }))
+  }
+
+  txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice
+  txData.txParams.gas = sendGasLimit || txGasLimit
+
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
 }
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0c6f76303..f6af13454 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -18,6 +18,7 @@ GasFeeDisplay.prototype.render = function () {
     onClick,
     primaryCurrency = 'ETH',
     convertedCurrency,
+    gasLoadingError,
   } = this.props
 
   return h('div.send-v2__gas-fee-display', [
@@ -31,13 +32,15 @@ GasFeeDisplay.prototype.render = function () {
         convertedPrefix: '$',
         readOnly: true,
       })
-      : h('div.currency-display', t('loading')),
+      : gasLoadingError
+        ? h('div..currency-display.currency-display--message', 'Set with the gas price customizer.')
+        : h('div.currency-display', t('loading')),
 
-    h('button.send-v2__sliders-icon-container', {
+    h('button.sliders-icon-container', {
       onClick,
-      disabled: !gasTotal,
+      disabled: !gasTotal && !gasLoadingError,
     }, [
-      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+      h('i.fa.fa-sliders.sliders-icon'),
     ]),
 
   ])
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 1106902b7..d1319b6dc 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -48,6 +48,7 @@ function mapStateToProps (state) {
     primaryCurrency,
     convertedCurrency: getCurrentCurrency(state),
     data,
+    selectedAddress,
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
     tokenContract: getSelectedTokenContract(state),
     unapprovedTxs: state.metamask.unapprovedTxs,
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 849d70489..5ff1820a6 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -9,19 +9,28 @@ abiDecoder.addABI(abi)
 const Identicon = require('./identicon')
 const contractMap = require('eth-contract-metadata')
 
+const actions = require('../actions')
 const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
 const { calcTokenAmount } = require('../token-util')
 
 const { getCurrentCurrency } = require('../selectors')
 const t = require('../../i18n')
 
-module.exports = connect(mapStateToProps)(TxListItem)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem)
 
 function mapStateToProps (state) {
   return {
     tokens: state.metamask.tokens,
     currentCurrency: getCurrentCurrency(state),
     tokenExchangeRates: state.metamask.tokenExchangeRates,
+    selectedAddressTxList: state.metamask.selectedAddressTxList,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)),
+    retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
   }
 }
 
@@ -32,6 +41,7 @@ function TxListItem () {
   this.state = {
     total: null,
     fiatTotal: null,
+    isTokenTx: null,
   }
 }
 
@@ -40,12 +50,13 @@ TxListItem.prototype.componentDidMount = async function () {
 
   const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
   const { name: txDataName } = decodedData || {}
+  const isTokenTx = txDataName === 'transfer'
 
-  const { total, fiatTotal } = txDataName === 'transfer'
+  const { total, fiatTotal } = isTokenTx
     ? await this.getSendTokenTotal()
     : this.getSendEtherTotal()
 
-  this.setState({ total, fiatTotal })
+  this.setState({ total, fiatTotal, isTokenTx })
 }
 
 TxListItem.prototype.getAddressText = function () {
@@ -168,22 +179,49 @@ TxListItem.prototype.getSendTokenTotal = async function () {
   }
 }
 
+TxListItem.prototype.showRetryButton = function () {
+  const {
+    transactionSubmittedTime,
+    selectedAddressTxList,
+    transactionId,
+    txParams,
+  } = this.props
+  const currentNonce = txParams.nonce
+  const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
+  const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
+  const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1]
+  const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce
+    && lastSubmittedTxWithCurrentNonce.id === transactionId
+
+  return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
+}
+
+TxListItem.prototype.setSelectedToken = function (tokenAddress) {
+  this.props.setSelectedToken(tokenAddress)
+}
+
+TxListItem.prototype.resubmit = function () {
+  const { transactionId } = this.props
+  this.props.retryTransaction(transactionId)
+}
+
 TxListItem.prototype.render = function () {
   const {
     transactionStatus,
     transactionAmount,
     onClick,
-    transActionId,
+    transactionId,
     dateString,
     address,
     className,
+    txParams,
   } = this.props
-  const { total, fiatTotal } = this.state
+  const { total, fiatTotal, isTokenTx } = this.state
   const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
 
   return h(`div${className || ''}`, {
-    key: transActionId,
-    onClick: () => onClick && onClick(transActionId),
+    key: transactionId,
+    onClick: () => onClick && onClick(transactionId),
   }, [
     h(`div.flex-column.tx-list-item-wrapper`, {}, [
 
@@ -224,6 +262,7 @@ TxListItem.prototype.render = function () {
               className: classnames('tx-list-status', {
                 'tx-list-status--rejected': transactionStatus === 'rejected',
                 'tx-list-status--failed': transactionStatus === 'failed',
+                'tx-list-status--dropped': transactionStatus === 'dropped',
               }),
             },
               transactionStatus,
@@ -241,6 +280,23 @@ TxListItem.prototype.render = function () {
 
         ]),
       ]),
+
+      this.showRetryButton() && h('div.tx-list-item-retry-container', [
+
+        h('span.tx-list-item-retry-copy', 'Taking too long?'),
+
+        h('span.tx-list-item-retry-link', {
+          onClick: (event) => {
+            event.stopPropagation()
+            if (isTokenTx) {
+              this.setSelectedToken(txParams.to)
+            }
+            this.resubmit()
+          },
+        }, 'Increase the gas price on your transaction'),
+
+      ]),
+
     ]), // holding on icon from design
   ])
 }
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index b6538347c..037c7de8c 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -75,9 +75,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     address: transaction.txParams.to,
     transactionStatus: transaction.status,
     transactionAmount: transaction.txParams.value,
-    transActionId: transaction.id,
+    transactionId: transaction.id,
     transactionHash: transaction.hash,
     transactionNetworkId: transaction.metamaskNetworkId,
+    transactionSubmittedTime: transaction.submittedTime,
   }
 
   const {
@@ -85,29 +86,31 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionStatus,
     transactionAmount,
     dateString,
-    transActionId,
+    transactionId,
     transactionHash,
     transactionNetworkId,
+    transactionSubmittedTime,
   } = props
   const { showConfTxPage } = this.props
 
   const opts = {
-    key: transActionId || transactionHash,
+    key: transactionId || transactionHash,
     txParams: transaction.txParams,
     transactionStatus,
-    transActionId,
+    transactionId,
     dateString,
     address,
     transactionAmount,
     transactionHash,
     conversionRate,
     tokenInfoGetter: this.tokenInfoGetter,
+    transactionSubmittedTime,
   }
 
   const isUnapproved = transactionStatus === 'unapproved'
 
   if (isUnapproved) {
-    opts.onClick = () => showConfTxPage({id: transActionId})
+    opts.onClick = () => showConfTxPage({id: transactionId})
     opts.transactionStatus = t('Not Started')
   } else if (transactionHash) {
     opts.onClick = () => this.view(transactionHash, transactionNetworkId)
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
index ee42ebea1..d484ed16d 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/conversion-util.js
@@ -187,6 +187,18 @@ const conversionGreaterThan = (
   return firstValue.gt(secondValue)
 }
 
+const conversionMax = (
+  { ...firstProps },
+  { ...secondProps },
+) => {
+  const firstIsGreater = conversionGreaterThan(
+    { ...firstProps },
+    { ...secondProps }
+  )
+
+  return firstIsGreater ? firstProps.value : secondProps.value
+}
+
 const conversionGTE = (
   { ...firstProps },
   { ...secondProps },
@@ -216,6 +228,7 @@ module.exports = {
   conversionGreaterThan,
   conversionGTE,
   conversionLTE,
+  conversionMax,
   toNegative,
   subtractCurrencies,
 }
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 4752741aa..c4037d862 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -87,7 +87,6 @@
     flex: 1 0 auto;
     display: flex;
     flex-flow: column nowrap;
-    padding-top: 4px;
   }
 
   &__check-mark {
@@ -115,13 +114,11 @@
     color: $white;
     font-size: 18px;
     font-weight: 300;
-    line-height: 16px;
   }
 
   &__balance {
     color: $dusty-gray;
     font-size: 14px;
-    line-height: 19px;
   }
 
   &__action {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index c32d1de5e..374cb71b6 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -10,8 +10,9 @@
 .network-component.pointer {
   border: 2px solid $silver;
   border-radius: 82px;
-  padding: 3px;
+  padding: 7px 3px;
   flex: 0 0 auto;
+  display: flex;
 
   &.ethereum-network .menu-icon-circle div {
     background-color: rgba(3, 135, 137, .7) !important;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 5cdda5e6c..777a82318 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -265,7 +265,6 @@ $wallet-view-bg: $alabaster;
 .account-name {
   font-size: 24px;
   font-weight: 300;
-  line-height: 20px;
   color: $black;
   margin-top: 8px;
   margin-bottom: .9rem;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index bb17e53cd..bdea1b008 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -660,6 +660,13 @@
 
   &__gas-fee-display {
     width: 100%;
+    position: relative;
+
+    .currency-display--message {
+      padding: 8px 38px 8px 10px;
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__sliders-icon-container {
@@ -885,3 +892,23 @@
     }
   }
 }
+
+.sliders-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  border: 1px solid $curious-blue;
+  border-radius: 4px;
+  background-color: $white;
+  position: absolute;
+  right: 15px;
+  top: 14px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.sliders-icon {
+  color: $curious-blue;
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index c3df493df..c13f24953 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -97,7 +97,7 @@
 
 .tx-list-content-wrapper {
   align-items: stretch;
-  margin-bottom: 4px;
+  margin: 4px 0;
   flex: 1 0 auto;
   width: 100%;
   display: flex;
@@ -126,6 +126,53 @@
   }
 }
 
+.tx-list-item-retry-container {
+  background: #d1edff;
+  width: 100%;
+  border-radius: 4px;
+  font-size: 0.8em;
+  display: flex;
+  justify-content: center;
+  margin-left: 44px;
+  width: calc(100% - 44px);
+
+  @media screen and (min-width: 576px) and (max-width: 679px) {
+    flex-flow: column;
+    align-items: center;
+  }
+
+  @media screen and (min-width: 380px) and (max-width: 575px) {
+    flex-flow: row;
+  }
+
+  @media screen and (max-width: 379px) {
+    flex-flow: column;
+    align-items: center;
+  }
+}
+
+.tx-list-item-retry-copy {
+  font-family: Roboto;
+}
+
+.tx-list-item-retry-link {
+  text-decoration: underline;
+  margin-left: 6px;
+  cursor: pointer;
+
+  @media screen and (min-width: 576px) and (max-width: 679px) {
+    margin-left: 0px;
+  }
+
+  @media screen and (min-width: 380px) and (max-width: 575px) {
+    margin-left: 6px;
+  }
+
+  @media screen and (max-width: 379px) {
+    margin-left: 0px;
+  }
+}
+
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
@@ -136,6 +183,7 @@
   align-self: center;
   flex: 0 0 auto;
   margin-right: 16px;
+  display: flex;
 }
 
 .tx-list-account-and-status-wrapper {
@@ -189,9 +237,14 @@
   .tx-list-status--failed {
     color: $monzo;
   }
+
+  .tx-list-status--dropped {
+    opacity: 0.5;
+  }
 }
 
 .tx-list-item {
+  height: 80px;
   border-top: 1px solid rgb(231, 231, 231);
   flex: 0 0 auto;
   display: flex;
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 1fbd9896f..1e226b93e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -13,7 +13,6 @@ body {
   font-family: Roboto, Arial;
   color: #4d4d4d;
   font-weight: 300;
-  line-height: 1.4em;
   background: #f7f7f7;
   width: 100%;
   height: 100%;
@@ -103,6 +102,7 @@ input.large-input {
     &::after {
       content: '\00D7';
       font-size: 40px;
+      line-height: 20px;
     }
   }
 
diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss
index e054d533e..a417a0453 100644
--- a/ui/app/css/itcss/generic/reset.scss
+++ b/ui/app/css/itcss/generic/reset.scss
@@ -112,10 +112,6 @@ section {
   display: block;
 }
 
-body {
-  line-height: 1;
-}
-
 ol,
 ul {
   list-style: none;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index d96c1ae43..640fd95b8 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -46,6 +46,7 @@ $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
+$onahau: #d1edff;
 $java: #29b6af;
 $wild-strawberry: #ff4a8d;
 $cornflower-blue: #7057ff;
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 4ca7d221e..e6e02d057 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -38,6 +38,7 @@ function reduceMetamask (state, action) {
       errors: {},
       maxModeOn: false,
       editingTransactionId: null,
+      forceGasMin: null,
     },
     coinOptions: {},
     useBlockie: false,
@@ -297,6 +298,7 @@ function reduceMetamask (state, action) {
           memo: '',
           errors: {},
           editingTransactionId: null,
+          forceGasMin: null,
         },
       })
 
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index 5d2635775..d37c26f7e 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -18,6 +18,7 @@ const selectors = {
   getCurrentAccountWithSendEtherInfo,
   getGasPrice,
   getGasLimit,
+  getForceGasMin,
   getAddressBook,
   getSendFrom,
   getCurrentCurrency,
@@ -130,6 +131,10 @@ function getGasLimit (state) {
   return state.metamask.send.gasLimit
 }
 
+function getForceGasMin (state) {
+  return state.metamask.send.forceGasMin
+}
+
 function getSendFrom (state) {
   return state.metamask.send.from
 }
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index dbfa6025d..31118378d 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -43,6 +43,7 @@ function SendTransactionScreen () {
       to: null,
       amount: null,
     },
+    gasLoadingError: false,
   }
 
   this.handleToChange = this.handleToChange.bind(this)
@@ -129,6 +130,10 @@ SendTransactionScreen.prototype.updateGas = function () {
       .then(([gasPrice, gas]) => {
         const newGasTotal = this.getGasTotal(gas, gasPrice)
         updateGasTotal(newGasTotal)
+        this.setState({ gasLoadingError: false })
+      })
+      .catch(err => {
+        this.setState({ gasLoadingError: true })
       })
   } else {
     const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
@@ -436,6 +441,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {
     showCustomizeGasModal,
     gasTotal,
   } = this.props
+  const { gasLoadingError } = this.state
 
   return h('div.send-v2__form-row', [
 
@@ -448,6 +454,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {
         conversionRate,
         convertedCurrency,
         onClick: showCustomizeGasModal,
+        gasLoadingError,
       }),
 
     ]),
@@ -571,9 +578,11 @@ SendTransactionScreen.prototype.getEditedTx = function () {
       data,
     })
   } else {
+    const data = unapprovedTxs[editingTransactionId].txParams.data
     Object.assign(editingTx.txParams, {
       value: ethUtil.addHexPrefix(amount),
       to: ethUtil.addHexPrefix(to),
+      data,
     })
   }