Merge pull request #66 from poanetwork/remove-custom-rpc-from-the-list

(Feature) Remove custom RPC from the list of networks

app/images/remove.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+    <path fill="#FFF" fill-rule="evenodd" d="M9.714 1.634L6.345 5.003l3.369 3.369a.95.95 0 1 1-1.343 1.343L5.002 6.346 1.634 9.714A.952.952 0 1 1 .287 8.367l3.368-3.368L.316 1.66A.948.948 0 1 1 1.659.318l3.339 3.339L8.367.287a.952.952 0 1 1 1.347 1.347z" opacity=".502"/>
+</svg>

old-ui/app/app.js

@@ -266,6 +266,7 @@ App.prototype.renderNetworkDropdown = function () {
       position: 'absolute',
       left: '2px',
       top: '36px',
+      width: '270px',
     },
     innerStyle: {
       padding: '2px 16px 2px 0px',
@@ -706,6 +707,14 @@ App.prototype.renderCustomOption = function (provider) {
         },
         [h('div.selected-network'),
           label,
+          h('.remove-rpc', {
+            onClick: (event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              this.setState({ isNetworkMenuOpen: false })
+              props.dispatch(actions.showDeleteRPC(label))
+            },
+          }),
         ]
       )
   }
@@ -757,6 +766,14 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
         },
         [
           rpc,
+          h('.remove-rpc', {
+            onClick: (event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              this.setState({ isNetworkMenuOpen: false })
+              props.dispatch(actions.showDeleteRPC(rpc))
+            },
+          }),
         ]
       )
     }

old-ui/app/components/delete-rpc.js

@@ -8,7 +8,9 @@ module.exports = connect(mapStateToProps)(DeleteRpc)
 
 function mapStateToProps (state) {
   return {
-    url: state.metamask.provider.rpcTarget,
+    metamask: state.metamask,
+    url: state.appState.RPC_URL ? state.appState.RPC_URL : state.metamask.provider.rpcTarget,
+    provider: state.metamask.provider,
   }
 }
 
@@ -51,7 +53,7 @@ DeleteRpc.prototype.render = function () {
             margin: '20px',
           },
           onClick: () => {
-            this.props.dispatch(actions.removeCustomRPC(this.props.url))
+            this.props.dispatch(actions.removeCustomRPC(this.props.url, this.props.provider))
               .then(() => {
                 this.props.dispatch(actions.showConfigPage())
               })

old-ui/app/css/index.css

@@ -329,6 +329,18 @@ app sections
   background-position: right;
 }
 
+.remove-rpc {
+  background-image: url('../images/remove.svg');
+  background-size: 12px 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: 0;
+}
+
+
 @media (min--moz-device-pixel-ratio: 1.3),
          (-o-min-device-pixel-ratio: 2.6/2),
          (-webkit-min-device-pixel-ratio: 1.3),

ui/app/actions.js

@@ -2279,19 +2279,22 @@ function clearPendingTokens () {
   }
 }
 
-function showDeleteRPC (transitionForward = true) {
+function showDeleteRPC (RPC_URL, transitionForward = true) {
   return {
     type: actions.SHOW_DELETE_RPC,
     value: transitionForward,
+    RPC_URL,
   }
 }
 
-function removeCustomRPC (url) {
+function removeCustomRPC (url, provider) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     return new Promise((resolve, reject) => {
-      background.removeRpcUrl(url, (err, url) => {
-        dispatch(actions.setProviderType('poa'))
+      background.removeRpcUrl(url, (err, _url) => {
+        if (provider.type === 'rpc' && url === provider.rpcTarget) {
+          dispatch(actions.setProviderType('poa'))
+        }
         dispatch(actions.hideLoadingIndication())
         if (err) {
           dispatch(actions.displayWarning(err.message))

ui/app/reducers/app.js

@@ -717,6 +717,7 @@ function reduceApp (state, action) {
           context: appState.currentView.context,
         },
         transForward: action.value,
+        RPC_URL: action.RPC_URL,
       })
 
     default: