1 files changed, 86 insertions, 0 deletions
diff --git a/old-ui/app/components/account-panel.js b/old-ui/app/components/account-panel.js
new file mode 100644
index 000000000..abaaf8163
--- /dev/null
+++ b/old-ui/app/components/account-panel.js
@@ -0,0 +1,86 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const Identicon = require('./identicon')
+const formatBalance = require('../util').formatBalance
+const addressSummary = require('../util').addressSummary
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel () {
+  Component.call(this)
+}
+
+AccountPanel.prototype.render = function () {
+  var state = this.props
+  var identity = state.identity || {}
+  var account = state.account || {}
+  var isFauceting = state.isFauceting
+
+  var panelState = {
+    key: `accountPanel${identity.address}`,
+    identiconKey: identity.address,
+    identiconLabel: identity.name || '',
+    attributes: [
+      {
+        key: 'ADDRESS',
+        value: addressSummary(identity.address),
+      },
+      balanceOrFaucetingIndication(account, isFauceting),
+    ],
+  }
+
+  return (
+
+    h('.identity-panel.flex-row.flex-space-between', {
+      style: {
+        flex: '1 0 auto',
+        cursor: panelState.onClick ? 'pointer' : undefined,
+      },
+      onClick: panelState.onClick,
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h(Identicon, {
+          address: panelState.identiconKey,
+          imageify: state.imageifyIdenticons,
+        }),
+        h('span.font-small', panelState.identiconLabel.substring(0, 7) + '...'),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        panelState.attributes.map((attr) => {
+          return h('.flex-row.flex-space-between', {
+            key: '' + Math.round(Math.random() * 1000000),
+          }, [
+            h('label.font-small.no-select', attr.key),
+            h('span.font-small', attr.value),
+          ])
+        }),
+      ]),
+
+    ])
+
+  )
+}
+
+function balanceOrFaucetingIndication (account, isFauceting) {
+  // Temporarily deactivating isFauceting indication
+  // because it shows fauceting for empty restored accounts.
+  if (/* isFauceting*/ false) {
+    return {
+      key: 'Account is auto-funding.',
+      value: 'Please wait.',
+    }
+  } else {
+    return {
+      key: 'BALANCE',
+      value: formatBalance(account.balance),
+    }
+  }
+}