breakout pending-tx-details

1 files changed, 6 insertions, 28 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 484046827..f889877c9 100644
--- a/ui/app/components/pending-tx.js
+++ b/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
-      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),
+      actionButtons(state),
 
     ])