Merge branch 'master' into i18n-translator-redux

3 files changed, 523 insertions, 517 deletions

diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 483574094..340653422 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -1,349 +1,350 @@
-const Component = require('react').Component
+const { Component } = require('react')
 const { connect } = require('react-redux')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const actions = require('../../actions')
 const clone = require('clone')
-const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
 const t = require('../../../i18n-helper').getMessage
+const SenderToRecipient = require('../sender-to-recipient')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
+class ConfirmDeployContract extends Component {
+  constructor (props) {
+    super(props)
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
-
-function mapStateToProps (state) {
-  const {
-    conversionRate,
-    identities,
-    currentCurrency,
-  } = state.metamask
-  const accounts = state.metamask.accounts
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
-  return {
-    currentCurrency,
-    conversionRate,
-    identities,
-    selectedAddress,
+    this.state = {
+      valid: false,
+      submitting: false,
+    }
   }
-}
 
-function mapDispatchToProps (dispatch) {
-  return {
-    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
-    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  onSubmit (event) {
+    event.preventDefault()
+    const txMeta = this.gatherTxMeta()
+    const valid = this.checkValidity()
+    this.setState({ valid, submitting: true })
+
+    if (valid && this.verifyGasParams()) {
+      this.props.sendTransaction(txMeta, event)
+    } else {
+      this.props.displayWarning('invalidGasParams')
+      this.setState({ submitting: false })
+    }
   }
-}
 
+  cancel (event, txMeta) {
+    event.preventDefault()
+    this.props.cancelTransaction(txMeta)
+  }
 
-inherits(ConfirmDeployContract, Component)
-function ConfirmDeployContract () {
-  Component.call(this)
-  this.state = {}
-  this.onSubmit = this.onSubmit.bind(this)
-}
-
-ConfirmDeployContract.prototype.onSubmit = function (event) {
-  event.preventDefault()
-  const txMeta = this.gatherTxMeta()
-  const valid = this.checkValidity()
-  this.setState({ valid, submitting: true })
-
-  if (valid && this.verifyGasParams()) {
-    this.props.sendTransaction(txMeta, event)
-  } else {
-    this.props.dispatch(actions.displayWarning(t(this.props.localeMessages, 'invalidGasParams')))
-    this.setState({ submitting: false })
+  checkValidity () {
+    const form = this.getFormEl()
+    const valid = form.checkValidity()
+    return valid
   }
-}
 
-ConfirmDeployContract.prototype.cancel = function (event, txMeta) {
-  event.preventDefault()
-  this.props.cancelTransaction(txMeta)
-}
+  getFormEl () {
+    const form = document.querySelector('form#pending-tx-form')
+    // Stub out form for unit tests:
+    if (!form) {
+      return { checkValidity () { return true } }
+    }
+    return form
+  }
 
-ConfirmDeployContract.prototype.checkValidity = function () {
-  const form = this.getFormEl()
-  const valid = form.checkValidity()
-  return valid
-}
+  // After a customizable state value has been updated,
+  gatherTxMeta () {
+    const props = this.props
+    const state = this.state
+    const txData = clone(state.txData) || clone(props.txData)
 
-ConfirmDeployContract.prototype.getFormEl = function () {
-  const form = document.querySelector('form#pending-tx-form')
-  // Stub out form for unit tests:
-  if (!form) {
-    return { checkValidity () { return true } }
+    // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+    return txData
   }
-  return form
-}
 
-// After a customizable state value has been updated,
-ConfirmDeployContract.prototype.gatherTxMeta = function () {
-  const props = this.props
-  const state = this.state
-  const txData = clone(state.txData) || clone(props.txData)
-
-  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-  return txData
-}
+  verifyGasParams () {
+    // We call this in case the gas has not been modified at all
+    if (!this.state) { return true }
+    return (
+      this._notZeroOrEmptyString(this.state.gas) &&
+      this._notZeroOrEmptyString(this.state.gasPrice)
+    )
+  }
 
-ConfirmDeployContract.prototype.verifyGasParams = function () {
-  // We call this in case the gas has not been modified at all
-  if (!this.state) { return true }
-  return (
-    this._notZeroOrEmptyString(this.state.gas) &&
-    this._notZeroOrEmptyString(this.state.gasPrice)
-  )
-}
+  _notZeroOrEmptyString (obj) {
+    return obj !== '' && obj !== '0x0'
+  }
 
-ConfirmDeployContract.prototype._notZeroOrEmptyString = function (obj) {
-  return obj !== '' && obj !== '0x0'
-}
+  bnMultiplyByFraction (targetBN, numerator, denominator) {
+    const numBN = new BN(numerator)
+    const denomBN = new BN(denominator)
+    return targetBN.mul(numBN).div(denomBN)
+  }
 
-ConfirmDeployContract.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
-  const numBN = new BN(numerator)
-  const denomBN = new BN(denominator)
-  return targetBN.mul(numBN).div(denomBN)
-}
+  getData () {
+    const { identities } = this.props
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+
+    return {
+      from: {
+        address: txParams.from,
+        name: identities[txParams.from].name,
+      },
+      memo: txParams.memo || '',
+    }
+  }
 
-ConfirmDeployContract.prototype.getData = function () {
-  const { identities } = this.props
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
+  getAmount () {
+    const { conversionRate, currentCurrency } = this.props
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+
+    const FIAT = conversionUtil(txParams.value, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: currentCurrency,
+      numberOfDecimals: 2,
+      fromDenomination: 'WEI',
+      conversionRate,
+    })
+    const ETH = conversionUtil(txParams.value, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: 'ETH',
+      fromDenomination: 'WEI',
+      conversionRate,
+      numberOfDecimals: 6,
+    })
+
+    return {
+      fiat: Number(FIAT),
+      token: Number(ETH),
+    }
 
-  return {
-    from: {
-      address: txParams.from,
-      name: identities[txParams.from].name,
-    },
-    memo: txParams.memo || '',
   }
-}
-
-ConfirmDeployContract.prototype.getAmount = function () {
-  const { conversionRate, currentCurrency } = this.props
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
-
-  const FIAT = conversionUtil(txParams.value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: currentCurrency,
-    numberOfDecimals: 2,
-    fromDenomination: 'WEI',
-    conversionRate,
-  })
-  const ETH = conversionUtil(txParams.value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: 'ETH',
-    fromDenomination: 'WEI',
-    conversionRate,
-    numberOfDecimals: 6,
-  })
 
-  return {
-    fiat: Number(FIAT),
-    token: Number(ETH),
+  getGasFee () {
+    const { conversionRate, currentCurrency } = this.props
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+
+    // Gas
+    const gas = txParams.gas
+    const gasBn = hexToBn(gas)
+
+    // Gas Price
+    const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
+    const gasPriceBn = hexToBn(gasPrice)
+
+    const txFeeBn = gasBn.mul(gasPriceBn)
+
+    const FIAT = conversionUtil(txFeeBn, {
+      fromNumericBase: 'BN',
+      toNumericBase: 'dec',
+      fromDenomination: 'WEI',
+      fromCurrency: 'ETH',
+      toCurrency: currentCurrency,
+      numberOfDecimals: 2,
+      conversionRate,
+    })
+    const ETH = conversionUtil(txFeeBn, {
+      fromNumericBase: 'BN',
+      toNumericBase: 'dec',
+      fromDenomination: 'WEI',
+      fromCurrency: 'ETH',
+      toCurrency: 'ETH',
+      numberOfDecimals: 6,
+      conversionRate,
+    })
+
+    return {
+      fiat: Number(FIAT),
+      eth: Number(ETH),
+    }
   }
 
-}
+  renderGasFee () {
+    const { currentCurrency } = this.props
+    const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
 
-ConfirmDeployContract.prototype.getGasFee = function () {
-  const { conversionRate, currentCurrency } = this.props
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
+    return (
+      h('section.flex-row.flex-center.confirm-screen-row', [
+        h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
 
-  // Gas
-  const gas = txParams.gas
-  const gasBn = hexToBn(gas)
+          h(
+            'div.confirm-screen-row-detail',
+            `${ethGas} ETH`
+          ),
+        ]),
+      ])
+    )
+  }
 
-  // Gas Price
-  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
-  const gasPriceBn = hexToBn(gasPrice)
+  renderHeroAmount () {
+    const { currentCurrency } = this.props
+    const { fiat: fiatAmount } = this.getAmount()
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+    const { memo = '' } = txParams
+
+    return (
+      h('div.confirm-send-token__hero-amount-wrapper', [
+        h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
+        h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', memo),
+        ]),
+      ])
+    )
+  }
 
-  const txFeeBn = gasBn.mul(gasPriceBn)
+  renderTotalPlusGas () {
+    const { currentCurrency } = this.props
+    const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+    const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
 
-  const FIAT = conversionUtil(txFeeBn, {
-    fromNumericBase: 'BN',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    fromCurrency: 'ETH',
-    toCurrency: currentCurrency,
-    numberOfDecimals: 2,
-    conversionRate,
-  })
-  const ETH = conversionUtil(txFeeBn, {
-    fromNumericBase: 'BN',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    fromCurrency: 'ETH',
-    toCurrency: 'ETH',
-    numberOfDecimals: 6,
-    conversionRate,
-  })
+    return (
+      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(this.props.localeMessages, 'total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
+        ]),
 
-  return {
-    fiat: Number(FIAT),
-    eth: Number(ETH),
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`),
+          h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`),
+        ]),
+      ])
+    )
   }
-}
-
-ConfirmDeployContract.prototype.renderGasFee = function () {
-  const { currentCurrency } = this.props
-  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
-
-  return (
-    h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
-      h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
-
-        h(
-          'div.confirm-screen-row-detail',
-          `${ethGas} ETH`
-        ),
-      ]),
-    ])
-  )
-}
 
-ConfirmDeployContract.prototype.renderHeroAmount = function () {
-  const { currentCurrency } = this.props
-  const { fiat: fiatAmount } = this.getAmount()
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
-  const { memo = '' } = txParams
-
-  return (
-    h('div.confirm-send-token__hero-amount-wrapper', [
-      h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
-      h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()),
-      h('div.flex-center.confirm-memo-wrapper', [
-        h('h3.confirm-screen-send-memo', memo),
-      ]),
-    ])
-  )
-}
+  render () {
+    const { backToAccountDetail, selectedAddress } = this.props
+    const txMeta = this.gatherTxMeta()
 
-ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
-  const { currentCurrency } = this.props
-  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
-  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
-
-  return (
-    h('section.flex-row.flex-center.confirm-screen-total-box ', [
-      h('div.confirm-screen-section-column', [
-        h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]),
-        h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
-      ]),
-
-      h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`),
-        h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`),
-      ]),
-    ])
-  )
-}
+    const {
+      from: {
+        address: fromAddress,
+        name: fromName,
+      },
+    } = this.getData()
 
-ConfirmDeployContract.prototype.render = function () {
-  const { backToAccountDetail, selectedAddress } = this.props
-  const txMeta = this.gatherTxMeta()
+    this.inputs = []
 
-  const {
-    from: {
-      address: fromAddress,
-      name: fromName,
-    },
-  } = this.getData()
-
-  this.inputs = []
-
-  return (
-    h('div.flex-column.flex-grow.confirm-screen-container', {
-      style: { minWidth: '355px' },
-    }, [
-      // Main Send token Card
-      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
-        h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button.allcaps', {
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__back-button', {
             onClick: () => backToAccountDetail(selectedAddress),
           }, t(this.props.localeMessages, 'back')),
-          h('div.confirm-screen-title', t(this.props.localeMessages, 'confirmContract')),
-          h('div.confirm-screen-header-tip'),
-        ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-          ]),
-          h('i.fa.fa-arrow-right.fa-lg'),
-          h('div.confirm-screen-account-wrapper', [
-            h('i.fa.fa-file-text-o'),
-            h('span.confirm-screen-account-name', t(this.props.localeMessages, 'newContract')),
-            h('span.confirm-screen-account-number', ' '),
-          ]),
+          h('.page-container__title', t(this.props.localeMessages, 'confirmContract')),
+          h('.page-container__subtitle', t(this.props.localeMessages, 'pleaseReviewTransaction')),
         ]),
+        // Main Send token Card
+        h('.page-container__content', [
+
+          h(SenderToRecipient, {
+            senderName: fromName,
+            senderAddress: fromAddress,
+          }),
+
+          // h('h3.flex-center.confirm-screen-sending-to-message', {
+          //   style: {
+          //     textAlign: 'center',
+          //     fontSize: '16px',
+          //   },
+          // }, [
+          //   `You're deploying a new contract.`,
+          // ]),
+
+          this.renderHeroAmount(),
+
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
+            ]),
 
-        // h('h3.flex-center.confirm-screen-sending-to-message', {
-        //   style: {
-        //     textAlign: 'center',
-        //     fontSize: '16px',
-        //   },
-        // }, [
-        //   `You're deploying a new contract.`,
-        // ]),
-
-        this.renderHeroAmount(),
-
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', t(this.props.localeMessages, 'newContract')),
+              ]),
             ]),
+
+            this.renderGasFee(),
+
+            this.renderTotalPlusGas(),
+
           ]),
+        ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', t(this.props.localeMessages, 'newContract')),
-            ]),
+        h('form#pending-tx-form', {
+          onSubmit: event => this.onSubmit(event),
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: event => this.cancel(event, txMeta),
+            }, t(this.props.localeMessages, 'cancel')),
+
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', {
+              onClick: event => this.onSubmit(event),
+            }, t(this.props.localeMessages, 'confirm')),
           ]),
+        ]),
+      ])
+    )
+  }
+}
 
-          this.renderGasFee(),
+ConfirmDeployContract.propTypes = {
+  sendTransaction: PropTypes.func,
+  cancelTransaction: PropTypes.func,
+  backToAccountDetail: PropTypes.func,
+  displayWarning: PropTypes.func,
+  identities: PropTypes.object,
+  conversionRate: PropTypes.number,
+  currentCurrency: PropTypes.string,
+  selectedAddress: PropTypes.string,
+}
 
-          this.renderTotalPlusGas(),
+const mapStateToProps = state => {
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    currentCurrency,
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
 
-        ]),
-      ]),
-
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => this.cancel(event, txMeta),
-        }, t(this.props.localeMessages, 'cancel')),
-
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
-
-      ]),
-    ])
-  )
+const mapDispatchToProps = dispatch => {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+    displayWarning: warning => actions.displayWarning(t(this.props.localeMessages, warning)),
+  }
 }
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
\ No newline at end of file
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 7fd498d83..be3a9d993 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -224,181 +224,184 @@ ConfirmSendEther.prototype.render = function () {
           h('div.page-container__title', 'Confirm'),
           h('div.page-container__subtitle', `Please review your transaction.`),
         ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-          ]),
-          h('i.fa.fa-arrow-right.fa-lg'),
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: txParams.to,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', toName),
-            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
-          ]),
-        ]),
-
-        // h('h3.flex-center.confirm-screen-sending-to-message', {
-        //   style: {
-        //     textAlign: 'center',
-        //     fontSize: '16px',
-        //   },
-        // }, [
-        //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
-        // ]),
-
-        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
-        h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
-        h('div.flex-center.confirm-memo-wrapper', [
-          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
-        ]),
-
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+        h('.page-container__content', [
+          h('div.flex-row.flex-center.confirm-screen-identicons', [
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: fromAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', fromName),
+              // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+            ]),
+            h('i.fa.fa-arrow-right.fa-lg'),
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: txParams.to,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', toName),
+              // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
             ]),
           ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', toName),
-              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
-            ]),
+          // h('h3.flex-center.confirm-screen-sending-to-message', {
+          //   style: {
+          //     textAlign: 'center',
+          //     fontSize: '16px',
+          //   },
+          // }, [
+          //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+          // ]),
+
+          h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
+          h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
+          h('div.flex-center.confirm-memo-wrapper', [
+            h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
           ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
+            ]),
 
-              h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', toName),
+                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
 
-          h('section.flex-row.flex-center.confirm-screen-total-box ', [
-            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
+                h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+              ]),
             ]),
 
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
-              h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+            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(this.props.localeMessages, 'total') + ' ' ]),
+                h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
+              ]),
+
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+                h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+              ]),
             ]),
           ]),
+
+  // These are latest errors handling from master
+  // Leaving as comments as reference when we start implementing error handling
+  //         h('style', `
+  //           .conf-buttons button {
+  //             margin-left: 10px;
+  //             text-transform: uppercase;
+  //           }
+  //         `),
+
+  //         txMeta.simulationFails ?
+  //           h('.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Transaction Error. Exception thrown in contract code.')
+  //         : null,
+
+  //         !isValidAddress ?
+  //           h('.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+  //         : null,
+
+  //         insufficientBalance ?
+  //           h('span.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Insufficient balance for transaction')
+  //         : null,
+
+  //         // send + cancel
+  //         h('.flex-row.flex-space-around.conf-buttons', {
+  //           style: {
+  //             display: 'flex',
+  //             justifyContent: 'flex-end',
+  //             margin: '14px 25px',
+  //           },
+  //         }, [
+  //           h('button', {
+  //             onClick: (event) => {
+  //               this.resetGasFields()
+  //               event.preventDefault()
+  //             },
+  //           }, 'Reset'),
+
+  //           // Accept Button or Buy Button
+  //           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+  //             h('input.confirm.btn-green', {
+  //               type: 'submit',
+  //               value: 'SUBMIT',
+  //               style: { marginLeft: '10px' },
+  //               disabled: buyDisabled,
+  //             }),
+
+  //           h('button.cancel.btn-red', {
+  //             onClick: props.cancelTransaction,
+  //           }, 'Reject'),
+  //         ]),
+  //         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+  //           style: {
+  //             display: 'flex',
+  //             justifyContent: 'flex-end',
+  //             margin: '14px 25px',
+  //           },
+  //         }, [
+  //           h('button.cancel.btn-red', {
+  //             onClick: props.cancelAllTransactions,
+  //           }, 'Reject All'),
+  //         ]) : null,
+  //       ]),
+  //     ])
+  //   )
+  // }
         ]),
 
-// These are latest errors handling from master
-// Leaving as comments as reference when we start implementing error handling
-//         h('style', `
-//           .conf-buttons button {
-//             margin-left: 10px;
-//             text-transform: uppercase;
-//           }
-//         `),
-
-//         txMeta.simulationFails ?
-//           h('.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Transaction Error. Exception thrown in contract code.')
-//         : null,
-
-//         !isValidAddress ?
-//           h('.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
-//         : null,
-
-//         insufficientBalance ?
-//           h('span.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Insufficient balance for transaction')
-//         : null,
-
-//         // send + cancel
-//         h('.flex-row.flex-space-around.conf-buttons', {
-//           style: {
-//             display: 'flex',
-//             justifyContent: 'flex-end',
-//             margin: '14px 25px',
-//           },
-//         }, [
-//           h('button', {
-//             onClick: (event) => {
-//               this.resetGasFields()
-//               event.preventDefault()
-//             },
-//           }, 'Reset'),
-
-//           // Accept Button or Buy Button
-//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
-//             h('input.confirm.btn-green', {
-//               type: 'submit',
-//               value: 'SUBMIT',
-//               style: { marginLeft: '10px' },
-//               disabled: buyDisabled,
-//             }),
-
-//           h('button.cancel.btn-red', {
-//             onClick: props.cancelTransaction,
-//           }, 'Reject'),
-//         ]),
-//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
-//           style: {
-//             display: 'flex',
-//             justifyContent: 'flex-end',
-//             margin: '14px 25px',
-//           },
-//         }, [
-//           h('button.cancel.btn-red', {
-//             onClick: props.cancelAllTransactions,
-//           }, 'Reject All'),
-//         ]) : null,
-//       ]),
-//     ])
-//   )
-// }
-      ]),
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit,
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: (event) => {
+                clearSend()
+                this.cancel(event, txMeta)
+              },
+            }, t(this.props.localeMessages, 'cancel')),
 
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => {
-            clearSend()
-            this.cancel(event, txMeta)
-          },
-        }, t(this.props.localeMessages, 'cancel')),
-
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', [t(this.props.localeMessages, 'confirm')]),
+          ]),
+        ]),
       ]),
     ])
   )
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index bd1ad82ef..fe5c80711 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -265,7 +265,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
 
   return fiatAmount && fiatGas
     ? (
-      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      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(this.props.localeMessages, 'total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
@@ -278,7 +278,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
       ])
     )
     : (
-      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      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(this.props.localeMessages, 'total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
@@ -319,80 +319,82 @@ ConfirmSendToken.prototype.render = function () {
           h('div.page-container__title', t(this.props.localeMessages, 'confirm')),
           h('div.page-container__subtitle', t(this.props.localeMessages, 'pleaseReviewTransaction')),
         ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-          ]),
-          h('i.fa.fa-arrow-right.fa-lg'),
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: toAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', toName),
-            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+        h('.page-container__content', [
+          h('div.flex-row.flex-center.confirm-screen-identicons', [
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: fromAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', fromName),
+              // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+            ]),
+            h('i.fa.fa-arrow-right.fa-lg'),
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: toAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', toName),
+              // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+            ]),
           ]),
-        ]),
 
-        // h('h3.flex-center.confirm-screen-sending-to-message', {
-        //   style: {
-        //     textAlign: 'center',
-        //     fontSize: '16px',
-        //   },
-        // }, [
-          // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
-        // ]),
-
-        this.renderHeroAmount(),
-
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+          // h('h3.flex-center.confirm-screen-sending-to-message', {
+          //   style: {
+          //     textAlign: 'center',
+          //     fontSize: '16px',
+          //   },
+          // }, [
+            // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+          // ]),
+
+          this.renderHeroAmount(),
+
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', toName),
-              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', toName),
+                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          this.renderGasFee(),
+            this.renderGasFee(),
 
-          this.renderTotalPlusGas(),
+            this.renderTotalPlusGas(),
 
+          ])
         ]),
-      ]),
-
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => this.cancel(event, txMeta),
-        }, t(this.props.localeMessages, 'cancel')),
 
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit,
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: (event) => this.cancel(event, txMeta),
+            }, t(this.props.localeMessages, 'cancel')),
+
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', [t(this.props.localeMessages, 'confirm')]),
+          ]),
+        ]),
       ]),
-
-
     ])
   )
 }