Add clicking txs in list shows tx conf screen

ui/app/account-detail.js

@@ -201,6 +201,9 @@ AccountDetailScreen.prototype.transactionList = function() {
     network,
     unconfTxs,
     unconfMsgs,
+    viewPendingTx:(txId) => {
+      this.props.dispatch(actions.viewPendingTx(txId))
+    }
   })
 }
 

ui/app/actions.js

@@ -76,6 +76,8 @@ var actions = {
   txError: txError,
   nextTx: nextTx,
   previousTx: previousTx,
+  viewPendingTx: viewPendingTx,
+  VIEW_PENDING_TX: 'VIEW_PENDING_TX',
   // app messages
   showAccountDetail: showAccountDetail,
   BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL',
@@ -387,6 +389,13 @@ function nextTx() {
   }
 }
 
+function viewPendingTx(txId) {
+  return {
+    type: actions.VIEW_PENDING_TX,
+    value: txId,
+  }
+}
+
 function previousTx() {
   return {
     type: actions.PREVIOUS_TX,

ui/app/components/transaction-list-item.js

@@ -25,6 +25,7 @@ TransactionListItem.prototype.render = function() {
 
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
+  var isPending = transaction.status === 'unconfirmed'
 
   let txParams
   if (isTx) {
@@ -33,10 +34,16 @@ TransactionListItem.prototype.render = function() {
     txParams = transaction.msgParams
   }
 
+  const isClickable = ('hash' in transaction) || isPending
+
   return (
-    h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
+    h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
       key: `tx-${transaction.id + i}`,
       onClick: (event) => {
+        if (isPending) {
+          this.props.showTx(transaction.id)
+        }
+
         if (!transaction.hash) return
         var url = explorerLink(transaction.hash, parseInt(network))
         chrome.tabs.create({ url })

ui/app/components/transaction-list.js

@@ -16,7 +16,6 @@ TransactionList.prototype.render = function() {
   const { txsToRender, network, unconfTxs, unconfMsgs } = this.props
   const transactions = txsToRender.concat(unconfMsgs)
   .sort((a, b) => b.time - a.time)
-  console.dir(transactions)
 
   return (
 
@@ -53,7 +52,10 @@ TransactionList.prototype.render = function() {
         transactions.length ?
           transactions.map((transaction, i) => {
             return h(TransactionListItem, {
-              transaction, i
+              transaction, i,
+              showTx:(txId) => {
+                this.props.viewPendingTx(txId)
+              },
             })
           })
         :

ui/app/reducers/app.js

@@ -12,10 +12,10 @@ function reduceApp(state, action) {
   const pendingTxs = hasPendingTxs(state)
   let name = 'accounts'
   if (selectedAccount) {
-    defaultView = 'accountDetail'
+    name = 'accountDetail'
   }
   if (pendingTxs) {
-    defaultView = 'confTx'
+    name = 'confTx'
   }
 
   var defaultView = {
@@ -270,6 +270,17 @@ function reduceApp(state, action) {
       }
     })
 
+  case actions.VIEW_PENDING_TX:
+    const context = indexForPending(state, action.value)
+    return extend(appState, {
+      transForward: true,
+      currentView: {
+        name: 'confTx',
+        context,
+        warning: null,
+      }
+    })
+
   case actions.PREVIOUS_TX:
     return extend(appState, {
       transForward: false,
@@ -366,3 +377,16 @@ function hasPendingTxs (state) {
   var unconfTxList = txHelper(unconfTxs, unconfMsgs)
   return unconfTxList.length > 0
 }
+
+function indexForPending(state, txId) {
+  var unconfTxs = state.metamask.unconfTxs
+  var unconfMsgs = state.metamask.unconfMsgs
+  var unconfTxList = txHelper(unconfTxs, unconfMsgs)
+  let idx
+  unconfTxList.forEach((tx, i) => {
+    if (tx.id === txId) {
+      idx = i
+    }
+  })
+  return idx
+}