Began adding jazzicons

Currently experiencing a few problems:

1. Tons of errors on app start. It's as if Jazzicon is getting called many times at start with some object as its diameter.
2. Weird visual glitches. When leaving a view with a jazzicon, it flashes off its border radius.
3. Messy transitions. Might want to just re-do the transitions. They just look awful, it's barely worthwhile.

5 files changed, 57 insertions, 27 deletions

diff --git a/package.json b/package.json
index 7bc403494..a9b30f362 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "hat": "0.0.3",
     "identicon.js": "^1.2.1",
     "inject-css": "^0.1.1",
+    "jazzicon": "^1.0.1",
     "metamask-logo": "^1.1.5",
     "multiplex": "^6.7.0",
     "once": "^1.3.3",
diff --git a/ui/app/accounts.js b/ui/app/accounts.js
index 3f0a3e819..18ba1e67d 100644
--- a/ui/app/accounts.js
+++ b/ui/app/accounts.js
@@ -3,7 +3,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const extend = require('xtend')
-const Identicon = require('identicon.js')
+const Identicon = require('./components/identicon')
 const actions = require('./actions')
 const AccountPanel = require('./components/account-panel')
 const valuesFor = require('./util').valuesFor
@@ -87,14 +87,6 @@ AccountsScreen.prototype.render = function() {
       isSelected: false,
       isFauceting: isFauceting,
     })
-    // return h(AccountPanel, componentState)
-
-    // var identity = state.identity || {}
-    // var account = state.account || {}
-    // var isFauceting = state.isFauceting
-
-    var identicon = new Identicon(identity.address, 46).toString()
-    var identiconSrc = `data:image/png;base64,${identicon}`
 
     return (
       h('.accounts-list-option.flex-row.flex-space-between.cursor-pointer', {
@@ -105,14 +97,9 @@ AccountsScreen.prototype.render = function() {
         onClick: (event) => actions.onShowDetail(identity.address, event),
       }, [
 
-        // account identicon
         h('.identicon-wrapper.flex-column.flex-center.select-none', [
-          h('img.identicon', {
-            src: identiconSrc,
-            style: {
-              border: 'none',
-              borderRadius: '20px',
-            }
+          h(Identicon, {
+            address: identity.address
           }),
         ]),
 
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index c1450b516..6bae095d1 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -4,7 +4,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const addressSummary = require('../util').addressSummary
 const formatBalance = require('../util').formatBalance
-const Identicon = require('identicon.js')
+const Identicon = require('./identicon')
 
 const Panel = require('./panel')
 
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
new file mode 100644
index 000000000..8294ce4d5
--- /dev/null
+++ b/ui/app/components/identicon.js
@@ -0,0 +1,49 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const jazzicon = require('jazzicon')
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = IdenticonComponent
+
+inherits(IdenticonComponent, Component)
+function IdenticonComponent() {
+  Component.call(this)
+
+  this.diameter = 46
+}
+
+IdenticonComponent.prototype.render = function() {
+  debugger
+  return (
+    h('div', {
+      key: 'identicon-' + this.props.address,
+      style: {
+        display: 'inline-block',
+        height: this.diameter,
+        width: this.diameter,
+        borderRadius: this.diameter / 2,
+        overflow: 'hidden',
+      },
+    })
+  )
+}
+
+IdenticonComponent.prototype.componentDidMount = function(){
+  var state = this.props
+  var address = state.address
+
+  if (!address) return
+    console.log('rendering for address ' + address)
+  var numericRepresentation = jsNumberForAddress(address)
+
+  var container = findDOMNode(this)
+  var identicon = jazzicon(this.diameter, numericRepresentation)
+  container.appendChild(identicon)
+}
+
+function jsNumberForAddress(address) {
+  var addr = address.slice(2, 10)
+  var seed = parseInt(addr, 16)
+  return seed
+}
diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
index 25e6b7f0f..2f5a3715d 100644
--- a/ui/app/components/panel.js
+++ b/ui/app/components/panel.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const Identicon = require('identicon.js')
+const Identicon = require('./identicon')
 
 module.exports = Panel
 
@@ -19,9 +19,6 @@ Panel.prototype.render = function() {
   var account = state.account || {}
   var isFauceting = state.isFauceting
 
-  var identicon = new Identicon(state.identiconKey, 46).toString()
-  var identiconSrc = `data:image/png;base64,${identicon}`
-
   return (
     h('.identity-panel.flex-row.flex-space-between', {
       style: {
@@ -32,12 +29,8 @@ Panel.prototype.render = function() {
 
       // account identicon
       h('.identicon-wrapper.flex-column.select-none', [
-        h('img.identicon', {
-          src: identiconSrc,
-          style: {
-            border: 'none',
-            borderRadius: '20px',
-          }
+        h(Identicon, {
+          address: state.identiconKey,
         }),
         h('span.font-small', state.identiconLabel),
       ]),