Merge pull request #1505 from MetaMask/AddContractIconMap

Add address image map to icon factory

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Fix bug where submit button was enabled for invalid gas inputs.
 - Now enforce 95% of block's gasLimit to protect users.
 - Removing provider-engine from the inpage provider. This fixes some error handling inconsistencies introduced in 3.7.0.
+- Some contracts will now display logos instead of jazzicons.
 
 ## 3.7.0 2017-5-23
 

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')

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",

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,23 +15,13 @@ function IconFactory (jazzicon) {
   this.cache = {}
 }
 
-IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
-  if (imageify) {
-    return this.generateIdenticonImg(address, diameter)
-  } else {
+IconFactory.prototype.iconForAddress = function (address, diameter) {
+  const addr = toChecksumAddress(address)
+  if (iconExistsFor(addr)) {
+    return imageElFor(addr)
+  }
   return this.generateIdenticonSvg(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) {
@@ -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)
-}