Began reworking tx conf view

3 files changed, 174 insertions, 16 deletions

diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index d50522fa2..abaaf8163 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -22,7 +22,7 @@ AccountPanel.prototype.render = function () {
   var panelState = {
     key: `accountPanel${identity.address}`,
     identiconKey: identity.address,
-    identiconLabel: identity.name,
+    identiconLabel: identity.name || '',
     attributes: [
       {
         key: 'ADDRESS',
diff --git a/ui/app/components/mini-account-panel.js b/ui/app/components/mini-account-panel.js
new file mode 100644
index 000000000..745ff2077
--- /dev/null
+++ b/ui/app/components/mini-account-panel.js
@@ -0,0 +1,105 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const Identicon = require('./identicon')
+const formatBalance = require('../util').formatBalance
+const TransactionIcon = require('./transaction-list-item-icon')
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel () {
+  Component.call(this)
+}
+
+AccountPanel.prototype.render = function () {
+  var props = this.props
+  var picOrder = props.picOrder || 'left'
+  var isFauceting = props.isFauceting
+  const { attrs, imageSeed } = props
+
+  return (
+
+    h('.identity-panel.flex-row.flex-left', {
+      style: {
+        cursor: props.onClick ? 'pointer' : undefined,
+      },
+      onClick: props.onClick,
+    }, [
+
+      this.genIcon(imageSeed, picOrder),
+
+      h('div.flex-column.flex-justify-center', {
+        style: {
+          lineHeight: '15px',
+          order: 2,
+          display: 'flex',
+          alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end',
+        },
+      }, [
+
+        props.attrs.map((attr) => {
+          return h('span.font-small', {
+            key: `mini-${attr}`,
+            style: {
+              fontFamily: 'Montserrat UltraLight, Montserrat Light, Montserrat',
+            },
+          }, attr)
+        }),
+
+      ]),
+
+    ])
+  )
+}
+
+AccountPanel.prototype.genIcon= function(seed, picOrder) {
+  const props = this.props
+
+  // When there is no seed value, this is a contract creation.
+  // We then show the contract icon.
+  if (!seed) {
+    return h('.identicon-wrapper.flex-column.select-none', {
+      style: {
+        order: picOrder === 'left' ? 1 : 3,
+     },
+    }, [
+      h('i.fa.fa-file-text-o.fa-lg', {
+        style: {
+          fontSize: '42px',
+          transform: 'translate(0px, -16px)',
+        },
+      })
+    ])
+  }
+
+  // If there was a seed, we return an identicon for that address.
+  return h('.identicon-wrapper.flex-column.select-none', {
+    style: {
+      order: picOrder === 'left' ? 1 : 3,
+    },
+  }, [
+    h(Identicon, {
+      address: seed,
+      imageify: props.imageifyIdenticons,
+    }),
+  ])
+}
+
+function balanceOrFaucetingIndication (account, isFauceting) {
+  // Temporarily deactivating isFauceting indication
+  // because it shows fauceting for empty restored accounts.
+  if (/* isFauceting*/ false) {
+    return {
+      key: 'Account is auto-funding.',
+      value: 'Please wait.',
+    }
+  } else {
+    return {
+      key: 'BALANCE',
+      value: formatBalance(account.balance),
+    }
+  }
+}
+
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 2ba613f20..0d972ea05 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -2,10 +2,11 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
-const AccountPanel = require('./account-panel')
+const MiniAccountPanel = require('./mini-account-panel')
 const addressSummary = require('../util').addressSummary
 const readableDate = require('../util').readableDate
 const formatBalance = require('../util').formatBalance
+const nameForAddress = require('../../lib/contract-namer')
 
 module.exports = PendingTxDetails
 
@@ -14,12 +15,10 @@ function PendingTxDetails () {
   Component.call(this)
 }
 
-PendingTxDetails.prototype.render = function () {
-  var state = this.props
-  return this.renderGeneric(h, state)
-}
+const PTXP = PendingTxDetails.prototype
 
-PendingTxDetails.prototype.renderGeneric = function (h, state) {
+PTXP.render = function () {
+  var state = this.props
   var txData = state.txData
 
   var txParams = txData.txParams || {}
@@ -27,17 +26,39 @@ PendingTxDetails.prototype.renderGeneric = function (h, state) {
   var identity = state.identities[address] || { address: address }
   var account = state.accounts[address] || { address: address }
 
-  return (
+  var isContractDeploy = !('to' in txParams)
 
+  return (
     h('div', [
 
-      // account that will sign
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-        imageifyIdenticons: state.imageifyIdenticons,
-      }),
+      h('.flex-row.flex-center', {
+        style: {
+          maxWidth: '100%',
+        },
+      }, [
+
+        h(MiniAccountPanel, {
+          attrs: [
+            identity.name,
+            addressSummary(address, 6, 4, false),
+            formatBalance(identity.balance),
+          ],
+          imageSeed: address,
+          imageifyIdenticons: state.imageifyIdenticons,
+          picOrder: 'right',
+        }),
+
+        h('img', {
+          src: 'images/forward-carrat.svg',
+          style: {
+            padding: '5px 6px 0px 10px',
+            height: '48px',
+          },
+        }),
+
+        this.miniAccountPanelForRecipient(),
+
+      ]),
 
       // tx data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
@@ -59,7 +80,39 @@ PendingTxDetails.prototype.renderGeneric = function (h, state) {
       ]),
 
     ])
-    
   )
+}
 
+PTXP.miniAccountPanelForRecipient = function() {
+  var state = this.props
+  var txData = state.txData
+
+  var txParams = txData.txParams || {}
+  var address = txParams.from || state.selectedAddress
+  var identity = state.identities[address] || { address: address }
+  var account = state.accounts[address] || { address: address }
+
+  var isContractDeploy = !('to' in txParams)
+
+  // If it's not a contract deploy, send to the account
+  if (!isContractDeploy) {
+    return h(MiniAccountPanel, {
+      attrs: [
+        nameForAddress(txParams.to),
+        addressSummary(txParams.to, 6, 4, false),
+      ],
+      imageSeed: address,
+      imageifyIdenticons: state.imageifyIdenticons,
+      picOrder: 'left',
+    })
+  } else {
+     return h(MiniAccountPanel, {
+      attrs: [
+        'New Contract'
+      ],
+      imageifyIdenticons: state.imageifyIdenticons,
+      picOrder: 'left',
+    })
+  }
 }
+