Merge pull request #255 from MetaMask/CacheIdenticons

Cache identicons

4 files changed, 91 insertions, 11 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea5da782e..7763e5211 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Current Master
 
+- Cache identicon images to optimize for long lists of transactions.
+
 ## 2.3.0 2016-06-06
 
 - Show network status in title bar
diff --git a/test/unit/lib/icon-factory-test.js b/test/unit/lib/icon-factory-test.js
new file mode 100644
index 000000000..2f24d408c
--- /dev/null
+++ b/test/unit/lib/icon-factory-test.js
@@ -0,0 +1,31 @@
+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)
+  })
+})
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index ef625cc62..fd61b3125 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -1,8 +1,10 @@
 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
+const jazzicon = require('jazzicon')
+const iconFactoryGen = require('../../lib/icon-factory')
+const iconFactory = iconFactoryGen(jazzicon)
 
 module.exports = IdenticonComponent
 
@@ -35,21 +37,14 @@ IdenticonComponent.prototype.componentDidMount = function(){
   var address = state.address
 
   if (!address) return
-  var numericRepresentation = jsNumberForAddress(address)
 
   var container = findDOMNode(this)
-  // jazzicon with hack to fix inline svg error
+
   var diameter = state.diameter || this.defaultDiameter
-  var identicon = jazzicon(diameter, numericRepresentation)
-  var identiconSrc = identicon.innerHTML
-  var dataUri = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(identiconSrc)
+  var dataUri = iconFactory.iconForAddress(address, diameter)
+
   var img = document.createElement('img')
   img.src = dataUri
   container.appendChild(img)
 }
 
-function jsNumberForAddress(address) {
-  var addr = address.slice(2, 10)
-  var seed = parseInt(addr, 16)
-  return seed
-}
diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js
new file mode 100644
index 000000000..1b1df9490
--- /dev/null
+++ b/ui/lib/icon-factory.js
@@ -0,0 +1,52 @@
+var iconFactory
+
+module.exports = function(jazzicon) {
+  if (!iconFactory) {
+    iconFactory = new IconFactory(jazzicon)
+  }
+  return iconFactory
+}
+
+function IconFactory(jazzicon) {
+  this.jazzicon = jazzicon
+  this.cache = {}
+}
+
+IconFactory.prototype.iconForAddress = function(address, diameter) {
+  if (this.isCached(address, diameter)) {
+    return this.cache[address][diameter]
+  }
+
+  const dataUri = this.generateNewUri(address, diameter)
+  this.cacheIcon(address, diameter, dataUri)
+  return dataUri
+}
+
+IconFactory.prototype.generateNewUri = 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
+}
+
+IconFactory.prototype.cacheIcon = function(address, diameter, icon) {
+  if (!(address in this.cache)) {
+    var sizeCache = {}
+    sizeCache[diameter] = icon
+    return this.cache[address] = sizeCache
+
+  } else {
+    return this.cache[address][diameter] = icon
+  }
+}
+
+IconFactory.prototype.isCached = function(address, diameter) {
+  return address in this.cache && diameter in this.cache[address]
+}
+
+function jsNumberForAddress(address) {
+  var addr = address.slice(2, 10)
+  var seed = parseInt(addr, 16)
+  return seed
+}