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, 49 insertions, 0 deletions

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