Create tx-list-item component.

3 files changed, 123 insertions, 74 deletions

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
new file mode 100644
index 000000000..85699ceeb
--- /dev/null
+++ b/ui/app/components/tx-list-item.js
@@ -0,0 +1,92 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('./identicon')
+
+module.exports = TxListItem
+
+inherits(TxListItem, Component)
+function TxListItem () {
+  Component.call(this)
+}
+
+TxListItem.prototype.getAddressText = function (address) {
+  return address
+    ? `${address.slice(0, 10)}...${address.slice(-4)}`
+    : 'Contract Published'
+}
+
+TxListItem.prototype.render = function () {
+  const {
+    transactionStatus,
+    onClick,
+    transActionId,
+    dateString,
+    address,
+    transactionAmount,
+    className
+  } = this.props
+
+  return h(`div${className || ''}`, {
+    key: transActionId,
+    onClick: () => onClick && onClick(transActionId),
+  }, [
+    h(`div.flex-column.tx-list-item-wrapper`, {}, [
+
+      h('div.tx-list-date-wrapper', {
+        style: {},
+      }, [
+        h('span.tx-list-date', {}, [
+          dateString,
+        ]),
+      ]),
+
+      h('div.flex-row.tx-list-content-wrapper', {
+        style: {},
+      }, [
+
+        h('div.tx-list-identicon-wrapper', {
+          style: {},
+        }, [
+          h(Identicon, {
+            address,
+            diameter: 28,
+          }),
+        ]),
+
+        h('div.tx-list-account-and-status-wrapper', {}, [
+          h('div.tx-list-account-wrapper', {
+            style: {},
+          }, [
+            h('span.tx-list-account', {}, [
+              this.getAddressText(address),
+            ]),
+          ]),
+
+          h('div.tx-list-status-wrapper', {
+            style: {},
+          }, [
+            h('span.tx-list-status', {}, [
+              transactionStatus,
+            ]),
+          ]),
+        ]),
+
+        h('div.flex-column.tx-list-details-wrapper', {
+          style: {},
+        }, [
+
+          h('span.tx-list-value', {}, [
+            transactionAmount,
+          ]),
+
+          h('span.tx-list-fiat-value', {}, [
+            '+ $300 USD',
+          ]),
+
+        ]),
+      ]),
+    ]) // holding on icon from design
+  ])
+}
+
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 6cbd123f8..654b95416 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -3,7 +3,7 @@ const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const selectors = require('../selectors')
-const Identicon = require('./identicon')
+const TxListItem = require('./tx-list-item')
 const { formatBalance, formatDate } = require('../util')
 const { showConfTxPage } = require('../actions')
 
@@ -53,16 +53,6 @@ TxList.prototype.render = function () {
   ])
 }
 
-TxList.prototype.getAddressText = function (transaction) {
-  const {
-    txParams: { to },
-  } = transaction
-
-  return to
-    ? `${to.slice(0, 10)}...${to.slice(-4)}`
-    : 'Contract Published'
-}
-
 TxList.prototype.renderTranstions = function () {
   const { txsToRender } = this.props
 
@@ -92,70 +82,21 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
   } = props
   const { showConfTxPage } = this.props
 
-  return h('div.tx-list-item', {
-    key: transaction.id,
-  }, [
-    h('div.flex-column.tx-list-item__wrapper', {
-      onClick: () => transactionStatus === 'unapproved' && showConfTxPage({id: transActionId}),
-      style: {},
-    }, [
-
-      h('div.tx-list-date-wrapper', {
-        style: {},
-      }, [
-        h('span.tx-list-date', {}, [
-          dateString,
-        ]),
-      ]),
-
-      h('div.flex-row.tx-list-content-wrapper', {
-        style: {},
-      }, [
-
-        h('div.tx-list-identicon-wrapper', {
-          style: {},
-        }, [
-          h(Identicon, {
-            address,
-            diameter: 28,
-          }),
-        ]),
-
-        h('div.tx-list-account-and-status-wrapper', {}, [
-          h('div.tx-list-account-wrapper', {
-            style: {},
-          }, [
-            h('span.tx-list-account', {}, [
-              this.getAddressText(transaction),
-            ]),
-          ]),
-
-          h('div.tx-list-status-wrapper', {
-            style: {},
-          }, [
-            h('span.tx-list-status', {}, [
-              transactionStatus,
-            ]),
-          ]),
-        ]),
-
-        h('div.flex-column.tx-list-details-wrapper', {
-          style: {},
-        }, [
-
-          h('span.tx-list-value', {}, [
-            transactionAmount,
-          ]),
-
-          h('span.tx-list-fiat-value', {}, [
-            '+ $300 USD',
-          ]),
-
-        ]),
+  if (!address) return null
+    
+  const opts = {
+    transactionStatus,
+    transActionId,
+    dateString,
+    address,
+    transactionAmount,
+  }
 
-      ]),
-    ]),
+  if (transactionStatus === 'unapproved') {
+    opts.onClick = () => showConfTxPage({id: transActionId})
+    opts.className = '.tx-list-pending-item-container'
+  }
 
-  ])
+  return h(TxListItem, opts)
 }
 
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index bdf84b919..87e8e693e 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -61,6 +61,22 @@
   flex: 0 0 70px;
   align-items: stretch;
   justify-content: flex-start;
+
+  @media screen and (max-width: $break-small) {
+    padding: 0 1.3em .95em;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin: 0 2.37em;
+  }
+}
+
+.tx-list-pending-item-container {
+  cursor: pointer;
+}
+
+.tx-list-pending-item-container:hover {
+  background: $alto;
 }
 
 .tx-list-date-wrapper {