Implemented functionality for displaying recent custom RPCs

2 files changed, 26 insertions, 2 deletions

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,
+      })
+    }
+  })
+
+}