2 files changed, 158 insertions, 0 deletions
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
new file mode 100644
index 000000000..4e433b87d
--- /dev/null
+++ b/ui/app/components/account-panel.js
@@ -0,0 +1,93 @@
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const addressSummary = require('../util').addressSummary
+const formatBalance = require('../util').formatBalance
+
+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
+
+  return (
+
+    h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
+      style: {
+        flex: '1 0 auto',
+      },
+      onClick: state.onSelect && state.onSelect.bind(null, identity.address),
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h('.identicon', {
+          style: { backgroundImage: 'url("https://ipfs.io/ipfs/'+identity.img+'")' }
+        }),
+        h('span.font-small', identity.name),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        h('.flex-row.flex-space-between', [
+          h('label.font-small', 'ADDRESS'),
+          h('span.font-small', addressSummary(identity.address)),
+        ]),
+
+        balanceOrFaucetingIndication(account, isFauceting),
+
+        // outlet for inserting additional stuff
+        state.children,
+
+      ]),
+
+      // navigate to account detail
+      !state.onShowDetail ? null :
+        h('.arrow-right.cursor-pointer', {
+          onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address),
+        }, [
+          h('i.fa.fa-chevron-right.fa-lg'),
+        ]),
+    ])
+  )
+}
+
+function balanceOrFaucetingIndication(account, isFauceting) {
+
+  // Temporarily deactivating isFauceting indication
+  // because it shows fauceting for empty restored accounts.
+  if (/*isFauceting*/ false) {
+
+    return h('.flex-row.flex-space-between', [
+      h('span.font-small', {
+      }, [
+        'Account is auto-funding,',
+        h('br'),
+        'please wait.'
+      ]),
+    ])
+
+  } else {
+
+    return h('.flex-row.flex-space-between', [
+      h('label.font-small', 'BALANCE'),
+      h('span.font-small', {
+        style: {
+          overflowX: 'hidden',
+          maxWidth: '136px',
+        }
+      }, formatBalance(account.balance)),
+    ])
+
+  }
+}
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
new file mode 100644
index 000000000..e043caca1
--- /dev/null
+++ b/ui/app/components/mascot.js
@@ -0,0 +1,65 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const metamaskLogo = require('metamask-logo')
+const getCaretCoordinates = require('textarea-caret')
+const debounce = require('debounce')
+
+module.exports = Mascot
+
+
+inherits(Mascot, Component)
+function Mascot() {
+  Component.call(this)
+  this.logo = metamaskLogo({
+    followMouse: true,
+    pxNotRatio: true,
+    width: 200,
+    height: 200,
+  })
+  if (!this.logo) return
+  this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
+  this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
+}
+
+
+Mascot.prototype.render = function() {
+  // this is a bit hacky
+  // the event emitter is on `this.props`
+  // and we dont get that until render
+  this.handleAnimationEvents()
+
+  return (
+
+    h('#metamask-mascot-container')
+
+  )
+}
+
+Mascot.prototype.componentDidMount = function() {
+  if (!this.logo) return
+  var targetDivId = 'metamask-mascot-container'
+  var container = document.getElementById(targetDivId)
+  container.appendChild(this.logo.canvas)
+}
+
+Mascot.prototype.componentWillUnmount = function() {
+  if (!this.logo) return
+  this.logo.canvas.remove()
+}
+
+Mascot.prototype.handleAnimationEvents = function(){
+  if (!this.logo) return
+  // only setup listeners once
+  if (this.animations) return
+  this.animations = this.props.animationEventEmitter
+  this.animations.on('point', this.lookAt.bind(this))
+  this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo))
+}
+
+Mascot.prototype.lookAt = function(target){
+  if (!this.logo) return
+  this.unfollowMouse()
+  this.logo.lookAt(target)
+  this.refollowMouse()
+}