support editable customRPC (#5267)

* support editable customRPC #5246

* remove rpcList size restriction

app/scripts/controllers/preferences.js

@@ -375,11 +375,12 @@ class PreferencesController {
    * Gets an updated rpc list from this.addToFrequentRpcList() and sets the `frequentRpcList` to this update list.
    *
    * @param {string} _url The the new rpc url to add to the updated list
+   * @param {bool} remove Remove selected url
    * @returns {Promise<void>} Promise resolves with undefined
    *
    */
-  updateFrequentRpcList (_url) {
-    return this.addToFrequentRpcList(_url)
+  updateFrequentRpcList (_url, remove = false) {
+    return this.addToFrequentRpcList(_url, remove)
       .then((rpcList) => {
         this.store.updateState({ frequentRpcList: rpcList })
         return Promise.resolve()
@@ -406,21 +407,19 @@ class PreferencesController {
    * end of the list. The current list is modified and returned as a promise.
    *
    * @param {string} _url The rpc url to add to the frequentRpcList.
+   * @param {bool} remove Remove selected url
    * @returns {Promise<array>} The updated frequentRpcList.
    *
    */
-  addToFrequentRpcList (_url) {
+  addToFrequentRpcList (_url, remove = false) {
     const rpcList = this.getFrequentRpcList()
     const index = rpcList.findIndex((element) => { return element === _url })
     if (index !== -1) {
       rpcList.splice(index, 1)
     }
-    if (_url !== 'http://localhost:8545') {
+    if (!remove && _url !== 'http://localhost:8545') {
       rpcList.push(_url)
     }
-    if (rpcList.length > 3) {
-      rpcList.shift()
-    }
     return Promise.resolve(rpcList)
   }
 

app/scripts/metamask-controller.js

@@ -376,6 +376,7 @@ module.exports = class MetamaskController extends EventEmitter {
       // network management
       setProviderType: nodeify(networkController.setProviderType, networkController),
       setCustomRpc: nodeify(this.setCustomRpc, this),
+      delCustomRpc: nodeify(this.delCustomRpc, this),
 
       // PreferencesController
       setSelectedAddress: nodeify(preferencesController.setSelectedAddress, preferencesController),
@@ -1439,6 +1440,14 @@ module.exports = class MetamaskController extends EventEmitter {
     return rpcTarget
   }
 
+  /**
+   * A method for deleting a selected custom URL.
+   * @param {string} rpcTarget - A RPC URL to delete.
+   */
+  async delCustomRpc (rpcTarget) {
+    await this.preferencesController.updateFrequentRpcList(rpcTarget, true)
+  }
+
   /**
    * Sets whether or not to use the blockie identicon format.
    * @param {boolean} val - True for bockie, false for jazzicon.

ui/app/actions.js

@@ -237,6 +237,7 @@ var actions = {
   removeSuggestedTokens,
   UPDATE_TOKENS: 'UPDATE_TOKENS',
   setRpcTarget: setRpcTarget,
+  delRpcTarget: delRpcTarget,
   setProviderType: setProviderType,
   SET_HARDWARE_WALLET_DEFAULT_HD_PATH: 'SET_HARDWARE_WALLET_DEFAULT_HD_PATH',
   setHardwareWalletDefaultHdPath,
@@ -1836,6 +1837,19 @@ function setRpcTarget (newRpc) {
   }
 }
 
+function delRpcTarget (oldRpc) {
+  return (dispatch) => {
+    log.debug(`background.delRpcTarget: ${oldRpc}`)
+    background.delCustomRpc(oldRpc, (err, result) => {
+      if (err) {
+        log.error(err)
+        return dispatch(self.displayWarning('Had a problem removing network!'))
+      }
+      dispatch(actions.setSelectedToken())
+    })
+  }
+}
+
 // Calls the addressBookController to add a new address.
 function addToAddressBook (recipient, nickname = '') {
   log.debug(`background.addToAddressBook`)

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

@@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) {
     setRpcTarget: (target) => {
       dispatch(actions.setRpcTarget(target))
     },
+    delRpcTarget: (target) => {
+      dispatch(actions.delRpcTarget(target))
+    },
     showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
@@ -300,6 +303,13 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
               color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
             },
           }, rpc),
+          h('i.fa.fa-times.delete',
+          {
+            onClick: (e) => {
+              e.stopPropagation()
+              props.delRpcTarget(rpc)
+            },
+          }),
         ]
       )
     }

ui/app/components/pages/settings/settings-tab/settings-tab.component.js

@@ -41,6 +41,7 @@ export default class SettingsTab extends PureComponent {
     setHexDataFeatureFlag: PropTypes.func,
     setCurrentCurrency: PropTypes.func,
     setRpcTarget: PropTypes.func,
+    delRpcTarget: PropTypes.func,
     displayWarning: PropTypes.func,
     revealSeedConfirmation: PropTypes.func,
     setFeatureFlagToBeta: PropTypes.func,

ui/app/css/itcss/components/network.scss

@@ -59,6 +59,15 @@
   font-weight: 500;
 }
 
+.dropdown-menu-item .fa.delete {
+    margin-right: 10px;
+    display: none;
+}
+
+.dropdown-menu-item:hover .fa.delete {
+    display: inherit;
+}
+
 .network-droppo {
   right: 2px;