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.

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",

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', {
+          h(Identicon, {
-            src: identiconSrc,
+            address: identity.address
-            style: {
-              border: 'none',
-              borderRadius: '20px',
-            }
           }),
         ]),
 

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')
 

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
+}

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', {
+        h(Identicon, {
-          src: identiconSrc,
+          address: state.identiconKey,
-          style: {
-            border: 'none',
-            borderRadius: '20px',
-          }
         }),
         h('span.font-small', state.identiconLabel),
       ]),