diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ad1b2f50..ca9cc6f5a 100644 --- a/CHANGELOG.md +++ b/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 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) -}