Add address image map to icon factory

Deriving from the new address image map repository I've added here:
https://github.com/MetaMask/ethereum-contract-icons

With this PR, images for addresses added to that repository will be shown instead of jazzicons in MetaMask.

5 files changed, 36 insertions, 20 deletions

diff --git a/app/scripts/inpage.js b/app/scripts/inpage.js
index ec764535e..10e5ea39b 100644
--- a/app/scripts/inpage.js
+++ b/app/scripts/inpage.js
@@ -1,6 +1,6 @@
 /*global Web3*/
 cleanContextForImports()
-require('web3/dist/web3.min.js')
+require('web3')
 const LocalMessageDuplexStream = require('post-message-stream')
 // const PingStream = require('ping-pong-stream/ping')
 // const endOfStream = require('end-of-stream')
@@ -30,7 +30,7 @@ var web3 = new Web3(inpageProvider)
 web3.setProvider = function () {
   console.log('MetaMask - overrode web3.setProvider')
 }
-console.log('MetaMask - injected web3')
+console.log('MetaMask - injected modified web3')
 // export global web3, with usage-detection
 setupDappAutoReload(web3, inpageProvider.publicConfigStore)
 
diff --git a/app/scripts/lib/inpage-provider.js b/app/scripts/lib/inpage-provider.js
index 8b8623974..5206adc82 100644
--- a/app/scripts/lib/inpage-provider.js
+++ b/app/scripts/lib/inpage-provider.js
@@ -39,6 +39,8 @@ function MetamaskInpageProvider (connectionStream) {
   self.idMap = {}
   // handle sendAsync requests via asyncProvider
   self.sendAsync = function (payload, cb) {
+    console.trace('sending async ' + payload.method)
+    console.dir(payload)
     // rewrite request ids
     var request = eachJsonMessage(payload, (message) => {
       var newId = createRandomId()
diff --git a/gulpfile.js b/gulpfile.js
index 9f4a606be..5bba1b9b3 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -52,6 +52,15 @@ gulp.task('copy:images', copyTask({
     './dist/opera/images',
   ],
 }))
+gulp.task('copy:contractImages', copyTask({
+  source: './node_modules/ethereum-contract-icons/images/',
+  destinations: [
+    './dist/firefox/images/contract',
+    './dist/chrome/images/contract',
+    './dist/edge/images/contract',
+    './dist/opera/images/contract',
+  ],
+}))
 gulp.task('copy:fonts', copyTask({
   source: './app/fonts/',
   destinations: [
@@ -127,6 +136,7 @@ const staticFiles = [
 ]
 
 var copyStrings = staticFiles.map(staticFile => `copy:${staticFile}`)
+copyStrings.push('copy:contractImages')
 
 if (!disableLiveReload) {
   copyStrings.push('copy:reload')
diff --git a/package.json b/package.json
index 6b6996d9d..9f47d76cb 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "eth-query": "^2.1.1",
     "eth-sig-util": "^1.1.1",
     "eth-simple-keyring": "^1.1.1",
+    "ethereum-contract-icons": "^1.0.0",
     "ethereumjs-tx": "^1.3.0",
     "ethereumjs-util": "ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9",
     "ethereumjs-wallet": "^0.6.0",
diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js
index 82cc839d6..4aed9109b 100644
--- a/ui/lib/icon-factory.js
+++ b/ui/lib/icon-factory.js
@@ -1,4 +1,7 @@
 var iconFactory
+const isValidAddress = require('ethereumjs-util').isValidAddress
+const toChecksumAddress = require('ethereumjs-util').toChecksumAddress
+const iconMap = require('ethereum-contract-icons')
 
 module.exports = function (jazzicon) {
   if (!iconFactory) {
@@ -12,22 +15,12 @@ function IconFactory (jazzicon) {
   this.cache = {}
 }
 
-IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
-  if (imageify) {
-    return this.generateIdenticonImg(address, diameter)
-  } else {
-    return this.generateIdenticonSvg(address, diameter)
+IconFactory.prototype.iconForAddress = function (address, diameter) {
+  const addr = toChecksumAddress(address)
+  if (iconExistsFor(addr)) {
+    return imageElFor(addr)
   }
-}
-
-// 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
+  return this.generateIdenticonSvg(address, diameter)
 }
 
 // returns svg dom element
@@ -49,12 +42,22 @@ IconFactory.prototype.generateNewIdenticon = function (address, diameter) {
 
 // util
 
+function iconExistsFor (address) {
+  return (address in iconMap) && isValidAddress(address)
+}
+
+function imageElFor (address) {
+  const fileName = iconMap[address]
+  const path = `images/contract/${fileName}`
+  const img = document.createElement('img')
+  img.src = path
+  img.style.width = '100%'
+  return img
+}
+
 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)
-}