Add functional but ugly and hard-coded token list

4 files changed, 73 insertions, 13 deletions

diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 888196c5d..394d878f7 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -20,8 +20,6 @@ function mapStateToProps (state) {
 }
 
 ExportAccountView.prototype.render = function () {
-  console.log('EXPORT VIEW')
-  console.dir(this.props)
   var state = this.props
   var accountDetail = state.accountDetail
 
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
new file mode 100644
index 000000000..34a12733f
--- /dev/null
+++ b/ui/app/components/token-cell.js
@@ -0,0 +1,22 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = TokenCell
+
+inherits(TokenCell, Component)
+function TokenCell () {
+  Component.call(this)
+}
+
+TokenCell.prototype.render = function () {
+  const props = this.props
+  const { address, symbol, string } = props
+  log.info({ address, symbol, string })
+
+  return (
+    h('li', [
+      h('span', `${symbol}: ${string}`),
+    ])
+  )
+}
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
new file mode 100644
index 000000000..35e79401b
--- /dev/null
+++ b/ui/app/components/token-list.js
@@ -0,0 +1,51 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenTracker = require('eth-token-tracker')
+const TokenCell = require('./token-cell.js')
+
+module.exports = TokenList
+
+inherits(TokenList, Component)
+function TokenList () {
+
+  // Hard coded for development for now:
+  const tokens = [
+    { address: '0x48c80F1f4D53D5951e5D5438B54Cba84f29F32a5', symbol: 'REP', balance: 'aa'},
+    { address: '0xc66ea802717bfb9833400264dd12c2bceaa34a6d', symbol: 'MKR', balance: '1000', decimals: 18},
+    { address: '0xa74476443119A942dE498590Fe1f2454d7D4aC0d', symbol: 'GOL', balance: 'ff'},
+    { address: '0xaec2e87e0a235266d9c5adc9deb4b2e29b54d009', symbol: 'SNGLS', balance: '0' },
+  ]
+
+  this.state = { tokens }
+  Component.call(this)
+}
+
+TokenList.prototype.render = function () {
+  const tokens = this.state.tokens
+
+  return (
+    h('ol', tokens.map((tokenData) => {
+      console.log('rendering token with', tokenData)
+      return h(TokenCell, tokenData)
+    }))
+  )
+}
+
+TokenList.prototype.componentDidMount = function () {
+  const { userAddress } = this.props
+
+  this.tracker = new TokenTracker({
+    userAddress,
+    provider: web3.currentProvider,
+    tokens: this.state.tokens,
+  })
+
+  this.setState({ tokens: this.tracker.serialize() })
+  this.tracker.on('update', (tokenData) => this.setState({ tokens: tokenData }))
+  this.tracker.updateBalances()
+}
+
+TokenList.prototype.componentWillUnmount = function () {
+  this.tracker.stop()
+}
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 3ae953637..4c25f3dd9 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -36,17 +36,6 @@ TransactionList.prototype.render = function () {
         }
       `),
 
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          paddingTop: '4px',
-          paddingBottom: '4px',
-        },
-      }, [
-        'History',
-      ]),
-
       h('.tx-list', {
         style: {
           overflowY: 'auto',