1 files changed, 91 insertions, 0 deletions
diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js
new file mode 100644
index 000000000..10a0b6cc7
--- /dev/null
+++ b/ui/app/accounts/account-list-item.js
@@ -0,0 +1,91 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+
+const EthBalance = require('../components/eth-balance')
+const CopyButton = require('../components/copyButton')
+const Identicon = require('../components/identicon')
+
+module.exports = AccountListItem
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+  Component.call(this)
+}
+
+AccountListItem.prototype.render = function () {
+  const { identity, selectedAddress, accounts, onShowDetail,
+    conversionRate, currentCurrency } = this.props
+
+  const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address)
+  const isSelected = selectedAddress === identity.address
+  const account = accounts[identity.address]
+  const selectedClass = isSelected ? '.selected' : ''
+
+  return (
+    h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, {
+      key: `account-panel-${identity.address}`,
+      onClick: (event) => onShowDetail(identity.address, event),
+    }, [
+
+      h('.identicon-wrapper.flex-column.flex-center.select-none', [
+        this.pendingOrNot(),
+        this.indicateIfLoose(),
+        h(Identicon, {
+          address: identity.address,
+          imageify: true,
+        }),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', {
+        style: {
+          width: '200px',
+        },
+      }, [
+        h('span', identity.name),
+        h('span.font-small', {
+          style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          },
+        }, checksumAddress),
+        h(EthBalance, {
+          value: account && account.balance,
+          currentCurrency,
+          conversionRate,
+          style: {
+            lineHeight: '7px',
+            marginTop: '10px',
+          },
+        }),
+      ]),
+
+      // copy button
+      h('.identity-copy.flex-column', {
+        style: {
+          margin: '0 20px',
+        },
+      }, [
+        h(CopyButton, {
+          value: checksumAddress,
+        }),
+      ]),
+    ])
+  )
+}
+
+AccountListItem.prototype.indicateIfLoose = function () {
+  try { // Sometimes keyrings aren't loaded yet:
+    const type = this.props.keyring.type
+    const isLoose = type !== 'HD Key Tree'
+    return isLoose ? h('.keyring-label', 'LOOSE') : null
+  } catch (e) { return }
+}
+
+AccountListItem.prototype.pendingOrNot = function () {
+  const pending = this.props.pending
+  if (pending.length === 0) return null
+  return h('.pending-dot', pending.length)
+}