Merge branch 'master' into i18n-translator-redux

13 files changed, 298 insertions, 206 deletions

diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js
index 940238fa5..ece3eb43d 100644
--- a/ui/app/components/currency-input.js
+++ b/ui/app/components/currency-input.js
@@ -91,6 +91,7 @@ CurrencyInput.prototype.render = function () {
     placeholder,
     readOnly,
     inputRef,
+    type,
   } = this.props
   const { emptyState, focused } = this.state
 
@@ -99,6 +100,7 @@ CurrencyInput.prototype.render = function () {
   const valueToRender = this.getValueToRender()
   return h('input', {
     className,
+    type,
     value: emptyState ? '' : valueToRender,
     placeholder: focused ? '' : placeholder,
     size: valueToRender.length * inputSizeMultiplier,
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
index fd8c5c309..5600e35ee 100644
--- a/ui/app/components/input-number.js
+++ b/ui/app/components/input-number.js
@@ -55,6 +55,7 @@ InputNumber.prototype.render = function () {
       className: 'customize-gas-input',
       value,
       placeholder,
+      type: 'number',
       onInputChange: newValue => {
         this.setValue(newValue)
       },
diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js
new file mode 100644
index 000000000..9dc31b5c7
--- /dev/null
+++ b/ui/app/components/network-display.js
@@ -0,0 +1,51 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const { connect } = require('react-redux')
+const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
+const t = require('../../i18n')
+
+const networkToColorHash = {
+  1: '#038789',
+  3: '#e91550',
+  42: '#690496',
+  4: '#ebb33f',
+}
+
+class NetworkDisplay extends Component {
+  renderNetworkIcon () {
+    const { network } = this.props
+    const networkColor = networkToColorHash[network]
+
+    return networkColor
+      ? h(NetworkDropdownIcon, { backgroundColor: networkColor })
+      : h('i.fa.fa-question-circle.fa-med', {
+          style: {
+            margin: '0 4px',
+            color: 'rgb(125, 128, 130)',
+          },
+        })
+  }
+
+  render () {
+    const { provider: { type } } = this.props
+    return h('.network-display__container', [
+      this.renderNetworkIcon(),
+      h('.network-name', t(type)),
+    ])
+  }
+}
+
+NetworkDisplay.propTypes = {
+  network: PropTypes.string,
+  provider: PropTypes.object,
+}
+
+const mapStateToProps = ({ metamask: { network, provider } }) => {
+  return {
+    network,
+    provider,
+  }
+}
+
+module.exports = connect(mapStateToProps)(NetworkDisplay)
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 6b912af7f..512aa793d 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -1,5 +1,5 @@
 const { Component } = require('react')
-const connect = require('../../metamask-connect')
+const { connect } = require('react-redux')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const actions = require('../../actions')
@@ -8,7 +8,9 @@ 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')
 const SenderToRecipient = require('../sender-to-recipient')
+const NetworkDisplay = require('../network-display')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -243,9 +245,12 @@ class ConfirmDeployContract extends Component {
     return (
       h('.page-container', [
         h('.page-container__header', [
-          h('.page-container__back-button', {
-            onClick: () => backToAccountDetail(selectedAddress),
-          }, this.props.t('back')),
+          h('.page-container__header-row', [
+            h('span.page-container__back-button', {
+              onClick: () => backToAccountDetail(selectedAddress),
+            }, this.props.t('back')),
+            window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
+          ]),
           h('.page-container__title', this.props.t('confirmContract')),
           h('.page-container__subtitle', this.props.t('pleaseReviewTransaction')),
         ]),
@@ -320,7 +325,6 @@ ConfirmDeployContract.propTypes = {
   conversionRate: PropTypes.number,
   currentCurrency: PropTypes.string,
   selectedAddress: PropTypes.string,
-  localeMessages: PropTypes.object,
 }
 
 const mapStateToProps = state => {
@@ -343,8 +347,8 @@ const mapDispatchToProps = dispatch => {
   return {
     backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
-    displayWarning: warning => actions.displayWarning(this.props.t(warning)),
+    displayWarning: warning => actions.displayWarning(t(warning)),
   }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
+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 02394b0c5..68c6f14d2 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -1,10 +1,9 @@
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+const { connect } = require('react-redux')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 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')
@@ -14,6 +13,9 @@ const {
   multiplyCurrencies,
 } = require('../../conversion-util')
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
+const t = require('../../../i18n')
+const SenderToRecipient = require('../sender-to-recipient')
+const NetworkDisplay = require('../network-display')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -256,196 +258,181 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-ether', [
-      // Main Send token Card
-      h('div.page-container', [
-        h('div.page-container__header', [
-          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
+    // Main Send token Card
+    h('.page-container', [
+      h('.page-container__header', [
+        h('.page-container__header-row', [
+          h('span.page-container__back-button', {
             onClick: () => editTransaction(txMeta),
+            style: {
+              visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
+            },
           }, 'Edit'),
-          h('div.page-container__title', title),
-          h('div.page-container__subtitle', subtitle),
+          window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
+        ]),
+        h('.page-container__title', title),
+        h('.page-container__subtitle', subtitle),
+      ]),
+      h('.page-container__content', [
+        h(SenderToRecipient, {
+          senderName: fromName,
+          senderAddress: fromAddress,
+          recipientName: toName,
+          recipientAddress: txParams.to,
+        }),
+
+        // 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('.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('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', [ this.props.t('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-rows', [
-            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('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', [ this.props.t('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', [ this.props.t('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', [ this.props.t('gasFee') ]),
+            h('div.confirm-screen-section-column', [
+              h(GasFeeDisplay, {
+                gasTotal: gasTotal || gasFeeInHex,
+                conversionRate,
+                convertedCurrency,
+                onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
+              }),
             ]),
+          ]),
 
-            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]),
-              h('div.confirm-screen-section-column', [
-                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', [ this.props.t('total') + ' ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
             ]),
 
-            h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
-              h('div.confirm-screen-section-column', [
-                h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]),
-                h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
-              ]),
-
-              h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
-                h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
-              ]),
+            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,
-  //       ]),
-  //     ])
-  //   )
-  // }
         ]),
 
-        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)
-              },
-            }, this.props.t('cancel')),
-
-            // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
-          ]),
+// 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)
+            },
+          }, this.props.t('cancel')),
+
+          // Accept Button
+          h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
         ]),
       ]),
     ])
@@ -536,4 +523,4 @@ ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator,
   const numBN = new BN(numerator)
   const denomBN = new BN(denominator)
   return targetBN.mul(numBN).div(denomBN)
-}
+}
\ No newline at end of file
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index d53f8b32f..50d803fc4 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -86,6 +86,7 @@ function mapDispatchToProps (dispatch, ownProps) {
         amount: tokenAmountInHex,
         errors: { to: null, amount: null },
         editingTransactionId: id,
+        token: ownProps.token,
       }))
       dispatch(actions.showSendTokenPage())
     },
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index e490a45f4..0a8813b03 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -64,13 +64,20 @@ PendingTx.prototype.componentWillMount = async function () {
     })
   }
 
-  try {
+  // inspect tx data for supported special confirmation screens
+  let isTokenTransaction = false
+  if (txParams.data) {
+    const tokenData = abiDecoder.decodeMethod(txParams.data)
+    const { name: tokenMethodName } = tokenData || {}
+    isTokenTransaction = (tokenMethodName === 'transfer')
+  }
+
+  if (isTokenTransaction) {
     const token = util.getContractAtAddress(txParams.to)
     const results = await Promise.all([
       token.symbol(),
       token.decimals(),
     ])
-
     const [ symbol, decimals ] = results
 
     if (symbol[0] && decimals[0]) {
@@ -83,11 +90,14 @@ PendingTx.prototype.componentWillMount = async function () {
       })
     } else {
       this.setState({
-        transactionType: TX_TYPES.SEND_ETHER,
+        transactionType: TX_TYPES.SEND_TOKEN,
+        tokenAddress: txParams.to,
+        tokenSymbol: null,
+        tokenDecimals: null,
         isFetching: false,
       })
     }
-  } catch (e) {
+  } else {
     this.setState({
       transactionType: TX_TYPES.SEND_ETHER,
       isFetching: false,
diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js
index dc72dc303..420d50e42 100644
--- a/ui/app/components/sender-to-recipient.js
+++ b/ui/app/components/sender-to-recipient.js
@@ -5,6 +5,28 @@ const PropTypes = require('prop-types')
 const Identicon = require('./identicon')
 
 class SenderToRecipient extends Component {
+  renderRecipientIcon () {
+    const { recipientAddress } = this.props
+    return (
+      recipientAddress
+        ? h(Identicon, { address: recipientAddress, diameter: 20 })
+        : h('i.fa.fa-file-text-o')
+    )
+  }
+
+  renderRecipient () {
+    const { recipientName } = this.props
+    return (
+      h('.sender-to-recipient__recipient', [
+        this.renderRecipientIcon(),
+        h(
+          '.sender-to-recipient__name.sender-to-recipient__recipient-name',
+          recipientName || this.props.t('newContract')
+        ),
+      ])
+    )
+  }
+
   render () {
     const { senderName, senderAddress } = this.props
 
@@ -28,10 +50,7 @@ class SenderToRecipient extends Component {
             }),
           ]),
         ]),
-        h('.sender-to-recipient__recipient', [
-          h('i.fa.fa-file-text-o'),
-          h('.sender-to-recipient__name.sender-to-recipient__recipient-name', this.props.t('newContract')),
-        ]),
+        this.renderRecipient(),
       ])
     )
   }
@@ -41,6 +60,8 @@ SenderToRecipient.propTypes = {
   senderName: PropTypes.string,
   senderAddress: PropTypes.string,
   localeMessages: PropTypes.object,
+  recipientName: PropTypes.string,
+  recipientAddress: PropTypes.string,
 }
 
 module.exports = {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 374cb71b6..c34b5cd06 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -159,3 +159,15 @@
 .network-caret {
   margin: 0 8px 2px;
 }
+
+.network-display {
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    @media screen and (min-width: 576px) {
+      display: none;
+    }
+  }
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index bdea1b008..263b362ca 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -526,14 +526,10 @@
   }
 
   &__form {
-    padding: 13px 0;
-    width: 100%;
-    overflow-y: auto;
+    padding: 10px 0 25px;
 
     @media screen and (max-width: $break-small) {
-      padding: 13px 0;
       margin: 0;
-      overflow-y: auto;
       flex: 1 1 auto;
     }
   }
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 1e226b93e..08e639d74 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -106,6 +106,12 @@ input.large-input {
     }
   }
 
+  &__header-row {
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+
   &__footer {
     display: flex;
     flex-flow: row;
@@ -138,7 +144,6 @@ input.large-input {
     color: #2f9ae0;
     font-size: 1rem;
     cursor: pointer;
-    padding-bottom: 10px;
     font-weight: 400;
   }
 
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index d37c26f7e..2bdc39004 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -56,8 +56,9 @@ function getSelectedToken (state) {
   const tokens = state.metamask.tokens || []
   const selectedTokenAddress = state.metamask.selectedTokenAddress
   const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
+  const sendToken = state.metamask.send.token
 
-  return selectedToken || null
+  return selectedToken || sendToken || null
 }
 
 function getSelectedTokenExchangeRate (state) {
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 49947a11c..8a20ffe66 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -479,18 +479,19 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 }
 
 SendTransactionScreen.prototype.renderForm = function () {
-  return h('div.send-v2__form', {}, [
+  return h('.page-container__content', {}, [
+    h('.send-v2__form', [
+      this.renderFromRow(),
 
-    this.renderFromRow(),
+      this.renderToRow(),
 
-    this.renderToRow(),
+      this.renderAmountRow(),
 
-    this.renderAmountRow(),
+      this.renderGasRow(),
 
-    this.renderGasRow(),
-
-    // this.renderMemoRow(),
+      // this.renderMemoRow(),
 
+    ]),
   ])
 }