Merge pull request #2799 from MetaMask/NewUI-flat

Update UAT to version 4.0.5

17 files changed, 314 insertions, 141 deletions

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index a9f075ec7..286a3b587 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -28,27 +28,33 @@ function mapDispatchToProps (dispatch) {
     toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
     showAccountDetail: address => {
       dispatch(actions.showAccountDetail(address))
+      dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
     lockMetamask: () => {
       dispatch(actions.lockMetamask())
       dispatch(actions.displayWarning(null))
+      dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
+      dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
     showNewAccountModal: () => {
       dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
+      dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
     showImportPage: () => {
       dispatch(actions.showImportPage())
+      dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
     showInfoPage: () => {
       dispatch(actions.showInfoPage())
+      dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
   }
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index d14aa675f..50007ce14 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -94,7 +94,8 @@ BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
 }
 
 BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix, fiatPrefix) {
-  if (fiatDisplayNumber === 'N/A') return null
+  const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0
+  if (shouldNotRenderFiat) return null
 
   return h('div.fiat-amount', {
     style: {},
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index f44d86045..f70208625 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -40,7 +40,7 @@ CoinbaseForm.prototype.render = function () {
       }, 'Continue to Coinbase'),
 
       h('button.btn-red', {
-        onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
+        onClick: () => props.dispatch(actions.goHome()),
       }, 'Cancel'),
     ]),
   ])
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 485dacf90..826d2cd4b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -5,6 +5,8 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
 
+const ethUtil = require('ethereumjs-util')
+
 const {
   MIN_GAS_PRICE_DEC,
   MIN_GAS_LIMIT_DEC,
@@ -19,6 +21,7 @@ const {
   conversionUtil,
   multiplyCurrencies,
   conversionGreaterThan,
+  subtractCurrencies,
 } = require('../../conversion-util')
 
 const {
@@ -30,6 +33,7 @@ const {
   getSendFrom,
   getCurrentAccountWithSendEtherInfo,
   getSelectedTokenToFiatRate,
+  getSendMaxModeState,
 } = require('../../selectors')
 
 function mapStateToProps (state) {
@@ -42,6 +46,7 @@ function mapStateToProps (state) {
     gasLimit: getGasLimit(state),
     conversionRate,
     amount: getSendAmount(state),
+    maxModeOn: getSendMaxModeState(state),
     balance: currentAccount.balance,
     primaryCurrency: selectedToken && selectedToken.symbol,
     selectedToken,
@@ -55,6 +60,7 @@ function mapDispatchToProps (dispatch) {
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
   }
 }
 
@@ -93,8 +99,21 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
     updateGasLimit,
     hideModal,
     updateGasTotal,
+    maxModeOn,
+    selectedToken,
+    balance,
+    updateSendAmount,
   } = this.props
 
+  if (maxModeOn && !selectedToken) {
+    const maxAmount = subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+    updateSendAmount(maxAmount)
+  }
+
   updateGasPrice(gasPrice)
   updateGasLimit(gasLimit)
   updateGasTotal(gasTotal)
@@ -112,12 +131,13 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
     selectedToken,
     amountConversionRate,
     conversionRate,
+    maxModeOn,
   } = this.props
 
   let error = null
 
   const balanceIsSufficient = isBalanceSufficient({
-    amount: selectedToken ? '0' : amount,
+    amount: selectedToken || maxModeOn ? '0' : amount,
     gasTotal,
     balance,
     selectedToken,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0908faf01..dfaa6b22c 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -6,6 +6,16 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+  'menu-icon',
+  'network-name',
+  'network-indicator',
+  'network-caret',
+  'network-component',
+]
 
 function mapStateToProps (state) {
   return {
@@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) {
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
     },
-    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
-    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
 }
 
@@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () {
   }
 
   return h(Dropdown, {
-    useCssTransition: true,
     isOpen,
     onClickOutside: (event) => {
       const { classList } = event.target
-      const isNotToggleElement = [
-        classList.contains('menu-icon'),
-        classList.contains('network-name'),
-        classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0
-      // classes from three constituent nodes of the toggle element
-
-      if (isNotToggleElement) {
+      const isInClassList = className => classList.contains(className)
+      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+
+      if (notToggleElementIndex === -1) {
         this.props.hideNetworkDropdown()
       }
     },
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index d30b7cd56..b803b7ceb 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -1,13 +1,15 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
 const iconFactoryGen = require('../../lib/icon-factory')
 const iconFactory = iconFactoryGen(jazzicon)
+const { toDataUrl } = require('../../lib/blockies')
 
-module.exports = IdenticonComponent
+module.exports = connect(mapStateToProps)(IdenticonComponent)
 
 inherits(IdenticonComponent, Component)
 function IdenticonComponent () {
@@ -16,6 +18,12 @@ function IdenticonComponent () {
   this.defaultDiameter = 46
 }
 
+function mapStateToProps (state) {
+  return {
+    useBlockie: state.metamask.useBlockie,
+  }
+}
+
 IdenticonComponent.prototype.render = function () {
   var props = this.props
   const { className = '', address } = props
@@ -51,38 +59,59 @@ IdenticonComponent.prototype.render = function () {
 
 IdenticonComponent.prototype.componentDidMount = function () {
   var props = this.props
-  const { address } = props
+  const { address, useBlockie } = props
 
   if (!address) return
 
-  // eslint-disable-next-line react/no-find-dom-node
-  var container = findDOMNode(this)
-
-  var diameter = props.diameter || this.defaultDiameter
   if (!isNode) {
-    var img = iconFactory.iconForAddress(address, diameter)
-    container.appendChild(img)
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
   }
 }
 
 IdenticonComponent.prototype.componentDidUpdate = function () {
   var props = this.props
-  const { address } = props
+  const { address, useBlockie } = props
 
   if (!address) return
 
-  // eslint-disable-next-line react/no-find-dom-node
-  var container = findDOMNode(this)
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
 
-  var children = container.children
-  for (var i = 0; i < children.length; i++) {
-    container.removeChild(children[i])
-  }
+    var children = container.children
+    for (var i = 0; i < children.length; i++) {
+      container.removeChild(children[i])
+    }
 
-  var diameter = props.diameter || this.defaultDiameter
-  if (!isNode) {
-    var img = iconFactory.iconForAddress(address, diameter)
-    container.appendChild(img)
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
   }
 }
 
+function _generateBlockie (container, address, diameter) {
+  const img = new Image()
+  img.src = toDataUrl(address)
+  const dia = !diameter || diameter < 50 ? 50 : diameter
+  img.height = dia * 1.25
+  img.width = dia * 1.25
+  container.appendChild(img)
+}
+
+function _generateJazzicon (container, address, diameter) {
+  const img = iconFactory.iconForAddress(address, diameter)
+  container.appendChild(img)
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index f2909f3c3..2ff6accaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal')
 const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
+const NotifcationModal = require('./notification-modal')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -133,6 +134,42 @@ const MODALS = {
     },
   },
 
+  BETA_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Welcome to the New UI (Beta)',
+        message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens,
+        and let us know if you have any issues.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  OLD_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Old UI',
+        message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
+        right dropdown menu.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
new file mode 100644
index 000000000..239144b0c
--- /dev/null
+++ b/ui/app/components/modals/notification-modal.js
@@ -0,0 +1,51 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NotificationModal extends Component {
+  render () {
+    const {
+      header,
+      message,
+    } = this.props
+
+    return h('div', [
+      h('div.notification-modal-wrapper', {
+      }, [
+
+        h('div.notification-modal-header', {}, [
+          header,
+        ]),
+
+        h('div.notification-modal-message-wrapper', {}, [
+          h('div.notification-modal-message', {}, [
+            message,
+          ]),
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: this.props.hideModal,
+        }),
+
+      ]),
+    ])
+  }
+}
+
+NotificationModal.propTypes = {
+  hideModal: PropTypes.func,
+  header: PropTypes.string,
+  message: PropTypes.string,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(NotificationModal)
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 915818009..5a8d0763d 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -39,7 +39,7 @@ Network.prototype.render = function () {
         },
         src: 'images/loading.svg',
       }),
-      h('i.fa.fa-caret-down'),
+      h('i.fa.fa-caret-down.network-caret'),
     ])
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
@@ -63,7 +63,7 @@ Network.prototype.render = function () {
 
   return (
     h('div.network-component.pointer', {
-      className: classnames('network-component pointer', {
+      className: classnames({
         'network-component--disabled': this.props.disabled,
         'ethereum-network': providerName === 'mainnet',
         'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
@@ -90,7 +90,7 @@ Network.prototype.render = function () {
                   color: '#039396',
                 }},
               'Main Network'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -103,7 +103,7 @@ Network.prototype.render = function () {
                   color: '#ff6666',
                 }},
               'Ropsten Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -116,7 +116,7 @@ Network.prototype.render = function () {
                   color: '#690496',
                 }},
               'Kovan Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -129,7 +129,7 @@ Network.prototype.render = function () {
                   color: '#e7a218',
                 }},
               'Rinkeby Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
@@ -145,7 +145,7 @@ Network.prototype.render = function () {
                   color: '#AEAEAE',
                 }},
               'Private Network'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
         }
       })(),
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 1264da153..566224864 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -421,7 +421,9 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
 
 ConfirmSendEther.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
-  this.props.cancelTransaction(txMeta)
+  const { cancelTransaction } = this.props
+  
+  cancelTransaction(txMeta)
 }
 
 ConfirmSendEther.prototype.checkValidity = function () {
@@ -445,26 +447,6 @@ ConfirmSendEther.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
-  if (props.send.editingTransactionId) {
-    const {
-      send: {
-        memo,
-        amount: value,
-        gasLimit: gas,
-        gasPrice,
-      },
-    } = props
-    const { txParams: { from, to } } = txData
-    txData.txParams = {
-      from: ethUtil.addHexPrefix(from),
-      to: ethUtil.addHexPrefix(to),
-      memo: memo && ethUtil.addHexPrefix(memo),
-      value: ethUtil.addHexPrefix(value),
-      gas: ethUtil.addHexPrefix(gas),
-      gasPrice: ethUtil.addHexPrefix(gasPrice),
-    }
-  }
-
   // 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 cc2df8299..aa4f29fb0 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -2,7 +2,6 @@ const Component = require('react').Component
 const { connect } = require('react-redux')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const ethAbi = require('ethereumjs-abi')
 const tokenAbi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(tokenAbi)
@@ -67,15 +66,15 @@ function mapDispatchToProps (dispatch, ownProps) {
       const { txParams, id } = txMeta
       const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
       const { params = [] } = tokenData
-      const { value } = params[1] || {}
-      const amount = conversionUtil(value, {
+      const { value: to } = params[0] || {}
+      const { value: tokenAmountInDec } = params[1] || {}
+      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
         fromNumericBase: 'dec',
         toNumericBase: 'hex',
       })
       const {
         gas: gasLimit,
         gasPrice,
-        to,
       } = txParams
       dispatch(actions.setSelectedToken(address))
       dispatch(actions.updateSend({
@@ -83,7 +82,7 @@ function mapDispatchToProps (dispatch, ownProps) {
         gasPrice,
         gasTotal: null,
         to,
-        amount,
+        amount: tokenAmountInHex,
         errors: { to: null, amount: null },
         editingTransactionId: id,
       }))
@@ -415,7 +414,9 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
 
 ConfirmSendToken.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
-  this.props.cancelTransaction(txMeta)
+  const { cancelTransaction } = this.props
+  
+  cancelTransaction(txMeta)
 }
 
 ConfirmSendToken.prototype.checkValidity = function () {
@@ -439,38 +440,6 @@ ConfirmSendToken.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
-  if (props.send.editingTransactionId) {
-    const {
-      send: {
-        memo,
-        amount,
-        gasLimit: gas,
-        gasPrice,
-      },
-    } = props
-
-    const { txParams: { from, to } } = txData
-
-    const tokenParams = {
-      from: ethUtil.addHexPrefix(from),
-      value: '0',
-      gas: ethUtil.addHexPrefix(gas),
-      gasPrice: ethUtil.addHexPrefix(gasPrice),
-    }
-
-    const data = '0xa9059cbb' + Array.prototype.map.call(
-      ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]),
-      x => ('00' + x.toString(16)).slice(-2)
-    ).join('')
-
-    txData.txParams = {
-      ...tokenParams,
-      to: ethUtil.addHexPrefix(to),
-      memo: memo && ethUtil.addHexPrefix(memo),
-      data,
-    }
-  }
-
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
 }
diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index a961ffcd8..b3ee0899a 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -3,8 +3,8 @@ const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
 const MIN_GAS_PRICE_HEX = (100000000).toString(16)
 const MIN_GAS_PRICE_DEC = '100000000'
-const MIN_GAS_LIMIT_HEX = (21000).toString(16)
-const MIN_GAS_LIMIT_DEC = 21000
+const MIN_GAS_LIMIT_DEC = '21000'
+const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
 
 const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
   fromDenomination: 'WEI',
@@ -20,6 +20,8 @@ const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
   multiplierBase: 16,
 })
 
+const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
+
 module.exports = {
   MIN_GAS_PRICE_GWEI,
   MIN_GAS_PRICE_HEX,
@@ -27,4 +29,5 @@ module.exports = {
   MIN_GAS_LIMIT_HEX,
   MIN_GAS_LIMIT_DEC,
   MIN_GAS_TOTAL,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
 }
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 4451a6113..2d2ed4546 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -50,6 +50,7 @@ function mapStateToProps (state) {
     data,
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
     tokenContract: getSelectedTokenContract(state),
+    unapprovedTxs: state.metamask.unapprovedTxs,
   }
 }
 
@@ -64,6 +65,7 @@ function mapDispatchToProps (dispatch) {
     ),
     signTx: txParams => dispatch(actions.signTx(txParams)),
     updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
+    updateTx: txData => dispatch(actions.updateTransaction(txData)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
@@ -77,6 +79,6 @@ function mapDispatchToProps (dispatch) {
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
     goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
-    backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })),
+    setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
   }
 }
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index b40c0ec0d..677b66830 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -86,7 +86,9 @@ TokenCell.prototype.render = function () {
       numberOfDecimals: 2,
       conversionRate: currentTokenToFiatRate,
     })
-    formattedFiat = `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
+    formattedFiat = currentTokenInFiat.toString() === '0'
+      ? ''
+      : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
   }
 
   const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 255f0e5eb..4e3d2cb93 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 
 const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
@@ -9,18 +10,33 @@ const CopyButton = require('./copyButton')
 const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
 const numberToBN = require('number-to-bn')
+const actions = require('../actions')
 
 const TransactionIcon = require('./transaction-list-item-icon')
 const ShiftListItem = require('./shift-list-item')
-module.exports = TransactionListItem
+
+const mapDispatchToProps = dispatch => {
+  return {
+    retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(TransactionListItem)
 
 inherits(TransactionListItem, Component)
 function TransactionListItem () {
   Component.call(this)
 }
 
+TransactionListItem.prototype.showRetryButton = function () {
+  const { transaction = {} } = this.props
+  const { status, time } = transaction
+  return status === 'submitted' && Date.now() - time > 30000
+}
+
 TransactionListItem.prototype.render = function () {
   const { transaction, network, conversionRate, currentCurrency } = this.props
+  const { status } = transaction
   if (transaction.key === 'shapeshift') {
     if (network === '1') return h(ShiftListItem, transaction)
   }
@@ -32,7 +48,7 @@ TransactionListItem.prototype.render = function () {
 
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
-  var isPending = transaction.status === 'unapproved'
+  var isPending = status === 'unapproved'
   let txParams
   if (isTx) {
     txParams = transaction.txParams
@@ -44,7 +60,7 @@ TransactionListItem.prototype.render = function () {
 
   const isClickable = ('hash' in transaction && isLinkable) || isPending
   return (
-    h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+    h('.transaction-list-item.flex-column', {
       onClick: (event) => {
         if (isPending) {
           this.props.showTx(transaction.id)
@@ -56,51 +72,92 @@ TransactionListItem.prototype.render = function () {
       },
       style: {
         padding: '20px 0',
+        alignItems: 'center',
       },
     }, [
-
-      h('.identicon-wrapper.flex-column.flex-center.select-none', [
-        h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+      h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+        style: {
+          width: '100%',
+        },
+      }, [
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+        ]),
+
+        h(Tooltip, {
+          title: 'Transaction Number',
+          position: 'right',
+        }, [
+          h('span', {
+            style: {
+              display: 'flex',
+              cursor: 'normal',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px',
+            },
+          }, nonce),
+        ]),
+
+        h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+          domainField(txParams),
+          h('div', date),
+          recipientField(txParams, transaction, isTx, isMsg),
+        ]),
+
+        // Places a copy button if tx is successful, else places a placeholder empty div.
+        transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+
+        isTx ? h(EthBalance, {
+          value: txParams.value,
+          conversionRate,
+          currentCurrency,
+          width: '55px',
+          shorten: true,
+          showFiat: false,
+          style: {fontSize: '15px'},
+        }) : h('.flex-column'),
       ]),
 
-      h(Tooltip, {
-        title: 'Transaction Number',
-        position: 'right',
+      this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', {
+        onClick: event => {
+          event.stopPropagation()
+          this.resubmit()
+        },
+        style: {
+          height: '22px',
+          borderRadius: '22px',
+          color: '#F9881B',
+          padding: '0 20px',
+          backgroundColor: '#FFE3C9',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '8px',
+          cursor: 'pointer',
+        },
       }, [
-        h('span', {
+        h('div', {
           style: {
-            display: 'flex',
-            cursor: 'normal',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '10px',
+            paddingRight: '2px',
           },
-        }, nonce),
-      ]),
-
-      h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
-        domainField(txParams),
-        h('div', date),
-        recipientField(txParams, transaction, isTx, isMsg),
+        }, 'Taking too long?'),
+        h('div', {
+          style: {
+            textDecoration: 'underline',
+          },
+        }, 'Retry with a higher gas price here'),
       ]),
-
-      // Places a copy button if tx is successful, else places a placeholder empty div.
-      transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
-
-      isTx ? h(EthBalance, {
-        value: txParams.value,
-        conversionRate,
-        currentCurrency,
-        width: '55px',
-        shorten: true,
-        showFiat: false,
-        style: {fontSize: '15px'},
-      }) : h('.flex-column'),
     ])
   )
 }
 
+TransactionListItem.prototype.resubmit = function () {
+  const { transaction } = this.props
+  this.props.retryTransaction(transaction.id)
+}
+
 function domainField (txParams) {
   return h('div', {
     style: {
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 4e76147a1..8a9253d4d 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -170,6 +170,7 @@ TxListItem.prototype.getSendTokenTotal = async function () {
 TxListItem.prototype.render = function () {
   const {
     transactionStatus,
+    transactionAmount,
     onClick,
     transActionId,
     dateString,
@@ -177,6 +178,7 @@ TxListItem.prototype.render = function () {
     className,
   } = this.props
   const { total, fiatTotal } = this.state
+  const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
 
   return h(`div${className || ''}`, {
     key: transActionId,
@@ -238,7 +240,7 @@ TxListItem.prototype.render = function () {
             }),
           }, total),
 
-          fiatTotal && h('span.tx-list-fiat-value', fiatTotal),
+          showFiatTotal && h('span.tx-list-fiat-value', fiatTotal),
 
         ]),
       ]),
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index ebef22680..e42a20c85 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -14,6 +14,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
 
 function mapStateToProps (state) {
   const sidebarOpen = state.appState.sidebarOpen
+  const isMascara = state.appState.isMascara
 
   const identities = state.metamask.identities
   const accounts = state.metamask.accounts
@@ -31,6 +32,7 @@ function mapStateToProps (state) {
     selectedToken: selectors.getSelectedToken(state),
     identity,
     network,
+    isMascara,
   }
 }
 
@@ -98,7 +100,7 @@ TxView.prototype.renderButtons = function () {
 }
 
 TxView.prototype.render = function () {
-  const { selectedAddress, identity, network } = this.props
+  const { selectedAddress, identity, network, isMascara } = this.props
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -107,6 +109,7 @@ TxView.prototype.render = function () {
     h('div.flex-row.phone-visible', {
       style: {
         margin: '1em 0.9em',
+        justifyContent: 'space-between',
         alignItems: 'center',
       },
     }, [
@@ -139,6 +142,10 @@ TxView.prototype.render = function () {
         identity.name,
       ]),
 
+      !isMascara && h('div.open-in-browser', {
+        onClick: () => global.platform.openExtensionInBrowser(),
+      }, [h('img', { src: 'images/open.svg' })]),
+
     ]),
 
     this.renderHeroBalance(),