Make transaction list into actual React Component

ui/app/account-detail.js

@@ -7,10 +7,11 @@ const copyToClipboard = require('copy-to-clipboard')
 const actions = require('./actions')
 const addressSummary = require('./util').addressSummary
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const valuesFor = require('./util').valuesFor
 
 const Identicon = require('./components/identicon')
 const EtherBalance = require('./components/eth-balance')
-const transactionList = require('./components/transaction-list')
+const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
@@ -24,7 +25,9 @@ function mapStateToProps(state) {
     address: state.metamask.selectedAccount,
     accountDetail: state.appState.accountDetail,
     transactions: state.metamask.transactions,
-    networkVersion: state.metamask.network,
+    network: state.metamask.network,
+    unconfTxs: valuesFor(state.metamask.unconfTxs),
+    unconfMsgs: valuesFor(state.metamask.unconfMsgs),
   }
 }
 
@@ -139,7 +142,7 @@ AccountDetailScreen.prototype.render = function() {
           }),
 
           h('button', {
-            onClick: () => this.props.dispatch(actions.showSendPage()),
+            onClick: () => props.dispatch(actions.showSendPage()),
             style: {
               margin: 10,
             },
@@ -183,18 +186,22 @@ AccountDetailScreen.prototype.subview = function() {
 }
 
 AccountDetailScreen.prototype.transactionList = function() {
-  var state = this.props
-  var transactions = state.transactions
+  const { transactions, unconfTxs, unconfMsgs, address, network } = this.props
 
   var txsToRender = transactions
-    // only transactions that are from the current address
-    .filter(tx => tx.txParams.from === state.address)
-    // only transactions that are on the current network
-    .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
-    // sort by recency
-    .sort((a, b) => b.time - a.time)
+  // only transactions that are from the current address
+  .filter(tx => tx.txParams.from === address)
+  // only transactions that are on the current network
+  .filter(tx => tx.txParams.metamaskNetworkId === network)
+  // sort by recency
+  .sort((a, b) => b.time - a.time)
 
-  return transactionList(txsToRender, state.networkVersion)
+  return h(TransactionList, {
+    txsToRender,
+    network,
+    unconfTxs,
+    unconfMsgs,
+  })
 }
 
 AccountDetailScreen.prototype.navigateToAccounts = function(event){

ui/app/components/transaction-list.js

@@ -1,4 +1,7 @@
+const Component = require('react').Component
 const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
 const vreme = new (require('vreme'))
 const formatBalance = require('../util').formatBalance
 const addressSummary = require('../util').addressSummary
@@ -7,8 +10,18 @@ const Panel = require('./panel')
 const Identicon = require('./identicon')
 const EtherBalance = require('./eth-balance')
 
+module.exports = TransactionList
+
+
+inherits(TransactionList, Component)
+function TransactionList() {
+  Component.call(this)
+}
+
+TransactionList.prototype.render = function() {
+  const { txsToRender, network, unconfTxs, unconfMsgs } = this.props
+  const transactions = txsToRender.concat(unconfTxs).concat(unconfMsgs)
 
-module.exports = function(transactions, network) {
   return (
 
     h('section.transaction-list', [
@@ -49,53 +62,49 @@ module.exports = function(transactions, network) {
               height: '100%',
             },
           }, 'No transaction history...')]
-
       ))
+    ])
+  )
+}
 
+
+function renderTransaction(transaction, i){
+  var txParams = transaction.txParams
+  var date = formatDate(transaction.time)
+
+  return (
+
+    h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
+      key: `tx-${transaction.id + i}`,
+      onClick: (event) => {
+        if (!transaction.hash) return
+        var url = explorerLink(transaction.hash, parseInt(network))
+        chrome.tabs.create({ url })
+      },
+      style: {
+        padding: '20px 0',
+      },
+    }, [
+
+      // large identicon
+      h('.identicon-wrapper.flex-column.flex-center.select-none', [
+        identicon(txParams, transaction),
+      ]),
+
+      h('.flex-column', [
+
+        h('div', date),
+
+        recipientField(txParams, transaction),
+
+      ]),
+
+      h(EtherBalance, {
+        value: txParams.value,
+      }),
     ])
 
   )
-
-
-  function renderTransaction(transaction, i){
-
-    var txParams = transaction.txParams
-    var date = formatDate(transaction.time)
-
-    return (
-
-      h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
-        key: `tx-${transaction.id + i}`,
-        onClick: (event) => {
-          if (!transaction.hash) return
-          var url = explorerLink(transaction.hash, parseInt(network))
-          chrome.tabs.create({ url })
-        },
-        style: {
-          padding: '20px 0',
-        },
-      }, [
-
-        // large identicon
-        h('.identicon-wrapper.flex-column.flex-center.select-none', [
-          identicon(txParams, transaction),
-        ]),
-
-        h('.flex-column', [
-
-          h('div', date),
-
-          recipientField(txParams, transaction),
-
-        ]),
-
-        h(EtherBalance, {
-          value: txParams.value,
-        }),
-      ])
-
-    )
-  }
 }
 
 function recipientField(txParams, transaction) {
@@ -121,7 +130,6 @@ function recipientField(txParams, transaction) {
       'Contract Published',
       failIfFailed(transaction),
     ])
-
   }
 }