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.

1 files changed, 3 insertions, 10 deletions

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),
       ]),