Validate URIs before entering them in.

2 files changed, 27 insertions, 2 deletions

diff --git a/package.json b/package.json
index a4b0ad676..4c33ad9ab 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "textarea-caret": "^3.0.1",
     "three.js": "^0.73.2",
     "through2": "^2.0.1",
+    "valid-url": "^1.0.9",
     "vreme": "^3.0.2",
     "web3": "0.17.0-beta",
     "web3-provider-engine": "^8.1.14",
diff --git a/ui/app/config.js b/ui/app/config.js
index 3730baf6b..bd828b3d5 100644
--- a/ui/app/config.js
+++ b/ui/app/config.js
@@ -4,11 +4,13 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
 const currencies = require('./conversion.json').rows
+const validUrl = require('valid-url')
 module.exports = connect(mapStateToProps)(ConfigScreen)
 
 function mapStateToProps (state) {
   return {
     metamask: state.metamask,
+    warning: state.appState.warning
   }
 }
 
@@ -20,6 +22,7 @@ function ConfigScreen () {
 ConfigScreen.prototype.render = function () {
   var state = this.props
   var metamaskState = state.metamask
+  var warning = state.warning
 
   return (
     h('.flex-column.flex-grow', [
@@ -34,6 +37,14 @@ ConfigScreen.prototype.render = function () {
         h('h2.page-subtitle', 'Settings'),
       ]),
 
+      h('.error', {
+        style: {
+          display: warning ? 'block' : 'none',
+          padding: '0 20px',
+          textAlign: 'center',
+        },
+      }, warning),
+
       // conf view
       h('.flex-column.flex-justify-center.flex-grow.select-none', [
         h('.flex-space-around', {
@@ -57,7 +68,7 @@ ConfigScreen.prototype.render = function () {
                 if (event.key === 'Enter') {
                   var element = event.target
                   var newRpc = element.value
-                  state.dispatch(actions.setRpcTarget(newRpc))
+                  rpcValidation(newRpc, state)
                 }
               },
             }),
@@ -69,7 +80,7 @@ ConfigScreen.prototype.render = function () {
                 event.preventDefault()
                 var element = document.querySelector('input#new_rpc')
                 var newRpc = element.value
-                state.dispatch(actions.setRpcTarget(newRpc))
+                rpcValidation(newRpc, state)
               },
             }, 'Save'),
           ]),
@@ -99,6 +110,19 @@ ConfigScreen.prototype.render = function () {
   )
 }
 
+function rpcValidation (newRpc, state) {
+  if (validUrl.isWebUri(newRpc)) {
+    state.dispatch(actions.setRpcTarget(newRpc))
+  } else {
+    var appendedRpc = `http://${newRpc}`
+    if (validUrl.isWebUri(appendedRpc)) {
+      state.dispatch(actions.displayWarning('URIs require the appropriate HTTP/HTTPS prefix.'))
+    } else {
+      state.dispatch(actions.displayWarning('Invalid RPC URI'))
+    }
+  }
+}
+
 function currentConversionInformation (metamaskState, state) {
   var currentFiat = metamaskState.currentFiat
   var conversionDate = metamaskState.conversionDate