breakout pending-tx-details

app/scripts/lib/notifications.js

@@ -4,7 +4,7 @@ const findDOMNode = require('react-dom').findDOMNode
 const render = require('react-dom').render
 const h = require('react-hyperscript')
 const uiUtils = require('../../../ui/app/util')
-const renderPendingTx = require('../../../ui/app/components/pending-tx').prototype.renderGeneric
+const renderPendingTx = require('../../../ui/app/components/pending-tx-details').prototype.renderGeneric
 const MetaMaskUiCss = require('../../../ui/css')
 var notificationHandlers = {}
 
@@ -64,7 +64,7 @@ function createTxNotification (opts) {
     var id = createId()
     chrome.notifications.create(id, {
       type: 'image',
-      // requireInteraction: true,
+      requireInteraction: true,
       iconUrl: '/images/icon-128.png',
       imageUrl: imageUrl,
       title: opts.title,
@@ -113,8 +113,7 @@ function createMsgNotification (opts) {
 
 function renderTransactionNotificationSVG(opts, cb){
   var state = {
-    nonInteractive: true,
+    imageifyIdenticons: false,
-    inlineIdenticons: true,
     txData: {
       txParams: opts.txParams,
       time: (new Date()).getTime(),

ui/app/components/account-panel.js

@@ -46,7 +46,7 @@ AccountPanel.prototype.render = function () {
       h('.identicon-wrapper.flex-column.select-none', [
         h(Identicon, {
           address: panelState.identiconKey,
-          imageify: !state.inlineIdenticons,
+          imageify: state.imageifyIdenticons,
         }),
         h('span.font-small', panelState.identiconLabel),
       ]),

ui/app/components/pending-tx-details.js

@@ -0,0 +1,65 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const AccountPanel = require('./account-panel')
+const addressSummary = require('../util').addressSummary
+const readableDate = require('../util').readableDate
+const formatBalance = require('../util').formatBalance
+
+module.exports = PendingTxDetails
+
+inherits(PendingTxDetails, Component)
+function PendingTxDetails () {
+  Component.call(this)
+}
+
+PendingTxDetails.prototype.render = function () {
+  var state = this.props
+  return this.renderGeneric(h, state)
+}
+
+PendingTxDetails.prototype.renderGeneric = function (h, state) {
+  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 }
+
+  return (
+
+    h('div', [
+
+      // account that will sign
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+        imageifyIdenticons: state.imageifyIdenticons,
+      }),
+
+      // tx data
+      h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        h('.flex-row.flex-space-between', [
+          h('label.font-small', 'TO ADDRESS'),
+          h('span.font-small', addressSummary(txParams.to)),
+        ]),
+
+        h('.flex-row.flex-space-between', [
+          h('label.font-small', 'DATE'),
+          h('span.font-small', readableDate(txData.time)),
+        ]),
+
+        h('.flex-row.flex-space-between', [
+          h('label.font-small', 'AMOUNT'),
+          h('span.font-small', formatBalance(txParams.value)),
+        ]),
+      ]),
+
+    ])
+    
+  )
+
+}

ui/app/components/pending-tx.js

@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
 const AccountPanel = require('./account-panel')
+const PendingTxDetails = require('./pending-tx-details')
 const addressSummary = require('../util').addressSummary
 const readableDate = require('../util').readableDate
 const formatBalance = require('../util').formatBalance
@@ -29,10 +30,11 @@ PendingTx.prototype.renderGeneric = function (h, state) {
 
   return (
 
-    h('.transaction', {
+    h('div', {
       key: txData.id,
     }, [
 
+      // header
       h('h3', {
         style: {
           fontWeight: 'bold',
@@ -40,35 +42,11 @@ PendingTx.prototype.renderGeneric = function (h, state) {
         },
       }, 'Submit Transaction'),
 
-      // account that will sign
+      // tx info
-      h(AccountPanel, {
+      h(PendingTxDetails, state),
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-        inlineIdenticons: state.inlineIdenticons,
-      }),
-
-      // tx data
-      h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
-
-        h('.flex-row.flex-space-between', [
-          h('label.font-small', 'TO ADDRESS'),
-          h('span.font-small', addressSummary(txParams.to)),
-        ]),
-
-        h('.flex-row.flex-space-between', [
-          h('label.font-small', 'DATE'),
-          h('span.font-small', readableDate(txData.time)),
-        ]),
-
-        h('.flex-row.flex-space-between', [
-          h('label.font-small', 'AMOUNT'),
-          h('span.font-small', formatBalance(txParams.value)),
-        ]),
-      ]),
 
       // send + cancel
-      state.nonInteractive ? null : actionButtons(state),
+      actionButtons(state),
 
     ])
     

ui/app/conf-tx.js

@@ -6,7 +6,7 @@ const connect = require('react-redux').connect
 const actions = require('./actions')
 const txHelper = require('../lib/tx-helper')
 
-const ConfirmTx = require('./components/pending-tx')
+const PendingTx = require('./components/pending-tx')
 const PendingMsg = require('./components/pending-msg')
 
 module.exports = connect(mapStateToProps)(ConfirmTxScreen)
@@ -101,7 +101,7 @@ ConfirmTxScreen.prototype.render = function () {
 function currentTxView (opts) {
   if ('txParams' in opts.txData) {
     // This is a pending transaction
-    return h(ConfirmTx, opts)
+    return h(PendingTx, opts)
   } else if ('msgParams' in opts.txData) {
     // This is a pending message to sign
     return h(PendingMsg, opts)