Move accounts index

ui/app/accounts/index.js

@@ -0,0 +1,182 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const extend = require('xtend')
+const Identicon = require('../components/identicon')
+const actions = require('../actions')
+const EtherBalance = require('../components/eth-balance')
+const valuesFor = require('../util').valuesFor
+const addressSummary = require('../util').addressSummary
+const formatBalance = require('../util').formatBalance
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = connect(mapStateToProps)(AccountsScreen)
+
+
+function mapStateToProps(state) {
+  return {
+    accounts: state.metamask.accounts,
+    identities: state.metamask.identities,
+    unconfTxs: state.metamask.unconfTxs,
+    selectedAddress: state.metamask.selectedAddress,
+    currentDomain: state.appState.currentDomain,
+    scrollToBottom: state.appState.scrollToBottom,
+  }
+}
+
+inherits(AccountsScreen, Component)
+function AccountsScreen() {
+  Component.call(this)
+}
+
+
+AccountsScreen.prototype.render = function() {
+  var state = this.props
+  var identityList = valuesFor(state.identities)
+  var unconfTxList = valuesFor(state.unconfTxs)
+  var actions = {
+    onSelect: this.onSelect.bind(this),
+    onShowDetail: this.onShowDetail.bind(this),
+    revealAccount: this.onRevealAccount.bind(this),
+    goHome: this.goHome.bind(this),
+  }
+  return (
+
+    h('.accounts-section.flex-grow', [
+
+      // subtitle and nav
+      h('.section-title.flex-center', [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+          onClick: actions.goHome,
+        }),
+        h('h2.page-subtitle', 'Select Account'),
+      ]),
+
+      h('hr.horizontal-line'),
+
+      // identity selection
+      h('section.identity-section.flex-column', {
+        style: {
+          height: '418px',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }
+      },
+      [
+        identityList.map(renderAccountPanel),
+
+        h('hr.horizontal-line', {key: 'horizontal-line1'}),
+        h('div.footer.hover-white.pointer', {
+          key: 'reveal-account-bar',
+          onClick:() => {
+            actions.revealAccount()
+          },
+          style: {
+            display: 'flex',
+            flex: '1 0 auto',
+            height: '40px',
+            paddint: '10px',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }
+        }, [
+          h('i.fa.fa-chevron-down.fa-lg', {key: ''}),
+        ]),
+      ]),
+
+      unconfTxList.length ? (
+
+        h('.unconftx-link.flex-row.flex-center', {
+          onClick: this.navigateToConfTx.bind(this),
+        }, [
+          h('span', 'Unconfirmed Txs'),
+          h('i.fa.fa-arrow-right.fa-lg'),
+        ])
+
+      ) : (
+        null
+      ),
+    ])
+  )
+
+  function renderAccountPanel(identity){
+    var mayBeFauceting = identity.mayBeFauceting
+    var isSelected = state.selectedAddress === identity.address
+    var account = state.accounts[identity.address]
+    var isFauceting = mayBeFauceting && account.balance === '0x0'
+    var componentState = extend(actions, {
+      identity: identity,
+      account: account,
+      isSelected: false,
+      isFauceting: isFauceting,
+    })
+    const selectedClass = isSelected ? '.selected' : ''
+
+    return (
+      h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, {
+        key: `account-panel-${identity.address}`,
+        style: {
+          flex: '1 0 auto',
+        },
+        onClick: (event) => actions.onShowDetail(identity.address, event),
+      }, [
+
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h(Identicon, {
+            address: identity.address
+          }),
+        ]),
+
+        // account address, balance
+        h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+          h('span', identity.name),
+          h('span.font-small', addressSummary(identity.address)),
+          // h('span.font-small', formatBalance(account.balance)),
+          h(EtherBalance, {
+            value: account.balance,
+          }),
+
+        ]),
+
+      ])
+    )
+  }
+}
+
+// If a new account was revealed, scroll to the bottom
+AccountsScreen.prototype.componentDidUpdate = function(){
+  const scrollToBottom = this.props.scrollToBottom
+
+  if (scrollToBottom) {
+    var container = findDOMNode(this)
+    var scrollable = container.querySelector('.identity-section')
+    scrollable.scrollTop = scrollable.scrollHeight
+  }
+}
+
+AccountsScreen.prototype.navigateToConfTx = function(){
+  event.stopPropagation()
+  this.props.dispatch(actions.showConfTxPage())
+}
+
+AccountsScreen.prototype.onSelect = function(address, event){
+  event.stopPropagation()
+  // if already selected, deselect
+  if (this.props.selectedAddress === address) address = null
+  this.props.dispatch(actions.setSelectedAddress(address))
+}
+
+AccountsScreen.prototype.onShowDetail = function(address, event){
+  event.stopPropagation()
+  this.props.dispatch(actions.showAccountDetail(address))
+}
+
+AccountsScreen.prototype.onRevealAccount = function() {
+  this.props.dispatch(actions.revealAccount())
+}
+
+AccountsScreen.prototype.goHome = function() {
+  this.props.dispatch(actions.goHome())
+}