1 files changed, 141 insertions, 0 deletions
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
new file mode 100644
index 000000000..8f6f09348
--- /dev/null
+++ b/ui/app/components/tx-list.js
@@ -0,0 +1,141 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const valuesFor = require('../util').valuesFor
+
+module.exports = connect(mapStateToProps)(TxList)
+
+function mapStateToProps(state) {
+  return {
+    network: state.metamask.network,
+    unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs),
+    shapeShiftTxList: state.metamask.shapeShiftTxList,
+    transactions: state.metamask.selectedAddressTxList || [],
+    conversionRate: state.metamask.conversionRate,
+  }
+}
+
+inherits(TxList, Component)
+function TxList () {
+  Component.call(this)
+}
+
+const contentDivider = h('div', {
+  style: {
+    marginLeft: '1.3em',
+    marginRight: '1.3em',
+    height:'1px',
+    background:'#E7E7E7', // TODO: make custom color
+  },
+})
+
+TxList.prototype.render = function () {
+
+  const { transactions, network, unapprovedMsgs, conversionRate } = this.props
+
+  var shapeShiftTxList
+  if (network === '1') {
+    shapeShiftTxList = this.props.shapeShiftTxList
+  }
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+  .sort((a, b) => b.time - a.time)
+
+  console.log("transactions to render", txsToRender)
+
+  return h('div.flex-column.tx-list-container', {}, [
+
+    h('div.flex-row.tx-list', {
+      style: {
+        margin: '1.8em 0.9em 0.8em 0.9em',
+      },
+    }, [
+
+      // tx-view-tab.js
+      h('div.flex-row', {
+      }, [
+
+        h('div', {
+          style: {
+            borderBottom: '0.07em solid black',
+            paddingBottom: '0.015em',
+          }
+        }, 'TRANSACTIONS'),
+
+        h('div', {
+          style: {
+            marginLeft: '1.25em',
+          }
+        }, 'TOKENS'),
+
+      ]),
+    ]),
+
+    contentDivider,
+
+    this.renderTransactionListItem(),
+
+    contentDivider,
+
+    this.renderTransactionListItem(),
+
+    contentDivider,
+
+    // column
+    // tab row
+    // divider
+    // item
+  ])
+}
+
+TxList.prototype.renderTransactionListItem = function () {
+  return h('div.flex-column', {
+    style: {
+      alignItems: 'stretch',
+      margin: '0.6em 1.3em 0.6em 1.3em',
+    }
+  }, [
+
+    h('div', {
+      style: {
+        flexGrow: 1,
+        marginTop: '0.3em',
+      }
+    }, 'Jul 01, 2017'),
+
+    h('div.flex-row', {
+      style: {
+        alignItems: 'stretch',
+      }
+    }, [
+
+      h('div', {
+        style: {
+          flexGrow: 1,
+        }
+      }, 'icon'),
+
+      h('div', {
+        style: {
+          flexGrow: 3,
+        }
+      }, 'Hash'),
+
+      h('div', {
+        style: {
+          flexGrow: 5,
+        }
+      }, 'Status'),
+
+      h('div', {
+        style: {
+          flexGrow: 2,
+        }
+      }, 'Details'),
+
+    ])
+
+  ])
+}
+