Implemented functionality for displaying recent custom RPCs

3 files changed, 41 insertions, 16 deletions

diff --git a/app/scripts/lib/controllers/preferences.js b/app/scripts/lib/controllers/preferences.js
index b28f31b4b..8cc320179 100644
--- a/app/scripts/lib/controllers/preferences.js
+++ b/app/scripts/lib/controllers/preferences.js
@@ -1,10 +1,11 @@
 const ObservableStore = require('obs-store')
 const normalizeAddress = require('../sig-util').normalize
+const extend = require('xtend')
 
 class PreferencesController {
 
   constructor (opts = {}) {
-    const initState = opts.initState || { frequentRPCList: [] }
+    const initState = extend({ frequentRpcList: [] }, opts.initState)
     this.store = new ObservableStore(initState)
   }
 
@@ -25,23 +26,23 @@ class PreferencesController {
   }
 
   addToFrequentRpcList (_url) {
-    return new Promise((resolve, reject) => {
-      let rpcList = this.getFrequentRPCList()
-      let index = rpcList.findIndex((element) => { element === _url })
-      if (index) {
-        rpcList.splice(index, 1)
-      }
-      if (rpcList.length >= 3) {
-        rpcList.shift()
-      }
+    let rpcList = this.getFrequentRpcList()
+    let index = rpcList.findIndex((element) => { return element === _url })
+    if (index !== -1) {
+      rpcList.splice(index, 1)
+    }
+    if (_url !== 'http://localhost:8545') {
       rpcList.push(_url)
-      this.store.updateState({ frequentRPCList: rpcList })
-      resolve()
-    })
+    }
+    if (rpcList.length > 2) {
+      rpcList.shift()
+    }
+    this.store.updateState({ frequentRpcList: rpcList })
+    return Promise.resolve()
   }
 
   getFrequentRpcList () {
-    return this.store.getState().frequentRPCList
+    return this.store.getState().frequentRpcList
   }
 
   //
diff --git a/ui/app/actions.js b/ui/app/actions.js
index a39646f33..86638fc91 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -627,8 +627,9 @@ function markAccountsFound() {
 
 function setRpcTarget (newRpc) {
   if (global.METAMASK_DEBUG) console.log(`background.setRpcTarget`)
-  background.setRpcTarget(newRpc)
-  background.addToFrequentRpcList(newRpc)
+  background.addToFrequentRpcList(newRpc, () => {
+    background.setRpcTarget(newRpc)
+  })
   return {
     type: actions.SET_RPC_TARGET,
     value: newRpc,
diff --git a/ui/app/app.js b/ui/app/app.js
index 6e249b09e..08a4326fe 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -58,6 +58,7 @@ function mapStateToProps (state) {
     forgottenPassword: state.appState.forgottenPassword,
     lastUnreadNotice: state.metamask.lastUnreadNotice,
     lostAccounts: state.metamask.lostAccounts,
+    frequentRpcList: state.metamask.frequentRpcList
   }
 }
 
@@ -210,6 +211,7 @@ App.prototype.renderAppBar = function () {
 
 App.prototype.renderNetworkDropdown = function () {
   const props = this.props
+  const rpcList = props.frequentRpcList
   const state = this.state || {}
   const isOpen = state.isNetworkMenuOpen
 
@@ -261,6 +263,7 @@ App.prototype.renderNetworkDropdown = function () {
     }),
 
     this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcList, props.provider),
 
     props.isUnlocked && h(DropMenuItem, {
       label: 'Custom RPC',
@@ -508,3 +511,23 @@ App.prototype.renderCustomOption = function (provider) {
       })
   }
 }
+
+App.prototype.renderCommonRpc = function (rpcList, provider) {
+  const { rpcTarget } = provider
+  const props = this.props
+
+  return rpcList.map((rpc) => {
+    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+      return null
+    } else {
+      return h(DropMenuItem, {
+        label: rpc,
+        closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+        action: () => props.dispatch(actions.setRpcTarget(rpc)),
+        icon: h('i.fa.fa-question-circle.fa-lg'),
+        activeNetworkRender: rpc,
+      })
+    }
+  })
+
+}