1 files changed, 79 insertions, 0 deletions
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
new file mode 100644
index 000000000..3b4ba741e
--- /dev/null
+++ b/ui/app/components/transaction-list.js
@@ -0,0 +1,79 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const TransactionListItem = require('./transaction-list-item')
+
+module.exports = TransactionList
+
+
+inherits(TransactionList, Component)
+function TransactionList () {
+  Component.call(this)
+}
+
+TransactionList.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)
+
+  return (
+
+    h('section.transaction-list', [
+
+      h('style', `
+        .transaction-list .transaction-list-item:not(:last-of-type) {
+          border-bottom: 1px solid #D4D4D4;
+        }
+        .transaction-list .transaction-list-item .ether-balance-label {
+          display: block !important;
+          font-size: small;
+        }
+      `),
+
+      h('.tx-list', {
+        style: {
+          overflowY: 'auto',
+          height: '300px',
+          padding: '0 20px',
+          textAlign: 'center',
+        },
+      }, [
+
+        txsToRender.length
+          ? txsToRender.map((transaction, i) => {
+            let key
+            switch (transaction.key) {
+              case 'shapeshift':
+                const { depositAddress, time } = transaction
+                key = `shift-tx-${depositAddress}-${time}-${i}`
+                break
+              default:
+                key = `tx-${transaction.id}-${i}`
+            }
+            return h(TransactionListItem, {
+              transaction, i, network, key,
+              conversionRate,
+              showTx: (txId) => {
+                this.props.viewPendingTx(txId)
+              },
+            })
+          })
+        : h('.flex-center', {
+          style: {
+            flexDirection: 'column',
+            height: '100%',
+          },
+        }, [
+          'No transaction history.',
+        ]),
+      ]),
+    ])
+  )
+}
+