add support for images base64 and urls on new ui

1 files changed, 36 insertions, 29 deletions

diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 424048745..eadd6d5a2 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -26,36 +26,43 @@ function mapStateToProps (state) {
 
 IdenticonComponent.prototype.render = function () {
   var props = this.props
-  const { className = '', address } = props
+  const { className = '', address, imageUrl } = props
   var diameter = props.diameter || this.defaultDiameter
-
-  return address
-    ? (
-      h('div', {
-        className: `${className} identicon`,
-        key: 'identicon-' + address,
-        style: {
-          display: 'flex',
-          flexShrink: 0,
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: diameter,
-          width: diameter,
-          borderRadius: diameter / 2,
-          overflow: 'hidden',
-        },
-      })
-    )
-    : (
-      h('img.balance-icon', {
-        src: './images/eth_logo.svg',
-        style: {
-          height: diameter,
-          width: diameter,
-          borderRadius: diameter / 2,
-        },
-      })
-    )
+  // for tokens added with `watchToken` we need to render the given image
+  if (imageUrl) {
+    return h('img.balance-icon', {
+      src: imageUrl,
+      style: {
+        height: diameter,
+        width: diameter,
+        borderRadius: diameter / 2,
+      },
+    })
+  } else if (address) {
+    return h('div', {
+      className: `${className} identicon`,
+      key: 'identicon-' + address,
+      style: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: diameter,
+        width: diameter,
+        borderRadius: diameter / 2,
+        overflow: 'hidden',
+      },
+    })
+  } else {
+    return h('img.balance-icon', {
+      src: './images/eth_logo.svg',
+      style: {
+        height: diameter,
+        width: diameter,
+        borderRadius: diameter / 2,
+      },
+    })
+  }
 }
 
 IdenticonComponent.prototype.componentDidMount = function () {