update rpcList correctly

 * rename frequentRpcList to frequentRpcListDetail to prevent compatible issue
 * increase frequentRpcList length by 1

app/scripts/controllers/preferences.js

@@ -23,7 +23,7 @@ class PreferencesController {
    */
   constructor (opts = {}) {
     const initState = extend({
-      frequentRpcList: [],
+      frequentRpcListDetail: [],
       currentAccountTab: 'history',
       accountTokens: {},
       tokens: [],
@@ -298,10 +298,10 @@ class PreferencesController {
    * @returns {Promise<void>} Promise resolves with undefined
    *
    */
-  updateFrequentRpcList (_url) {
-    return this.addToFrequentRpcList(_url)
+  updateFrequentRpcList (_url, chainId) {
+    return this.addToFrequentRpcList(_url, chainId)
       .then((rpcList) => {
-        this.store.updateState({ frequentRpcList: rpcList })
+        this.store.updateState({ frequentRpcListDetail: rpcList })
         return Promise.resolve()
       })
   }
@@ -329,29 +329,29 @@ class PreferencesController {
    * @returns {Promise<array>} The updated frequentRpcList.
    *
    */
-  addToFrequentRpcList (_url) {
-    const rpcList = this.getFrequentRpcList()
-    const index = rpcList.findIndex((element) => { return element === _url })
+  addToFrequentRpcList (_url, chainId) {
+    const rpcList = this.getFrequentRpcListDetail()
+    const index = rpcList.findIndex((element) => { return element.rpcUrl === _url })
     if (index !== -1) {
       rpcList.splice(index, 1)
     }
     if (_url !== 'http://localhost:8545') {
-      rpcList.push(_url)
+      rpcList.push({rpcUrl : _url, chainId })
     }
-    if (rpcList.length > 2) {
+    if (rpcList.length > 3) {
       rpcList.shift()
     }
     return Promise.resolve(rpcList)
   }
 
   /**
-   * Getter for the `frequentRpcList` property.
+   * Getter for the `frequentRpcListDetail` property.
    *
-   * @returns {array<string>} An array of one or two rpc urls.
+   * @returns {array<array>} An array of rpc urls.
    *
    */
-  getFrequentRpcList () {
-    return this.store.getState().frequentRpcList
+  getFrequentRpcListDetail () {
+    return this.store.getState().frequentRpcListDetail
   }
 
   /**

app/scripts/metamask-controller.js

@@ -1381,7 +1381,7 @@ module.exports = class MetamaskController extends EventEmitter {
    */
   async setCustomRpc (rpcTarget, chainId) {
     this.networkController.setRpcTarget(rpcTarget, chainId)
-    await this.preferencesController.updateFrequentRpcList(rpcTarget)
+    await this.preferencesController.updateFrequentRpcList(rpcTarget, chainId)
     return rpcTarget
   }
 

old-ui/app/app.js

@@ -72,7 +72,7 @@ function mapStateToProps (state) {
     forgottenPassword: state.appState.forgottenPassword,
     nextUnreadNotice: state.metamask.nextUnreadNotice,
     lostAccounts: state.metamask.lostAccounts,
-    frequentRpcList: state.metamask.frequentRpcList || [],
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     featureFlags,
 
     // state needed to get account dropdown temporarily rendering from app bar

old-ui/app/components/app-bar.js

@@ -17,7 +17,7 @@ module.exports = class AppBar extends Component {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
-    frequentRpcList: PropTypes.array.isRequired,
+    frequentRpcListDetail: PropTypes.array.isRequired,
     isMascara: PropTypes.bool.isRequired,
     isOnboarding: PropTypes.bool.isRequired,
     identities: PropTypes.any.isRequired,
@@ -196,7 +196,7 @@ module.exports = class AppBar extends Component {
   renderNetworkDropdown () {
     const {
       dispatch,
-      frequentRpcList: rpcList,
+      frequentRpcListDetail: rpcList,
       provider,
     } = this.props
     const {
@@ -336,7 +336,7 @@ module.exports = class AppBar extends Component {
   }
 
   renderCustomOption ({ rpcTarget, type }) {
-    const {dispatch} = this.props
+    const {dispatch, network} = this.props
 
     if (type !== 'rpc') {
       return null
@@ -354,7 +354,7 @@ module.exports = class AppBar extends Component {
       default:
         return h(DropdownMenuItem, {
           key: rpcTarget,
-          onClick: () => dispatch(actions.setRpcTarget(rpcTarget)),
+          onClick: () => dispatch(actions.setRpcTarget(rpcTarget, network)),
           closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
         }, [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -364,21 +364,24 @@ module.exports = class AppBar extends Component {
     }
   }
 
-  renderCommonRpc (rpcList, {rpcTarget}) {
+  renderCommonRpc (rpcList, provider) {
     const {dispatch} = this.props
+    const {rpcTarget, type} = provider
 
-    return rpcList.map((rpc) => {
-      if ((rpc === LOCALHOST_RPC_URL) || (rpc === rpcTarget)) {
+    return rpcList.map((entry) => {
+      const rpc = entry.rpcUrl
+      const selected = type === 'rpc' && rpcTarget === rpc
+      if ((rpc === LOCALHOST_RPC_URL) || selected) {
         return null
       } else {
         return h(DropdownMenuItem, {
           key: `common${rpc}`,
           closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-          onClick: () => dispatch(actions.setRpcTarget(rpc)),
+          onClick: () => dispatch(actions.setRpcTarget(rpc, entry.chainId)),
         }, [
           h('i.fa.fa-question-circle.fa-lg.menu-icon'),
           rpc,
-          rpcTarget === rpc
+          selected
             ? h('.check', '✓')
             : null,
         ])

ui/app/app.js

@@ -99,7 +99,7 @@ class App extends Component {
       network,
       isMouseUser,
       provider,
-      frequentRpcList,
+      frequentRpcListDetail,
       currentView,
       setMouseUserState,
     } = this.props
@@ -139,7 +139,7 @@ class App extends Component {
         // network dropdown
         h(NetworkDropdown, {
           provider,
-          frequentRpcList,
+          frequentRpcListDetail,
         }, []),
 
         h(AccountMenu),
@@ -269,7 +269,7 @@ App.propTypes = {
   alertMessage: PropTypes.string,
   network: PropTypes.string,
   provider: PropTypes.object,
-  frequentRpcList: PropTypes.array,
+  frequentRpcListDetail: PropTypes.array,
   currentView: PropTypes.object,
   sidebarOpen: PropTypes.bool,
   alertOpen: PropTypes.bool,
@@ -361,7 +361,7 @@ function mapStateToProps (state) {
     forgottenPassword: state.appState.forgottenPassword,
     nextUnreadNotice,
     lostAccounts,
-    frequentRpcList: state.metamask.frequentRpcList || [],
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     currentCurrency: state.metamask.currentCurrency,
     isMouseUser: state.appState.isMouseUser,
     betaUI: state.metamask.featureFlags.betaUI,

ui/app/components/dropdowns/network-dropdown.js

@@ -24,7 +24,7 @@ const notToggleElementClassnames = [
 function mapStateToProps (state) {
   return {
     provider: state.metamask.provider,
-    frequentRpcList: state.metamask.frequentRpcList || [],
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     networkDropdownOpen: state.appState.networkDropdownOpen,
     network: state.metamask.network,
   }
@@ -69,7 +69,7 @@ module.exports = compose(
 NetworkDropdown.prototype.render = function () {
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
-  const rpcList = props.frequentRpcList
+  const rpcListDetail = props.frequentRpcListDetail
   const isOpen = this.props.networkDropdownOpen
   const dropdownMenuItemStyle = {
     fontSize: '16px',
@@ -245,7 +245,7 @@ NetworkDropdown.prototype.render = function () {
     ),
 
     this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcList, props.provider),
+    this.renderCommonRpc(rpcListDetail, props.provider),
 
     h(
       DropdownMenuItem,
@@ -295,33 +295,36 @@ NetworkDropdown.prototype.getNetworkName = function () {
   return name
 }
 
-NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
   const props = this.props
-  const rpcTarget = provider.rpcTarget
+  const { rpcTarget, type } = provider
   const network = props.network
 
-  return rpcList.map((rpc) => {
-    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+  return rpcListDetail.map((entry) => {
+    const rpc = entry.rpcUrl
+    const selected = type === 'rpc' && rpcTarget === rpc
+    if ((rpc === 'http://localhost:8545') || selected) {
       return null
     } else {
+      const chainId = entry.chainId || network
       return h(
         DropdownMenuItem,
         {
           key: `common${rpc}`,
           closeMenu: () => this.props.hideNetworkDropdown(),
-          onClick: () => props.setRpcTarget(rpc, network),
+          onClick: () => props.setRpcTarget(rpc, chainId),
           style: {
             fontSize: '16px',
             lineHeight: '20px',
             padding: '12px 0',
           },
         },
         [
-          rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+          selected ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
           h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
           h('span.network-name-item', {
             style: {
-              color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b',
+              color: selected ? '#ffffff' : '#9b9b9b',
             },
           }, rpc),
         ]

ui/app/components/pages/home.js

@@ -141,7 +141,7 @@ Home.propTypes = {
   loadingMessage: PropTypes.string,
   network: PropTypes.string,
   provider: PropTypes.object,
-  frequentRpcList: PropTypes.array,
+  frequentRpcListDetail: PropTypes.array,
   currentView: PropTypes.object,
   sidebarOpen: PropTypes.bool,
   isMascara: PropTypes.bool,
@@ -220,7 +220,7 @@ function mapStateToProps (state) {
     forgottenPassword: state.appState.forgottenPassword,
     nextUnreadNotice,
     lostAccounts,
-    frequentRpcList: state.metamask.frequentRpcList || [],
+    frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     currentCurrency: state.metamask.currentCurrency,
     isMouseUser: state.appState.isMouseUser,
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,