Add placeholder etherscan token icons

3 files changed, 35 insertions, 3 deletions

diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 81e92b301..879dc01d1 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -12,7 +12,7 @@ function TokenCell () {
 
 TokenCell.prototype.render = function () {
   const props = this.props
-  const { address, symbol, string } = props
+  const { address, symbol, string, network } = props
   log.info({ address, symbol, string })
 
   return (
@@ -21,9 +21,11 @@ TokenCell.prototype.render = function () {
       h(Identicon, {
         diameter: 50,
         address,
+        network,
       }),
 
       h('h3', `${string || 0} ${symbol}`),
     ])
   )
 }
+
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index c6a7d3552..6589dea62 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -23,9 +23,10 @@ function TokenList () {
 
 TokenList.prototype.render = function () {
   const tokens = this.state.tokens
+  const network = this.props.network
 
   const tokenViews = tokens.map((tokenData) => {
-    console.log('rendering token with', tokenData)
+    tokenData.network = network
     return h(TokenCell, tokenData)
   })
 
@@ -43,6 +44,11 @@ TokenList.prototype.render = function () {
       margin-left: 12px;
     }
 
+    li.token-cell:hover {
+      background: white;
+      cursor: pointer;
+    }
+
     `)].concat(tokenViews))
   )
 }
diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js
index 82cc839d6..ac703ae40 100644
--- a/ui/lib/icon-factory.js
+++ b/ui/lib/icon-factory.js
@@ -10,9 +10,33 @@ module.exports = function (jazzicon) {
 function IconFactory (jazzicon) {
   this.jazzicon = jazzicon
   this.cache = {}
+
+  this.presets = {
+    '1':{ // Main network:
+      '0x48c80f1f4d53d5951e5d5438b54cba84f29f32a5': 'https://etherscan.io/token/images/augur.png',
+      '0xc66ea802717bfb9833400264dd12c2bceaa34a6d': 'https://etherscan.io/token/images/mkr-etherscan-35.png',
+      '0xa74476443119a942de498590fe1f2454d7d4ac0d': 'https://etherscan.io/token/images/golem.png',
+      '0xaec2e87e0a235266d9c5adc9deb4b2e29b54d009': 'https://etherscan.io/token/images/sngls.png',
+
+    }
+  }
 }
 
-IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
+IconFactory.prototype.iconForAddress = function (address, diameter, imageify, network) {
+
+  try {
+    const presetUri = this.presets[network][address.toLowerCase()]
+    if (presetUri) {
+      var img = document.createElement('img')
+      img.src = presetUri
+      img.style.width = `${diameter}px`
+      img.style.height = `${diameter}px`
+      img.style.borderRadius = `${diameter/2}px`
+      return img
+    }
+  } catch (e) {}
+
+
   if (imageify) {
     return this.generateIdenticonImg(address, diameter)
   } else {