Render TxListItem component from real data: address, identicon, status, ETH value

2 files changed, 18 insertions, 9 deletions

diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 30e38b4d7..fb8d5c69b 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const selectors = require('../selectors')
 const Identicon = require('./identicon')
+const { formatBalance, formatDate } = require('../util')
 
 const valuesFor = require('../util').valuesFor
 
@@ -50,20 +51,21 @@ TxList.prototype.render = function () {
 
     contentDivider,
 
-    this.renderTransactionListItem(),
+    txsToRender.map((transaction) => {
+      return this.renderTransactionListItem(transaction)
+    }),
 
   ])
 }
 
-TxList.prototype.renderTransactionListItem = function () {
-  // fake data
+// TODO: Consider moving TxListItem into a separate component
+TxList.prototype.renderTransactionListItem = function (transaction) {
   const props = {
-    dateString: 'Jul 01, 2017',
-    address: '0x82df11beb942beeed58d466fcb0f0791365c7684',
-    transactionStatus: 'Confirmed',
-    transactionAmount: '+ 3 ETH'
+    dateString: formatDate(transaction.time),
+    address: transaction.txParams.to,
+    transactionStatus: transaction.status,
+    transactionAmount: formatBalance(transaction.txParams.value, 6),
   }
-
   const { address, transactionStatus, transactionAmount, dateString } = props
 
   return h('div.flex-column.tx-list-item-wrapper', {
@@ -96,7 +98,7 @@ TxList.prototype.renderTransactionListItem = function () {
           style: {}
         }, [
           h('span.tx-list-account', {}, [
-            '0x82df11be...7684', //address
+            `${address.slice(0, 10)}...${address.slice(-4)}`
           ]),
         ]),
 
diff --git a/ui/app/util.js b/ui/app/util.js
index ac3f42c6b..4dd0e30f3 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -1,4 +1,10 @@
 const ethUtil = require('ethereumjs-util')
+const vreme = new (require('vreme'))()
+
+// formatData :: ( date: <Unix Timestamp> ) -> String
+function formatDate (date) {
+  return vreme.format(new Date(date), 'March 16 2014 14:30')
+}
 
 var valueTable = {
   wei: '1000000000000000000',
@@ -36,6 +42,7 @@ module.exports = {
   valueTable: valueTable,
   bnTable: bnTable,
   isHex: isHex,
+  formatDate,
 }
 
 function valuesFor (obj) {