Merge pull request #3624 from alextsg/cb-941

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', [
+            h('span.page-container__back-button', {
               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,42 +258,28 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-ether', [
     // Main Send token Card
-      h('div.page-container', [
+    h('.page-container', [
-        h('div.page-container__header', [
+      h('.page-container__header', [
-          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
+        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),
+          window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
-          h('div.page-container__subtitle', subtitle),
+        ]),
+        h('.page-container__title', title),
+        h('.page-container__subtitle', subtitle),
       ]),
       h('.page-container__content', [
-          h('div.flex-row.flex-center.confirm-screen-identicons', [
+        h(SenderToRecipient, {
-            h('div.confirm-screen-account-wrapper', [
+          senderName: fromName,
-              h(
+          senderAddress: fromAddress,
-                Identicon,
+          recipientName: toName,
-                {
+          recipientAddress: txParams.to,
-                  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: {
@@ -351,85 +338,85 @@ ConfirmSendEther.prototype.render = function () {
           ]),
         ]),
 
-  // These are latest errors handling from master
+// These are latest errors handling from master
-  // Leaving as comments as reference when we start implementing error handling
+// Leaving as comments as reference when we start implementing error handling
-  //         h('style', `
+//         h('style', `
-  //           .conf-buttons button {
+//           .conf-buttons button {
-  //             margin-left: 10px;
+//             margin-left: 10px;
-  //             text-transform: uppercase;
+//             text-transform: uppercase;
-  //           }
+//           }
-  //         `),
+//         `),
 
-  //         txMeta.simulationFails ?
+//         txMeta.simulationFails ?
-  //           h('.error', {
+//           h('.error', {
-  //             style: {
+//             style: {
-  //               marginLeft: 50,
+//               marginLeft: 50,
-  //               fontSize: '0.9em',
+//               fontSize: '0.9em',
-  //             },
+//             },
-  //           }, 'Transaction Error. Exception thrown in contract code.')
+//           }, 'Transaction Error. Exception thrown in contract code.')
-  //         : null,
+//         : null,
 
-  //         !isValidAddress ?
+//         !isValidAddress ?
-  //           h('.error', {
+//           h('.error', {
-  //             style: {
+//             style: {
-  //               marginLeft: 50,
+//               marginLeft: 50,
-  //               fontSize: '0.9em',
+//               fontSize: '0.9em',
-  //             },
+//             },
-  //           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
-  //         : null,
+//         : null,
 
-  //         insufficientBalance ?
+//         insufficientBalance ?
-  //           h('span.error', {
+//           h('span.error', {
-  //             style: {
+//             style: {
-  //               marginLeft: 50,
+//               marginLeft: 50,
-  //               fontSize: '0.9em',
+//               fontSize: '0.9em',
-  //             },
+//             },
-  //           }, 'Insufficient balance for transaction')
+//           }, 'Insufficient balance for transaction')
-  //         : null,
+//         : null,
 
-  //         // send + cancel
+//         // send + cancel
-  //         h('.flex-row.flex-space-around.conf-buttons', {
+//         h('.flex-row.flex-space-around.conf-buttons', {
-  //           style: {
+//           style: {
-  //             display: 'flex',
+//             display: 'flex',
-  //             justifyContent: 'flex-end',
+//             justifyContent: 'flex-end',
-  //             margin: '14px 25px',
+//             margin: '14px 25px',
-  //           },
+//           },
-  //         }, [
+//         }, [
-  //           h('button', {
+//           h('button', {
-  //             onClick: (event) => {
+//             onClick: (event) => {
-  //               this.resetGasFields()
+//               this.resetGasFields()
-  //               event.preventDefault()
+//               event.preventDefault()
-  //             },
+//             },
-  //           }, 'Reset'),
+//           }, 'Reset'),
 
-  //           // Accept Button or Buy Button
+//           // Accept Button or Buy Button
-  //           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
-  //             h('input.confirm.btn-green', {
+//             h('input.confirm.btn-green', {
-  //               type: 'submit',
+//               type: 'submit',
-  //               value: 'SUBMIT',
+//               value: 'SUBMIT',
-  //               style: { marginLeft: '10px' },
+//               style: { marginLeft: '10px' },
-  //               disabled: buyDisabled,
+//               disabled: buyDisabled,
-  //             }),
+//             }),
 
-  //           h('button.cancel.btn-red', {
+//           h('button.cancel.btn-red', {
-  //             onClick: props.cancelTransaction,
+//             onClick: props.cancelTransaction,
-  //           }, 'Reject'),
+//           }, 'Reject'),
-  //         ]),
+//         ]),
-  //         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
-  //           style: {
+//           style: {
-  //             display: 'flex',
+//             display: 'flex',
-  //             justifyContent: 'flex-end',
+//             justifyContent: 'flex-end',
-  //             margin: '14px 25px',
+//             margin: '14px 25px',
-  //           },
+//           },
-  //         }, [
+//         }, [
-  //           h('button.cancel.btn-red', {
+//           h('button.cancel.btn-red', {
-  //             onClick: props.cancelAllTransactions,
+//             onClick: props.cancelAllTransactions,
-  //           }, 'Reject All'),
+//           }, 'Reject All'),
-  //         ]) : null,
+//         ]) : null,
-  //       ]),
+//       ]),
-  //     ])
+//     ])
-  //   )
+//   )
-  // }
+// }
       ]),
 
       h('form#pending-tx-form', {
@@ -448,7 +435,6 @@ ConfirmSendEther.prototype.render = function () {
           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,8 +480,8 @@ 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.renderToRow(),
@@ -492,6 +492,7 @@ SendTransactionScreen.prototype.renderForm = function () {
 
       // this.renderMemoRow(),
 
+    ]),
   ])
 }