Fix Secure API hangs (#3927)

* Use proxy for WS in dev

* Update SecureAPI

* Update webpack config

* Fix dev contract

* Update webpack

* Linting fixes

* Refactor Secure API logic : Promise based, no wastes of req

* Fix tests

* Add try 'intitial' token

js/src/views/Connection/connection.js

@@ -34,27 +34,26 @@ class Connection extends Component {
   static propTypes = {
     isConnected: PropTypes.bool,
     isConnecting: PropTypes.bool,
-    isPingable: PropTypes.bool,
     needsToken: PropTypes.bool
   }
 
   state = {
+    loading: false,
     token: '',
     validToken: false
   }
 
   render () {
-    const { isConnected, isConnecting, isPingable } = this.props;
-    const isOk = !isConnecting && isConnected && isPingable;
+    const { isConnected, needsToken } = this.props;
 
-    if (isOk) {
+    if (isConnected) {
       return null;
     }
 
-    const typeIcon = isPingable
+    const typeIcon = needsToken
       ? <NotificationVpnLock className={ styles.svg } />
       : <ActionDashboard className={ styles.svg } />;
-    const description = isPingable
+    const description = needsToken
       ? this.renderSigner()
       : this.renderPing();
 
@@ -82,7 +81,7 @@ class Connection extends Component {
   }
 
   renderSigner () {
-    const { token, validToken } = this.state;
+    const { loading, token, validToken } = this.state;
     const { isConnecting, needsToken } = this.props;
 
     if (needsToken && !isConnecting) {
@@ -93,9 +92,11 @@ class Connection extends Component {
             <Input
               label='secure token'
               hint='a generated token from Parity'
+              disabled={ loading }
               error={ validToken || (!token || !token.length) ? null : 'invalid signer token' }
               value={ token }
-              onChange={ this.onChangeToken } />
+              onChange={ this.onChangeToken }
+            />
           </div>
         </div>
       );
@@ -117,7 +118,7 @@ class Connection extends Component {
   }
 
   onChangeToken = (event, token) => {
-    const validToken = /[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}/.test(token);
+    const validToken = /[a-zA-Z0-9]{4}-?[a-zA-Z0-9]{4}-?[a-zA-Z0-9]{4}-?[a-zA-Z0-9]{4}/.test(token);
     this.setState({ token, validToken }, () => {
       validToken && this.setToken();
     });
@@ -127,15 +128,20 @@ class Connection extends Component {
     const { api } = this.context;
     const { token } = this.state;
 
-    api.updateToken(token, 0);
-    this.setState({ token: '', validToken: false });
+    this.setState({ loading: true });
+
+    api
+      .updateToken(token, 0)
+      .then((isValid) => {
+        this.setState({ loading: isValid || false, validToken: isValid });
+      });
   }
 }
 
 function mapStateToProps (state) {
-  const { isConnected, isConnecting, isPingable, needsToken } = state.nodeStatus;
+  const { isConnected, isConnecting, needsToken } = state.nodeStatus;
 
-  return { isConnected, isConnecting, isPingable, needsToken };
+  return { isConnected, isConnecting, needsToken };
 }
 
 function mapDispatchToProps (dispatch) {

js/src/views/WriteContract/writeContract.css

@@ -105,6 +105,8 @@
   display: flex;
   flex-direction: column;
   margin-right: 0.5em;
+  overflow: auto;
+
   .panel {
     background-color: rgba(0, 0, 0, 0.5);
     padding: 1em;

js/src/views/WriteContract/writeContract.js

@@ -21,6 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
+import { throttle } from 'lodash';
 
 import ContentClear from 'material-ui/svg-icons/content/clear';
 import SaveIcon from 'material-ui/svg-icons/content/save';
@@ -60,6 +61,8 @@ class WriteContract extends Component {
     if (worker !== undefined) {
       this.store.setWorker(worker);
     }
+
+    this.throttledResize = throttle(this.applyResize, 100, { leading: true });
   }
 
   componentDidMount () {
@@ -516,10 +519,16 @@ class WriteContract extends Component {
 
     const x = pageX - left;
 
-    this.setState({ size: 100 * x / width });
+    this.size = 100 * x / width;
+    this.throttledResize();
+
     event.stopPropagation();
   }
 
+  applyResize = () => {
+    this.setState({ size: this.size });
+  }
+
 }
 
 function mapStateToProps (state) {

js/src/views/WriteContract/writeContractStore.js

@@ -288,7 +288,7 @@ export default class WriteContractStore {
 
     const build = this.builds[this.selectedBuild];
     const version = build.longVersion;
-    const sourcecode = this.sourcecode.replace(/\n+/g, '\n').replace(/\s(\s+)/g, ' ');
+    const sourcecode = this.sourcecode.replace(/\s+/g, ' ');
     const hash = sha3(JSON.stringify({ version, sourcecode, optimize: this.optimize }));
 
     let promise = Promise.resolve(null);
@@ -302,7 +302,7 @@ export default class WriteContractStore {
     } else {
       promise = this
         .compile({
-          sourcecode: sourcecode,
+          sourcecode: this.sourcecode,
           build: build,
           optimize: this.optimize,
           files: this.files