icon-factory - overhaul to provide svg or imagified el

test/unit/lib/icon-factory-test.js

@@ -1,31 +0,0 @@
-const assert = require('assert')
-const sinon = require('sinon')
-
-const path = require('path')
-const IconFactoryGen = require(path.join(__dirname, '..', '..', '..', 'ui', 'lib', 'icon-factory.js'))
-
-describe('icon-factory', function() {
-  let iconFactory, address, diameter
-
-  beforeEach(function() {
-    iconFactory = IconFactoryGen((d,n) => 'stubicon')
-    address = '0x012345671234567890'
-    diameter = 50
-  })
-
-  it('should return a data-uri string for any address and diameter', function() {
-    const output = iconFactory.iconForAddress(address, diameter)
-    assert.ok(output.indexOf('data:image/svg') === 0)
-    assert.equal(output, iconFactory.cache[address][diameter])
-  })
-
-  it('should default to cache first', function() {
-    const testOutput = 'foo'
-    const mockSizeCache = {}
-    mockSizeCache[diameter] = testOutput
-    iconFactory.cache[address] = mockSizeCache
-
-    const output = iconFactory.iconForAddress(address, diameter)
-    assert.equal(output, testOutput)
-  })
-})

ui/app/components/identicon.js

@@ -39,12 +39,9 @@ IdenticonComponent.prototype.componentDidMount = function () {
   if (!address) return
 
   var container = findDOMNode(this)
-
   var diameter = state.diameter || this.defaultDiameter
-  var dataUri = iconFactory.iconForAddress(address, diameter)
-
-  var img = document.createElement('img')
-  img.src = dataUri
+  var imageify = state.imageify
+  var img = iconFactory.iconForAddress(address, diameter, imageify)
   container.appendChild(img)
 }
 

ui/app/components/panel.js

@@ -27,9 +27,9 @@ Panel.prototype.render = function () {
 
       // account identicon
       h('.identicon-wrapper.flex-column.select-none', [
-        // h(Identicon, {
-        //   address: state.identiconKey,
-        // }),
+        h(Identicon, {
+          address: state.identiconKey,
+        }),
         h('span.font-small', state.identiconLabel),
       ]),
 

ui/lib/icon-factory.js

@@ -12,42 +12,50 @@ function IconFactory (jazzicon) {
   this.cache = {}
 }
 
-IconFactory.prototype.iconForAddress = function (address, diameter) {
-  if (this.isCached(address, diameter)) {
-    return this.cache[address][diameter]
+IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
+  if (imageify) {
+    return this.generateIdenticonImg(address, diameter)
+  } else {
+    return this.generateIdenticonSvg(address, diameter)
   }
-
-  const dataUri = this.generateNewUri(address, diameter)
-  this.cacheIcon(address, diameter, dataUri)
-  return dataUri
 }
 
-IconFactory.prototype.generateNewUri = function (address, diameter) {
+// returns img dom element
+IconFactory.prototype.generateIdenticonImg = function (address, diameter) {
+  var identicon = this.generateIdenticonSvg(address, diameter)
+  var identiconSrc = identicon.innerHTML
+  var dataUri = toDataUri(identiconSrc)
+  var img = document.createElement('img')
+  img.src = dataUri
+  return img
+}
+
+// returns svg dom element
+IconFactory.prototype.generateIdenticonSvg = function (address, diameter) {
+  var numericRepresentation = jsNumberForAddress(address)
+  var cacheId = address+':'+diameter
+  // check cache, lazily generate and populate cache
+  var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter))
+  // create a clean copy so you can modify it
+  var cleanCopy = identicon.cloneNode(true)
+  return cleanCopy
+}
+
+// creates a new identicon
+IconFactory.prototype.generateNewIdenticon = function (address, diameter) {
   var numericRepresentation = jsNumberForAddress(address)
   var identicon = this.jazzicon(diameter, numericRepresentation)
-  var identiconSrc = identicon.innerHTML
-  var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
-  return dataUri
+  return identicon
 }
 
-IconFactory.prototype.cacheIcon = function (address, diameter, icon) {
-  if (!(address in this.cache)) {
-    var sizeCache = {}
-    sizeCache[diameter] = icon
-    this.cache[address] = sizeCache
-    return sizeCache
-  } else {
-    this.cache[address][diameter] = icon
-    return icon
-  }
-}
-
-IconFactory.prototype.isCached = function (address, diameter) {
-  return address in this.cache && diameter in this.cache[address]
-}
+// util
 
 function jsNumberForAddress (address) {
   var addr = address.slice(2, 10)
   var seed = parseInt(addr, 16)
   return seed
 }
+
+function toDataUri(identiconSrc){
+  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
+}