5 files changed, 221 insertions, 5 deletions
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..ea534b7da
--- /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/add-token.js b/old-ui/app/add-token.js
index e869ac39a..6cf211636 100644
--- a/old-ui/app/add-token.js
+++ b/old-ui/app/add-token.js
@@ -196,7 +196,7 @@ AddTokenScreen.prototype.validateInputs = function () {
     msg += 'Address is invalid.'
   }
 
-  const validDecimals = decimals >= 0 && decimals < 36
+  const validDecimals = decimals >= 0 && decimals <= 36
   if (!validDecimals) {
     msg += 'Decimals must be at least 0, and not over 36. '
   }
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/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js
index 8ab647efd..234c06a01 100644
--- a/old-ui/app/components/app-bar.js
+++ b/old-ui/app/components/app-bar.js
@@ -350,11 +350,14 @@ module.exports = class AppBar extends Component {
     }
   }
 
-  renderCommonRpc (rpcList, {rpcTarget}) {
+  renderCommonRpc (rpcList, provider) {
     const {dispatch} = this.props
+    const reversedRpcList = rpcList.slice().reverse()
 
-    return rpcList.map((rpc) => {
-      if ((rpc === LOCALHOST_RPC_URL) || (rpc === rpcTarget)) {
+    return reversedRpcList.map((rpc) => {
+      const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
+
+      if ((rpc === LOCALHOST_RPC_URL) || currentRpcTarget) {
         return null
       } else {
         return h(DropdownMenuItem, {
@@ -364,7 +367,7 @@ module.exports = class AppBar extends Component {
         }, [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
           rpc,
-          rpcTarget === rpc
+          currentRpcTarget
             ? h('.check', '✓')
             : null,
         ])