incremental commit of working blockie component

2 files changed, 56 insertions, 15 deletions

diff --git a/ui/app/components/blockies/blockies-component.js b/ui/app/components/blockies/blockies-component.js
new file mode 100644
index 000000000..d6defda16
--- /dev/null
+++ b/ui/app/components/blockies/blockies-component.js
@@ -0,0 +1,30 @@
+const Component = require('react').Component
+const createElement  = require('react').createElement
+const blockies = require("ethereum-blockies");
+
+class BlockiesIdenticon extends Component {
+  constructor(props) {
+    super(props);
+  }
+  getOpts () {
+    return {
+      seed: this.props.seed || "foo",
+      color: this.props.color || "#dfe",
+      bgcolor: this.props.bgcolor || "#a71",
+      size: this.props.size || 15,
+      scale: this.props.scale || 3,
+      spotcolor: this.props.spotcolor || "#000"
+    };
+  }
+  componentDidMount() {
+    this.draw();
+  }
+  draw() {
+    blockies.render(this.getOpts(), this.canvas);
+  }
+  render() {
+    return createElement("canvas", {ref: canvas => this.canvas = canvas});
+  }
+}
+
+module.exports = BlockiesIdenticon;
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 63f3087a4..9e9b82aae 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -1,14 +1,15 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
-const blockies = require('blockies')
+const BlockiesIdenticon = require('./blockies/blockies-component')
 const iconFactoryGen = require('../../lib/icon-factory')
 const iconFactory = iconFactoryGen(jazzicon)
 
-module.exports = IdenticonComponent
+module.exports = connect(mapStateToProps)(IdenticonComponent)
 
 inherits(IdenticonComponent, Component)
 function IdenticonComponent () {
@@ -17,6 +18,12 @@ function IdenticonComponent () {
   this.defaultDiameter = 46
 }
 
+function mapStateToProps (state) {
+  return {
+    useBlockie: state.metamask.useBlockie
+  }
+}
+
 IdenticonComponent.prototype.render = function () {
   var props = this.props
   const { className = '', address, useBlockie } = props
@@ -24,19 +31,23 @@ IdenticonComponent.prototype.render = function () {
 
   return address
     ? (
-      h('div', {
-        className: `${className} identicon`,
-        key: 'identicon-' + address,
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: diameter,
-          width: diameter,
-          borderRadius: diameter / 2,
-          overflow: 'hidden',
-        },
-      })
+      useBlockie
+        ? h(BlockiesIdenticon, {
+          seed: address,
+        })
+        : h('div', {
+          className: `${className} identicon`,
+          key: 'identicon-' + address,
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: diameter,
+            width: diameter,
+            borderRadius: diameter / 2,
+            overflow: 'hidden',
+          },
+        })
     )
     : (
       h('img.balance-icon', {