Merge pull request #125 from MetaMask/TransactionList

Add transaction history to account detail view

6 files changed, 77 insertions, 8 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 6ed23d482..025644efe 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('./actions')
 const AccountPanel = require('./components/account-panel')
+const transactionList = require('./components/transaction-list')
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -15,6 +16,8 @@ function mapStateToProps(state) {
     accounts: state.metamask.accounts,
     address: state.appState.currentView.context,
     accountDetail: accountDetail,
+    transactions: state.metamask.transactions,
+    networkVersion: state.networkVersion,
   }
 }
 
@@ -29,6 +32,7 @@ AccountDetailScreen.prototype.render = function() {
   var identity = state.identities[state.address]
   var account = state.accounts[state.address]
   var accountDetail = state.accountDetail
+  var transactions = state.transactions
 
   return (
 
@@ -71,6 +75,9 @@ AccountDetailScreen.prototype.render = function() {
         ]),
       ]),
 
+      transactionList(transactions
+        .filter(tx => tx.txParams.from === state.address)
+        .sort((a, b) => b.time - a.time), state.networkVersion),
       this.exportedAccount(accountDetail),
 
       // transaction table
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
new file mode 100644
index 000000000..99a325e35
--- /dev/null
+++ b/ui/app/components/transaction-list.js
@@ -0,0 +1,39 @@
+const h = require('react-hyperscript')
+const formatBalance = require('../util').formatBalance
+const addressSummary = require('../util').addressSummary
+const explorerLink = require('../../lib/explorer-link')
+
+module.exports = function(transactions, network) {
+  return h('details', [
+
+    h('summary', [
+      h('div.font-small', {style: {display: 'inline'}}, 'Transactions'),
+    ]),
+
+    h('.flex-row.flex-space-around', [
+      h('div.font-small','To'),
+      h('div.font-small','Amount'),
+    ]),
+
+    h('.tx-list', {
+        style: {
+          overflowY: 'auto',
+          height: '180px',
+        },
+      },
+
+      transactions.map((transaction) => {
+        return h('.tx.flex-row.flex-space-around', [
+          h('a.font-small',
+          {
+            href: explorerLink(transaction.hash, parseInt(network)),
+            target: '_blank',
+          },
+          addressSummary(transaction.txParams.to)),
+          h('div.font-small', formatBalance(transaction.txParams.value))
+        ])
+      })
+    )
+
+  ])
+}
diff --git a/ui/app/send.js b/ui/app/send.js
index 3cb56cb6e..d34accddc 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -96,7 +96,7 @@ SendTransactionScreen.prototype.render = function() {
         }, 'Send')
       ]),
 
-      state.warning ? h('span.error', state.warning) : null,
+      state.warning ? h('span.error', state.warning.split('.')[0]) : null,
     ])
   )
 }
@@ -108,11 +108,11 @@ SendTransactionScreen.prototype.back = function() {
 
 SendTransactionScreen.prototype.onSubmit = function(event) {
   var recipient = document.querySelector('input.address').value
-  var amount = new ethUtil.BN(document.querySelector('input.ether').value, 10)
+
+  var inputAmount = parseFloat(document.querySelector('input.ether').value)
   var currency = document.querySelector('select.currency').value
-  var txData = document.querySelector('textarea.txData').value
+  var value = util.normalizeNumberToWei(inputAmount, currency)
 
-  var value = util.normalizeToWei(amount, currency)
   var balance = this.props.balance
 
   if (value.gt(balance)) {
@@ -132,6 +132,8 @@ SendTransactionScreen.prototype.onSubmit = function(event) {
     from: this.props.address,
     value: '0x' + value.toString(16),
   }
+
+  var txData = document.querySelector('textarea.txData').value
   if (txData) txParams.data = txData
 
   this.props.dispatch(actions.signTx(txParams))
diff --git a/ui/app/util.js b/ui/app/util.js
index 18862fade..5dbcffa7e 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -28,6 +28,7 @@ module.exports = {
   ethToWei: ethToWei,
   weiToEth: weiToEth,
   normalizeToWei: normalizeToWei,
+  normalizeNumberToWei: normalizeNumberToWei,
   valueTable: valueTable,
   bnTable: bnTable,
 }
@@ -85,13 +86,18 @@ function dataSize(data) {
 // returns a BN in wei
 function normalizeToWei(amount, currency) {
   try {
-    var ether = amount.div(bnTable[currency])
-    var wei = ether.mul(bnTable.wei)
-    return wei
+    return amount.mul(bnTable.wei).div(bnTable[currency])
   } catch (e) {}
   return amount
 }
 
+var multiple = new ethUtil.BN('1000', 10)
+function normalizeNumberToWei(n, currency) {
+  var enlarged = n * 1000
+  var amount = new ethUtil.BN(String(enlarged), 10)
+  return normalizeToWei(amount, currency).div(multiple)
+}
+
 function readableDate(ms) {
   var date = new Date(ms)
   var month = date.getMonth()
diff --git a/ui/index.js b/ui/index.js
index 05d30d8d3..4ecce2fbe 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -32,7 +32,10 @@ function startApp(metamaskState, accountManager, opts){
     // appState represents the current tab's popup state
     appState: {
       currentDomain: opts.currentDomain,
-    }
+    },
+
+    // Which blockchain we are using:
+    networkVersion: opts.networkVersion,
   })
 
   // if unconfirmed txs, start on txConf page
diff --git a/ui/lib/explorer-link.js b/ui/lib/explorer-link.js
new file mode 100644
index 000000000..a2e7872f9
--- /dev/null
+++ b/ui/lib/explorer-link.js
@@ -0,0 +1,12 @@
+module.exports = function(hash, network) {
+  let prefix
+  switch (network) {
+    case 1: // main net
+      prefix = ''
+    case 2: // morden test net
+      prefix = 'testnet.'
+    default:
+      prefix = ''
+  }
+  return `http://${prefix}etherscan.io/tx/${hash}`
+}