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