add support for images base64 and urls on new ui

7 files changed, 63 insertions, 42 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index d1168c168..4e3c87756 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1569,11 +1569,11 @@ function showAddSuggestedTokenPage (transitionForward = true) {
   }
 }
 
-function addToken (address, symbol, decimals) {
+function addToken (address, symbol, decimals, imageUrl) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     return new Promise((resolve, reject) => {
-      background.addToken(address, symbol, decimals, (err, tokens) => {
+      background.addToken(address, symbol, decimals, imageUrl, (err, tokens) => {
         dispatch(actions.hideLoadingIndication())
         if (err) {
           dispatch(actions.displayWarning(err.message))
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index e31552f2d..5e2919fca 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -33,6 +33,8 @@ function BalanceComponent () {
 BalanceComponent.prototype.render = function () {
   const props = this.props
   const { token, network } = props
+  let imageUrl
+  if (token) imageUrl = token.imageUrl
 
   return h('div.balance-container', {}, [
 
@@ -45,6 +47,7 @@ BalanceComponent.prototype.render = function () {
       diameter: 50,
       address: token && token.address,
       network,
+      imageUrl,
     }),
 
     token ? this.renderTokenBalance() : this.renderBalance(),
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 () {
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 2220ae685..5de0859cd 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -13,7 +13,7 @@ export default class ConfirmAddSuggestedToken extends Component {
   static propTypes = {
     history: PropTypes.object,
     clearPendingTokens: PropTypes.func,
-    addTokens: PropTypes.func,
+    addToken: PropTypes.func,
     pendingTokens: PropTypes.object,
     removeSuggestedTokens: PropTypes.func,
   }
@@ -33,7 +33,9 @@ export default class ConfirmAddSuggestedToken extends Component {
   }
 
   render () {
-    const { addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+    const { addToken, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+    const pendingTokenKey = Object.keys(pendingTokens)[0]
+    const pendingToken = pendingTokens[pendingTokenKey]
 
     return (
       <div className="page-container">
@@ -59,7 +61,7 @@ export default class ConfirmAddSuggestedToken extends Component {
               {
                 Object.entries(pendingTokens)
                   .map(([ address, token ]) => {
-                    const { name, symbol } = token
+                    const { name, symbol, imageUrl } = token
 
                     return (
                       <div
@@ -71,6 +73,7 @@ export default class ConfirmAddSuggestedToken extends Component {
                             className="confirm-add-token__token-icon"
                             diameter={48}
                             address={address}
+                            imageUrl={imageUrl}
                           />
                           <div className="confirm-add-token__name">
                             { this.getTokenName(name, symbol) }
@@ -102,14 +105,14 @@ export default class ConfirmAddSuggestedToken extends Component {
             large
             className="page-container__footer-button"
             onClick={() => {
-              addTokens(pendingTokens)
+              addToken(pendingToken)
                 .then(() => {
                   clearPendingTokens()
                   removeSuggestedTokens()
                 })
             }}
           >
-            { this.context.t('addTokens') }
+            { this.context.t('addToken') }
           </Button>
         </div>
       </div>
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
index 938c363b4..fba33222e 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -3,7 +3,7 @@ import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
 
 const extend = require('xtend')
 
-const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
+const { addToken, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
   const { pendingTokens, suggestedTokens } = metamask
@@ -16,7 +16,7 @@ const mapStateToProps = ({ metamask }) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    addTokens: tokens => dispatch(addTokens(tokens)),
+    addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)),
     clearPendingTokens: () => dispatch(clearPendingTokens()),
     removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
   }
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 4100d76a5..a84d8eda0 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -56,8 +56,8 @@ TokenCell.prototype.render = function () {
     sidebarOpen,
     currentCurrency,
     // userAddress,
+    imageUrl,
   } = props
-
   let currentTokenToFiatRate
   let currentTokenInFiat
   let formattedFiat = ''
@@ -97,6 +97,7 @@ TokenCell.prototype.render = function () {
         diameter: 50,
         address,
         network,
+        imageUrl,
       }),
 
       h('div.token-list-item__balance-ellipsis', null, [
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 42351cf89..a59c2e4e0 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -9,10 +9,15 @@ const selectors = require('../selectors')
 const log = require('loglevel')
 
 function mapStateToProps (state) {
+  // In order to get `imageUrl` from token added with `eth_watchToken`
+  // TODO do this with cache memory for browsers, add support for image object, var names
+  const tokenImagesHashes = {}
+  state.metamask.tokens.forEach((token) => { tokenImagesHashes[token.address] = token.imageUrl })
   return {
     network: state.metamask.network,
     tokens: state.metamask.tokens,
     userAddress: selectors.getSelectedAddress(state),
+    tokenImagesHashes: tokenImagesHashes,
   }
 }
 
@@ -44,10 +49,9 @@ function TokenList () {
 }
 
 TokenList.prototype.render = function () {
-  const { userAddress } = this.props
+  const { userAddress, tokenImagesHashes } = this.props
   const state = this.state
   const { tokens, isLoading, error } = state
-
   if (isLoading) {
     return this.message(this.context.t('loadingTokens'))
   }
@@ -74,7 +78,10 @@ TokenList.prototype.render = function () {
     ])
   }
 
-  return h('div', tokens.map((tokenData) => h(TokenCell, tokenData)))
+  return h('div', tokens.map((tokenData) => {
+    tokenData.imageUrl = tokenImagesHashes[tokenData.address]
+    return h(TokenCell, tokenData)
+  }))
 
 }