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
+  const { transactions, unconfTxs, unconfMsgs, address, network } = this.props
-  var transactions = state.transactions
 
   var txsToRender = transactions
   // only transactions that are from the current address
-    .filter(tx => tx.txParams.from === state.address)
+  .filter(tx => tx.txParams.from === address)
   // only transactions that are on the current network
-    .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
+  .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,16 +62,13 @@ module.exports = function(transactions, network) {
               height: '100%',
             },
           }, 'No transaction history...')]
-
       ))
-
     ])
-
   )
+}
 
 
 function renderTransaction(transaction, i){
-
   var txParams = transaction.txParams
   var date = formatDate(transaction.time)
 
@@ -96,7 +106,6 @@ module.exports = function(transactions, network) {
 
   )
 }
-}
 
 function recipientField(txParams, transaction) {
   if (txParams.to) {
@@ -121,7 +130,6 @@ function recipientField(txParams, transaction) {
       'Contract Published',
       failIfFailed(transaction),
     ])
-
   }
 }