20 files changed, 595 insertions, 50 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index a25a2bd59..f61fb4335 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -29,6 +29,9 @@
   "addTokens": {
     "message": "Add Tokens"
   },
+  "addSuggestedTokens": {
+    "message": "Add Suggested Tokens"
+  },
   "addAcquiredTokens": {
     "message": "Add the tokens you've acquired using MetaMask"
   },
diff --git a/app/scripts/background.js b/app/scripts/background.js
index c7395c810..029ad139a 100644
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@@ -256,6 +256,7 @@ function setupController (initState, initLangCode) {
     showUnconfirmedMessage: triggerUi,
     unlockAccountMessage: triggerUi,
     showUnapprovedTx: triggerUi,
+    showAddTokenUi: triggerUi,
     // initial state
     initState,
     // initial locale code
@@ -449,3 +450,4 @@ extension.runtime.onInstalled.addListener(function (details) {
     extension.tabs.create({url: 'https://metamask.io/#how-it-works'})
   }
 })
+
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 707fd7de9..611d2d067 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -1,5 +1,6 @@
 const ObservableStore = require('obs-store')
 const normalizeAddress = require('eth-sig-util').normalize
+const isValidAddress = require('ethereumjs-util').isValidAddress
 const extend = require('xtend')
 
 
@@ -14,6 +15,7 @@ class PreferencesController {
    * @property {string} store.currentAccountTab Indicates the selected tab in the ui
    * @property {array} store.tokens The tokens the user wants display in their token lists
    * @property {object} store.accountTokens The tokens stored per account and then per network type
+   * @property {object} store.imageObjects Contains assets objects related to assets added
    * @property {boolean} store.useBlockie The users preference for blockie identicons within the UI
    * @property {object} store.featureFlags A key-boolean map, where keys refer to features and booleans to whether the
    * user wishes to see that feature
@@ -26,7 +28,9 @@ class PreferencesController {
       frequentRpcList: [],
       currentAccountTab: 'history',
       accountTokens: {},
+      imageObjects: {},
       tokens: [],
+      suggestedTokens: {},
       useBlockie: false,
       featureFlags: {},
       currentLocale: opts.initLangCode,
@@ -37,6 +41,7 @@ class PreferencesController {
     this.diagnostics = opts.diagnostics
     this.network = opts.network
     this.store = new ObservableStore(initState)
+    this.showAddTokenUi = opts.showAddTokenUi
     this._subscribeProviderType()
   }
 // PUBLIC METHODS
@@ -51,6 +56,50 @@ class PreferencesController {
     this.store.updateState({ useBlockie: val })
   }
 
+  getSuggestedTokens () {
+    return this.store.getState().suggestedTokens
+  }
+
+  getImageObjects () {
+    return this.store.getState().imageObjects
+  }
+
+  addSuggestedToken (tokenOpts) {
+    this._validateSuggestedTokenParams(tokenOpts)
+    const suggested = this.getSuggestedTokens()
+    const { rawAddress, symbol, decimals, imageUrl } = tokenOpts
+    const address = normalizeAddress(rawAddress)
+    const newEntry = { address, symbol, decimals, imageUrl }
+    suggested[address] = newEntry
+    this.store.updateState({ suggestedTokens: suggested })
+  }
+
+  /**
+   * RPC engine middleware for requesting new asset added
+   *
+   * @param req
+   * @param res
+   * @param {Function} - next
+   * @param {Function} - end
+   */
+  requestAddToken (req, res, next, end) {
+    if (req.method === 'metamask_watchAsset') {
+      const { type, options } = req.params
+      switch (type) {
+        case 'ERC20':
+          this._handleWatchAssetERC20(options, res)
+          res.result = options.address
+          end()
+          break
+        default:
+          // TODO return promise for not handled assets
+          end(new Error(`Asset of type ${type} not supported`))
+      }
+    } else {
+      next()
+    }
+  }
+
   /**
    * Getter for the `useBlockie` property
    *
@@ -186,6 +235,13 @@ class PreferencesController {
     return selected
   }
 
+  removeSuggestedTokens () {
+    return new Promise((resolve, reject) => {
+      this.store.updateState({ suggestedTokens: {} })
+      resolve({})
+    })
+  }
+
   /**
    * Setter for the `selectedAddress` property
    *
@@ -232,11 +288,11 @@ class PreferencesController {
    * @returns {Promise<array>} Promises the new array of AddedToken objects.
    *
    */
-  async addToken (rawAddress, symbol, decimals) {
+  async addToken (rawAddress, symbol, decimals, imageUrl) {
     const address = normalizeAddress(rawAddress)
     const newEntry = { address, symbol, decimals }
-
     const tokens = this.store.getState().tokens
+    const imageObjects = this.getImageObjects()
     const previousEntry = tokens.find((token, index) => {
       return token.address === address
     })
@@ -247,7 +303,8 @@ class PreferencesController {
     } else {
       tokens.push(newEntry)
     }
-    this._updateAccountTokens(tokens)
+    imageObjects[address] = imageUrl
+    this._updateAccountTokens(tokens, imageObjects)
     return Promise.resolve(tokens)
   }
 
@@ -260,8 +317,10 @@ class PreferencesController {
    */
   removeToken (rawAddress) {
     const tokens = this.store.getState().tokens
+    const imageObjects = this.getImageObjects()
     const updatedTokens = tokens.filter(token => token.address !== rawAddress)
-    this._updateAccountTokens(updatedTokens)
+    delete imageObjects[rawAddress]
+    this._updateAccountTokens(updatedTokens, imageObjects)
     return Promise.resolve(updatedTokens)
   }
 
@@ -387,6 +446,26 @@ class PreferencesController {
   //
   // PRIVATE METHODS
   //
+
+  /**
+   * Validates that the passed options for suggested token have all required properties.
+   *
+   * @param {Object} opts The options object to validate
+   * @throws {string} Throw a custom error indicating that address, symbol and/or decimals
+   * doesn't fulfill requirements
+   *
+   */
+  _validateSuggestedTokenParams (opts) {
+    const { rawAddress, symbol, decimals } = opts
+    if (!rawAddress || !symbol || !decimals) throw new Error(`Cannot suggest token without address, symbol, and decimals`)
+    if (!(symbol.length < 5)) throw new Error(`Invalid symbol ${symbol} more than four characters`)
+    const numDecimals = parseInt(decimals, 10)
+    if (isNaN(numDecimals) || numDecimals > 36 || numDecimals < 0) {
+      throw new Error(`Invalid decimals ${decimals} must be at least 0, and not over 36`)
+    }
+    if (!isValidAddress(rawAddress)) throw new Error(`Invalid address ${rawAddress}`)
+  }
+
   /**
    * Subscription to network provider type.
    *
@@ -405,10 +484,10 @@ class PreferencesController {
    * @param {array} tokens Array of tokens to be updated.
    *
    */
-  _updateAccountTokens (tokens) {
+  _updateAccountTokens (tokens, imageObjects) {
     const { accountTokens, providerType, selectedAddress } = this._getTokenRelatedStates()
     accountTokens[selectedAddress][providerType] = tokens
-    this.store.updateState({ accountTokens, tokens })
+    this.store.updateState({ accountTokens, tokens, imageObjects })
   }
 
   /**
@@ -438,6 +517,22 @@ class PreferencesController {
     const tokens = accountTokens[selectedAddress][providerType]
     return { tokens, accountTokens, providerType, selectedAddress }
   }
+
+  /**
+   * Handle the suggestion of an ERC20 asset through `watchAsset`
+   * *
+   * @param {Object} options Parameters according to addition of ERC20 token
+   *
+   */
+  _handleWatchAssetERC20 (options) {
+    // TODO handle bad parameters
+    const { address, symbol, decimals, imageUrl } = options
+    const rawAddress = address
+    this._validateSuggestedTokenParams({ rawAddress, symbol, decimals })
+    const tokenOpts = { rawAddress, decimals, symbol, imageUrl }
+    this.addSuggestedToken(tokenOpts)
+    this.showAddTokenUi()
+  }
 }
 
 module.exports = PreferencesController
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 2d7d2c671..57001fdff 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -88,6 +88,7 @@ module.exports = class MetamaskController extends EventEmitter {
     this.preferencesController = new PreferencesController({
       initState: initState.PreferencesController,
       initLangCode: opts.initLangCode,
+      showAddTokenUi: opts.showAddTokenUi,
       network: this.networkController,
     })
 
@@ -386,6 +387,7 @@ module.exports = class MetamaskController extends EventEmitter {
       setSelectedAddress: nodeify(preferencesController.setSelectedAddress, preferencesController),
       addToken: nodeify(preferencesController.addToken, preferencesController),
       removeToken: nodeify(preferencesController.removeToken, preferencesController),
+      removeSuggestedTokens: nodeify(preferencesController.removeSuggestedTokens, preferencesController),
       setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController),
       setAccountLabel: nodeify(preferencesController.setAccountLabel, preferencesController),
       setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
@@ -1239,6 +1241,7 @@ module.exports = class MetamaskController extends EventEmitter {
     engine.push(createOriginMiddleware({ origin }))
     engine.push(createLoggerMiddleware({ origin }))
     engine.push(filterMiddleware)
+    engine.push(this.preferencesController.requestAddToken.bind(this.preferencesController))
     engine.push(createProviderMiddleware({ provider: this.provider }))
 
     // setup connection
diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js
index c67f0cf71..d240fc38e 100644
--- a/old-ui/app/account-detail.js
+++ b/old-ui/app/account-detail.js
@@ -32,6 +32,7 @@ function mapStateToProps (state) {
     currentCurrency: state.metamask.currentCurrency,
     currentAccountTab: state.metamask.currentAccountTab,
     tokens: state.metamask.tokens,
+    suggestedTokens: state.metamask.suggestedTokens,
     computedBalances: state.metamask.computedBalances,
   }
 }
@@ -49,6 +50,10 @@ AccountDetailScreen.prototype.render = function () {
   var account = props.accounts[selected]
   const { network, conversionRate, currentCurrency } = props
 
+  if (Object.keys(props.suggestedTokens).length > 0) {
+    this.props.dispatch(actions.showAddSuggestedTokenPage())
+  }
+
   return (
 
     h('.account-detail-section.full-flex-height', [
diff --git a/old-ui/app/add-suggested-token.js b/old-ui/app/add-suggested-token.js
new file mode 100644
index 000000000..51be4c5f2
--- /dev/null
+++ b/old-ui/app/add-suggested-token.js
@@ -0,0 +1,202 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../ui/app/actions')
+const Tooltip = require('./components/tooltip.js')
+const ethUtil = require('ethereumjs-util')
+const Copyable = require('./components/copyable')
+const addressSummary = require('./util').addressSummary
+
+
+module.exports = connect(mapStateToProps)(AddSuggestedTokenScreen)
+
+function mapStateToProps (state) {
+  return {
+    identities: state.metamask.identities,
+    suggestedTokens: state.metamask.suggestedTokens,
+  }
+}
+
+inherits(AddSuggestedTokenScreen, Component)
+function AddSuggestedTokenScreen () {
+    this.state = {
+    warning: null,
+  }
+  Component.call(this)
+}
+
+AddSuggestedTokenScreen.prototype.render = function () {
+  const state = this.state
+  const props = this.props
+  const { warning } = state
+  const key = Object.keys(props.suggestedTokens)[0]
+  const { address, symbol, decimals } = props.suggestedTokens[key]
+
+  return (
+    h('.flex-column.flex-grow', [
+
+      // subtitle and nav
+      h('.section-title.flex-row.flex-center', [
+        h('h2.page-subtitle', 'Add Suggested Token'),
+      ]),
+
+      h('.error', {
+        style: {
+          display: warning ? 'block' : 'none',
+          padding: '0 20px',
+          textAlign: 'center',
+        },
+      }, warning),
+
+      // conf view
+      h('.flex-column.flex-justify-center.flex-grow.select-none', [
+        h('.flex-space-around', {
+          style: {
+            padding: '20px',
+          },
+        }, [
+
+          h('div', [
+            h(Tooltip, {
+              position: 'top',
+              title: 'The contract of the actual token contract. Click for more info.',
+            }, [
+              h('a', {
+                style: { fontWeight: 'bold', paddingRight: '10px'},
+                href: 'https://support.metamask.io/kb/article/24-what-is-a-token-contract-address',
+                target: '_blank',
+              }, [
+                h('span', 'Token Contract Address  '),
+                h('i.fa.fa-question-circle'),
+              ]),
+            ]),
+          ]),
+
+          h('div', {
+            style: { display: 'flex' },
+          }, [
+            h(Copyable, {
+            value: ethUtil.toChecksumAddress(address),
+            }, [
+              h('span#token-address', {
+                style: {
+                  width: 'inherit',
+                  flex: '1 0 auto',
+                  height: '30px',
+                  margin: '8px',
+                  display: 'flex',
+                },
+              }, addressSummary(address, 24, 4, false)),
+            ]),
+          ]),
+
+          h('div', [
+            h('span', {
+              style: { fontWeight: 'bold', paddingRight: '10px'},
+            }, 'Token Symbol'),
+          ]),
+
+          h('div', { style: {display: 'flex'} }, [
+            h('p#token_symbol', {
+              style: {
+                width: 'inherit',
+                flex: '1 0 auto',
+                height: '30px',
+                margin: '8px',
+              },
+            }, symbol),
+          ]),
+
+          h('div', [
+            h('span', {
+              style: { fontWeight: 'bold', paddingRight: '10px'},
+            }, 'Decimals of Precision'),
+          ]),
+
+          h('div', { style: {display: 'flex'} }, [
+            h('p#token_decimals', {
+              type: 'number',
+              style: {
+                width: 'inherit',
+                flex: '1 0 auto',
+                height: '30px',
+                margin: '8px',
+              },
+            }, decimals),
+          ]),
+
+          h('button', {
+            style: {
+              alignSelf: 'center',
+              margin: '8px',
+            },
+            onClick: (event) => {
+              this.props.dispatch(actions.removeSuggestedTokens())
+            },
+          }, 'Cancel'),
+
+          h('button', {
+            style: {
+              alignSelf: 'center',
+              margin: '8px',
+            },
+            onClick: (event) => {
+              const valid = this.validateInputs({ address, symbol, decimals })
+              if (!valid) return
+
+              this.props.dispatch(actions.addToken(address.trim(), symbol.trim(), decimals))
+                .then(() => {
+                  this.props.dispatch(actions.removeSuggestedTokens())
+                })
+            },
+          }, 'Add'),
+        ]),
+      ]),
+    ])
+  )
+}
+
+AddSuggestedTokenScreen.prototype.componentWillMount = function () {
+  if (typeof global.ethereumProvider === 'undefined') return
+}
+
+AddSuggestedTokenScreen.prototype.validateInputs = function (opts) {
+  let msg = ''
+  const identitiesList = Object.keys(this.props.identities)
+  const { address, symbol, decimals } = opts
+  const standardAddress = ethUtil.addHexPrefix(address).toLowerCase()
+
+  const validAddress = ethUtil.isValidAddress(address)
+  if (!validAddress) {
+    msg += 'Address is invalid.'
+  }
+
+  const validDecimals = decimals >= 0 && decimals < 36
+  if (!validDecimals) {
+    msg += 'Decimals must be at least 0, and not over 36. '
+  }
+
+  const symbolLen = symbol.trim().length
+  const validSymbol = symbolLen > 0 && symbolLen < 10
+  if (!validSymbol) {
+    msg += 'Symbol must be between 0 and 10 characters.'
+  }
+
+  const ownAddress = identitiesList.includes(standardAddress)
+  if (ownAddress) {
+    msg = 'Personal address detected. Input the token contract address.'
+  }
+
+  const isValid = validAddress && validDecimals && !ownAddress
+
+  if (!isValid) {
+    this.setState({
+      warning: msg,
+    })
+  } else {
+    this.setState({ warning: null })
+  }
+
+  return isValid
+}
diff --git a/old-ui/app/app.js b/old-ui/app/app.js
index d3e9e823b..9be21ebad 100644
--- a/old-ui/app/app.js
+++ b/old-ui/app/app.js
@@ -23,6 +23,7 @@ const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
 // other views
 const ConfigScreen = require('./config')
 const AddTokenScreen = require('./add-token')
+const AddSuggestedTokenScreen = require('./add-suggested-token')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
 const NewUiAnnouncement = require('./new-ui-annoucement')
@@ -74,6 +75,7 @@ function mapStateToProps (state) {
     lostAccounts: state.metamask.lostAccounts,
     frequentRpcList: state.metamask.frequentRpcList || [],
     featureFlags,
+    suggestedTokens: state.metamask.suggestedTokens,
 
     // state needed to get account dropdown temporarily rendering from app bar
     identities,
@@ -236,6 +238,10 @@ App.prototype.renderPrimary = function () {
       log.debug('rendering add-token screen from unlock screen.')
       return h(AddTokenScreen, {key: 'add-token'})
 
+    case 'add-suggested-token':
+      log.debug('rendering add-suggested-token screen from unlock screen.')
+      return h(AddSuggestedTokenScreen, {key: 'add-suggested-token'})
+
     case 'config':
       log.debug('rendering config screen')
       return h(ConfigScreen, {key: 'config'})
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6bcc64e17..b5f97d374 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -227,11 +227,14 @@ var actions = {
   SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
   showConfigPage,
   SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
+  SHOW_ADD_SUGGESTED_TOKEN_PAGE: 'SHOW_ADD_SUGGESTED_TOKEN_PAGE',
   showAddTokenPage,
+  showAddSuggestedTokenPage,
   addToken,
   addTokens,
   removeToken,
   updateTokens,
+  removeSuggestedTokens,
   UPDATE_TOKENS: 'UPDATE_TOKENS',
   setRpcTarget: setRpcTarget,
   setProviderType: setProviderType,
@@ -1589,11 +1592,18 @@ function showAddTokenPage (transitionForward = true) {
   }
 }
 
-function addToken (address, symbol, decimals) {
+function showAddSuggestedTokenPage (transitionForward = true) {
+  return {
+    type: actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE,
+    value: transitionForward,
+  }
+}
+
+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))
@@ -1643,6 +1653,27 @@ function addTokens (tokens) {
   }
 }
 
+function removeSuggestedTokens () {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.removeSuggestedTokens((err, suggestedTokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+        }
+        dispatch(actions.clearPendingTokens())
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+          return global.platform.closeCurrentWindow()
+        }
+        resolve(suggestedTokens)
+      })
+    })
+    .then(() => updateMetamaskStateFromBackground())
+    .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens})))
+  }
+}
+
 function updateTokens (newTokens) {
   return {
     type: actions.UPDATE_TOKENS,
@@ -1650,6 +1681,12 @@ function updateTokens (newTokens) {
   }
 }
 
+function clearPendingTokens () {
+  return {
+    type: actions.CLEAR_PENDING_TOKENS,
+  }
+}
+
 function goBackToInitView () {
   return {
     type: actions.BACK_TO_INIT_MENU,
@@ -2310,9 +2347,3 @@ function setPendingTokens (pendingTokens) {
     payload: tokens,
   }
 }
-
-function clearPendingTokens () {
-  return {
-    type: actions.CLEAR_PENDING_TOKENS,
-  }
-}
diff --git a/ui/app/app.js b/ui/app/app.js
index 4fcf092ca..cdda44d40 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -26,6 +26,7 @@ const RestoreVaultPage = require('./components/pages/keychains/restore-vault').d
 const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
 const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
+const ConfirmAddSuggestedTokenPage = require('./components/pages/confirm-add-suggested-token')
 const CreateAccountPage = require('./components/pages/create-account')
 const NoticeScreen = require('./components/pages/notice')
 
@@ -51,6 +52,7 @@ const {
   RESTORE_VAULT_ROUTE,
   ADD_TOKEN_ROUTE,
   CONFIRM_ADD_TOKEN_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
   NEW_ACCOUNT_ROUTE,
   SEND_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
@@ -85,6 +87,7 @@ class App extends Component {
         h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }),
         h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
         h(Authenticated, { path: CONFIRM_ADD_TOKEN_ROUTE, exact, component: ConfirmAddTokenPage }),
+        h(Authenticated, { path: CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, exact, component: ConfirmAddSuggestedTokenPage }),
         h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }),
         h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }),
       ])
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index e31552f2d..042420789 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -22,6 +22,7 @@ function mapStateToProps (state) {
     network,
     conversionRate: state.metamask.conversionRate,
     currentCurrency: state.metamask.currentCurrency,
+    imageObjects: state.metamask.imageObjects,
   }
 }
 
@@ -32,7 +33,9 @@ function BalanceComponent () {
 
 BalanceComponent.prototype.render = function () {
   const props = this.props
-  const { token, network } = props
+  const { token, network, imageObjects } = props
+  let imageUrl
+  if (token) imageUrl = imageObjects[token.address]
 
   return h('div.balance-container', {}, [
 
@@ -45,6 +48,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..6b632352f 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -26,36 +26,42 @@ 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,
-        },
-      })
-    )
+  const style = {
+    height: diameter,
+    width: diameter,
+    borderRadius: diameter / 2,
+  }
+  if (imageUrl) {
+    return h('img', {
+      className: `${className} identicon`,
+      src: imageUrl,
+      style: {
+        ...style,
+      },
+    })
+  } else if (address) {
+    return h('div', {
+      className: `${className} identicon`,
+      key: 'identicon-' + address,
+      style: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style,
+        overflow: 'hidden',
+      },
+    })
+  } else {
+    return h('img.balance-icon', {
+      src: './images/eth_logo.svg',
+      style: {
+        ...style,
+      },
+    })
+  }
 }
 
 IdenticonComponent.prototype.componentDidMount = function () {
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 1518fa9a0..4ed09d2ee 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -10,6 +10,7 @@ function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     token: state.appState.modal.modalState.props.token,
+    imageObjects: state.metamask.imageObjects,
   }
 }
 
@@ -40,8 +41,9 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmat
 
 
 HideTokenConfirmationModal.prototype.render = function () {
-  const { token, network, hideToken, hideModal } = this.props
+  const { token, network, hideToken, hideModal, imageObjects } = this.props
   const { symbol, address } = token
+  const imageUrl = imageObjects[address]
 
   return h('div.hide-token-confirmation', {}, [
     h('div.hide-token-confirmation__container', {
@@ -55,6 +57,7 @@ HideTokenConfirmationModal.prototype.render = function () {
         diameter: 45,
         address,
         network,
+        imageUrl,
       }),
 
       h('div.hide-token-confirmation__symbol', {}, symbol),
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
new file mode 100644
index 000000000..37d9aca02
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { DEFAULT_ROUTE } from '../../../routes'
+import Button from '../../button'
+import Identicon from '../../../components/identicon'
+import TokenBalance from '../confirm-add-token/token-balance'
+
+export default class ConfirmAddSuggestedToken extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    clearPendingTokens: PropTypes.func,
+    addToken: PropTypes.func,
+    pendingTokens: PropTypes.object,
+    removeSuggestedTokens: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { pendingTokens = {}, history } = this.props
+
+    if (Object.keys(pendingTokens).length === 0) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  getTokenName (name, symbol) {
+    return typeof name === 'undefined'
+      ? symbol
+      : `${name} (${symbol})`
+  }
+
+  render () {
+    const { addToken, pendingTokens, removeSuggestedTokens, history } = this.props
+    const pendingTokenKey = Object.keys(pendingTokens)[0]
+    const pendingToken = pendingTokens[pendingTokenKey]
+
+    return (
+      <div className="page-container">
+        <div className="page-container__header">
+          <div className="page-container__title">
+            { this.context.t('addSuggestedTokens') }
+          </div>
+          <div className="page-container__subtitle">
+            { this.context.t('likeToAddTokens') }
+          </div>
+        </div>
+        <div className="page-container__content">
+          <div className="confirm-add-token">
+            <div className="confirm-add-token__header">
+              <div className="confirm-add-token__token">
+                { this.context.t('token') }
+              </div>
+              <div className="confirm-add-token__balance">
+                { this.context.t('balance') }
+              </div>
+            </div>
+            <div className="confirm-add-token__token-list">
+              {
+                Object.entries(pendingTokens)
+                  .map(([ address, token ]) => {
+                    const { name, symbol, imageUrl } = token
+
+                    return (
+                      <div
+                        className="confirm-add-token__token-list-item"
+                        key={address}
+                      >
+                        <div className="confirm-add-token__token confirm-add-token__data">
+                          <Identicon
+                            className="confirm-add-token__token-icon"
+                            diameter={48}
+                            address={address}
+                            imageUrl={imageUrl}
+                          />
+                          <div className="confirm-add-token__name">
+                            { this.getTokenName(name, symbol) }
+                          </div>
+                        </div>
+                        <div className="confirm-add-token__balance">
+                          <TokenBalance token={token} />
+                        </div>
+                      </div>
+                    )
+                })
+              }
+            </div>
+          </div>
+        </div>
+        <div className="page-container__footer">
+          <Button
+            type="default"
+            large
+            className="page-container__footer-button"
+            onClick={() => {
+              removeSuggestedTokens()
+              .then(() => {
+                history.push(DEFAULT_ROUTE)
+              })
+          }}
+          >
+            { this.context.t('cancel') }
+          </Button>
+          <Button
+            type="primary"
+            large
+            className="page-container__footer-button"
+            onClick={() => {
+              addToken(pendingToken)
+                .then(() => {
+                  removeSuggestedTokens()
+                  .then(() => {
+                    history.push(DEFAULT_ROUTE)
+                  })
+                })
+            }}
+          >
+            { 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
new file mode 100644
index 000000000..89291ff4f
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -0,0 +1,29 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
+import { withRouter } from 'react-router-dom'
+
+const extend = require('xtend')
+
+const { addToken, removeSuggestedTokens } = require('../../../actions')
+
+const mapStateToProps = ({ metamask }) => {
+  const { pendingTokens, suggestedTokens } = metamask
+  const params = extend(pendingTokens, suggestedTokens)
+
+  return {
+    pendingTokens: params,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)),
+    removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmAddSuggestedToken)
diff --git a/ui/app/components/pages/confirm-add-suggested-token/index.js b/ui/app/components/pages/confirm-add-suggested-token/index.js
new file mode 100644
index 000000000..2ca56b43c
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/index.js
@@ -0,0 +1,2 @@
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.container'
+module.exports = ConfirmAddSuggestedToken
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 5e3fdc9af..6ee083579 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -25,6 +25,7 @@ const {
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   NOTICE_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
 } = require('../../routes')
 
 const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
@@ -33,9 +34,15 @@ class Home extends Component {
   componentDidMount () {
     const {
       history,
+      suggestedTokens = {},
       unconfirmedTransactionsCount = 0,
     } = this.props
 
+    // suggested new tokens
+    if (Object.keys(suggestedTokens).length > 0) {
+      history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
+    }
+
     // unapprovedTxs and unapproved messages
     if (unconfirmedTransactionsCount > 0) {
       history.push(CONFIRM_TRANSACTION_ROUTE)
@@ -165,6 +172,7 @@ Home.propTypes = {
   isPopup: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   t: PropTypes.func,
+  suggestedTokens: PropTypes.object,
   unconfirmedTransactionsCount: PropTypes.number,
 }
 
@@ -226,7 +234,7 @@ function mapStateToProps (state) {
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,
     Qr: state.appState.Qr,
     welcomeScreenSeen: state.metamask.welcomeScreenSeen,
-
+    suggestedTokens: state.metamask.suggestedTokens,
     // state needed to get account dropdown temporarily rendering from app bar
     selected,
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
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..7ee8b5faa 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -9,10 +9,13 @@ 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
   return {
     network: state.metamask.network,
     tokens: state.metamask.tokens,
     userAddress: selectors.getSelectedAddress(state),
+    imageObjects: state.metamask.imageObjects,
   }
 }
 
@@ -44,10 +47,9 @@ function TokenList () {
 }
 
 TokenList.prototype.render = function () {
-  const { userAddress } = this.props
+  const { userAddress, imageObjects } = this.props
   const state = this.state
   const { tokens, isLoading, error } = state
-
   if (isLoading) {
     return this.message(this.context.t('loadingTokens'))
   }
@@ -74,7 +76,10 @@ TokenList.prototype.render = function () {
     ])
   }
 
-  return h('div', tokens.map((tokenData) => h(TokenCell, tokenData)))
+  return h('div', tokens.map((tokenData) => {
+    tokenData.imageUrl = imageObjects[tokenData.address]
+    return h(TokenCell, tokenData)
+  }))
 
 }
 
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index c246e7904..7be9b8d40 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -209,6 +209,15 @@ function reduceApp (state, action) {
         transForward: action.value,
       })
 
+    case actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'add-suggested-token',
+          context: appState.currentView.context,
+        },
+        transForward: action.value,
+      })
+
     case actions.SHOW_IMPORT_PAGE:
       return extend(appState, {
         currentView: {
diff --git a/ui/app/routes.js b/ui/app/routes.js
index f6b2a7a55..76afed5db 100644
--- a/ui/app/routes.js
+++ b/ui/app/routes.js
@@ -7,6 +7,7 @@ const CONFIRM_SEED_ROUTE = '/confirm-seed'
 const RESTORE_VAULT_ROUTE = '/restore-vault'
 const ADD_TOKEN_ROUTE = '/add-token'
 const CONFIRM_ADD_TOKEN_ROUTE = '/confirm-add-token'
+const CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE = '/confirm-add-suggested-token'
 const NEW_ACCOUNT_ROUTE = '/new-account'
 const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
 const CONNECT_HARDWARE_ROUTE = '/new-account/connect'
@@ -41,6 +42,7 @@ module.exports = {
   RESTORE_VAULT_ROUTE,
   ADD_TOKEN_ROUTE,
   CONFIRM_ADD_TOKEN_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
   NEW_ACCOUNT_ROUTE,
   IMPORT_ACCOUNT_ROUTE,
   CONNECT_HARDWARE_ROUTE,