1 files changed, 164 insertions, 0 deletions
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
new file mode 100644
index 000000000..ac2615cd7
--- /dev/null
+++ b/ui/app/accounts/index.js
@@ -0,0 +1,164 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../actions')
+const valuesFor = require('../util').valuesFor
+const findDOMNode = require('react-dom').findDOMNode
+const AccountListItem = require('./account-list-item')
+
+module.exports = connect(mapStateToProps)(AccountsScreen)
+
+function mapStateToProps (state) {
+  const pendingTxs = valuesFor(state.metamask.unapprovedTxs)
+  .filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network)
+  const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs)
+  const pending = pendingTxs.concat(pendingMsgs)
+
+  return {
+    accounts: state.metamask.accounts,
+    identities: state.metamask.identities,
+    unapprovedTxs: state.metamask.unapprovedTxs,
+    selectedAddress: state.metamask.selectedAddress,
+    scrollToBottom: state.appState.scrollToBottom,
+    pending,
+    keyrings: state.metamask.keyrings,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
+}
+
+inherits(AccountsScreen, Component)
+function AccountsScreen () {
+  Component.call(this)
+}
+
+AccountsScreen.prototype.render = function () {
+  const props = this.props
+  const { keyrings, conversionRate, currentCurrency } = props
+  const identityList = valuesFor(props.identities)
+  const unapprovedTxList = valuesFor(props.unapprovedTxs)
+
+  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: this.goHome.bind(this),
+        }),
+        h('h2.page-subtitle', 'Select Account'),
+      ]),
+
+      h('hr.horizontal-line'),
+
+      // identity selection
+      h('section.identity-section', {
+        style: {
+          height: '418px',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        },
+      },
+        [
+          identityList.map((identity) => {
+            const pending = this.props.pending.filter((txOrMsg) => {
+              if ('txParams' in txOrMsg) {
+                return txOrMsg.txParams.from === identity.address
+              } else if ('msgParams' in txOrMsg) {
+                return txOrMsg.msgParams.from === identity.address
+              } else {
+                return false
+              }
+            })
+
+            const simpleAddress = identity.address.substring(2).toLowerCase()
+            const keyring = keyrings.find((kr) => {
+              return kr.accounts.includes(simpleAddress) ||
+                kr.accounts.includes(identity.address)
+            })
+
+            return h(AccountListItem, {
+              key: `acct-panel-${identity.address}`,
+              identity,
+              selectedAddress: this.props.selectedAddress,
+              conversionRate,
+              currentCurrency,
+              accounts: this.props.accounts,
+              onShowDetail: this.onShowDetail.bind(this),
+              pending,
+              keyring,
+            })
+          }),
+
+          h('hr.horizontal-line'),
+          h('div.footer.hover-white.pointer', {
+            key: 'reveal-account-bar',
+            onClick: () => {
+              this.addNewAccount()
+            },
+            style: {
+              display: 'flex',
+              height: '40px',
+              padding: '10px',
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+          }, [
+            h('i.fa.fa-plus.fa-lg', {key: ''}),
+          ]),
+          h('hr.horizontal-line'),
+        ]),
+
+      unapprovedTxList.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
+      ),
+    ])
+  )
+}
+
+// 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.onShowDetail = function (address, event) {
+  event.stopPropagation()
+  this.props.dispatch(actions.showAccountDetail(address))
+}
+
+AccountsScreen.prototype.addNewAccount = function () {
+  this.props.dispatch(actions.addNewAccount(0))
+}
+
+/* An optional view proposed in this design:
+ * https://consensys.quip.com/zZVrAysM5znY
+AccountsScreen.prototype.addNewAccount = function () {
+  this.props.dispatch(actions.navigateToNewAccountScreen())
+}
+*/
+
+AccountsScreen.prototype.goHome = function () {
+  this.props.dispatch(actions.goHome())
+}