1 files changed, 13 insertions, 56 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 484046827..197e0436c 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -1,11 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const PendingTxDetails = require('./pending-tx-details')
 
-const AccountPanel = require('./account-panel')
-const addressSummary = require('../util').addressSummary
-const readableDate = require('../util').readableDate
-const formatBalance = require('../util').formatBalance
 
 module.exports = PendingTx
 
@@ -16,23 +13,15 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   var state = this.props
-  return this.renderGeneric(h, state)
-}
-
-PendingTx.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('.transaction', {
+    h('div', {
       key: txData.id,
     }, [
 
+      // header
       h('h3', {
         style: {
           fontWeight: 'bold',
@@ -40,53 +29,21 @@ PendingTx.prototype.renderGeneric = function (h, state) {
         },
       }, 'Submit Transaction'),
 
-      // account that will sign
-      h(AccountPanel, {
-        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)),
-        ]),
-      ]),
+      // tx info
+      h(PendingTxDetails, state),
 
       // send + cancel
-      state.nonInteractive ? null : actionButtons(state),
+      h('.flex-row.flex-space-around', [
+        h('button', {
+          onClick: state.cancelTransaction,
+        }, 'Cancel'),
+        h('button', {
+          onClick: state.sendTransaction,
+        }, 'Send'),
+      ]),
 
     ])
     
   )
 
 }
-
-function actionButtons(state){
-  return (
-
-    h('.flex-row.flex-space-around', [
-      h('button', {
-        onClick: state.cancelTransaction,
-      }, 'Cancel'),
-      h('button', {
-        onClick: state.sendTransaction,
-      }, 'Send'),
-    ])
-
-  )
-}
\ No newline at end of file