swapped out ethereum-blockies lib for MEW blockies library, tightened up identicon.js code

2 files changed, 49 insertions, 85 deletions

diff --git a/ui/app/components/blockies/blockies-component.js b/ui/app/components/blockies/blockies-component.js
deleted file mode 100644
index b3a97ced4..000000000
--- a/ui/app/components/blockies/blockies-component.js
+++ /dev/null
@@ -1,35 +0,0 @@
-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,
-      color: this.props.color,
-      bgcolor: this.props.bgcolor,
-      size: this.props.size,
-      scale: this.props.scale,
-      spotcolor: this.props.spotcolor,
-    };
-  }
-
-  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 c1dc0fb5c..3e2349dbe 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -5,9 +5,9 @@ const connect = require('react-redux').connect
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
-const BlockiesIdenticon = require('./blockies/blockies-component')
 const iconFactoryGen = require('../../lib/icon-factory')
 const iconFactory = iconFactoryGen(jazzicon)
+const { toDataUrl } = require('../../lib/blockies')
 
 module.exports = connect(mapStateToProps)(IdenticonComponent)
 
@@ -31,36 +31,19 @@ IdenticonComponent.prototype.render = function () {
 
   return address
     ? (
-      useBlockie
-        ? h('div', {
-            className: `${className} identicon`,
-            style: {
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: diameter,
-              width: diameter,
-              borderRadius: diameter / 2,
-              overflow: 'hidden',
-            },
-          }, [
-            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('div', {
+        className: `${className} identicon`,
+        key: useBlockie ? 'blockie' : 'identicon-' + address,
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+          overflow: 'hidden',
+        },
+      })
     )
     : (
       h('img.balance-icon', {
@@ -76,38 +59,54 @@ IdenticonComponent.prototype.render = function () {
 
 IdenticonComponent.prototype.componentDidMount = function () {
   var props = this.props
-  const { address } = props
+  const { address, useBlockie } = props
 
   if (!address) return
 
-  // eslint-disable-next-line react/no-find-dom-node
-  var container = findDOMNode(this)
-
-  var diameter = props.diameter || this.defaultDiameter
   if (!isNode) {
-    var img = iconFactory.iconForAddress(address, diameter)
-    container.appendChild(img)
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    if (useBlockie) {
+      _generateBlockie(container, address)
+    } else {
+      const diameter = props.diameter || this.defaultDiameter
+      _generateJazzicon(container, address, diameter)
+    }
   }
 }
 
 IdenticonComponent.prototype.componentDidUpdate = function () {
   var props = this.props
-  const { address } = props
+  const { address, useBlockie } = props
 
   if (!address) return
 
-  // eslint-disable-next-line react/no-find-dom-node
-  var container = findDOMNode(this)
-
-  var children = container.children
-  for (var i = 0; i < children.length; i++) {
-    container.removeChild(children[i])
-  }
-
-  var diameter = props.diameter || this.defaultDiameter
   if (!isNode) {
-    var img = iconFactory.iconForAddress(address, diameter)
-    container.appendChild(img)
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    var children = container.children
+    for (var i = 0; i < children.length; i++) {
+      container.removeChild(children[i])
+    }
+
+    if (useBlockie) {
+      _generateBlockie(container, address)
+    } else {
+      const diameter = props.diameter || this.defaultDiameter
+      _generateJazzicon(container, address, diameter)
+    }
   }
 }
 
+function _generateBlockie(container, address) {
+  const img = new Image()
+  img.src = toDataUrl(address)
+  container.appendChild(img)
+}
+
+function _generateJazzicon(container, address, diameter) {
+  const img = iconFactory.iconForAddress(address, diameter)
+  container.appendChild(img)
+}