1 files changed, 136 insertions, 44 deletions
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 9fef52355..4e3d2cb93 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -1,25 +1,42 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
-const explorerLink = require('../../lib/explorer-link')
+const explorerLink = require('etherscan-link').createExplorerLink
 const CopyButton = require('./copyButton')
-const vreme = new (require('vreme'))
+const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
+const numberToBN = require('number-to-bn')
+const actions = require('../actions')
 
 const TransactionIcon = require('./transaction-list-item-icon')
 const ShiftListItem = require('./shift-list-item')
-module.exports = TransactionListItem
+
+const mapDispatchToProps = dispatch => {
+  return {
+    retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(TransactionListItem)
 
 inherits(TransactionListItem, Component)
 function TransactionListItem () {
   Component.call(this)
 }
 
+TransactionListItem.prototype.showRetryButton = function () {
+  const { transaction = {} } = this.props
+  const { status, time } = transaction
+  return status === 'submitted' && Date.now() - time > 30000
+}
+
 TransactionListItem.prototype.render = function () {
-  const { transaction, network } = this.props
+  const { transaction, network, conversionRate, currentCurrency } = this.props
+  const { status } = transaction
   if (transaction.key === 'shapeshift') {
     if (network === '1') return h(ShiftListItem, transaction)
   }
@@ -27,11 +44,11 @@ TransactionListItem.prototype.render = function () {
 
   let isLinkable = false
   const numericNet = parseInt(network)
-  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 42
+  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42
 
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
-  var isPending = transaction.status === 'unapproved'
+  var isPending = status === 'unapproved'
   let txParams
   if (isTx) {
     txParams = transaction.txParams
@@ -39,9 +56,11 @@ TransactionListItem.prototype.render = function () {
     txParams = transaction.msgParams
   }
 
+  const nonce = txParams.nonce ? numberToBN(txParams.nonce).toString(10) : ''
+
   const isClickable = ('hash' in transaction && isLinkable) || isPending
   return (
-    h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+    h('.transaction-list-item.flex-column', {
       onClick: (event) => {
         if (isPending) {
           this.props.showTx(transaction.id)
@@ -53,42 +72,92 @@ TransactionListItem.prototype.render = function () {
       },
       style: {
         padding: '20px 0',
+        alignItems: 'center',
       },
     }, [
+      h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+        style: {
+          width: '100%',
+        },
+      }, [
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+        ]),
 
-      h('.identicon-wrapper.flex-column.flex-center.select-none', [
-        h('.pop-hover', {
-          onClick: (event) => {
-            event.stopPropagation()
-            if (!isTx || isPending) return
-            var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}`
-            global.platform.openWindow({ url })
-          },
+        h(Tooltip, {
+          title: 'Transaction Number',
+          position: 'right',
         }, [
-          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+          h('span', {
+            style: {
+              display: 'flex',
+              cursor: 'normal',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px',
+            },
+          }, nonce),
         ]),
-      ]),
 
-      h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
-        domainField(txParams),
-        h('div', date),
-        recipientField(txParams, transaction, isTx, isMsg),
-      ]),
+        h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+          domainField(txParams),
+          h('div', date),
+          recipientField(txParams, transaction, isTx, isMsg),
+        ]),
 
-      // Places a copy button if tx is successful, else places a placeholder empty div.
-      transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+        // Places a copy button if tx is successful, else places a placeholder empty div.
+        transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+
+        isTx ? h(EthBalance, {
+          value: txParams.value,
+          conversionRate,
+          currentCurrency,
+          width: '55px',
+          shorten: true,
+          showFiat: false,
+          style: {fontSize: '15px'},
+        }) : h('.flex-column'),
+      ]),
 
-      isTx ? h(EtherBalance, {
-        value: txParams.value,
-        width: '55px',
-        shorten: true,
-        showFiat: false,
-        style: {fontSize: '15px'},
-      }) : h('.flex-column'),
+      this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', {
+        onClick: event => {
+          event.stopPropagation()
+          this.resubmit()
+        },
+        style: {
+          height: '22px',
+          borderRadius: '22px',
+          color: '#F9881B',
+          padding: '0 20px',
+          backgroundColor: '#FFE3C9',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '8px',
+          cursor: 'pointer',
+        },
+      }, [
+        h('div', {
+          style: {
+            paddingRight: '2px',
+          },
+        }, 'Taking too long?'),
+        h('div', {
+          style: {
+            textDecoration: 'underline',
+          },
+        }, 'Retry with a higher gas price here'),
+      ]),
     ])
   )
 }
 
+TransactionListItem.prototype.resubmit = function () {
+  const { transaction } = this.props
+  this.props.retryTransaction(transaction.id)
+}
+
 function domainField (txParams) {
   return h('div', {
     style: {
@@ -121,7 +190,7 @@ function recipientField (txParams, transaction, isTx, isMsg) {
     },
   }, [
     message,
-    failIfFailed(transaction),
+    renderErrorOrWarning(transaction),
   ])
 }
 
@@ -129,18 +198,41 @@ function formatDate (date) {
   return vreme.format(new Date(date), 'March 16 2014 14:30')
 }
 
-function failIfFailed (transaction) {
-  if (transaction.status === 'rejected') {
+function renderErrorOrWarning (transaction) {
+  const { status } = transaction
+
+  // show rejected
+  if (status === 'rejected') {
     return h('span.error', ' (Rejected)')
   }
-  if (transaction.err) {
-
-    return h(Tooltip, {
-      title: transaction.err.message,
-      position: 'bottom',
-    }, [
-      h('span.error', ' (Failed)'),
-    ])
+  if (transaction.err || transaction.warning) {
+    const { err, warning = {} } = transaction
+    const errFirst = !!((err && warning) || err)
+
+    errFirst ? err.message : warning.message
+
+    // show error
+    if (err) {
+      const message = err.message || ''
+      return (
+          h(Tooltip, {
+            title: message,
+            position: 'bottom',
+          }, [
+            h(`span.error`, ` (Failed)`),
+          ])
+      )
+    }
+
+    // show warning
+    if (warning) {
+      const message = warning.message
+      return h(Tooltip, {
+        title: message,
+        position: 'bottom',
+      }, [
+        h(`span.warning`, ` (Warning)`),
+      ])
+    }
   }
-
 }