diff options
| -rw-r--r-- | .babelrc | 5 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | ui/app/account-detail.js | 37 | ||||
| -rw-r--r-- | ui/app/components/account-export.js | 2 | ||||
| -rw-r--r-- | ui/app/components/token-cell.js | 22 | ||||
| -rw-r--r-- | ui/app/components/token-list.js | 51 | ||||
| -rw-r--r-- | ui/app/components/transaction-list.js | 11 |
7 files changed, 119 insertions, 15 deletions
@@ -1 +1,4 @@ -{ "presets": ["es2015"] } +{ + "presets": ["es2015", "stage-0"], + "plugins": ["transform-runtime", "transform-async-to-generator"] +} diff --git a/package.json b/package.json index b892653fa..2eaaf7154 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "eth-query": "^1.0.3", "eth-sig-util": "^1.1.1", "eth-simple-keyring": "^1.1.1", + "eth-token-tracker": "^1.0.4", "ethereumjs-tx": "^1.2.5", "ethereumjs-util": "ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-wallet": "^0.6.0", @@ -118,7 +119,12 @@ "xtend": "^4.0.1" }, "devDependencies": { + "babel-core": "^6.24.1", "babel-eslint": "^6.0.5", + "babel-plugin-transform-async-to-generator": "^6.24.1", + "babel-plugin-transform-runtime": "^6.23.0", + "babel-polyfill": "^6.23.0", + "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.7.2", "babelify": "^7.2.0", "beefy": "^2.1.5", diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 018e74893..411f38e5e 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -17,6 +17,8 @@ const ethUtil = require('ethereumjs-util') const EditableLabel = require('./components/editable-label') const Tooltip = require('./components/tooltip') const BuyButtonSubview = require('./components/buy-button-subview') +const TabBar = require('./components/tab-bar') +const TokenList = require('./components/token-list') module.exports = connect(mapStateToProps)(AccountDetailScreen) function mapStateToProps (state) { @@ -35,6 +37,7 @@ function mapStateToProps (state) { inherits(AccountDetailScreen, Component) function AccountDetailScreen () { + this.state = {} Component.call(this) } @@ -234,18 +237,50 @@ AccountDetailScreen.prototype.subview = function () { switch (subview) { case 'transactions': - return this.transactionList() + return this.tabSections() case 'export': var state = extend({key: 'export'}, this.props) return h(ExportAccountView, state) case 'buyForm': return h(BuyButtonSubview, extend({key: 'buyForm'}, this.props)) default: + return this.tabSections() + } +} + +AccountDetailScreen.prototype.tabSections = function () { + + return h('section.tabSection', [ + + h(TabBar, { + tabs: [ + { content: 'History', key: 'history' }, + { content: 'Tokens', key: 'tokens' }, + ], + defaultTab: 'history', + tabSelected: (key) => { + this.setState({ tabSelection: key }) + }, + }), + + this.tabSwitchView(), + ]) +} + +AccountDetailScreen.prototype.tabSwitchView = function () { + const tabSelection = this.state.tabSelection || 'history' + const userAddress = this.props.address + + switch (tabSelection) { + case 'tokens': + return h(TokenList, { userAddress }) + default: return this.transactionList() } } AccountDetailScreen.prototype.transactionList = function () { + const {transactions, unapprovedMsgs, address, network, shapeShiftTxList } = this.props return h(TransactionList, { transactions: transactions.sort((a, b) => b.time - a.time), 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', |