Merge branch 'develop' into i3725-refactor-send-component-

3 files changed, 82 insertions, 40 deletions

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 92df00e9b..97d0318ea 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -295,18 +295,48 @@ ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, curren
     : value
 }
 
-ConfirmSendEther.prototype.editTransaction = function (txMeta) {
+ConfirmSendEther.prototype.editTransaction = function () {
   const { editTransaction, history } = this.props
+  const txMeta = this.gatherTxMeta()
   editTransaction(txMeta)
   history.push(SEND_ROUTE)
 }
 
-ConfirmSendEther.prototype.renderNetworkDisplay = function () {
+ConfirmSendEther.prototype.renderHeaderRow = function (isTxReprice) {
   const windowType = window.METAMASK_UI_TYPE
+  const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+    windowType !== ENVIRONMENT_TYPE_POPUP
 
-  return (windowType === ENVIRONMENT_TYPE_NOTIFICATION || windowType === ENVIRONMENT_TYPE_POPUP)
-    ? h(NetworkDisplay)
-    : null
+  if (isTxReprice && isFullScreen) {
+    return null
+  }
+
+  return (
+    h('.page-container__header-row', [
+      h('span.page-container__back-button', {
+        onClick: () => this.editTransaction(),
+        style: {
+          visibility: isTxReprice ? 'hidden' : 'initial',
+        },
+      }, 'Edit'),
+      !isFullScreen && h(NetworkDisplay),
+    ])
+  )
+}
+
+ConfirmSendEther.prototype.renderHeader = function (isTxReprice) {
+  const title = isTxReprice ? this.context.t('speedUpTitle') : this.context.t('confirm')
+  const subtitle = isTxReprice
+    ? this.context.t('speedUpSubtitle')
+    : this.context.t('pleaseReviewTransaction')
+
+  return (
+    h('.page-container__header', [
+      this.renderHeaderRow(isTxReprice),
+      h('.page-container__title', title),
+      h('.page-container__subtitle', subtitle),
+    ])
+  )
 }
 
 ConfirmSendEther.prototype.render = function () {
@@ -324,6 +354,7 @@ ConfirmSendEther.prototype.render = function () {
     },
   } = this.props
   const txMeta = this.gatherTxMeta()
+  const isTxReprice = Boolean(txMeta.lastGasPrice)
   const txParams = txMeta.txParams || {}
 
   const {
@@ -342,11 +373,6 @@ ConfirmSendEther.prototype.render = function () {
     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.'
-
   const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency)
   const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency)
 
@@ -366,19 +392,7 @@ ConfirmSendEther.prototype.render = function () {
   return (
     // Main Send token Card
     h('.page-container', [
-      h('.page-container__header', [
-        h('.page-container__header-row', [
-          h('span.page-container__back-button', {
-            onClick: () => this.editTransaction(txMeta),
-            style: {
-              visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
-            },
-          }, 'Edit'),
-          this.renderNetworkDisplay(),
-        ]),
-        h('.page-container__title', title),
-        h('.page-container__subtitle', subtitle),
-      ]),
+      this.renderHeader(isTxReprice),
       h('.page-container__content', [
         h(SenderToRecipient, {
           senderName: fromName,
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index b21e1473e..1802d3143 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -12,6 +12,7 @@ const actions = require('../../actions')
 const clone = require('clone')
 const Identicon = require('../identicon')
 const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
+const NetworkDisplay = require('../network-display')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const {
@@ -43,6 +44,11 @@ import {
   updateSendErrors,
 } from '../../ducks/send.duck'
 
+const {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_NOTIFICATION,
+} = require('../../../../app/scripts/lib/enums')
+
 ConfirmSendToken.contextTypes = {
   t: PropTypes.func,
 }
@@ -434,6 +440,43 @@ ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, curren
     : value
 }
 
+ConfirmSendToken.prototype.renderHeaderRow = function (isTxReprice) {
+  const windowType = window.METAMASK_UI_TYPE
+  const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+    windowType !== ENVIRONMENT_TYPE_POPUP
+
+  if (isTxReprice && isFullScreen) {
+    return null
+  }
+
+  return (
+    h('.page-container__header-row', [
+      h('span.page-container__back-button', {
+        onClick: () => this.editTransaction(),
+        style: {
+          visibility: isTxReprice ? 'hidden' : 'initial',
+        },
+      }, 'Edit'),
+      !isFullScreen && h(NetworkDisplay),
+    ])
+  )
+}
+
+ConfirmSendToken.prototype.renderHeader = function (isTxReprice) {
+  const title = isTxReprice ? this.context.t('speedUpTitle') : this.context.t('confirm')
+  const subtitle = isTxReprice
+    ? this.context.t('speedUpSubtitle')
+    : this.context.t('pleaseReviewTransaction')
+
+  return (
+    h('.page-container__header', [
+      this.renderHeaderRow(isTxReprice),
+      h('.page-container__title', title),
+      h('.page-container__subtitle', subtitle),
+    ])
+  )
+}
+
 ConfirmSendToken.prototype.render = function () {
   const txMeta = this.gatherTxMeta()
   const {
@@ -447,25 +490,13 @@ ConfirmSendToken.prototype.render = function () {
     },
   } = this.getData()
 
-  this.inputs = []
-
   const isTxReprice = Boolean(txMeta.lastGasPrice)
-  const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm')
-  const subtitle = isTxReprice
-    ? this.context.t('reprice_subtitle')
-    : this.context.t('pleaseReviewTransaction')
 
   return (
     h('div.confirm-screen-container.confirm-send-token', [
       // Main Send token Card
       h('div.page-container', [
-        h('div.page-container__header', [
-          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
-            onClick: () => this.editTransaction(txMeta),
-          }, this.context.t('edit')),
-          h('div.page-container__title', title),
-          h('div.page-container__subtitle', subtitle),
-        ]),
+        this.renderHeader(isTxReprice),
         h('.page-container__content', [
           h('div.flex-row.flex-center.confirm-screen-identicons', [
             h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index 893538bcf..3f8cd8823 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -130,7 +130,6 @@ PendingTx.prototype.render = function () {
 
   if (isFetching) {
     return h(Loading, {
-      fullScreen: true,
       loadingMessage: this.context.t('generatingTransaction'),
     })
   }
@@ -157,9 +156,7 @@ PendingTx.prototype.render = function () {
         sendTransaction,
       })
     default:
-      return h(Loading, {
-        fullScreen: true,
-      })
+      return h(Loading)
   }
 }