Update confirm transaction screen

test/integration/lib/send-new-ui.js

@@ -128,10 +128,10 @@ async function runSendFlowTest(assert, done) {
   selectState.val('send edit')
   reactTriggerChange(selectState[0])
 
-  const confirmFromName = (await queryAsync($, '.confirm-screen-account-name')).first()
+  const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first()
   assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
 
-  const confirmToName = (await queryAsync($, '.confirm-screen-account-name')).last()
+  const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last()
   assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
 
   const confirmScreenRows = await queryAsync($, '.confirm-screen-rows')
@@ -140,7 +140,7 @@ async function runSendFlowTest(assert, done) {
   const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[2]
   assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
 
-  const confirmScreenBackButton = await queryAsync($, '.confirm-screen-back-button')
+  const confirmScreenBackButton = await queryAsync($, '.page-container__back-button')
   confirmScreenBackButton[0].click()
 
   const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')

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)

ui/app/components/pending-tx/confirm-deploy-contract.js

@@ -10,6 +10,7 @@ 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')
 
@@ -244,9 +245,12 @@ class ConfirmDeployContract extends Component {
     return (
       h('.page-container', [
         h('.page-container__header', [
-          h('.page-container__back-button', {
+          h('.page-container__header-row', [
-            onClick: () => backToAccountDetail(selectedAddress),
+            h('span.page-container__back-button', {
-          }, t('back')),
+              onClick: () => backToAccountDetail(selectedAddress),
+            }, t('back')),
+            window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
+          ]),
           h('.page-container__title', t('confirmContract')),
           h('.page-container__subtitle', t('pleaseReviewTransaction')),
         ]),

ui/app/components/pending-tx/confirm-send-ether.js

@@ -4,7 +4,6 @@ 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')
@@ -15,6 +14,8 @@ const {
 } = 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')
 
@@ -257,196 +258,181 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-ether', [
+    // Main Send token Card
-      // Main Send token Card
+    h('.page-container', [
-      h('div.page-container', [
+      h('.page-container__header', [
-        h('div.page-container__header', [
+        h('.page-container__header-row', [
-          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
+          h('span.page-container__back-button', {
             onClick: () => editTransaction(txMeta),
+            style: {
+              visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
+            },
           }, 'Edit'),
-          h('div.page-container__title', title),
+          window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
-          h('div.page-container__subtitle', subtitle),
         ]),
-        h('.page-container__content', [
+        h('.page-container__title', title),
-          h('div.flex-row.flex-center.confirm-screen-identicons', [
+        h('.page-container__subtitle', subtitle),
-            h('div.confirm-screen-account-wrapper', [
+      ]),
-              h(
+      h('.page-container__content', [
-                Identicon,
+        h(SenderToRecipient, {
-                {
+          senderName: fromName,
-                  address: fromAddress,
+          senderAddress: fromAddress,
-                  diameter: 60,
+          recipientName: toName,
-                },
+          recipientAddress: txParams.to,
-              ),
+        }),
-              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', {
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
-          //   style: {
+        //   style: {
-          //     textAlign: 'center',
+        //     textAlign: 'center',
-          //     fontSize: '16px',
+        //     fontSize: '16px',
-          //   },
+        //   },
-          // }, [
+        // }, [
-          //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        //   `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', [`${amountInFIAT}`]),
-          h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
+        h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
-          h('div.flex-center.confirm-memo-wrapper', [
+        h('div.flex-center.confirm-memo-wrapper', [
-            h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+          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('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('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('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', [ t('total') + ' ' ]),
-                h('div.confirm-screen-total-box__subtitle', [ 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`),
-              ]),
-            ]),
-          ]),
-
-  // 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', {
+        h('div.confirm-screen-rows', [
-          onSubmit: this.onSubmit,
+          h('section.flex-row.flex-center.confirm-screen-row', [
-        }, [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-          h('.page-container__footer', [
+            h('div.confirm-screen-section-column', [
-            // Cancel Button
+              h('div.confirm-screen-row-info', fromName),
-            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
-              onClick: (event) => {
+            ]),
-                clearSend()
-                this.cancel(event, txMeta)
-              },
-            }, t('cancel')),
-
-            // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
           ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 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', [ 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', [ t('total') + ' ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ 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`),
+            ]),
+          ]),
+        ]),
+
+// 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('cancel')),
+
+          // Accept Button
+          h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
         ]),
       ]),
     ])

ui/app/components/sender-to-recipient.js

@@ -5,6 +5,28 @@ const t = require('../../i18n')
 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 || t('newContract')
+        ),
+      ])
+    )
+  }
+
   render () {
     const { senderName, senderAddress } = this.props
 
@@ -28,10 +50,7 @@ class SenderToRecipient extends Component {
             }),
           ]),
         ]),
-        h('.sender-to-recipient__recipient', [
+        this.renderRecipient(),
-          h('i.fa.fa-file-text-o'),
-          h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')),
-        ]),
       ])
     )
   }
@@ -40,6 +59,8 @@ class SenderToRecipient extends Component {
 SenderToRecipient.propTypes = {
   senderName: PropTypes.string,
   senderAddress: PropTypes.string,
+  recipientName: PropTypes.string,
+  recipientAddress: PropTypes.string,
 }
 
 module.exports = SenderToRecipient

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;
+    }
+  }
+}

ui/app/css/itcss/components/send.scss

@@ -526,14 +526,10 @@
   }
 
   &__form {
-    padding: 13px 0;
+    padding: 10px 0 25px;
-    width: 100%;
-    overflow-y: auto;
 
     @media screen and (max-width: $break-small) {
-      padding: 13px 0;
       margin: 0;
-      overflow-y: auto;
       flex: 1 1 auto;
     }
   }

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;
   }
 

ui/app/send-v2.js

@@ -480,18 +480,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(),
 
+    ]),
   ])
 }